Merge remote-tracking branch 'origin/develop' into develop
This commit is contained in:
101
.playground/pages/composant/checkbox.vue
Normal file
101
.playground/pages/composant/checkbox.vue
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||||
|
<div class="rounded-lg border p-4">
|
||||||
|
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||||
|
<MalioCheckbox
|
||||||
|
v-model="simpleValue"
|
||||||
|
label="Accepter les conditions"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-lg border p-4">
|
||||||
|
<h2 class="mb-4 text-xl font-bold">Coche par default</h2>
|
||||||
|
<MalioCheckbox
|
||||||
|
v-model="checkedValue"
|
||||||
|
label="Recevoir la newsletter"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-lg border p-4">
|
||||||
|
<h2 class="mb-4 text-xl font-bold">Hint</h2>
|
||||||
|
<MalioCheckbox
|
||||||
|
v-model="hintValue"
|
||||||
|
label="J'accepte le traitement des donnees"
|
||||||
|
hint="Vous pouvez retirer votre consentement a tout moment."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-lg border p-4">
|
||||||
|
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||||
|
<MalioCheckbox
|
||||||
|
:model-value="false"
|
||||||
|
label="Accepter les CGU"
|
||||||
|
error="Ce champ est obligatoire."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-lg border p-4">
|
||||||
|
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||||
|
<MalioCheckbox
|
||||||
|
:model-value="true"
|
||||||
|
label="Adresse vérifiée"
|
||||||
|
success="Choix valide."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-lg border p-4">
|
||||||
|
<h2 class="mb-4 text-xl font-bold">Disabled et Readonly</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<MalioCheckbox
|
||||||
|
:model-value="true"
|
||||||
|
label="Option désactivée"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
<MalioCheckbox
|
||||||
|
:model-value="true"
|
||||||
|
label="Option readonly"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-lg border p-4">
|
||||||
|
<h2 class="mb-4 text-xl font-bold">Plusieurs checkbox</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<MalioCheckbox
|
||||||
|
label="Option 1"
|
||||||
|
/>
|
||||||
|
<MalioCheckbox
|
||||||
|
label="Option 2"
|
||||||
|
/>
|
||||||
|
<MalioCheckbox
|
||||||
|
label="Option 3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-lg border p-4">
|
||||||
|
<h2 class="mb-4 text-xl font-bold">Plusieurs checkbox avec v-for</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<MalioCheckbox
|
||||||
|
v-for="option in options"
|
||||||
|
:key="option"
|
||||||
|
:label="option"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref} from 'vue'
|
||||||
|
import MalioCheckbox from '../../../app/components/malio/Checkbox.vue'
|
||||||
|
const simpleValue = ref(false)
|
||||||
|
const checkedValue = ref(true)
|
||||||
|
const hintValue = ref(false)
|
||||||
|
const options = [
|
||||||
|
'Option A',
|
||||||
|
'Option B',
|
||||||
|
'Option C',
|
||||||
|
'Option D',
|
||||||
|
|
||||||
|
]
|
||||||
|
</script>
|
||||||
@@ -8,6 +8,9 @@ Liste des évolutions de la librairie Malio layer UI
|
|||||||
### Added
|
### Added
|
||||||
* [#333] Création d'un composant text
|
* [#333] Création d'un composant text
|
||||||
* [#364] Création d'un composant button radio
|
* [#364] Création d'un composant button radio
|
||||||
|
* [#337] Création d'un composant select
|
||||||
|
* [#363] Création d'un composant amount
|
||||||
|
* [#363] Création d'un composant checkbox
|
||||||
|
|
||||||
### Changed
|
### Changed
|
||||||
|
|
||||||
|
|||||||
142
app/components/malio/Checkbox.test.ts
Normal file
142
app/components/malio/Checkbox.test.ts
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
import {describe, expect, it} from 'vitest'
|
||||||
|
import {mount} from '@vue/test-utils'
|
||||||
|
import type {DefineComponent} from 'vue'
|
||||||
|
import Checkbox from './Checkbox.vue'
|
||||||
|
|
||||||
|
type CheckboxProps = {
|
||||||
|
id?: string
|
||||||
|
label?: string
|
||||||
|
name?: string
|
||||||
|
modelValue?: boolean | null
|
||||||
|
inputClass?: string
|
||||||
|
labelClass?: string
|
||||||
|
groupClass?: string
|
||||||
|
required?: boolean
|
||||||
|
disabled?: boolean
|
||||||
|
readonly?: boolean
|
||||||
|
hint?: string
|
||||||
|
error?: string
|
||||||
|
success?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const CheckboxForTest = Checkbox as DefineComponent<CheckboxProps>
|
||||||
|
|
||||||
|
const mountCheckbox = (props: CheckboxProps = {}) =>
|
||||||
|
mount(CheckboxForTest, {props})
|
||||||
|
|
||||||
|
describe('MalioCheckbox', () => {
|
||||||
|
it('renders a checkbox input', () => {
|
||||||
|
const wrapper = mountCheckbox()
|
||||||
|
|
||||||
|
expect(wrapper.get('input').attributes('type')).toBe('checkbox')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders the label text', () => {
|
||||||
|
const wrapper = mountCheckbox({label: 'Accept terms'})
|
||||||
|
|
||||||
|
expect(wrapper.get('label').text()).toContain('Accept terms')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('uses a provided id on input and label', () => {
|
||||||
|
const wrapper = mountCheckbox({
|
||||||
|
id: 'checkbox-id',
|
||||||
|
label: 'Accept terms',
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(wrapper.get('input').attributes('id')).toBe('checkbox-id')
|
||||||
|
expect(wrapper.get('label').attributes('for')).toBe('checkbox-id')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('generates an id when none is provided', () => {
|
||||||
|
const wrapper = mountCheckbox({label: 'Accept terms'})
|
||||||
|
const inputId = wrapper.get('input').attributes('id')
|
||||||
|
|
||||||
|
expect(inputId?.startsWith('malio-checkbox-')).toBe(true)
|
||||||
|
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('applies the name attribute', () => {
|
||||||
|
const wrapper = mountCheckbox({name: 'terms'})
|
||||||
|
|
||||||
|
expect(wrapper.get('input').attributes('name')).toBe('terms')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('reflects the checked state from modelValue', () => {
|
||||||
|
const wrapper = mountCheckbox({modelValue: true})
|
||||||
|
|
||||||
|
expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('emits update:modelValue when toggled', async () => {
|
||||||
|
const wrapper = mountCheckbox({modelValue: false})
|
||||||
|
const input = wrapper.get('input')
|
||||||
|
|
||||||
|
await input.setValue(true)
|
||||||
|
|
||||||
|
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('does not emit when readonly', async () => {
|
||||||
|
const wrapper = mountCheckbox({
|
||||||
|
modelValue: true,
|
||||||
|
readonly: true,
|
||||||
|
})
|
||||||
|
const input = wrapper.get('input')
|
||||||
|
|
||||||
|
await input.setValue(false)
|
||||||
|
|
||||||
|
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||||
|
expect((input.element as HTMLInputElement).checked).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('sets disabled and required attributes', () => {
|
||||||
|
const wrapper = mountCheckbox({
|
||||||
|
disabled: true,
|
||||||
|
required: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||||
|
expect(wrapper.get('input').attributes('required')).toBeDefined()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows a hint message and links it with aria-describedby', () => {
|
||||||
|
const wrapper = mountCheckbox({hint: 'Required field'})
|
||||||
|
const inputId = wrapper.get('input').attributes('id')
|
||||||
|
|
||||||
|
expect(wrapper.get('p').text()).toBe('Required field')
|
||||||
|
expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows an error state and message', () => {
|
||||||
|
const wrapper = mountCheckbox({
|
||||||
|
label: 'Accept terms',
|
||||||
|
error: 'You must accept',
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||||
|
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||||
|
expect(wrapper.get('p').text()).toBe('You must accept')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows success only when there is no error', () => {
|
||||||
|
const wrapper = mountCheckbox({
|
||||||
|
success: 'Valid',
|
||||||
|
error: 'Invalid',
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(wrapper.get('p').text()).toBe('Invalid')
|
||||||
|
expect(wrapper.get('p').classes()).toContain('text-m-error')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows success styles and message when there is no error', () => {
|
||||||
|
const wrapper = mountCheckbox({
|
||||||
|
label: 'Accept terms',
|
||||||
|
success: 'Valid',
|
||||||
|
modelValue: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||||
|
expect(wrapper.get('p').text()).toBe('Valid')
|
||||||
|
expect(wrapper.get('p').classes()).toContain('text-m-success')
|
||||||
|
})
|
||||||
|
})
|
||||||
227
app/components/malio/Checkbox.vue
Normal file
227
app/components/malio/Checkbox.vue
Normal file
@@ -0,0 +1,227 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="mergedGroupClass">
|
||||||
|
<input
|
||||||
|
:id="inputId"
|
||||||
|
:name="name"
|
||||||
|
:checked="isChecked"
|
||||||
|
:required="required"
|
||||||
|
:disabled="disabled"
|
||||||
|
:aria-invalid="!!error"
|
||||||
|
:aria-describedby="describedBy"
|
||||||
|
:class="mergedInputClass"
|
||||||
|
v-bind="attrs"
|
||||||
|
type="checkbox"
|
||||||
|
@change="onChange"
|
||||||
|
>
|
||||||
|
|
||||||
|
<label
|
||||||
|
v-if="label"
|
||||||
|
:for="inputId"
|
||||||
|
:class="mergedLabelClass"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<svg width="12" height="10" viewBox="0 0 12 10" aria-hidden="true">
|
||||||
|
<polyline points="1.5 6 4.5 9 10.5 1"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{{ label }}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<p
|
||||||
|
v-if="hint || hasError || hasSuccess"
|
||||||
|
:id="`${inputId}-describedby`"
|
||||||
|
:class="mergedMessageClass"
|
||||||
|
>
|
||||||
|
{{ error || success || hint }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {computed, useAttrs, useId} from 'vue'
|
||||||
|
import {twMerge} from 'tailwind-merge'
|
||||||
|
|
||||||
|
defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
id?: string
|
||||||
|
label?: string
|
||||||
|
name?: string
|
||||||
|
modelValue?: boolean | null | undefined
|
||||||
|
inputClass?: string
|
||||||
|
labelClass?: string
|
||||||
|
groupClass?: string
|
||||||
|
required?: boolean
|
||||||
|
disabled?: boolean
|
||||||
|
readonly?: boolean
|
||||||
|
hint?: string
|
||||||
|
error?: string
|
||||||
|
success?: string
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
id: '',
|
||||||
|
label: '',
|
||||||
|
name: '',
|
||||||
|
modelValue: undefined,
|
||||||
|
inputClass: '',
|
||||||
|
labelClass: '',
|
||||||
|
groupClass: '',
|
||||||
|
required: false,
|
||||||
|
disabled: false,
|
||||||
|
readonly: false,
|
||||||
|
hint: '',
|
||||||
|
error: '',
|
||||||
|
success: '',
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const attrs = useAttrs()
|
||||||
|
const generatedId = useId()
|
||||||
|
|
||||||
|
const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
|
||||||
|
const isChecked = computed(() => !!props.modelValue)
|
||||||
|
const hasError = computed(() => !!props.error)
|
||||||
|
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||||
|
const disabled = computed(() => props.disabled)
|
||||||
|
|
||||||
|
const describedBy = computed(() => {
|
||||||
|
if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
|
||||||
|
return `${inputId.value}-describedby`
|
||||||
|
})
|
||||||
|
|
||||||
|
const mergedGroupClass = computed(() =>
|
||||||
|
twMerge(
|
||||||
|
'checkbox-wrapper-4 mt-4 w-full',
|
||||||
|
props.groupClass,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
const mergedInputClass = computed(() =>
|
||||||
|
twMerge(
|
||||||
|
'inp-cbx peer',
|
||||||
|
props.inputClass,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
const mergedLabelClass = computed(() =>
|
||||||
|
twMerge(
|
||||||
|
'cbx text-black',
|
||||||
|
disabled.value ? 'cursor-not-allowed text-black/60' : '',
|
||||||
|
hasError.value ? 'text-m-error' : '',
|
||||||
|
hasSuccess.value ? 'text-m-success' : '',
|
||||||
|
props.labelClass,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
const mergedMessageClass = computed(() =>
|
||||||
|
twMerge(
|
||||||
|
'text-xs',
|
||||||
|
hasError.value
|
||||||
|
? 'text-m-error'
|
||||||
|
: hasSuccess.value
|
||||||
|
? 'text-m-success'
|
||||||
|
: 'text-m-muted',
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(event: 'update:modelValue', value: boolean): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const onChange = (event: Event) => {
|
||||||
|
const target = event.target as HTMLInputElement
|
||||||
|
|
||||||
|
if (props.readonly) {
|
||||||
|
target.checked = isChecked.value
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('update:modelValue', target.checked)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.cbx {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cbx span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cbx span:first-child {
|
||||||
|
position: relative;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
flex: 0 0 18px;
|
||||||
|
transform: scale(1);
|
||||||
|
border: 2px solid rgb(0, 0, 0);
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cbx span:first-child svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
left: 1px;
|
||||||
|
fill: none;
|
||||||
|
stroke: #000000;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
stroke-dasharray: 16px;
|
||||||
|
stroke-dashoffset: 16px;
|
||||||
|
transition: all 0.125s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cbx span:last-child {
|
||||||
|
padding-left: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp-cbx {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
clip-path: inset(50%);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp-cbx:checked + .cbx span:first-child svg {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp-cbx + .cbx.text-m-error span:first-child {
|
||||||
|
border-color: rgb(var(--m-error) / 1);
|
||||||
|
}
|
||||||
|
.cbx.text-m-error span:first-child svg {
|
||||||
|
stroke: rgb(var(--m-error) / 1);
|
||||||
|
}
|
||||||
|
.inp-cbx:checked + .cbx.text-m-error span:first-child {
|
||||||
|
border-color: rgb(var(--m-error) / 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp-cbx + .cbx.text-m-success span:first-child {
|
||||||
|
border-color: rgb(var(--m-success) / 1);
|
||||||
|
}
|
||||||
|
.cbx.text-m-success span:first-child svg {
|
||||||
|
stroke: rgb(var(--m-success) / 1);
|
||||||
|
}
|
||||||
|
.inp-cbx:checked + .cbx.text-m-success span:first-child {
|
||||||
|
border-color: rgb(var(--m-success) / 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inp-cbx:disabled + .cbx {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
114
app/story/inputCheckbox.story.vue
Normal file
114
app/story/inputCheckbox.story.vue
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
<template>
|
||||||
|
<Story title="Input/Checkbox">
|
||||||
|
<MalioCheckbox
|
||||||
|
v-model="simpleValue"
|
||||||
|
label="Accepter les conditions"
|
||||||
|
/>
|
||||||
|
</Story>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<docs lang="md">
|
||||||
|
# MalioCheckbox
|
||||||
|
|
||||||
|
Composant checkbox custom avec `v-model`, message d'aide, et états visuels
|
||||||
|
`error` / `success`.
|
||||||
|
|
||||||
|
------------------------------------------------------------------------
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### id
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Description: Identifiant HTML du checkbox.
|
||||||
|
- Comportement: si absent, un id unique est généré automatiquement.
|
||||||
|
|
||||||
|
### label
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Description: Texte affiche a cote de la case.
|
||||||
|
|
||||||
|
### name
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Description: Attribut `name` du champ.
|
||||||
|
|
||||||
|
### modelValue
|
||||||
|
|
||||||
|
- Type: `boolean | null | undefined`
|
||||||
|
- Description: État coche du composant.
|
||||||
|
|
||||||
|
### inputClass
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Description: Classes supplémentaires appliquées a l'input natif.
|
||||||
|
|
||||||
|
### labelClass
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Description: Classes supplémentaires appliquées au label.
|
||||||
|
|
||||||
|
### groupClass
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Description: Classes supplémentaires appliquées au conteneur.
|
||||||
|
|
||||||
|
### required
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Description: Ajoute l'attribut HTML `required`.
|
||||||
|
|
||||||
|
### disabled
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Description: Désactive le composant.
|
||||||
|
|
||||||
|
### readonly
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Description: Empêche la mise a jour du `v-model` tout en gardant
|
||||||
|
l'affichage courant.
|
||||||
|
|
||||||
|
### hint
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Description: Message d'aide affiche sous le checkbox.
|
||||||
|
|
||||||
|
### error
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Description: Message d'erreur.
|
||||||
|
- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
|
||||||
|
d'erreur au texte et a la case.
|
||||||
|
|
||||||
|
### success
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Description: Message de succès.
|
||||||
|
- Effet: applique la couleur de succès au texte et a la case si `error`
|
||||||
|
est absent.
|
||||||
|
|
||||||
|
------------------------------------------------------------------------
|
||||||
|
|
||||||
|
## Accessibilité
|
||||||
|
|
||||||
|
- `aria-invalid` est active si `error` existe.
|
||||||
|
- `aria-describedby` pointe vers le message affiche.
|
||||||
|
- L'input natif reste present pour conserver le comportement formulaire.
|
||||||
|
|
||||||
|
------------------------------------------------------------------------
|
||||||
|
|
||||||
|
## Event
|
||||||
|
|
||||||
|
### update:modelValue
|
||||||
|
|
||||||
|
- Émis a chaque changement de l'état coche.
|
||||||
|
- Retourne un booléen `true` ou `false`.
|
||||||
|
</docs>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref} from 'vue'
|
||||||
|
import MalioCheckbox from '../components/malio/Checkbox.vue'
|
||||||
|
|
||||||
|
const simpleValue = ref(false)
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user