# ui-dropdownlist

> Dropdown list as part of a larger web UI component

Latest version **2.0.0** (published 2016-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install ui-dropdownlist
pnpm add ui-dropdownlist
yarn add ui-dropdownlist
bun add ui-dropdownlist
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2016-05-04 |
| First published | 2016-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alexey Gorokhov |
| Maintainers | agorokhov |
| Keywords | web UI component |

## Links

- npm: https://www.npmjs.com/package/ui-dropdownlist
- Repository: https://github.com/AlexeyGorokhov/ui-dropdownlist
- Issues: https://github.com/AlexeyGorokhov/ui-dropdownlist/issues
- npm.io page: https://npm.io/package/ui-dropdownlist

## Dependencies (2)

- [delegate-normalizer](https://npm.io/package/delegate-normalizer.md) ^1.0.0
- [stylesheet-injector](https://npm.io/package/stylesheet-injector.md) ^1.0.0

## Recent versions

- 2.0.0 (latest) — 2016-05-04
- 1.0.0 — 2016-04-26

## README

# ui-dropdownlist

Dropdown list as part of a larger web UI component

[![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square)](https://github.com/Flet/semistandard)

## Installation

```bash
$ npm install ui-dropdownlist --save-dev
```

## Usage

```javascript
const DropdownList = require('ui-dropdownlist');
const options = {
  // Set up options here (see below)
};

const someControl = new DropdownList(options);
someContainerElement.appendChild(someControl.element);
someControl.getValue();
```

## Options

Type: `{Object}`

### width

Type: `{String}`

Optional. Default: `100%`.

Sets the width of the input element.

### tabindex

Type: `{Integer}`

The value of `tabindex` attribute to be set for the DOM element. Default: `0`.

### validator

Type: `{Function}`

A function that will be used to validate the element's current value. Any truthy value returned by the function will mean the element's value is valid. Any falsy value returned by the function will mean the element's value is NOT valid.

If omitted, all element's values are treated as valid.

When called, the function will be passed the following arguments:
* `{String} val` - Current element's value


### onValueChange

Type: `{Function | Array<Function>}`

Callback function(s) that will be called every time the value of the element changes.

When called, the function will be passed the following arguments:
* `{String} val` - New value of the element.

### onValidationStatusChange

Type: `{Function | Array<Function>}`

Callback function(s) that will be called every time the validation status of the element changes.

When called, the function will be passed the following arguments:
* `{Boolean} isValid` - New validation status.

## API

### Properties

#### element

Type: `{HTMLSelectElement}`

Returns reference to the DOM node created by the constructor.

#### isValid

Type: `{Boolean}`

Returns the current validation status of the element.

### Methods

#### `focus()`

Sets input focus on the element.

Return: `{undefined}`

#### `setValue(val)`

Sets the element's value. If the element's item collection doesn't contain an item with `val` value, the selected value doesn't change.

Parameters:

* `{String} val` - New value

Return: `{undefined}`

#### `getValue()`

Gets the current value of the element.

Return: `{String}`

#### `getItems()`

Gets the collection of `value, label` pairs of all items the element includes.

Return: `{Array<String, String>}`

#### `enable()`

Enables the input field.

Return: `{undefined}`

#### `disable()`

Disables the input field.

Return: `{undefined}`

#### `addItem(val, label)`

Add new item to the end of the item list.

Parameters:

* `{String} val` - Value of the item.
* `{String} label` - Text label of the item.

Return: `{undefined}`

#### `addItemBefore(val, label, beforeVal)`

Add new item before an existing item. If no item with value `beforeVal` is present on the item list, the new item is added to the end of the list.

Parameters:

* `{String} val` - Value of the new item.
* `{String} label` - Text label of the new item.
* `{String} beforeVal` - Value of existing item the new item has to be added before.

Return: `{undefined}`

#### `addItemAfter(val, label, afterVal)`

Add new item after an existing item. If no item with value `afterVal` is present on the item list, the new item is added to the end of the list.

Parameters:

* `{String} val` - Value of the new item.
* `{String} label` - Text label of the new item.
* `{String} afterVal` - Value of existing item the new item has to be added after.

Return: `{undefined}`

#### `removeItem(val)`

Remove an existing item from the item list.

If no item with value `val` is present on the item list, nothing happens.

If the item with value `val` is currently selected, the first item on the list will become selected.

Parameters:

* `{String} val` - Value of the removed item.

Return: `{undefined}`

#### `empty()`

Remove all items from the item list.

Return: `{undefined}`

---
_Source: https://npm.io/package/ui-dropdownlist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._