feat : reorganisation de la structure projet
This commit is contained in:
297
app/components/malio/input/Input.test.ts
Normal file
297
app/components/malio/input/Input.test.ts
Normal file
@@ -0,0 +1,297 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import Input from './InputText.vue'
|
||||
|
||||
type InputProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}
|
||||
|
||||
const InputForTest = Input as DefineComponent<InputProps>
|
||||
|
||||
const mountInput = (props: InputProps = {}) =>
|
||||
mount(InputForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputText', () => {
|
||||
it('renders the initial input value', () => {
|
||||
const wrapper = mountInput({modelValue: 'initialValueTest'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('initialValueTest')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountInput({label: 'labelTest'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('labelTest')
|
||||
})
|
||||
|
||||
it('applies the name attribute', () => {
|
||||
const wrapper = mountInput({name: 'nameTest'})
|
||||
|
||||
expect(wrapper.get('input').attributes('name')).toBe('nameTest')
|
||||
})
|
||||
|
||||
it('uses provided id on input and label', () => {
|
||||
const wrapper = mountInput({id: 'custom-id', label: 'Label'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('custom-id')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('custom-id')
|
||||
})
|
||||
|
||||
it('keeps the default rounded class on input', () => {
|
||||
const wrapper = mountInput()
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('rounded-md')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountInput({label: 'Label'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-text-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('applies the autocomplete attribute', () => {
|
||||
const wrapper = mountInput({autocomplete: 'autocompleteTest'})
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('autocompleteTest')
|
||||
})
|
||||
|
||||
it('does not set required when false', () => {
|
||||
const wrapper = mountInput({required: false})
|
||||
|
||||
expect(wrapper.get('input').attributes('required')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets required when true', () => {
|
||||
const wrapper = mountInput({required: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('required')).toBeDefined()
|
||||
})
|
||||
|
||||
it('does not set readonly when false', () => {
|
||||
const wrapper = mountInput({readonly: false})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets readonly when true', () => {
|
||||
const wrapper = mountInput({readonly: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('does not set disabled and keeps text cursor when false', () => {
|
||||
const wrapper = mountInput({disabled: false})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeUndefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-text')
|
||||
})
|
||||
|
||||
it('sets disabled styles when true', () => {
|
||||
const wrapper = mountInput({disabled: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
expect(wrapper.get('input').classes()).toContain('text-black/60')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mountInput({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('new value')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
|
||||
})
|
||||
|
||||
it('applies maxLength to input', () => {
|
||||
const wrapper = mountInput({maxLength: 25})
|
||||
|
||||
expect(wrapper.get('input').attributes('maxlength')).toBe('25')
|
||||
})
|
||||
|
||||
it('applies minLength to input', () => {
|
||||
const wrapper = mountInput({minLength: 25})
|
||||
|
||||
expect(wrapper.get('input').attributes('minlength')).toBe('25')
|
||||
})
|
||||
|
||||
it('applies labelClass on label', () => {
|
||||
const wrapper = mountInput({label: 'Label', labelClass: 'text-red-500'})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-red-500')
|
||||
})
|
||||
|
||||
it('applies inputClass on input', () => {
|
||||
const wrapper = mountInput({inputClass: 'text-sm'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('text-sm')
|
||||
})
|
||||
|
||||
it('shows error message without label and icon', () => {
|
||||
const wrapper = mountInput({error: 'Error message test'})
|
||||
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-error')
|
||||
})
|
||||
|
||||
it('shows error message with label and without icon', () => {
|
||||
const wrapper = mountInput({error: 'Error message test', label: 'Error message'})
|
||||
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-error')
|
||||
})
|
||||
|
||||
it('shows error message with label and icon', () => {
|
||||
const wrapper = mountInput({
|
||||
error: 'Error message test',
|
||||
label: 'Error message',
|
||||
iconName: 'mdi:key-outline',
|
||||
})
|
||||
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-error')
|
||||
})
|
||||
|
||||
it('shows error message with icon and without label', () => {
|
||||
const wrapper = mountInput({error: 'Error message test', iconName: 'mdi:key-outline'})
|
||||
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
|
||||
})
|
||||
|
||||
it('shows success message without label and icon', () => {
|
||||
const wrapper = mountInput({success: 'Success message test'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows success message with label and without icon', () => {
|
||||
const wrapper = mountInput({success: 'Success message test', label: 'Success message'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows success message with label and icon', () => {
|
||||
const wrapper = mountInput({
|
||||
success: 'Success message test',
|
||||
label: 'Success message',
|
||||
iconName: 'mdi:key-outline',
|
||||
})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows success message with icon and without label', () => {
|
||||
const wrapper = mountInput({success: 'Success message test', iconName: 'mdi:key-outline'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('prioritizes error over success when both are provided', () => {
|
||||
const wrapper = mountInput({
|
||||
error: 'Error message test',
|
||||
success: 'Success message test',
|
||||
})
|
||||
|
||||
expect(wrapper.find('p.text-m-error').exists()).toBe(true)
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.find('p.text-m-success').exists()).toBe(false)
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('input').classes()).not.toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mountInput({hint: 'Hint message test'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Hint message test')
|
||||
})
|
||||
|
||||
it('does not render label when label prop is missing', () => {
|
||||
const wrapper = mountInput({labelClass: 'text-red-500'})
|
||||
|
||||
expect(wrapper.find('label').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders icon with default positioning and muted color', () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('pointer-events-none')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('absolute')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('top-1/2')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('-translate-y-1/2')
|
||||
})
|
||||
|
||||
it('renders icon on the left when requested', () => {
|
||||
const wrapper = mountInput({
|
||||
iconName: 'mdi:key-outline',
|
||||
iconPosition: 'left',
|
||||
label: 'Password',
|
||||
})
|
||||
|
||||
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')
|
||||
})
|
||||
|
||||
it('passes icon size props to icon component', () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline', iconSize: '24'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').attributes('width')).toBe('24')
|
||||
expect(wrapper.get('[data-test="icon"]').attributes('height')).toBe('24')
|
||||
})
|
||||
|
||||
it('applies icon color class', () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline', iconColor: 'text-m-primary'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
})
|
||||
163
app/components/malio/input/InputAmount.test.ts
Normal file
163
app/components/malio/input/InputAmount.test.ts
Normal file
@@ -0,0 +1,163 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import InputAmount from './InputAmount.vue'
|
||||
|
||||
type InputAmountProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}
|
||||
|
||||
const InputAmountForTest = InputAmount as DefineComponent<InputAmountProps>
|
||||
|
||||
const mountInputAmount = (props: InputAmountProps = {}) =>
|
||||
mount(InputAmountForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputAmount', () => {
|
||||
it('renders as a text input with decimal input mode', () => {
|
||||
const wrapper = mountInputAmount()
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('text')
|
||||
expect(wrapper.get('input').attributes('inputmode')).toBe('decimal')
|
||||
})
|
||||
|
||||
it('renders the default icon with muted styling', () => {
|
||||
const wrapper = mountInputAmount()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').exists()).toBe(true)
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
|
||||
})
|
||||
|
||||
it('generates an amount-specific id', () => {
|
||||
const wrapper = mountInputAmount({label: 'Montant'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-amount-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('applies the provided input classes', () => {
|
||||
const wrapper = mountInputAmount({inputClass: 'text-right'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('text-right')
|
||||
})
|
||||
|
||||
it('links hint text through aria-describedby', () => {
|
||||
const wrapper = mountInputAmount({hint: 'Saisissez un montant'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
|
||||
expect(wrapper.get('p').attributes('id')).toBe(`${inputId}-describedby`)
|
||||
})
|
||||
|
||||
it('sets aria-invalid and describedby when showing an error', () => {
|
||||
const wrapper = mountInputAmount({error: 'Montant invalide'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Montant invalide')
|
||||
})
|
||||
|
||||
it('keeps dots as the decimal separator on input', async () => {
|
||||
const wrapper = mountInputAmount({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('12.5')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
|
||||
expect(wrapper.get('input').element.value).toBe('12.5')
|
||||
})
|
||||
|
||||
it('accepts commas but normalizes them to dots', async () => {
|
||||
const wrapper = mountInputAmount({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('0012,345abc')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.34'])
|
||||
expect(wrapper.get('input').element.value).toBe('12.34')
|
||||
})
|
||||
|
||||
it('normalizes a leading decimal separator', async () => {
|
||||
const wrapper = mountInputAmount({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue(',5')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
|
||||
expect(wrapper.get('input').element.value).toBe('0.5')
|
||||
})
|
||||
|
||||
it('keeps the normalized decimal value on blur', async () => {
|
||||
const wrapper = mountInputAmount()
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12.5')
|
||||
await input.trigger('blur')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toEqual([['12.5']])
|
||||
expect(input.element.value).toBe('12.5')
|
||||
})
|
||||
|
||||
it('keeps integer values unchanged on blur', async () => {
|
||||
const wrapper = mountInputAmount()
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12')
|
||||
await input.trigger('blur')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toEqual([['12']])
|
||||
expect(input.element.value).toBe('12')
|
||||
})
|
||||
|
||||
it('keeps an empty value empty on blur', async () => {
|
||||
const wrapper = mountInputAmount()
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('')
|
||||
await input.trigger('blur')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toEqual([['']])
|
||||
expect(input.element.value).toBe('')
|
||||
})
|
||||
|
||||
it('supports icon positioning on the left', () => {
|
||||
const wrapper = mountInputAmount({
|
||||
label: 'Montant',
|
||||
iconPosition: 'left',
|
||||
})
|
||||
|
||||
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')
|
||||
})
|
||||
})
|
||||
255
app/components/malio/input/InputAmount.vue
Normal file
255
app/components/malio/input/InputAmount.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:minlength="minLength"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
placeholder="_"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="onBlur"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : iconColor,
|
||||
iconPositionClass,
|
||||
]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</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: 'MalioInputAmount', 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
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
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:currency-eur',
|
||||
iconPosition: 'right',
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
maxLength: undefined,
|
||||
minLength: undefined,
|
||||
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-amount-${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 mt-4 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 focus:border-2 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-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
|
||||
: 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-error'
|
||||
: 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(() => {
|
||||
if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
|
||||
return `${inputId.value}-describedby`
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const normalizeAmount = (value: string) => {
|
||||
const sanitizedValue = value
|
||||
.replace(/\s+/g, '')
|
||||
.replace(/,/g, '.')
|
||||
.replace(/[^\d.]/g, '')
|
||||
const [integerPartRaw = '', ...decimalParts] = sanitizedValue.split('.')
|
||||
const integerPart = integerPartRaw.replace(/^0+(?=\d)/, '')
|
||||
const decimalPart = decimalParts.join('').slice(0, 2)
|
||||
|
||||
if (sanitizedValue.includes('.')) {
|
||||
return `${integerPart || '0'}.${decimalPart}`
|
||||
}
|
||||
|
||||
return integerPart
|
||||
}
|
||||
|
||||
// Keep the DOM input value, local state, and v-model emission in sync.
|
||||
const updateValue = (target: HTMLInputElement, value: string) => {
|
||||
target.value = value
|
||||
if (!isControlled.value) {
|
||||
localValue.value = value
|
||||
}
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// Normalize while typing so the field never keeps invalid amount characters.
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
updateValue(target, normalizeAmount(target.value))
|
||||
}
|
||||
|
||||
// Keep the blur handler only for focus-driven UI state.
|
||||
const onBlur = () => {
|
||||
isFocused.value = false
|
||||
}
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
if (!props.iconName) return ''
|
||||
return props.iconPosition === 'left' ? '!pl-11 !pr-3' : ''
|
||||
})
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-8'
|
||||
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`
|
||||
})
|
||||
</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>
|
||||
165
app/components/malio/input/InputNumber.test.ts
Normal file
165
app/components/malio/input/InputNumber.test.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import InputNumber from './InputNumber.vue'
|
||||
|
||||
type InputNumberProps = {
|
||||
modelValue?: string | null
|
||||
label?: string
|
||||
readonly?: boolean
|
||||
min?: number | string
|
||||
max?: number | string
|
||||
}
|
||||
|
||||
const InputNumberForTest = InputNumber as DefineComponent<InputNumberProps>
|
||||
|
||||
const mountInputNumber = (props: InputNumberProps = {}) =>
|
||||
mount(InputNumberForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputNumber', () => {
|
||||
it('renders the input with a fixed 22px height', () => {
|
||||
const wrapper = mountInputNumber()
|
||||
const input = wrapper.get('input')
|
||||
|
||||
expect(input.classes()).toContain('h-[22px]')
|
||||
})
|
||||
|
||||
it('renders the increment and decrement buttons with a fixed 20px height', () => {
|
||||
const wrapper = mountInputNumber()
|
||||
const buttons = wrapper.findAll('button')
|
||||
|
||||
expect(buttons).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('still emits update:modelValue on input', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('99')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['99'])
|
||||
})
|
||||
|
||||
it('filters letters from the input value', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('a1b2c3')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['123'])
|
||||
expect(input.element.value).toBe('123')
|
||||
})
|
||||
|
||||
it('formats large numbers with spaces in the input display', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('1000000')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1000000'])
|
||||
expect(input.element.value).toBe('1 000 000')
|
||||
})
|
||||
|
||||
it('accepts decimal values with commas', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12,5')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
|
||||
expect(input.element.value).toBe('12.5')
|
||||
})
|
||||
|
||||
it('keeps a trailing decimal separator while typing', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12,')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.'])
|
||||
expect(input.element.value).toBe('12.')
|
||||
})
|
||||
|
||||
it('accepts a decimal starting with a comma', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue(',5')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
|
||||
expect(input.element.value).toBe('0.5')
|
||||
})
|
||||
|
||||
it('increments the current value when clicking plus', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2'})
|
||||
|
||||
await wrapper.findAll('button')[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['3'])
|
||||
})
|
||||
|
||||
it('increments decimal values with a step of 1', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '1.5'})
|
||||
|
||||
await wrapper.findAll('button')[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2.5'])
|
||||
})
|
||||
|
||||
it('decrements the current value when clicking minus', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2'})
|
||||
|
||||
await wrapper.findAll('button')[0].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1'])
|
||||
})
|
||||
|
||||
it('does not change the value from buttons when readonly', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2', readonly: true})
|
||||
|
||||
await wrapper.findAll('button')[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('disables minus and prevents decrement at min', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2', min: 2})
|
||||
const minusButton = wrapper.findAll('button')[0]
|
||||
|
||||
expect(minusButton.attributes('disabled')).toBeDefined()
|
||||
|
||||
await minusButton.trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('disables plus and prevents increment at max', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2', max: 2})
|
||||
const plusButton = wrapper.findAll('button')[1]
|
||||
|
||||
expect(plusButton.attributes('disabled')).toBeDefined()
|
||||
|
||||
await plusButton.trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('clamps manual input to max', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '', max: 5})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['5'])
|
||||
expect(input.element.value).toBe('5')
|
||||
})
|
||||
})
|
||||
303
app/components/malio/input/InputNumber.vue
Normal file
303
app/components/malio/input/InputNumber.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div :class="mergedGroupClass" >
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="isMinusDisabled"
|
||||
@click="decrement"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:minus"
|
||||
:class="mergedButtonMinusClass"
|
||||
/>
|
||||
</button>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass"
|
||||
:style="inputWidthStyle"
|
||||
:value="displayedValue"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="_"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="isPlusDisabled"
|
||||
@click="increment"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:plus"
|
||||
:class="mergedButtonPlusClass"
|
||||
/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</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: 'MalioInputNumber', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
min?: number | string
|
||||
max?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
|
||||
// Ajoute un separateur de milliers pour l'affichage dans le champ.
|
||||
const formatDisplayValue = (value: string) => {
|
||||
if (!value) return ''
|
||||
const [integerPart = '', decimalPart] = value.split('.')
|
||||
const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
|
||||
|
||||
if (decimalPart !== undefined) {
|
||||
return `${formattedIntegerPart}.${decimalPart}`
|
||||
}
|
||||
|
||||
return formattedIntegerPart
|
||||
}
|
||||
|
||||
// Valeur visible dans l'input, avec formatage des milliers.
|
||||
const displayedValue = computed(() => formatDisplayValue(currentValue.value))
|
||||
const inputCharacterWidth = computed(() => Math.max(displayedValue.value.length, 1))
|
||||
|
||||
// Transforme min/max en nombres utilisables.
|
||||
const parseBound = (value: number | string | undefined) => {
|
||||
if (value === undefined || value === '') return undefined
|
||||
const parsedValue = Number.parseFloat(String(value).replace(',', '.'))
|
||||
return Number.isNaN(parsedValue) ? undefined : parsedValue
|
||||
}
|
||||
|
||||
const minValue = computed(() => parseBound(props.min))
|
||||
const maxValue = computed(() => parseBound(props.max))
|
||||
|
||||
// Recupere la valeur numerique brute actuellement saisie.
|
||||
const currentNumericValue = computed(() => {
|
||||
if (currentValue.value === '') return undefined
|
||||
const parsedValue = Number.parseFloat(currentValue.value)
|
||||
return Number.isNaN(parsedValue) ? undefined : parsedValue
|
||||
})
|
||||
|
||||
const inputWidthStyle = computed(() => ({
|
||||
width: `calc(${inputCharacterWidth.value}ch + 30px)`,
|
||||
maxWidth: '100%',
|
||||
}))
|
||||
|
||||
const isMinusDisabled = computed(() =>
|
||||
props.disabled || currentNumericValue.value <= minValue.value,
|
||||
)
|
||||
|
||||
const isPlusDisabled = computed(() =>
|
||||
props.disabled || currentNumericValue.value >= maxValue.value,
|
||||
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative mt-4 flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
' peer h-[22px] min-w-0 border bg-white text-center outline-none placeholder:text-transparent text-lg border-x-0 border-black',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: '',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'cursor-pointer text-black mr-4 text-[18px]',
|
||||
hasError.value ? 'text-m-error' : '',
|
||||
hasSuccess.value ? 'text-m-success' : '',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60' : '',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedButtonMinusClass = computed(() =>
|
||||
twMerge(
|
||||
'h-[22px] w-[40px] border border-black rounded-s-[3px]',
|
||||
isMinusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
|
||||
hasError.value
|
||||
? 'border-m-error'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success'
|
||||
: '',
|
||||
),
|
||||
)
|
||||
|
||||
const mergedButtonPlusClass = computed(() =>
|
||||
twMerge(
|
||||
'h-[22px] w-[40px] border border-black rounded-e-[3px]',
|
||||
isPlusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
|
||||
hasError.value
|
||||
? 'border-m-error'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success'
|
||||
: '',
|
||||
),
|
||||
)
|
||||
|
||||
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
|
||||
}>()
|
||||
|
||||
// Met a jour l'etat local si besoin puis emet la valeur brute.
|
||||
const updateValue = (value: string) => {
|
||||
if (!isControlled.value) {
|
||||
localValue.value = value
|
||||
}
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// Force la valeur a rester entre les bornes min et max.
|
||||
const clampValue = (value: number) => {
|
||||
if (minValue.value !== undefined && value < minValue.value) return minValue.value
|
||||
if (maxValue.value !== undefined && value > maxValue.value) return maxValue.value
|
||||
return value
|
||||
}
|
||||
|
||||
// Garde uniquement les chiffres et la virgule puis applique les bornes.
|
||||
const normalizeValue = (value: string) => {
|
||||
const sanitizedValue = value
|
||||
.replace(/[^\d,.]/g, '')
|
||||
.replace(/,/g, '.')
|
||||
|
||||
const [integerPart = '', ...decimalParts] = sanitizedValue.split('.')
|
||||
const decimalPart = decimalParts.join('')
|
||||
const hasDecimalSeparator = sanitizedValue.includes('.')
|
||||
|
||||
if (hasDecimalSeparator) {
|
||||
const normalizedValue = `${integerPart || '0'}.${decimalPart}`
|
||||
const parsedValue = Number.parseFloat(normalizedValue)
|
||||
|
||||
if (Number.isNaN(parsedValue)) return ''
|
||||
|
||||
const clampedValue = clampValue(parsedValue)
|
||||
if (clampedValue !== parsedValue) return String(clampedValue)
|
||||
|
||||
return decimalPart === '' ? `${integerPart || '0'}.` : normalizedValue
|
||||
}
|
||||
|
||||
return integerPart === '' ? '' : String(clampValue(Number.parseFloat(integerPart)))
|
||||
}
|
||||
|
||||
// Reformate l'affichage dans le champ tout en conservant une valeur brute pour le v-model.
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const normalizedValue = normalizeValue(target.value)
|
||||
|
||||
target.value = formatDisplayValue(normalizedValue)
|
||||
updateValue(normalizedValue)
|
||||
}
|
||||
|
||||
// Retourne la valeur numerique courante, ou 0 si le champ est vide.
|
||||
const getNumericValue = () => {
|
||||
const parsedValue = Number.parseFloat(currentValue.value || '0')
|
||||
return Number.isNaN(parsedValue) ? 0 : parsedValue
|
||||
}
|
||||
|
||||
// Retire 1 a la valeur si l'action est autorisee.
|
||||
const decrement = () => {
|
||||
if (props.disabled || props.readonly || isMinusDisabled.value) return
|
||||
updateValue(String(clampValue(getNumericValue() - 1)))
|
||||
}
|
||||
|
||||
// Ajoute 1 a la valeur si l'action est autorisee.
|
||||
const increment = () => {
|
||||
if (props.disabled || props.readonly || isPlusDisabled.value) return
|
||||
updateValue(String(clampValue(getNumericValue() + 1)))
|
||||
}
|
||||
</script>
|
||||
174
app/components/malio/input/InputPassword.test.ts
Normal file
174
app/components/malio/input/InputPassword.test.ts
Normal file
@@ -0,0 +1,174 @@
|
||||
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 InputPassword from './InputPassword.vue'
|
||||
|
||||
type InputPasswordProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
displayIcon?: boolean
|
||||
}
|
||||
|
||||
const InputPasswordForTest = InputPassword as DefineComponent<InputPasswordProps>
|
||||
|
||||
const mountComponent = (props: InputPasswordProps = {}) =>
|
||||
mount(InputPasswordForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputPassword', () => {
|
||||
it('renders the initial input value', () => {
|
||||
const wrapper = mountComponent({modelValue: 'secret123'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('secret123')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Mot de passe'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Mot de passe')
|
||||
})
|
||||
|
||||
it('has type password by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('password')
|
||||
})
|
||||
|
||||
it('toggles to type text when icon is clicked', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('[data-test="icon"]').trigger('click')
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('text')
|
||||
})
|
||||
|
||||
it('toggles back to password on second click', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('[data-test="icon"]').trigger('click')
|
||||
await wrapper.get('[data-test="icon"]').trigger('click')
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('password')
|
||||
})
|
||||
|
||||
it('does not render icon when displayIcon is false', () => {
|
||||
const wrapper = mountComponent({displayIcon: false})
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders icon by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('shows eye-off-outline icon when password is hidden', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:eye-off-outline')
|
||||
})
|
||||
|
||||
it('shows eye-outline icon when password is visible', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('[data-test="icon"]').trigger('click')
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:eye-outline')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('new password')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new password'])
|
||||
})
|
||||
|
||||
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: 'Mot de passe requis'})
|
||||
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Mot de passe requis')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
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-error')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Mot de passe valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Mot de passe 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('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'pwd', label: 'Password'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('pwd')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('pwd')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Password'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-password-')).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')
|
||||
})
|
||||
})
|
||||
209
app/components/malio/input/InputPassword.vue
Normal file
209
app/components/malio/input/InputPassword.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:minlength="minLength"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="displayIcon"
|
||||
:icon="isPasswordVisible ? 'mdi:eye-outline' : 'mdi:eye-off-outline'"
|
||||
:width="24"
|
||||
:height="24"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : 'text-m-muted',
|
||||
'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
|
||||
]"
|
||||
@click="toggleVisibility"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</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: 'MalioInputPassword', 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
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
displayIcon?: boolean
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
maxLength: undefined,
|
||||
minLength: undefined,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
displayIcon: true,
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
const isPasswordVisible = ref(false)
|
||||
|
||||
const toggleVisibility = () => {
|
||||
isPasswordVisible.value = !isPasswordVisible.value
|
||||
}
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-password-${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 mt-4 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 focus:border-2 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-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
props.displayIcon ? '!pr-10' : '',
|
||||
'focus:pl-[11px]',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
'left-3',
|
||||
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-error'
|
||||
: 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 disabled = computed(() => props.disabled)
|
||||
</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>
|
||||
235
app/components/malio/input/InputText.vue
Normal file
235
app/components/malio/input/InputText.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
v-maska="mask"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:minlength="minLength"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@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="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : iconColor,
|
||||
iconPositionClass,
|
||||
]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</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: 'MalioInputText', 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
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
mask?: string | MaskInputOptions
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
iconName: '',
|
||||
iconPosition: 'right',
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
maxLength: undefined,
|
||||
minLength: undefined,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
mask: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-text-${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 mt-4 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 focus:border-2 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-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
|
||||
: 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-error'
|
||||
: 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'
|
||||
})
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-8'
|
||||
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`
|
||||
})
|
||||
</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>
|
||||
152
app/components/malio/input/InputTextArea.test.ts
Normal file
152
app/components/malio/input/InputTextArea.test.ts
Normal file
@@ -0,0 +1,152 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import InputTextArea from './InputTextArea.vue'
|
||||
|
||||
type InputTextAreaProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
size?: number | string
|
||||
textInput?: string
|
||||
textLabel?: string
|
||||
required?: boolean
|
||||
maxLength?: number
|
||||
showCounter?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
rounded?: string
|
||||
}
|
||||
|
||||
const InputTextAreaForTest = InputTextArea as DefineComponent<InputTextAreaProps>
|
||||
|
||||
describe('MalioInputTextArea', () => {
|
||||
it('renders the initial textarea value', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {modelValue: 'initial textarea value'},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').element.value).toBe('initial textarea value')
|
||||
})
|
||||
|
||||
it('renders the label text and reuses a provided id', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {id: 'custom-textarea-id', label: 'Description'},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').attributes('id')).toBe('custom-textarea-id')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('custom-textarea-id')
|
||||
expect(wrapper.get('label').text()).toBe('Description')
|
||||
})
|
||||
|
||||
it('generates an id when missing', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {label: 'Description'},
|
||||
})
|
||||
|
||||
const textareaId = wrapper.get('textarea').attributes('id')
|
||||
expect(textareaId?.startsWith('malio-input-textarea-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(textareaId)
|
||||
})
|
||||
|
||||
it('applies name, autocomplete and rows attributes', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {name: 'bio', autocomplete: 'on', size: 4},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').attributes('name')).toBe('bio')
|
||||
expect(wrapper.get('textarea').attributes('autocomplete')).toBe('on')
|
||||
expect(wrapper.get('textarea').attributes('rows')).toBe('4')
|
||||
})
|
||||
|
||||
it('sets required, readonly and disabled attributes', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
required: true,
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').attributes('required')).toBeDefined()
|
||||
expect(wrapper.get('textarea').attributes('readonly')).toBeDefined()
|
||||
expect(wrapper.get('textarea').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('textarea').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {modelValue: ''},
|
||||
})
|
||||
|
||||
await wrapper.get('textarea').setValue('new textarea value')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new textarea value'])
|
||||
})
|
||||
|
||||
it('shows the character counter when enabled', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
modelValue: 'hello',
|
||||
showCounter: true,
|
||||
maxLength: 20,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('span.text-xs').text()).toBe('5/20')
|
||||
expect(wrapper.get('textarea').classes()).toContain('pb-6')
|
||||
})
|
||||
|
||||
it('shows hint message in muted color', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {hint: 'Helpful hint'},
|
||||
})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
|
||||
})
|
||||
|
||||
it('shows error state on textarea and label', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
label: 'Description',
|
||||
error: 'Textarea error',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
|
||||
expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows success state on textarea and label', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
label: 'Description',
|
||||
success: 'Textarea success',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Textarea success')
|
||||
})
|
||||
|
||||
it('prioritizes error over success', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
error: 'Textarea error',
|
||||
success: 'Textarea success',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').classes()).toContain('border-m-error')
|
||||
expect(wrapper.find('p.text-m-success').exists()).toBe(false)
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
|
||||
})
|
||||
})
|
||||
186
app/components/malio/input/InputTextArea.vue
Normal file
186
app/components/malio/input/InputTextArea.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative mt-4 w-full"
|
||||
>
|
||||
<textarea
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
|
||||
:autocomplete="autocomplete"
|
||||
class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 overflow-auto"
|
||||
:class="[
|
||||
isFilled ? 'border-black' : 'border-m-muted',
|
||||
disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
|
||||
hasError
|
||||
? 'border-m-error focus:border-m-error focus:pl-[11px]'
|
||||
: hasSuccess
|
||||
? 'border-m-success focus:border-m-success focus:pl-[11px]'
|
||||
: 'focus:border-m-primary focus:pl-[11px]',
|
||||
textInput,
|
||||
showCounterComputed ? 'pb-6' : '',
|
||||
rounded,
|
||||
]"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:rows="rowsCount"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="hasError"
|
||||
:aria-describedby="describedBy"
|
||||
:style="textareaStyle"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
/>
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
|
||||
:class="[
|
||||
shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
|
||||
disabled ? 'text-black/60' : '',
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
|
||||
textLabel,
|
||||
]"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
<span
|
||||
v-if="showCounterComputed"
|
||||
class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
|
||||
>
|
||||
{{ currentLength }}/{{ maxLength }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="hasError || hasSuccess || hint"
|
||||
class="mt-1 flex items-center justify-between gap-2 text-xs"
|
||||
>
|
||||
<p
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'ml-[2px]',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
|
||||
defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
size?: number | string
|
||||
textInput?: string
|
||||
textLabel?: string
|
||||
resize?: 'none' | 'both' | 'horizontal' | 'vertical'
|
||||
minResizeWidth?: number
|
||||
maxResizeWidth?: number
|
||||
minResizeHeight?: number
|
||||
maxResizeHeight?: number
|
||||
required?: boolean
|
||||
maxLength?: number
|
||||
showCounter?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
rounded?: string
|
||||
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
size: 2,
|
||||
textInput: 'text-lg',
|
||||
required: false,
|
||||
maxLength: 800,
|
||||
showCounter: false,
|
||||
readonly: false,
|
||||
textLabel: 'text-sm',
|
||||
disabled: false,
|
||||
rounded: 'rounded-md',
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
resize: 'both',
|
||||
minResizeWidth: 280,
|
||||
maxResizeWidth: 640,
|
||||
minResizeHeight: 40,
|
||||
maxResizeHeight: 320,
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-textarea-${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 && !hasError.value)
|
||||
const rowsCount = computed(() => Math.max(1, Number(props.size || 3)))
|
||||
const currentLength = computed(() => (currentValue.value ?? '').length)
|
||||
const showCounterComputed = computed(() =>
|
||||
props.showCounter && Number(props.maxLength) > 0
|
||||
)
|
||||
const toCssSize = (value: number | string) => (typeof value === 'number' ? `${value}px` : value)
|
||||
const textareaStyle = computed(() => ({
|
||||
resize: props.resize,
|
||||
minWidth: toCssSize(props.minResizeWidth),
|
||||
maxWidth: toCssSize(props.maxResizeWidth),
|
||||
minHeight: toCssSize(props.minResizeHeight),
|
||||
maxHeight: toCssSize(props.maxResizeHeight),
|
||||
}))
|
||||
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
||||
const describedBy = computed(() =>
|
||||
(hasError.value || hasSuccess.value || !!props.hint) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLTextAreaElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
</style>
|
||||
175
app/components/malio/input/InputUpload.test.ts
Normal file
175
app/components/malio/input/InputUpload.test.ts
Normal file
@@ -0,0 +1,175 @@
|
||||
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 InputUpload from './InputUpload.vue'
|
||||
|
||||
type InputUploadProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
disabled?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
displayIcon?: boolean
|
||||
accept?: string
|
||||
}
|
||||
|
||||
const InputUploadForTest = InputUpload as DefineComponent<InputUploadProps>
|
||||
|
||||
const mountComponent = (props: InputUploadProps = {}) =>
|
||||
mount(InputUploadForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputUpload', () => {
|
||||
it('renders the initial display value', () => {
|
||||
const wrapper = mountComponent({modelValue: 'document.pdf'})
|
||||
|
||||
expect(wrapper.get('input[type="text"]').element.value).toBe('document.pdf')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Téléverser un fichier'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Téléverser un fichier')
|
||||
})
|
||||
|
||||
it('has a hidden file input', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('input[type="file"]').exists()).toBe(true)
|
||||
expect(wrapper.find('input[type="file"]').classes()).toContain('hidden')
|
||||
})
|
||||
|
||||
it('text input is readonly', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input[type="text"]').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('renders icon by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render icon when displayIcon is false', () => {
|
||||
const wrapper = mountComponent({displayIcon: false})
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows the correct upload icon', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:cloud-arrow-up-outline')
|
||||
})
|
||||
|
||||
it('emits update:modelValue when a file is selected', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
const fileInput = wrapper.find('input[type="file"]')
|
||||
const file = new File(['content'], 'test.pdf', {type: 'application/pdf'})
|
||||
|
||||
Object.defineProperty(fileInput.element, 'files', {
|
||||
value: [file],
|
||||
})
|
||||
await fileInput.trigger('change')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test.pdf'])
|
||||
})
|
||||
|
||||
it('emits file-selected with the File object when a file is selected', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
const fileInput = wrapper.find('input[type="file"]')
|
||||
const file = new File(['content'], 'test.pdf', {type: 'application/pdf'})
|
||||
|
||||
Object.defineProperty(fileInput.element, 'files', {
|
||||
value: [file],
|
||||
})
|
||||
await fileInput.trigger('change')
|
||||
|
||||
expect(wrapper.emitted('file-selected')?.[0]).toEqual([file])
|
||||
})
|
||||
|
||||
it('sets disabled on both inputs when disabled is true', () => {
|
||||
const wrapper = mountComponent({disabled: true})
|
||||
|
||||
expect(wrapper.get('input[type="text"]').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input[type="file"]').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input[type="text"]').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('shows error message and styles', () => {
|
||||
const wrapper = mountComponent({error: 'Fichier requis'})
|
||||
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Fichier requis')
|
||||
expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('input[type="text"]').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-error')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Fichier valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Fichier valide')
|
||||
expect(wrapper.get('input[type="text"]').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 hint message', () => {
|
||||
const wrapper = mountComponent({hint: 'PDF uniquement'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('PDF uniquement')
|
||||
})
|
||||
|
||||
it('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'upload', label: 'Fichier'})
|
||||
|
||||
expect(wrapper.get('input[type="text"]').attributes('id')).toBe('upload')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('upload')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Fichier'})
|
||||
|
||||
const inputId = wrapper.get('input[type="text"]').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-upload-')).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[type="text"]').attributes('aria-invalid')).toBe('false')
|
||||
})
|
||||
|
||||
it('passes accept attribute to file input', () => {
|
||||
const wrapper = mountComponent({accept: '.pdf,.doc'})
|
||||
|
||||
expect(wrapper.get('input[type="file"]').attributes('accept')).toBe('.pdf,.doc')
|
||||
})
|
||||
})
|
||||
209
app/components/malio/input/InputUpload.vue
Normal file
209
app/components/malio/input/InputUpload.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
:accept="accept"
|
||||
class="hidden"
|
||||
:disabled="disabled"
|
||||
@change="onFileChange"
|
||||
>
|
||||
|
||||
<input
|
||||
:id="inputId"
|
||||
:class="mergedInputClass"
|
||||
:disabled="disabled"
|
||||
:value="currentDisplayValue"
|
||||
:readonly="true"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@click="openFilePicker"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="displayIcon"
|
||||
icon="mdi:cloud-arrow-up-outline"
|
||||
:width="24"
|
||||
:height="24"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : 'text-m-muted',
|
||||
'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
|
||||
]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</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: 'MalioInputUpload', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
disabled?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
displayIcon?: boolean
|
||||
accept?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
displayIcon: true,
|
||||
accept: '',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-upload-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentDisplayValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentDisplayValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
const isFilled = computed(() => currentDisplayValue.value.trim().length > 0)
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative mt-4 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 focus:border-2 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
|
||||
? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
props.displayIcon ? '!pr-10' : '',
|
||||
'focus:pl-[11px]',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
'left-3',
|
||||
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-error'
|
||||
: 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
|
||||
(event: 'file-selected', file: File): void
|
||||
}>()
|
||||
|
||||
const openFilePicker = () => {
|
||||
if (props.disabled) return
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
const onFileChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const file = target.files?.[0]
|
||||
if (file) {
|
||||
const fileName = file.name
|
||||
if (!isControlled.value) {
|
||||
localValue.value = fileName
|
||||
}
|
||||
emit('update:modelValue', fileName)
|
||||
emit('file-selected', file)
|
||||
}
|
||||
}
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
</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>
|
||||
Reference in New Issue
Block a user