refactor: defining default values for Props using withDefaults. (#2498)

Author: Alfred-Skyblue

src/client/theme-default/components/VPBadge.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   text?: string
   type?: 'info' | 'tip' | 'warning' | 'danger'
-}>()
+}
+withDefaults(defineProps<Props>(), {
+  type: 'tip'
+})
 </script>
 
 <template>
-  <span class="VPBadge" :class="type ?? 'tip'">
+  <span class="VPBadge" :class="type">
     <slot>{{ text }}</slot>
   </span>
 </template>

src/client/theme-default/components/VPButton.vue

@@ -3,35 +3,32 @@ import { computed } from 'vue'
 import { normalizeLink } from '../support/utils'
 import { EXTERNAL_URL_RE } from '../../shared'
 
-const props = defineProps<{
+interface Props {
   tag?: string
   size?: 'medium' | 'big'
   theme?: 'brand' | 'alt' | 'sponsor'
   text: string
   href?: string
-}>()
-
-const classes = computed(() => [
-  props.size ?? 'medium',
-  props.theme ?? 'brand'
-])
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+  theme: 'brand'
+})
 
-const isExternal = computed(() => props.href && EXTERNAL_URL_RE.test(props.href))
+const isExternal = computed(
+  () => props.href && EXTERNAL_URL_RE.test(props.href)
+)
 
 const component = computed(() => {
-  if (props.tag) {
-    return props.tag
-  }
-
-  return props.href ? 'a' : 'button'
+  return props.tag || props.href ? 'a' : 'button'
 })
 </script>
 
 <template>
   <component
     :is="component"
     class="VPButton"
-    :class="classes"
+    :class="[size, theme]"
     :href="href ? normalizeLink(href) : undefined"
     :target="isExternal ? '_blank' : undefined"
     :rel="isExternal ? 'noreferrer' : undefined"

src/client/theme-default/components/VPHomeSponsors.vue

@@ -14,13 +14,16 @@ export interface Sponsor {
   img: string
   url: string
 }
-
-defineProps<{
+interface Props {
   message?: string
   actionText?: string
   actionLink?: string
   data: Sponsors[]
-}>()
+}
+
+withDefaults(defineProps<Props>(), {
+  actionText: 'Become a sponsor'
+})
 </script>
 
 <template>
@@ -36,11 +39,7 @@ defineProps<{
       </div>
 
       <div v-if="actionLink" class="action">
-        <VPButton
-          theme="sponsor"
-          :text="actionText ?? 'Become a sponsor'"
-          :href="actionLink"
-        />
+        <VPButton theme="sponsor" :text="actionText" :href="actionLink" />
       </div>
     </div>
   </section>

src/client/theme-default/components/VPSponsors.vue

@@ -9,13 +9,15 @@ export interface Sponsors {
   size?: GridSize
   items: Sponsor[]
 }
-
-const props = defineProps<{
+interface Props {
   mode?: 'normal' | 'aside'
   tier?: string
   size?: GridSize
   data: Sponsors[] | Sponsor[]
-}>()
+}
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'normal'
+})
 
 const sponsors = computed(() => {
   const isSponsors = props.data.some((s) => {
@@ -33,7 +35,7 @@ const sponsors = computed(() => {
 </script>
 
 <template>
-  <div class="VPSponsors vp-sponsor" :class="[mode ?? 'normal']">
+  <div class="VPSponsors vp-sponsor" :class="[mode]">
     <section
       v-for="(sponsor, index) in sponsors"
       :key="index"

src/client/theme-default/components/VPSponsorsGrid.vue

@@ -8,23 +8,21 @@ export interface Sponsor {
   img: string
   url: string
 }
-
-const props = defineProps<{
+interface Props {
   size?: GridSize
   data: Sponsor[]
-}>()
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium'
+})
 
 const el = ref(null)
 
 useSponsorsGrid({ el, size: props.size })
 </script>
 
 <template>
-  <div
-    class="VPSponsorsGrid vp-sponsor-grid"
-    :class="[props.size ?? 'medium']"
-    ref="el"
-  >
+  <div class="VPSponsorsGrid vp-sponsor-grid" :class="[size]" ref="el">
     <div
       v-for="sponsor in data"
       :key="sponsor.name"

src/client/theme-default/components/VPTeamMembers.vue

@@ -3,15 +3,16 @@ import type { DefaultTheme } from 'vitepress/theme'
 import { computed } from 'vue'
 import VPTeamMembersItem from './VPTeamMembersItem.vue'
 
-const props = defineProps<{
+interface Props {
   size?: 'small' | 'medium'
   members: DefaultTheme.TeamMember[]
-}>()
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium'
+})
 
-const classes = computed(() => [
-  props.size ?? 'medium',
-  `count-${props.members.length}`
-])
+const classes = computed(() => [props.size, `count-${props.members.length}`])
 </script>
 
 <template>
@@ -29,9 +30,15 @@ const classes = computed(() => [
   grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
 }
 
-.VPTeamMembers.small.count-1 .container { max-width: 276px; }
-.VPTeamMembers.small.count-2 .container { max-width: calc(276px * 2 + 24px); }
-.VPTeamMembers.small.count-3 .container { max-width: calc(276px * 3 + 24px * 2); }
+.VPTeamMembers.small.count-1 .container {
+  max-width: 276px;
+}
+.VPTeamMembers.small.count-2 .container {
+  max-width: calc(276px * 2 + 24px);
+}
+.VPTeamMembers.small.count-3 .container {
+  max-width: calc(276px * 3 + 24px * 2);
+}
 
 .VPTeamMembers.medium .container {
   grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
@@ -43,8 +50,12 @@ const classes = computed(() => [
   }
 }
 
-.VPTeamMembers.medium.count-1 .container { max-width: 368px; }
-.VPTeamMembers.medium.count-2 .container { max-width: calc(368px * 2 + 24px); }
+.VPTeamMembers.medium.count-1 .container {
+  max-width: 368px;
+}
+.VPTeamMembers.medium.count-2 .container {
+  max-width: calc(368px * 2 + 24px);
+}
 
 .container {
   display: grid;

src/client/theme-default/components/VPTeamMembersItem.vue

@@ -4,17 +4,21 @@ import VPIconHeart from './icons/VPIconHeart.vue'
 import VPLink from './VPLink.vue'
 import VPSocialLinks from './VPSocialLinks.vue'
 
-defineProps<{
+interface Props {
   size?: 'small' | 'medium'
   member: DefaultTheme.TeamMember
-}>()
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'medium'
+})
 </script>
 
 <template>
-  <article class="VPTeamMembersItem" :class="[size ?? 'medium']">
+  <article class="VPTeamMembersItem" :class="[size]">
     <div class="profile">
       <figure class="avatar">
-        <img class="avatar-img" :src="member.avatar" :alt="member.name">
+        <img class="avatar-img" :src="member.avatar" :alt="member.name" />
       </figure>
       <div class="data">
         <h1 class="name">
@@ -24,14 +28,18 @@ defineProps<{
           <span v-if="member.title" class="title">
             {{ member.title }}
           </span>
-          <span v-if="member.title && member.org" class="at">
-            @
-          </span>
-          <VPLink v-if="member.org" class="org" :class="{ link: member.orgLink }" :href="member.orgLink" no-icon>
+          <span v-if="member.title && member.org" class="at"> @ </span>
+          <VPLink
+            v-if="member.org"
+            class="org"
+            :class="{ link: member.orgLink }"
+            :href="member.orgLink"
+            no-icon
+          >
             {{ member.org }}
           </VPLink>
         </p>
-        <p v-if="member.desc" class="desc" v-html="member.desc"/>
+        <p v-if="member.desc" class="desc" v-html="member.desc" />
         <div v-if="member.links" class="links">
           <VPSocialLinks :links="member.links" />
         </div>
@@ -155,12 +163,12 @@ defineProps<{
 }
 
 .name {
-  margin:  0;
+  margin: 0;
   font-weight: 600;
 }
 
 .affiliation {
-  margin:  0;
+  margin: 0;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }