malio-layer-ui/app/components/malio/input/InputEmail.vue

<template>
  <div>
    <div
      :class="mergedGroupClass"
    >
      <input
        :id="inputId"
        :name="name"
        :autocomplete="autocomplete"
        :class="mergedInputClass"
        :required="required"
        :disabled="disabled"
        :value="currentValue"
        :readonly="readonly"
        :aria-invalid="!!error"
        :aria-describedby="describedBy"
        v-bind="attrs"
        placeholder="_"
        type="email"
        inputmode="email"
        @input="onInput"
        @focus="isFocused = true; onKbdFocus()"
        @blur="isFocused = false; onKbdBlur()"
      >

      <label
        v-if="label"
        :for="inputId"
        :class="mergedLabelClass"
      >
        {{ label }}<MalioRequiredMark v-if="required" />
      </label>

      <IconifyIcon
        v-if="iconName"
        :icon="iconName"
        :width="iconSize"
        :height="iconSize"
        data-test="icon"
        :class="[iconStateClass, iconPositionClass]"
      />

      <button
        v-if="addable"
        type="button"
        :disabled="disabled"
        :aria-label="addButtonLabel"
        data-test="add-button"
        :class="mergedAddButtonClass"
        @click="onAdd"
      >
        <IconifyIcon
          :icon="addIconName"
          :width="24"
          :height="24"
          data-test="add-icon"
        />
      </button>

    </div>
    <p
      v-if="reserveMessageSpace || hint || error || success"
      :id="`${inputId}-describedby`"
      :class="[
          hasError
            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : 'text-m-muted',
          'mt-1 text-xs ml-[2px]',
          reserveMessageSpace ? 'min-h-[1rem]' : '',
        ]"
    >
      {{ hint || error || success }}
    </p>
  </div>
</template>

<script setup lang="ts">

import {computed, ref, useAttrs, useId} from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
import {twMerge} from 'tailwind-merge'
import MalioRequiredMark from '../shared/RequiredMark.vue'
import {useKbdFocusRing} from '../shared/useKbdFocusRing'

defineOptions({name: 'MalioInputEmail', inheritAttrs: false})

const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()

const props = withDefaults(
  defineProps<{
    id?: string
    label?: string
    name?: string
    autocomplete?: string
    modelValue?: string | null | undefined
    inputClass?: string
    labelClass?: string
    groupClass?: string
    required?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    iconName?: string
    iconPosition?: 'left' | 'right'
    iconSize?: string | number
    iconColor?: string
    addable?: boolean
    addIconName?: string
    addButtonLabel?: string
    lowercase?: boolean
    reserveMessageSpace?: boolean
  }>(),
  {
    id: '',
    name: '',
    autocomplete: 'off',
    modelValue: undefined,
    iconName: 'mdi:email-outline',
    iconPosition: 'right',
    label: '',
    inputClass: '',
    labelClass: '',
    groupClass: '',
    required: false,
    readonly: false,
    disabled: false,
    hint: '',
    error: '',
    success: '',
    iconSize: 24,
    iconColor: 'text-m-muted',
    addable: false,
    addIconName: 'mdi:plus',
    addButtonLabel: 'Ajouter une adresse email',
    lowercase: false,
    reserveMessageSpace: true,
  },
)

const attrs = useAttrs()
const generatedId = useId()
const localValue = ref('')
const isFocused = ref(false)

const inputId = computed(() => props.id?.toString() || `malio-input-email-${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)
const isFilled = computed(() => currentValue.value.trim().length > 0)
const isReadonly = computed(() => props.readonly && !props.disabled)
const shouldFloatLabel = computed(() =>
  isReadonly.value
    ? isFilled.value
    : isFocused.value || currentValue.value.length > 0,
)
const mergedGroupClass = computed(() =>
  twMerge(
    'relative flex h-12 w-full items-center',
    props.groupClass,
  ),
)
const mergedInputClass = computed(() =>
  twMerge(
    'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
    isReadonly.value ? '' : 'grow-height',
    isReadonly.value
      ? 'border-black'
      : 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-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : isReadonly.value ? '' : 'focus:border-m-primary',
    isReadonly.value ? 'cursor-default' : '',
    props.inputClass,
    iconInputPaddingClass.value,
    isReadonly.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] scale-90${isReadonly.value ? '' : ' peer-focus:-translate-y-[1.55rem]'}`
      : '',
    hasError.value
      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : disabled.value
          ? 'text-m-muted'
          : isReadonly.value
            ? isFilled.value ? 'text-black' : 'text-m-muted'
            : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
    props.labelClass,
  ),
)

const mergedAddButtonClass = computed(() =>
  twMerge(
    'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer transition-opacity hover:opacity-70',
    iconStateClass.value,
    props.disabled ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
  ),
)

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: 'add'): void
}>()

const sanitizeEmail = (v: string) => {
  let out = v.replace(/\s+/g, '')
  if (props.lowercase) out = out.toLowerCase()
  return out
}

const onInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  const raw = target.value
  const sanitized = sanitizeEmail(raw)

  if (sanitized !== raw) {
    // `<input type="email">` ne supporte pas l'API de sélection :
    // selectionStart vaut null et setSelectionRange lève en navigateur.
    // (En jsdom selectionStart peut renvoyer un nombre, d'où le code gardé ci-dessous.)
    const caret = target.selectionStart
    target.value = sanitized
    if (caret !== null) {
      const newCaret = sanitizeEmail(raw.slice(0, caret)).length
      try {
        target.setSelectionRange(newCaret, newCaret)
      } catch {
        /* type d'input sans support de sélection — ignore */
      }
    }
  }

  if (!isControlled.value) {
    localValue.value = sanitized
  }
  emit('update:modelValue', sanitized)
}

const onAdd = () => {
  if (props.disabled || props.readonly) return
  emit('add')
}

const effectiveIconPosition = computed(() =>
  props.addable && props.iconName ? 'left' : props.iconPosition,
)

const iconInputPaddingClass = computed(() => {
  const leftIcon = props.iconName && effectiveIconPosition.value === 'left'
  const rightIcon = props.iconName && effectiveIconPosition.value === 'right'
  const parts: string[] = []
  if (leftIcon) parts.push('!pl-11')
  if (rightIcon || props.addable) parts.push('!pr-10')
  return parts.join(' ')
})

const disabled = computed(() => props.disabled)

const labelPositionClass = computed(() => {
  if (props.iconName && effectiveIconPosition.value === 'left') return 'left-11'
  return 'left-3'
})

const focusPaddingClass = computed(() => {
  if (props.iconName && effectiveIconPosition.value === 'left') return 'focus:!pl-11'
  return 'focus:pl-[11px]'
})

const iconPositionClass = computed(() => {
  const sideClass = effectiveIconPosition.value === 'left' ? 'left-[10px]' : 'right-[10px]'
  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
})

const iconStateClass = computed(() => {
  if (hasError.value) return 'text-m-danger'
  if (hasSuccess.value) return 'text-m-success'
  if (disabled.value) return props.iconColor
  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
  if (isFocused.value) return 'text-m-primary'
  if (isFilled.value) return 'text-black'
  return props.iconColor
})
</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>