[#MUI-31] Création d'un composant téléphone (#45)
| 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>
This commit was merged in pull request #45.
This commit is contained in:
@@ -1,122 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-center mt-8">
|
||||
<div>
|
||||
<div class="w-[1348px] grid grid-cols-3 gap-x-[160px] gap-y-8">
|
||||
<MalioInputText
|
||||
label="Nom du client (Entreprise)"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Nom du contact principal"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Prénom du contact principal"
|
||||
/>
|
||||
<MalioSelectCheckbox
|
||||
label="Catégorie"
|
||||
v-model="multiselectValue"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Téléphone"
|
||||
/>
|
||||
<MalioInputEmail
|
||||
label="Email"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
|
||||
{label: 'Distributeur', value: 'Distributeur'},
|
||||
{label: 'Courtier', value: 'Courtier'},
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Nom du courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioCheckbox label="Prestation de triage"/>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<MalioButton label="Valider" variant="primary"/>
|
||||
<div class="flex justify-center mt-16">
|
||||
<div>
|
||||
<div class="w-[1348px] grid grid-cols-3 gap-x-[80px] gap-y-8">
|
||||
<MalioInputText
|
||||
label="Nom du client (Entreprise)"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Nom du contact principal"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Prénom du contact principal"
|
||||
/>
|
||||
<MalioSelectCheckbox
|
||||
v-model="multiselectValue"
|
||||
label="Catégorie"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioInputPhone
|
||||
v-for="(_, index) in phones"
|
||||
:key="index"
|
||||
v-model="phones[index]"
|
||||
label="Téléphone"
|
||||
add-icon-name="mdi:plus"
|
||||
:addable="phones.length === 1"
|
||||
@add="addPhoneInput"
|
||||
/>
|
||||
<MalioInputEmail
|
||||
label="Email"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="distributeur"
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
|
||||
{label: 'Distributeur', value: 'Distributeur'},
|
||||
{label: 'Courtier', value: 'Courtier'},
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="nomCourtier"
|
||||
value=""
|
||||
label="Nom du courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="nomDistributeur"
|
||||
value=""
|
||||
label="Nom du distributeur"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<MalioButton label="Valider" variant="primary"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center mt-16">
|
||||
<div>
|
||||
<div class="w-[1348px] grid grid-cols-3 gap-x-[80px] gap-y-8">
|
||||
<MalioInputText
|
||||
label="Nom du client (Entreprise)"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Nom du contact principal"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Prénom du contact principal"
|
||||
/>
|
||||
<MalioSelectCheckbox
|
||||
label="Catégorie"
|
||||
v-model="multiselectValue"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Téléphone"
|
||||
/>
|
||||
<MalioInputEmail
|
||||
label="Email"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
|
||||
{label: 'Distributeur', value: 'Distributeur'},
|
||||
{label: 'Courtier', value: 'Courtier'},
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Nom du courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioCheckbox label="Prestation de triage"/>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<MalioButton label="Valider" variant="primary"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from "vue";
|
||||
import {ref} from 'vue'
|
||||
|
||||
const multiselectValue = ref<Array<string | number>>([])
|
||||
const distributeur = ref<string>('')
|
||||
const phones = ref<string[]>([''])
|
||||
const nomDistributeur = ref<string>('')
|
||||
const nomCourtier = ref<string>('')
|
||||
|
||||
function addPhoneInput() {
|
||||
phones.value.push('')
|
||||
}
|
||||
</script>
|
||||
|
||||
141
.playground/pages/composant/input/inputPhone.vue
Normal file
141
.playground/pages/composant/input/inputPhone.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user