[#335] Ajouter le package Histoire #2
183
.playground/pages/composant/inputText.vue
Normal file
183
.playground/pages/composant/inputText.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<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/>
|
||||
</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 à droite</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">Avec icône à gauche</h2>
|
||||
<MalioInputText
|
||||
label="Recherche"
|
||||
icon-name="mdi:magnify"
|
||||
icon-size="20"
|
||||
icon-position="left"
|
||||
/>
|
||||
</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">
|
||||
import { computed, ref } from 'vue'
|
||||
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>
|
||||
104
.playground/pages/composant/inputTextArea.vue
Normal file
104
.playground/pages/composant/inputTextArea.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 p-4 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputTextArea/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label + hint</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="hintValue"
|
||||
label="Description"
|
||||
hint="Ajoutez un contexte clair"
|
||||
:size="4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="iconValue"
|
||||
label="Commentaire"
|
||||
icon-name="mdi:comment-text-outline"
|
||||
:size="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur / Succès</h2>
|
||||
<div class="space-y-4">
|
||||
<MalioInputTextArea
|
||||
v-model="errorValue"
|
||||
label="Message"
|
||||
error="Le message est trop court"
|
||||
:size="3"
|
||||
/>
|
||||
<MalioInputTextArea
|
||||
v-model="successValue"
|
||||
label="Message"
|
||||
success="Message valide"
|
||||
:size="3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly / Disabled</h2>
|
||||
<div class="space-y-4">
|
||||
<MalioInputTextArea
|
||||
model-value="Contenu en lecture seule"
|
||||
label="Readonly"
|
||||
readonly
|
||||
:size="3"
|
||||
/>
|
||||
<MalioInputTextArea
|
||||
model-value="Champ indisponible"
|
||||
label="Disabled"
|
||||
disabled
|
||||
:size="3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Resize avec limites</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="resizeValue"
|
||||
label="Notes"
|
||||
resize="both"
|
||||
:size="4"
|
||||
:min-resize-width="300"
|
||||
:max-resize-width="700"
|
||||
:min-resize-height="120"
|
||||
:max-resize-height="280"
|
||||
hint="Resize limite en largeur et hauteur"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Compteur (interne au composant)</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="counterValue"
|
||||
label="Message"
|
||||
:size="5"
|
||||
:max-length="120"
|
||||
:show-counter="true"
|
||||
hint="Le compteur est en bas a gauche"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputTextArea from '../../../app/components/malio/InputTextArea.vue'
|
||||
|
||||
const hintValue = ref('')
|
||||
const iconValue = ref('')
|
||||
const errorValue = ref('abc')
|
||||
const successValue = ref('Contenu ok')
|
||||
const resizeValue = ref('Vous pouvez redimensionner ce champ.')
|
||||
const counterValue = ref('')
|
||||
|
||||
</script>
|
||||
@@ -1,11 +1,128 @@
|
||||
<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>
|
||||
import { computed, ref, watch, shallowRef } from 'vue'
|
||||
|
||||
type LoadedModule = {
|
||||
default: unknown
|
||||
}
|
||||
|
||||
type Item = {
|
||||
name: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const componentModules = import.meta.glob('../../app/components/malio/*.vue')
|
||||
const demoModules = import.meta.glob('./composant/*.vue')
|
||||
|
||||
const demoByName: Record<string, () => Promise<LoadedModule>> =
|
||||
Object.fromEntries(
|
||||
Object.entries(demoModules).map(([file, loader]) => {
|
||||
const name = file.split('/').pop()?.replace('.vue', '') ?? ''
|
||||
return [name.toLowerCase(), loader as () => Promise<LoadedModule>]
|
||||
}),
|
||||
)
|
||||
|
||||
const items = computed<Item[]>(() =>
|
||||
Object.keys(componentModules).map((file) => {
|
||||
const name = file.split('/').pop()?.replace('.vue', '') ?? ''
|
||||
return {
|
||||
name,
|
||||
label: name,
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
const selectedName = ref('')
|
||||
const hasInitializedSelection = ref(false)
|
||||
|
||||
watch(
|
||||
items,
|
||||
(val) => {
|
||||
if (!hasInitializedSelection.value && val.length > 0) {
|
||||
selectedName.value = val[0].name
|
||||
hasInitializedSelection.value = true
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function selectOrToggle(name: string) {
|
||||
selectedName.value = selectedName.value === name ? '' : name
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
selectedName.value = ''
|
||||
}
|
||||
|
||||
const selectedDemoComponent = shallowRef<unknown>(null)
|
||||
|
||||
watch(selectedName, async (name) => {
|
||||
if (!name) {
|
||||
selectedDemoComponent.value = null
|
||||
return
|
||||
}
|
||||
|
||||
const loader = demoByName[name.toLowerCase()]
|
||||
if (!loader) {
|
||||
selectedDemoComponent.value = null
|
||||
return
|
||||
}
|
||||
|
||||
const mod = await loader()
|
||||
selectedDemoComponent.value = mod.default
|
||||
})
|
||||
|
||||
const selectedDemoFileName = computed(() => {
|
||||
const name = selectedName.value
|
||||
if (!name) return ''
|
||||
return name.charAt(0).toLowerCase() + name.slice(1)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -6,6 +6,7 @@ Liste des évolutions de la librairie Malio layer UI
|
||||
### Parameters
|
||||
|
||||
### Added
|
||||
* [#333] Création d'un composant text
|
||||
|
||||
### Changed
|
||||
|
||||
|
||||
19
app/assets/css/malio.css
Normal file
19
app/assets/css/malio.css
Normal file
@@ -0,0 +1,19 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Couleurs en RGB “space separated” pour Tailwind */
|
||||
--m-primary: 34 39 131; /* Couleur principal*/
|
||||
--m-secondary: 48 73 152; /* Couleur secondaire */
|
||||
--m-tertiary: 243 244 248; /* Couleur tertiaire (background) */
|
||||
--m-border: 203 213 225; /* Couleur des bordures */
|
||||
--m-text: 15 23 42; /* Couleur du texte */
|
||||
--m-muted: 100 116 139; /* Couleur pour les éléments désactivés ou secondaires */
|
||||
--m-bg: 243 244 248; /* Couleur de fond générale */
|
||||
|
||||
--m-error: 155 17 30; /* rouge pour les erreurs */
|
||||
--m-success: 15 149 70; /* vert pour les succès */
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,319 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Input from './Input.vue'
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {config, mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import Input from './InputText.vue'
|
||||
|
||||
|
||||
type InputProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
textSize?: string
|
||||
labelClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}
|
||||
|
||||
const InputForTest = Input as DefineComponent<InputProps>
|
||||
const iconStub = {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
}
|
||||
config.global.stubs = {
|
||||
...(config.global.stubs ?? {}),
|
||||
Icon: iconStub,
|
||||
}
|
||||
|
||||
describe('MalioInput', () => {
|
||||
it('affiche la valeur initiale', () => {
|
||||
const wrapper = mount(Input, {
|
||||
props: { modelValue: 'hello' },
|
||||
// Props de base: valeur, label, name, id, autocomplete
|
||||
it('renders the initial input value', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {modelValue: 'initialValueTest'},
|
||||
})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('hello')
|
||||
expect(wrapper.get('input').element.value).toBe('initialValueTest')
|
||||
})
|
||||
|
||||
it('emet update:modelValue au changement', async () => {
|
||||
const wrapper = mount(Input, {
|
||||
props: { modelValue: '' },
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {label: 'labelTest'},
|
||||
})
|
||||
expect(wrapper.get('label').text()).toBe('labelTest')
|
||||
})
|
||||
|
||||
it('applies the name attribute', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {name: 'nameTest'},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('name')).toBe('nameTest')
|
||||
})
|
||||
|
||||
it('uses provided id on input and label', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {id: 'custom-id', label: 'Label'},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('id')).toBe('custom-id')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('custom-id')
|
||||
})
|
||||
|
||||
it('applies a different size of rounded', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {rounded: 'rounded-md'},
|
||||
})
|
||||
expect(wrapper.get('input').classes()).toContain('rounded-md')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {label: 'Label'},
|
||||
})
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
expect(inputId).toBeDefined()
|
||||
expect(inputId?.startsWith('malio-input-text-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('applies the autocomplete attribute', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {autocomplete: 'autocompleteTest'},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('autocompleteTest')
|
||||
})
|
||||
|
||||
// États HTML: required, readonly, disabled
|
||||
it('does not set required when false', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {required: false},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('required')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets required when true', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {required: true},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('required')).toBeDefined()
|
||||
})
|
||||
|
||||
it('does not set readonly when false', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {readonly: false},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets readonly when true', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {readonly: true},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('does not set disabled and keeps text cursor when false', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {disabled: false},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeUndefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-text')
|
||||
})
|
||||
|
||||
it('sets disabled styles when true', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {disabled: true},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
expect(wrapper.get('input').classes()).toContain('text-black/60')
|
||||
})
|
||||
|
||||
// Émission d'événements
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {modelValue: ''},
|
||||
})
|
||||
await wrapper.get('input').setValue('new value')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
|
||||
})
|
||||
|
||||
// Contraintes et classes de texte
|
||||
it('applies maxLength to input', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {maxLength: 25},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('maxlength')).toBe('25')
|
||||
})
|
||||
|
||||
it('applies minLength to input', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {minLength: 25},
|
||||
})
|
||||
expect(wrapper.get('input').attributes('minlength')).toBe('25')
|
||||
})
|
||||
|
||||
it('applies textSize class on label', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {label: 'Label', textLabel: 'text-sm'},
|
||||
})
|
||||
expect(wrapper.get('label').classes()).toContain('text-sm')
|
||||
})
|
||||
|
||||
// États visuels: erreur et succès
|
||||
it('shows error message without label and icon', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {error: 'Error message test'},
|
||||
})
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-error')
|
||||
})
|
||||
|
||||
it('shows error message with label and without icon', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {error: 'Error message test', label: 'Error message'},
|
||||
})
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-error')
|
||||
|
||||
})
|
||||
|
||||
it('shows error message with label and icon', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {error: 'Error message test', label: 'Error message', iconName: 'mdi:key-outline'},
|
||||
})
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-error')
|
||||
|
||||
})
|
||||
|
||||
it('shows error message with icon and without label', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {error: 'Error message test', iconName: 'mdi:key-outline'},
|
||||
})
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
|
||||
})
|
||||
|
||||
it('shows success message without label and icon', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {success: 'Success message test'},
|
||||
})
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows success message with label and without icon', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {success: 'Success message test', label: 'Success message'},
|
||||
})
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows success message with label and icon', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {success: 'Success message test', label: 'Success message', iconName: 'mdi:key-outline'},
|
||||
})
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows success message with icon and without label', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {success: 'Success message test', iconName: 'mdi:key-outline'},
|
||||
})
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('prioritizes error over success when both are provided', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {
|
||||
error: 'Error message test',
|
||||
success: 'Success message test',
|
||||
},
|
||||
})
|
||||
expect(wrapper.find('p.text-m-error').exists()).toBe(true)
|
||||
expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
|
||||
expect(wrapper.find('p.text-m-success').exists()).toBe(false)
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-error')
|
||||
expect(wrapper.get('input').classes()).not.toContain('border-m-success')
|
||||
})
|
||||
|
||||
// Aide et classes de label
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {hint: 'Hint message test'},
|
||||
})
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Hint message test')
|
||||
})
|
||||
|
||||
it('applies labelClass on label', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {label: 'Label', textLabel: 'text-red-500'},
|
||||
})
|
||||
expect(wrapper.get('label').classes()).toContain('text-red-500')
|
||||
})
|
||||
|
||||
it('does not render label when label prop is missing', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {labelClass: 'text-red-500'},
|
||||
})
|
||||
|
||||
expect(wrapper.find('label').exists()).toBe(false)
|
||||
})
|
||||
|
||||
// Icône : rendu et options
|
||||
it('renders icon with default positioning and muted color', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {iconName: 'mdi:key-outline'},
|
||||
})
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('pointer-events-none')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('absolute')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('top-1/2')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('-translate-y-1/2')
|
||||
})
|
||||
|
||||
it('passes icon size prop to icon component', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {iconName: 'mdi:key-outline', iconSize: '24'},
|
||||
})
|
||||
expect(wrapper.get('[data-test="icon"]').attributes('height')).toBe('24')
|
||||
})
|
||||
|
||||
it('applies icon color class', () => {
|
||||
const wrapper = mount(InputForTest, {
|
||||
props: {iconName: 'mdi:key-outline', iconColor: 'text-m-primary'},
|
||||
})
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div class="space-y-1">
|
||||
<label v-if="label" :for="id" class="text-sm font-medium text-gray-700">{{ label }}</label>
|
||||
<input
|
||||
:id="id"
|
||||
:value="props.modelValue"
|
||||
:type="props.type"
|
||||
:placeholder="props.placeholder"
|
||||
class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-gray-500"
|
||||
@input="onInput"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue?: string
|
||||
type?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
id?: string
|
||||
}>(), {
|
||||
modelValue: '',
|
||||
type: 'text',
|
||||
label: '',
|
||||
placeholder: '',
|
||||
id: undefined,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
function onInput(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
</script>
|
||||
221
app/components/malio/InputText.vue
Normal file
221
app/components/malio/InputText.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative mt-4 flex h-12 w-full items-center"
|
||||
:class="[minWidth, maxWidth]"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
v-maska="mask"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 "
|
||||
:class="[
|
||||
disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
||||
hasError
|
||||
? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
|
||||
: hasSuccess
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'border-m-muted focus:border-m-primary',
|
||||
textInput,
|
||||
iconInputPaddingClass,
|
||||
focusPaddingClass,
|
||||
rounded,
|
||||
]"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:minlength="minLength"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
class="floating-label absolute top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
|
||||
:class="[
|
||||
labelPositionClass,
|
||||
shouldFloatLabel ? '-translate-y-[1.15rem] scale-90' : '',
|
||||
disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
||||
textLabel,
|
||||
]"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError ? 'text-m-error' : hasSuccess ? 'text-m-success' : '',
|
||||
iconPositionClass,
|
||||
iconColor,
|
||||
]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import type {MaskInputOptions} from 'maska'
|
||||
import {vMaska} from 'maska/vue'
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
|
||||
defineOptions({name: 'MalioInputText', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
minWidth?: string
|
||||
maxWidth?: string
|
||||
textInput?: string
|
||||
textLabel?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
rounded?: string
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
mask?: string | MaskInputOptions
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
iconName: '',
|
||||
iconPosition: 'right',
|
||||
label: '',
|
||||
minWidth: 'w-96',
|
||||
maxWidth: '',
|
||||
textInput: 'text-lg',
|
||||
required: false,
|
||||
maxLength: undefined,
|
||||
minLength: undefined,
|
||||
readonly: false,
|
||||
textLabel: 'text-sm',
|
||||
disabled: false,
|
||||
rounded: 'rounded-md',
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
mask: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
const ids: string[] = []
|
||||
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
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
if (!props.iconName) return ''
|
||||
return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3'
|
||||
})
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-8'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
const focusPaddingClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
||||
return 'focus:pl-[11px]'
|
||||
})
|
||||
|
||||
const iconPositionClass = computed(() => {
|
||||
const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
|
||||
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height { transition: none; }
|
||||
}
|
||||
</style>
|
||||
185
app/components/malio/InputTextArea.vue
Normal file
185
app/components/malio/InputTextArea.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative mt-4 w-full"
|
||||
>
|
||||
<textarea
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
|
||||
:autocomplete="autocomplete"
|
||||
class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 overflow-auto"
|
||||
:class="[
|
||||
disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
|
||||
hasError
|
||||
? 'border-m-error focus:border-m-error focus:pl-[11px]'
|
||||
: hasSuccess
|
||||
? 'border-m-success focus:border-m-success focus:pl-[11px]'
|
||||
: 'border-m-muted focus:border-m-primary focus:pl-[11px]',
|
||||
textInput,
|
||||
showCounterComputed ? 'pb-6' : '',
|
||||
rounded,
|
||||
]"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:rows="rowsCount"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="hasError"
|
||||
:aria-describedby="describedBy"
|
||||
:style="textareaStyle"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
/>
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
|
||||
:class="[
|
||||
shouldFloatLabel ? '-translate-y-[1.15rem] scale-90' : '',
|
||||
disabled ? 'text-black/60' : '',
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
|
||||
textLabel,
|
||||
]"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
<span
|
||||
v-if="showCounterComputed"
|
||||
class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
|
||||
>
|
||||
{{ currentLength }}/{{ maxLength }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="hasError || hasSuccess || hint"
|
||||
class="mt-1 flex items-center justify-between gap-2 text-xs"
|
||||
>
|
||||
<p
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-error'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'ml-[2px]',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
|
||||
defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
size?: number | string
|
||||
textInput?: string
|
||||
textLabel?: string
|
||||
resize?: 'none' | 'both' | 'horizontal' | 'vertical'
|
||||
minResizeWidth?: number
|
||||
maxResizeWidth?: number
|
||||
minResizeHeight?: number
|
||||
maxResizeHeight?: number
|
||||
required?: boolean
|
||||
maxLength?: number
|
||||
showCounter?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
rounded?: string
|
||||
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
size: 2,
|
||||
textInput: 'text-lg',
|
||||
required: false,
|
||||
maxLength: 800,
|
||||
showCounter: false,
|
||||
readonly: false,
|
||||
textLabel: 'text-sm',
|
||||
disabled: false,
|
||||
rounded: 'rounded-md',
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
resize: 'both',
|
||||
minResizeWidth: 280,
|
||||
maxResizeWidth: 640,
|
||||
minResizeHeight: 40,
|
||||
maxResizeHeight: 320,
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-textarea-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const rowsCount = computed(() => Math.max(1, Number(props.size || 3)))
|
||||
const currentLength = computed(() => (currentValue.value ?? '').length)
|
||||
const showCounterComputed = computed(() =>
|
||||
props.showCounter && Number(props.maxLength) > 0
|
||||
)
|
||||
const toCssSize = (value: number | string) => (typeof value === 'number' ? `${value}px` : value)
|
||||
const textareaStyle = computed(() => ({
|
||||
resize: props.resize,
|
||||
minWidth: toCssSize(props.minResizeWidth),
|
||||
maxWidth: toCssSize(props.maxResizeWidth),
|
||||
minHeight: toCssSize(props.minResizeHeight),
|
||||
maxHeight: toCssSize(props.maxResizeHeight),
|
||||
}))
|
||||
|
||||
const describedBy = computed(() =>
|
||||
(hasError.value || hasSuccess.value || !!props.hint) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLTextAreaElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
</style>
|
||||
200
app/story/inputText.story.vue
Normal file
200
app/story/inputText.story.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<Story
|
||||
title="Input/Text"
|
||||
>
|
||||
<MalioInputText/>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputText
|
||||
|
||||
Composant input texte avec masque optionnel (maska), label flottant,
|
||||
états visuels (erreur / succès) et icône configurable.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### id
|
||||
|
||||
- Type: string
|
||||
- Description: Identifiant HTML de l’input.
|
||||
- Comportement: Si non fourni, un id unique est généré
|
||||
automatiquement.
|
||||
|
||||
### label
|
||||
|
||||
- Type: string
|
||||
- Description: Texte affiché comme label flottant.
|
||||
- Comportement: Si absent, aucun label n’est rendu.
|
||||
|
||||
### name
|
||||
|
||||
- Type: string
|
||||
- Description: Attribut name de l’input (utile pour les formulaires).
|
||||
|
||||
### autocomplete
|
||||
|
||||
- Type: string
|
||||
- Description: Active ou configure l’autocomplétion navigateur.
|
||||
- Défaut: vide
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: string | null | undefined
|
||||
- Description: Valeur contrôlée du composant.
|
||||
- Comportement:
|
||||
- Si défini → composant contrôlé (v-model).
|
||||
- Sinon → gestion interne de l’état.
|
||||
|
||||
### mask
|
||||
|
||||
- Type: string | undefined
|
||||
- Description: Masque appliqué via la directive maska.
|
||||
- Comportement: Formate la saisie selon les tokens définis.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### textInput
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées à l’input (taille de texte,
|
||||
etc.).
|
||||
|
||||
### textLabel
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au label.
|
||||
|
||||
### rounded
|
||||
|
||||
- Type: string
|
||||
- Description: Classe Tailwind pour le border-radius.
|
||||
- Défaut: rounded-md
|
||||
|
||||
### minWidth / maxWidth
|
||||
|
||||
- Type: string
|
||||
- Description: Classes utilitaires Tailwind pour contraindre la
|
||||
largeur.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Validation & Contraintes
|
||||
|
||||
### required
|
||||
|
||||
- Type: boolean
|
||||
- Description: Ajoute l’attribut HTML required.
|
||||
|
||||
### maxLength
|
||||
|
||||
- Type: number | string
|
||||
- Description: Longueur maximale autorisée.
|
||||
|
||||
### minLength
|
||||
|
||||
- Type: number | string
|
||||
- Description: Longueur minimale autorisée.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive complètement le champ.
|
||||
|
||||
### readonly
|
||||
|
||||
- Type: boolean
|
||||
- Description: Rend le champ non modifiable mais focusable.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## États & Messages
|
||||
|
||||
### hint
|
||||
|
||||
- Type: string
|
||||
- Description: Message d’aide affiché sous le champ.
|
||||
|
||||
### error
|
||||
|
||||
- Type: string
|
||||
- Description: Message d’erreur.
|
||||
- Effet:
|
||||
- Active l’état visuel erreur.
|
||||
- aria-invalid=true
|
||||
- Prioritaire sur success et hint.
|
||||
|
||||
### success
|
||||
|
||||
- Type: string
|
||||
- Description: Message de succès.
|
||||
- Effet:
|
||||
- Actif uniquement si error est absent.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Icône
|
||||
|
||||
### iconName
|
||||
|
||||
- Type: string
|
||||
- Description: Nom de l’icône (ex: mdi:magnify).
|
||||
|
||||
### iconSize
|
||||
|
||||
- Type: string | number
|
||||
- Description: Taille de l’icône.
|
||||
|
||||
### iconColor
|
||||
|
||||
- Type: string
|
||||
- Description: Couleur de l’icône.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement de validation
|
||||
|
||||
- Aucune validation interne.
|
||||
- Les états sont pilotés uniquement par les props.
|
||||
|
||||
## Priorité visuelle
|
||||
|
||||
1. error
|
||||
2. success
|
||||
3. neutre
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Tokens de masque
|
||||
|
||||
- \# : chiffre
|
||||
- A : lettre majuscule
|
||||
- a : lettre minuscule
|
||||
- \* : chiffre ou lettre
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- aria-invalid est activé si error existe.
|
||||
- aria-describedby référence dynamiquement le message affiché.
|
||||
- Fonctionne avec ou sans v-model.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque modification de l’input.
|
||||
- Permet l’utilisation avec v-model.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MalioInputText from '../components/malio/InputText.vue'
|
||||
</script>
|
||||
192
app/story/inputTextArea.story.vue
Normal file
192
app/story/inputTextArea.story.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<Story
|
||||
title="Input/TextArea"
|
||||
>
|
||||
<MalioInputTextArea/>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputTextArea
|
||||
|
||||
Composant textarea avec label flottant, états visuels (erreur / succès),
|
||||
gestion du redimensionnement et compteur optionnel.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### id
|
||||
|
||||
- Type: string
|
||||
- Description: Identifiant HTML du textarea.
|
||||
- Comportement: Si non fourni, un id unique est généré
|
||||
automatiquement.
|
||||
|
||||
### label
|
||||
|
||||
- Type: string
|
||||
- Description: Texte affiché comme label flottant.
|
||||
- Comportement: Si absent, aucun label n’est rendu.
|
||||
|
||||
### name
|
||||
|
||||
- Type: string
|
||||
- Description: Attribut name du textarea (utile pour les formulaires).
|
||||
|
||||
### autocomplete
|
||||
|
||||
- Type: string
|
||||
- Description: Active ou configure l’autocomplétion navigateur.
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: string | null | undefined
|
||||
- Description: Valeur contrôlée du composant.
|
||||
- Comportement:
|
||||
- Si défini → composant contrôlé (v-model).
|
||||
- Sinon → gestion interne de l’état.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### textInput
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au textarea (taille de texte,
|
||||
etc.).
|
||||
- Défaut: text-lg
|
||||
|
||||
### textLabel
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au label.
|
||||
- Défaut: text-sm
|
||||
|
||||
### rounded
|
||||
|
||||
- Type: string
|
||||
- Description: Classe Tailwind pour le border-radius.
|
||||
- Défaut: rounded-md
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Dimensions
|
||||
|
||||
### size
|
||||
|
||||
- Type: number | string
|
||||
- Description: Nombre de lignes initiales (rows).
|
||||
- Défaut: 2
|
||||
|
||||
### minResizeWidth / maxResizeWidth
|
||||
|
||||
- Type: number | string
|
||||
- Description: Largeur minimale / maximale autorisée lors du
|
||||
redimensionnement.
|
||||
|
||||
### minResizeHeight / maxResizeHeight
|
||||
|
||||
- Type: number | string
|
||||
- Description: Hauteur minimale / maximale autorisée lors du
|
||||
redimensionnement.
|
||||
|
||||
### resize
|
||||
- Type: 'none' | 'both' | 'horizontal' | 'vertical'
|
||||
- Description: Définit le comportement de redimensionnement CSS.
|
||||
- Défaut: both
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Validation & États
|
||||
|
||||
### required
|
||||
|
||||
- Type: boolean
|
||||
- Description: Ajoute l’attribut HTML required.
|
||||
|
||||
### maxLength
|
||||
|
||||
- Type: number | string
|
||||
- Description: Longueur maximale autorisée.
|
||||
- Effet: Limite la saisie et alimente le compteur.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive complètement le champ.
|
||||
|
||||
### readonly
|
||||
|
||||
- Type: boolean
|
||||
- Description: Rend le champ non modifiable mais focusable.
|
||||
|
||||
### hint
|
||||
|
||||
- Type: string
|
||||
- Description: Message d’aide affiché sous le champ.
|
||||
|
||||
### error
|
||||
|
||||
- Type: string
|
||||
- Description: Message d’erreur.
|
||||
- Effet:
|
||||
- Active l’état visuel erreur.
|
||||
- aria-invalid=true
|
||||
- Prioritaire sur success et hint.
|
||||
|
||||
### success
|
||||
|
||||
- Type: string
|
||||
- Description: Message de succès.
|
||||
- Effet:
|
||||
- Actif uniquement si error est absent.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Compteur
|
||||
|
||||
### showCounter
|
||||
|
||||
- Type: boolean
|
||||
- Description: Affiche le compteur x / maxLength.
|
||||
- Condition:
|
||||
- showCounter = true
|
||||
- maxLength défini et > 0
|
||||
- Position: Bas gauche du textarea.
|
||||
- Mise à jour: Dynamique à chaque saisie.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Priorité d’affichage
|
||||
|
||||
### Messages
|
||||
|
||||
1. error
|
||||
2. success
|
||||
3. hint
|
||||
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- aria-invalid est activé si error existe.
|
||||
- aria-describedby référence le message affiché.
|
||||
- Fonctionne avec ou sans v-model.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque modification du textarea.
|
||||
- Permet l’utilisation avec v-model.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MalioInputTextArea from '../components/malio/InputTextArea.vue'
|
||||
</script>
|
||||
24
histoire.config.ts
Normal file
24
histoire.config.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { defineConfig } from 'histoire'
|
||||
import { HstVue } from '@histoire/plugin-vue'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import tailwindcss from 'tailwindcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
import path from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
setupFile: './histoire.setup.ts',
|
||||
vite: {
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './'),
|
||||
},
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwindcss(), autoprefixer()],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [HstVue()],
|
||||
})
|
||||
4
histoire.setup.ts
Normal file
4
histoire.setup.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import './app/assets/css/malio.css'
|
||||
|
||||
export function setupVue3() {}
|
||||
export function setupVanilla() {}
|
||||
3
makefile
3
makefile
@@ -8,6 +8,9 @@ install:
|
||||
dev:
|
||||
npm run dev
|
||||
|
||||
dev-histoire:
|
||||
npm run story:dev
|
||||
|
||||
dev-prepare:
|
||||
npm run dev:prepare
|
||||
|
||||
|
||||
@@ -1,9 +1,34 @@
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { dirname, join } from 'node:path'
|
||||
|
||||
const currentDir = dirname(fileURLToPath(import.meta.url))
|
||||
const dir = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxtjs/tailwindcss'],
|
||||
css: [join(currentDir, './app/assets/css/tailwind.css')],
|
||||
modules: ['@nuxtjs/tailwindcss','@nuxt/icon'],
|
||||
css: [join(dir, 'app/assets/css/malio.css')],
|
||||
|
||||
tailwindcss: {
|
||||
config: {
|
||||
theme: {
|
||||
extend: {
|
||||
borderRadius: {
|
||||
malio: 'var(--m-radius)',
|
||||
},
|
||||
colors: {
|
||||
m: {
|
||||
primary: 'rgb(var(--m-primary) / <alpha-value>)',
|
||||
secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
|
||||
tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
|
||||
border: 'rgb(var(--m-border) / <alpha-value>)',
|
||||
text: 'rgb(var(--m-text) / <alpha-value>)',
|
||||
muted: 'rgb(var(--m-muted) / <alpha-value>)',
|
||||
bg: 'rgb(var(--m-bg) / <alpha-value>)',
|
||||
error: 'rgb(var(--m-error) / <alpha-value>)',
|
||||
success: 'rgb(var(--m-success) / <alpha-value>)',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
1677
package-lock.json
generated
1677
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
21
package.json
21
package.json
@@ -3,7 +3,11 @@
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"main": "./nuxt.config.ts",
|
||||
"files": ["app/**", "nuxt.config.ts", "README.md"],
|
||||
"files": [
|
||||
"app/**",
|
||||
"nuxt.config.ts",
|
||||
"README.md"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "nuxi dev .playground",
|
||||
"dev:prepare": "nuxt prepare .playground",
|
||||
@@ -11,17 +15,22 @@
|
||||
"generate": "nuxt generate .playground",
|
||||
"preview": "nuxt preview .playground",
|
||||
"lint": "eslint .",
|
||||
"test": "vitest run"
|
||||
"test": "vitest run",
|
||||
"story:dev": "histoire dev",
|
||||
"story:build": "histoire build",
|
||||
"story:preview": "histoire preview"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"nuxt": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@histoire/plugin-vue": "^1.0.0-beta.1",
|
||||
"@nuxt/eslint": "latest",
|
||||
"@types/node": "^24.10.13",
|
||||
"@vitejs/plugin-vue": "^6.0.4",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"eslint": "^10.0.0",
|
||||
"histoire": "^1.0.0-beta.1",
|
||||
"jsdom": "^27.0.1",
|
||||
"nuxt": "^4.3.1",
|
||||
"typescript": "^5.9.3",
|
||||
@@ -29,6 +38,8 @@
|
||||
"vue": "latest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.14.0"
|
||||
"@nuxt/icon": "^2.2.1",
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
"maska": "^3.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
26
pre-commit
26
pre-commit
@@ -3,23 +3,14 @@ set -e
|
||||
|
||||
echo "######### Pre-commit hook start #############"
|
||||
|
||||
if ! command -v npm >/dev/null 2>&1; then
|
||||
if [ -f ".nvmrc" ]; then
|
||||
NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
|
||||
NVM_VERSION="${NVM_VERSION#v}"
|
||||
NPM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
|
||||
if [ -x "$NPM_BIN/npm" ]; then
|
||||
PATH="$NPM_BIN:$PATH"
|
||||
export PATH
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
|
||||
if ! command -v npm >/dev/null 2>&1; then
|
||||
if [ -s "$HOME/.nvm/nvm.sh" ]; then
|
||||
# shellcheck disable=SC1090
|
||||
. "$HOME/.nvm/nvm.sh"
|
||||
nvm use >/dev/null 2>&1 || true
|
||||
# Prefer the exact Node version from .nvmrc for hooks (IDE + CLI consistency).
|
||||
if [ -f ".nvmrc" ]; then
|
||||
NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
|
||||
NVM_VERSION="${NVM_VERSION#v}"
|
||||
NVM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
|
||||
if [ -x "$NVM_BIN/node" ] && [ -x "$NVM_BIN/npm" ]; then
|
||||
PATH="$NVM_BIN:$PATH"
|
||||
export PATH
|
||||
fi
|
||||
fi
|
||||
|
||||
@@ -28,6 +19,7 @@ if ! command -v npm >/dev/null 2>&1; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "Node $(node -v) / npm $(npm -v)"
|
||||
echo "--- make pre-commit start ---"
|
||||
make pre-commit
|
||||
echo "--- make pre-commit finished ---"
|
||||
|
||||
38
tailwind.config.ts
Normal file
38
tailwind.config.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import type {Config} from 'tailwindcss'
|
||||
|
||||
export default {
|
||||
content: [
|
||||
'./app/**/*.{vue,js,ts}',
|
||||
'./app/**/*.story.{vue,js,ts}',
|
||||
'./histoire.setup.ts',
|
||||
'./histoire.config.ts',
|
||||
],
|
||||
safelist: [
|
||||
{
|
||||
pattern: /(sm:|md:|lg:|xl:|2xl:)?(text|rounded|w|min-w|max-w)-.+/,
|
||||
},
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
borderRadius: {
|
||||
malio: 'var(--m-radius)',
|
||||
},
|
||||
colors: {
|
||||
m: {
|
||||
primary: 'rgb(var(--m-primary) / <alpha-value>)',
|
||||
secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
|
||||
tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
|
||||
border: 'rgb(var(--m-border) / <alpha-value>)',
|
||||
text: 'rgb(var(--m-text) / <alpha-value>)',
|
||||
muted: 'rgb(var(--m-muted) / <alpha-value>)',
|
||||
bg: 'rgb(var(--m-bg) / <alpha-value>)',
|
||||
error: 'rgb(var(--m-error) / <alpha-value>)',
|
||||
success: 'rgb(var(--m-success) / <alpha-value>)',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Partial<Config>
|
||||
@@ -1,3 +1,21 @@
|
||||
{
|
||||
"extends": "./.playground/.nuxt/tsconfig.json"
|
||||
"extends": "./.playground/.nuxt/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"module": "esnext",
|
||||
"lib": [
|
||||
"esnext"
|
||||
],
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"strict": true,
|
||||
"strictNullChecks": true,
|
||||
"resolveJsonModule": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": [
|
||||
"env.d.ts",
|
||||
"src/**/*",
|
||||
"src/**/*.vue"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user