Merge branch 'feat/333-creation-text-input' into feat/335-ajout-package-histoire
This commit is contained in:
173
.playground/pages/composant/inputText.vue
Normal file
173
.playground/pages/composant/inputText.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<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>
|
||||
<MalioInputText v-model="simpleValue"/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioInputText
|
||||
v-model="nameValue"
|
||||
label="Nom d'utilisateur"
|
||||
name="username"
|
||||
autocomplete="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône</h2>
|
||||
<MalioInputText
|
||||
v-model="searchValue"
|
||||
label="Recherche"
|
||||
icon-name="mdi:magnify"
|
||||
icon-size="20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputText
|
||||
model-value="Valeur verrouillée"
|
||||
disabled
|
||||
label="Champ désactivé"
|
||||
/>
|
||||
<MalioInputText
|
||||
disabled
|
||||
label="Champ désactivé"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputText
|
||||
model-value="Lecture seule"
|
||||
readonly
|
||||
label="Champ readonly"
|
||||
/>
|
||||
</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">Erreur + icône</h2>
|
||||
<MalioInputText
|
||||
model-value="ab"
|
||||
label="Code promo"
|
||||
icon-name="mdi:alert-circle-outline"
|
||||
icon-size="20"
|
||||
error="Le code est invalide"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès + icône</h2>
|
||||
<MalioInputText
|
||||
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">Readonly + icône</h2>
|
||||
<MalioInputText
|
||||
model-value="Commande #A-2048"
|
||||
label="Référence"
|
||||
readonly
|
||||
icon-name="mdi:lock-outline"
|
||||
icon-size="20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé + icône</h2>
|
||||
<MalioInputText
|
||||
model-value="Compte indisponible"
|
||||
label="Compte"
|
||||
disabled
|
||||
icon-name="mdi:account-off-outline"
|
||||
icon-size="20"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec masque</h2>
|
||||
<MalioInputText
|
||||
label="Plaque d'immatriculation"
|
||||
: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>
|
||||
|
||||
<script setup lang="ts">
|
||||
const simpleValue = ref('')
|
||||
const nameValue = ref('')
|
||||
const searchValue = 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: '@@-###-@@',
|
||||
tokens: {
|
||||
'@': {
|
||||
pattern: /[A-Za-z]/,
|
||||
transform: (char: string) => char.toUpperCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,11 +1,107 @@
|
||||
<template>
|
||||
<div class="p-6 space-y-4">
|
||||
<MalioInput v-model="v" label="Email" placeholder="you@example.com" />
|
||||
<pre class="text-xs">{{ v }}</pre>
|
||||
<div class="flex min-h-screen">
|
||||
<aside class="w-72 bg-m-bg p-6 text-white">
|
||||
<button
|
||||
type="button"
|
||||
class="text-xl text-black font-semibold"
|
||||
@click="clearSelection"
|
||||
>
|
||||
Liste des composants
|
||||
</button>
|
||||
|
||||
<nav class="mt-6 flex flex-col gap-2">
|
||||
<button
|
||||
v-for="item in items"
|
||||
:key="item.name"
|
||||
type="button"
|
||||
class="rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary hover:text-white"
|
||||
:class="selectedName === item.name ? 'bg-m-secondary text-white ' : ''"
|
||||
@click="selectOrToggle(item.name)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 p-6">
|
||||
<component
|
||||
:is="selectedDemoComponent"
|
||||
v-if="selectedDemoComponent"
|
||||
/>
|
||||
<p
|
||||
v-else-if="selectedName"
|
||||
class="text-gray-700"
|
||||
>
|
||||
Page de demo introuvable: <code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
|
||||
</p>
|
||||
<div v-else>
|
||||
<h1 class="text-2xl font-semibold text-gray-900">Playground composants</h1>
|
||||
<p class="mt-2 text-gray-600">
|
||||
Selectionne un composant dans la liste pour afficher sa page de demo.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const v = ref('')
|
||||
</script>
|
||||
type LoadedModule = {
|
||||
default: unknown
|
||||
}
|
||||
|
||||
type Item = {
|
||||
name: string
|
||||
label: string
|
||||
demoComponent?: unknown
|
||||
}
|
||||
|
||||
const componentModules = import.meta.glob('../../app/components/malio/*.vue', { eager: true }) as Record<string, LoadedModule>
|
||||
const demoModules = import.meta.glob('./composant/*.vue', { eager: true }) as Record<string, LoadedModule>
|
||||
|
||||
const demoByName = Object.fromEntries(
|
||||
Object.entries(demoModules).map(([file, mod]) => {
|
||||
const name = file.split('/').pop()?.replace('.vue', '') ?? ''
|
||||
return [name.toLowerCase(), mod.default]
|
||||
}),
|
||||
)
|
||||
|
||||
const items = computed(() =>
|
||||
Object.entries(componentModules).map(([file]) => {
|
||||
const name = file.split('/').pop()?.replace('.vue', '') ?? ''
|
||||
|
||||
return {
|
||||
name,
|
||||
label: name,
|
||||
demoComponent: demoByName[name.toLowerCase()],
|
||||
}
|
||||
}) as Item[],
|
||||
)
|
||||
|
||||
const selectedName = ref('')
|
||||
const hasInitializedSelection = ref(false)
|
||||
|
||||
watchEffect(() => {
|
||||
if (!hasInitializedSelection.value && items.value.length > 0) {
|
||||
selectedName.value = items.value[0].name
|
||||
hasInitializedSelection.value = true
|
||||
}
|
||||
})
|
||||
|
||||
function selectOrToggle(name: string) {
|
||||
selectedName.value = selectedName.value === name ? '' : name
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
selectedName.value = ''
|
||||
}
|
||||
|
||||
const selectedDemoComponent = computed(() =>
|
||||
items.value.find((item) => item.name === selectedName.value)?.demoComponent,
|
||||
)
|
||||
|
||||
const selectedDemoFileName = computed(() => {
|
||||
const name = selectedName.value
|
||||
if (!name) return ''
|
||||
return name.charAt(0).toLowerCase() + name.slice(1)
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user