# @laomao800/vue-select-wrapper

> A basic Vue.js Component that can wrap anything as a dropdown type selector.

Latest version **1.3.1** (published 2020-11-04) · MIT license · 0 weekly downloads

## Install

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

## 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 | 1.3.1 |
| Published | 2020-11-04 |
| First published | 2019-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 89 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | laomao800 |
| Maintainers | laomao800 |
| Keywords | vue, dropdown, select |

## Links

- npm: https://www.npmjs.com/package/@laomao800/vue-select-wrapper
- Repository: https://github.com/laomao800/vue-select-wrapper
- Issues: https://github.com/laomao800/vue-select-wrapper/issues
- npm.io page: https://npm.io/package/@laomao800/vue-select-wrapper

## Dependencies (3)

- [has-values](https://npm.io/package/has-values.md) ^2.0.1
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.4.4
- [@laomao800/parse-size-with-unit](https://npm.io/package/@laomao800/parse-size-with-unit.md) ^1.0.0

## Recent versions

- 1.3.1 (latest) — 2020-11-04
- 1.3.0 — 2020-07-31
- 1.2.1 — 2019-10-29
- 1.2.0 — 2019-10-04
- 1.1.1 — 2019-10-02
- 1.1.0 — 2019-09-27

## README

# vue-select-wrapper

A basic Vue.js Component that can wrap anything as a dropdown type selector.

![vue-select-wrapper preview](preview.png)

## Install

```bash
# yarn
yarn add @laomao800/vue-select-wrapper

# npm
npm install --save @laomao800/vue-select-wrapper
```

## Documentation

[中文](https://laomao800.github.io/vue-select-wrapper/zh/) | [English](https://laomao800.github.io/vue-select-wrapper/)

## Props

| prop             | type          | default                | description                                                                                                                    |
| ---------------- | ------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| value/v-model    | any           | `undefined`            | Binding value. Should be an array when `multiple:true`                                                                         |
| multiple         | boolean       | `false`                | whether use multiple-select                                                                                                    |
| placeholder      | string        | `''`                   | placeholder                                                                                                                    |
| append-to-body   | boolean       | `true`                 | Append the dropdown element to `<body>`                                                                                        |
| dropdown-width   | number/string | `undefined`            | Width of the dropdown element. If not provided, the trigger element's width will be used.                                      |
| dropdown-z-index | number        | `1000`                 | Dropdown element z-index                                                                                                       |
| disabled         | boolean       | `false`                | Disable the component                                                                                                          |
| size             | string        | `''`                   | Component size. Could be `medium/small/mini`                                                                                   |
| clearable        | boolean       | `false`                | Whether select can be cleared                                                                                                  |
| limit            | number        | `Infinity`             | Limit the number of selected options displayed, must be greater than `0`. The rest will be hidden within the limitText string. |
| limit-text       | function      | count => \`+${count}\` | Function that processes the message shown when selected elements pass the defined limit.                                       |
| popper-class     | string        | `''`                   | Custom class name for the dropdown                                                                                             |
| loading          | boolean       | `false`                | Whether the dropdown is display the loading status                                                                             |
| loading-text     | string        | `'Loading'`            | Text in the dropdown while loading                                                                                             |
| close-on-select  | boolean       | -                      | Close a dropdown when an option is chosen. default: single mode `true` , multiple mode `false` .                               |

## Slots

### value-template

Custom content of the chosen values. Works in both single-select and multi-select modes.

```vue
<SelectWrapper v-model="selection">
  <template #value-template="{ value }">
    {{ value.valueProperty }}
  </template>
</SelectWrapper>
```

## Methods

| Methods          | Description              |
| ---------------- | ------------------------ |
| showDropdown()   | Show the dropdown        |
| hideDropdown()   | Hide the dropdown        |
| toggleDropdown() | Toggle the dropdown      |
| clearValue()     | Clear all value          |
| updatePopper()   | Update dropdown position |

## Events

| Event          | Description                                  | Parameters                                  |
| -------------- | -------------------------------------------- | ------------------------------------------- |
| change         | Trigger on value change                      | (newVal)                                    |
| visible-change | Trigger on dropdown toggle                   | (visible) `true` for show, `false` for hide |
| clear          | Click the clear icon or execute clearValue() | -                                           |

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