MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#MUI-30] Création d'un composant email (#44)

Browse Source 
| 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: #44
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #44.
This commit is contained in:
Autin
2026-05-11 08:54:31 +00:00
committed by Autin
parent eb21827686
commit 1ffe63827d
19 changed files with 1000 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.playground/pages/composant/form/client.vue
View File

@@ -23,7 +23,7 @@
<MalioInputText
label="Téléphone"
/>
<MalioInputText
<MalioInputEmail
label="Email"
/>
<MalioSelect
@@ -79,7 +79,7 @@
<MalioInputText
label="Téléphone"
/>
<MalioInputText
<MalioInputEmail
label="Email"
/>
<MalioSelect
@@ -117,9 +117,6 @@
<script setup lang="ts">
import {ref} from "vue";
import MalioSelect from "../../../../app/components/malio/select/Select.vue";
import MalioCheckbox from "../../../../app/components/malio/checkbox/Checkbox.vue";
import MalioButton from "../../../../app/components/malio/button/Button.vue";
const multiselectValue = ref<Array<string | number>>([])
</script>

106
.playground/pages/composant/input/inputEmail.vue Normal file
View File

@@ -0,0 +1,106 @@
<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">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>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const emailValue = ref('')
const dynamicEmail = 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>