feat : ajout d'un playground de formulaire + fix Select.vue, SelectCheckbox.vue et Checkbox.vue

This commit is contained in:
2026-05-07 17:56:17 +02:00
parent 174f1f9a64
commit e31f1eedac
9 changed files with 143 additions and 68 deletions

View File

@@ -0,0 +1,125 @@
<template>
<div>
<div class="flex justify-center mt-8">
<div>
<div class="w-[1348px] grid grid-cols-3 gap-x-[160px] gap-y-8">
<MalioInputText
label="Nom du client (Entreprise)"
/>
<MalioInputText
label="Nom du contact principal"
/>
<MalioInputText
label="Prénom du contact principal"
/>
<MalioSelectCheckbox
label="Catégorie"
v-model="multiselectValue"
:options="[
{label: 'Catégorie 1', value: 'Catégorie 1'},
{label: 'Catégorie 2', value: 'Catégorie 2'}
]"
/>
<MalioInputText
label="Téléphone"
/>
<MalioInputText
label="Email"
/>
<MalioSelect
value=""
label="Distributeur / Courtier"
:options="[
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
{label: 'Distributeur', value: 'Distributeur'},
{label: 'Courtier', value: 'Courtier'},
]"
/>
<MalioSelect
value=""
label="Nom du courtier"
:options="[
{label: 'Nom 1', value: 'Nom 1'}
]"
/>
<MalioSelect
value=""
label="Distributeur / Courtier"
:options="[
{label: 'Nom 1', value: 'Nom 1'}
]"
/>
<MalioCheckbox label="Prestation de triage"/>
</div>
<div class="mt-16 flex justify-center">
<MalioButton label="Valider" variant="primary"/>
</div>
</div>
</div>
<div class="flex justify-center mt-16">
<div>
<div class="w-[1348px] grid grid-cols-3 gap-x-[80px] gap-y-8">
<MalioInputText
label="Nom du client (Entreprise)"
/>
<MalioInputText
label="Nom du contact principal"
/>
<MalioInputText
label="Prénom du contact principal"
/>
<MalioSelectCheckbox
label="Catégorie"
v-model="multiselectValue"
:options="[
{label: 'Catégorie 1', value: 'Catégorie 1'},
{label: 'Catégorie 2', value: 'Catégorie 2'}
]"
/>
<MalioInputText
label="Téléphone"
/>
<MalioInputText
label="Email"
/>
<MalioSelect
value=""
label="Distributeur / Courtier"
:options="[
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
{label: 'Distributeur', value: 'Distributeur'},
{label: 'Courtier', value: 'Courtier'},
]"
/>
<MalioSelect
value=""
label="Nom du courtier"
:options="[
{label: 'Nom 1', value: 'Nom 1'}
]"
/>
<MalioSelect
value=""
label="Distributeur / Courtier"
:options="[
{label: 'Nom 1', value: 'Nom 1'}
]"
/>
<MalioCheckbox label="Prestation de triage"/>
</div>
<div class="mt-16 flex justify-center">
<MalioButton label="Valider" variant="primary"/>
</div>
</div>
</div>
</div>
</template>
<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>

View File

@@ -113,12 +113,20 @@ const groups = computed<Group[]>(() => {
categoryMap.get(category)!.push({name, label: name})
})
return Array.from(categoryMap.entries())
const componentGroups = Array.from(categoryMap.entries())
.sort(([a], [b]) => a.localeCompare(b))
.map(([category, items]) => ({
category: category.charAt(0).toUpperCase() + category.slice(1),
items: items.sort((a, b) => a.label.localeCompare(b.label)),
}))
return [
...componentGroups,
{
category: 'Form',
items: [{name: 'client', label: 'Client'}],
},
]
})
const openCategories = reactive(new Set<string>())

View File

@@ -203,8 +203,6 @@ Liste déroulante.
| `success` | `string` | `''` | Message de succès |
| `disabled` | `boolean` | `false` | Désactivé |
| `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
| `minWidth` | `string` | `'w-96'` | Classe largeur minimum |
| `maxWidth` | `string` | `''` | Classe largeur maximum |
| `rounded` | `string` | `'rounded-md'` | Classe border-radius |
| `textField` | `string` | `'text-lg'` | Classe taille texte bouton |
| `textValue` | `string` | `'text-lg'` | Classe taille texte valeur |

View File

@@ -101,14 +101,14 @@ const mergedGroupClass = computed(() =>
const mergedInputClass = computed(() =>
twMerge(
'inp-cbx peer',
'inp-cbx peer ',
props.inputClass,
),
)
const mergedLabelClass = computed(() =>
twMerge(
'cbx text-black',
'cbx text-black text-lg',
disabled.value ? 'cursor-not-allowed text-black/60' : '',
hasError.value ? 'text-m-error' : '',
hasSuccess.value ? 'text-m-success' : '',

View File

@@ -16,8 +16,6 @@ type SelectProps = {
hint?: string
error?: string
success?: string
minWidth?: string
maxWidth?: string
textField?: string
textValue?: string
textLabel?: string

View File

@@ -101,8 +101,8 @@
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
:class="[
openDirection === 'down'
? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
: 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
: 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
hasError
? 'select-scrollbar-error'
: hasSuccess
@@ -171,8 +171,6 @@ const props = withDefaults(defineProps<{
hint?: string
error?: string
success?: string
minWidth?: string
maxWidth?: string
textField?: string
textValue?: string
textLabel?: string
@@ -186,8 +184,6 @@ const props = withDefaults(defineProps<{
hint: '',
error: '',
success: '',
minWidth: 'w-96',
maxWidth: '',
textField: 'text-lg',
textValue: 'text-lg',
textLabel: 'text-sm',
@@ -213,7 +209,7 @@ const normalizedOptions = computed<Option[]>(() => {
return [{label: props.emptyOptionLabel, value: null}, ...props.options]
})
const mergedGroupClass = computed(() =>
twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
twMerge('relative w-full h-12 flex items-center', props.groupClass),
)
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!props.success && !hasError.value)

View File

@@ -16,8 +16,6 @@ type SelectCheckboxProps = {
hint?: string
error?: string
success?: string
minWidth?: string
maxWidth?: string
textField?: string
textValue?: string
textLabel?: string
@@ -177,15 +175,6 @@ describe('MalioSelectCheckbox', () => {
expect((checkboxes[0].element as HTMLInputElement).checked).toBe(false)
})
it('applies minWidth via twMerge so it overrides w-full (parity with MalioSelect)', () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: [], options: [], minWidth: 'w-80'},
})
const root = wrapper.find('button').element.parentElement
expect(root?.className).toContain('w-80')
expect(root?.className).not.toContain('w-full')
})
it('applies groupClass via twMerge', () => {
const wrapper = mount(SelectCheckboxForTest, {
props: {modelValue: [], options: [], groupClass: 'mt-4'},

View File

@@ -129,8 +129,8 @@
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
:class="[
openDirection === 'down'
? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
: 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
: 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
hasError
? 'select-scrollbar-error'
: hasSuccess
@@ -222,8 +222,6 @@ const props = withDefaults(defineProps<{
hint?: string
error?: string
success?: string
minWidth?: string
maxWidth?: string
textField?: string
textValue?: string
textLabel?: string
@@ -240,8 +238,6 @@ const props = withDefaults(defineProps<{
hint: '',
error: '',
success: '',
minWidth: 'w-96',
maxWidth: '',
textField: 'text-lg',
textValue: 'text-lg',
textLabel: 'text-sm',
@@ -267,7 +263,7 @@ const listRef = ref<HTMLElement | null>(null)
const listHeight = ref(0)
const normalizedOptions = computed<Option[]>(() => props.options)
const mergedGroupClass = computed(() =>
twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
twMerge('relative w-full h-12 flex items-center', props.groupClass),
)
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!props.success && !hasError.value)

37
package-lock.json generated
View File

@@ -186,7 +186,6 @@
"integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.29.0",
"@babel/generator": "^7.29.0",
@@ -812,7 +811,6 @@
}
],
"license": "MIT",
"peer": true,
"engines": {
"node": ">=20.19.0"
},
@@ -853,7 +851,6 @@
}
],
"license": "MIT",
"peer": true,
"engines": {
"node": ">=20.19.0"
}
@@ -1578,7 +1575,6 @@
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@floating-ui/core": "^1.7.5",
"@floating-ui/utils": "^0.2.11"
@@ -2673,7 +2669,6 @@
"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.1.tgz",
"integrity": "sha512-UjBFt72dnpc+83BV3OIbCT0YHLevJtgJCHpxMX0YRKWLDhhbcDdUse87GtsQBrjvOzK7WUNUYLDS/hQLYev5rA==",
"license": "MIT",
"peer": true,
"dependencies": {
"c12": "^3.3.3",
"consola": "^3.4.2",
@@ -2761,7 +2756,6 @@
"integrity": "sha512-S+wHJdYDuyk9I43Ej27y5BeWMZgi7R/UVql3b3qtT35d0fbpXW7fUenzhLRCCDC6O10sjguc6fcMcR9sMKvV8g==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/shared": "^3.5.27",
"defu": "^6.1.4",
@@ -5052,7 +5046,6 @@
"resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.22.5.tgz",
"integrity": "sha512-L1lhWz6ujGny8LduTJ7MBWYhzigwOvfUJUrJ7IzOJSuy3+OAzisdGDD1GV7LEO/hU0Hr2Mkm1wajRIHExvS9HQ==",
"license": "MIT",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
@@ -5301,7 +5294,6 @@
"resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.22.5.tgz",
"integrity": "sha512-cVO3ZHCgxAWZ4zrFSs81FO2nyCk1wb2EHkpLpW98FzbJLkN9rDkazhW99P3HRWy/CvUldOT+8ecI1YrQtBojMg==",
"license": "MIT",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
@@ -5407,7 +5399,6 @@
"resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-3.22.5.tgz",
"integrity": "sha512-jt63jy8YbhZJUGMxTUzeivLhowGtFp6YbCFrrmZJ7G6IHu8X8LJzO81ksz5nT5l8DKpldGwnINUfA6iE91JIAg==",
"license": "MIT",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
@@ -5434,7 +5425,6 @@
"resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.22.5.tgz",
"integrity": "sha512-Ifg4MzKCj3uRqe3ieTwYnomu2y4p7EXr2avVSKZYfh12i2dyWe2Gkn1KuZDREANVE+gHqFlQjJRYzhJFwzSCrg==",
"license": "MIT",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
@@ -5449,7 +5439,6 @@
"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.22.5.tgz",
"integrity": "sha512-Cr9Mv4igxvI2tKMiahw48sZxva3PfDzypErH8IB82N+9qa9n9ygVMt0BOaDg53hLKxEEVeYr2S/wCcJIVFgBTw==",
"license": "MIT",
"peer": true,
"dependencies": {
"prosemirror-changeset": "^2.3.0",
"prosemirror-commands": "^1.6.2",
@@ -5593,8 +5582,7 @@
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
"dev": true,
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/@types/jsonfile": {
"version": "6.1.4",
@@ -5617,7 +5605,6 @@
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
"integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/linkify-it": "^5",
"@types/mdurl": "^2"
@@ -5698,7 +5685,6 @@
"integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "8.56.0",
"@typescript-eslint/types": "8.56.0",
@@ -6543,7 +6529,6 @@
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
"integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/parser": "^7.29.0",
"@vue/compiler-core": "3.5.28",
@@ -6766,7 +6751,6 @@
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -7270,7 +7254,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.9.0",
"caniuse-lite": "^1.0.30001759",
@@ -7666,7 +7649,6 @@
"resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
"integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"consola": "^3.2.3"
}
@@ -8867,7 +8849,6 @@
"integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
"hasInstallScript": true,
"license": "MIT",
"peer": true,
"bin": {
"esbuild": "bin/esbuild"
},
@@ -8937,7 +8918,6 @@
"integrity": "sha512-O0piBKY36YSJhlFSG8p9VUdPV/SxxS4FYDWVpr/9GJuMaepzwlf4J8I4ov1b+ySQfDTPhc3DtLaxcT1fN0yqCg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.2",
@@ -10338,7 +10318,6 @@
"integrity": "sha512-hzhFiqlL9Ko1B2APCamGIchM3Bjng5+CTX7kLL1q/NB2Lp4Uqpe4ZZicc7RU4CTCe4Vj7Q/Eb3UE/IacL1Ta5g==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@akryum/tinypool": "^0.3.1",
"@histoire/app": "^1.0.0-beta.1",
@@ -12001,7 +11980,6 @@
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
"integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
"license": "MIT",
"peer": true,
"dependencies": {
"argparse": "^2.0.1",
"entities": "^4.4.0",
@@ -12767,7 +12745,6 @@
"integrity": "sha512-bl+0rFcT5Ax16aiWFBFPyWcsTob19NTZaDL5P6t0MQdK63AtgS6fN6fwvwdbXtnTk6/YdCzlmuLzXhSM22h0OA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@dxup/nuxt": "^0.3.2",
"@nuxt/cli": "^3.33.0",
@@ -13122,7 +13099,6 @@
"integrity": "sha512-7rQ3QdJwobMQLMZwQaPuPYMEF2fDRZwf51lZ//V+bA37nejjKW5ifMHbbCwvA889Y4RLhT+/wLJpPRhAoBaZYw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@oxc-project/types": "^0.112.0"
},
@@ -13498,7 +13474,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -14067,7 +14042,6 @@
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
"integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
"license": "MIT",
"peer": true,
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
@@ -14810,7 +14784,6 @@
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
"integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/estree": "1.0.8"
},
@@ -15826,7 +15799,6 @@
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
"integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
@@ -16357,7 +16329,6 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -16758,7 +16729,6 @@
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"peer": true,
"dependencies": {
"napi-postinstall": "^0.3.0"
},
@@ -17054,7 +17024,6 @@
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.27.0",
"fdir": "^6.5.0",
@@ -17546,7 +17515,6 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
"integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.5.28",
"@vue/compiler-sfc": "3.5.28",
@@ -17593,7 +17561,6 @@
"integrity": "sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"debug": "^4.4.0",
"eslint-scope": "^8.2.0 || ^9.0.0",
@@ -17631,7 +17598,6 @@
"integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/devtools-api": "^6.6.4"
},
@@ -17866,7 +17832,6 @@
"integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
"devOptional": true,
"license": "ISC",
"peer": true,
"bin": {
"yaml": "bin.mjs"
},