convert Button.vue to typescript

lib/components/base/Button.vue

@@ -1,54 +1,47 @@
-<script setup>
+<script setup lang="ts">
 import { ExternalIcon, UnknownIcon } from '@'
 
 import { computed } from 'vue'
 
-const props = defineProps({
-  link: {
-    type: String,
-    default: null,
-  },
-  external: {
-    type: Boolean,
-    default: false,
-  },
-  action: {
-    type: Function,
-    default: null,
-  },
-  color: {
-    type: String,
-    default: 'default',
-  },
-  iconOnly: {
-    type: Boolean,
-    default: false,
-  },
-  large: {
-    type: Boolean,
-    default: false,
-  },
-  outline: {
-    type: Boolean,
-    default: false,
-  },
-  transparent: {
-    type: Boolean,
-    default: false,
-  },
-  hoverFilled: {
-    type: Boolean,
-    default: false,
-  },
-  hoverFilledOnly: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-})
+const props = withDefaults(
+  defineProps<{
+    link?: string
+    external?: boolean
+    action?: (event: MouseEvent) => void
+    color?:
+      | 'default'
+      | 'danger'
+      | 'primary'
+      | 'red'
+      | 'orange'
+      | 'green'
+      | 'blue'
+      | 'purple'
+      | 'gray'
+      | 'secondary'
+      | 'highlight'
+    iconOnly?: boolean
+    large?: boolean
+    outline?: boolean
+    transparent?: boolean
+    hoverFilled?: boolean
+    hoverFilledOnly?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    link: undefined,
+    external: false,
+    action: undefined,
+    color: 'default',
+    iconOnly: false,
+    large: false,
+    outline: false,
+    transparent: false,
+    hoverFilled: false,
+    hoverFilledOnly: false,
+    disabled: false,
+  }
+)
 
 const accentedButton = computed(() =>
   ['danger', 'primary', 'red', 'orange', 'green', 'blue', 'purple', 'gray'].includes(props.color)
@@ -62,22 +55,13 @@ const accentedButton = computed(() =>
     :class="{
       'icon-only': iconOnly,
       'btn-large': large,
-      'btn-danger': color === 'danger',
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'secondary',
-      'btn-highlight': color === 'highlight',
-      'btn-red': color === 'red',
-      'btn-orange': color === 'orange',
-      'btn-green': color === 'green',
-      'btn-blue': color === 'blue',
-      'btn-purple': color === 'purple',
-      'btn-gray': color === 'gray',
       'btn-transparent': transparent,
       'btn-hover-filled': hoverFilled,
       'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
       disabled: disabled,
+      [`btn-${color}`]: true,
     }"
     :to="link"
     :target="external ? '_blank' : '_self'"
@@ -92,22 +76,13 @@ const accentedButton = computed(() =>
     :class="{
       'icon-only': iconOnly,
       'btn-large': large,
-      'btn-danger': color === 'danger',
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'secondary',
-      'btn-highlight': color === 'highlight',
-      'btn-red': color === 'red',
-      'btn-orange': color === 'orange',
-      'btn-green': color === 'green',
-      'btn-blue': color === 'blue',
-      'btn-purple': color === 'purple',
-      'btn-gray': color === 'gray',
       'btn-transparent': transparent,
       'btn-hover-filled': hoverFilled,
       'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
       disabled: disabled,
+      [`btn-${color}`]: true,
     }"
     :href="link"
     :target="external ? '_blank' : '_self'"
@@ -122,21 +97,12 @@ const accentedButton = computed(() =>
     :class="{
       'icon-only': iconOnly,
       'btn-large': large,
-      'btn-danger': color === 'danger',
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'secondary',
-      'btn-highlight': color === 'highlight',
-      'btn-red': color === 'red',
-      'btn-orange': color === 'orange',
-      'btn-green': color === 'green',
-      'btn-blue': color === 'blue',
-      'btn-purple': color === 'purple',
-      'btn-gray': color === 'gray',
       'btn-transparent': transparent,
       'btn-hover-filled': hoverFilled,
       'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
+      [`btn-${color}`]: true,
     }"
     :disabled="disabled"
     @click="action"