# @laomao800/vue-item-list-selector

> An item selector Vue.js component.

Latest version **2.1.5** (published 2019-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @laomao800/vue-item-list-selector
pnpm add @laomao800/vue-item-list-selector
yarn add @laomao800/vue-item-list-selector
bun add @laomao800/vue-item-list-selector
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.5 |
| Published | 2019-12-26 |
| First published | 2018-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 127.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | laomao800 |
| Maintainers | laomao800 |

## Links

- npm: https://www.npmjs.com/package/@laomao800/vue-item-list-selector
- Repository: https://github.com/laomao800/vue-item-list-selector
- Issues: https://github.com/laomao800/vue-item-list-selector/issues
- npm.io page: https://npm.io/package/@laomao800/vue-item-list-selector

## Dependencies (5)

- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^2.0.1
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^2.1.0
- [@laomao800/mark-match](https://npm.io/package/@laomao800/mark-match.md) ^1.1.0
- [vue-virtual-scroll-list](https://npm.io/package/vue-virtual-scroll-list.md) ^1.2.8
- [compute-scroll-into-view](https://npm.io/package/compute-scroll-into-view.md) ^1.0.11

## Recent versions

- 2.1.5 (latest) — 2019-12-26
- 2.1.4 — 2019-12-25
- 2.1.3 — 2019-11-07
- 2.1.0 — 2019-10-31
- 2.0.2 — 2019-10-29
- 2.0.1 — 2019-10-27
- 2.0.0 — 2019-10-25
- 1.1.0 — 2018-12-17
- 1.0.0 — 2018-12-14
- 0.4.2 — 2018-04-25
- 0.4.0 — 2018-04-17
- 0.3.9 — 2018-04-04
- 0.3.8 — 2018-04-03
- 0.3.7 — 2018-03-20
- 0.3.6 — 2018-03-20
- … 8 more at https://npm.io/package/@laomao800/vue-item-list-selector/versions

## README

# item-list-selector

[![Build Status](https://travis-ci.org/laomao800/vue-item-list-selector.svg?branch=master)](https://travis-ci.org/laomao800/vue-item-list-selector)
[![codecov](https://codecov.io/gh/laomao800/vue-item-list-selector/branch/master/graph/badge.svg)](https://codecov.io/gh/laomao800/vue-item-list-selector)
[![npm](https://img.shields.io/npm/v/@laomao800/vue-item-list-selector.svg)](https://www.npmjs.com/package/@laomao800/vue-item-list-selector)

## Install

```bash
# npm
npm install --save @laomao800/vue-item-list-selector

# yarn
yarn add @laomao800/vue-item-list-selector
```

## Documentation

[中文](https://laomao800.github.io/vue-item-list-selector/zh/) | [English](https://laomao800.github.io/vue-item-list-selector/)

## Usege

```vue
<template>
  <ItemListSelector
    v-model="value"
    :options-data="optionsData"
  />
</template>

<script>
import ItemListSelector from '@laomao800/ItemListSelector'

export default {
  components: { ItemListSelector },
  data() {
    return {
      value: [],
      optionsData: [
        { label: 'label-1', value: 1 },
        { label: 'label-2', value: 2 },
        { label: 'label-3', value: 3 },
        { label: 'label-4', value: 4 }
      ]
    }
  }
}
</script>
```

## Props

### value/v-model

- type: Function
- default: `[]`

Binding value. Should be an array when multi-select mode.

### optionsData

- type: Array/Promise/Function
- default: `[]`

The array of options. When the item is the object, it can work with `labelKey` and `valueKey` to configure the option text property and the property to be submitted to value.

When the type is a function, it can return directly or use the callback function in the params to resolve the result.

```js
{
  optionsData: (done) => {
    const result = []
    // return result
    // or
    // some sync/async works
    done(result)
  }
}
```

### multiple

- type: Boolean
- default: `true`

Whether multi-select mode

### loadingText

- type: String
- default: `'Loading...'`

Text display when async `optionsData` resolving data.

### notFoundText

- type: String
- default: `'No results'`

Text display when no matching search results.

### searchText

- type: String
- default: `'Search'`

Search text input's Placeholder

### splitKeyword

- type: Boolean
- default: `true`

Whether to use space-separated keywords when searching.

### matchTemplate

- type: Function
- default: t => \`&lt;mark&gt;${t}&lt;/mark&gt;\`

Matching text formatter.

### labelKey

- type: String
- default: `'label'`

Specify the label text property while `optionsData` item is an object.

If `optionTemplate` is not configured, the property value will also be used as the search text of the internal default filter method.

### valueKey

- type: String
- default: `undefined`

Specify the binding `value/v-model` property while `optionsData` item is an object.

You can also use this property to help bind default values:

```js
data() {
  return {
    value: 1
    optionsData: [
      { label: 'label-1', value: 1 },
      { label: 'label-2', value: 2 }
    ]
  }
}
```

### optionTemplate

- type: Function
- default: `undefined`
- params: (option)

Custom option label format function. Should return a string, and the return content will also use as a search text for the internal default filter method.

To customize the option's html content should use the slot [option-template](#option-template) .

### filterMethod

- type: Function
- default: `undefined`
- params: (option, keyword)

Custom item filter method. Param `option` is item from options array, `keyword` is the current query keyword. Return `true` to match the option. Internal default filter method was [@laomao800/mark-match](https://github.com/laomao800/mark-match) .

### optionHeight

- type: Number
- default: 34

Each list item height. Use to calculate the virtual-list outside container viewport.

### optionsRemain

- type: Number
- default: 6

How many items should be shown in virtual-list viewport.

### optionsBench

- type: Number
- default: 6

How many items not show in virtual-list viewport but exist in real DOM.

## Events

| Events         | Description                          |
| -------------- | ------------------------------------ |
| change         | Trigger on binding value changed     |
| options-inited | Trigger on `optionsData` was loaded. |

## Methods

| Methods               | Params                        | Description                                                               |
| --------------------- | ----------------------------- | ------------------------------------------------------------------------- |
| setValue(filterFn)    | filterFn: (option) => boolean | Replace current binding values with the new values filtered by `filterFn` |
| addValue(filterFn)    | filterFn: (option) => boolean | Add values filtered by `filterFn` from the binding value                  |
| removeValue(filterFn) | filterFn: (option) => boolean | Remove values filtered by `filterFn` from the binding value               |
| reset()               | -                             | Clear binding values                                                      |

## Slots

### `option-template`

| Slot prop | info                              |
| --------- | --------------------------------- |
| option    | `optionsData` origin array item   |
| keyword   | Search keyword                    |
| selected  | Whether current item was selected |

---
_Source: https://npm.io/package/@laomao800/vue-item-list-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._