# @andy922200/vue-multi-select

> A Custom Select via Vue 2.0 & TypeScript

Latest version **1.0.0** (published 2021-04-21) · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-04-21 |
| First published | 2021-04-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 129.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andy Lien |
| Maintainers | andy922200 |
| Keywords | typescript, vue, multi-select, component |

## Links

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

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-04-21

## README

# Vue-Multi-Select

以 Vue 2 和 TypeScript 為基底的簡易選擇器
A Vue-Multi-Select via Vue 2.0 & TypeScript

## Table of Contents
  * [Demo](#demo)
  * [Getting Started](#getting-started)
  * [Built With](#built-with)
  * [Author](#author)
  * [License](#license)

## Demo
![Alt text](/demo.gif)

## Getting Started
### Prerequisites 安裝環境建置

* [Node.js](https://nodejs.org/en/) - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
* [Vue 2.0](https://vuejs.org/) - The Progressive JavaScript Framework

### How to use 如何使用

1. Install via npm 使用 npm 來進行安裝
```javascript
    cd /"your-vue-project-root-folder"/
    npm install @andy922200/vue-multi-select
```
2. Usage in Vue 2 在 Vue 2 環境下使用
```javascript
    /*  main.ts or main.js */
    import '@andy922200/vue-multi-select/dist/vue-multi-select.css'
    import VueMultiSelect from '@andy922200/vue-multi-select'
    Vue.use(VueMultiSelect)
```
3. Use the component in *.vue 在 *.vue 中使用套件 
```html
<!-- Single Layer Mode-->
<template>
    <vue-multi-select 
        selector-title="SingleLayer"
        :is-fetching="isFetching"
        :button-options="{
            close: { name: 'Close1', hide: false},
            apply: { name: 'Apply1', hide: false},
            selectAll: { name: 'SelectAll1', hide: false},
            clear: { name: 'Clear1', hide: false},
        }"
        :options="yourData"
        place-holder-text="placeHolderText"
        @getSelectedOptions="method for receiving data"
    />
</template>

<!-- Double Layer Mode-->
<template>
    <vue-multi-select 
        selector-title="DoubleLayer"
        :is-fetching="isFatherFetching"
        :button-options="{
            close: { name: 'Close2', hide: false},
            apply: { name: 'Apply2', hide: false},
            selectAll: { name: 'SelectAll2', hide: false},
            clear: { name: 'Clear2', hide: false},
        }"
        :double-layer-mode="true"
        :group-mode="true"
        :father-options="tests"
        :children-option-fetch-function="fetchData"
        place-holder-text="placeHolderText"
        @getSelectedOptions="printValue"
    />
</template>
```
### Props 傳入參數
| Name | Default Value | Type | Required | Describe |
| ---- | ------- | --------- | -------- | -------- |
| buttonOptions | buttonOption[] | Object | false | 4 Buttons ( Close, Apply, SelectAll Clear) |
| childrenOptionFetchFunction | {} | Function | false | Fetch ChildrenLayer Option |
| doubleLayerMode | false | Boolean | false | Activate DoubleLayer Mode |
| fatherOptions | [] | Array | false | FatherLayer Options |
| groupMode | false | Boolean | false | Activate GroupMode (The object in each option should include 'groupName' )
| isFetching | false | Boolean | false | built-in spinner |
| isToggleButtonDisable | false | Boolean | false | toggle button status  |
| limit | Infinity| Number | false | limit numbers of user-selected options |
| options| [] | Array | false | Selector Options
| placeHolderText | false | String | false | searchBar placeHolderText |
| single | false | Boolean | false | single select |
| selectorTitle| "" | String | true | Trigger Dropdown Button Text  |


```js
// buttonOption Interface
{
    "name": "string",
    "hide": boolean
}

// buttonOption Default
{
    close: { name: 'Close1', hide: false},
    apply: { name: 'Apply1', hide: false},
    selectAll: { name: 'SelectAll1', hide: false},
    clear: { name: 'Clear1', hide: false},
}
```

### Event 觸發事件
| Name | Type | Describe |
| ---- | --------- | -------- |
| getSelectedOptions | customObject [] [Array] | get user-selected options |

```json
// SingleLayer Option Object Demo
{
    "key1":"value1",
    "key2":"value2",
    "key3":"value3",
    "label": "label1, This should be included.",
    "groupName": "If you are using groupMode, this key-value pair should be included"
}

// DoubleLayer FatherOption Object Demo
{
    "label": "NodeJS",
    "value": "nodejs"
}

// DoubleLayer ChildrenOption Object Demo
{
    "key1":"value1",
    "key2":"value2",
    "key3":"value3",
    "label": "label1, This should be included.",
    "fatherOptionLabel": "This value will be generated from 'DoubleLayer FatherOption Object label'",
    "groupName": "If you are using groupMode, this key-value pair should be included"
}
```
```javascript
// childrenOptionFetchFunction Demo
async fetchData(query='', fatherOptionLabel=''){
    try{
        const { data: rawData } = await axios.get(`/positions.json?search=${query}`)
        const result = rawData.map((d:any)=>{
            const newObject = {
                ... d,
                label: `${fatherOptionLabel} ${d.title}`,
                fatherOptionLabel,
                groupName: d.company ? d.company : 'N/A'
            }
            return newObject
        })
        return result
    }catch(err){
        console.log(err)
    }
}
```
### Customize your Button 客製化按鈕
```html
<vue-multi-select>
    <template #closeBtn="{closeMethod}">
        <button @click="closeMethod">
            Close
        </button>
    </template>

    <template #spinner>
        Your Spinner Component
    </template>
</<vue-multi-select>
```

### Slot 
| Name | Method |
| ---- | --------- |
| closeBtn | closeMethod |
| applyBtn |applyMethod|
| selectAllBtn |selectAllMethod|
| clearBtn |clearSelectedOptionsMethod|
| spinner | None |

## Built With
* [Node.js](https://nodejs.org/en/) - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
* [Vue 2.0](https://vuejs.org/) - The Progressive JavaScript Framework
* [Vue-Sfc-Rollup](https://www.npmjs.com/package/vue-sfc-rollup) - vue-sfc-rollup is a CLI templating utility that scaffolds a minimal setup for compiling a Vue Single File Component (SFC) - or library of multiple SFCs
* [TypeScript](https://www.typescriptlang.org/) - TypeScript extends JavaScript by adding types.

## Author
- [Andy Lien](https://github.com/andy922200)

## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) for details.

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