49 lines
1.0 KiB
Vue
49 lines
1.0 KiB
Vue
<template>
|
|
<button
|
|
class="relative"
|
|
type="button"
|
|
@click="inputRef.click()"
|
|
:class="[
|
|
'flex items-center space-x-1 rounded-full bg-gray-100 py-1 hover:bg-gray-50 focus:ring-2 focus:ring-blue-200',
|
|
]"
|
|
>
|
|
<input
|
|
:id="forId"
|
|
:value="modelValue"
|
|
class="absolute left-0 bottom-0 h-0 w-0 opacity-0"
|
|
type="color"
|
|
ref="inputRef"
|
|
@change="valueChanged(($event.target as HTMLInputElement).value)"
|
|
/>
|
|
<div
|
|
:style="{ backgroundColor: modelValue }"
|
|
class="h-6 w-6 rounded-full ring-1 ring-gray-400"
|
|
></div>
|
|
<span>{{ modelValue }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
forId?: string;
|
|
modelValue: string;
|
|
}>(),
|
|
{
|
|
modelValue: '#000000',
|
|
}
|
|
);
|
|
|
|
const inputRef = ref();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void;
|
|
}>();
|
|
|
|
const valueChanged = (value: string) => {
|
|
emit('update:modelValue', value);
|
|
};
|
|
</script>
|