tristan
cda0f994ca
Ajoute une prop booléenne reserveMessageSpace (défaut true) aux 10 composants de la famille input. Par défaut, comportement inchangé (ligne message toujours rendue avec min-h-[1rem]). À false, la ligne ne prend aucun espace en l'absence de message, et s'affiche sans min-h quand un message est présent. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
567 lines
20 KiB
TypeScript
567 lines
20 KiB
TypeScript
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
|
||
localFilter?: boolean
|
||
iconName?: string
|
||
iconPosition?: 'left' | 'right'
|
||
iconSize?: string | number
|
||
iconColor?: string
|
||
noResultsText?: string
|
||
loadingText?: string
|
||
minSearchText?: string
|
||
reserveMessageSpace?: boolean
|
||
}
|
||
|
||
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('affiche l\'astérisque quand required est vrai', () => {
|
||
const wrapper = mountComponent({label: 'Champ', required: true})
|
||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
|
||
})
|
||
|
||
it('n\'affiche pas l\'astérisque par défaut', () => {
|
||
const wrapper = mountComponent({label: 'Champ'})
|
||
expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
|
||
})
|
||
|
||
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')
|
||
})
|
||
|
||
it('does not filter options when localFilter is false (default)', async () => {
|
||
const wrapper = mountComponent({options})
|
||
|
||
await wrapper.get('input').trigger('focus')
|
||
await wrapper.get('input').setValue('fr')
|
||
|
||
expect(wrapper.findAll('[data-test="option"]')).toHaveLength(3)
|
||
})
|
||
|
||
it('filters options client-side when localFilter is true', async () => {
|
||
const wrapper = mountComponent({options, localFilter: true})
|
||
|
||
await wrapper.get('input').trigger('focus')
|
||
await wrapper.get('input').setValue('fr')
|
||
|
||
const items = wrapper.findAll('[data-test="option"]')
|
||
expect(items).toHaveLength(1)
|
||
expect(items[0].text()).toBe('France')
|
||
})
|
||
|
||
it('localFilter is case-insensitive and matches substrings', async () => {
|
||
const wrapper = mountComponent({options, localFilter: true})
|
||
|
||
await wrapper.get('input').trigger('focus')
|
||
await wrapper.get('input').setValue('GIQ')
|
||
|
||
const items = wrapper.findAll('[data-test="option"]')
|
||
expect(items).toHaveLength(1)
|
||
expect(items[0].text()).toBe('Belgique')
|
||
})
|
||
|
||
it('localFilter shows all options when input is empty', async () => {
|
||
const wrapper = mountComponent({options, localFilter: true})
|
||
|
||
await wrapper.get('input').trigger('focus')
|
||
|
||
expect(wrapper.findAll('[data-test="option"]')).toHaveLength(3)
|
||
})
|
||
|
||
it('localFilter shows the no-results state when nothing matches', async () => {
|
||
const wrapper = mountComponent({options, localFilter: true})
|
||
|
||
await wrapper.get('input').trigger('focus')
|
||
await wrapper.get('input').setValue('zzzzz')
|
||
|
||
expect(wrapper.findAll('[data-test="option"]')).toHaveLength(0)
|
||
expect(wrapper.find('[data-test="no-results-text"]').exists()).toBe(true)
|
||
})
|
||
|
||
it('keeps the floating label at the same position whether focused or not (no jump)', async () => {
|
||
const wrapper = mountComponent({options, label: 'Pays', modelValue: 'fr'})
|
||
|
||
// when a value is selected and the field is not focused, the label is already floated
|
||
const labelClasses = wrapper.get('label').classes()
|
||
expect(labelClasses).toContain('-translate-y-[1.25rem]')
|
||
// and there is no extra peer-focus translate that would make it jump on click
|
||
expect(labelClasses).not.toContain('peer-focus:-translate-y-[1.55rem]')
|
||
})
|
||
|
||
it('does not shift inner text horizontally on focus (no focus:pl change)', () => {
|
||
const wrapper = mountComponent({options})
|
||
|
||
const inputClasses = wrapper.get('input').classes()
|
||
expect(inputClasses).not.toContain('focus:pl-[11px]')
|
||
})
|
||
|
||
it('keeps the bottom border allocation when open (transparent, not zero)', async () => {
|
||
const wrapper = mountComponent({options})
|
||
|
||
await wrapper.get('input').trigger('focus')
|
||
|
||
const inputClasses = wrapper.get('input').classes()
|
||
// border-b-0 would shrink the bottom border to 0px and grow content area by 1px;
|
||
// border-b-transparent keeps the 1px allocation but hides the line
|
||
expect(inputClasses).not.toContain('!border-b-0')
|
||
expect(inputClasses).toContain('!border-b-transparent')
|
||
})
|
||
|
||
it('readonly : bordure noire même vide, pas de grow/bleu', () => {
|
||
const wrapper = mountComponent({label: 'Champ', readonly: true})
|
||
const field = wrapper.get('input')
|
||
expect(field.classes()).toContain('border-black')
|
||
expect(field.classes()).not.toContain('border-m-muted')
|
||
expect(field.classes()).not.toContain('focus:border-m-primary')
|
||
expect(field.classes()).not.toContain('grow-height')
|
||
})
|
||
|
||
it('readonly vide : label gris, pas de bleu', () => {
|
||
const wrapper = mountComponent({label: 'Champ', readonly: true})
|
||
expect(wrapper.get('label').classes()).not.toContain('peer-focus:text-m-primary')
|
||
expect(wrapper.get('label').classes()).toContain('text-m-muted')
|
||
})
|
||
|
||
it('readonly vide : chevron en text-m-muted', () => {
|
||
const wrapper = mountComponent({label: 'Champ', readonly: true})
|
||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
|
||
})
|
||
|
||
it('readonly rempli : label noir et icône noire', () => {
|
||
const wrapper = mountComponent({label: 'Champ', readonly: true, modelValue: 'fr', options, iconName: 'mdi:magnify', iconPosition: 'left'})
|
||
expect(wrapper.get('label').classes()).toContain('text-black')
|
||
expect(wrapper.get('[data-test="icon-left"]').classes()).toContain('text-black')
|
||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-black')
|
||
})
|
||
|
||
it('réserve l’espace message par défaut même sans message', () => {
|
||
const wrapper = mountComponent({label: 'Champ', options})
|
||
const msg = wrapper.find('[id$="-describedby"]')
|
||
expect(msg.exists()).toBe(true)
|
||
expect(msg.classes()).toContain('min-h-[1rem]')
|
||
})
|
||
|
||
it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
|
||
const wrapper = mountComponent({label: 'Champ', options, reserveMessageSpace: false})
|
||
expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
|
||
})
|
||
|
||
it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
|
||
const wrapper = mountComponent({label: 'Champ', options, reserveMessageSpace: false, error: 'Erreur'})
|
||
const msg = wrapper.find('[id$="-describedby"]')
|
||
expect(msg.exists()).toBe(true)
|
||
expect(msg.classes()).not.toContain('min-h-[1rem]')
|
||
})
|
||
})
|