32 lines
891 B
Vue
32 lines
891 B
Vue
<template>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-neutral-700">Couleur</p>
|
|
<div class="flex flex-wrap gap-3">
|
|
<button
|
|
v-for="color in colors"
|
|
:key="color"
|
|
type="button"
|
|
class="h-10 w-10 rounded-full border-2 transition-transform hover:scale-110"
|
|
:class="modelValue === color ? 'border-neutral-900 scale-110' : 'border-transparent'"
|
|
:style="{ backgroundColor: color }"
|
|
@click="emit('update:modelValue', color)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
modelValue: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
const colors = [
|
|
'#26A69A', '#E91E63', '#4A90D9', '#7E57C2',
|
|
'#8BC34A', '#FDD835', '#80DEEA', '#FF7043',
|
|
]
|
|
</script>
|