feat(events): add color picker to appointment editor

frontend/components/ColorInput.vue

@@ -0,0 +1,57 @@
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: 'Farbe'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const pickerValue = computed(() => {
+  const value = props.modelValue?.trim() || ''
+  if (/^#[\da-f]{6}$/i.test(value)) return value
+  if (/^#[\da-f]{3}$/i.test(value)) {
+    return `#${value.slice(1).split('').map(character => character.repeat(2)).join('')}`
+  }
+  return '#2563eb'
+})
+</script>
+
+<template>
+  <InputGroup class="w-full">
+    <input
+        type="color"
+        :value="pickerValue"
+        :disabled="disabled"
+        :aria-label="`${label} auswählen`"
+        class="h-9 w-14 shrink-0 cursor-pointer rounded border border-default bg-transparent p-1 disabled:cursor-not-allowed disabled:opacity-50"
+        @input="emit('update:modelValue', $event.target.value)"
+    >
+    <UInput
+        :model-value="modelValue"
+        :disabled="disabled"
+        :aria-label="`${label} als Farbwert`"
+        class="min-w-0 flex-1"
+        placeholder="Standardfarbe"
+        @update:model-value="emit('update:modelValue', $event || null)"
+    />
+    <UButton
+        type="button"
+        :disabled="disabled || !modelValue"
+        :aria-label="`${label} zurücksetzen`"
+        variant="outline"
+        color="neutral"
+        icon="i-heroicons-x-mark"
+        @click="emit('update:modelValue', null)"
+    />
+  </InputGroup>
+</template>