4775cbf184
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
ColorPicker : passe de 9 à 18 teintes prédéfinies (les 9 historiques
conservées en tête pour ne pas désassocier les couleurs existantes) et
ajoute une pastille « couleur personnalisée » (input natif type=color)
permettant n'importe quel hex. Partagé, donc bénéficie aussi aux tags,
priorités, groupes et workflows.
fix(project) : le champ code restait en minuscules. Le @input mutait
form.code à partir de l'ancienne valeur, puis l'émission update:modelValue
de MalioInputText l'écrasait avec la saisie brute → form.code en
minuscules (affiché en majuscules via CSS) → /^[A-Z]{2,10}$/ en échec →
création bloquée. Remplacé par un computed setter (source unique de
vérité : majuscules + lettres uniquement + max 10) et maxLength sur le
champ.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
73 lines
2.6 KiB
Vue
73 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-neutral-700">Couleur</p>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<button
|
|
v-for="color in presets"
|
|
:key="color"
|
|
type="button"
|
|
class="h-10 w-10 rounded-full border-2 transition-transform hover:scale-110"
|
|
:class="isSelected(color) ? 'border-neutral-900 scale-110' : 'border-transparent'"
|
|
:style="{ backgroundColor: color }"
|
|
:aria-label="`Choisir la couleur ${color}`"
|
|
@click="select(color)"
|
|
/>
|
|
|
|
<!-- Couleur personnalisée : input natif déguisé en pastille -->
|
|
<label
|
|
class="relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-2 transition-transform hover:scale-110"
|
|
:class="isCustom ? 'border-neutral-900 scale-110' : 'border-dashed border-neutral-400'"
|
|
:style="isCustom ? { backgroundColor: modelValue } : {}"
|
|
title="Couleur personnalisée"
|
|
>
|
|
<input
|
|
type="color"
|
|
class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
|
|
:value="modelValue"
|
|
aria-label="Choisir une couleur personnalisée"
|
|
@input="select(($event.target as HTMLInputElement).value)"
|
|
>
|
|
<Icon
|
|
v-if="!isCustom"
|
|
name="mdi:plus"
|
|
class="text-neutral-500"
|
|
size="20"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
modelValue: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
// Les 9 premières sont historiques (couleurs déjà en base) — ne pas réordonner
|
|
// pour que les projets/tags existants restent associés à une pastille.
|
|
const presets = [
|
|
'#222783', '#26A69A', '#E91E63', '#4A90D9', '#7E57C2',
|
|
'#8BC34A', '#FDD835', '#80DEEA', '#FF7043', '#EF4444',
|
|
'#F97316', '#F59E0B', '#22C55E', '#10B981', '#06B6D4',
|
|
'#3B82F6', '#8B5CF6', '#64748B',
|
|
]
|
|
|
|
const norm = (value: string): string => (value ?? '').toUpperCase()
|
|
|
|
function isSelected(color: string): boolean {
|
|
return norm(props.modelValue) === norm(color)
|
|
}
|
|
|
|
const isCustom = computed(
|
|
() => !!props.modelValue && !presets.some((c) => norm(c) === norm(props.modelValue)),
|
|
)
|
|
|
|
function select(value: string): void {
|
|
emit('update:modelValue', norm(value))
|
|
}
|
|
</script>
|