58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<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>
|