| Numéro du ticket | Titre du ticket | |------------------|-----------------| | #407 | Création d'un composant de type time | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #10 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>
This commit was merged in pull request #10.
This commit is contained in:
87
.playground/pages/composant/time.vue
Normal file
87
.playground/pages/composant/time.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioTime v-model="simpleValue" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioTime
|
||||
v-model="labeledValue"
|
||||
label="Heure de depart"
|
||||
name="departure-time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioTime
|
||||
v-model="initialValue"
|
||||
label="Heure d'arrivee"
|
||||
hint="Format HH:MM"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Required</h2>
|
||||
<MalioTime
|
||||
v-model="requiredValue"
|
||||
label="Heure limite"
|
||||
required
|
||||
hint="Champ obligatoire"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Desactive</h2>
|
||||
<MalioTime
|
||||
v-model="disabledValue"
|
||||
label="Heure verrouillee"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioTime
|
||||
v-model="readonlyValue"
|
||||
label="Heure en lecture seule"
|
||||
readonly
|
||||
hint="Visible mais non modifiable"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioTime
|
||||
v-model="errorValue"
|
||||
label="Heure de fermeture"
|
||||
error="L'heure saisie n'est pas valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succes</h2>
|
||||
<MalioTime
|
||||
v-model="successValue"
|
||||
label="Heure confirmee"
|
||||
success="Horaire enregistre"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioTime from '../../../app/components/malio/Time.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const labeledValue = ref('')
|
||||
const initialValue = ref('08:30')
|
||||
const requiredValue = ref('')
|
||||
const disabledValue = ref('14:15')
|
||||
const readonlyValue = ref('18:45')
|
||||
const errorValue = ref('25:90')
|
||||
const successValue = ref('09:00')
|
||||
</script>
|
||||
79
app/components/malio/Time.test.ts
Normal file
79
app/components/malio/Time.test.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import Time from './Time.vue'
|
||||
|
||||
type TimeProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}
|
||||
|
||||
const TimeForTest = Time as DefineComponent<TimeProps>
|
||||
|
||||
const mountTime = (props: TimeProps = {}) =>
|
||||
mount(TimeForTest, {props})
|
||||
|
||||
describe('MalioTime', () => {
|
||||
it('renders two text inputs and a separator', () => {
|
||||
const wrapper = mountTime()
|
||||
|
||||
expect(wrapper.findAll('input')).toHaveLength(2)
|
||||
expect(wrapper.text()).toContain(':')
|
||||
})
|
||||
|
||||
it('uses separate ids for hours and minutes inputs', () => {
|
||||
const wrapper = mountTime({label: 'Horaire'})
|
||||
const inputs = wrapper.findAll('input')
|
||||
|
||||
expect(inputs[0].attributes('id')).toContain('-hours')
|
||||
expect(inputs[1].attributes('id')).toContain('-minutes')
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputs[0].attributes('id'))
|
||||
})
|
||||
|
||||
it('clamps values to 24 hours and 59 minutes', async () => {
|
||||
const wrapper = mountTime({modelValue: ''})
|
||||
const inputs = wrapper.findAll('input')
|
||||
|
||||
await inputs[0].setValue('99')
|
||||
await inputs[1].setValue('88')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['23:59'])
|
||||
expect((inputs[0].element as HTMLInputElement).value).toBe('23')
|
||||
expect((inputs[1].element as HTMLInputElement).value).toBe('59')
|
||||
})
|
||||
|
||||
it('pads single digits on blur', async () => {
|
||||
const wrapper = mountTime({modelValue: ''})
|
||||
const inputs = wrapper.findAll('input')
|
||||
|
||||
await inputs[0].setValue('7')
|
||||
await inputs[0].trigger('blur')
|
||||
await inputs[1].setValue('5')
|
||||
await inputs[1].trigger('blur')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['07:05'])
|
||||
expect((inputs[0].element as HTMLInputElement).value).toBe('07')
|
||||
expect((inputs[1].element as HTMLInputElement).value).toBe('05')
|
||||
})
|
||||
|
||||
it('applies the primary border to the focused field', async () => {
|
||||
const wrapper = mountTime()
|
||||
const inputs = wrapper.findAll('input')
|
||||
|
||||
await inputs[0].trigger('focus')
|
||||
|
||||
expect(inputs[0].classes()).toContain('border-m-primary')
|
||||
expect(inputs[1].classes()).not.toContain('border-m-primary')
|
||||
})
|
||||
})
|
||||
255
app/components/malio/Time.vue
Normal file
255
app/components/malio/Time.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :class="mergedGroupClass">
|
||||
<label
|
||||
v-if="label"
|
||||
:for="hoursInputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
:id="hoursInputId"
|
||||
:name="hoursName"
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass('hours')"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:value="hoursValue"
|
||||
v-bind="attrs"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="00"
|
||||
maxlength="2"
|
||||
@input="onHoursInput"
|
||||
@focus="activeField = 'hours'"
|
||||
@blur="onHoursBlur"
|
||||
>
|
||||
|
||||
<span class="text-lg text-black">:</span>
|
||||
|
||||
<input
|
||||
:id="minutesInputId"
|
||||
:name="minutesName"
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass('minutes')"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:value="minutesValue"
|
||||
v-bind="attrs"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="00"
|
||||
maxlength="2"
|
||||
@input="onMinutesInput"
|
||||
@focus="activeField = 'minutes'"
|
||||
@blur="onMinutesBlur"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId, watch} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioTime', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const hoursValue = ref('')
|
||||
const minutesValue = ref('')
|
||||
const activeField = ref<'hours' | 'minutes' | null>(null)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-time-${generatedId}`)
|
||||
const hoursInputId = computed(() => `${inputId.value}-hours`)
|
||||
const minutesInputId = computed(() => `${inputId.value}-minutes`)
|
||||
const hoursName = computed(() => (props.name ? `${props.name}-hours` : ''))
|
||||
const minutesName = computed(() => (props.name ? `${props.name}-minutes` : ''))
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const padSegment = (value: string) => (value === '' ? '' : value.padStart(2, '0'))
|
||||
|
||||
const sanitizeDigits = (value: string) =>
|
||||
value.replace(/\D/g, '').slice(0, 2)
|
||||
|
||||
const normalizeHours = (value: string) => {
|
||||
const digits = sanitizeDigits(value)
|
||||
if (digits === '') return ''
|
||||
return String(Math.min(Number.parseInt(digits, 10), 23))
|
||||
}
|
||||
|
||||
const normalizeMinutes = (value: string) => {
|
||||
const digits = sanitizeDigits(value)
|
||||
if (digits === '') return ''
|
||||
return String(Math.min(Number.parseInt(digits, 10), 59))
|
||||
}
|
||||
|
||||
const parseTimeValue = (value: string | null | undefined) => {
|
||||
if (!value) return {hours: '', minutes: ''}
|
||||
|
||||
const [rawHours = '', rawMinutes = ''] = value.split(':')
|
||||
|
||||
return {
|
||||
hours: normalizeHours(rawHours),
|
||||
minutes: normalizeMinutes(rawMinutes),
|
||||
}
|
||||
}
|
||||
|
||||
const syncFromModelValue = (value: string | null | undefined) => {
|
||||
const parsedValue = parseTimeValue(value)
|
||||
hoursValue.value = parsedValue.hours
|
||||
minutesValue.value = parsedValue.minutes
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, syncFromModelValue, {immediate: true})
|
||||
|
||||
const describedBy = computed(() =>
|
||||
(props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative mt-4 flex w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'radio-text mt-px mr-3 cursor-pointer text-black',
|
||||
hasError.value ? 'text-m-error' : '',
|
||||
hasSuccess.value ? 'text-m-success' : '',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60' : '',
|
||||
props.labelClass
|
||||
),
|
||||
)
|
||||
|
||||
const mergedInputClass = (field: 'hours' | 'minutes') =>
|
||||
twMerge(
|
||||
'h-7 w-9 border bg-white text-center text-lg outline-none rounded-md placeholder:text-m-muted',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'focus:border-2 border-m-error focus:border-m-error'
|
||||
: hasSuccess.value
|
||||
? 'focus:border-2 border-m-success focus:border-m-success'
|
||||
: activeField.value === field
|
||||
? 'border-2 border-m-primary text-m-primary'
|
||||
: 'border-black text-black',
|
||||
props.inputClass,
|
||||
)
|
||||
|
||||
const emitCurrentValue = () => {
|
||||
const formattedHours = hoursValue.value ? padSegment(hoursValue.value) : '00'
|
||||
const formattedMinutes = minutesValue.value ? padSegment(minutesValue.value) : '00'
|
||||
|
||||
if (!hoursValue.value && !minutesValue.value) {
|
||||
emit('update:modelValue', '')
|
||||
return
|
||||
}
|
||||
|
||||
emit('update:modelValue', `${formattedHours}:${formattedMinutes}`)
|
||||
}
|
||||
|
||||
const onHoursInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const normalizedValue = normalizeHours(target.value)
|
||||
|
||||
hoursValue.value = normalizedValue
|
||||
target.value = normalizedValue
|
||||
emitCurrentValue()
|
||||
}
|
||||
|
||||
const onMinutesInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const normalizedValue = normalizeMinutes(target.value)
|
||||
|
||||
minutesValue.value = normalizedValue
|
||||
target.value = normalizedValue
|
||||
emitCurrentValue()
|
||||
}
|
||||
|
||||
const formatFieldOnBlur = (field: 'hours' | 'minutes') => {
|
||||
if (field === 'hours' && hoursValue.value) {
|
||||
hoursValue.value = padSegment(hoursValue.value)
|
||||
}
|
||||
|
||||
if (field === 'minutes' && minutesValue.value) {
|
||||
minutesValue.value = padSegment(minutesValue.value)
|
||||
}
|
||||
|
||||
emitCurrentValue()
|
||||
}
|
||||
|
||||
const onHoursBlur = () => {
|
||||
formatFieldOnBlur('hours')
|
||||
activeField.value = null
|
||||
}
|
||||
|
||||
const onMinutesBlur = () => {
|
||||
formatFieldOnBlur('minutes')
|
||||
activeField.value = null
|
||||
}
|
||||
</script>
|
||||
89
app/story/inputTime.story.vue
Normal file
89
app/story/inputTime.story.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<Story title="Input/Time">
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioTime v-model="simpleValue" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioTime
|
||||
v-model="labeledValue"
|
||||
label="Heure de depart"
|
||||
name="departure-time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioTime
|
||||
v-model="initialValue"
|
||||
label="Heure d'arrivee"
|
||||
hint="Format HH:MM"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Required</h2>
|
||||
<MalioTime
|
||||
v-model="requiredValue"
|
||||
label="Heure limite"
|
||||
required
|
||||
hint="Champ obligatoire"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Desactive</h2>
|
||||
<MalioTime
|
||||
v-model="disabledValue"
|
||||
label="Heure verrouillee"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioTime
|
||||
v-model="readonlyValue"
|
||||
label="Heure en lecture seule"
|
||||
readonly
|
||||
hint="Visible mais non modifiable"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioTime
|
||||
v-model="errorValue"
|
||||
label="Heure de fermeture"
|
||||
error="L'heure saisie n'est pas valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succes</h2>
|
||||
<MalioTime
|
||||
v-model="successValue"
|
||||
label="Heure confirmee"
|
||||
success="Horaire enregistre"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioTime from '../components/malio/Time.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const labeledValue = ref('')
|
||||
const initialValue = ref('08:30')
|
||||
const requiredValue = ref('')
|
||||
const disabledValue = ref('14:15')
|
||||
const readonlyValue = ref('18:45')
|
||||
const errorValue = ref('25:90')
|
||||
const successValue = ref('09:00')
|
||||
</script>
|
||||
Reference in New Issue
Block a user