feat : ajouts du composant checkbox

.playground/pages/composant/checkbox.vue

@@ -0,0 +1,101 @@
+<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>
+      <MalioCheckbox
+        v-model="simpleValue"
+        label="Accepter les conditions"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Coche par default</h2>
+      <MalioCheckbox
+        v-model="checkedValue"
+        label="Recevoir la newsletter"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint</h2>
+      <MalioCheckbox
+        v-model="hintValue"
+        label="J'accepte le traitement des donnees"
+        hint="Vous pouvez retirer votre consentement a tout moment."
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioCheckbox
+        :model-value="false"
+        label="Accepter les CGU"
+        error="Ce champ est obligatoire."
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioCheckbox
+        :model-value="true"
+        label="Adresse vérifiée"
+        success="Choix valide."
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Disabled et Readonly</h2>
+      <div class="space-y-4">
+        <MalioCheckbox
+          :model-value="true"
+          label="Option désactivée"
+          disabled
+        />
+        <MalioCheckbox
+          :model-value="true"
+          label="Option readonly"
+          readonly
+        />
+      </div>
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox</h2>
+      <div class="space-y-4">
+        <MalioCheckbox
+          label="Option 1"
+        />
+        <MalioCheckbox
+          label="Option 2"
+        />
+        <MalioCheckbox
+          label="Option 3"
+        />
+    </div>
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox avec v-for</h2>
+      <div class="space-y-4">
+        <MalioCheckbox
+          v-for="option in options"
+          :key="option"
+          :label="option"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioCheckbox from '../../../app/components/malio/Checkbox.vue'
+const simpleValue = ref(false)
+const checkedValue = ref(true)
+const hintValue = ref(false)
+const options = [
+  'Option A',
+  'Option B',
+  'Option C',
+  'Option D',
+
+]
+</script>

.playground/pages/composant/inputAmount.vue

@@ -1,60 +0,0 @@
-<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>
-      <MalioInputAmount />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
-      <MalioInputAmount
-        label="Montant"
-        name="amount"
-        autocomplete="off"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
-      <MalioInputAmount
-        model-value="125.00"
-        disabled
-        label="Montant désactivé"
-      />
-      <MalioInputAmount
-        disabled
-        label="Montant désactivé"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
-      <MalioInputAmount
-        model-value="42.50"
-        readonly
-        label="Montant readonly"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Erreur et succès</h2>
-      <div class="mt-4">
-        <MalioInputAmount
-          model-value="12.3"
-          label="Montant"
-          error="Le montant est incorrect"
-        />
-      </div>
-      <div class="mt-4">
-        <MalioInputAmount
-          model-value="89.90"
-          label="Montant"
-          success="Montant valide"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-</script>

.playground/pages/composant/inputNumber.vue

@@ -1,80 +0,0 @@
-<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>
-      <MalioInputNumber
-        v-model="simpleValue"
-        label="Quantite"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
-      <MalioInputNumber
-        v-model="initialValue"
-        label="Participants"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Avec bornes</h2>
-      <MalioInputNumber
-        v-model="boundedValue"
-        label="Places"
-        :min="1"
-        :max="5"
-        hint="Minimum 1, maximum 5"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Desactive</h2>
-      <MalioInputNumber
-        v-model="disabledValue"
-        label="Articles"
-        disabled
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
-      <MalioInputNumber
-        v-model="readonlyValue"
-        label="Tickets"
-        readonly
-        hint="Valeur verrouillee"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
-      <MalioInputNumber
-        v-model="errorValue"
-        label="Quantite"
-        :min="1"
-        error="La quantite minimale est 1"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Succes</h2>
-      <MalioInputNumber
-        v-model="successValue"
-        label="Quantite"
-        success="Quantite validee"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ref} from 'vue'
-
-const simpleValue = ref('')
-const initialValue = ref('3')
-const boundedValue = ref('2')
-const disabledValue = ref('4')
-const readonlyValue = ref('7')
-const errorValue = ref('0')
-const successValue = ref('2')
-</script>

app/components/malio/Checkbox.test.ts

@@ -0,0 +1,142 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Checkbox from './Checkbox.vue'
+
+type CheckboxProps = {
+  id?: string
+  label?: string
+  name?: string
+  modelValue?: boolean | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+}
+
+const CheckboxForTest = Checkbox as DefineComponent<CheckboxProps>
+
+const mountCheckbox = (props: CheckboxProps = {}) =>
+  mount(CheckboxForTest, {props})
+
+describe('MalioCheckbox', () => {
+  it('renders a checkbox input', () => {
+    const wrapper = mountCheckbox()
+
+    expect(wrapper.get('input').attributes('type')).toBe('checkbox')
+  })
+
+  it('renders the label text', () => {
+    const wrapper = mountCheckbox({label: 'Accept terms'})
+
+    expect(wrapper.get('label').text()).toContain('Accept terms')
+  })
+
+  it('uses a provided id on input and label', () => {
+    const wrapper = mountCheckbox({
+      id: 'checkbox-id',
+      label: 'Accept terms',
+    })
+
+    expect(wrapper.get('input').attributes('id')).toBe('checkbox-id')
+    expect(wrapper.get('label').attributes('for')).toBe('checkbox-id')
+  })
+
+  it('generates an id when none is provided', () => {
+    const wrapper = mountCheckbox({label: 'Accept terms'})
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(inputId?.startsWith('malio-checkbox-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('applies the name attribute', () => {
+    const wrapper = mountCheckbox({name: 'terms'})
+
+    expect(wrapper.get('input').attributes('name')).toBe('terms')
+  })
+
+  it('reflects the checked state from modelValue', () => {
+    const wrapper = mountCheckbox({modelValue: true})
+
+    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('emits update:modelValue when toggled', async () => {
+    const wrapper = mountCheckbox({modelValue: false})
+    const input = wrapper.get('input')
+
+    await input.setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+  })
+
+  it('does not emit when readonly', async () => {
+    const wrapper = mountCheckbox({
+      modelValue: true,
+      readonly: true,
+    })
+    const input = wrapper.get('input')
+
+    await input.setValue(false)
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect((input.element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('sets disabled and required attributes', () => {
+    const wrapper = mountCheckbox({
+      disabled: true,
+      required: true,
+    })
+
+    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input').attributes('required')).toBeDefined()
+  })
+
+  it('shows a hint message and links it with aria-describedby', () => {
+    const wrapper = mountCheckbox({hint: 'Required field'})
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(wrapper.get('p').text()).toBe('Required field')
+    expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
+  })
+
+  it('shows an error state and message', () => {
+    const wrapper = mountCheckbox({
+      label: 'Accept terms',
+      error: 'You must accept',
+    })
+
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').text()).toBe('You must accept')
+  })
+
+  it('shows success only when there is no error', () => {
+    const wrapper = mountCheckbox({
+      success: 'Valid',
+      error: 'Invalid',
+    })
+
+    expect(wrapper.get('p').text()).toBe('Invalid')
+    expect(wrapper.get('p').classes()).toContain('text-m-error')
+  })
+
+  it('shows success styles and message when there is no error', () => {
+    const wrapper = mountCheckbox({
+      label: 'Accept terms',
+      success: 'Valid',
+      modelValue: true,
+    })
+
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('p').text()).toBe('Valid')
+    expect(wrapper.get('p').classes()).toContain('text-m-success')
+  })
+})

app/components/malio/Checkbox.vue

@@ -0,0 +1,227 @@
+<template>
+  <div :class="mergedGroupClass">
+    <input
+      :id="inputId"
+      :name="name"
+      :checked="isChecked"
+      :required="required"
+      :disabled="disabled"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      :class="mergedInputClass"
+      v-bind="attrs"
+      type="checkbox"
+      @change="onChange"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      <span>
+        <svg width="12" height="10" viewBox="0 0 12 10" aria-hidden="true">
+          <polyline points="1.5 6 4.5 9 10.5 1"/>
+        </svg>
+      </span>
+      <span>
+        {{ label }}
+      </span>
+    </label>
+
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="mergedMessageClass"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, useAttrs, useId} from 'vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    modelValue?: boolean | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+  }>(),
+  {
+    id: '',
+    label: '',
+    name: '',
+    modelValue: undefined,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
+const isChecked = computed(() => !!props.modelValue)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const disabled = computed(() => props.disabled)
+
+const describedBy = computed(() => {
+  if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
+  return `${inputId.value}-describedby`
+})
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'checkbox-wrapper-4 mt-4 w-full',
+    props.groupClass,
+  ),
+)
+
+const mergedInputClass = computed(() =>
+  twMerge(
+    'inp-cbx peer',
+    props.inputClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'cbx text-black',
+    disabled.value ? 'cursor-not-allowed text-black/60' : '',
+    hasError.value ? 'text-m-error' : '',
+    hasSuccess.value ? 'text-m-success' : '',
+    props.labelClass,
+  ),
+)
+
+const mergedMessageClass = computed(() =>
+  twMerge(
+    'text-xs',
+    hasError.value
+      ? 'text-m-error'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'text-m-muted',
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const onChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+
+  if (props.readonly) {
+    target.checked = isChecked.value
+    return
+  }
+
+  emit('update:modelValue', target.checked)
+}
+</script>
+
+<style scoped>
+.cbx {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.cbx span {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cbx span:first-child {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  transform: scale(1);
+  border: 2px solid rgb(0, 0, 0);
+  transition: all 0.1s ease;
+}
+
+.cbx span:first-child svg {
+  position: absolute;
+  top: 2px;
+  left: 1px;
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 16px;
+  stroke-dashoffset: 16px;
+  transition: all 0.125s ease;
+}
+
+.cbx span:last-child {
+  padding-left: 12px;
+  line-height: 18px;
+}
+
+.inp-cbx {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.inp-cbx:checked + .cbx span:first-child svg {
+  stroke-dashoffset: 0;
+}
+
+.inp-cbx + .cbx.text-m-error span:first-child {
+  border-color: rgb(var(--m-error) / 1);
+}
+.cbx.text-m-error span:first-child svg {
+  stroke: rgb(var(--m-error) / 1);
+}
+.inp-cbx:checked + .cbx.text-m-error span:first-child {
+  border-color: rgb(var(--m-error) / 1);
+}
+
+.inp-cbx + .cbx.text-m-success span:first-child {
+  border-color: rgb(var(--m-success) / 1);
+}
+.cbx.text-m-success span:first-child svg {
+  stroke: rgb(var(--m-success) / 1);
+}
+.inp-cbx:checked + .cbx.text-m-success span:first-child {
+  border-color: rgb(var(--m-success) / 1);
+}
+
+.inp-cbx:disabled + .cbx {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>

app/components/malio/InputAmount.test.ts

@@ -1,163 +0,0 @@
-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-2')
-  })
-
-  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-2')
-    expect(wrapper.get('input').classes()).toContain('!pl-11')
-    expect(wrapper.get('label').classes()).toContain('left-8')
-  })
-})

app/components/malio/InputAmount.vue

@@ -1,255 +0,0 @@
-<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-2' : 'right-2'
-  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>

app/components/malio/InputNumber.test.ts

@@ -1,165 +0,0 @@
-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 20px height', () => {
-    const wrapper = mountInputNumber()
-    const input = wrapper.get('input')
-
-    expect(input.classes()).toContain('h-[20px]')
-  })
-
-  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')
-  })
-})

app/components/malio/InputNumber.vue

@@ -1,300 +0,0 @@
-<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',
-        '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: '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-[20px] 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(
-    'radio-text mt-px cursor-pointer text-black mr-3',
-    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-[20px] w-[30px] 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-[20px] w-[30px] 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>

app/story/inputAmount.story.vue

@@ -1,200 +0,0 @@
-<template>
-  <Story
-    title="Input/Amount"
-  >
-      <MalioInputAmount/>
-  </Story>
-</template>
-
-<docs lang="md">
-# MalioInputAmount
-
-Composant input dédié à la saisie d’un montant décimal avec label flottant,
-états visuels (erreur / succès) et icône configurable.
-
-------------------------------------------------------------------------
-
-## Props détaillées
-
-### id
-
--   Type: string
--   Description: Identifiant HTML de l’input.
--   Comportement: Si non fourni, un id unique est généré automatiquement.
-
-### label
-
--   Type: string
--   Description: Texte affiché comme label flottant.
--   Comportement: Si absent, aucun label n’est rendu.
-
-### name
-
--   Type: string
--   Description: Attribut `name` de l’input, utile dans les formulaires.
-
-### autocomplete
-
--   Type: string
--   Description: Valeur de l’attribut `autocomplete`.
--   Défaut: `off`
-
-### modelValue
-
--   Type: string | null | undefined
--   Description: Valeur contrôlée du composant.
--   Comportement:
--   Si défini, le composant fonctionne via `v-model`.
--   Sinon, il conserve une valeur locale interne.
-
-------------------------------------------------------------------------
-
-## Apparence & Style
-
-### inputClass
-
--   Type: string
--   Description: Classes CSS additionnelles appliquées à l’input.
-
-### labelClass
-
--   Type: string
--   Description: Classes CSS additionnelles appliquées au label.
-
-### groupClass
-
--   Type: string
--   Description: Classes CSS additionnelles appliquées au conteneur.
-
-------------------------------------------------------------------------
-
-## Validation & Contraintes
-
-### required
-
--   Type: boolean
--   Description: Ajoute l’attribut HTML `required`.
-
-### maxLength
-
--   Type: number | string
--   Description: Longueur maximale autorisée.
-
-### minLength
-
--   Type: number | string
--   Description: Longueur minimale autorisée.
-
-### disabled
-
--   Type: boolean
--   Description: Désactive complètement le champ.
-
-### readonly
-
--   Type: boolean
--   Description: Rend le champ non modifiable mais focusable.
-
-------------------------------------------------------------------------
-
-## États & Messages
-
-### hint
-
--   Type: string
--   Description: Message d’aide affiché sous le champ.
-
-### error
-
--   Type: string
--   Description: Message d’erreur.
--   Effet:
--   Active l’état visuel erreur.
--   Positionne `aria-invalid="true"`.
--   Est prioritaire sur `success` et `hint`.
-
-### success
-
--   Type: string
--   Description: Message de succès.
--   Effet:
--   Actif uniquement si `error` est absent.
-
-------------------------------------------------------------------------
-
-## Icône
-
-### iconName
-
--   Type: string
--   Description: Nom de l’icône affichée dans le champ.
--   Défaut: `mdi:currency-eur`
-
-### iconPosition
-
--   Type: `'left' | 'right'`
--   Description: Position de l’icône dans le champ.
--   Défaut: `right`
-
-### iconSize
-
--   Type: string | number
--   Description: Taille de l’icône.
-
-### iconColor
-
--   Type: string
--   Description: Classe de couleur de l’icône en état neutre.
-
-------------------------------------------------------------------------
-
-## Comportement montant
-
--   Le champ est rendu en `type="text"` avec `inputmode="decimal"`.
--   Le séparateur décimal affiché par défaut est `.`.
--   Les virgules saisies par l’utilisateur sont converties en points.
--   Tous les caractères non numériques, sauf le séparateur décimal, sont supprimés.
--   La partie décimale est limitée à 2 chiffres.
-
-### Exemples de normalisation
-
--   `12,5` devient `12.5`
--   `0012,345abc` devient `12.34`
--   `,5` devient `0.5`
-
-### Formatage au blur
-
--   `12` devient `12.00`
--   `12.5` devient `12.50`
-
-------------------------------------------------------------------------
-
-## Priorité visuelle
-
-1.  `error`
-2.  `success`
-3.  état neutre
-
-------------------------------------------------------------------------
-
-## Accessibilité
-
--   `aria-invalid` est activé si `error` existe.
--   `aria-describedby` référence le message affiché sous le champ.
--   Le composant fonctionne avec ou sans `v-model`.
-
-------------------------------------------------------------------------
-
-## Events
-
-### update:modelValue
-
--   Émis à chaque modification de l’input.
--   Émis aussi au `blur` si la valeur est reformatée.
--   Permet l’utilisation avec `v-model`.
-
-</docs>
-
-<script setup lang="ts">
-import MalioInputAmount from '../components/malio/InputAmount.vue'
-</script>

app/story/inputCheckbox.story.vue

@@ -0,0 +1,114 @@
+<template>
+  <Story title="Input/Checkbox">
+        <MalioCheckbox
+          v-model="simpleValue"
+          label="Accepter les conditions"
+        />
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioCheckbox
+
+Composant checkbox custom avec `v-model`, message d'aide, et états visuels
+`error` / `success`.
+
+------------------------------------------------------------------------
+
+## Props
+
+### id
+
+- Type: `string`
+- Description: Identifiant HTML du checkbox.
+- Comportement: si absent, un id unique est généré automatiquement.
+
+### label
+
+- Type: `string`
+- Description: Texte affiche a cote de la case.
+
+### name
+
+- Type: `string`
+- Description: Attribut `name` du champ.
+
+### modelValue
+
+- Type: `boolean | null | undefined`
+- Description: État coche du composant.
+
+### inputClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées a l'input natif.
+
+### labelClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées au label.
+
+### groupClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées au conteneur.
+
+### required
+
+- Type: `boolean`
+- Description: Ajoute l'attribut HTML `required`.
+
+### disabled
+
+- Type: `boolean`
+- Description: Désactive le composant.
+
+### readonly
+
+- Type: `boolean`
+- Description: Empêche la mise a jour du `v-model` tout en gardant
+  l'affichage courant.
+
+### hint
+
+- Type: `string`
+- Description: Message d'aide affiche sous le checkbox.
+
+### error
+
+- Type: `string`
+- Description: Message d'erreur.
+- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
+  d'erreur au texte et a la case.
+
+### success
+
+- Type: `string`
+- Description: Message de succès.
+- Effet: applique la couleur de succès au texte et a la case si `error`
+  est absent.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+- `aria-invalid` est active si `error` existe.
+- `aria-describedby` pointe vers le message affiche.
+- L'input natif reste present pour conserver le comportement formulaire.
+
+------------------------------------------------------------------------
+
+## Event
+
+### update:modelValue
+
+- Émis a chaque changement de l'état coche.
+- Retourne un booléen `true` ou `false`.
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioCheckbox from '../components/malio/Checkbox.vue'
+
+const simpleValue = ref(false)
+</script>

app/story/inputNumber.story.vue

@@ -1,83 +0,0 @@
-<template>
-  <Story title="Input/Number">
-    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Simple</h2>
-        <MalioInputNumber
-          v-model="simpleValue"
-          label="Quantite"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
-        <MalioInputNumber
-          v-model="initialValue"
-          label="Participants"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Avec bornes</h2>
-        <MalioInputNumber
-          v-model="boundedValue"
-          label="Places"
-          :min="1"
-          :max="5"
-          hint="Minimum 1, maximum 5"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Desactive</h2>
-        <MalioInputNumber
-          v-model="disabledValue"
-          label="Articles"
-          disabled
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
-        <MalioInputNumber
-          v-model="readonlyValue"
-          label="Tickets"
-          readonly
-          hint="Valeur verrouillee"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
-        <MalioInputNumber
-          v-model="errorValue"
-          label="Quantite"
-          :min="1"
-          error="La quantite minimale est 1"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Succes</h2>
-        <MalioInputNumber
-          v-model="successValue"
-          label="Quantite"
-          success="Quantite validee"
-        />
-      </div>
-    </div>
-  </Story>
-</template>
-
-<script setup lang="ts">
-import {ref} from 'vue'
-import MalioInputNumber from '../components/malio/InputNumber.vue'
-
-const simpleValue = ref('')
-const initialValue = ref('3')
-const boundedValue = ref('2')
-const disabledValue = ref('4')
-const readonlyValue = ref('7')
-const errorValue = ref('0')
-const successValue = ref('2')
-</script>