0.0.10 • Published 4 years ago
ts-multiselect v0.0.10
Ts-Multiselect
This is a very basic, lightweight dropdown with multi (and single) selection written in typescript (no jQuery).
Examples: StackBlitz
Installation
- Add package with:
npm install ts-multiselect- Add styles to your global styles file:
@import "~ts-multiselect/dist/style.css";Usage
- Create an element and give him unique id:
<div id="my-multiselect"></div>- Instantiate Multiselect class and pass config:
import {Multiselect} from 'ts-multiselect';
const myMultiselect = new Multiselect({
id: 'my-multiselect',
options: [
{
value: 1,
label: 'Awesome,
},
],
});- Simply get selected items by:
console.log(myMultiselect.selected);Config
Inputs:
| Field | Type | Description | Required | Default |
|---|---|---|---|---|
| id | string | Unique id for element where multiselect will be rendered | Yes | |
| options | IMultiselectOption[] | An array of objects (see IMultiselectOption section) | Yes | [] |
| multiple | boolean | Allow single or multiple selection | No | true |
| singularNominativeLabel | string | Label for one selected item (see Language section) | No | |
| pluralNominativeLabel | string | Label for 2-4 selected items (see Language section) | No | |
| pluralGenitiveLabel | string | Label for 5+ selected items (see Language section) | No | |
| placeholder | string | Displayed in selection container when no item is selected | No | |
| headerLabel | string | Displayed above selection container (aka label) | No | |
| selected | any[] | Default selection. Values should be the same as value field in options | No | [] |
Outputs:
| Field | Parameters | Description | Required |
|---|---|---|---|
| onDropdownOpen | () => any | Emits event when dropdown opens | No |
| onDropdownClose | (selectedItems: any[]) => any | Emits event when dropdown closes | No |
| onSelectionChange | (selectedItems: any[]) => any | Emits event when selection is changed | No |
Methods and properties:
| Field | Description |
|---|---|
| init() | It creates elements and appends it to container. Ypu dont have to call it after class instantiate. |
| destroy() | Removes all elements from DOM and all listeners. If you want to create the same multiselect just call init() method . |
| reset() | Clear selection and show placeholder (if provided). |
| hide() | Clear DOM but leave all references and current selection. You can simply render multiselect after hiding and it will looks like never hidden. |
| render() | Show multiselect after hiding. |
| selected | Get selected items. |
| rendered | Determine if multiselect is rendered. |
IMultiselectOption interface
Simply pass two fields to make an option:
| Field | Type | Description | Required |
|---|---|---|---|
| value | any (but preferred number or string due to initial select comparison) | Value which will be passed in selected array. | Yes |
| label | string | Label to show in dropdown or in selection-container | Yes |
Language
When item is selected (single item in single mode or one item in a multiple mode) it will display an item label in selection container.
When 2 items (only in a multiple mode) are selected you will see 2 items in selection container by default.
You can add plural forms in options (in Polish it would be for example):
singularNominativeLabel: 'porcja', // 1 porcja
pluralNominativeLabel: 'porcje', // 2 porcje
pluralGenitiveLabel: 'porcji', // 5 porcjiIf it does not affect your language, you can leave these fields empty.