refactor: use defineModel

components/common/CommonAlert.vue

@@ -1,14 +1,10 @@
 <script lang="ts" setup>
-const props = withDefaults(defineProps<{
-  modelValue?: boolean
-}>(), {
-  modelValue: true,
-})
 const emit = defineEmits<{
-  (e: 'update:modelValue', v: boolean): void
   (event: 'close'): void
 }>()
-const visible = useVModel(props, 'modelValue', emit, { passive: true })
+const { modelValue: visible } = defineModel<{
+  modelValue?: boolean
+}>()
 
 function close() {
   emit('close')

components/common/CommonCropImage.vue

@@ -4,8 +4,6 @@ import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 
 export interface Props {
-  /** Images to be cropped */
-  modelValue?: File | null
   /** Crop frame aspect ratio (width/height), default 1/1 */
   stencilAspectRatio?: number
   /** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */
@@ -16,12 +14,11 @@ const props = withDefaults(defineProps<Props>(), {
   stencilSizePercentage: 0.9,
 })
 
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: File): void
+const { modelValue: file } = defineModel<{
+  /** Images to be cropped */
+  modelValue: File | null
 }>()
 
-const vmFile = useVModel(props, 'modelValue', emit, { passive: true })
-
 const cropperDialog = ref(false)
 
 const cropper = ref<InstanceType<typeof Cropper>>()
@@ -40,7 +37,7 @@ const stencilSize = ({ boundaries }: { boundaries: Boundaries }) => {
   }
 }
 
-watch(vmFile, (file, _, onCleanup) => {
+watch(file, (file, _, onCleanup) => {
   let expired = false
   onCleanup(() => expired = true)
 
@@ -59,12 +56,12 @@ watch(vmFile, (file, _, onCleanup) => {
 })
 
 const cropImage = () => {
-  if (cropper.value && vmFile.value) {
+  if (cropper.value && file.value) {
     cropperFlag.value = true
     cropperDialog.value = false
     const { canvas } = cropper.value.getResult()
     canvas?.toBlob((blob) => {
-      vmFile.value = new File([blob as any], `cropped${vmFile.value?.name}` as string, { type: blob?.type })
+      file.value = new File([blob as any], `cropped${file.value?.name}` as string, { type: blob?.type })
     }, cropperImage.type)
   }
 }

components/common/CommonInputImage.vue

@@ -3,7 +3,6 @@ import { fileOpen } from 'browser-fs-access'
 import type { FileWithHandle } from 'browser-fs-access'
 
 const props = withDefaults(defineProps<{
-  modelValue?: FileWithHandle | null
   /** The image src before change */
   original?: string
   /** Allowed file types */
@@ -19,12 +18,13 @@ const props = withDefaults(defineProps<{
   allowedFileSize: 1024 * 1024 * 5, // 5 MB
 })
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: FileWithHandle): void
   (event: 'pick', value: FileWithHandle): void
   (event: 'error', code: number, message: string): void
 }>()
 
-const file = useVModel(props, 'modelValue', emit, { passive: true })
+const { modelValue: file } = defineModel<{
+  modelValue: FileWithHandle | null
+}>()
 
 const { t } = useI18n()