diff --git a/.playground/pages/composant/form/client.vue b/.playground/pages/composant/form/client.vue new file mode 100644 index 0000000..ad29579 --- /dev/null +++ b/.playground/pages/composant/form/client.vue @@ -0,0 +1,125 @@ + + + diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue index 6b07306..32a6e33 100644 --- a/.playground/pages/index.vue +++ b/.playground/pages/index.vue @@ -113,12 +113,20 @@ const groups = computed(() => { 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()) diff --git a/COMPONENTS.md b/COMPONENTS.md index 0794f58..8dae0ea 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -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 | diff --git a/app/components/malio/checkbox/Checkbox.vue b/app/components/malio/checkbox/Checkbox.vue index bdd4414..4b9a698 100644 --- a/app/components/malio/checkbox/Checkbox.vue +++ b/app/components/malio/checkbox/Checkbox.vue @@ -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' : '', diff --git a/app/components/malio/select/Select.test.ts b/app/components/malio/select/Select.test.ts index f1baa00..dae6334 100644 --- a/app/components/malio/select/Select.test.ts +++ b/app/components/malio/select/Select.test.ts @@ -16,8 +16,6 @@ type SelectProps = { hint?: string error?: string success?: string - minWidth?: string - maxWidth?: string textField?: string textValue?: string textLabel?: string diff --git a/app/components/malio/select/Select.vue b/app/components/malio/select/Select.vue index 98a356b..877c400 100644 --- a/app/components/malio/select/Select.vue +++ b/app/components/malio/select/Select.vue @@ -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(() => { 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) diff --git a/app/components/malio/select/SelectCheckbox.test.ts b/app/components/malio/select/SelectCheckbox.test.ts index d3dd975..8956d89 100644 --- a/app/components/malio/select/SelectCheckbox.test.ts +++ b/app/components/malio/select/SelectCheckbox.test.ts @@ -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'}, diff --git a/app/components/malio/select/SelectCheckbox.vue b/app/components/malio/select/SelectCheckbox.vue index e987c63..5986a4c 100644 --- a/app/components/malio/select/SelectCheckbox.vue +++ b/app/components/malio/select/SelectCheckbox.vue @@ -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(null) const listHeight = ref(0) const normalizedOptions = computed(() => 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) diff --git a/package-lock.json b/package-lock.json index f6c0e06..bb303a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" },