malio-layer-ui/.playground/pages/composant/select/select.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>
      <MalioSelect
        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 label</h2>
      <MalioSelect
        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>
      <MalioSelect
        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>
      <MalioSelect
        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>
      <MalioSelect
        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>
      <MalioSelect
        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>
      <MalioSelect
        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>
      <MalioSelect
        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">Sélection obligatoire</h2>
      <MalioSelect
        v-model="requiredValue"
        :options="options"
        label="Sélection obligatoire"
        :required="true"
        empty-option-label="Aucune selection"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Peu d'elements (2)</h2>
      <MalioSelect
        v-model="shortListValue"
        :options="shortOptions"
        label="Civilite"
        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>
      <MalioSelect
        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>
      <MalioSelect
        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>
      <MalioSelect
        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" />
      <MalioSelect
        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 shortOptions = [
  {label: 'Monsieur', value: 'M'},
  {label: 'Madame', value: 'Mme'},
]

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 requiredValue = ref<string | number | null>(null)
const basicValue = ref<string | number | null>(null)
const labelValue = ref<string | number | null>(null)
const selectedValue = ref<string | number | null>('fr')
const hintValue = ref<string | number | null>(null)
const errorValue = ref<string | number | null>(null)
const successValue = ref<string | number | null>('be')
const disabledValue = ref<string | number | null>('ca')
const emptyValue = ref<string | number | null>(null)
const shortListValue = ref<string | number | null>(null)
const longListValue = ref<string | number | null>(null)
const bottomValue = ref<string | number | null>(null)
const readonlyEmptyValue = ref<string | number | null>(null)
const readonlyFilledValue = ref<string | number | null>('fr')
</script>