diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue new file mode 100644 index 0000000..e329107 --- /dev/null +++ b/.playground/pages/composant/inputText.vue @@ -0,0 +1,184 @@ + + + diff --git a/.playground/pages/composant/inputTextArea.vue b/.playground/pages/composant/inputTextArea.vue new file mode 100644 index 0000000..e093158 --- /dev/null +++ b/.playground/pages/composant/inputTextArea.vue @@ -0,0 +1,104 @@ + + + diff --git a/.playground/pages/composant/select.vue b/.playground/pages/composant/select.vue new file mode 100644 index 0000000..8b4cc0c --- /dev/null +++ b/.playground/pages/composant/select.vue @@ -0,0 +1,149 @@ + + + diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue index 257a509..17e7186 100644 --- a/.playground/pages/index.vue +++ b/.playground/pages/index.vue @@ -1,11 +1,128 @@ +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 Promise> = + Object.fromEntries( + Object.entries(demoModules).map(([file, loader]) => { + const name = file.split('/').pop()?.replace('.vue', '') ?? '' + return [name.toLowerCase(), loader as () => Promise] + }), + ) + +const items = computed(() => + 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(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) +}) + diff --git a/CHANGELOG.md b/CHANGELOG.md index f230edc..4b688f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ Liste des évolutions de la librairie Malio layer UI ### Parameters ### Added +* [#333] Création d'un composant text ### Changed diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css new file mode 100644 index 0000000..0fa1352 --- /dev/null +++ b/app/assets/css/malio.css @@ -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 */ + } +} diff --git a/app/components/malio/Input.test.ts b/app/components/malio/Input.test.ts index aefc9fb..317dcf5 100644 --- a/app/components/malio/Input.test.ts +++ b/app/components/malio/Input.test.ts @@ -1,23 +1,297 @@ -import { describe, expect, it } from 'vitest' -import { mount } from '@vue/test-utils' -import Input from './Input.vue' +import {describe, expect, it} from 'vitest' +import {mount} from '@vue/test-utils' +import type {DefineComponent} from 'vue' +import Input from './InputText.vue' -describe('MalioInput', () => { - it('affiche la valeur initiale', () => { - const wrapper = mount(Input, { - props: { modelValue: 'hello' }, - }) +type InputProps = { + id?: string + label?: string + name?: string + autocomplete?: string + modelValue?: string | null + inputClass?: string + labelClass?: string + groupClass?: string + required?: boolean + maxLength?: number | string + minLength?: number | string + disabled?: boolean + readonly?: boolean + hint?: string + error?: string + success?: string + iconName?: string + iconPosition?: 'left' | 'right' + iconSize?: string | number + iconColor?: string +} - expect(wrapper.get('input').element.value).toBe('hello') +const InputForTest = Input as DefineComponent + +const mountInput = (props: InputProps = {}) => + mount(InputForTest, { + props, + global: { + stubs: { + IconifyIcon: { + template: '', + }, + }, + }, }) - it('emet update:modelValue au changement', async () => { - const wrapper = mount(Input, { - props: { modelValue: '' }, - }) +describe('MalioInputText', () => { + it('renders the initial input value', () => { + const wrapper = mountInput({modelValue: 'initialValueTest'}) + + expect(wrapper.get('input').element.value).toBe('initialValueTest') + }) + + it('renders the label text', () => { + const wrapper = mountInput({label: 'labelTest'}) + + expect(wrapper.get('label').text()).toBe('labelTest') + }) + + it('applies the name attribute', () => { + const wrapper = mountInput({name: 'nameTest'}) + + expect(wrapper.get('input').attributes('name')).toBe('nameTest') + }) + + it('uses provided id on input and label', () => { + const wrapper = mountInput({id: 'custom-id', label: 'Label'}) + + expect(wrapper.get('input').attributes('id')).toBe('custom-id') + expect(wrapper.get('label').attributes('for')).toBe('custom-id') + }) + + it('keeps the default rounded class on input', () => { + const wrapper = mountInput() + + expect(wrapper.get('input').classes()).toContain('rounded-md') + }) + + it('generates an id when missing and reuses it on label', () => { + const wrapper = mountInput({label: 'Label'}) + + const inputId = wrapper.get('input').attributes('id') + + expect(inputId?.startsWith('malio-input-text-')).toBe(true) + expect(wrapper.get('label').attributes('for')).toBe(inputId) + }) + + it('applies the autocomplete attribute', () => { + const wrapper = mountInput({autocomplete: 'autocompleteTest'}) + + expect(wrapper.get('input').attributes('autocomplete')).toBe('autocompleteTest') + }) + + it('does not set required when false', () => { + const wrapper = mountInput({required: false}) + + expect(wrapper.get('input').attributes('required')).toBeUndefined() + }) + + it('sets required when true', () => { + const wrapper = mountInput({required: true}) + + expect(wrapper.get('input').attributes('required')).toBeDefined() + }) + + it('does not set readonly when false', () => { + const wrapper = mountInput({readonly: false}) + + expect(wrapper.get('input').attributes('readonly')).toBeUndefined() + }) + + it('sets readonly when true', () => { + const wrapper = mountInput({readonly: true}) + + expect(wrapper.get('input').attributes('readonly')).toBeDefined() + }) + + it('does not set disabled and keeps text cursor when false', () => { + const wrapper = mountInput({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 = mountInput({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') + }) + + it('emits update:modelValue on input change', async () => { + const wrapper = mountInput({modelValue: ''}) await wrapper.get('input').setValue('new value') expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value']) }) + + it('applies maxLength to input', () => { + const wrapper = mountInput({maxLength: 25}) + + expect(wrapper.get('input').attributes('maxlength')).toBe('25') + }) + + it('applies minLength to input', () => { + const wrapper = mountInput({minLength: 25}) + + expect(wrapper.get('input').attributes('minlength')).toBe('25') + }) + + it('applies labelClass on label', () => { + const wrapper = mountInput({label: 'Label', labelClass: 'text-red-500'}) + + expect(wrapper.get('label').classes()).toContain('text-red-500') + }) + + it('applies inputClass on input', () => { + const wrapper = mountInput({inputClass: 'text-sm'}) + + expect(wrapper.get('input').classes()).toContain('text-sm') + }) + + it('shows error message without label and icon', () => { + const wrapper = mountInput({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('input').attributes('aria-invalid')).toBe('true') + expect(wrapper.get('p').classes()).toContain('text-m-error') + }) + + it('shows error message with label and without icon', () => { + const wrapper = mountInput({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('p').classes()).toContain('text-m-error') + }) + + it('shows error message with label and icon', () => { + const wrapper = mountInput({ + 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('[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 = mountInput({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 = mountInput({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 = mountInput({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') + }) + + it('shows success message with label and icon', () => { + const wrapper = mountInput({ + 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('[data-test="icon"]').classes()).toContain('text-m-success') + }) + + it('shows success message with icon and without label', () => { + const wrapper = mountInput({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 = mountInput({ + 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') + }) + + it('shows hint message', () => { + const wrapper = mountInput({hint: 'Hint message test'}) + + expect(wrapper.get('p.text-m-muted').text()).toBe('Hint message test') + }) + + it('does not render label when label prop is missing', () => { + const wrapper = mountInput({labelClass: 'text-red-500'}) + + expect(wrapper.find('label').exists()).toBe(false) + }) + + it('renders icon with default positioning and muted color', () => { + const wrapper = mountInput({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('renders icon on the left when requested', () => { + const wrapper = mountInput({ + iconName: 'mdi:key-outline', + iconPosition: 'left', + label: 'Password', + }) + + expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2') + expect(wrapper.get('input').classes()).toContain('!pl-11') + expect(wrapper.get('label').classes()).toContain('left-8') + }) + + it('passes icon size props to icon component', () => { + const wrapper = mountInput({iconName: 'mdi:key-outline', iconSize: '24'}) + + expect(wrapper.get('[data-test="icon"]').attributes('width')).toBe('24') + expect(wrapper.get('[data-test="icon"]').attributes('height')).toBe('24') + }) + + it('applies icon color class', () => { + const wrapper = mountInput({iconName: 'mdi:key-outline', iconColor: 'text-m-primary'}) + + expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary') + }) }) diff --git a/app/components/malio/Input.vue b/app/components/malio/Input.vue deleted file mode 100644 index 17119af..0000000 --- a/app/components/malio/Input.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue new file mode 100644 index 0000000..d1dc77d --- /dev/null +++ b/app/components/malio/InputText.vue @@ -0,0 +1,235 @@ + + + + + diff --git a/app/components/malio/InputTextArea.test.ts b/app/components/malio/InputTextArea.test.ts new file mode 100644 index 0000000..5398e6c --- /dev/null +++ b/app/components/malio/InputTextArea.test.ts @@ -0,0 +1,152 @@ +import {describe, expect, it} from 'vitest' +import {mount} from '@vue/test-utils' +import type {DefineComponent} from 'vue' +import InputTextArea from './InputTextArea.vue' + +type InputTextAreaProps = { + id?: string + label?: string + name?: string + autocomplete?: string + modelValue?: string | null + size?: number | string + textInput?: string + textLabel?: string + required?: boolean + maxLength?: number + showCounter?: boolean + disabled?: boolean + readonly?: boolean + hint?: string + error?: string + success?: string + rounded?: string +} + +const InputTextAreaForTest = InputTextArea as DefineComponent + +describe('MalioInputTextArea', () => { + it('renders the initial textarea value', () => { + const wrapper = mount(InputTextAreaForTest, { + props: {modelValue: 'initial textarea value'}, + }) + + expect(wrapper.get('textarea').element.value).toBe('initial textarea value') + }) + + it('renders the label text and reuses a provided id', () => { + const wrapper = mount(InputTextAreaForTest, { + props: {id: 'custom-textarea-id', label: 'Description'}, + }) + + expect(wrapper.get('textarea').attributes('id')).toBe('custom-textarea-id') + expect(wrapper.get('label').attributes('for')).toBe('custom-textarea-id') + expect(wrapper.get('label').text()).toBe('Description') + }) + + it('generates an id when missing', () => { + const wrapper = mount(InputTextAreaForTest, { + props: {label: 'Description'}, + }) + + const textareaId = wrapper.get('textarea').attributes('id') + expect(textareaId?.startsWith('malio-input-textarea-')).toBe(true) + expect(wrapper.get('label').attributes('for')).toBe(textareaId) + }) + + it('applies name, autocomplete and rows attributes', () => { + const wrapper = mount(InputTextAreaForTest, { + props: {name: 'bio', autocomplete: 'on', size: 4}, + }) + + expect(wrapper.get('textarea').attributes('name')).toBe('bio') + expect(wrapper.get('textarea').attributes('autocomplete')).toBe('on') + expect(wrapper.get('textarea').attributes('rows')).toBe('4') + }) + + it('sets required, readonly and disabled attributes', () => { + const wrapper = mount(InputTextAreaForTest, { + props: { + required: true, + readonly: true, + disabled: true, + }, + }) + + expect(wrapper.get('textarea').attributes('required')).toBeDefined() + expect(wrapper.get('textarea').attributes('readonly')).toBeDefined() + expect(wrapper.get('textarea').attributes('disabled')).toBeDefined() + expect(wrapper.get('textarea').classes()).toContain('cursor-not-allowed') + }) + + it('emits update:modelValue on input change', async () => { + const wrapper = mount(InputTextAreaForTest, { + props: {modelValue: ''}, + }) + + await wrapper.get('textarea').setValue('new textarea value') + + expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new textarea value']) + }) + + it('shows the character counter when enabled', () => { + const wrapper = mount(InputTextAreaForTest, { + props: { + modelValue: 'hello', + showCounter: true, + maxLength: 20, + }, + }) + + expect(wrapper.get('span.text-xs').text()).toBe('5/20') + expect(wrapper.get('textarea').classes()).toContain('pb-6') + }) + + it('shows hint message in muted color', () => { + const wrapper = mount(InputTextAreaForTest, { + props: {hint: 'Helpful hint'}, + }) + + expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint') + }) + + it('shows error state on textarea and label', () => { + const wrapper = mount(InputTextAreaForTest, { + props: { + label: 'Description', + error: 'Textarea error', + }, + }) + + expect(wrapper.get('textarea').classes()).toContain('border-m-error') + expect(wrapper.get('label').classes()).toContain('text-m-error') + expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error') + expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true') + }) + + it('shows success state on textarea and label', () => { + const wrapper = mount(InputTextAreaForTest, { + props: { + label: 'Description', + success: 'Textarea success', + }, + }) + + expect(wrapper.get('textarea').classes()).toContain('border-m-success') + expect(wrapper.get('label').classes()).toContain('text-m-success') + expect(wrapper.get('p.text-m-success').text()).toBe('Textarea success') + }) + + it('prioritizes error over success', () => { + const wrapper = mount(InputTextAreaForTest, { + props: { + error: 'Textarea error', + success: 'Textarea success', + }, + }) + + expect(wrapper.get('textarea').classes()).toContain('border-m-error') + expect(wrapper.find('p.text-m-success').exists()).toBe(false) + expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error') + }) +}) diff --git a/app/components/malio/InputTextArea.vue b/app/components/malio/InputTextArea.vue new file mode 100644 index 0000000..c3294f5 --- /dev/null +++ b/app/components/malio/InputTextArea.vue @@ -0,0 +1,186 @@ +