# @livelybone/vue-select

> A vue select component, includes cascader

Latest version **2.7.0** (published 2023-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @livelybone/vue-select
pnpm add @livelybone/vue-select
yarn add @livelybone/vue-select
bun add @livelybone/vue-select
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.7.0 |
| Published | 2023-12-26 |
| First published | 2018-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 336.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | 2631541504@qq.com |
| Maintainers | livelybone |
| Keywords | vue, select, cascader |

## Links

- npm: https://www.npmjs.com/package/@livelybone/vue-select
- Repository: https://github.com/livelybone/vue-select
- Homepage: https://github.com/livelybone/vue-select#readme
- Issues: https://github.com/livelybone/vue-select/issues
- npm.io page: https://npm.io/package/@livelybone/vue-select

## Dependencies (3)

- [@livelybone/copy](https://npm.io/package/@livelybone/copy.md) ^2.5.4
- [vue-scrollbar-live](https://npm.io/package/vue-scrollbar-live.md) ^5.2.2
- [@livelybone/vue-popper](https://npm.io/package/@livelybone/vue-popper.md) ^2.3.1

## Recent versions

- 2.7.0 (latest) — 2023-12-26
- 2.6.5 — 2019-11-11
- 2.6.4 — 2019-08-04
- 2.6.3 — 2019-08-03
- 2.6.2 — 2019-08-01
- 2.6.1 — 2019-08-01
- 2.6.0 — 2019-08-01
- 2.5.0 — 2019-04-24
- 2.4.4 — 2019-04-10
- 2.4.3 — 2019-04-02
- 2.4.2 — 2019-04-02
- 2.4.1 — 2019-02-21
- 2.4.0 — 2019-02-20
- 2.3.0 — 2019-02-20
- 2.2.1 — 2019-01-10
- … 11 more at https://npm.io/package/@livelybone/vue-select/versions

## README

# @livelybone/vue-select
[![NPM Version](http://img.shields.io/npm/v/@livelybone/vue-select.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/vue-select)
[![Download Month](http://img.shields.io/npm/dm/@livelybone/vue-select.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/vue-select)
![gzip with dependencies: 15kb](https://img.shields.io/badge/gzip--with--dependencies-15kb-brightgreen.svg "gzip with dependencies: 15kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")
![ssr supported](https://img.shields.io/badge/ssr-supported-blue.svg "ssr supported")

> `pkg.module supported`, which means that you can apply tree-shaking in you project

A vue select component, includes cascader

## repository
https://github.com/livelybone/vue-select

## Demo
https://livelybone.github.io/vue/vue-select/

## Run Example
Your can see the usage by run the example of the module, here is the step:

1. Clone the library `git clone https://github.com/livelybone/vue-select.git`
2. Go to the directory `cd vue-select`
3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
4. Open service `npm run dev`
5. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser

## Installation
```bash
npm i -S @livelybone/vue-select
```

## Register
```js
// import all
import {SelectBase, SelectMulti, Cascader, CascaderMulti} from '@livelybone/vue-select';
// or
import * as VueSelect from '@livelybone/vue-select';

// Global register
Vue.component('select-base', SelectBase);
Vue.component('select-multi', SelectMulti);
Vue.component('cascader', Cascader);
Vue.component('cascader-multi', CascaderMulti);

// Local register
new Vue({
  components:{SelectBase, SelectMulti, Cascader, CascaderMulti}
})
```

Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/vue-select/lib/umd/)
```html
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/vue-select/lib/umd/<--module-->.js"></script>
```

## Props

### Common
| Name                      | Type                                      | DefaultValue                                  | Description  |
| ------------------------- | ----------------------------------------- | --------------------------------------------- | ------------ |
| `id`                      | `[String, Number]`                        | none                                          |  |
| `options`                 | `Array`                                   | `[]`                                          | Select options |
| `canEdit`                 | `Boolean`                                 | `true`                                        | If it's set to false, the component can only be used for show |
| `canSearch`               | `Boolean`                                 | `false`                                       | Set to true to enable search |
| `placeholder`             | `String`                                  | none                                          | Placeholder  |
| `searchPlaceholder`       | `String`                                  | `true`                                        | Placeholder of search input |
| `popperProps`             | `Object`                                  | `defaultPopperProps`                          | Props of module [@livelybone/vue-popper](https://github.com/livelybone/vue-popper) |
| `scrollbarProps`          | `Object`                                  | `{isMobile:false, maxHeight: '50vh'}`         | Props of module [@livelybone/vue-scrollbar-live](https://github.com/livelybone/vue-scrollbar-live) |

```js
const defaultPopperProps = {
  arrowPosition: 'start',
  arrowOffsetScaling: 1,
  popperOptions: {
    placement: 'bottom-start',
    // If component is Cascader or CascaderMulti -> `positionFixed: true`
    // More options in https://popper.js.org
  },
}
```

### SelectBase
| Name              | Type                  | DefaultValue          | Description  |
| ----------------- | --------------------- | --------------------- | ------------ |
| `value`           | `[String, Number]`    | none                  |  |
| `inputWrapStyle`  | `[String, Object]`    | none                  |  |

### SelectMulti
| Name              | Type                  | DefaultValue          | Description  |
| ----------------- | --------------------- | --------------------- | ------------ |
| `value`           | `Array`               | none                  |  |

### Cascader
| Name              | Type                  | DefaultValue          | Description  |
| ----------------- | --------------------- | --------------------- | ------------ |
| `value`           | `Array`               | none                  |  |
| `expandType`      | `String`              | `click`               | Options: `['click', 'hover']`. Set how to expand children options |
| `changeOnSelect`  | `Boolean`             | `false`               | If set to true, options of all level can be selected |
| `inputWrapStyle`  | `[String, Object]`    | none                  | input wrap style |

### CascaderMulti
| Name              | Type                  | DefaultValue          | Description  |
| ----------------- | --------------------- | --------------------- | ------------ |
| `value`           | `Array`               | none                  |  |
| `expandType`      | `String`              | `click`               | Options: `['click', 'hover']`. Set how to expand children options |

## Events
| Name              | EmittedData           | Description                                       |
| ----------------- | --------------------- | ------------------------------------------------- |
| `input`           | `[Array, String]`     |  |
| `search`          | `String`              |  |

## style
For building style, you can use the css or scss file in lib directory. 
```js
// scss
import 'node_modules/@livelybone/vue-select/lib/css/index.scss'

// css
import 'node_modules/@livelybone/vue-select/lib/css/index.css'
```
Or
```scss
// scss
@import 'node_modules/@livelybone/vue-select/lib/css/index.scss';

// css
@import 'node_modules/@livelybone/vue-select/lib/css/index.css';
```

Or, you can build your custom style by copying and editing `index.scss`

## QA

1. Error `Error: spawn node-sass ENOENT`

> You may need install node-sass globally, `npm i -g node-sass`

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