Hire us

Select

<script lang="ts" setup>
import { ref } from "vue";
import { NNSelect } from "@fronntui/vue";


const options = [
  {
    value: "option-1",
    label: "Option 1",
  },
  {
    value: "option-2",
    label: "Option 2",
    disabled: true,
  },
  {
    label: "Group 3",
    options: [
      {
        value: "option-3-1",
        label: "Option 3-1",
      },
      {
        value: "option-3-2",
        label: "Option 3-2",
      },
    ],
  },
  {
    value: "option-4",
    label: "Option 4",
  },
];


const model = ref();
</script>


<template>
  <NNSelect :options="options" v-model="modelSingle" />
  <NNSelect :options="options" v-model="modelSingle" disabled />


  <NNSelect :options="options" multiple v-model="modelMulti" />
  <NNSelect :options="options" multiple v-model="modelMulti" disabled />
</template>

Searchable

<script lang="ts" setup>
import { NNSelect } from "@fronntui/vue";


const options = [
  {
    value: "1",
    label: "1 (custom=a)",
    custom: "a",
  },
  {
    value: "2",
    label: "2 (custom=b)",
    disabled: true,
    custom: "b",
  },
  {
    value: "3",
    label: "3 (custom=c)",
    custom: "c",
  },
];


const search = (
  term: string,
  option: { label: string; value: string | number; custom?: string },
) => {
  if (!term) return true;
  return option.custom === term;
};
</script>


<template>
  <NNSelect
    :options="options"
    searchable
    search-placeholder="..."
    :search="search"
  />
</template>

Props

Name
Type
disabled
boolean
error
boolean
options
Option[]
modelValue
string | number | Array<string | number> | null
clearable
boolean
clearValue
string | null | []
multiple
boolean
loading
boolean
searchable
boolean
searchPlaceholder
string

Defaults to ‘Search…‘

search
(term: string, option: Option) => boolean
some key
some data

content code

Events

Name
Payload
select
{ value: string | number, label: string }

Fired after an option has been selected

deselect
{ value: string | number, label: string }

Fired after an option has been selected

clear

Fired after the selection has been cleared

update:modelValue
string | number | Array<string | number> | null

Fired after the selection has been changed

Slots

Name
Payload
selection
{ selection: props.modelValue }

Each option in the list

no-value

Content to be displayed if there’s no selection made. Defaults to “Choose”.

no-results

Content to be displayed if the list is empty (either no options or all options are filtered out). Defaults to “No results”.

option
{ option: {disabled?: boolean, label: string, value: string | number, [key: string]: unknown}, selected: boolean }

Each option in the list

© 2024  inniti