refactor: migrate to props destructure

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/content/Accordion.vue

@@ -1,7 +1,7 @@
 <template>
   <UiAccordion
-    :type="type"
-    :collapsible="collapsible"
+    :type
+    :collapsible
     :default-value="defaultValue"
     class="[&:not(:first-child)]:mt-5"
   >
@@ -10,11 +10,9 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+const { type = 'single' } = defineProps<{
   type?: 'single' | 'multiple';
   collapsible?: boolean;
   defaultValue: string | string[];
-}>(), {
-  type: 'single',
-});
+}>();
 </script>

components/content/Alert.vue

@@ -25,19 +25,21 @@
 </template>
 
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
+const {
+  to,
+  target,
+  type = 'default',
+  external = undefined,
+  inStack = false,
+} = defineProps<{
   title?: string;
   icon?: string;
   type?: 'default' | 'info' | 'warning' | 'success' | 'danger';
   to?: string;
-  target?: string;
+  target?: Target;
   external?: boolean;
   inStack?: boolean;
-}>(), {
-  type: 'default',
-  external: undefined,
-  inStack: false,
-});
+}>();
 
 const typeTwClass = {
   default: '',
@@ -48,15 +50,15 @@ const typeTwClass = {
 };
 
 async function alertClick() {
-  if (props.to) {
-    if (props.target) {
-      await navigateTo(props.to, {
-        external: props.external ?? props.to.startsWith('http'),
-        open: { target: props.target },
+  if (to) {
+    if (target) {
+      await navigateTo(to, {
+        external: external ?? to.startsWith('http'),
+        open: { target },
       });
     } else {
-      await navigateTo(props.to, {
-        external: props.external ?? props.to.startsWith('http'),
+      await navigateTo(to, {
+        external: external ?? to.startsWith('http'),
       });
     }
   }

components/content/Badge.vue

@@ -1,27 +1,27 @@
 <template>
-  <NuxtLink :to="to" :target="target" class="mx-0.5">
-    <UiBadge :variant="variant" :class="typeTwClass[type]">
+  <NuxtLink :to :target class="mx-0.5">
+    <UiBadge :variant :class="typeTwClass[type]">
       <ContentSlot unwrap="p" />
     </UiBadge>
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
+const {
+  type = 'default',
+  variant = 'default',
+} = defineProps<{
   type?: 'default' | 'info' | 'warning' | 'success' | 'danger';
   to?: string;
-  target?: string;
+  target?: Target;
   variant?: 'default' | 'secondary' | 'destructive' | 'outline';
-}>(), {
-  type: 'default',
-  variant: 'default',
-});
+}>();
 
 const typeTwClass = {
   default: '',
-  info: `${props.variant !== 'outline' && 'bg-sky-500 hover:bg-sky-400'} ${props.variant === 'outline' && 'border-sky-500 text-sky-500'}`,
-  warning: `${props.variant !== 'outline' && 'bg-amber-500 hover:bg-amber-400'} ${props.variant === 'outline' && 'border-amber-500 text-amber-500'}`,
-  success: `${props.variant !== 'outline' && 'bg-green-500 hover:bg-green-400'} ${props.variant === 'outline' && 'border-green-500 text-green-500'}`,
-  danger: `${props.variant !== 'outline' && 'bg-red-500 hover:bg-red-400'} ${props.variant === 'outline' && 'border-red-500 text-red-500'}`,
+  info: `${variant !== 'outline' && 'bg-sky-500 hover:bg-sky-400'} ${variant === 'outline' && 'border-sky-500 text-sky-500'}`,
+  warning: `${variant !== 'outline' && 'bg-amber-500 hover:bg-amber-400'} ${variant === 'outline' && 'border-amber-500 text-amber-500'}`,
+  success: `${variant !== 'outline' && 'bg-green-500 hover:bg-green-400'} ${variant === 'outline' && 'border-green-500 text-green-500'}`,
+  danger: `${variant !== 'outline' && 'bg-red-500 hover:bg-red-400'} ${variant === 'outline' && 'border-red-500 text-red-500'}`,
 };
 </script>

components/content/Callout.vue

@@ -1,5 +1,5 @@
 <template>
-  <Alert :icon="icon" :to="to" :target="target">
+  <Alert :icon :to :target>
     <slot />
   </Alert>
 </template>
@@ -8,6 +8,6 @@
 defineProps<{
   icon?: string;
   to?: string;
-  target?: string;
+  target?: Target;
 }>();
 </script>

components/content/Card.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="group-has-[div]:mt-0 [&:not(:first-child)]:mt-5">
-    <NuxtLink :to="to" :target="target">
+    <NuxtLink :to :target>
       <UiCard
         class="relative h-full transition-all"
         :class="[
@@ -40,7 +40,7 @@ defineProps<{
   footer?: string;
   content?: string;
   to?: string;
-  target?: string;
+  target?: Target;
   icon?: string;
   inStack?: boolean;
 }>();

components/content/CodeCopy.vue

@@ -20,17 +20,17 @@
 <script setup lang="ts">
 import { useToast } from '@/components/ui/toast/use-toast';
 
-const props = defineProps<{
+const { code } = defineProps<{
   code: string;
 }>();
 
 const { toast } = useToast();
 
-const { copy } = useClipboard({ source: props.code });
+const { copy } = useClipboard({ source: code });
 const copied = ref(false);
 
 async function handleClick() {
-  await copy(props.code);
+  await copy(code);
   copied.value = true;
 
   if (useConfig().value.main.codeCopyToast) {

components/content/Hero.vue

@@ -45,7 +45,7 @@
 defineProps<{
   announcement?: {
     to?: string;
-    target?: string;
+    target?: Target;
     icon?: string;
     title: string;
   };
@@ -55,7 +55,7 @@ defineProps<{
     rightIcon?: string;
     variant?: 'default' | 'link' | 'destructive' | 'outline' | 'secondary' | 'ghost';
     to: string;
-    target?: string;
+    target?: Target;
   }];
 }>();
 </script>

components/content/HeroAlt.vue

@@ -42,7 +42,7 @@
 defineProps<{
   announcement?: {
     to?: string;
-    target?: string;
+    target?: Target;
     icon?: string;
     title: string;
   };
@@ -52,7 +52,7 @@ defineProps<{
     rightIcon?: string;
     variant?: 'default' | 'link' | 'destructive' | 'outline' | 'secondary' | 'ghost';
     to: string;
-    target?: string;
+    target?: Target;
   }];
 }>();
 </script>

components/content/Kbd.vue

@@ -8,11 +8,9 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+const { size = 'sm' } = defineProps<{
   size?: 'xs' | 'sm' | 'md';
-}>(), {
-  size: 'sm',
-});
+}>();
 
 const sizeClasses = {
   xs: 'min-h-4 text-[10px] h-4 px-1',

components/content/ProseA.vue

@@ -10,22 +10,12 @@
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue';
-
-defineProps({
-  href: {
-    type: String,
-    default: '',
-  },
-  target: {
-    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
-    default: undefined,
-    required: false,
-  },
-  external: {
-    type: Boolean,
-    default: undefined,
-    required: false,
-  },
-});
+const {
+  href = '',
+  external = false,
+} = defineProps<{
+  href?: string;
+  target?: Target;
+  external?: boolean;
+}>();
 </script>

components/content/ProseCode.vue

@@ -9,11 +9,11 @@
     <div v-if="!inGroup && filename" class="flex border-b p-3 font-mono text-sm">
       <SmartIcon v-if="icon" :name="icon" class="mr-1.5 self-center" />
       {{ filename }}
-      <CodeCopy :code="code" class="ml-auto mr-1" />
+      <CodeCopy :code class="ml-auto mr-1" />
     </div>
 
     <span v-if="!filename" class="absolute right-3 top-3 z-10">
-      <CodeCopy :code="code" />
+      <CodeCopy :code />
     </span>
     <div class="bg-muted/30">
       <UiScrollArea>

components/content/ProseH1.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 :id="id" class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+  <h1 :id class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
     <NuxtLink
       v-if="generate"
       :href="`#${id}`"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => props.id && headings?.anchorLinks?.h1);
+const generate = computed(() => id && headings?.anchorLinks?.h1);
 </script>

components/content/ProseH2.vue

@@ -1,5 +1,5 @@
 <template>
-  <h2 :id="id" class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10">
+  <h2 :id class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10">
     <NuxtLink
       v-if="id && generate"
       :href="`#${id}`"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => props.id && headings?.anchorLinks?.h2);
+const generate = computed(() => id && headings?.anchorLinks?.h2);
 </script>

components/content/ProseH3.vue

@@ -1,5 +1,5 @@
 <template>
-  <h3 :id="id" class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8">
+  <h3 :id class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8">
     <NuxtLink
       v-if="id && generate"
       :href="`#${id}`"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => props.id && headings?.anchorLinks?.h3);
+const generate = computed(() => id && headings?.anchorLinks?.h3);
 </script>

components/content/ProseH4.vue

@@ -1,5 +1,5 @@
 <template>
-  <h4 :id="id" class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+  <h4 :id class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6">
     <NuxtLink
       v-if="id && generate"
       :href="`#${id}`"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => props.id && headings?.anchorLinks?.h4);
+const generate = computed(() => id && headings?.anchorLinks?.h4);
 </script>

components/content/ProseH5.vue

@@ -1,5 +1,5 @@
 <template>
-  <h5 :id="id" class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+  <h5 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
     <NuxtLink
       v-if="id && generate"
       :href="`#${id}`"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => props.id && headings?.anchorLinks?.h4);
+const generate = computed(() => id && headings?.anchorLinks?.h4);
 </script>

components/content/ProseH6.vue

@@ -1,5 +1,5 @@
 <template>
-  <h6 :id="id" class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+  <h6 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
     <NuxtLink
       v-if="id && generate"
       :href="`#${id}`"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>();
 
 const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => props.id && headings?.anchorLinks?.h4);
+const generate = computed(() => id && headings?.anchorLinks?.h4);
 </script>

components/content/ProseImg.vue

@@ -1,9 +1,9 @@
 <template>
   <NuxtImg
     :src="refinedSrc"
-    :alt="alt"
-    :width="width"
-    :height="height"
+    :alt
+    :width
+    :height
     class="rounded-md [&:not(:first-child)]:mt-8 [&:not(:last-child)]:mb-8"
   />
 </template>

components/content/ProsePre.vue

@@ -40,5 +40,8 @@ defineProps({
 </script>
 
 <style>
-pre code .line{display:block;min-height:1rem}
+pre code .line{
+  display: block;
+  min-height: 1rem
+}
 </style>