Add color picker and image upload form items (#2031)

Co-authored-by: github-actions <github-actions@github.com>

src/components/common/FormColorPicker.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="color-picker-wrapper flex items-center gap-2">
+    <ColorPicker v-model="modelValue">
+      <template #header>
+        <div class="flex items-center justify-between p-2">
+          <span>{{ props.label }}</span>
+          <Button
+            v-if="props.defaultValue"
+            icon="pi pi-refresh"
+            text
+            size="small"
+            @click="resetColor"
+          />
+        </div>
+      </template>
+    </ColorPicker>
+    <InputText v-model="modelValue" class="w-28" :placeholder="label" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ColorPicker from 'primevue/colorpicker'
+import InputText from 'primevue/inputtext'
+
+const modelValue = defineModel<string>('modelValue')
+const props = defineProps<{
+  defaultValue?: string
+  label?: string
+}>()
+
+const resetColor = () => {
+  modelValue.value = props.defaultValue || '#000000'
+}
+</script>

src/components/common/FormImageUpload.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="image-upload-wrapper">
+    <div class="flex gap-2 items-center">
+      <div
+        class="preview-box border rounded p-2 w-16 h-16 flex items-center justify-center"
+        :class="{ 'bg-gray-100 dark:bg-gray-800': !modelValue }"
+      >
+        <img
+          v-if="modelValue"
+          :src="modelValue"
+          class="max-w-full max-h-full object-contain"
+        />
+        <i v-else class="pi pi-image text-gray-400 text-xl"></i>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <Button
+          icon="pi pi-upload"
+          :label="$t('g.upload')"
+          size="small"
+          @click="triggerFileInput"
+        />
+        <Button
+          v-if="modelValue"
+          class="w-full"
+          outlined
+          icon="pi pi-trash"
+          severity="danger"
+          size="small"
+          @click="clearImage"
+        />
+      </div>
+    </div>
+    <input
+      ref="fileInput"
+      type="file"
+      class="hidden"
+      accept="image/*"
+      @change="handleFileUpload"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Button from 'primevue/button'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const triggerFileInput = () => {
+  fileInput.value?.click()
+}
+
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files[0]) {
+    const file = target.files[0]
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      emit('update:modelValue', e.target?.result as string)
+    }
+    reader.readAsDataURL(file)
+  }
+}
+
+const clearImage = () => {
+  emit('update:modelValue', '')
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+</script>

src/components/common/FormItem.vue

@@ -31,6 +31,8 @@ import Select from 'primevue/select'
 import ToggleSwitch from 'primevue/toggleswitch'
 import CustomFormValue from '@/components/common/CustomFormValue.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
+import FormImageUpload from '@/components/common/FormImageUpload.vue'
+import FormColorPicker from '@/components/common/FormColorPicker.vue'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{
@@ -82,6 +84,10 @@ function getFormComponent(item: FormItem): Component {
       return InputSlider
     case 'combo':
       return Select
+    case 'image':
+      return FormImageUpload
+    case 'color':
+      return FormColorPicker
     default:
       return InputText
   }