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:
@@ -21,6 +21,9 @@ type SelectProps = {
|
||||
textLabel?: string
|
||||
rounded?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
required?: boolean
|
||||
reserveMessageSpace?: boolean
|
||||
}
|
||||
|
||||
const SelectForTest = Select as DefineComponent<SelectProps>
|
||||
@@ -260,6 +263,38 @@ describe('MalioSelect', () => {
|
||||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('affiche l\'astérisque quand required est vrai', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, label: 'Champ', required: true},
|
||||
})
|
||||
|
||||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('n\'affiche pas l\'astérisque par défaut', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, label: 'Champ'},
|
||||
})
|
||||
|
||||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('expose aria-required quand required est vrai', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, options, required: true},
|
||||
})
|
||||
|
||||
expect(wrapper.find('[aria-required="true"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('n\'expose pas aria-required par défaut', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, options},
|
||||
})
|
||||
|
||||
expect(wrapper.find('[aria-required="true"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, options},
|
||||
@@ -273,4 +308,75 @@ describe('MalioSelect', () => {
|
||||
expect(buttonClasses).not.toContain('!border-b-0')
|
||||
expect(buttonClasses).toContain('!border-b-transparent')
|
||||
})
|
||||
|
||||
it('readonly : bordure noire même sans sélection, pas de grow/bleu', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, label: 'Champ', readonly: true, options: [{label: 'A', value: 'a'}]},
|
||||
})
|
||||
const trigger = wrapper.get('button')
|
||||
expect(trigger.classes()).toContain('border-black')
|
||||
expect(trigger.classes()).not.toContain('border-m-muted')
|
||||
expect(trigger.classes()).not.toContain('grow-height')
|
||||
expect(trigger.classes()).not.toContain('focus-visible:border-m-primary')
|
||||
})
|
||||
|
||||
it('readonly vide : label gris, pas de bleu', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, label: 'Champ', readonly: true, options: [{label: 'A', value: 'a'}]},
|
||||
})
|
||||
const label = wrapper.get('label')
|
||||
expect(label.classes()).not.toContain('text-m-primary')
|
||||
expect(label.classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('readonly sélectionné : label noir + chevron noir', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {label: 'Champ', readonly: true, modelValue: 'a', options: [{label: 'A', value: 'a'}]},
|
||||
})
|
||||
expect(wrapper.get('label').classes()).toContain('text-black')
|
||||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('readonly empêche l’ouverture du dropdown', async () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, label: 'Champ', readonly: true, options: [{label: 'A', value: 'a'}]},
|
||||
})
|
||||
await wrapper.get('button').trigger('click')
|
||||
expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('readonly expose aria-readonly et reste focusable (pas disabled)', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, label: 'Champ', readonly: true, options},
|
||||
})
|
||||
const trigger = wrapper.get('button')
|
||||
expect(trigger.attributes('aria-readonly')).toBe('true')
|
||||
expect(trigger.attributes('disabled')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('disabled + readonly : pas d’aria-readonly (disabled prime)', () => {
|
||||
const wrapper = mount(SelectForTest, {props: {modelValue: null, label: 'Champ', disabled: true, readonly: true, options: [{label: 'A', value: 'a'}]}})
|
||||
const trigger = wrapper.get('button')
|
||||
expect(trigger.attributes('aria-readonly')).toBeUndefined()
|
||||
expect(trigger.attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('réserve l’espace message par défaut même sans message', () => {
|
||||
const wrapper = mount(SelectForTest, {props: {modelValue: null, label: 'Champ', options}})
|
||||
const msg = wrapper.find('[id$="-describedby"]')
|
||||
expect(msg.exists()).toBe(true)
|
||||
expect(msg.classes()).toContain('min-h-[1rem]')
|
||||
})
|
||||
|
||||
it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
|
||||
const wrapper = mount(SelectForTest, {props: {modelValue: null, label: 'Champ', options, reserveMessageSpace: false}})
|
||||
expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
|
||||
const wrapper = mount(SelectForTest, {props: {modelValue: null, label: 'Champ', options, reserveMessageSpace: false, error: 'Erreur'}})
|
||||
const msg = wrapper.find('[id$="-describedby"]')
|
||||
expect(msg.exists()).toBe(true)
|
||||
expect(msg.classes()).not.toContain('min-h-[1rem]')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -8,8 +8,10 @@
|
||||
:id="buttonId"
|
||||
ref="buttonRef"
|
||||
type="button"
|
||||
class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
|
||||
class="peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none"
|
||||
:class="[
|
||||
isReadonly ? '' : 'grow-height',
|
||||
isReadonly ? '' : 'focus-visible:border-m-primary',
|
||||
hasError
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
@@ -22,14 +24,16 @@
|
||||
? 'rounded-b-none !border !border-m-success !border-b-transparent'
|
||||
: 'rounded-t-none !border !border-m-success !border-t-transparent'
|
||||
: 'border-m-success'
|
||||
: isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-primary !border-b-transparent'
|
||||
: 'rounded-t-none !border !border-m-primary !border-t-transparent'
|
||||
: isOptionSelected
|
||||
? 'border-black'
|
||||
: 'border-m-muted',
|
||||
disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
|
||||
: isReadonly
|
||||
? 'border-black'
|
||||
: isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-primary !border-b-transparent'
|
||||
: 'rounded-t-none !border !border-m-primary !border-t-transparent'
|
||||
: isOptionSelected
|
||||
? 'border-black'
|
||||
: 'border-m-muted',
|
||||
disabled ? 'cursor-not-allowed border-m-muted text-black/60' : isReadonly ? 'cursor-default' : 'cursor-pointer',
|
||||
label ? 'min-h-[40px]' : 'h-[40px] py-0',
|
||||
rounded,
|
||||
textField,
|
||||
@@ -38,6 +42,8 @@
|
||||
:aria-controls="listboxId"
|
||||
:aria-invalid="hasError"
|
||||
:aria-describedby="describedBy"
|
||||
:aria-required="required || undefined"
|
||||
:aria-readonly="isReadonly || undefined"
|
||||
:disabled="disabled"
|
||||
@click="toggle"
|
||||
>
|
||||
@@ -50,16 +56,20 @@
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
: isReadonly
|
||||
? isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted',
|
||||
: 'text-m-muted'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted',
|
||||
textLabel,
|
||||
]"
|
||||
:style="labelTransformStyle"
|
||||
>
|
||||
{{ label }}
|
||||
{{ label }}<MalioRequiredMark v-if="required" />
|
||||
</label>
|
||||
|
||||
<span
|
||||
@@ -82,11 +92,15 @@
|
||||
? 'text-m-success'
|
||||
: disabled
|
||||
? 'text-m-muted'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
: isReadonly
|
||||
? isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted'
|
||||
]"
|
||||
>
|
||||
<slot name="icon">
|
||||
@@ -152,6 +166,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<p
|
||||
v-if="reserveMessageSpace || hint || error || success"
|
||||
:id="`${buttonId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
@@ -159,7 +174,8 @@
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs min-h-[1rem]',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
reserveMessageSpace ? 'min-h-[1rem]' : '',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
@@ -171,6 +187,7 @@
|
||||
import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import MalioRequiredMark from '../shared/RequiredMark.vue'
|
||||
|
||||
defineOptions({name: 'MalioSelect', inheritAttrs: false})
|
||||
|
||||
@@ -191,8 +208,11 @@ const props = withDefaults(defineProps<{
|
||||
textLabel?: string
|
||||
rounded?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
groupClass?: string
|
||||
noOptionsText?: string
|
||||
required?: boolean
|
||||
reserveMessageSpace?: boolean
|
||||
}>(), {
|
||||
options: () => [],
|
||||
emptyOptionLabel: '',
|
||||
@@ -205,8 +225,11 @@ const props = withDefaults(defineProps<{
|
||||
textLabel: 'text-sm',
|
||||
rounded: 'rounded-md',
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
groupClass: '',
|
||||
noOptionsText: 'Aucune option disponible',
|
||||
required: false,
|
||||
reserveMessageSpace: true,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -234,8 +257,9 @@ const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const isOptionSelected = computed(() =>
|
||||
props.options.some(o => o.value === props.modelValue)
|
||||
)
|
||||
const isReadonly = computed(() => props.readonly && !props.disabled)
|
||||
const shouldFloatLabel = computed(() =>
|
||||
isOpen.value || isOptionSelected.value
|
||||
isReadonly.value ? isOptionSelected.value : (isOpen.value || isOptionSelected.value)
|
||||
)
|
||||
const selectedLabel = computed(() =>
|
||||
props.options.find(o => o.value === props.modelValue)?.label ?? ''
|
||||
@@ -263,6 +287,7 @@ function updateOpenDirection() {
|
||||
}
|
||||
|
||||
function open() {
|
||||
if (props.disabled || props.readonly) return
|
||||
updateOpenDirection()
|
||||
isOpen.value = true
|
||||
|
||||
@@ -306,7 +331,7 @@ function close() {
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (props.disabled) return
|
||||
if (props.disabled || props.readonly) return
|
||||
if (isOpen.value) {
|
||||
close()
|
||||
return
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {mount, renderToString} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import SelectCheckbox from './SelectCheckbox.vue'
|
||||
|
||||
@@ -9,7 +9,7 @@ type Option = {
|
||||
}
|
||||
|
||||
type SelectCheckboxProps = {
|
||||
modelValue: Array<string | number>
|
||||
modelValue?: Array<string | number>
|
||||
options?: Option[]
|
||||
emptyOptionLabel?: string
|
||||
label?: string
|
||||
@@ -24,7 +24,10 @@ type SelectCheckboxProps = {
|
||||
displaySelectAll?: boolean
|
||||
selectAllLabel?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
reserveMessageSpace?: boolean
|
||||
}
|
||||
|
||||
const SelectCheckboxForTest = SelectCheckbox as DefineComponent<SelectCheckboxProps>
|
||||
@@ -36,6 +39,18 @@ const options: Option[] = [
|
||||
]
|
||||
|
||||
describe('MalioSelectCheckbox', () => {
|
||||
it('rend sans planter quand modelValue n’est pas fourni (non contrôlé)', () => {
|
||||
expect(() =>
|
||||
mount(SelectCheckboxForTest, {props: {label: 'Catégories', options}}),
|
||||
).not.toThrow()
|
||||
})
|
||||
|
||||
it('rend en SSR sans planter quand modelValue est absent (cause du crash playground)', async () => {
|
||||
await expect(
|
||||
renderToString(SelectCheckboxForTest, {props: {label: 'Catégories', readonly: true, options}}),
|
||||
).resolves.toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders checkbox inputs for options', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options},
|
||||
@@ -235,6 +250,38 @@ describe('MalioSelectCheckbox', () => {
|
||||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('affiche l\'astérisque quand required est vrai', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], label: 'Champ', required: true},
|
||||
})
|
||||
|
||||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('n\'affiche pas l\'astérisque par défaut', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], label: 'Champ'},
|
||||
})
|
||||
|
||||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('expose aria-required quand required est vrai', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options, required: true},
|
||||
})
|
||||
|
||||
expect(wrapper.find('[aria-required="true"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('n\'expose pas aria-required par défaut', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options},
|
||||
})
|
||||
|
||||
expect(wrapper.find('[aria-required="true"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options},
|
||||
@@ -248,4 +295,75 @@ describe('MalioSelectCheckbox', () => {
|
||||
expect(buttonClasses).not.toContain('!border-b-0')
|
||||
expect(buttonClasses).toContain('!border-b-transparent')
|
||||
})
|
||||
|
||||
it('readonly : bordure noire même sans sélection, pas de grow/bleu', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {label: 'Champ', readonly: true, modelValue: [], options: [{label: 'A', value: 'a'}]},
|
||||
})
|
||||
const trigger = wrapper.get('button')
|
||||
expect(trigger.classes()).toContain('border-black')
|
||||
expect(trigger.classes()).not.toContain('border-m-muted')
|
||||
expect(trigger.classes()).not.toContain('grow-height')
|
||||
expect(trigger.classes()).not.toContain('focus-visible:border-m-primary')
|
||||
})
|
||||
|
||||
it('readonly vide : label gris, pas de bleu', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {label: 'Champ', readonly: true, modelValue: [], options: [{label: 'A', value: 'a'}]},
|
||||
})
|
||||
const label = wrapper.get('label')
|
||||
expect(label.classes()).not.toContain('text-m-primary')
|
||||
expect(label.classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('readonly sélectionné : label noir + chevron noir', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {label: 'Champ', readonly: true, modelValue: ['a'], options: [{label: 'A', value: 'a'}]},
|
||||
})
|
||||
expect(wrapper.get('label').classes()).toContain('text-black')
|
||||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('readonly empêche l’ouverture du dropdown', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {label: 'Champ', readonly: true, modelValue: [], options: [{label: 'A', value: 'a'}]},
|
||||
})
|
||||
await wrapper.get('button').trigger('click')
|
||||
expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('readonly expose aria-readonly et reste focusable (pas disabled)', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {label: 'Champ', readonly: true, modelValue: [], options},
|
||||
})
|
||||
const trigger = wrapper.get('button')
|
||||
expect(trigger.attributes('aria-readonly')).toBe('true')
|
||||
expect(trigger.attributes('disabled')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('disabled + readonly : pas d’aria-readonly (disabled prime)', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {props: {modelValue: [], label: 'Champ', disabled: true, readonly: true, options: [{label: 'A', value: 'a'}]}})
|
||||
const trigger = wrapper.get('button')
|
||||
expect(trigger.attributes('aria-readonly')).toBeUndefined()
|
||||
expect(trigger.attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('réserve l’espace message par défaut même sans message', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {props: {label: 'Champ', options}})
|
||||
const msg = wrapper.find('[id$="-describedby"]')
|
||||
expect(msg.exists()).toBe(true)
|
||||
expect(msg.classes()).toContain('min-h-[1rem]')
|
||||
})
|
||||
|
||||
it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {props: {label: 'Champ', options, reserveMessageSpace: false}})
|
||||
expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {props: {label: 'Champ', options, reserveMessageSpace: false, error: 'Erreur'}})
|
||||
const msg = wrapper.find('[id$="-describedby"]')
|
||||
expect(msg.exists()).toBe(true)
|
||||
expect(msg.classes()).not.toContain('min-h-[1rem]')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -8,8 +8,10 @@
|
||||
:id="buttonId"
|
||||
ref="buttonRef"
|
||||
type="button"
|
||||
class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
|
||||
class="peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none"
|
||||
:class="[
|
||||
isReadonly ? '' : 'grow-height',
|
||||
isReadonly ? '' : 'focus-visible:border-m-primary',
|
||||
hasError
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
@@ -22,14 +24,16 @@
|
||||
? 'rounded-b-none !border !border-m-success !border-b-transparent'
|
||||
: 'rounded-t-none !border !border-m-success !border-t-transparent'
|
||||
: 'border-m-success'
|
||||
: isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-primary !border-b-transparent'
|
||||
: 'rounded-t-none !border !border-m-primary !border-t-transparent'
|
||||
: isOptionSelected
|
||||
? 'border-black'
|
||||
: 'border-m-muted',
|
||||
disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
|
||||
: isReadonly
|
||||
? 'border-black'
|
||||
: isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-primary !border-b-transparent'
|
||||
: 'rounded-t-none !border !border-m-primary !border-t-transparent'
|
||||
: isOptionSelected
|
||||
? 'border-black'
|
||||
: 'border-m-muted',
|
||||
disabled ? 'cursor-not-allowed border-m-muted text-black/60' : isReadonly ? 'cursor-default' : 'cursor-pointer',
|
||||
label ? 'min-h-[40px]' : 'h-[40px] py-0',
|
||||
rounded,
|
||||
textField,
|
||||
@@ -38,6 +42,8 @@
|
||||
:aria-controls="listboxId"
|
||||
:aria-invalid="hasError"
|
||||
:aria-describedby="describedBy"
|
||||
:aria-required="required || undefined"
|
||||
:aria-readonly="isReadonly || undefined"
|
||||
:disabled="disabled"
|
||||
@click="toggle"
|
||||
>
|
||||
@@ -50,16 +56,20 @@
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
: isReadonly
|
||||
? isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted',
|
||||
: 'text-m-muted'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted',
|
||||
textLabel,
|
||||
]"
|
||||
:style="labelTransformStyle"
|
||||
>
|
||||
{{ label }}
|
||||
{{ label }}<MalioRequiredMark v-if="required" />
|
||||
</label>
|
||||
|
||||
<div
|
||||
@@ -110,11 +120,15 @@
|
||||
? 'text-m-success'
|
||||
: disabled
|
||||
? 'text-m-muted'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
: isReadonly
|
||||
? isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted'
|
||||
]"
|
||||
>
|
||||
<slot name="icon">
|
||||
@@ -170,6 +184,7 @@
|
||||
group-class="!mt-0"
|
||||
label-class="option-checkbox w-full cursor-pointer font-semibold"
|
||||
tabindex="-1"
|
||||
:reserve-message-space="false"
|
||||
@update:model-value="toggleAll"
|
||||
/>
|
||||
</li>
|
||||
@@ -195,12 +210,14 @@
|
||||
group-class="!mt-0"
|
||||
label-class="option-checkbox w-full cursor-pointer"
|
||||
tabindex="-1"
|
||||
:reserve-message-space="false"
|
||||
@update:model-value="toggleOption(opt.value)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p
|
||||
v-if="reserveMessageSpace || hint || error || success"
|
||||
:id="`${buttonId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
@@ -208,7 +225,8 @@
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs min-h-[1rem]',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
reserveMessageSpace ? 'min-h-[1rem]' : '',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
@@ -221,6 +239,7 @@ import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import Checkbox from '../checkbox/Checkbox.vue'
|
||||
import MalioRequiredMark from '../shared/RequiredMark.vue'
|
||||
|
||||
defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
|
||||
|
||||
@@ -229,7 +248,7 @@ type Option = {
|
||||
value: string | number
|
||||
}
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: Array<string | number>
|
||||
modelValue?: Array<string | number>
|
||||
options?: Option[]
|
||||
emptyOptionLabel?: string
|
||||
label?: string
|
||||
@@ -244,9 +263,13 @@ const props = withDefaults(defineProps<{
|
||||
displaySelectAll?: boolean
|
||||
selectAllLabel?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
groupClass?: string
|
||||
noOptionsText?: string
|
||||
required?: boolean
|
||||
reserveMessageSpace?: boolean
|
||||
}>(), {
|
||||
modelValue: () => [],
|
||||
options: () => [],
|
||||
emptyOptionLabel: '',
|
||||
label: '',
|
||||
@@ -261,8 +284,11 @@ const props = withDefaults(defineProps<{
|
||||
displaySelectAll: false,
|
||||
selectAllLabel: 'Tout sélectionner',
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
groupClass: '',
|
||||
noOptionsText: 'Aucune option disponible',
|
||||
required: false,
|
||||
reserveMessageSpace: true,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -287,6 +313,7 @@ const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const isOptionSelected = computed(() =>
|
||||
props.modelValue.length > 0
|
||||
)
|
||||
const isReadonly = computed(() => props.readonly && !props.disabled)
|
||||
const selectedOptions = computed(() =>
|
||||
normalizedOptions.value.filter(option => props.modelValue.includes(option.value)),
|
||||
)
|
||||
@@ -294,7 +321,7 @@ const displayTags = computed(() =>
|
||||
props.displayTag && selectedOptions.value.length > 0,
|
||||
)
|
||||
const shouldFloatLabel = computed(() =>
|
||||
isOpen.value || displayTags.value
|
||||
isReadonly.value ? isOptionSelected.value : (isOpen.value || displayTags.value)
|
||||
)
|
||||
const selectionSummary = computed(() =>
|
||||
`${props.modelValue.length}/${normalizedOptions.value.length}`
|
||||
@@ -326,6 +353,7 @@ function updateOpenDirection() {
|
||||
}
|
||||
|
||||
function open() {
|
||||
if (props.disabled || props.readonly) return
|
||||
updateOpenDirection()
|
||||
isOpen.value = true
|
||||
|
||||
@@ -369,7 +397,7 @@ function close() {
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (props.disabled) return
|
||||
if (props.disabled || props.readonly) return
|
||||
if (isOpen.value) {
|
||||
close()
|
||||
return
|
||||
|
||||
Reference in New Issue
Block a user