malio-layer-ui/.playground/pages/composant/select/selectCheckbox.vue

<template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple</h2>
      <MalioSelectCheckbox
        v-model="basicValue"
        :options="options"
        empty-option-label="Aucune selection"
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec tag</h2>
      <MalioSelectCheckbox
        v-model="labelValue"
        :options="options"
        :display-tag="true"
        empty-option-label=" "
      />
      </div>
      <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec tag + label</h2>
      <MalioSelectCheckbox
        v-model="labelValue1"
        :options="options"
        :display-tag="true"
        label="Pays"
        empty-option-label=" "
      />
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
      <MalioSelectCheckbox
        v-model="labelValue"
        :options="options"
        label="Pays"
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Valeur preselectionnee</h2>
      <MalioSelectCheckbox
        v-model="selectedValue"
        :options="options"
        label="Pays"
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Hint</h2>
      <MalioSelectCheckbox
        v-model="hintValue"
        :options="options"
        label="Pays"
        hint="Choisissez votre pays"
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioSelectCheckbox
        v-model="errorValue"
        :options="options"
        label="Pays"
        error="Ce champ est obligatoire"
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succes</h2>
      <MalioSelectCheckbox
        v-model="successValue"
        :options="options"
        label="Pays"
        success="Selection validee"
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Desactive</h2>
      <MalioSelectCheckbox
        v-model="disabledValue"
        :options="options"
        label="Pays"
        disabled
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Sans options</h2>
      <MalioSelectCheckbox
        v-model="emptyValue"
        label="Pays"
        empty-option-label="Aucun pays disponible"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Tout sélectionner</h2>
      <MalioSelectCheckbox
        v-model="selectAllValue"
        :options="options"
        label="Pays"
        :display-select-all="true"
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Tout sélectionner (label custom)</h2>
      <MalioSelectCheckbox
        v-model="selectAllCustomValue"
        :options="options"
        label="Pays"
        :display-select-all="true"
        select-all-label="Cocher tout"
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Lecture seule (vide)</h2>
      <MalioSelectCheckbox
        v-model="readonlyEmptyValue"
        :options="options"
        label="Pays"
        empty-option-label="Aucune selection"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Lecture seule (rempli)</h2>
      <MalioSelectCheckbox
        v-model="readonlyFilledValue"
        :options="options"
        label="Pays"
        empty-option-label="Aucune selection"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4 md:col-span-2">
      <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
      <MalioSelectCheckbox
        v-model="longListValue"
        :options="longOptions"
        label="Pays"
        hint="Permet de verifier la scrollbar"
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4 md:col-span-2">
      <h2 class="mb-4 text-xl font-bold">Ouverture en bas de page</h2>
      <div class="h-64" />
      <MalioSelectCheckbox
        v-model="bottomValue"
        :options="longOptions"
        label="Ouverture adaptative"
        hint="A ouvrir pres du bas de la page"
        empty-option-label="Aucune selection"
      />
    </div>

  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const options = [
  {label: 'France', value: 'fr'},
  {label: 'Belgique', value: 'be'},
  {label: 'Suisse', value: 'ch'},
  {label: 'Canada', value: 'ca'},
  {label: 'Allemagne', value: 'de'},
  {label: 'Espagne', value: 'es'},
  {label: 'Italie', value: 'it'},
  {label: 'Portugal', value: 'pt'},
]

const longOptions = [
  ...options,
  {label: 'Pays-Bas', value: 'nl'},
  {label: 'Suede', value: 'se'},
  {label: 'Norvege', value: 'no'},
  {label: 'Danemark', value: 'dk'},
  {label: 'Finlande', value: 'fi'},
  {label: 'Autriche', value: 'at'},
  {label: 'Irlande', value: 'ie'},
  {label: 'Grece', value: 'gr'},
  {label: 'Pologne', value: 'pl'},
  {label: 'Hongrie', value: 'hu'},
  {label: 'Republique tcheque', value: 'cz'},
]

const basicValue = ref<Array<string | number>>([])
const labelValue = ref<Array<string | number>>([])
const labelValue1 = ref<Array<string | number>>([])
const selectedValue = ref<Array<string | number>>(['fr'])
const hintValue = ref<Array<string | number>>([])
const errorValue = ref<Array<string | number>>([])
const successValue = ref<Array<string | number>>(['be'])
const disabledValue = ref<Array<string | number>>(['ca'])
const emptyValue = ref<Array<string | number>>([])
const selectAllValue = ref<Array<string | number>>([])
const selectAllCustomValue = ref<Array<string | number>>([])
const longListValue = ref<Array<string | number>>([])
const bottomValue = ref<Array<string | number>>([])
const readonlyEmptyValue = ref<Array<string | number>>([])
const readonlyFilledValue = ref<Array<string | number>>(['fr'])
</script>