refactor to UI components

src/components/ui/UIButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 interface Props {
-  size?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg'
   variant?: 'regular' | 'outline'
-  color?: string
+  color?: 'regular' | 'primary'
   dropdown?: boolean
 }
 
@@ -14,18 +14,29 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const styleClass = computed(() => {
-  const colorVariants: { [key: string]: string } = {
-    primary: 'btn-primary'
+  const sizeVariants = {
+    xs: 'dui-btn-xs',
+    sm: 'dui-btn-sm',
+    md: 'dui-btn-md',
+    lg: 'dui-btn-lg'
   }
-  const sizeClass = `btn-${props.size}`
-  const variantClass = props.variant !== 'regular' ? `btn-${props.variant}` : ''
-  const colorClass = props.color !== 'regular' ? colorVariants[props.color] : ''
+  const colorVariants = {
+    regular: '',
+    primary: 'dui-btn-primary'
+  }
+  const variantVariants = {
+    regular: '',
+    outline: 'dui-btn-outline'
+  }
+  const sizeClass = sizeVariants[props.size]
+  const variantClass = variantVariants[props.variant]
+  const colorClass = colorVariants[props.color]
   return [sizeClass, variantClass, colorClass]
 })
 </script>
 <template>
-  <label class="btn duration-0" :class="styleClass" v-if="props.dropdown" tabindex="0">
+  <label class="dui-btn duration-0" :class="styleClass" v-if="props.dropdown" tabindex="0">
     <slot></slot>
   </label>
-  <button class="btn duration-0" :class="styleClass" v-else><slot></slot></button>
+  <button class="dui-btn duration-0" :class="styleClass" v-else><slot></slot></button>
 </template>