refactor to UI components

src/components/ui/UIInputCheckbox.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  modelValue?: any
+  color?: 'regular' | 'primary'
+  checked?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'regular'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+const styleClass = computed(() => {
+  const colorVariants = {
+    regular: '',
+    primary: 'dui-checkbox-primary'
+  }
+  const colorClass = colorVariants[props.color]
+  return [colorClass]
+})
+</script>
+<template>
+  <input
+    type="checkbox"
+    class="dui-checkbox dui-checkbox-sm border-secondary"
+    :class="styleClass"
+    :checked="props.modelValue"
+    @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+    :disabled="props.disabled"
+  />
+</template>