Salfati Group UI Library

Assign to one

<k-select
  :options="people"
  v-model="selectedSingle"
  label="Assign to one"
/>

Assign to one

<k-select
  :options="people"
  v-model="selectedSingle"
  label="Assign to one"
  direction="up"
/>

Assign to many

<k-select
  :options="people"
  v-model="selected"
  multiple
  label="Assign to many"
/>

Disabled

<k-select
  :options="people"
  disabled
  v-model="selectedSingle"
  label="Disabled"
/>

Pill select

<k-select
  :options="dates"
  v-model="pillSelected1"
  placeholder="Due Date"
  pill
  label="Pill select"
>
  <template #prefixIcon>
    <ICalendar variant="line" class="w-4 h-4" />
  </template>
</k-select>

Pill select

<k-select
  :options="people"
  v-model="pillSelected2"
  placeholder="Assign"
  pill
  label="Pill select"
>
  <template #placeholderIcon>
    <IUserCircle variant="filled" class="w-4 h-4" />
  </template>
</k-select>

Assign to one

This is an error example

<k-select
  :options="people"
  v-model="selectedSingle"
  label="Assign to one"
  errorText="This is an error example"
/>

<script setup lang="ts">
  import { ref } from 'vue'
  const dates = [
    { value: null, label: 'No due date' },
    { value: 1, label: 'Today' },
    { value: 2, label: 'Tomorrow' },
  ]
  const people: OptionType[] = [
    { value: null, label: 'Unassign', icon: IUserCircle },
    { value: 1, label: 'Wade Cooper', online: true },
    {
      value: 2,
      label: 'Arlene Mccoy',
      avatar:
        'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
    { value: 3, label: 'Devon Webb', description: '@devonwebb' },
    { value: 4, label: 'Tom Cook' },
    { value: 5, label: 'Tanya Fox' },
    { value: 6, label: 'Hellen Schmvaluet' },
    { value: 7, label: 'Caroline Schultz' },
    { value: 8, label: 'Mason Heaney' },
    { value: 9, label: 'Claudie Smitham' },
    { value: 10, label: 'Emil Schaefer' },
  ]

  const selected = ref([])
  const selectedSingle = ref([])
  const pillSelected1 = ref()
  const pillSelected2 = ref()
</script>