# ui-iterator

> Iterator element as part of a larger web UI component

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

## Install

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

## 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-01 |
| First published | 2016-04-27 |
| 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-iterator
- Repository: https://github.com/AlexeyGorokhov/ui-iterator
- Issues: https://github.com/AlexeyGorokhov/ui-iterator/issues
- npm.io page: https://npm.io/package/ui-iterator

## 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-01
- 1.0.0 — 2016-04-27

## README

# ui-iterator

Iterator element 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-iterator --save-dev
```

## Usage

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

const someIterator = new Iterator(options);
someContainerElement.appendChild(someIterator.element);
someIterator.getValue();
```

## Options

Type: `{Object}`

### tabindex

Type: `{Integer}`

The value of `tabindex` attribute to be set for the DOM element of the left (decrementing) button. Default: `1`. The right (incrementing) button's tabindex will get +1.

### incrementor

Type: `{Function}`

A function that is supposed to produce the next value to be displayed in the element when a user clicks the increment button.

When called, the function will be passed the following parameters:

* `{Any} currentVal` - the current element's value.

The function is supposed to return an object with properties:

* `{Any} value` - the value that is supposed to be returned by the element's `getValue()` method;
* `{String} label` - a text label that is supposed to be displayed in the element;
* `{Boolean} end` - `true` if there will not be the next value; the increment button becomes disabled.

### decrementor

Type: `{Function}`

The same as `incrementor` but for decrementing value.

### initialValue

Type: `{Object}`

Sets up the initial state of the element before any user interaction.

Properties:

* `{Any} value` - the value that is supposed to be returned by the element's `getValue()` method;
* `{String} label` - a text label that is supposed to be displayed in the element;
* `{Boolean} incrementAvailable` - if `false`, the increment button is set up in the disabled mode;
* `{Boolean} decrementAvailable` - if `false`, the decrement button is set up in the disabled mode.

### 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.

## API

### Properties

#### element

Type: `{HTMLElement}`

Returns reference to the DOM node created by the constructor.

### Methods

#### `setValue(valueData)`

Sets the element's value.

Parameters:

* `{Object} valueData` - an object describing the new state of the element.

Properties:

* `{Any} value` - the value that is supposed to be returned by the element's `getValue()` method;
* `{String} label` - a text label that is supposed to be displayed in the element;
* `{Boolean} incrementAvailable` - if `false`, the increment button is set up in the disabled mode;
* `{Boolean} decrementAvailable` - if `false`, the decrement button is set up in the disabled mode.

Return: `{undefined}`

#### `getValue()`

Gets the current value of the element.

Return: `{Any}`

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