Merge remote-tracking branch 'upstream/main'

ui/console-src/modules/contents/posts/tags/TagList.vue

@@ -27,7 +27,7 @@ import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
 const editingModal = ref(false);
-const selectedTag = ref<Tag | null>(null);
+const selectedTag = ref<Tag>();
 
 const selectedTagNames = ref<string[]>([]);
 const checkedAll = ref(false);
@@ -66,7 +66,7 @@ const {
   sort: selectedSort,
 });
 
-const handleOpenEditingModal = (tag: Tag | null) => {
+const handleOpenEditingModal = (tag?: Tag) => {
   selectedTag.value = tag;
   editingModal.value = true;
 };
@@ -132,8 +132,9 @@ const handleSelectNext = async () => {
 };
 
 const onEditingModalClose = () => {
-  selectedTag.value = null;
+  selectedTag.value = undefined;
   queryName.value = null;
+  editingModal.value = false;
   handleFetchTags();
 };
 
@@ -157,7 +158,7 @@ watch(selectedTagNames, (newVal) => {
 </script>
 <template>
   <TagEditingModal
-    v-model:visible="editingModal"
+    v-if="editingModal"
     :tag="selectedTag"
     @close="onEditingModalClose"
     @next="handleSelectNext"

ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue

@@ -19,35 +19,32 @@ import SubmitButton from "@/components/button/SubmitButton.vue";
 import type { Tag } from "@halo-dev/api-client";
 
 // libs
-import { cloneDeep } from "lodash-es";
-import { reset } from "@formkit/core";
 import { setFocus } from "@/formkit/utils/focus";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import useSlugify from "@console/composables/use-slugify";
 import { useI18n } from "vue-i18n";
 import { FormType } from "@/types/slug";
+import { onMounted } from "vue";
+import { toRaw } from "vue";
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
-    tag: Tag | null;
+    tag?: Tag;
   }>(),
   {
-    visible: false,
-    tag: null,
+    tag: undefined,
   }
 );
 
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
   (event: "previous"): void;
   (event: "next"): void;
 }>();
 
 const { t } = useI18n();
 
-const initialFormState: Tag = {
+const formState = ref<Tag>({
   spec: {
     displayName: "",
     slug: "",
@@ -60,14 +57,13 @@ const initialFormState: Tag = {
     name: "",
     generateName: "tag-",
   },
-};
+});
+
+const modal = ref();
 
-const formState = ref<Tag>(cloneDeep(initialFormState));
 const saving = ref(false);
 
-const isUpdateMode = computed(() => {
-  return !!formState.value.metadata.creationTimestamp;
-});
+const isUpdateMode = computed(() => !!props.tag);
 
 const modalTitle = computed(() => {
   return isUpdateMode.value
@@ -104,7 +100,8 @@ const handleSaveTag = async () => {
         tag: formState.value,
       });
     }
-    onVisibleChange(false);
+
+    modal.value.close();
 
     Toast.success(t("core.common.toast.save_success"));
   } catch (e) {
@@ -114,37 +111,19 @@ const handleSaveTag = async () => {
   }
 };
 
-const onVisibleChange = (visible: boolean) => {
-  emit("update:visible", visible);
-  if (!visible) {
-    emit("close");
-  }
-};
-
-const handleResetForm = () => {
-  formState.value = cloneDeep(initialFormState);
-  reset("tag-form");
-};
-
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      setFocus("displayNameInput");
-    } else {
-      handleResetForm();
-    }
-  }
-);
+onMounted(() => {
+  setFocus("displayNameInput");
+});
 
 watch(
   () => props.tag,
   (tag) => {
     if (tag) {
-      formState.value = cloneDeep(tag);
-    } else {
-      handleResetForm();
+      formState.value = toRaw(tag);
     }
+  },
+  {
+    immediate: true,
   }
 );
 
@@ -164,12 +143,7 @@ const { handleGenerateSlug } = useSlugify(
 );
 </script>
 <template>
-  <VModal
-    :title="modalTitle"
-    :visible="visible"
-    :width="700"
-    @update:visible="onVisibleChange"
-  >
+  <VModal ref="modal" :title="modalTitle" :width="700" @close="emit('close')">
     <template #actions>
       <span @click="emit('previous')">
         <IconArrowLeft />
@@ -278,14 +252,13 @@ const { handleGenerateSlug } = useSlugify(
     <template #footer>
       <VSpace>
         <SubmitButton
-          v-if="visible"
           :loading="saving"
           type="secondary"
           :text="$t('core.common.buttons.submit')"
           @submit="$formkit.submit('tag-form')"
         >
         </SubmitButton>
-        <VButton @click="onVisibleChange(false)">
+        <VButton @click="modal.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>

ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue

@@ -118,7 +118,7 @@ const { data: setting } = useQuery<Setting>({
 
 provide<Ref<Setting | undefined>>("setting", setting);
 
-const handleTabChange = (id: string) => {
+const handleTabChange = (id: string | number) => {
   const tab = tabs.value.find((item) => item.id === id);
   if (tab) {
     activeTab.value = tab.id;

ui/package.json

@@ -71,18 +71,18 @@
     "@uppy/status-bar": "^3.2.5",
     "@uppy/vue": "^1.1.0",
     "@uppy/xhr-upload": "^3.6.0",
-    "@vueuse/components": "^10.3.0",
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/integrations": "^10.5.0",
-    "@vueuse/router": "^10.3.0",
-    "@vueuse/shared": "^10.3.0",
+    "@vueuse/components": "^10.9.0",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/integrations": "^10.9.0",
+    "@vueuse/router": "^10.9.0",
+    "@vueuse/shared": "^10.9.0",
     "axios": "^1.6.7",
     "codemirror": "^6.0.1",
     "colorjs.io": "^0.4.3",
     "cropperjs": "^1.5.13",
     "dayjs": "^1.11.7",
     "emoji-mart": "^5.3.3",
-    "floating-vue": "2.0.0-beta.24",
+    "floating-vue": "^5.2.2",
     "fuse.js": "^6.6.2",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
@@ -95,18 +95,18 @@
     "qs": "^6.11.1",
     "short-unique-id": "^5.0.2",
     "transliteration": "^2.3.5",
-    "vue": "^3.4.19",
+    "vue": "^3.4.27",
     "vue-demi": "^0.14.7",
     "vue-draggable-plus": "^0.4.1",
     "vue-grid-layout": "3.0.0-beta1",
-    "vue-i18n": "^9.9.1",
-    "vue-router": "^4.2.5"
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.2",
     "@iconify-json/mdi": "^1.1.50",
     "@iconify-json/vscode-icons": "^1.1.22",
-    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.0",
@@ -120,10 +120,10 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vitest/ui": "^0.34.1",
-    "@vue/compiler-sfc": "^3.4.19",
+    "@vue/compiler-sfc": "^3.4.27",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "^2.4.4",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.14",
     "c8": "^7.12.0",
@@ -153,7 +153,7 @@
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-pwa": "^0.20.0",
     "vite-plugin-static-copy": "^1.0.4",
-    "vite-plugin-vue-devtools": "^7.1.3",
+    "vite-plugin-vue-devtools": "^7.2.1",
     "vitest": "^0.34.1",
     "vue-tsc": "^1.8.27"
   }

ui/packages/components/package.json

@@ -58,11 +58,11 @@
     "react-dom": "^18.2.0",
     "storybook": "^7.6.3",
     "unplugin-icons": "^0.14.15",
-    "vite-plugin-dts": "^2.3.0"
+    "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
   },
   "exports": {
     ".": {
@@ -72,6 +72,6 @@
     "./dist/style.css": "./dist/style.css"
   },
   "dependencies": {
-    "floating-vue": "2.0.0-beta.24"
+    "floating-vue": "^5.2.2"
   }
 }

ui/packages/components/src/components/alert/Alert.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { Component } from "vue";
-import { computed } from "vue";
+import { computed, markRaw } from "vue";
 import type { Type } from "./interface";
 import {
   IconCheckboxCircle,
@@ -9,13 +8,15 @@ import {
   IconErrorWarning,
   IconInformation,
 } from "../../icons/icons";
-
-const TypeIcons: Record<Type, Component> = {
-  success: IconCheckboxCircle,
-  info: IconInformation,
-  default: IconInformation,
-  warning: IconErrorWarning,
-  error: IconCloseCircle,
+import type { FunctionalComponent, Raw } from "vue";
+import type { SVGAttributes } from "vue";
+
+const TypeIcons: Record<Type, Raw<FunctionalComponent<SVGAttributes>>> = {
+  success: markRaw(IconCheckboxCircle),
+  info: markRaw(IconInformation),
+  default: markRaw(IconInformation),
+  warning: markRaw(IconErrorWarning),
+  error: markRaw(IconCloseCircle),
 };
 
 const props = withDefaults(

ui/packages/components/src/components/dropdown/Dropdown.vue

@@ -1,13 +1,17 @@
 <script lang="ts" setup>
-import { Dropdown as FloatingDropdown, type Placement } from "floating-vue";
+import {
+  Dropdown as FloatingDropdown,
+  type Placement,
+  type TriggerEvent,
+} from "floating-vue";
 import "floating-vue/dist/style.css";
 import { provide, ref } from "vue";
 import { DropdownContextInjectionKey } from "./symbols";
 
 withDefaults(
   defineProps<{
     placement?: Placement;
-    triggers?: string[];
+    triggers?: TriggerEvent[];
     classes?: string[];
   }>(),
   {
@@ -41,7 +45,7 @@ defineExpose({
     ref="dropdownRef"
     :placement="placement"
     :triggers="triggers"
-    :dispose-timeout="null"
+    :dispose-timeout="0"
     @show="emit('show')"
   >
     <slot />

ui/packages/components/src/components/dropdown/index.ts

@@ -1,5 +1,6 @@
 export { default as VDropdown } from "./Dropdown.vue";
 export { default as VDropdownItem } from "./DropdownItem.vue";
 export { default as VDropdownDivider } from "./DropdownDivider.vue";
-export { VClosePopper } from "floating-vue";
+// VClosePopper is deprecated, please use vClosePopper from "@halo-dev/components" instead
+export { vClosePopper as VClosePopper, vClosePopper } from "floating-vue";
 export * from "./symbols";

ui/packages/components/src/components/tooltip/index.ts

@@ -1,2 +1,3 @@
-export { VTooltip } from "floating-vue";
+// VTooltip is deprecated, please use vTooltip from "@halo-dev/components" instead
+export { vTooltip, vTooltip as VTooltip } from "floating-vue";
 import "./style.css";

ui/packages/components/vite.config.ts

@@ -13,9 +13,9 @@ export default defineConfig({
     VueJsx(),
     Icons({ compiler: "vue3" }),
     Dts({
-      tsConfigFilePath: "./tsconfig.app.json",
+      tsconfigPath: "./tsconfig.app.json",
       entryRoot: "./src",
-      outputDir: "./dist",
+      outDir: "./dist",
       insertTypesEntry: true,
     }) as Plugin,
   ],

ui/packages/editor/package.json

@@ -79,7 +79,7 @@
     "@tiptap/pm": "^2.4.0",
     "@tiptap/suggestion": "^2.4.0",
     "@tiptap/vue-3": "^2.4.0",
-    "floating-vue": "2.0.0-beta.24",
+    "floating-vue": "^5.2.2",
     "github-markdown-css": "^5.2.0",
     "highlight.js": "11.8.0",
     "linkifyjs": "^4.1.3",
@@ -91,9 +91,9 @@
     "@iconify/json": "^2.2.117",
     "@types/linkifyjs": "^2.1.7",
     "release-it": "^16.1.5",
-    "vite-plugin-dts": "^3.7.3"
+    "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {
-    "vue": "^3.4.19"
+    "vue": "^3.4.27"
   }
 }

ui/packages/editor/src/components/block/BlockActionButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VTooltip } from "floating-vue";
+import { vTooltip } from "floating-vue";
 
 withDefaults(
   defineProps<{