refactor: remove withDefaults macro and clean up reactive props destructuring (#3217)

components/common/CommonBlurhash.vue

@@ -3,7 +3,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
+const { blurhash = '', shouldLoadImage = true } = defineProps<{
   blurhash?: string
   src: string
   srcset?: string

components/common/CommonCropImage.vue

@@ -3,25 +3,18 @@ import type { Boundaries } from 'vue-advanced-cropper'
 import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 
-export interface Props {
+const { stencilAspectRatio = 1 / 1, stencilSizePercentage = 0.9 } = defineProps<{
   /** 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 */
   stencilSizePercentage?: number
-}
-const props = withDefaults(defineProps<Props>(), {
-  stencilAspectRatio: 1 / 1,
-  stencilSizePercentage: 0.9,
-})
+}>()
 
 const file = defineModel<File | null>()
 
 const cropperDialog = ref(false)
-
 const cropper = ref<InstanceType<typeof Cropper>>()
-
 const cropperFlag = ref(false)
-
 const cropperImage = reactive({
   src: '',
   type: 'image/jpg',
@@ -29,8 +22,8 @@ const cropperImage = reactive({
 
 function stencilSize({ boundaries }: { boundaries: Boundaries }) {
   return {
-    width: boundaries.width * props.stencilSizePercentage,
-    height: boundaries.height * props.stencilSizePercentage,
+    width: boundaries.width * stencilSizePercentage,
+    height: boundaries.height * stencilSizePercentage,
   }
 }
 
@@ -82,7 +75,7 @@ function cropImage() {
           }"
           :stencil-size="stencilSize"
           :stencil-props="{
-            aspectRatio: props.stencilAspectRatio,
+            aspectRatio: stencilAspectRatio,
             movable: false,
             resizable: false,
             handlers: {},

components/common/CommonInputImage.vue

@@ -2,21 +2,21 @@
 import type { FileWithHandle } from 'browser-fs-access'
 import { fileOpen } from 'browser-fs-access'
 
-const props = withDefaults(defineProps<{
+const {
+  original,
+  allowedFileTypes = ['image/jpeg', 'image/png'],
+  allowedFileSize = 1024 * 1024 * 5, // 5 MB
+} = defineProps<{
   /** The image src before change */
   original?: string
   /** Allowed file types */
   allowedFileTypes?: string[]
   /** Allowed file size */
   allowedFileSize?: number
-
   imgClass?: string
-
   loading?: boolean
-}>(), {
-  allowedFileTypes: () => ['image/jpeg', 'image/png'],
-  allowedFileSize: 1024 * 1024 * 5, // 5 MB
-})
+}>()
+
 const emit = defineEmits<{
   (event: 'pick', value: FileWithHandle): void
   (event: 'error', code: number, message: string): void
@@ -26,7 +26,7 @@ const file = defineModel<FileWithHandle | null>()
 
 const { t } = useI18n()
 
-const defaultImage = computed(() => props.original || '')
+const defaultImage = computed(() => original || '')
 /** Preview of selected images */
 const previewImage = ref('')
 /** The current images on display */
@@ -37,14 +37,14 @@ async function pickImage() {
     return
   const image = await fileOpen({
     description: 'Image',
-    mimeTypes: props.allowedFileTypes,
+    mimeTypes: allowedFileTypes,
   })
 
-  if (!props.allowedFileTypes.includes(image.type)) {
+  if (!allowedFileTypes.includes(image.type)) {
     emit('error', 1, t('error.unsupported_file_format'))
     return
   }
-  else if (image.size > props.allowedFileSize) {
+  else if (image.size > allowedFileSize) {
     emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
     return
   }

components/common/CommonMask.vue

@@ -2,7 +2,7 @@
 const {
   zIndex = 100,
   background = 'transparent',
-} = $defineProps<{
+} = defineProps<{
   zIndex?: number
   background?: string
 }>()

components/common/CommonPaginator.vue

@@ -6,10 +6,10 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 const {
   paginator,
-  stream,
-  eventType,
   keyProp = 'id',
   virtualScroller = false,
+  stream,
+  eventType,
   preprocess,
   endMessage = true,
 } = defineProps<{

components/common/CommonRouteTabs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
 
-const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
+const { options, command, preventScrollTop = false } = defineProps<{
   options: CommonRouteTabOption[]
   moreOptions?: CommonRouteTabMoreOption
   command?: boolean

components/common/LocalizedNumber.vue

@@ -3,16 +3,16 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<{
+const { count } = defineProps<{
   count: number
   keypath: string
 }>()
 
 const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
 
-const useSR = computed(() => forSR(props.count))
-const rawNumber = computed(() => formatNumber(props.count))
-const humanReadableNumber = computed(() => formatHumanReadableNumber(props.count))
+const useSR = computed(() => forSR(count))
+const rawNumber = computed(() => formatNumber(count))
+const humanReadableNumber = computed(() => formatHumanReadableNumber(count))
 </script>
 
 <template>

components/common/dropdown/DropdownItem.vue

@@ -4,7 +4,6 @@ const {
   text,
   description,
   icon,
-  checked,
   command,
 } = defineProps<{
   is?: string