# vue-treeselect-click

> Change the focus trigger to click

Latest version **0.4.4** (published 2021-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-treeselect-click
pnpm add vue-treeselect-click
yarn add vue-treeselect-click
bun add vue-treeselect-click
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.4 |
| Published | 2021-12-29 |
| First published | 2021-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Riophae Lee |
| Maintainers | saturn |
| Keywords | vue, tree, select, treeselect, multiselect |

## Links

- npm: https://www.npmjs.com/package/vue-treeselect-click
- npm.io page: https://npm.io/package/vue-treeselect-click

## Dependencies (8)

- [lodash](https://npm.io/package/lodash.md) ^4.0.0
- [is-promise](https://npm.io/package/is-promise.md) ^2.1.0
- [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.3.1
- [material-colors](https://npm.io/package/material-colors.md) ^1.2.6
- [babel-helper-vue-jsx-merge-props](https://npm.io/package/babel-helper-vue-jsx-merge-props.md) ^2.0.3

## Recent versions

- 0.4.4 (latest) — 2021-12-29
- 0.4.3 — 2021-12-29
- 0.4.2 — 2021-12-29
- 0.4.1 — 2021-12-29
- 0.4.0 — 2021-12-29

## README

# vue-treeselect
[![npm](https://badgen.now.sh/npm/v/@riophae/vue-treeselect)](https://www.npmjs.com/package/@riophae/vue-treeselect) 
![npm monthly downloads](https://badgen.now.sh/npm/dm/@riophae/vue-treeselect)
![License](https://badgen.net/github/license/riophae/vue-treeselect)

> A multi-select component with nested options support for Vue.js

![Vue-Treeselect Screenshot](https://cdn.jsdelivr.net/npm/vue-treeselect-click@0.4.4/src/screenshot.png)

> Change the focus trigger to click

### Getting Started

*Requires Vue 2.2+*
```bash
npm install --save vue-treeselect-click
```

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

```vue
<!-- Vue SFC -->
<template>
  <div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
  </div>
</template>

<script>
  import Treeselect from 'vue-treeselect-click'
  import 'vue-treeselect-click/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define the 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>
```

If you just don't want to use webpack or any other bundlers, you can simply include the standalone UMD build in your page. In this way, make sure Vue as a dependency is included before vue-treeselect.

```html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-treeselect-click@0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vue-treeselect-click@0.4.0/dist/vue-treeselect.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <treeselect v-model="value" :multiple="true" :options="options" />
    </div>
  </body>
  <script>
    // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)

    new Vue({
      el: '#app',
      data: {
        // define the 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>
</html>
```

### 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.

### 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/vue-treeselect-click · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
