refactor: use vue3.3 defineModel

package.json

@@ -19,39 +19,39 @@
     "@headlessui/vue": "^1.7.13",
     "@vueuse/core": "^8.9.4",
     "axios": "^0.27.2",
-    "pinia": "^2.0.36",
-    "vue": "^3.3.2",
-    "vue-router": "^4.2.0"
+    "pinia": "^2.1.3",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.6",
     "@icon-park/vue-next": "^1.4.2",
-    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-interactions": "^7.0.11",
-    "@storybook/addon-links": "^7.0.11",
-    "@storybook/blocks": "^7.0.11",
+    "@storybook/addon-essentials": "^7.0.12",
+    "@storybook/addon-interactions": "^7.0.12",
+    "@storybook/addon-links": "^7.0.12",
+    "@storybook/blocks": "^7.0.12",
     "@storybook/testing-library": "0.0.14-next.2",
-    "@storybook/vue3": "^7.0.11",
-    "@storybook/vue3-vite": "^7.0.11",
-    "@types/node": "^18.16.8",
-    "@unocss/preset-rem-to-px": "^0.51.12",
-    "@unocss/reset": "^0.51.12",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "eslint": "^8.40.0",
+    "@storybook/vue3": "^7.0.12",
+    "@storybook/vue3-vite": "^7.0.12",
+    "@types/node": "^18.16.14",
+    "@unocss/preset-rem-to-px": "^0.51.13",
+    "@unocss/reset": "^0.51.13",
+    "@vitejs/plugin-vue": "^4.2.0",
+    "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-storybook": "^0.6.12",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.62.1",
-    "storybook": "^7.0.11",
+    "storybook": "^7.0.12",
     "typescript": "^4.9.5",
-    "unocss": "^0.51.12",
+    "unocss": "^0.51.13",
     "unplugin-auto-import": "^0.10.3",
     "unplugin-vue-components": "^0.24.1",
     "unplugin-vue-router": "^0.6.4",
-    "vite": "^3.2.6",
+    "vite": "^4.3.5",
     "vitest": "^0.30.1",
-    "vue-tsc": "^0.38.9"
+    "vue-tsc": "^1.6.4"
   }
 }

src/App.vue

@@ -1,8 +1,4 @@
-<script setup lang="ts">
-definePage({
-  name: 'Player',
-});
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <Suspense>

src/auto-imports.d.ts

@@ -146,6 +146,7 @@ declare global {
   const useClamp: typeof import('@vueuse/core')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfigStore: typeof import('./store/config')['useConfigStore']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']

src/basic/ab-checkbox.vue

@@ -1,23 +1,16 @@
 <script lang="ts" setup>
 import { Switch } from '@headlessui/vue';
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
-    modelValue: boolean;
     small?: boolean;
   }>(),
   {
-    modelValue: false,
     small: false,
   }
 );
 
-const emit = defineEmits(['update:modelValue']);
-
-const checked = ref(props.modelValue);
-watchEffect(() => {
-  emit('update:modelValue', checked.value);
-});
+const checked = defineModel<boolean>({ default: false });
 </script>
 
 <template>

src/basic/ab-page-title.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const props = withDefaults(
+withDefaults(
   defineProps<{
     title: string;
   }>(),

src/basic/ab-search.vue

@@ -4,9 +4,11 @@ import { Search } from '@icon-park/vue-next';
 const props = withDefaults(
   defineProps<{
     value?: string;
+    placeholder?: string;
   }>(),
   {
     value: '',
+    placeholder: '',
   }
 );
 
@@ -25,6 +27,7 @@ const onSearch = () => {
 <template>
   <div
     bg="#7752B4"
+    text-white
     fx-cer
     rounded-12px
     h-36px
@@ -46,6 +49,7 @@ const onSearch = () => {
     <input
       type="text"
       :value="value"
+      :placeholder="placeholder"
       @input="onInput"
       @keyup.enter="onSearch"
       input-reset

src/basic/ab-select.vue

@@ -6,13 +6,7 @@ import {
   ListboxOptions,
 } from '@headlessui/vue';
 import { Down, Up } from '@icon-park/vue-next';
-
-export interface SelectItem {
-  id: number;
-  label?: string;
-  value: string;
-  disabled?: boolean;
-}
+import type { SelectItem } from '#/components';
 
 const props = withDefaults(
   defineProps<{

src/basic/ab-switch.vue

@@ -1,20 +1,8 @@
 <script lang="ts" setup>
 import { Switch } from '@headlessui/vue';
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean;
-  }>(),
-  {
-    modelValue: false,
-  }
-);
-
-const emit = defineEmits(['update:modelValue']);
-
-const checked = ref(props.modelValue);
-watchEffect(() => {
-  emit('update:modelValue', checked.value);
+const checked = defineModel<boolean>('checked', {
+  default: false,
 });
 </script>
 

src/components.d.ts

@@ -21,12 +21,14 @@ declare module '@vue/runtime-core' {
     AbPopup: typeof import('./components/ab-popup.vue')['default']
     AbSearch: typeof import('./basic/ab-search.vue')['default']
     AbSelect: typeof import('./basic/ab-select.vue')['default']
+    AbSetting: typeof import('./components/ab-setting.vue')['default']
     AbSidebar: typeof import('./views/ab-sidebar.vue')['default']
     AbStatus: typeof import('./basic/ab-status.vue')['default']
     AbStatusBar: typeof import('./components/ab-status-bar.vue')['default']
     AbSwitch: typeof import('./basic/ab-switch.vue')['default']
     AbTopbar: typeof import('./views/ab-topbar.vue')['default']
     BangumiCard: typeof import('./components/bangumi-card.vue')['default']
+    ConfigNormal: typeof import('./views/config-normal.vue')['default']
     copy: typeof import('./basic/ab-switch copy.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/ab-container.vue

@@ -22,6 +22,8 @@ const props = withDefaults(
       select-none
     >
       <div text-h2>{{ title }}</div>
+
+      <slot name="title-right"></slot>
     </div>
 
     <div p-20px bg-white>

src/components/ab-fold-panel.vue

@@ -31,10 +31,10 @@ const props = withDefaults(
 
       <div bg-white px-8px py-20px>
         <DisclosurePanel>
-          <slot name="title"></slot>
+          <slot name="top"></slot>
         </DisclosurePanel>
 
-        <div line></div>
+        <div line my-12px></div>
 
         <DisclosurePanel>
           <slot></slot>

types/components.ts

@@ -0,0 +1,6 @@
+export type SelectItem = {
+  id: number;
+  label?: string;
+  value: string;
+  disabled?: boolean;
+};

vite.config.ts

@@ -14,7 +14,11 @@ export default defineConfig({
     VueRouter({
       dts: 'src/router-type.d.ts',
     }),
-    vue(),
+    vue({
+      script: {
+        defineModel: true,
+      },
+    }),
     UnoCSS(),
     AutoImport({
       imports: ['vue', 'vitest', 'pinia', '@vueuse/core', VueRouterAutoImports],