matthieu
c7b1e62037
Add admin page with tabs for managing task statuses, efforts, priorities and types, with CRUD drawers and color picker. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
32 lines
902 B
Vue
32 lines
902 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 = [
|
|
'#222783', '#26A69A', '#E91E63', '#4A90D9',
|
|
'#7E57C2', '#8BC34A', '#FDD835', '#80DEEA', '#FF7043',
|
|
]
|
|
</script>
|