# @fishtank/vue-treeselect

> A multi-select component with nested options support for Vue.js; Forked from riophae/vue-treeselect

Latest version **0.3.1** (published 2022-02-18) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @fishtank/vue-treeselect
pnpm add @fishtank/vue-treeselect
yarn add @fishtank/vue-treeselect
bun add @fishtank/vue-treeselect
```

## Health

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

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2022-02-18 |
| First published | 2018-10-24 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 806.4 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bloomberg Industry |
| Maintainers | gneraltsao, ransanjeev, yoginpatel, oewulum, kwebb30, dmargol_bloomberg, hlopezgudiel |
| Keywords | vue, component, tree, treeview, select, dropdown, treeselect, multiselect, form, control, input, ui, @fishtank |

## Links

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

## Dependencies (7)

- [lodash](https://npm.io/package/lodash.md) 4.17.21
- [is-promise](https://npm.io/package/is-promise.md) 2.2.2
- [watch-size](https://npm.io/package/watch-size.md) ^2.0.0
- [easings-css](https://npm.io/package/easings-css.md) ^1.0.0
- [fuzzysearch](https://npm.io/package/fuzzysearch.md) ^1.0.3
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.0.0-beta.56
- [babel-helper-vue-jsx-merge-props](https://npm.io/package/babel-helper-vue-jsx-merge-props.md) ^2.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2022-02-18
- 0.3.0-0 (prerelease) — 2019-01-24
- 0.2.6 — 2018-11-09
- 0.2.5 — 2018-11-09
- 0.2.4 — 2018-11-09
- 0.2.3 — 2018-11-09
- 0.2.2 — 2018-11-09
- 0.2.1 — 2018-11-09
- 0.2.0 — 2018-11-02
- 0.1.0 — 2018-10-31
- 0.0.37 — 2018-10-24

## README

# vue-treeselect
[![npm](https://badgen.now.sh/npm/v/@riophae/vue-treeselect)](https://www.npmjs.com/package/@fishtank/vue-treeselect) 

> A multi-select component with nested options support for Vue.js; 
> Forked from [Vue-treeselect]([https://github.com/riophae/vue-treeselect)

![Vue-Treeselect Screenshot](https://raw.githubusercontent.com/bloombergbna/fishtank-vue-treeselect/master/screenshot-fishtank-vue-treeselect.png)

### Features

- Single & multiple select with nested options support
- Fuzzy matching
- Async searching
- Delayed loading (load data of deep level options only when needed)
- Keyboard support (navigate using <kbd>Arrow Up</kbd> & <kbd>Arrow Down</kbd> keys, select option using <kbd>Enter</kbd> key, etc.)
- Rich options & highly customizable
- Supports a wide range of browsers (see [below](#browser-compatibility))

*Requires Vue 2.2+*

### Getting Started

It's recommended to install vue-treeselect via npm, and build your app using a bundler like [webpack](https://webpack.js.org/).

```bash
npm install --save @fishtank/vue-treeselect
```

This example shows how to integrate the fishtank vue-treeselect with your [Vue SFCs](https://vuejs.org/v2/guide/single-file-components.html).

```vue
<!-- Vue SFC -->
<template>
  <div id="app">
    <FishtankTreeSelect
      :options="options"
      :max-height="null"
      :hide-control="true"
      :dropdownpopover="false"
      :multiple="true"
      :collapse-menu-padding="true"
      v-model="value" />
  </div>
</template>

<script>
  // import the component
  import FishtankTreeSelect from '@fishtank/vue-treeselect'
  // import the styles
  import '@fishtank/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
  }
</script>
```

### Browser Compatibility

- Chrome
- Edge
- Firefox
- IE ≥ 9
- Safari

It should function well on IE9, but the style can be slightly broken due to the lack of support of some relatively new CSS features, such as `transition` and `animation`. Nevertheless it should look 90% same as on modern browsers.

### Bugs

You can use this [pen](https://codepen.io/riophae/pen/MExgzP) to reproduce bugs and then [open an issue](https://github.com/riophae/vue-treeselect/issues/new).

### Contributing

1. Fork & clone the repo
2. Install dependencies by `yarn` or `npm install`
3. Check out a new branch
4. `npm run dev` & hack
5. Make sure `npm test` passes
6. Push your changes & file a pull request

### Credits

This project is inspired by [vue-multiselect](https://github.com/monterail/vue-multiselect), [react-select](https://github.com/JedWatson/react-select) and [Ant Design](https://github.com/ant-design/ant-design/). Special thanks go to their respective authors!

Some icons used in this project:

  - "link" icon made by [Smashicons](https://www.flaticon.com/authors/smashicons) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)
  - "spinner" icon from [SpinKit](https://github.com/tobiasahlin/SpinKit) is licensed under the [MIT License](https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE)
  - "caret" icon made by [Dave Gandy](https://www.flaticon.com/authors/dave-gandy) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)
  - "delete" icon made by [Freepik](https://www.flaticon.com/authors/freepik) is licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)
  - "checkmark symbol" & "minus symbol" icons made by [Catalin Fertu](https://www.flaticon.com/authors/catalin-fertu) are licensed under [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/)

### License

Copyright (c) 2017-present [Riophae Lee](https://github.com/riophae).

Released under the [MIT License](https://github.com/riophae/vue-treeselect/blob/master/LICENSE).

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