# vue-listbox

> A Vue.js (v2.x+) component that support large list with high scroll performance.

Latest version **1.0.0** (published 2018-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-listbox
pnpm add vue-listbox
yarn add vue-listbox
bun add vue-listbox
```

## 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 | 1.0.0 |
| Published | 2018-02-22 |
| First published | 2018-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 41.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | John White |
| Maintainers | john-white-92 |

## Links

- npm: https://www.npmjs.com/package/vue-listbox
- Repository: https://github.com/john-white-92/vue-listbox
- Homepage: https://github.com/john-white-92/vue-listbox#readme
- Issues: https://github.com/john-white-92/vue-listbox/issues
- npm.io page: https://npm.io/package/vue-listbox

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.4
- [vue-scrollbox](https://npm.io/package/vue-scrollbox.md) ^1.0.1

## Recent versions

- 1.0.0 (latest) — 2018-02-22

## README

# vue-listbox
A Vue.js (v2.x+) component that support large list with high scroll performance.

# Dependencies
* Vue.js (v2.x+)
* vue-scrollbox (v1.0.1)

# Installation
## NPM

 `$ npm install vue-listbox  --save`

import the script:

   import VueListbox from 'vue-listbox';

## Script tag
Grab the minified version under `dist/vue-listbox.min.js`
It will export a global `VueListbox` variable.

# Usage

## Register the component globally or locally:
```js
Vue.component('vue-listbox', VueListbox);
```
OR
```js
...
components: {
  VueListbox
}
...
```

## HTML
```vue
<vue-listbox mode="row-wrap">
  <component
    v-for="item in listItems"
    :key="item.id"
    :is="item.component"
    :width="item.width"
    :height="item.height"
    :style="{ 'width': `${item.width}px`, height: `${item.height}px` }"
    v-bind="item.data">
  </component>
</vue-listbox>
```

## Props
| Name | Type | Description |
| --- | --- | --- |
| `mode` | `String` | `row-wrap` **default: none** |

## DEMO Item
```js
let id = 6
{
  id, // unique, don't use index
  component: `item-test-1`,
  width: 260, // px
  height: 100, // px
  data: {
    title: `Big item { id: ${id} }`,
    description: `some description`
  }
}
```

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