select-pure
SelectPure JavaScript component
Installation
NPM
npm i select-pure --save
Yarn
yarn add select-pure
CDN
<script src="https://unpkg.com/select-pure@latest/dist/bundle.min.js"></script>
Usage
import SelectPure from "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. |
| 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. |
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
- Migrate to Webpack
- Use Lerna or standard versioning
- Use Changelog
Old 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
/