@r2rka/vue3-treeselect

[!NOTE] Forked from public archive https://megafetis.github.io/vue3-treeselect-demo/ In order to continue developing and keeping up with most recent updates

• property value => modelValue
• event input => updated:modelValue
• Now use slots with <template>
• Scoped slots new API. Use <template #slot-name> instead.
• labelClassName countClassName are no longer part of the #option-label.

• Replace render() with <template> ✓
• Use Composition API in main component ✓
• Remove mixin usage ✓
• Rework v-model ✓
• Use useSlots composable ✓
• Use defineEmits ✓
• Rework SingleValue ✓
• Rework MultipleValue ✓
• Rework scoped slots ✓
• Rework nested values ✓
• Migrate to Vite ✓
• Rework async/async children/async search functionality ✓
• Rework async functionality ✓

• Use CompositionAPI across all components ⚒
• Rework MenuPortal to use vue <Teleport> instead ⚒
• Publish new docs portal ⚒

A multi-select component with nested options support for Vue 3. Thank to riophae and his sources and library for vue 2 taken as basis.

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 3.0+

Getting Started

npm install --save @r2rka/vue3-treeselect

yarn add @r2rka/vue3-treeselect

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

<template>
  <div id="app">
    <TreeSelect v-model="value" :multiple="true" :options="options" />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import TreeSelect from '@r2rka/vue3-treeselect'
  import 'vue3-treeselect/dist/style.css'
  
  const value = ref(null);
  const options = [ 
      {
        id: 'a',
        label: 'a',
        children: [{
          id: 'aa',
          label: 'aa',
        }, {
          id: 'ab',
          label: 'ab'
        }]
      },
      {
        id: 'b',
        label: 'b',
      },
      {
        id: 'c',
        label: 'c',
      }];
</script>

Slots Example

<template>
  <Treeselect v-model="value" :options="options" :close-on-select="false"
  >
    /** #before-list */
    <template #before-list>
      <div>Before List</div>
    </template>
    
    /** #after-list */
    <template #after-list>
      <div>After List</div>
    </template>

    /**  #option-label */
    <template #option-label="{ node, shouldShowCount, count }">
      <div>{{ node.id }} {{ shouldShowCount }} {{ count }}</div>
    </template>

    /**  #value-label */
    <template #value-label="{ node }">
      <div>{{ node.id }}</div>
    </template>
    
  </Treeselect>
</template>

Documentation for vue 2 & Live Demo. Be careful with breaking changes above.

Visit the website

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

Browser Compatibility

• Chrome
• Edge
• Firefox
• 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 open an issue.

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. Push your changes & file a pull request

Credits

This project is inspired by vue-treeselect. 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.