feat(ui) : required cohérent + astérisque label + sanitisation email (MUI-41) (#60)
## Résumé (MUI-41) Harmonise l'état « obligatoire » des composants de formulaire et normalise le champ email. ### `required` + astérisque - Nouveau composant partagé `MalioRequiredMark` : astérisque rouge (`text-m-danger`, **16px**), `aria-hidden`. - Prop `required` désormais cohérente sur toute la famille formulaire ; quand vraie, l'astérisque s'affiche **dans le label**. - Prop ajoutée à `Select`, `SelectCheckbox`, `InputUpload`, `InputRichText` (les autres l'avaient déjà). - Accessibilité : `required` natif là où l'élément le supporte, sinon `aria-required` (Select/SelectCheckbox sur le `<button>`, RichText sur le wrapper éditeur, Upload sur le champ visible). - `MalioSiteSelector` **exclu** volontairement (segmented control, pas de label de champ). ### Sanitisation email (`MalioInputEmail`) - Suppression de **tous les espaces** à la saisie (pas de masque). - Nouvelle prop opt-in `lowercase` (défaut `false`) : normalise en minuscules à la frappe (cohérent RG-1.21 Starseed). - Garde défensive curseur : l'API de sélection est interdite sur `type="email"` → repositionnement best-effort sans jamais lever. - La validation de format reste à la couche `error`. ### Docs & playground - `COMPONENTS.md` (doc `required` cohérente + note famille + `lowercase`) et `CHANGELOG.md` mis à jour. - Exemples playground `required` et email `lowercase` ajoutés. ## Test plan - [x] Suite complète : 42 fichiers / 771 tests verts - [x] Lint : 0 erreur - [x] Tests `aria-required` sur Select/SelectCheckbox/RichText - [ ] Vérif visuelle playground : astérisque 16px dans le label, email qui retire les espaces / minuscule Spec & plan : `docs/superpowers/specs/` et `docs/superpowers/plans/`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Reviewed-on: #60 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #60.
This commit is contained in:
@@ -1,11 +1,81 @@
|
||||
<template>
|
||||
<div v-bind="$attrs">
|
||||
<div v-if="isWindowed" class="flex items-center justify-center gap-[36px] border-b border-m-primary">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Onglets précédents"
|
||||
data-test="tab-prev"
|
||||
:disabled="!canPrev"
|
||||
:class="[
|
||||
'transition-colors',
|
||||
canPrev
|
||||
? 'cursor-pointer text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active'
|
||||
: 'cursor-not-allowed text-m-disabled',
|
||||
]"
|
||||
@click="prev"
|
||||
>
|
||||
<IconifyIcon icon="mdi:chevron-left" :width="28" />
|
||||
</button>
|
||||
|
||||
<div
|
||||
role="tablist"
|
||||
class="flex flex-1 justify-center gap-[60px]"
|
||||
:style="{ maxWidth: `${maxWidth}px` }"
|
||||
>
|
||||
<button
|
||||
v-for="tab in visibleTabs"
|
||||
:id="`${componentId}-tab-${tab.key}`"
|
||||
:key="tab.key"
|
||||
role="tab"
|
||||
type="button"
|
||||
:aria-selected="activeTab === tab.key"
|
||||
:aria-controls="`${componentId}-panel-${tab.key}`"
|
||||
:aria-disabled="!!tab.disabled"
|
||||
:tabindex="focusedKey === tab.key ? 0 : -1"
|
||||
:disabled="tab.disabled"
|
||||
:class="[
|
||||
'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
|
||||
activeTab === tab.key
|
||||
? 'cursor-pointer text-m-primary after:content-[\'\'] after:absolute after:-bottom-[3px] after:left-0 after:right-0 after:h-[3px] after:bg-m-primary'
|
||||
: tab.disabled
|
||||
? 'cursor-not-allowed text-m-primary/50'
|
||||
: 'cursor-pointer text-m-primary/50 hover:text-m-primary/70',
|
||||
]"
|
||||
@click="selectTab(tab.key)"
|
||||
>
|
||||
<IconifyIcon
|
||||
v-if="tab.icon"
|
||||
:icon="tab.icon"
|
||||
:width="tab.iconSize ?? 24"
|
||||
/>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Onglets suivants"
|
||||
data-test="tab-next"
|
||||
:disabled="!canNext"
|
||||
:class="[
|
||||
'transition-colors',
|
||||
canNext
|
||||
? 'cursor-pointer text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active'
|
||||
: 'cursor-not-allowed text-m-disabled',
|
||||
]"
|
||||
@click="next"
|
||||
>
|
||||
<IconifyIcon icon="mdi:chevron-right" :width="28" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
role="tablist"
|
||||
class="flex justify-center gap-[60px] border-b border-m-primary"
|
||||
>
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
v-for="tab in visibleTabs"
|
||||
:id="`${componentId}-tab-${tab.key}`"
|
||||
:key="tab.key"
|
||||
role="tab"
|
||||
@@ -13,7 +83,7 @@
|
||||
:aria-selected="activeTab === tab.key"
|
||||
:aria-controls="`${componentId}-panel-${tab.key}`"
|
||||
:aria-disabled="!!tab.disabled"
|
||||
:tabindex="activeTab === tab.key ? 0 : -1"
|
||||
:tabindex="focusedKey === tab.key ? 0 : -1"
|
||||
:disabled="tab.disabled"
|
||||
:class="[
|
||||
'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
|
||||
@@ -40,7 +110,8 @@
|
||||
:id="`${componentId}-panel-${tab.key}`"
|
||||
:key="tab.key"
|
||||
role="tabpanel"
|
||||
:aria-labelledby="`${componentId}-tab-${tab.key}`"
|
||||
:aria-labelledby="isTabRendered(tab.key) ? `${componentId}-tab-${tab.key}` : undefined"
|
||||
:aria-label="isTabRendered(tab.key) ? undefined : tab.label"
|
||||
>
|
||||
<slot :name="tab.key" />
|
||||
</div>
|
||||
@@ -48,7 +119,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useId} from 'vue'
|
||||
import {computed, ref, useId, watch} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
|
||||
defineOptions({name: 'MalioTabList', inheritAttrs: false})
|
||||
@@ -65,9 +136,13 @@ const props = withDefaults(defineProps<{
|
||||
tabs: Tab[]
|
||||
modelValue?: string
|
||||
id?: string
|
||||
maxVisibleTabs?: number
|
||||
maxWidth?: number
|
||||
}>(), {
|
||||
modelValue: undefined,
|
||||
id: '',
|
||||
maxVisibleTabs: undefined,
|
||||
maxWidth: 1100,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -84,6 +159,53 @@ const activeTab = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
|
||||
const isWindowed = computed(() =>
|
||||
props.maxVisibleTabs != null && props.tabs.length > props.maxVisibleTabs,
|
||||
)
|
||||
|
||||
const maxStartIndex = computed(() =>
|
||||
isWindowed.value ? Math.max(0, props.tabs.length - props.maxVisibleTabs!) : 0,
|
||||
)
|
||||
|
||||
const startIndex = ref(0)
|
||||
|
||||
const visibleTabs = computed(() =>
|
||||
isWindowed.value
|
||||
? props.tabs.slice(startIndex.value, startIndex.value + props.maxVisibleTabs!)
|
||||
: props.tabs,
|
||||
)
|
||||
|
||||
const focusedKey = computed(() => {
|
||||
if (!isWindowed.value) return activeTab.value
|
||||
const inView = visibleTabs.value.some(t => t.key === activeTab.value)
|
||||
return inView ? activeTab.value : (visibleTabs.value[0]?.key ?? '')
|
||||
})
|
||||
|
||||
const isTabRendered = (key: string) => !isWindowed.value || visibleTabs.value.some(t => t.key === key)
|
||||
|
||||
const canPrev = computed(() => isWindowed.value && startIndex.value > 0)
|
||||
const canNext = computed(() => isWindowed.value && startIndex.value < maxStartIndex.value)
|
||||
|
||||
function prev() {
|
||||
if (!canPrev.value) return
|
||||
startIndex.value -= 1
|
||||
}
|
||||
|
||||
function next() {
|
||||
if (!canNext.value) return
|
||||
startIndex.value += 1
|
||||
}
|
||||
|
||||
// Clamp startIndex back in range if tabs or maxVisibleTabs change.
|
||||
watch(maxStartIndex, (max) => {
|
||||
if (startIndex.value > max) startIndex.value = max
|
||||
})
|
||||
|
||||
// Reset the window to the start when the tab list is replaced.
|
||||
watch(() => props.tabs, () => {
|
||||
startIndex.value = 0
|
||||
})
|
||||
|
||||
function selectTab(key: string) {
|
||||
const tab = props.tabs.find(t => t.key === key)
|
||||
if (tab?.disabled) return
|
||||
|
||||
Reference in New Issue
Block a user