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

feat : ajout du masque et de l'etat succes sur le texte

Browse Source
This commit is contained in:
Autin
2026-02-23 11:01:37 +01:00
committed by kevin
parent 9710fd63d7
commit 1013c83018
2 changed files with 64 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
.playground/pages/composant/inputText.vue
View File

@@ -28,9 +28,9 @@
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
<MalioInputText
model-value="Valeur verrouillee"
model-value="Valeur verrouillée"
disabled
label="Champ desactive"
label="Champ désactivé"
/>
</div>
@@ -44,26 +44,14 @@
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Hint,erreur et succes</h2>
<h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
<MalioInputText
v-model="emailValue"
label="Email"
hint="Format attendu: nom@domaine.com"
v-model="cityValue"
label="Ville"
icon-name="mdi:map-marker-outline"
icon-size="20"
hint="Commencez à taper le nom de la ville"
/>
<div class="mt-4">
<MalioInputText
model-value="abc"
label="Code"
error="Le code doit contenir au moins 6 caracteres"
/>
</div>
<div class="mt-4">
<MalioInputText
model-value="abcabc"
label="Code"
success="Le code est valide"
/>
</div>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
@@ -76,26 +64,14 @@
/>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Succes + icône</h2>
<h2 class="mb-4 text-xl font-bold">Succès + icône</h2>
<MalioInputText
label="Email"
success="Adresse valide"
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">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">Readonly + icône</h2>
<MalioInputText
@@ -124,6 +100,40 @@
: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>
@@ -131,8 +141,21 @@
const simpleValue = ref('')
const nameValue = ref('')
const searchValue = ref('')
const emailValue = 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: '@@-###-@@',