refactor: use vue3.3 defineModel

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>