SelectPure JavaScript component

Installation

NPM

npm i @jaycverg/select-pure --save

Yarn

yarn add @jaycverg/select-pure

Usage

import SelectPure from "@jaycverg/select-pure";

new SelectPure(element, config);

`element` // Required. Either selector or HTML node.
`config` // Required. Configuration object.

Configuration

| Property | Required | Type | Description | | --- | --- | --- | --- | | option | true | Array | Collection of options to be rendered. Each option consists of value, label and optional property disabled. Properties for the single option object are listed below. | | classNames | false | Object | Object with custom classNames to be used inside select. In the next major version default classNames will be removed and this property will become required. | | multiple | false | Boolean | true if multiple options can be selected. | | autocomplete | false | Boolean | Adds autocomplete input. Disabled by default. | | resetSearchOnSelect | false | Boolean | If true, search input text will be cleared on option selection. This only takes effect if autocomplete is true. | | icon | false | String | If specified - <i></i> will be inserted inside select-pure__selected-label. Works only with multiple option set to true. | | inlineIcon | false | HMTLElement | Custom cross icon for multiple select. | | value | false | String | Array | Initially selected value. If not provided - first option will be selected. If multiple is true -- Array should be provided. | | placeholder | false | String | Placeholder for cases when value is not selected by default. | | onChange | false | Function | Callback that returns value when option is being selected. Returns Array if multiple is true. | | searchFilter | false | Function | Callback that handles filtering of items. This only takes effect if autocomplete is true. Function signature: (searchKey, optionText) => boolean. |

option

Properties of a single option passed to the options Array in configuration.

| Property | Required | Type | Description | | --- | --- | --- | --- | | value | true | String | Value of an option. | | label | true | String | Label of an option. | | disabled | false | Boolean | true if option is disabled. false by default. |

classNames

In the next major version default classNames will be removed and this property will become required.

| Property | Default value | Description | | --- | --- | --- | | select | "select-pure__select" | Wrapper div. | | dropdownShown | "select-pure__select--opened" | Applied to the wrapper when dropdown is shown. | | multiselect | "select-pure__select--multiple" | Applied to the wrapper if it's a multiselect. | | label | "select-pure__label" | Label span. | | placeholder | "select-pure__placeholder" | Placeholder span. | | dropdown | "select-pure__options" | Options dropdown. | | option | "select-pure__option" | Single option. | | optionDisabled | "select-pure__option--disabled" | Single option. | | autocompleteInput | "select-pure__autocomplete" | Autocomplete input | | selectedLabel | "select-pure__selected-label" | Selected label for multiselect. | | selectedOption | "select-pure__option--selected" | Applied to option when selected. | | placeholderHidden | "select-pure__placeholder--hidden" | Hides placeholder when the value is selected. | | optionHidden | "select-pure__option--hidden" | Hides options that does not match autocomplete input. |

API

| Method | Description | | --- | --- | | value() | Returns currently selected value. | | reset() | Resets currently selected value. |

Structure

select-pure/
└── lib/
    └── select-pure.min.js

TODO

• [ ] API method for updating select.
• [ ] Mobile select support.
• [ ] Drop support of default classNames (starting from 1.x.x versions).
• [ ] Drop support of default icon, support only inline SVG instead. (starting from 1.x.x versions).

License

MIT