tristan
9ed094ba86
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #45 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
142 lines
3.7 KiB
Vue
142 lines
3.7 KiB
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>
|
|
<MalioInputPhone />
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
|
<MalioInputPhone
|
|
v-model="phoneValue"
|
|
label="Téléphone"
|
|
name="phone"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
|
|
<MalioInputPhone
|
|
v-model="phoneAddable"
|
|
label="Téléphone"
|
|
addable
|
|
@add="onAdd"
|
|
/>
|
|
<p v-if="addClicks > 0" class="mt-2 text-sm text-m-muted">
|
|
Bouton cliqué {{ addClicks }} fois
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Icône à droite (sans bouton +)</h2>
|
|
<MalioInputPhone
|
|
label="Téléphone"
|
|
icon-position="right"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Sans icône</h2>
|
|
<MalioInputPhone
|
|
label="Téléphone"
|
|
:icon-name="''"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec masque français</h2>
|
|
<MalioInputPhone
|
|
v-model="phoneFrench"
|
|
label="Téléphone (FR)"
|
|
mask="+33 # ## ## ## ##"
|
|
hint="Saisir uniquement les chiffres"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Désactivé (avec addable)</h2>
|
|
<MalioInputPhone
|
|
model-value="+33 6 12 34 56 78"
|
|
addable
|
|
disabled
|
|
label="Téléphone"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Readonly (avec addable)</h2>
|
|
<MalioInputPhone
|
|
model-value="+33 6 12 34 56 78"
|
|
addable
|
|
readonly
|
|
label="Téléphone"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
|
<MalioInputPhone
|
|
label="Téléphone"
|
|
hint="Format international recommandé"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
|
<MalioInputPhone
|
|
model-value="abc"
|
|
label="Téléphone"
|
|
error="Numéro de téléphone invalide"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
|
<MalioInputPhone
|
|
model-value="+33 6 12 34 56 78"
|
|
label="Téléphone"
|
|
success="Numéro valide"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4 md:col-span-2">
|
|
<h2 class="mb-4 text-xl font-bold">Cas ERP — liste de téléphones (max 2)</h2>
|
|
<p class="mb-3 text-sm text-m-muted">
|
|
Le bouton + s'affiche sur le dernier champ tant que la liste contient moins de {{ MAX_PHONES }} numéros.
|
|
</p>
|
|
<div class="flex flex-col gap-4">
|
|
<MalioInputPhone
|
|
v-for="(phone, index) in phones"
|
|
:key="index"
|
|
v-model="phones[index]"
|
|
:label="`Téléphone ${index + 1}`"
|
|
:addable="index === phones.length - 1 && phones.length < MAX_PHONES"
|
|
@add="addPhone"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const phoneValue = ref('')
|
|
const phoneAddable = ref('')
|
|
const phoneFrench = ref('')
|
|
const addClicks = ref(0)
|
|
|
|
const onAdd = () => {
|
|
addClicks.value++
|
|
}
|
|
|
|
const MAX_PHONES = 2
|
|
const phones = ref<string[]>([''])
|
|
|
|
const addPhone = () => {
|
|
if (phones.value.length < MAX_PHONES) {
|
|
phones.value.push('')
|
|
}
|
|
}
|
|
</script>
|