.playground/pages/composant/time.vue

@@ -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>

app/components/malio/Time.test.ts

@@ -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')
+  })
+})

app/components/malio/Time.vue

@@ -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>

app/story/inputTime.story.vue

@@ -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>