feat: adjust lint

packages/webkit/src/components/pricing-card/pricing-card.vue

@@ -1,5 +1,6 @@
 <script setup>
   import { computed } from 'vue'
+
   import Button from '../site/button/button.vue'
 
   defineOptions({ name: 'PricingCard' })
@@ -69,9 +70,7 @@
 
   const normalizedCurrentPrice = computed(() => currentPrice.value || '')
 
-  const currentPeriodSuffix = computed(() =>
-    props.currentPeriod === 'annual' ? '/yr' : '/mo'
-  )
+  const currentPeriodSuffix = computed(() => (props.currentPeriod === 'annual' ? '/yr' : '/mo'))
 </script>
 
 <template>

packages/webkit/src/components/site/button/button.vue

@@ -1,44 +1,14 @@
-<template>
-  <a
-    v-if="isLink"
-    :href="href"
-    :target="target"
-    :class="rootClasses"
-    @click="emit('click', $event)"
-  >
-    <span :class="labelClasses">{{ label }}</span>
-    <span
-      :class="arrowClasses"
-      aria-hidden="true"
-    />
-  </a>
-
-  <PrimeButton
-    v-else
-    :label="label"
-    :size="size"
-    :icon="icon"
-    :class="rootClasses"
-    :pt="{
-      icon: {
-        class: iconClasses
-      },
-      label: {
-        class: labelClasses
-      }
-    }"
-    @click="emit('click', $event)"
-  />
-</template>
-
 <script setup>
   import PrimeButton from 'primevue/button'
   import { computed } from 'vue'
 
   const emit = defineEmits(['click'])
 
   const props = defineProps({
-    label: String,
+    label: {
+      type: String,
+      default: ''
+    },
     size: {
       type: String,
       options: ['small', 'large'],
@@ -49,10 +19,17 @@
       options: ['primary', 'secondary', 'link'],
       default: 'secondary'
     },
-    href: String,
-    icon: String,
+    href: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
     customClass: {
-      type: String
+      type: String,
+      default: ''
     },
     target: {
       type: String,
@@ -70,20 +47,17 @@
 
   const variantClasses = {
     primary: {
-      root:
-        'group h-fit border-1 border-neutral-100 bg-neutral-100 text-neutral-900 duration-300 transition rounded-md hover:bg-orange-500 hover:border-orange-500 hover:text-neutral-900 focus:outline-none focus:ring-0 focus:shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none',
+      root: 'group h-fit border-1 border-neutral-100 bg-neutral-100 text-neutral-900 duration-300 transition rounded-md hover:bg-orange-500 hover:border-orange-500 hover:text-neutral-900 focus:outline-none focus:ring-0 focus:shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none',
       label: 'font-proto-mono whitespace-nowrap',
       icon: '!text-[.75rem] duration-300 transition flex items-center mr-2 text-neutral-900 group-hover:text-neutral-900'
     },
     secondary: {
-      root:
-        'group h-fit bg-neutral-900 text-neutral-100 duration-300 transition rounded-md active:bg-neutral-900 border-1 border-neutral-800 hover:bg-neutral-950 hover:text-orange-500 focus:outline-none focus:ring-0 focus:shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none',
+      root: 'group h-fit bg-neutral-900 text-neutral-100 duration-300 transition rounded-md active:bg-neutral-900 border-1 border-neutral-800 hover:bg-neutral-950 hover:text-orange-500 focus:outline-none focus:ring-0 focus:shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none',
       label: 'font-proto-mono whitespace-nowrap',
       icon: '!text-[.75rem] duration-300 transition flex items-center mr-2 text-neutral-100 group-hover:text-neutral-100'
     },
     link: {
-      root:
-        "group inline-flex items-center gap-3 w-fit cursor-pointer no-underline relative after:duration-150 hover:after:w-full group-hover:after:w-full after:left-0 after:w-0 after:h-[1px] after:transition-all after:content-[''] after:absolute after:-bottom-[.1rem] after:bg-neutral-200 bg-transparent border-none text-neutral-100 !leading-[.75rem] focus:outline-none focus:ring-0 focus:shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none",
+      root: "group inline-flex items-center gap-3 w-fit cursor-pointer no-underline relative after:duration-150 hover:after:w-full group-hover:after:w-full after:left-0 after:w-0 after:h-[1px] after:transition-all after:content-[''] after:absolute after:-bottom-[.1rem] after:bg-neutral-200 bg-transparent border-none text-neutral-100 !leading-[.75rem] focus:outline-none focus:ring-0 focus:shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none",
       label: 'font-proto-mono whitespace-nowrap',
       icon: ''
     }
@@ -102,7 +76,8 @@
   })
 
   const labelClasses = computed(() => {
-    const sizeClasses = props.size === 'small' ? 'text-xs leading-[1rem]' : 'text-sm leading-[1.5rem]'
+    const sizeClasses =
+      props.size === 'small' ? 'text-xs leading-[1rem]' : 'text-sm leading-[1.5rem]'
     return `${variantClasses[props.type].label} ${sizeClasses}`
   })
 
@@ -116,5 +91,37 @@
       props.target === '_blank' ? 'translate-y-0 group-hover:translate-y-[-50%] top-[20%]' : ''
     ]
   })
-
 </script>
+
+<template>
+  <a
+    v-if="isLink"
+    :href="href"
+    :target="target"
+    :class="rootClasses"
+    @click="emit('click', $event)"
+  >
+    <span :class="labelClasses">{{ label }}</span>
+    <span
+      :class="arrowClasses"
+      aria-hidden="true"
+    />
+  </a>
+
+  <PrimeButton
+    v-else
+    :label="label"
+    :size="size"
+    :icon="icon"
+    :class="rootClasses"
+    :pt="{
+      icon: {
+        class: iconClasses
+      },
+      label: {
+        class: labelClasses
+      }
+    }"
+    @click="emit('click', $event)"
+  />
+</template>