feat: composant saisie assistée, composant téléphone et composant mail (#47)
All checks were successful
Release / release (push) Successful in 1m12s
All checks were successful
Release / release (push) Successful in 1m12s
| 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é Co-authored-by: matthieu <matthieu@yuno.malio.fr> Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Reviewed-on: #47 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #47.
This commit is contained in:
@@ -114,7 +114,7 @@ describe('MalioCheckbox', () => {
|
||||
})
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('p').text()).toBe('You must accept')
|
||||
})
|
||||
|
||||
@@ -125,7 +125,7 @@ describe('MalioCheckbox', () => {
|
||||
})
|
||||
|
||||
expect(wrapper.get('p').text()).toBe('Invalid')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success styles and message when there is no error', () => {
|
||||
@@ -139,4 +139,26 @@ describe('MalioCheckbox', () => {
|
||||
expect(wrapper.get('p').text()).toBe('Valid')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('uses muted label color when unchecked', () => {
|
||||
const wrapper = mountCheckbox({label: 'Accept terms', modelValue: false})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('uses black label color when checked', () => {
|
||||
const wrapper = mountCheckbox({label: 'Accept terms', modelValue: true})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('updates label color when toggled without v-model (uncontrolled)', async () => {
|
||||
const wrapper = mountCheckbox({label: 'Accept terms'})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-muted')
|
||||
|
||||
await wrapper.get('input').setValue(true)
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, useAttrs, useId} from 'vue'
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
|
||||
@@ -80,9 +80,11 @@ const props = withDefaults(
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localChecked = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
|
||||
const isChecked = computed(() => !!props.modelValue)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const isChecked = computed(() => (isControlled.value ? !!props.modelValue : localChecked.value))
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const disabled = computed(() => props.disabled)
|
||||
@@ -108,9 +110,10 @@ const mergedInputClass = computed(() =>
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'cbx text-black text-lg',
|
||||
'cbx text-lg',
|
||||
isChecked.value ? 'text-black' : 'text-m-muted',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60' : '',
|
||||
hasError.value ? 'text-m-error' : '',
|
||||
hasError.value ? 'text-m-danger' : '',
|
||||
hasSuccess.value ? 'text-m-success' : '',
|
||||
props.labelClass,
|
||||
),
|
||||
@@ -120,7 +123,7 @@ const mergedMessageClass = computed(() =>
|
||||
twMerge(
|
||||
'text-xs',
|
||||
hasError.value
|
||||
? 'text-m-error'
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
@@ -139,6 +142,10 @@ const onChange = (event: Event) => {
|
||||
return
|
||||
}
|
||||
|
||||
if (!isControlled.value) {
|
||||
localChecked.value = target.checked
|
||||
}
|
||||
|
||||
emit('update:modelValue', target.checked)
|
||||
}
|
||||
</script>
|
||||
@@ -161,10 +168,14 @@ const onChange = (event: Event) => {
|
||||
height: 18px;
|
||||
flex: 0 0 18px;
|
||||
transform: scale(1);
|
||||
border: 2px solid rgb(0, 0, 0);
|
||||
border: 2px solid rgb(var(--m-muted) / 1);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.inp-cbx:checked + .cbx span:first-child {
|
||||
border-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.cbx span:first-child svg {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
@@ -200,14 +211,14 @@ const onChange = (event: Event) => {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
.inp-cbx + .cbx.text-m-error span:first-child {
|
||||
border-color: rgb(var(--m-error) / 1);
|
||||
.inp-cbx + .cbx.text-m-danger span:first-child {
|
||||
border-color: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
.cbx.text-m-error span:first-child svg {
|
||||
stroke: rgb(var(--m-error) / 1);
|
||||
.cbx.text-m-danger span:first-child svg {
|
||||
stroke: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
.inp-cbx:checked + .cbx.text-m-error span:first-child {
|
||||
border-color: rgb(var(--m-error) / 1);
|
||||
.inp-cbx:checked + .cbx.text-m-danger span:first-child {
|
||||
border-color: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
|
||||
.inp-cbx + .cbx.text-m-success span:first-child {
|
||||
|
||||
@@ -279,7 +279,7 @@ describe('MalioInputText', () => {
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
|
||||
expect(wrapper.get('input').classes()).toContain('!pl-11')
|
||||
expect(wrapper.get('label').classes()).toContain('left-8')
|
||||
expect(wrapper.get('label').classes()).toContain('left-11')
|
||||
})
|
||||
|
||||
it('passes icon size props to icon component', () => {
|
||||
@@ -294,4 +294,18 @@ describe('MalioInputText', () => {
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline', modelValue: 'hello'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -158,6 +158,20 @@ describe('MalioInputAmount', () => {
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
|
||||
expect(wrapper.get('input').classes()).toContain('!pl-11')
|
||||
expect(wrapper.get('label').classes()).toContain('left-8')
|
||||
expect(wrapper.get('label').classes()).toContain('left-11')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountInputAmount()
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountInputAmount({modelValue: '12,50'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -39,13 +39,7 @@
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : iconColor,
|
||||
iconPositionClass,
|
||||
]"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
@@ -141,7 +135,7 @@ const mergedGroupClass = computed(() =>
|
||||
)
|
||||
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 focus:border-2 text-lg rounded-md',
|
||||
'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',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
@@ -222,7 +216,7 @@ const iconInputPaddingClass = computed(() => {
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-8'
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
@@ -235,6 +229,15 @@ const iconPositionClass = computed(() => {
|
||||
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
|
||||
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
||||
})
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
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>
|
||||
228
app/components/malio/input/InputEmail.test.ts
Normal file
228
app/components/malio/input/InputEmail.test.ts
Normal file
@@ -0,0 +1,228 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import InputEmail from './InputEmail.vue'
|
||||
|
||||
type InputEmailProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}
|
||||
|
||||
const InputEmailForTest = InputEmail as DefineComponent<InputEmailProps>
|
||||
|
||||
const mountComponent = (props: InputEmailProps = {}) =>
|
||||
mount(InputEmailForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputEmail', () => {
|
||||
it('renders the initial input value', () => {
|
||||
const wrapper = mountComponent({modelValue: 'user@example.com'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('user@example.com')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Adresse email'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Adresse email')
|
||||
})
|
||||
|
||||
it('has type email', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('email')
|
||||
})
|
||||
|
||||
it('has inputmode email', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('inputmode')).toBe('email')
|
||||
})
|
||||
|
||||
it('renders the default email icon', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:email-outline')
|
||||
})
|
||||
|
||||
it('allows overriding the icon', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:at'})
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:at')
|
||||
})
|
||||
|
||||
it('does not render icon when iconName is empty', () => {
|
||||
const wrapper = mountComponent({iconName: ''})
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('places icon on the right by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
|
||||
})
|
||||
|
||||
it('places icon on the left when iconPosition is left', () => {
|
||||
const wrapper = mountComponent({iconPosition: 'left'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('new@example.com')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new@example.com'])
|
||||
})
|
||||
|
||||
it('sets disabled styles when true', () => {
|
||||
const wrapper = mountComponent({disabled: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('sets readonly when true', () => {
|
||||
const wrapper = mountComponent({readonly: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('shows error message and styles', () => {
|
||||
const wrapper = mountComponent({error: 'Email invalide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Email invalide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows error style on icon', () => {
|
||||
const wrapper = mountComponent({error: 'Error'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Email valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Email valide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows success style on icon', () => {
|
||||
const wrapper = mountComponent({success: 'Success'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows default icon color when empty and unfocused', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountComponent({modelValue: 'user@example.com'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('keeps primary icon color when filled and focused', async () => {
|
||||
const wrapper = mountComponent({modelValue: 'user@example.com'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('keeps default icon color when disabled, even if filled', () => {
|
||||
const wrapper = mountComponent({modelValue: 'user@example.com', disabled: true})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('error overrides focus color on icon', async () => {
|
||||
const wrapper = mountComponent({error: 'Email invalide'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mountComponent({hint: 'ex: prenom.nom@malio.fr'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('ex: prenom.nom@malio.fr')
|
||||
})
|
||||
|
||||
it('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'email-field', label: 'Email'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('email-field')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('email-field')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Email'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-email-')).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('uses autocomplete off by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('off')
|
||||
})
|
||||
|
||||
it('allows overriding autocomplete', () => {
|
||||
const wrapper = mountComponent({autocomplete: 'email'})
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('email')
|
||||
})
|
||||
})
|
||||
229
app/components/malio/input/InputEmail.vue
Normal file
229
app/components/malio/input/InputEmail.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="email"
|
||||
inputmode="email"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputEmail', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
iconName: 'mdi:email-outline',
|
||||
iconPosition: 'right',
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-email-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
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',
|
||||
disabled.value ? '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',
|
||||
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' : '',
|
||||
disabled.value ? '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 describedBy = computed(() => {
|
||||
const ids: string[] = []
|
||||
if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
|
||||
if (hasError.value) ids.push(`${inputId.value}-error`)
|
||||
if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
|
||||
return ids.length ? ids.join(' ') : undefined
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
if (!props.iconName) return ''
|
||||
return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3 !pr-10'
|
||||
})
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
const focusPaddingClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
||||
return 'focus:pl-[11px]'
|
||||
})
|
||||
|
||||
const iconPositionClass = computed(() => {
|
||||
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
|
||||
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
||||
})
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
</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; }
|
||||
}
|
||||
</style>
|
||||
@@ -171,4 +171,18 @@ describe('MalioInputPassword', () => {
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountComponent({modelValue: 'secret'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -39,10 +39,7 @@
|
||||
:height="24"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : 'text-m-muted',
|
||||
iconStateClass,
|
||||
'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
|
||||
]"
|
||||
@click="toggleVisibility"
|
||||
@@ -140,7 +137,7 @@ const mergedGroupClass = computed(() =>
|
||||
)
|
||||
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 focus:border-2 text-lg rounded-md',
|
||||
'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',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
@@ -189,6 +186,15 @@ const onInput = (event: Event) => {
|
||||
}
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return 'text-m-muted'
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return 'text-m-muted'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
308
app/components/malio/input/InputPhone.test.ts
Normal file
308
app/components/malio/input/InputPhone.test.ts
Normal file
@@ -0,0 +1,308 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import InputPhone from './InputPhone.vue'
|
||||
|
||||
type InputPhoneProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
mask?: string
|
||||
addable?: boolean
|
||||
addIconName?: string
|
||||
addButtonLabel?: string
|
||||
}
|
||||
|
||||
const InputPhoneForTest = InputPhone as DefineComponent<InputPhoneProps>
|
||||
|
||||
const mountComponent = (props: InputPhoneProps = {}) =>
|
||||
mount(InputPhoneForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputPhone', () => {
|
||||
it('renders the initial input value', () => {
|
||||
const wrapper = mountComponent({modelValue: '+33 6 12 34 56 78'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('+33 6 12 34 56 78')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Téléphone'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Téléphone')
|
||||
})
|
||||
|
||||
it('has type tel', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('tel')
|
||||
})
|
||||
|
||||
it('has inputmode tel', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('inputmode')).toBe('tel')
|
||||
})
|
||||
|
||||
it('renders the default phone icon', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:phone-outline')
|
||||
})
|
||||
|
||||
it('allows overriding the icon', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:cellphone'})
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:cellphone')
|
||||
})
|
||||
|
||||
it('does not render icon when iconName is empty', () => {
|
||||
const wrapper = mountComponent({iconName: ''})
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('places icon on the left by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
|
||||
})
|
||||
|
||||
it('places icon on the right when iconPosition is right', () => {
|
||||
const wrapper = mountComponent({iconPosition: 'right'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('+33612345678')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['+33612345678'])
|
||||
})
|
||||
|
||||
it('sets disabled styles when true', () => {
|
||||
const wrapper = mountComponent({disabled: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('sets readonly when true', () => {
|
||||
const wrapper = mountComponent({readonly: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('shows error message and styles', () => {
|
||||
const wrapper = mountComponent({error: 'Numéro invalide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Numéro invalide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows error style on icon', () => {
|
||||
const wrapper = mountComponent({error: 'Error'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Numéro valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Numéro valide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows success style on icon', () => {
|
||||
const wrapper = mountComponent({success: 'Success'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows default icon color when empty and unfocused', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountComponent({modelValue: '+33612345678'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('keeps default icon color when disabled, even if filled', () => {
|
||||
const wrapper = mountComponent({modelValue: '+33612345678', disabled: true})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('error overrides focus color on icon', async () => {
|
||||
const wrapper = mountComponent({error: 'Numéro invalide'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mountComponent({hint: 'Format international recommandé'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Format international recommandé')
|
||||
})
|
||||
|
||||
it('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'phone-field', label: 'Téléphone'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('phone-field')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('phone-field')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Téléphone'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-phone-')).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('uses autocomplete off by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('off')
|
||||
})
|
||||
|
||||
it('allows overriding autocomplete', () => {
|
||||
const wrapper = mountComponent({autocomplete: 'tel'})
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('tel')
|
||||
})
|
||||
|
||||
it('does not render add button by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('[data-test="add-button"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders add button when addable is true', () => {
|
||||
const wrapper = mountComponent({addable: true})
|
||||
|
||||
expect(wrapper.find('[data-test="add-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('emits add event when add button is clicked', async () => {
|
||||
const wrapper = mountComponent({addable: true})
|
||||
|
||||
await wrapper.get('[data-test="add-button"]').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('add')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not emit add when disabled', async () => {
|
||||
const wrapper = mountComponent({addable: true, disabled: true})
|
||||
|
||||
await wrapper.get('[data-test="add-button"]').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('add')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('does not emit add when readonly', async () => {
|
||||
const wrapper = mountComponent({addable: true, readonly: true})
|
||||
|
||||
await wrapper.get('[data-test="add-button"]').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('add')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('disables add button when disabled', () => {
|
||||
const wrapper = mountComponent({addable: true, disabled: true})
|
||||
|
||||
expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('disables add button when readonly', () => {
|
||||
const wrapper = mountComponent({addable: true, readonly: true})
|
||||
|
||||
expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('renders the default add icon (mdi:plus)', () => {
|
||||
const wrapper = mountComponent({addable: true})
|
||||
|
||||
const icons = wrapper.findAllComponents(IconifyIcon)
|
||||
const addIcon = icons[icons.length - 1]
|
||||
expect(addIcon.props('icon')).toBe('mdi:plus')
|
||||
})
|
||||
|
||||
it('allows overriding the add icon', () => {
|
||||
const wrapper = mountComponent({addable: true, addIconName: 'mdi:phone-plus'})
|
||||
|
||||
const icons = wrapper.findAllComponents(IconifyIcon)
|
||||
const addIcon = icons[icons.length - 1]
|
||||
expect(addIcon.props('icon')).toBe('mdi:phone-plus')
|
||||
})
|
||||
|
||||
it('exposes aria-label on add button', () => {
|
||||
const wrapper = mountComponent({addable: true, addButtonLabel: 'Ajouter un autre numéro'})
|
||||
|
||||
expect(wrapper.get('[data-test="add-button"]').attributes('aria-label')).toBe('Ajouter un autre numéro')
|
||||
})
|
||||
|
||||
it('adds right padding to input when addable', () => {
|
||||
const wrapper = mountComponent({addable: true})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('!pr-10')
|
||||
})
|
||||
|
||||
it('applies mask via maska directive', async () => {
|
||||
const wrapper = mountComponent({mask: '+## # ## ## ## ##'})
|
||||
|
||||
await wrapper.get('input').setValue('33612345678')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeDefined()
|
||||
})
|
||||
})
|
||||
274
app/components/malio/input/InputPhone.vue
Normal file
274
app/components/malio/input/InputPhone.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
v-maska="mask"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="tel"
|
||||
inputmode="tel"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
<button
|
||||
v-if="addable"
|
||||
type="button"
|
||||
:disabled="disabled || readonly"
|
||||
:aria-label="addButtonLabel"
|
||||
data-test="add-button"
|
||||
:class="mergedAddButtonClass"
|
||||
@click="onAdd"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="addIconName"
|
||||
:width="24"
|
||||
:height="24"
|
||||
data-test="add-icon"
|
||||
/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import type {MaskInputOptions} from 'maska'
|
||||
import {vMaska} from 'maska/vue'
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputPhone', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
mask?: string | MaskInputOptions
|
||||
addable?: boolean
|
||||
addIconName?: string
|
||||
addButtonLabel?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
iconName: 'mdi:phone-outline',
|
||||
iconPosition: 'left',
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
mask: undefined,
|
||||
addable: false,
|
||||
addIconName: 'mdi:plus',
|
||||
addButtonLabel: 'Ajouter un numéro',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-phone-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
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',
|
||||
disabled.value ? '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',
|
||||
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' : '',
|
||||
disabled.value ? '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 mergedAddButtonClass = computed(() =>
|
||||
twMerge(
|
||||
'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer text-m-primary transition-opacity hover:opacity-70',
|
||||
(props.disabled || props.readonly) ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
|
||||
),
|
||||
)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
const ids: string[] = []
|
||||
if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
|
||||
if (hasError.value) ids.push(`${inputId.value}-error`)
|
||||
if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
|
||||
return ids.length ? ids.join(' ') : undefined
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
(event: 'add'): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
|
||||
const onAdd = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
emit('add')
|
||||
}
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
const leftIcon = props.iconName && props.iconPosition === 'left'
|
||||
const rightIcon = props.iconName && props.iconPosition === 'right'
|
||||
const parts: string[] = []
|
||||
if (leftIcon) parts.push('!pl-11')
|
||||
if (rightIcon || props.addable) parts.push('!pr-10')
|
||||
return parts.join(' ')
|
||||
})
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
const focusPaddingClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
||||
return 'focus:pl-[11px]'
|
||||
})
|
||||
|
||||
const iconPositionClass = computed(() => {
|
||||
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
|
||||
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
||||
})
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
</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; }
|
||||
}
|
||||
</style>
|
||||
@@ -39,13 +39,7 @@
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : iconColor,
|
||||
iconPositionClass,
|
||||
]"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
@@ -146,7 +140,7 @@ const mergedGroupClass = computed(() =>
|
||||
)
|
||||
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 focus:border-2 text-lg rounded-md',
|
||||
'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',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
@@ -202,7 +196,7 @@ const iconInputPaddingClass = computed(() => {
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-8'
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
@@ -215,6 +209,15 @@ const iconPositionClass = computed(() => {
|
||||
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
|
||||
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
||||
})
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative w-full"
|
||||
>
|
||||
<div :class="mergedGroupClass">
|
||||
<textarea
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
|
||||
:autocomplete="autocomplete"
|
||||
class="floating-input peer w-full border-2 bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
|
||||
class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
|
||||
:class="[
|
||||
isFilled ? 'border-black' : 'border-m-muted',
|
||||
disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
|
||||
@@ -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('')
|
||||
|
||||
@@ -172,4 +172,18 @@ describe('MalioInputUpload', () => {
|
||||
|
||||
expect(wrapper.get('input[type="file"]').attributes('accept')).toBe('.pdf,.doc')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('input[type="text"]').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountComponent({modelValue: 'document.pdf'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -43,10 +43,7 @@
|
||||
:height="24"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : 'text-m-muted',
|
||||
iconStateClass,
|
||||
'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
|
||||
]"
|
||||
/>
|
||||
@@ -129,7 +126,7 @@ const mergedGroupClass = computed(() =>
|
||||
)
|
||||
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 focus:border-2 text-lg rounded-md',
|
||||
'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',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-pointer',
|
||||
hasError.value
|
||||
@@ -189,6 +186,15 @@ const onFileChange = (event: Event) => {
|
||||
}
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return 'text-m-muted'
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return 'text-m-muted'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -153,4 +153,33 @@ describe('MalioRadioButton', () => {
|
||||
expect(wrapper.get('input').classes()).toContain('border-red-500')
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('font-bold')
|
||||
})
|
||||
|
||||
it('uses muted label color and muted border when unchecked', () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'b'})
|
||||
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-m-muted')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-muted')
|
||||
})
|
||||
|
||||
it('uses black label color when checked', () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
|
||||
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('has checked:border-black on input', () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('checked:border-black')
|
||||
})
|
||||
|
||||
it('updates label color when toggled without v-model (uncontrolled)', async () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1', value: 'a'})
|
||||
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-m-muted')
|
||||
|
||||
await wrapper.get('input').trigger('change')
|
||||
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, useAttrs, useId} from 'vue'
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioRadioButton', inheritAttrs: false})
|
||||
@@ -86,9 +86,13 @@ const props = withDefaults(
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref<string | number | boolean | null | undefined>(undefined)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-radio-${generatedId}`)
|
||||
const isChecked = computed(() => props.modelValue === props.value)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const isChecked = computed(() =>
|
||||
isControlled.value ? props.modelValue === props.value : localValue.value === props.value,
|
||||
)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const disabled = computed(() => props.disabled)
|
||||
@@ -117,14 +121,15 @@ const mergedControlClass = computed(() =>
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-black',
|
||||
'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-m-muted checked:border-black',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'radio-text mt-px cursor-pointer text-black',
|
||||
'radio-text mt-px cursor-pointer',
|
||||
isChecked.value ? 'text-black' : 'text-m-muted',
|
||||
hasError.value ? 'text-m-danger' : '',
|
||||
hasSuccess.value ? 'text-m-success' : '',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60' : '',
|
||||
@@ -160,6 +165,10 @@ const onChange = (event: Event) => {
|
||||
return
|
||||
}
|
||||
|
||||
if (!isControlled.value) {
|
||||
localValue.value = props.value
|
||||
}
|
||||
|
||||
emit('update:modelValue', props.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -6,25 +6,26 @@
|
||||
>
|
||||
<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-2 focus-visible:border-m-primary"
|
||||
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="[
|
||||
hasError
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-danger !border-t-0'
|
||||
? 'rounded-b-none !border !border-m-danger !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-danger !border-t-0'
|
||||
: 'border-m-danger'
|
||||
: hasSuccess
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border-2 !border-m-success !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-success !border-t-0'
|
||||
? 'rounded-b-none !border !border-m-success !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-success !border-t-0'
|
||||
: 'border-m-success'
|
||||
: isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-primary !border-t-0'
|
||||
? 'rounded-b-none !border !border-m-primary !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-primary !border-t-0'
|
||||
: isOptionSelected
|
||||
? 'border-black'
|
||||
: 'border-m-muted',
|
||||
@@ -98,7 +99,7 @@
|
||||
ref="listRef"
|
||||
role="listbox"
|
||||
:aria-labelledby="buttonId"
|
||||
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
|
||||
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border bg-white"
|
||||
:class="[
|
||||
openDirection === 'down'
|
||||
? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
|
||||
@@ -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,25 +6,26 @@
|
||||
>
|
||||
<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-2 focus-visible:border-m-primary"
|
||||
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="[
|
||||
hasError
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-danger !border-t-0'
|
||||
? 'rounded-b-none !border !border-m-danger !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-danger !border-t-0'
|
||||
: 'border-m-danger'
|
||||
: hasSuccess
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border-2 !border-m-success !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-success !border-t-0'
|
||||
? 'rounded-b-none !border !border-m-success !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-success !border-t-0'
|
||||
: 'border-m-success'
|
||||
: isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-primary !border-t-0'
|
||||
? 'rounded-b-none !border !border-m-primary !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-primary !border-t-0'
|
||||
: isOptionSelected
|
||||
? 'border-black'
|
||||
: 'border-m-muted',
|
||||
@@ -126,7 +127,7 @@
|
||||
ref="listRef"
|
||||
role="listbox"
|
||||
:aria-labelledby="buttonId"
|
||||
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
|
||||
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border bg-white"
|
||||
:class="[
|
||||
openDirection === 'down'
|
||||
? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -197,11 +197,11 @@ const mergedInputClass = (field: 'hours' | 'minutes') =>
|
||||
'h-[30px] w-10 border bg-white text-center text-[18px] outline-none rounded-md placeholder:text-m-muted',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'focus:border-2 border-m-danger focus:border-m-danger'
|
||||
? 'border-m-danger focus:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'focus:border-2 border-m-success focus:border-m-success'
|
||||
? 'border-m-success focus:border-m-success'
|
||||
: activeField.value === field
|
||||
? 'border-2 border-m-primary text-m-primary'
|
||||
? 'border-m-primary text-m-primary'
|
||||
: 'border-black text-black',
|
||||
props.inputClass,
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user