malio-layer-ui/.playground/pages/composant/input/inputText.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>
      <MalioInputText
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
      <MalioInputText
        v-model="nameValue"
        label="Nom d'utilisateur"
        name="username"
        autocomplete="username"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec icône à droite</h2>
      <MalioInputText
        v-model="searchValue"
        label="Recherche"
        icon-name="mdi:magnify"
        icon-size="20"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
      <MalioInputText
        label="Recherche"
        icon-name="mdi:magnify"
        icon-size="20"
        icon-position="left"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioInputText
        model-value="Valeur verrouillée"
        disabled
        label="Champ désactivé"
      />
      <MalioInputText
        disabled
        label="Champ désactivé"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputText
        model-value="Lecture seule"
        readonly
        label="Champ readonly"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
      <MalioInputText
        v-model="cityValue"
        label="Ville"
        icon-name="mdi:map-marker-outline"
        icon-size="20"
        hint="Commencez à taper le nom de la ville"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
      <MalioInputText
        model-value="ab"
        label="Code promo"
        icon-name="mdi:alert-circle-outline"
        icon-size="20"
        error="Le code est invalide"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès + icône</h2>
      <MalioInputText
        label="Code"
        success="Code valide"
        icon-name="mdi:alert-circle-outline"
        icon-size="20"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly + icône</h2>
      <MalioInputText
        model-value="Commande #A-2048"
        label="Référence"
        readonly
        icon-name="mdi:lock-outline"
        icon-size="20"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé + icône</h2>
      <MalioInputText
        model-value="Compte indisponible"
        label="Compte"
        disabled
        icon-name="mdi:account-off-outline"
        icon-size="20"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
      <MalioInputText
        label="Référence (readonly vide)"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
      <MalioInputText
        v-model="readonlyFilledValue"
        label="Référence (readonly rempli)"
        icon-name="mdi:lock-outline"
        icon-size="20"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Champ obligatoire</h2>
      <MalioInputText
        label="Champ obligatoire"
        :required="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec masque</h2>
      <MalioInputText
        label="Plaque d'immatriculation"
        :mask="maskOptions"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Code dynamique</h2>
      <MalioInputText
        v-model="dynamicCodeValue"
        label="Code d'accès"
        hint="Format attendu: 6 à 10 caractères alphanumériques"
        :error="dynamicCodeError"
        :success="dynamicCodeSuccess"
        icon-name="mdi:key-outline"
        icon-size="20"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succès</h2>
      <MalioInputText
        v-model="codeValue"
        label="Code"
        hint="Format attendu: 6 à 10 caractères alphanumériques"
      />
      <div class="mt-4">
        <MalioInputText
          model-value="invalide"
          label="Code"
          error="Le code doit contenir au moins 6 caractères"
        />
      </div>
      <div class="mt-4">
        <MalioInputText
          model-value="valide"
          label="Code"
          success="Le code est valide"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
const readonlyFilledValue = ref('Commande #A-2048')
const nameValue = ref('')
const searchValue = ref('')
const codeValue = ref('')
const cityValue = ref('')
const dynamicCodeValue = ref('')

const codeRegex = /^[A-Z0-9]{6,10}$/
const normalizedDynamicCode = computed(() => dynamicCodeValue.value.toUpperCase())
const isDynamicCodeValid = computed(() => codeRegex.test(normalizedDynamicCode.value))
const dynamicCodeError = computed(() => {
  if (!dynamicCodeValue.value) return ''
  return isDynamicCodeValid.value ? '' : 'Code invalide (6 à 10 caractères alphanumériques)'
})
const dynamicCodeSuccess = computed(() => {
  if (!dynamicCodeValue.value) return ''
  return isDynamicCodeValid.value ? 'Code valide' : ''
})

const maskOptions = {
  mask: '@@-###-@@',
  tokens: {
    '@': {
      pattern: /[A-Za-z]/,
      transform: (char: string) => char.toUpperCase()
    }
  }
}
</script>