126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<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>
|