From 4ed5a9293fcdff115d7a491f53696710794e1e63 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Mon, 14 Oct 2024 13:35:33 +0800
Subject: [PATCH] refactor: migrate to props destructure

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 components/content/Accordion.vue              | 10 +++----
 components/content/Alert.vue                  | 30 ++++++++++---------
 components/content/Badge.vue                  | 24 +++++++--------
 components/content/Callout.vue                |  4 +--
 components/content/Card.vue                   |  4 +--
 components/content/CodeCopy.vue               |  6 ++--
 components/content/Hero.vue                   |  4 +--
 components/content/HeroAlt.vue                |  4 +--
 components/content/Kbd.vue                    |  6 ++--
 components/content/ProseA.vue                 | 26 +++++-----------
 components/content/ProseCode.vue              |  4 +--
 components/content/ProseH1.vue                |  6 ++--
 components/content/ProseH2.vue                |  6 ++--
 components/content/ProseH3.vue                |  6 ++--
 components/content/ProseH4.vue                |  6 ++--
 components/content/ProseH5.vue                |  6 ++--
 components/content/ProseH6.vue                |  6 ++--
 components/content/ProseImg.vue               |  6 ++--
 components/content/ProsePre.vue               |  5 +++-
 components/content/ReadMore.vue               | 10 +++++--
 components/content/SmartIcon.vue              |  8 ++---
 components/content/Steps.vue                  |  6 ++--
 components/content/Tabs.vue                   | 12 ++++----
 .../2.api/1.configuration/1.shadcn-docs.md    |  6 ++--
 types/index.d.ts                              |  2 ++
 25 files changed, 104 insertions(+), 109 deletions(-)

diff --git a/components/content/Accordion.vue b/components/content/Accordion.vue
index 5864beaf..b315a110 100644
--- a/components/content/Accordion.vue
+++ b/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>
diff --git a/components/content/Alert.vue b/components/content/Alert.vue
index 7f4475ef..1208d841 100644
--- a/components/content/Alert.vue
+++ b/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'),
       });
     }
   }
diff --git a/components/content/Badge.vue b/components/content/Badge.vue
index 226ecd3f..81f10038 100644
--- a/components/content/Badge.vue
+++ b/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>
diff --git a/components/content/Callout.vue b/components/content/Callout.vue
index 88af496b..7a41d5c6 100644
--- a/components/content/Callout.vue
+++ b/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>
diff --git a/components/content/Card.vue b/components/content/Card.vue
index cef00ef6..eaadf3dc 100644
--- a/components/content/Card.vue
+++ b/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;
 }>();
diff --git a/components/content/CodeCopy.vue b/components/content/CodeCopy.vue
index 08322f1e..11745fbf 100644
--- a/components/content/CodeCopy.vue
+++ b/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) {
diff --git a/components/content/Hero.vue b/components/content/Hero.vue
index dfaacf4f..969c369f 100644
--- a/components/content/Hero.vue
+++ b/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>
diff --git a/components/content/HeroAlt.vue b/components/content/HeroAlt.vue
index 4a503343..4699854a 100644
--- a/components/content/HeroAlt.vue
+++ b/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>
diff --git a/components/content/Kbd.vue b/components/content/Kbd.vue
index d6581918..92a730c5 100644
--- a/components/content/Kbd.vue
+++ b/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',
diff --git a/components/content/ProseA.vue b/components/content/ProseA.vue
index 91db94b8..15c30afd 100644
--- a/components/content/ProseA.vue
+++ b/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>
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
index 2587ebac..b9cc5cb5 100644
--- a/components/content/ProseCode.vue
+++ b/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>
diff --git a/components/content/ProseH1.vue b/components/content/ProseH1.vue
index 14689402..61ff88b5 100644
--- a/components/content/ProseH1.vue
+++ b/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>
diff --git a/components/content/ProseH2.vue b/components/content/ProseH2.vue
index 1ecb5b62..17455d08 100644
--- a/components/content/ProseH2.vue
+++ b/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>
diff --git a/components/content/ProseH3.vue b/components/content/ProseH3.vue
index e991e4d2..05c35bf1 100644
--- a/components/content/ProseH3.vue
+++ b/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>
diff --git a/components/content/ProseH4.vue b/components/content/ProseH4.vue
index 25795e6b..f1cf7408 100644
--- a/components/content/ProseH4.vue
+++ b/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>
diff --git a/components/content/ProseH5.vue b/components/content/ProseH5.vue
index 8fcbcbf0..f513c7e6 100644
--- a/components/content/ProseH5.vue
+++ b/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>
diff --git a/components/content/ProseH6.vue b/components/content/ProseH6.vue
index 1be9966c..9edb9739 100644
--- a/components/content/ProseH6.vue
+++ b/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>
diff --git a/components/content/ProseImg.vue b/components/content/ProseImg.vue
index 93b2d70e..11631a02 100644
--- a/components/content/ProseImg.vue
+++ b/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>
diff --git a/components/content/ProsePre.vue b/components/content/ProsePre.vue
index 94c923e7..d787d79e 100644
--- a/components/content/ProsePre.vue
+++ b/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>
diff --git a/components/content/ReadMore.vue b/components/content/ReadMore.vue
index e96b6ad7..5d2333b1 100644
--- a/components/content/ReadMore.vue
+++ b/components/content/ReadMore.vue
@@ -1,14 +1,18 @@
 <template>
-  <Alert :to="to" :target="target" :icon>
+  <Alert :to :target :icon>
     Read more at <span class="font-semibold">{{ computedTitle }}</span>
   </Alert>
 </template>
 
 <script setup lang="ts">
-const { title, to, icon = 'lucide:bookmark' } = defineProps<{
+const {
+  title,
+  to,
+  icon = 'lucide:bookmark',
+} = defineProps<{
   title?: string;
   to: string;
-  target?: string;
+  target?: Target;
   icon?: string;
 }>();
 
diff --git a/components/content/SmartIcon.vue b/components/content/SmartIcon.vue
index 9eacd8c2..7271cc7b 100644
--- a/components/content/SmartIcon.vue
+++ b/components/content/SmartIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Iconify Icons -->
-  <Icon v-if="checkIcon(name)" :name="name" :size="size" />
+  <Icon v-if="checkIcon(name)" :name :size />
   <!-- Emojis -->
   <span
     v-else-if="/(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(name)"
@@ -18,12 +18,10 @@
 <script setup lang="ts">
 import { stringToIcon, validateIconName } from '@iconify/utils';
 
-withDefaults(defineProps<{
+const { size = 16 } = defineProps<{
   name: string;
   size?: number;
-}>(), {
-  size: 16,
-});
+}>();
 
 function checkIcon(name: string): boolean {
   return validateIconName(stringToIcon(name));
diff --git a/components/content/Steps.vue b/components/content/Steps.vue
index 6c993c8f..c6e8f9ba 100644
--- a/components/content/Steps.vue
+++ b/components/content/Steps.vue
@@ -8,11 +8,9 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+const { level = '3' } = defineProps<{
   level?: '1' | '2' | '3' | '4' | '5' | '6';
-}>(), {
-  level: '3',
-});
+}>();
 
 const levelClass = {
   1: '[&>h1]:step',
diff --git a/components/content/Tabs.vue b/components/content/Tabs.vue
index a92365c8..4917aa92 100644
--- a/components/content/Tabs.vue
+++ b/components/content/Tabs.vue
@@ -77,15 +77,15 @@
 <script setup lang="ts">
 import ScrollBar from '../ui/scroll-area/ScrollBar.vue';
 
-withDefaults(defineProps<{
+const {
+  variant = 'separate',
+  padded = true,
+  inStack = false,
+} = defineProps<{
   variant?: 'separate' | 'card';
   padded?: boolean;
   inStack?: boolean;
-}>(), {
-  variant: 'separate',
-  padded: true,
-  inStack: false,
-});
+}>();
 
 const activeTabIndex = ref(0);
 
diff --git a/content/2.api/1.configuration/1.shadcn-docs.md b/content/2.api/1.configuration/1.shadcn-docs.md
index 205e8190..8f72e39e 100644
--- a/content/2.api/1.configuration/1.shadcn-docs.md
+++ b/content/2.api/1.configuration/1.shadcn-docs.md
@@ -28,18 +28,20 @@ export default defineAppConfig({
 Illustrative type declarations:
 
 ```ts
+type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;
+
 interface ILink {
   title?: string;
   icon?: string;
   to: string;
-  target?: string;
+  target?: Target;
 }
 
 interface INav {
   title: string;
   links?: (ILink & { description: string })[];
   to?: string;
-  target?: string;
+  target?: Target;
 }
 ```
 
diff --git a/types/index.d.ts b/types/index.d.ts
index 3132b965..2c814d17 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -95,3 +95,5 @@ type Color =
   | 'blue'
   | 'yellow'
   | 'violet';
+
+type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;