refactor to UI components

src/components/ui/UIInputText.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+  modelValue?: any
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  color?: 'regular' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  color: 'regular'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+const styleClass = computed(() => {
+  const sizeVariants = {
+    xs: 'dui-input-xs',
+    sm: 'dui-input-sm',
+    md: 'dui-input-md',
+    lg: 'dui-input-lg'
+  }
+  const colorVariants = {
+    regular: '',
+    primary: 'dui-input-primary',
+    secondary: 'dui-input-secondary',
+    info: 'dui-input-info',
+    success: 'dui-input-success',
+    warning: 'dui-input-warning',
+    error: 'dui-input-error'
+  }
+  const sizeClass = sizeVariants[props.size]
+  const colorClass = colorVariants[props.color]
+  return [sizeClass, colorClass]
+})
+</script>
+<template>
+  <input
+    type="text"
+    :value="props.modelValue"
+    @input="emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
+    class="dui-input-bordered dui-input my-1 ml-auto mr-1 max-w-xs flex-grow"
+    :class="styleClass"
+  />
+</template>