malio-layer-ui/.playground/pages/composant/input/inputEmail.vue

<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>
      <MalioInputEmail />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
      <MalioInputEmail
        v-model="emailValue"
        label="Adresse email"
        name="email"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
      <MalioInputEmail
        label="Adresse email"
        icon-position="left"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
      <MalioInputEmail
        label="Adresse email"
        :icon-name="''"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioInputEmail
        model-value="contact@malio.fr"
        disabled
        label="Adresse email"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputEmail
        model-value="readonly@malio.fr"
        readonly
        label="Adresse email"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
      <MalioInputEmail
        label="Adresse email (readonly vide)"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
      <MalioInputEmail
        v-model="readonlyFilledEmail"
        label="Adresse email (readonly rempli)"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
      <MalioInputEmail
        label="Adresse email"
        hint="ex: prenom.nom@malio.fr"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioInputEmail
        model-value="pas-un-email"
        label="Adresse email"
        error="Adresse email invalide"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioInputEmail
        model-value="contact@malio.fr"
        label="Adresse email"
        success="Adresse email valide"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
      <MalioInputEmail
        v-model="dynamicEmail"
        label="Adresse email"
        hint="Saisir une adresse au format prenom@domaine.tld"
        :error="dynamicError"
        :success="dynamicSuccess"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Email obligatoire</h2>
      <MalioInputEmail
        v-model="requiredEmail"
        label="Email obligatoire"
        :required="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Email normalisé (minuscules)</h2>
      <MalioInputEmail
        v-model="lowercaseEmail"
        label="Email normalisé (minuscules)"
        :lowercase="true"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const readonlyFilledEmail = ref('contact@malio.fr')
const emailValue = ref('')
const dynamicEmail = ref('')
const requiredEmail = ref('')
const lowercaseEmail = ref('')

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
const isDynamicValid = computed(() => emailRegex.test(dynamicEmail.value))
const dynamicError = computed(() => {
  if (!dynamicEmail.value) return ''
  return isDynamicValid.value ? '' : 'Adresse email invalide'
})
const dynamicSuccess = computed(() => {
  if (!dynamicEmail.value) return ''
  return isDynamicValid.value ? 'Adresse email valide' : ''
})
</script>