Merge branch 'feat/333-creation-text-input' into feat/335-ajout-package-histoire

2026-02-25 11:33:17 +01:00
parent a8e5f2e05a 1bce3304c9
commit e73733de95
10 changed files with 832 additions and 61 deletions
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -0,0 +1,195 @@
+<template>
+  <div
+    class="relative mt-4 flex h-12 w-full items-center"
+    :class="[minWidth, maxWidth]"
+  >
+    <input
+      :id="inputId"
+      v-maska="mask"
+      :name="name"
+      :autocomplete="autocomplete"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none  focus:border-2"
+      :class="[
+      disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
+      hasError
+        ? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
+        : hasSuccess
+          ? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
+          : 'border-m-muted focus:border-m-primary focus:pl-[11px]',
+      textInput,
+      iconInputPaddingClass,
+      rounded,
+    ]"
+      :required="required"
+      :maxlength="maxLength"
+      :minlength="minLength"
+      :disabled="disabled"
+      :value="modelValue ?? ''"
+      :readonly="readonly"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      placeholder=" "
+      type="text"
+      @input="onInput"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      class="floating-label absolute left-3 top-2 mt-1 origin-left transition-transform duration-150 font-medium"
+      :class="[
+    disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError
+      ? 'text-m-error'
+      : hasSuccess
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+      textLabel,
+      ]"
+    >
+      {{ label }}
+    </label>
+
+    <IconifyIcon
+      v-if="iconName"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon"
+      :class="[
+      hasError ? 'text-m-error' : hasSuccess ? 'text-m-success' : '',
+      'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
+      iconColor,
+    ]"
+    />
+
+  </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, useAttrs, useId} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+
+defineOptions({name: 'MalioInputText', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    autocomplete?: string
+    modelValue?: string | null | undefined
+    minWidth?: string
+    maxWidth?: string
+    textInput?: string
+    textLabel?: string
+    required?: boolean
+    maxLength?: number | string
+    minLength?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    iconName?: string
+    rounded?: string
+    iconSize?: string | number
+    iconColor?: string
+    mask?: string | MaskInputOptions
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: '',
+    modelValue: undefined,
+    iconName: '',
+    label: '',
+    minWidth: 'w-96',
+    maxWidth: '',
+    textInput: 'text-lg',
+    required: false,
+    maxLength: undefined,
+    minLength: undefined,
+    readonly: false,
+    textLabel: 'text-sm',
+    disabled: false,
+    rounded: 'rounded-md',
+    hint: '',
+    error: '',
+    success: '',
+    iconSize: 24,
+    iconColor: 'text-m-muted',
+    mask: undefined,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.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
+}>()
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+
+const iconInputPaddingClass = computed(() => {
+  return props.iconName ? 'pr-10' : ''
+})
+</script>
+
+<style scoped>
+.floating-input:focus + label,
+.floating-input:not(:placeholder-shown) + label {
+  transform: translateY(-1.15rem) scale(0.9);
+}
+
+.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>