MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Autin
2026-05-07 17:56:17 +02:00
parent 174f1f9a64
commit e31f1eedac
9 changed files with 143 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
.playground/pages/composant/form/client.vue Normal file
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>

10
.playground/pages/index.vue
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>())