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

Merged
tristan merged 1 commits from feature/MUI-30-developper-le-composant-email into develop 2026-05-11 08:54:31 +00:00
Conversation 0 Commits 1 Files Changed 19 +1000 -31
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>

1
CHANGELOG.md
View File

@@ -27,6 +27,7 @@ Liste des évolutions de la librairie Malio layer UI
* [#MUI-22] Création d'un composant datatable
* [#MUI-27] Création d'un composant sélection de site
* Création d'un composant rich text (TipTap) avec sortie markdown / HTML
* [#MUI-30] Création d'un composant email
### Changed

36
COMPONENTS.md
View File

@@ -66,6 +66,42 @@ Champ mot de passe avec toggle visibilité.
---
## MalioInputEmail
Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outline` à droite par défaut.
| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `id` | `string` | auto | Identifiant HTML |
| `label` | `string` | `''` | Label du champ |
| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
| `name` | `string` | `''` | Attribut name |
| `autocomplete` | `string` | `'off'` | Autocomplétion (passer `'email'` pour suggérer l'email utilisateur) |
| `disabled` | `boolean` | `false` | Désactive le champ |
| `readonly` | `boolean` | `false` | Lecture seule |
| `required` | `boolean` | `false` | Champ requis |
| `hint` | `string` | `''` | Message d'aide |
| `error` | `string` | `''` | Message d'erreur |
| `success` | `string` | `''` | Message de succès |
| `iconName` | `string` | `'mdi:email-outline'` | Icône Iconify (chaîne vide pour masquer) |
| `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône |
| `iconSize` | `string \| number` | `24` | Taille icône |
| `iconColor` | `string` | `'text-m-muted'` | Classe couleur icône |
| `inputClass` | `string` | `''` | Classes CSS input |
| `labelClass` | `string` | `''` | Classes CSS label |
| `groupClass` | `string` | `''` | Classes CSS conteneur |
**Events :** `update:modelValue(value: string)`
```vue
<MalioInputEmail v-model="email" label="Adresse email" />
<MalioInputEmail v-model="email" label="Email" autocomplete="email" />
<MalioInputEmail v-model="email" label="Email" :icon-name="''" />
<MalioInputEmail v-model="email" label="Email" error="Adresse email invalide" />
```
---
## MalioInputAmount
Champ montant avec icône devise (euro par défaut).

12
app/components/malio/checkbox/Checkbox.test.ts
View File

@@ -139,4 +139,16 @@ describe('MalioCheckbox', () => {
expect(wrapper.get('p').text()).toBe('Valid')
expect(wrapper.get('p').classes()).toContain('text-m-success')
})
it('uses muted label color when unchecked', () => {
const wrapper = mountCheckbox({label: 'Accept terms', modelValue: false})
expect(wrapper.get('label').classes()).toContain('text-m-muted')
})
it('uses black label color when checked', () => {
const wrapper = mountCheckbox({label: 'Accept terms', modelValue: true})
expect(wrapper.get('label').classes()).toContain('text-black')
})
})

9
app/components/malio/checkbox/Checkbox.vue
View File

@@ -108,7 +108,8 @@ const mergedInputClass = computed(() =>
const mergedLabelClass = computed(() =>
twMerge(
'cbx text-black text-lg',
'cbx text-lg',
isChecked.value ? 'text-black' : 'text-m-muted',
disabled.value ? 'cursor-not-allowed text-black/60' : '',
hasError.value ? 'text-m-error' : '',
hasSuccess.value ? 'text-m-success' : '',
@@ -161,10 +162,14 @@ const onChange = (event: Event) => {
height: 18px;
flex: 0 0 18px;
transform: scale(1);
border: 2px solid rgb(0, 0, 0);
border: 2px solid rgb(var(--m-muted) / 1);
transition: all 0.1s ease;
}
.inp-cbx:checked + .cbx span:first-child {
border-color: rgb(0, 0, 0);
}
.cbx span:first-child svg {
position: absolute;
top: 2px;

14
app/components/malio/input/Input.test.ts
View File

@@ -294,4 +294,18 @@ describe('MalioInputText', () => {
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
})
it('shows primary icon color on focus', async () => {
const wrapper = mountInput({iconName: 'mdi:key-outline'})
await wrapper.get('input').trigger('focus')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
})
it('shows black icon color when filled and unfocused', () => {
const wrapper = mountInput({iconName: 'mdi:key-outline', modelValue: 'hello'})
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
})
})

14
app/components/malio/input/InputAmount.test.ts
View File

@@ -160,4 +160,18 @@ describe('MalioInputAmount', () => {
expect(wrapper.get('input').classes()).toContain('!pl-11')
expect(wrapper.get('label').classes()).toContain('left-8')
})
it('shows primary icon color on focus', async () => {
const wrapper = mountInputAmount()
await wrapper.get('input').trigger('focus')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
})
it('shows black icon color when filled and unfocused', () => {
const wrapper = mountInputAmount({modelValue: '12,50'})
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
})
})

17
app/components/malio/input/InputAmount.vue
View File

@@ -39,13 +39,7 @@
:width="iconSize"
:height="iconSize"
data-test="icon"
:class="[
hasError
? 'text-m-danger'
: hasSuccess
? 'text-m-success' : iconColor,
iconPositionClass,
]"
:class="[iconStateClass, iconPositionClass]"
/>
</div>
@@ -235,6 +229,15 @@ const iconPositionClass = computed(() => {
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
})
const iconStateClass = computed(() => {
if (hasError.value) return 'text-m-danger'
if (hasSuccess.value) return 'text-m-success'
if (disabled.value) return props.iconColor
if (isFocused.value) return 'text-m-primary'
if (isFilled.value) return 'text-black'
return props.iconColor
})
</script>
<style scoped>

228
app/components/malio/input/InputEmail.test.ts Normal file
View File

@@ -0,0 +1,228 @@
import {describe, expect, it} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
import InputEmail from './InputEmail.vue'
type InputEmailProps = {
id?: string
label?: string
name?: string
autocomplete?: string
modelValue?: string | null
inputClass?: string
labelClass?: string
groupClass?: string
required?: boolean
disabled?: boolean
readonly?: boolean
hint?: string
error?: string
success?: string
iconName?: string
iconPosition?: 'left' | 'right'
iconSize?: string | number
iconColor?: string
}
const InputEmailForTest = InputEmail as DefineComponent<InputEmailProps>
const mountComponent = (props: InputEmailProps = {}) =>
mount(InputEmailForTest, {
props,
global: {
stubs: {
IconifyIcon: {
template: '<span data-test="icon" v-bind="$attrs" />',
},
},
},
})
describe('MalioInputEmail', () => {
it('renders the initial input value', () => {
const wrapper = mountComponent({modelValue: 'user@example.com'})
expect(wrapper.get('input').element.value).toBe('user@example.com')
})
it('renders the label text', () => {
const wrapper = mountComponent({label: 'Adresse email'})
expect(wrapper.get('label').text()).toBe('Adresse email')
})
it('has type email', () => {
const wrapper = mountComponent()
expect(wrapper.get('input').attributes('type')).toBe('email')
})
it('has inputmode email', () => {
const wrapper = mountComponent()
expect(wrapper.get('input').attributes('inputmode')).toBe('email')
})
it('renders the default email icon', () => {
const wrapper = mountComponent()
const iconComponent = wrapper.findComponent(IconifyIcon)
expect(iconComponent.props('icon')).toBe('mdi:email-outline')
})
it('allows overriding the icon', () => {
const wrapper = mountComponent({iconName: 'mdi:at'})
const iconComponent = wrapper.findComponent(IconifyIcon)
expect(iconComponent.props('icon')).toBe('mdi:at')
})
it('does not render icon when iconName is empty', () => {
const wrapper = mountComponent({iconName: ''})
expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
})
it('places icon on the right by default', () => {
const wrapper = mountComponent()
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
})
it('places icon on the left when iconPosition is left', () => {
const wrapper = mountComponent({iconPosition: 'left'})
expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
})
it('emits update:modelValue on input change', async () => {
const wrapper = mountComponent({modelValue: ''})
await wrapper.get('input').setValue('new@example.com')
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new@example.com'])
})
it('sets disabled styles when true', () => {
const wrapper = mountComponent({disabled: true})
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
})
it('sets readonly when true', () => {
const wrapper = mountComponent({readonly: true})
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
})
it('shows error message and styles', () => {
const wrapper = mountComponent({error: 'Email invalide'})
expect(wrapper.get('p.text-m-danger').text()).toBe('Email invalide')
expect(wrapper.get('input').classes()).toContain('border-m-danger')
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
})
it('shows error style on icon', () => {
const wrapper = mountComponent({error: 'Error'})
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
})
it('shows success message and styles', () => {
const wrapper = mountComponent({success: 'Email valide'})
expect(wrapper.get('p.text-m-success').text()).toBe('Email valide')
expect(wrapper.get('input').classes()).toContain('border-m-success')
})
it('shows success style on icon', () => {
const wrapper = mountComponent({success: 'Success'})
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
})
it('shows default icon color when empty and unfocused', () => {
const wrapper = mountComponent()
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
})
it('shows primary icon color on focus', async () => {
const wrapper = mountComponent()
await wrapper.get('input').trigger('focus')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
})
it('shows black icon color when filled and unfocused', () => {
const wrapper = mountComponent({modelValue: 'user@example.com'})
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
})
it('keeps primary icon color when filled and focused', async () => {
const wrapper = mountComponent({modelValue: 'user@example.com'})
await wrapper.get('input').trigger('focus')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
})
it('keeps default icon color when disabled, even if filled', () => {
const wrapper = mountComponent({modelValue: 'user@example.com', disabled: true})
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
})
it('error overrides focus color on icon', async () => {
const wrapper = mountComponent({error: 'Email invalide'})
await wrapper.get('input').trigger('focus')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
})
it('shows hint message', () => {
const wrapper = mountComponent({hint: 'ex: prenom.nom@malio.fr'})
expect(wrapper.get('p.text-m-muted').text()).toBe('ex: prenom.nom@malio.fr')
})
it('links label to input via for/id', () => {
const wrapper = mountComponent({id: 'email-field', label: 'Email'})
expect(wrapper.get('input').attributes('id')).toBe('email-field')
expect(wrapper.get('label').attributes('for')).toBe('email-field')
})
it('generates an id when missing and reuses it on label', () => {
const wrapper = mountComponent({label: 'Email'})
const inputId = wrapper.get('input').attributes('id')
expect(inputId?.startsWith('malio-input-email-')).toBe(true)
expect(wrapper.get('label').attributes('for')).toBe(inputId)
})
it('aria-invalid is false when no error', () => {
const wrapper = mountComponent()
expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
})
it('uses autocomplete off by default', () => {
const wrapper = mountComponent()
expect(wrapper.get('input').attributes('autocomplete')).toBe('off')
})
it('allows overriding autocomplete', () => {
const wrapper = mountComponent({autocomplete: 'email'})
expect(wrapper.get('input').attributes('autocomplete')).toBe('email')
})
})

229
app/components/malio/input/InputEmail.vue Normal file
View File

@@ -0,0 +1,229 @@
<template>
<div>
<div
:class="mergedGroupClass"
>
<input
:id="inputId"
:name="name"
:autocomplete="autocomplete"
:class="mergedInputClass"
:required="required"
:disabled="disabled"
:value="currentValue"
:readonly="readonly"
:aria-invalid="!!error"
:aria-describedby="describedBy"
v-bind="attrs"
placeholder="_"
type="email"
inputmode="email"
@input="onInput"
@focus="isFocused = true"
@blur="isFocused = false"
>
<label
v-if="label"
:for="inputId"
:class="mergedLabelClass"
>
{{ label }}
</label>
<IconifyIcon
v-if="iconName"
:icon="iconName"
:width="iconSize"
:height="iconSize"
data-test="icon"
:class="[iconStateClass, iconPositionClass]"
/>
</div>
<p
v-if="hint || hasError || hasSuccess"
:id="`${inputId}-describedby`"
:class="[
hasError
? 'text-m-danger'
: hasSuccess
? 'text-m-success'
: 'text-m-muted',
'mt-1 text-xs ml-[2px] ',
]"
>
{{ hint || error || success }}
</p>
</div>
</template>
<script setup lang="ts">
import {computed, ref, useAttrs, useId} from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
import {twMerge} from 'tailwind-merge'
defineOptions({name: 'MalioInputEmail', inheritAttrs: false})
const props = withDefaults(
defineProps<{
id?: string
label?: string
name?: string
autocomplete?: string
modelValue?: string | null | undefined
inputClass?: string
labelClass?: string
groupClass?: string
required?: boolean
disabled?: boolean
readonly?: boolean
hint?: string
error?: string
success?: string
iconName?: string
iconPosition?: 'left' | 'right'
iconSize?: string | number
iconColor?: string
}>(),
{
id: '',
name: '',
autocomplete: 'off',
modelValue: undefined,
iconName: 'mdi:email-outline',
iconPosition: 'right',
label: '',
inputClass: '',
labelClass: '',
groupClass: '',
required: false,
readonly: false,
disabled: false,
hint: '',
error: '',
success: '',
iconSize: 24,
iconColor: 'text-m-muted',
},
)
const attrs = useAttrs()
const generatedId = useId()
const localValue = ref('')
const isFocused = ref(false)
const inputId = computed(() => props.id?.toString() || `malio-input-email-${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 isFilled = computed(() => currentValue.value.trim().length > 0)
const mergedGroupClass = computed(() =>
twMerge(
'relative flex h-12 w-full items-center',
props.groupClass,
),
)
const mergedInputClass = computed(() =>
twMerge(
'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 text-lg rounded-md',
isFilled.value ? 'border-black' : 'border-m-muted',
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
hasError.value
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
: hasSuccess.value
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
: 'focus:border-m-primary',
props.inputClass,
iconInputPaddingClass.value,
focusPaddingClass.value,
),
)
const mergedLabelClass = computed(() =>
twMerge(
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
labelPositionClass.value,
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
hasError.value
? 'text-m-danger'
: hasSuccess.value
? 'text-m-success'
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
props.labelClass,
),
)
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 !pr-10'
})
const disabled = computed(() => props.disabled)
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-[10px]' : 'right-[10px]'
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
})
const iconStateClass = computed(() => {
if (hasError.value) return 'text-m-danger'
if (hasSuccess.value) return 'text-m-success'
if (disabled.value) return props.iconColor
if (isFocused.value) return 'text-m-primary'
if (isFilled.value) return 'text-black'
return props.iconColor
})
</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>

14
app/components/malio/input/InputPassword.test.ts
View File

@@ -171,4 +171,18 @@ describe('MalioInputPassword', () => {
expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
})
it('shows primary icon color on focus', async () => {
const wrapper = mountComponent()
await wrapper.get('input').trigger('focus')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
})
it('shows black icon color when filled and unfocused', () => {
const wrapper = mountComponent({modelValue: 'secret'})
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
})
})

14
app/components/malio/input/InputPassword.vue
View File

@@ -39,10 +39,7 @@
:height="24"
data-test="icon"
:class="[
hasError
? 'text-m-danger'
: hasSuccess
? 'text-m-success' : 'text-m-muted',
iconStateClass,
'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
]"
@click="toggleVisibility"
@@ -189,6 +186,15 @@ const onInput = (event: Event) => {
}
const disabled = computed(() => props.disabled)
const iconStateClass = computed(() => {
if (hasError.value) return 'text-m-danger'
if (hasSuccess.value) return 'text-m-success'
if (disabled.value) return 'text-m-muted'
if (isFocused.value) return 'text-m-primary'
if (isFilled.value) return 'text-black'
return 'text-m-muted'
})
</script>
<style scoped>

17
app/components/malio/input/InputText.vue
View File

@@ -39,13 +39,7 @@
:width="iconSize"
:height="iconSize"
data-test="icon"
:class="[
hasError
? 'text-m-danger'
: hasSuccess
? 'text-m-success' : iconColor,
iconPositionClass,
]"
:class="[iconStateClass, iconPositionClass]"
/>
</div>
@@ -215,6 +209,15 @@ const iconPositionClass = computed(() => {
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
})
const iconStateClass = computed(() => {
if (hasError.value) return 'text-m-danger'
if (hasSuccess.value) return 'text-m-success'
if (disabled.value) return props.iconColor
if (isFocused.value) return 'text-m-primary'
if (isFilled.value) return 'text-black'
return props.iconColor
})
</script>
<style scoped>

14
app/components/malio/input/InputUpload.test.ts
View File

@@ -172,4 +172,18 @@ describe('MalioInputUpload', () => {
expect(wrapper.get('input[type="file"]').attributes('accept')).toBe('.pdf,.doc')
})
it('shows primary icon color on focus', async () => {
const wrapper = mountComponent()
await wrapper.get('input[type="text"]').trigger('focus')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
})
it('shows black icon color when filled and unfocused', () => {
const wrapper = mountComponent({modelValue: 'document.pdf'})
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
})
})

14
app/components/malio/input/InputUpload.vue
View File

@@ -43,10 +43,7 @@
:height="24"
data-test="icon"
:class="[
hasError
? 'text-m-danger'
: hasSuccess
? 'text-m-success' : 'text-m-muted',
iconStateClass,
'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
]"
/>
@@ -189,6 +186,15 @@ const onFileChange = (event: Event) => {
}
const disabled = computed(() => props.disabled)
const iconStateClass = computed(() => {
if (hasError.value) return 'text-m-danger'
if (hasSuccess.value) return 'text-m-success'
if (disabled.value) return 'text-m-muted'
if (isFocused.value) return 'text-m-primary'
if (isFilled.value) return 'text-black'
return 'text-m-muted'
})
</script>
<style scoped>

19
app/components/malio/radio/RadioButton.test.ts
View File

@@ -153,4 +153,23 @@ describe('MalioRadioButton', () => {
expect(wrapper.get('input').classes()).toContain('border-red-500')
expect(wrapper.get('.radio-text').classes()).toContain('font-bold')
})
it('uses muted label color and muted border when unchecked', () => {
const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'b'})
expect(wrapper.get('.radio-text').classes()).toContain('text-m-muted')
expect(wrapper.get('input').classes()).toContain('border-m-muted')
})
it('uses black label color when checked', () => {
const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
expect(wrapper.get('.radio-text').classes()).toContain('text-black')
})
it('has checked:border-black on input', () => {
const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
expect(wrapper.get('input').classes()).toContain('checked:border-black')
})
})

5
app/components/malio/radio/RadioButton.vue
View File

@@ -117,14 +117,15 @@ const mergedControlClass = computed(() =>
const mergedInputClass = computed(() =>
twMerge(
'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-black',
'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-m-muted checked:border-black',
props.inputClass,
),
)
const mergedLabelClass = computed(() =>
twMerge(
'radio-text mt-px cursor-pointer text-black',
'radio-text mt-px cursor-pointer',
isChecked.value ? 'text-black' : 'text-m-muted',
hasError.value ? 'text-m-danger' : '',
hasSuccess.value ? 'text-m-success' : '',
disabled.value ? 'cursor-not-allowed text-black/60' : '',

261
app/story/input/inputEmail.story.vue Normal file
View File

@@ -0,0 +1,261 @@
<template>
<Story title="Input/Email">
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Simple</h2>
<MalioInputEmail
v-model="simpleValue"
label="Adresse email"
/>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
<MalioInputEmail
v-model="leftIconValue"
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
v-model="noIconValue"
label="Adresse email"
:icon-name="''"
/>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
<MalioInputEmail
v-model="hintValue"
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">Désactivé</h2>
<MalioInputEmail
v-model="disabledValue"
label="Adresse email"
disabled
/>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
<MalioInputEmail
v-model="readonlyValue"
label="Adresse email"
readonly
/>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
<MalioInputEmail
v-model="errorValue"
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
v-model="successValue"
label="Adresse email"
success="Adresse email valide"
/>
</div>
</div>
</Story>
</template>
<docs lang="md">
# MalioInputEmail
Champ email avec label flottant, icône email par défaut, états visuels
(erreur / succès) et accessibilité. Basé sur InputText mais ciblé sur la
saisie d'une adresse email (`type="email"` + `inputmode="email"`).
------------------------------------------------------------------------
## 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
(préfixe `malio-input-email-`).
### 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
- Défaut: `off`
- Description: Active ou configure l'autocomplétion navigateur. La
valeur par défaut est `off` pour les formulaires de création d'ERP.
Passer `email` pour permettre au navigateur de suggérer l'adresse
de l'utilisateur (formulaires de connexion / inscription).
### 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
### inputClass
- Type: string
- Description: Classes CSS appliquées à l'input.
### labelClass
- Type: string
- Description: Classes CSS appliquées au label.
### groupClass
- Type: string
- Description: Classes CSS appliquées au conteneur.
------------------------------------------------------------------------
## Validation & Contraintes
### required
- Type: boolean
- Description: Ajoute l'attribut HTML required.
### 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
- Défaut: `mdi:email-outline`
- Description: Nom Iconify de l'icône affichée. Passer une chaîne
vide pour ne pas afficher d'icône.
### iconPosition
- Type: `'left' | 'right'`
- Défaut: `right`
### iconSize
- Type: string | number
- Défaut: `24`
### iconColor
- Type: string
- Défaut: `text-m-muted`
- Description: Classe Tailwind de couleur. Surchargée automatiquement
par les états erreur / succès.
------------------------------------------------------------------------
## Comportement
- Aucune validation interne — le composant ne vérifie pas le format
de l'email. Utiliser la validation HTML native (`type="email"`) ou
piloter `error` / `success` depuis le parent.
- `inputmode="email"` est appliqué pour adapter le clavier mobile.
## Priorité visuelle
1. error
2. success
3. neutre
------------------------------------------------------------------------
## 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 {ref} from 'vue'
import MalioInputEmail from '../../components/malio/input/InputEmail.vue'
const simpleValue = ref('')
const leftIconValue = ref('')
const noIconValue = ref('')
const hintValue = ref('')
const disabledValue = ref('contact@malio.fr')
const readonlyValue = ref('readonly@malio.fr')
const errorValue = ref('pas-un-email')
const successValue = ref('contact@malio.fr')
</script>