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

10
app/components/malio/InputText.vue
View File

@@ -69,7 +69,7 @@
</div>
<p
v-if="hint && !hasError"
v-if="hint && !hasError && !hasSuccess"
:id="`${inputId}-hint`"
class="mt-1 text-xs text-m-muted"
>
@@ -96,7 +96,7 @@
<script setup lang="ts">
import type {MaskInputOptions} from 'maska'
import {vMaska} from 'maska/vue'
import {computed, useAttrs} from 'vue'
import {computed, useAttrs, useId} from 'vue'
defineOptions({inheritAttrs: false})
@@ -158,16 +158,16 @@ const props = withDefaults(
)
const attrs = useAttrs()
const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`
const generatedId = useId()
const inputId = computed(() => props.id?.toString() || generatedId)
const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
const successMessage = computed(() => props.success || props.succes || '')
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!successMessage.value)
const describedBy = computed(() => {
const ids: string[] = []
if (props.hint) ids.push(`${inputId.value}-hint`)
if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
if (hasError.value) ids.push(`${inputId.value}-error`)
if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
return ids.length ? ids.join(' ') : undefined