[#MUI-32] Création d'un composant saisie assistée (autocomplete) (#46)
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #46 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #46.
This commit is contained in:
430
app/components/malio/input/InputAutocomplete.test.ts
Normal file
430
app/components/malio/input/InputAutocomplete.test.ts
Normal file
@@ -0,0 +1,430 @@
|
||||
import {describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import InputAutocomplete from './InputAutocomplete.vue'
|
||||
|
||||
type Option = {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
type InputAutocompleteProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | number | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
options?: Option[]
|
||||
loading?: boolean
|
||||
debounce?: number
|
||||
minSearchLength?: number
|
||||
allowCreate?: boolean
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
noResultsText?: string
|
||||
loadingText?: string
|
||||
minSearchText?: string
|
||||
}
|
||||
|
||||
const InputAutocompleteForTest = InputAutocomplete as DefineComponent<InputAutocompleteProps>
|
||||
|
||||
const options: Option[] = [
|
||||
{label: 'France', value: 'fr'},
|
||||
{label: 'Belgique', value: 'be'},
|
||||
{label: 'Canada', value: 'ca'},
|
||||
]
|
||||
|
||||
const mountComponent = (props: InputAutocompleteProps = {}) =>
|
||||
mount(InputAutocompleteForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputAutocomplete', () => {
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Pays'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Pays')
|
||||
})
|
||||
|
||||
it('renders with type combobox role', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('role')).toBe('combobox')
|
||||
})
|
||||
|
||||
it('renders input with provided modelValue label when option matches', () => {
|
||||
const wrapper = mountComponent({modelValue: 'fr', options})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('France')
|
||||
})
|
||||
|
||||
it('opens dropdown on focus', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(true)
|
||||
expect(wrapper.get('input').attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('does not open dropdown on focus when disabled', async () => {
|
||||
const wrapper = mountComponent({options, disabled: true})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open dropdown on focus when readonly', async () => {
|
||||
const wrapper = mountComponent({options, readonly: true})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders all options in dropdown', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
const items = wrapper.findAll('[data-test="option"]')
|
||||
expect(items).toHaveLength(3)
|
||||
expect(items[0].text()).toBe('France')
|
||||
expect(items[1].text()).toBe('Belgique')
|
||||
expect(items[2].text()).toBe('Canada')
|
||||
})
|
||||
|
||||
it('emits update:modelValue with option value when option is selected', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.findAll('[data-test="option"]')[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
|
||||
})
|
||||
|
||||
it('emits select with full option object', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.findAll('[data-test="option"]')[0].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('select')?.[0]).toEqual([options[0]])
|
||||
})
|
||||
|
||||
it('closes dropdown after selecting an option', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.findAll('[data-test="option"]')[0].trigger('click')
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('fills input with selected option label after selection', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: null})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.findAll('[data-test="option"]')[1].trigger('click')
|
||||
|
||||
await wrapper.setProps({modelValue: 'be'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('Belgique')
|
||||
})
|
||||
|
||||
it('emits search after debounce when user types', async () => {
|
||||
vi.useFakeTimers()
|
||||
const wrapper = mountComponent({options, debounce: 300})
|
||||
|
||||
await wrapper.get('input').setValue('fra')
|
||||
|
||||
expect(wrapper.emitted('search')).toBeUndefined()
|
||||
|
||||
vi.advanceTimersByTime(300)
|
||||
|
||||
expect(wrapper.emitted('search')?.[0]).toEqual(['fra'])
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('does not emit search until minSearchLength is reached', async () => {
|
||||
vi.useFakeTimers()
|
||||
const wrapper = mountComponent({minSearchLength: 3, debounce: 300})
|
||||
|
||||
await wrapper.get('input').setValue('fr')
|
||||
vi.advanceTimersByTime(300)
|
||||
|
||||
expect(wrapper.emitted('search')).toBeUndefined()
|
||||
|
||||
await wrapper.get('input').setValue('fra')
|
||||
vi.advanceTimersByTime(300)
|
||||
|
||||
expect(wrapper.emitted('search')?.[0]).toEqual(['fra'])
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('shows minSearch text in dropdown when minSearchLength not reached', async () => {
|
||||
const wrapper = mountComponent({minSearchLength: 3, minSearchText: 'Tapez 3 caractères'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="min-search-text"]').text()).toBe('Tapez 3 caractères')
|
||||
})
|
||||
|
||||
it('shows loading text in dropdown when loading', async () => {
|
||||
const wrapper = mountComponent({loading: true, loadingText: 'En cours…'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="loading-text"]').text()).toBe('En cours…')
|
||||
})
|
||||
|
||||
it('shows loading icon when loading', async () => {
|
||||
const wrapper = mountComponent({loading: true})
|
||||
|
||||
expect(wrapper.find('[data-test="loading-icon"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="chevron"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows no results text when options is empty', async () => {
|
||||
const wrapper = mountComponent({options: [], noResultsText: 'Rien trouvé'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="no-results-text"]').text()).toBe('Rien trouvé')
|
||||
})
|
||||
|
||||
it('clears selection when typing different value', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'fr'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').setValue('belg')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
|
||||
expect(wrapper.emitted('select')?.[0]).toEqual([null])
|
||||
})
|
||||
|
||||
it('emits create event with typed value when allowCreate and Enter pressed', async () => {
|
||||
const wrapper = mountComponent({options, allowCreate: true})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').setValue('Custom')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Enter'})
|
||||
|
||||
expect(wrapper.emitted('create')?.[0]).toEqual(['Custom'])
|
||||
expect(wrapper.emitted('update:modelValue')?.some(e => e[0] === 'Custom')).toBe(true)
|
||||
})
|
||||
|
||||
it('does not emit create when allowCreate is false', async () => {
|
||||
const wrapper = mountComponent({options, allowCreate: false})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').setValue('Custom')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Enter'})
|
||||
|
||||
expect(wrapper.emitted('create')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('selects option on Enter with active index', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Enter'})
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['fr'])
|
||||
})
|
||||
|
||||
it('navigates options with ArrowDown', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
|
||||
await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-activedescendant')).toContain('-option-1')
|
||||
})
|
||||
|
||||
it('closes dropdown on Escape', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(true)
|
||||
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Escape'})
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('reverts input value on Escape', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'fr'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').setValue('xyz')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Escape'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('France')
|
||||
})
|
||||
|
||||
it('shows error message and styles', () => {
|
||||
const wrapper = mountComponent({error: 'Champ invalide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Champ invalide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Champ valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Champ valide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mountComponent({hint: 'Tapez pour rechercher'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Tapez pour rechercher')
|
||||
})
|
||||
|
||||
it('renders left icon when iconName provided with left position', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'left'})
|
||||
|
||||
expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders right icon when iconName provided with right position', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'right'})
|
||||
|
||||
expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not render icon when iconName is empty', () => {
|
||||
const wrapper = mountComponent({iconName: ''})
|
||||
|
||||
expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
|
||||
expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('uses left padding when icon is left', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'left'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('!pl-11')
|
||||
})
|
||||
|
||||
it('uses extra right padding when icon is right', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'right'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('!pr-16')
|
||||
})
|
||||
|
||||
it('renders the chevron with default icon', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const icons = wrapper.findAllComponents(IconifyIcon)
|
||||
const chevron = icons[icons.length - 1]
|
||||
expect(chevron.props('icon')).toBe('mdi:chevron-down')
|
||||
})
|
||||
|
||||
it('rotates the chevron when dropdown is open', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('rotate-0')
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('rotate-180')
|
||||
})
|
||||
|
||||
it('sets disabled attribute', () => {
|
||||
const wrapper = mountComponent({disabled: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('sets readonly attribute', () => {
|
||||
const wrapper = mountComponent({readonly: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'country', label: 'Pays'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('country')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('country')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Pays'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-autocomplete-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('aria-invalid is false when no error', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
|
||||
})
|
||||
|
||||
it('marks the option matching modelValue as aria-selected', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'be'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
const items = wrapper.findAll('[data-test="option"]')
|
||||
expect(items[0].attributes('aria-selected')).toBe('false')
|
||||
expect(items[1].attributes('aria-selected')).toBe('true')
|
||||
expect(items[2].attributes('aria-selected')).toBe('false')
|
||||
})
|
||||
|
||||
it('updates inputValue when modelValue changes externally', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'fr'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('France')
|
||||
|
||||
await wrapper.setProps({modelValue: 'ca'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('Canada')
|
||||
})
|
||||
|
||||
it('clears inputValue when modelValue is cleared externally', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'fr'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('France')
|
||||
|
||||
await wrapper.setProps({modelValue: null})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('')
|
||||
})
|
||||
|
||||
it('uses allowCreate modelValue as inputValue when no match in options', async () => {
|
||||
const wrapper = mountComponent({options, allowCreate: true, modelValue: 'Custom'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('Custom')
|
||||
})
|
||||
})
|
||||
513
app/components/malio/input/InputAutocomplete.vue
Normal file
513
app/components/malio/input/InputAutocomplete.vue
Normal file
@@ -0,0 +1,513 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
ref="root"
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:value="inputValue"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:aria-expanded="isOpen"
|
||||
:aria-controls="listboxId"
|
||||
:aria-activedescendant="activeOptionId"
|
||||
role="combobox"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
@click="onInputClick"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName && iconPosition === 'left'"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon-left"
|
||||
:class="[iconStateClass, 'pointer-events-none absolute left-[10px] top-1/2 -translate-y-1/2']"
|
||||
/>
|
||||
|
||||
<div class="pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<IconifyIcon
|
||||
v-if="iconName && iconPosition === 'right'"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon-right"
|
||||
:class="[iconStateClass]"
|
||||
/>
|
||||
<IconifyIcon
|
||||
v-if="loading"
|
||||
icon="mdi:loading"
|
||||
:width="20"
|
||||
:height="20"
|
||||
data-test="loading-icon"
|
||||
class="animate-spin text-m-primary"
|
||||
/>
|
||||
<IconifyIcon
|
||||
v-else
|
||||
icon="mdi:chevron-down"
|
||||
:width="20"
|
||||
:height="20"
|
||||
data-test="chevron"
|
||||
class="transition-transform duration-300"
|
||||
:class="[
|
||||
isOpen ? 'rotate-180' : 'rotate-0',
|
||||
chevronColorClass,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="isOpen"
|
||||
:id="listboxId"
|
||||
ref="listRef"
|
||||
data-test="dropdown"
|
||||
role="listbox"
|
||||
:aria-labelledby="inputId"
|
||||
class="absolute left-0 right-0 top-[calc(100%-4px)] z-20 max-h-60 w-full overflow-auto rounded-b-md border border-t-0 bg-white"
|
||||
:class="[
|
||||
hasError
|
||||
? 'border-m-danger select-scrollbar-error'
|
||||
: hasSuccess
|
||||
? 'border-m-success select-scrollbar-success'
|
||||
: 'border-m-primary select-scrollbar-primary',
|
||||
]"
|
||||
>
|
||||
<li
|
||||
v-if="loading"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="loading-text"
|
||||
>
|
||||
{{ loadingText }}
|
||||
</li>
|
||||
<li
|
||||
v-else-if="showMinSearch"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="min-search-text"
|
||||
>
|
||||
{{ minSearchText }}
|
||||
</li>
|
||||
<li
|
||||
v-else-if="options.length === 0"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="no-results-text"
|
||||
>
|
||||
{{ noResultsText }}
|
||||
</li>
|
||||
<template v-else>
|
||||
<li
|
||||
v-for="(opt, index) in options"
|
||||
:id="optionId(index)"
|
||||
:key="String(opt.value)"
|
||||
data-test="option"
|
||||
role="option"
|
||||
:aria-selected="opt.value === modelValue"
|
||||
class="cursor-pointer px-3 py-2 text-black"
|
||||
:class="[
|
||||
index === activeIndex ? 'bg-m-muted/10' : '',
|
||||
opt.value === modelValue ? 'bg-m-muted/10 font-semibold' : '',
|
||||
]"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mousedown.prevent
|
||||
@click="onSelect(opt)"
|
||||
>
|
||||
{{ opt.label || '\u00A0' }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputAutocomplete', inheritAttrs: false})
|
||||
|
||||
type Option = {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | number | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
options?: Option[]
|
||||
loading?: boolean
|
||||
debounce?: number
|
||||
minSearchLength?: number
|
||||
allowCreate?: boolean
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
noResultsText?: string
|
||||
loadingText?: string
|
||||
minSearchText?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
modelValue: undefined,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
label: '',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
options: () => [],
|
||||
loading: false,
|
||||
debounce: 300,
|
||||
minSearchLength: 0,
|
||||
allowCreate: false,
|
||||
iconName: '',
|
||||
iconPosition: 'left',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
noResultsText: 'Aucun résultat',
|
||||
loadingText: 'Chargement…',
|
||||
minSearchText: 'Tapez pour rechercher',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string | number | null): void
|
||||
(e: 'search' | 'create', value: string): void
|
||||
(e: 'select', option: Option | null): void
|
||||
}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const listRef = ref<HTMLElement | null>(null)
|
||||
const inputValue = ref<string>('')
|
||||
const isFocused = ref(false)
|
||||
const isOpen = ref(false)
|
||||
const activeIndex = ref(-1)
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-autocomplete-${generatedId}`)
|
||||
const listboxId = computed(() => `${inputId.value}-listbox`)
|
||||
|
||||
const selectedOption = computed(() =>
|
||||
props.options.find(o => o.value === props.modelValue) ?? null,
|
||||
)
|
||||
|
||||
const hasSelection = computed(() =>
|
||||
props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '',
|
||||
)
|
||||
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const isFilled = computed(() => inputValue.value.trim().length > 0 || hasSelection.value)
|
||||
const shouldFloatLabel = computed(() => isFocused.value || inputValue.value.length > 0)
|
||||
|
||||
const showMinSearch = computed(() =>
|
||||
props.minSearchLength > 0 && inputValue.value.length < props.minSearchLength,
|
||||
)
|
||||
|
||||
const optionId = (index: number) => `${inputId.value}-option-${index}`
|
||||
const activeOptionId = computed(() =>
|
||||
activeIndex.value >= 0 && props.options[activeIndex.value]
|
||||
? optionId(activeIndex.value)
|
||||
: undefined,
|
||||
)
|
||||
|
||||
const describedBy = computed(() =>
|
||||
(props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
watch(
|
||||
[() => props.modelValue, () => props.options],
|
||||
() => {
|
||||
if (isFocused.value) return
|
||||
if (selectedOption.value) {
|
||||
inputValue.value = selectedOption.value.label
|
||||
} else if (props.allowCreate && typeof props.modelValue === 'string' && props.modelValue !== '') {
|
||||
inputValue.value = props.modelValue
|
||||
} else if (!hasSelection.value) {
|
||||
inputValue.value = ''
|
||||
}
|
||||
},
|
||||
{immediate: true},
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative flex h-12 w-full items-center', props.groupClass),
|
||||
)
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
const parts: string[] = []
|
||||
if (props.iconName && props.iconPosition === 'left') parts.push('!pl-11')
|
||||
|
||||
const hasCustomRight = !!props.iconName && props.iconPosition === 'right'
|
||||
if (hasCustomRight) parts.push('!pr-16')
|
||||
else parts.push('!pr-10')
|
||||
|
||||
return parts.join(' ')
|
||||
})
|
||||
|
||||
const focusPaddingClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
||||
return 'focus:pl-[11px]'
|
||||
})
|
||||
|
||||
const labelPositionClass = computed(() =>
|
||||
props.iconName && props.iconPosition === 'left' ? 'left-11' : 'left-3',
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
props.disabled
|
||||
? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted'
|
||||
: 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
isOpen.value ? '!rounded-b-none !border-b-0' : '',
|
||||
props.inputClass,
|
||||
iconInputPaddingClass.value,
|
||||
focusPaddingClass.value,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
labelPositionClass.value,
|
||||
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
|
||||
props.disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (props.disabled) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
|
||||
const chevronColorClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (isOpen.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return 'text-m-muted'
|
||||
})
|
||||
|
||||
const scheduleSearch = () => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
if (showMinSearch.value) return
|
||||
debounceTimer = setTimeout(() => {
|
||||
emit('search', inputValue.value)
|
||||
}, props.debounce)
|
||||
}
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
inputValue.value = target.value
|
||||
if (!isOpen.value) isOpen.value = true
|
||||
activeIndex.value = -1
|
||||
|
||||
if (hasSelection.value && target.value !== selectedOption.value?.label) {
|
||||
emit('update:modelValue', null)
|
||||
emit('select', null)
|
||||
}
|
||||
|
||||
scheduleSearch()
|
||||
}
|
||||
|
||||
const onFocus = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
isFocused.value = true
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
const onInputClick = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
const onSelect = (option: Option) => {
|
||||
inputValue.value = option.label
|
||||
activeIndex.value = -1
|
||||
emit('update:modelValue', option.value)
|
||||
emit('select', option)
|
||||
isOpen.value = false
|
||||
isFocused.value = false
|
||||
}
|
||||
|
||||
const closeAndCommit = () => {
|
||||
if (
|
||||
props.allowCreate
|
||||
&& inputValue.value !== ''
|
||||
&& inputValue.value !== selectedOption.value?.label
|
||||
) {
|
||||
emit('update:modelValue', inputValue.value)
|
||||
emit('create', inputValue.value)
|
||||
} else if (selectedOption.value) {
|
||||
inputValue.value = selectedOption.value.label
|
||||
} else if (!props.allowCreate) {
|
||||
inputValue.value = ''
|
||||
}
|
||||
isOpen.value = false
|
||||
isFocused.value = false
|
||||
}
|
||||
|
||||
const closeAndRevert = () => {
|
||||
if (selectedOption.value) {
|
||||
inputValue.value = selectedOption.value.label
|
||||
} else {
|
||||
inputValue.value = ''
|
||||
}
|
||||
isOpen.value = false
|
||||
isFocused.value = false
|
||||
}
|
||||
|
||||
const onKeydown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault()
|
||||
closeAndRevert()
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
if (activeIndex.value >= 0 && props.options[activeIndex.value]) {
|
||||
onSelect(props.options[activeIndex.value])
|
||||
return
|
||||
}
|
||||
if (props.allowCreate && inputValue.value !== '') {
|
||||
emit('update:modelValue', inputValue.value)
|
||||
emit('create', inputValue.value)
|
||||
isOpen.value = false
|
||||
isFocused.value = false
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
if (!isOpen.value) {
|
||||
isOpen.value = true
|
||||
}
|
||||
activeIndex.value = Math.min(activeIndex.value + 1, props.options.length - 1)
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault()
|
||||
activeIndex.value = Math.max(activeIndex.value - 1, 0)
|
||||
}
|
||||
}
|
||||
|
||||
const onClickOutside = (event: MouseEvent) => {
|
||||
if (!root.value) return
|
||||
if (!root.value.contains(event.target as Node)) {
|
||||
closeAndCommit()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('mousedown', onClickOutside))
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousedown', onClickOutside)
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(ul[role="listbox"]) {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-primary) {
|
||||
scrollbar-color: rgb(var(--m-primary)) transparent;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-error) {
|
||||
scrollbar-color: #000000 transparent;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-success) {
|
||||
scrollbar-color: #000000 transparent;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative w-full"
|
||||
>
|
||||
<div :class="mergedGroupClass">
|
||||
<textarea
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
@@ -81,6 +79,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
|
||||
|
||||
@@ -108,6 +107,7 @@ const props = withDefaults(
|
||||
error?: string
|
||||
success?: string
|
||||
rounded?: string
|
||||
groupClass?: string
|
||||
|
||||
}>(),
|
||||
{
|
||||
@@ -133,9 +133,14 @@ const props = withDefaults(
|
||||
maxResizeWidth: 640,
|
||||
minResizeHeight: 40,
|
||||
maxResizeHeight: 320,
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative w-full', props.groupClass),
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
>
|
||||
<button
|
||||
: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="[
|
||||
@@ -115,8 +116,16 @@
|
||||
: 'border-m-primary'
|
||||
]"
|
||||
>
|
||||
<li
|
||||
v-if="normalizedOptions.length === 0"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="no-options-text"
|
||||
>
|
||||
{{ noOptionsText }}
|
||||
</li>
|
||||
<li
|
||||
v-for="(opt, index) in normalizedOptions"
|
||||
v-else
|
||||
:id="optionId(index)"
|
||||
:key="String(opt.value)"
|
||||
role="option"
|
||||
@@ -177,6 +186,7 @@ const props = withDefaults(defineProps<{
|
||||
rounded?: string
|
||||
disabled?: boolean
|
||||
groupClass?: string
|
||||
noOptionsText?: string
|
||||
}>(), {
|
||||
options: () => [],
|
||||
emptyOptionLabel: '',
|
||||
@@ -190,12 +200,14 @@ const props = withDefaults(defineProps<{
|
||||
rounded: 'rounded-md',
|
||||
disabled: false,
|
||||
groupClass: '',
|
||||
noOptionsText: 'Aucune option disponible',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: string | number | null): void
|
||||
}>()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const buttonRef = ref<HTMLButtonElement | null>(null)
|
||||
const isOpen = ref(false)
|
||||
const activeIndex = ref(-1)
|
||||
const openDirection = ref<'down' | 'up'>('down')
|
||||
@@ -299,6 +311,7 @@ function toggle() {
|
||||
function select(value: string | number | null) {
|
||||
emit('update:modelValue', value)
|
||||
close()
|
||||
buttonRef.value?.blur()
|
||||
}
|
||||
|
||||
function onClickOutside(e: MouseEvent) {
|
||||
@@ -316,6 +329,21 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(ul[role="listbox"]) {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
>
|
||||
<button
|
||||
: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="[
|
||||
@@ -144,7 +145,14 @@
|
||||
]"
|
||||
>
|
||||
<li
|
||||
v-if="displaySelectAll"
|
||||
v-if="normalizedOptions.length === 0"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="no-options-text"
|
||||
>
|
||||
{{ noOptionsText }}
|
||||
</li>
|
||||
<li
|
||||
v-if="displaySelectAll && normalizedOptions.length > 0"
|
||||
class="border-b border-m-muted/30 px-3 py-2"
|
||||
@mousedown.prevent
|
||||
>
|
||||
@@ -231,6 +239,7 @@ const props = withDefaults(defineProps<{
|
||||
selectAllLabel?: string
|
||||
disabled?: boolean
|
||||
groupClass?: string
|
||||
noOptionsText?: string
|
||||
}>(), {
|
||||
options: () => [],
|
||||
emptyOptionLabel: '',
|
||||
@@ -247,12 +256,14 @@ const props = withDefaults(defineProps<{
|
||||
selectAllLabel: 'Tout sélectionner',
|
||||
disabled: false,
|
||||
groupClass: '',
|
||||
noOptionsText: 'Aucune option disponible',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Array<string | number>): void
|
||||
}>()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const buttonRef = ref<HTMLButtonElement | null>(null)
|
||||
const isOpen = ref(false)
|
||||
const activeIndex = ref(-1)
|
||||
const openDirection = ref<'down' | 'up'>('down')
|
||||
@@ -367,9 +378,10 @@ function isChecked(value: string | number) {
|
||||
function toggleOption(value: string | number) {
|
||||
if (isChecked(value)) {
|
||||
emit('update:modelValue', props.modelValue.filter(item => item !== value))
|
||||
return
|
||||
} else {
|
||||
emit('update:modelValue', [...props.modelValue, value])
|
||||
}
|
||||
emit('update:modelValue', [...props.modelValue, value])
|
||||
nextTick(() => buttonRef.value?.focus())
|
||||
}
|
||||
|
||||
function toggleAll() {
|
||||
@@ -378,6 +390,7 @@ function toggleAll() {
|
||||
} else {
|
||||
emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
|
||||
}
|
||||
nextTick(() => buttonRef.value?.focus())
|
||||
}
|
||||
|
||||
function onClickOutside(e: MouseEvent) {
|
||||
@@ -395,6 +408,21 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(ul[role="listbox"]) {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
@@ -8,6 +8,7 @@ type Tab = {
|
||||
key: string
|
||||
label: string
|
||||
icon?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
type TabListProps = {
|
||||
@@ -134,4 +135,53 @@ describe('MalioTabList', () => {
|
||||
expect(icons[0].props('icon')).toBe('mdi:home')
|
||||
expect(icons[1].props('icon')).toBe('mdi:account')
|
||||
})
|
||||
|
||||
it('sets disabled attribute and aria-disabled on disabled tabs', () => {
|
||||
const disabledTabs: Tab[] = [
|
||||
{key: 'a', label: 'A'},
|
||||
{key: 'b', label: 'B', disabled: true},
|
||||
]
|
||||
const wrapper = mountComponent({tabs: disabledTabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons[1].attributes('disabled')).toBeDefined()
|
||||
expect(buttons[1].attributes('aria-disabled')).toBe('true')
|
||||
})
|
||||
|
||||
it('applies cursor-not-allowed on disabled tabs', () => {
|
||||
const disabledTabs: Tab[] = [
|
||||
{key: 'a', label: 'A'},
|
||||
{key: 'b', label: 'B', disabled: true},
|
||||
]
|
||||
const wrapper = mountComponent({tabs: disabledTabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons[1].classes()).toContain('cursor-not-allowed')
|
||||
expect(buttons[1].classes()).not.toContain('hover:text-m-primary/70')
|
||||
})
|
||||
|
||||
it('does not emit update:modelValue when clicking a disabled tab', async () => {
|
||||
const disabledTabs: Tab[] = [
|
||||
{key: 'a', label: 'A'},
|
||||
{key: 'b', label: 'B', disabled: true},
|
||||
]
|
||||
const wrapper = mountComponent({tabs: disabledTabs, modelValue: 'a'})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
|
||||
await buttons[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('does not change active tab in uncontrolled mode when clicking disabled tab', async () => {
|
||||
const disabledTabs: Tab[] = [
|
||||
{key: 'a', label: 'A'},
|
||||
{key: 'b', label: 'B', disabled: true},
|
||||
]
|
||||
const wrapper = mountComponent({tabs: disabledTabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
|
||||
await buttons[1].trigger('click')
|
||||
|
||||
expect(buttons[0].attributes('aria-selected')).toBe('true')
|
||||
expect(buttons[1].attributes('aria-selected')).toBe('false')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -12,19 +12,23 @@
|
||||
type="button"
|
||||
:aria-selected="activeTab === tab.key"
|
||||
:aria-controls="`${componentId}-panel-${tab.key}`"
|
||||
:aria-disabled="!!tab.disabled"
|
||||
:tabindex="activeTab === tab.key ? 0 : -1"
|
||||
:disabled="tab.disabled"
|
||||
:class="[
|
||||
'flex items-center gap-[18px] text-[24px] font-medium transition-colors cursor-pointer',
|
||||
'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
|
||||
activeTab === tab.key
|
||||
? 'border-b-2 border-m-primary text-m-primary font-bold outline-b'
|
||||
: 'border-transparent text-m-primary/50 hover:text-m-primary/70',
|
||||
? '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="20"
|
||||
:width="tab.iconSize ?? 24"
|
||||
/>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
@@ -53,6 +57,8 @@ type Tab = {
|
||||
key: string
|
||||
label: string
|
||||
icon?: string
|
||||
iconSize?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
@@ -79,6 +85,8 @@ const activeTab = computed(() =>
|
||||
)
|
||||
|
||||
function selectTab(key: string) {
|
||||
const tab = props.tabs.find(t => t.key === key)
|
||||
if (tab?.disabled) return
|
||||
if (!isControlled.value) {
|
||||
localValue.value = key
|
||||
}
|
||||
|
||||
294
app/story/input/inputAutocomplete.story.vue
Normal file
294
app/story/input/inputAutocomplete.story.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<Story title="Input/Autocomplete">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple (statique)</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="simpleValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="leftIconValue"
|
||||
label="Recherche"
|
||||
icon-name="mdi:magnify"
|
||||
icon-position="left"
|
||||
:options="staticOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4 md:col-span-2">
|
||||
<h2 class="mb-4 text-xl font-bold">Branché sur une API (simulé)</h2>
|
||||
<p class="mb-3 text-sm text-m-muted">
|
||||
Tapez au moins 2 caractères. Le parent écoute <code>@search</code> et alimente <code>options</code> + <code>loading</code>.
|
||||
</p>
|
||||
<MalioInputAutocomplete
|
||||
v-model="apiValue"
|
||||
label="Client"
|
||||
:options="apiOptions"
|
||||
:loading="apiLoading"
|
||||
:min-search-length="2"
|
||||
icon-name="mdi:magnify"
|
||||
icon-position="left"
|
||||
@search="onSearchApi"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Création libre (allowCreate)</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="createValue"
|
||||
label="Catégorie"
|
||||
:options="staticOptions"
|
||||
allow-create
|
||||
hint="Taper Entrée pour créer une nouvelle valeur"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="disabledValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="readonlyValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="hintValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
hint="Sélectionne un pays dans la liste"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="errorValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
error="Sélection invalide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="successValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
success="Sélection valide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputAutocomplete
|
||||
|
||||
Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtrer une liste d'options, ou pour déclencher une recherche côté parent (API). Combine le pattern floating-label des autres inputs avec un dropdown inspiré de `MalioSelect`. Conçu pour les cas ERP où la liste vient d'un appel API (auth, transformation, cache gérés par le parent).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### id
|
||||
- Type: string
|
||||
- Description: Identifiant HTML de l'input. Auto-généré si non fourni (préfixe `malio-input-autocomplete-`).
|
||||
|
||||
### label
|
||||
- Type: string
|
||||
- Description: Texte affiché comme label flottant.
|
||||
|
||||
### name
|
||||
- Type: string
|
||||
- Description: Attribut name de l'input (formulaires).
|
||||
|
||||
### modelValue
|
||||
- Type: `string | number | null | undefined`
|
||||
- Description: Valeur sélectionnée. Doit correspondre à un `option.value` (ou être un texte libre si `allowCreate`).
|
||||
|
||||
### options
|
||||
- Type: `{ label: string; value: string | number }[]`
|
||||
- Défaut: `[]`
|
||||
- Description: Liste affichée dans le dropdown. Le parent alimente cette liste (statique ou via API en réponse à l'event `search`).
|
||||
|
||||
### loading
|
||||
- Type: boolean
|
||||
- Défaut: `false`
|
||||
- Description: Affiche un spinner à la place du chevron et un message dans le dropdown.
|
||||
|
||||
### debounce
|
||||
- Type: number
|
||||
- Défaut: `300`
|
||||
- Description: Délai (ms) avant émission de l'event `search` après une frappe. Évite de spammer l'API.
|
||||
|
||||
### minSearchLength
|
||||
- Type: number
|
||||
- Défaut: `0`
|
||||
- Description: Nombre minimum de caractères avant d'émettre `search`. Pratique pour API : ne pas appeler avec query vide.
|
||||
|
||||
### allowCreate
|
||||
- Type: boolean
|
||||
- Défaut: `false`
|
||||
- Description: Si vrai, l'utilisateur peut valider (Entrée ou clic ailleurs) une valeur libre non présente dans `options` ; émet l'event `create`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Icône
|
||||
|
||||
### iconName
|
||||
- Type: string
|
||||
- Défaut: `''` (aucune)
|
||||
- Description: Nom Iconify de l'icône décorative.
|
||||
|
||||
### iconPosition
|
||||
- Type: `'left' | 'right'`
|
||||
- Défaut: `left`
|
||||
- Description: Côté d'affichage de l'icône. À droite, l'icône s'aligne avec le chevron.
|
||||
|
||||
### iconSize / iconColor
|
||||
- Type: number / string
|
||||
- Défaut: `24` / `text-m-muted`
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Textes du dropdown
|
||||
|
||||
### noResultsText
|
||||
- Type: string
|
||||
- Défaut: `Aucun résultat`
|
||||
- Description: Affiché quand `options` est vide.
|
||||
|
||||
### loadingText
|
||||
- Type: string
|
||||
- Défaut: `Chargement…`
|
||||
- Description: Affiché pendant que `loading=true`.
|
||||
|
||||
### minSearchText
|
||||
- Type: string
|
||||
- Défaut: `Tapez pour rechercher`
|
||||
- Description: Affiché quand l'utilisateur n'a pas atteint `minSearchLength`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### inputClass / labelClass / groupClass
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées respectivement à l'input, au label et au conteneur (fusionnées via `twMerge`).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Validation & Contraintes
|
||||
|
||||
### required / disabled / readonly
|
||||
- Type: boolean
|
||||
- Description: Attributs HTML standards. `disabled` et `readonly` empêchent l'ouverture du dropdown.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## États & Messages
|
||||
|
||||
### hint / error / success
|
||||
- Type: string
|
||||
- Description: Messages affichés sous le champ. `error` est prioritaire et active `aria-invalid`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Clavier
|
||||
|
||||
- `↓` / `↑` : naviguer dans les options
|
||||
- `Entrée` : sélectionner l'option active (ou créer si `allowCreate`)
|
||||
- `Échap` : fermer le dropdown et revenir à la dernière sélection
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `role="combobox"` sur l'input avec `aria-expanded`, `aria-controls`, `aria-activedescendant`.
|
||||
- `role="listbox"` sur le dropdown, `role="option"` sur chaque entrée, `aria-selected` reflète `modelValue`.
|
||||
- `aria-invalid` activé si `error` existe.
|
||||
- `aria-describedby` référence dynamiquement le message affiché.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
- Émis quand l'utilisateur sélectionne une option. Permet l'utilisation avec v-model.
|
||||
|
||||
### search
|
||||
- Émis (après debounce + minSearchLength) avec la query texte tapée. C'est ce que le parent écoute pour lancer l'appel API.
|
||||
|
||||
### select
|
||||
- Émis avec l'objet `Option` complet (ou `null` à la réinitialisation). Utile pour récupérer le `label` côté parent en plus du `value`.
|
||||
|
||||
### create
|
||||
- Émis avec la chaîne saisie quand `allowCreate` est vrai et que l'utilisateur valide une valeur libre.
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputAutocomplete from '../../components/malio/input/InputAutocomplete.vue'
|
||||
|
||||
type Option = {label: string; value: string | number}
|
||||
|
||||
const staticOptions: Option[] = [
|
||||
{label: 'France', value: 'fr'},
|
||||
{label: 'Belgique', value: 'be'},
|
||||
{label: 'Canada', value: 'ca'},
|
||||
{label: 'Suisse', value: 'ch'},
|
||||
{label: 'Luxembourg', value: 'lu'},
|
||||
{label: 'Allemagne', value: 'de'},
|
||||
]
|
||||
|
||||
const simpleValue = ref<string | number | null>('fr')
|
||||
const leftIconValue = ref<string | number | null>(null)
|
||||
const createValue = ref<string | number | null>(null)
|
||||
const disabledValue = ref<string | number | null>('fr')
|
||||
const readonlyValue = ref<string | number | null>('be')
|
||||
const hintValue = ref<string | number | null>(null)
|
||||
const errorValue = ref<string | number | null>('fr')
|
||||
const successValue = ref<string | number | null>('fr')
|
||||
|
||||
const apiValue = ref<string | number | null>(null)
|
||||
const apiOptions = ref<Option[]>([])
|
||||
const apiLoading = ref(false)
|
||||
|
||||
const fakeClients: Option[] = [
|
||||
{label: 'Yuno Malio', value: 1},
|
||||
{label: 'Yuna Corp', value: 2},
|
||||
{label: 'Yum Foods', value: 3},
|
||||
{label: 'Acme Inc.', value: 4},
|
||||
{label: 'Globex Corp', value: 5},
|
||||
]
|
||||
|
||||
const onSearchApi = async (query: string) => {
|
||||
apiLoading.value = true
|
||||
await new Promise(resolve => setTimeout(resolve, 400))
|
||||
apiOptions.value = fakeClients.filter(c =>
|
||||
c.label.toLowerCase().includes(query.toLowerCase()),
|
||||
)
|
||||
apiLoading.value = false
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user