hub / github.com/riophae/vue-treeselect

github.com/riophae/vue-treeselect @v0.4.0 sqlite

repository ↗ · DeepWiki ↗ · release v0.4.0 ↗

191 symbols 421 edges 51 files 8 documented · 4%

README

vue-treeselect

npm monthly downloads jsDelivr monthly hits License

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

Vue-Treeselect Screenshot

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 Arrow Up & Arrow Down keys, select option using Enter key, etc.)
Rich options & highly customizable
Supports a wide range of browsers (see below)
RTL support

Requires Vue 2.2+

Getting Started

It's recommended to install vue-treeselect via npm, and build your app using a bundler like webpack.

npm install --save @riophae/vue-treeselect

This example shows how to integrate vue-treeselect with your Vue SFCs.


<template>



    <treeselect v-model="value" :multiple="true" :options="options" />



</template>

<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/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>
  <head>

    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>

    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.3.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.3.0/dist/vue-treeselect.min.css">
  </head>
  <body>



      <treeselect v-model="value" :multiple="true" :options="options" />



  </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>

Documentation & Live Demo

Visit the website

Note: please use a desktop browser since the website hasn't been optimized for mobile devices.

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 to reproduce bugs and then open an issue.

Contributing

Fork & clone the repo
Install dependencies by yarn or npm install
Check out a new branch
npm run dev & hack
Make sure npm test passes
Push your changes & file a pull request

Credits

This project is inspired by vue-multiselect, react-select and Ant Design. Special thanks go to their respective authors!

Some icons used in this project:

"link" icon made by Smashicons is licensed under CC 3.0 BY
"spinner" icon from SpinKit is licensed under the MIT License
"caret" icon made by Dave Gandy is licensed under CC 3.0 BY
"delete" icon made by Freepik is licensed under CC 3.0 BY
"checkmark symbol" & "minus symbol" icons made by Catalin Fertu are licensed under CC 3.0 BY

License

Released under the MIT License.

Core symbols most depended-on inside this repo

typeSearchText

called by 67

test/unit/specs/shared.js

leftClick

called by 24

test/unit/specs/shared.js

findInput

called by 18

test/unit/specs/shared.js

findOptionByNodeId

called by 15

test/unit/specs/shared.js

createMap

called by 12

src/utils/createMap.js

createKeyObject

called by 11

test/unit/specs/shared.js

includes

called by 11

src/utils/includes.js

pressEnterKey

called by 9

test/unit/specs/shared.js

Shape

Function 191

Languages

TypeScript100%

Modules by API surface

src/mixins/treeselectMixin.js92 symbols

test/unit/specs/shared.js30 symbols

test/unit/specs/Props.spec.js9 symbols

docs/components/utils.js9 symbols

test/unit/specs/utils.spec.js7 symbols

src/utils/watchSize.js7 symbols

test/unit/specs/Searching.spec.js5 symbols

docs/main.js5 symbols

test/unit/specs/KeyboardSupport.spec.js3 symbols

test/unit/specs/DynamicalLoading.spec.js3 symbols

test/unit/specs/Basic.spec.js3 symbols

src/utils/setupResizeAndScrollEventListeners.js3 symbols

Dependencies from manifests, versioned

@babel/core7.0.0 · 1×

@babel/plugin-syntax-jsx7.0.0 · 1×

@babel/plugin-transform-runtime7.0.0 · 1×

@babel/preset-env7.3.1 · 1×

@babel/runtime7.3.1 · 1×

@size-limit/preset-big-lib2.0.2 · 1×

@vue/test-utils1.0.0-beta.16 · 1×

autoprefixer9.4.6 · 1×

babel-eslint10.0.1 · 1×

babel-helper-vue-jsx-merge-props2.0.3 · 1×

babel-loader8.0.0 · 1×

babel-plugin-istanbul5.0.1 · 1×

For agents

$ claude mcp add vue-treeselect \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact