NcSelect

Props

Prop name	Description	Type	Values	Default
closeOnSelect	Close the dropdown when selecting an option<br/>`@see` https://vue-select.org/api/props.html#closeonselect	boolean	-	true
components	Replace default vue-select components<br/>`@see` https://vue-select.org/api/props.html#components	object	-	{ Deselect: { render: createElement => createElement(Close, { props: { size: 20, fillColor: 'var(--vs-controls-color)', }, style: { cursor: 'pointer', }, }), } }
disabled	Disable the component<br/>`@see` https://vue-select.org/api/props.html#disabled	boolean	-	false
filterBy	Callback to determine if the provided option should match the current search text. Used to determine if the option should be displayed. Defaults to the internal vue-select function documented at the link below Enabling `userSelect` will automatically set this to filter by the `displayName` and `subtitle` properties of the user option object unless this prop is set explicitly<br/>`@see` https://vue-select.org/api/props.html#filterby	func	-	null
inputId	Input element id<br/>`@see` https://vue-select.org/api/props.html#inputid	string	-	null
label	Key of the displayed label for object options Defaults to `'label'` Enabling `userSelect` will automatically set this to `'displayName'` unless this prop is set explicitly<br/>`@see` https://vue-select.org/api/props.html#label	string	-	null
loading	Show the loading icon<br/>`@see` https://vue-select.org/api/props.html#loading	boolean	-	false
multiple	Allow selection of multiple options<br/>`@see` https://vue-select.org/api/props.html#multiple	boolean	-	false
noWrap	Disable automatic wrapping when selected options overflow the width	boolean	-	false
options	Array of options<br/>`@see` https://vue-select.org/api/props.html#options	Array<string \| number \| { [key: string \| number]: any }>	-	[]
placeholder	Placeholder text<br/>`@see` https://vue-select.org/api/props.html#placeholder	string	-	''
userSelect	Enable the user selector with avatars Objects must contain the data expected by the NcAvatar component	boolean	-	false
value	Currently selected value The `v-model` directive may be used for two-way data binding<br/>`@see` https://vue-select.org/api/props.html#value	string \| number \| { [key: string \| number]: any } \| Array<any>	-	null
	Any available prop<br/>`@see` https://vue-select.org/api/props.html		-

Events

Event name	Properties	Description
		All events from https://vue-select.org/api/events.html

Slots

Name	Description	Bindings
default	Any combination of slots from https://vue-select.org/api/slots.html

Description

General purpose multiselect component.

Basic examples

vue

<template>
  <div class="grid">
    <div v-for="{ title, props } in selectArray" class="container">
      <label :for="props.inputId">{{ title }}</label>
      <NcSelect v-bind="props" v-model="props.value" />
    </div>
  </div>
</template>

<script>
import GenRandomId from "../../utils/GenRandomId.js";

const getRandomId = () => {
  return `select-${GenRandomId()}`;
};

const selectArray = [
  {
    title: "Simple",
    props: {
      inputId: getRandomId(),
      options: ["foo", "bar", "baz", "qux", "quux"]
    }
  },

  {
    title: "Multiple (with placeholder)",
    props: {
      inputId: getRandomId(),
      multiple: true,
      placeholder: "Select multiple options",
      options: ["foo", "bar", "baz", "qux", "quux"]
    }
  },

  {
    title: "Multiple (objects, pre-selected, stay open on select)",
    props: {
      inputId: getRandomId(),
      multiple: true,
      closeOnSelect: false,
      options: [
        {
          id: "foo",
          label: "Foo"
        },
        {
          id: "bar",
          label: "Bar"
        },
        {
          id: "baz",
          label: "Baz"
        },
        {
          id: "qux",
          label: "Qux"
        },
        {
          id: "quux",
          label: "Quux"
        },
        {
          id: "corge",
          label: "Corge"
        },
        {
          id: "grault",
          label: "Grault"
        },
        {
          id: "garply",
          label: "Garply"
        },
        {
          id: "waldo",
          label: "Waldo"
        },
        {
          id: "fred",
          label: "Fred"
        }
      ],
      value: [
        {
          id: "foo",
          label: "Foo"
        },
        {
          id: "bar",
          label: "Bar"
        }
      ]
    }
  }
];

export default {
  data() {
    return {
      selectArray
    };
  }
};
</script>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 2px 0;
}
</style>

No wrap example

The noWrap prop is set to true and the max-width of the multiselect parent container is limited to 350px

vue

<template>
  <div class="grid">
    <div class="container">
      <label :for="data1.props.inputId">{{ data1.title }}</label>
      <NcSelect
        :no-wrap="false"
        v-bind="data1.props"
        v-model="data1.props.value"
      />
    </div>
    <div class="container">
      <label :for="data2.props.inputId">{{ data2.title }}</label>
      <NcSelect
        :no-wrap="true"
        v-bind="data2.props"
        v-model="data2.props.value"
      />
    </div>
  </div>
</template>

<script>
import GenRandomId from "../../utils/GenRandomId.js";

const getRandomId = () => {
  return `select-${GenRandomId()}`;
};

const data1 = {
  title: "Wrapped (Default)",
  props: {
    inputId: getRandomId(),
    multiple: true,
    closeOnSelect: false,
    options: [
      "foo",
      "bar",
      "baz",
      "qux",
      "quux",
      "corge",
      "grault",
      "garply",
      "waldo",
      "fred"
    ],
    value: [
      "foo",
      "bar",
      "baz",
      "qux",
      "quux",
      "corge",
      "grault",
      "garply",
      "waldo",
      "fred"
    ]
  }
};

const data2 = {
  title: "Not wrapped",
  props: {
    inputId: getRandomId(),
    multiple: true,
    closeOnSelect: false,
    options: [
      "foo",
      "bar",
      "baz",
      "qux",
      "quux",
      "corge",
      "grault",
      "garply",
      "waldo",
      "fred"
    ],
    value: [
      "foo",
      "bar",
      "baz",
      "qux",
      "quux",
      "corge",
      "grault",
      "garply",
      "waldo",
      "fred"
    ]
  }
};

export default {
  data() {
    return {
      data1,
      data2
    };
  }
};
</script>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
}

.container {
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 2px 0;
}
</style>

User select examples

vue

<template>
  <div class="grid">
    <div v-for="{ title, props } in selectArray" class="container">
      <label :for="props.inputId">{{ title }}</label>
      <NcSelect v-bind="props" v-model="props.value" />
    </div>
  </div>
</template>

<script>
import AccountGroup from "@mdi/svg/svg/account-group.svg?raw";
import Email from "@mdi/svg/svg/email.svg?raw";

import GenRandomId from "../../utils/GenRandomId.js";

const getRandomId = () => {
  return `select-${GenRandomId()}`;
};

const selectArray = [
  {
    title: "User select",
    props: {
      inputId: getRandomId(),
      userSelect: true,
      options: [
        {
          id: "0-john",
          displayName: "John",
          isNoUser: false,
          subtitle: "john@example.org",
          icon: ""
        },
        {
          id: "0-emma",
          displayName: "Emma",
          isNoUser: false,
          subtitle: "emma@example.org",
          icon: ""
        },
        {
          id: "0-olivia",
          displayName: "Olivia",
          isNoUser: false,
          subtitle: "olivia@example.org",
          icon: ""
        },
        {
          id: "0-noah",
          displayName: "Noah",
          isNoUser: false,
          subtitle: "noah@example.org",
          icon: ""
        },
        {
          id: "0-oliver",
          displayName: "Oliver",
          isNoUser: false,
          subtitle: "oliver@example.org",
          icon: ""
        },
        {
          id: "1-admin",
          displayName: "Admin",
          isNoUser: true,
          subtitle: null,
          iconSvg: AccountGroup,
          iconTitle: "Group icon"
        },
        {
          id: "2-org@example.org",
          displayName: "Organization",
          isNoUser: true,
          subtitle: "org@example.org",
          iconSvg: Email,
          iconTitle: "Email icon"
        }
      ]
    }
  },

  {
    title: "Multiple user select (stay open on select)",
    props: {
      inputId: getRandomId(),
      userSelect: true,
      multiple: true,
      closeOnSelect: false,
      options: [
        {
          id: "0-john",
          displayName: "John",
          isNoUser: false,
          subtitle: "john@example.org",
          icon: ""
        },
        {
          id: "0-emma",
          displayName: "Emma",
          isNoUser: false,
          subtitle: "emma@example.org",
          icon: ""
        },
        {
          id: "0-olivia",
          displayName: "Olivia",
          isNoUser: false,
          subtitle: "olivia@example.org",
          icon: ""
        },
        {
          id: "0-noah",
          displayName: "Noah",
          isNoUser: false,
          subtitle: "noah@example.org",
          icon: ""
        },
        {
          id: "0-oliver",
          displayName: "Oliver",
          isNoUser: false,
          subtitle: "oliver@example.org",
          icon: ""
        },
        {
          id: "1-admin",
          displayName: "Admin",
          isNoUser: true,
          subtitle: null,
          iconSvg: AccountGroup,
          iconTitle: "Group icon"
        },
        {
          id: "2-org@example.org",
          displayName: "Organization",
          isNoUser: true,
          subtitle: "org@example.org",
          iconSvg: Email,
          iconTitle: "Email icon"
        }
      ]
    }
  }
];

export default {
  data() {
    return {
      selectArray
    };
  }
};
</script>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(1, 500px);
  gap: 10px;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 2px 0;
}
</style>

NcSelect #

Props #

Events #

Slots #

Description #

Basic examples #

No wrap example #

User select examples #

NcSelect

Props

Events

Slots

Description

Basic examples

No wrap example

User select examples