wopehq / vue3-tree

A tree library for Vue 3

vue3-tree

vue3-tree - A Vue.js 3.0 Tree library

⚡️ Vue 3.0 Composition API

A customizable vuejs tree viewer

Example

How to use

You can review the document for the use of the library.

vue3-tree's Issues

Checkbox states

• When any child row is checked, all related parents should be indeterminate state.
• When all child rows are checked, the parent row should be checked.
• When a parent row is checked, all child rows should be checked.

Use vite library mode

https://vitejs.dev/guide/build.html#library-mode

Support empty nodes array

Hello ! Thanks a lot for your open-source library 🙏

Problem
I encounter a problem when nodes array are empty.
When I check a node, there is a bug because it checks everything.
https://codesandbox.io/s/agitated-snyder-fvvqh?file=/src/App.vue

Solution
Once I delete all empty nodes array. The problem was solved.

Proposal
Is it possible to support empty nodes array to behave the same way as nodes is missing ?
The other advantage is to remove the right arrow when nodes array is empty too as seen in the CodeSandbox link above.

Add 'gap' prop

Allow to send gap prop to tree to add vertical margin between tree items.

Create indent for child items

We should get the component's nest level and create padding for tree-row. Like: :style: {'padding-left': nestLevel * 20 + 'px'}

Support for onClickNode?

I can't handle when click node. Can you help me?
Thank you!

Nodes should be renamed to "children"

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...

  • feature request

• Do you want to request a feature or report a bug?

• What is the current behavior?

[
  {
    "id": 1,
    "label": "Animal",
    "nodes": [
      {
        "id": 2,
        "label": "Dog"
      }
    ]
  }
]

• What is the expected behavior?

[
  {
    "id": 1,
    "label": "Animal",
    "children": [
      {
        "id": 2,
        "label": "Dog"
      }
    ]
  }
]

• What is the motivation / use case for changing the behavior?
  Common usage is like this.

Make icons and checkbox optional

`id` should not be required.

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...

  • feature request

• What is the current behavior?
  Initial data

[
  {
    "id": 1,
    "label": "Animal",
    "nodes": [
      {
        "id": 2,
        "label": "Dog"
      },
      {
        "id": 3,
        "label": "Cat"
      }
    ]
  }
]

• What is the expected behavior?
  If I don't give an id it should generate it.

[
  {
    "label": "Animal",
    "nodes": [
      {
        "label": "Dog"
      },
      {
        "label": "Cat"
      }
    ]
  }
]

• What is the motivation / use case for changing the behavior?
  Common usage is like this. In addition, it is tiring for the end user to create an id for unidentified data.

Highlight search text in tree items

Wrap the search text by <span> element in tree items.

Make filtering case sensitive

Filtering is lower case sensitive only. We must fix this.

How do I handle initial checked nodes ?

I don't see any prop to handle initial checked nodes.
I think it's a common feature for a tree component.
Am I missing something ?

The problem of opening branches without children

Branches without sub-branches should not have an open-on-click effect.

Allow to send custom icon for active and inactive states

We should able to show different icons for open and closed items. We will use slots for this.

Edit wrong data thrown with onDataUpdated

Documentation link error 404

Looks like the link in the README leads nowhere.

Refactor prop & event names

Refactor prop & event names to ensure consistency across the codebase.

For an example, change setNode prop name to set-node.

Allow to use checkboxes for all level tree items

Tree component should accept a :checkbox prop and we should able to send a custom slot for checkbox. An event (e.g. itemSelected) should be emitted when clicked on an item or only exactly checkbox.

Installation Bug

3:29:36 PM [vite] Internal server error: Failed to resolve entry for package "vue3-tree". The package may have incorrect main/module/exports specified in its package.json.

Demo

I'd love to see a demo on the docs page

Scope on node label

• I'm submitting a ...

  • feature request

• What is the current behavior?
  Currently, it's really hard to have nodes with different "state" or have something different than a text, like a button for example

• What is the expected behavior?
  Possibility to put whatever we want in a node, only having the node data parameters

• What is the motivation / use case for changing the behavior?
  This can be useful in many cases, like putting the type of the current node next to the text in a specific color or having a button instead of text to add a child to the node....

• Other information
  I forked the project and implements the solution following the liquor-tree implementation (a good vue2 tree library)
  https://github.com/Daviruss1969/vue3-tree

Change onUpdate emit name

setting up eslint & prettier

Make the tree searchable & filterable

All level tree items should be filtered by a search value.

Build a documentation site with VuePress

https://vuepress.vuejs.org/

husky + lint-staged configuration

Toggling checkbox of parent does not toggle checkbox of all children

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...

  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• Do you want to request a feature or report a bug?

Report a bug

• What is the current behavior?

In the sandbox demo provided, clicking the "Animal" checkbox should cause the Dog checkbox to become checked. Right now, only the Cat checkbox and its children become checked.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

Open the demo and click the checkbox next to Animal

• What is the expected behavior?

The Dog check box should be checked.

• What is the motivation / use case for changing the behavior?

That's how trees are supposed to work.

• Please tell us about your environment:

  • Version: 2.0.0-beta.X
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

To fix it, you should modify function updateChildNodeStatus. There is a statement: const currentNode = {...item, checked, }; which temporarily sets the checked state of Dog, but this is later overridden by the nodeUpdate triggered in the computed filteredData. If you instead mutate the item by adding: item.checked = checked; after this line it appears to correct the problem. However, I should note that when testing this fix, I was passing a reactive tree object, so I'm not positive this will fix the behavior in your demo.

Create basic tree-view

We need to create a very basic tree template with;

• toggleable row
• chevron icon

without;

• indent and any custom styling

It should accept a data prop. The data structure we will use:

  data: [{
    id: '1',
    label: 'a',
    children: [{
      id: '4',
      label: 'aa',
    }, {
      id: '5',
      label: 'ab',
    }],
  }, {
    id: '2',
    label: 'b',
  }, {
    id: '3',
    label: 'c',
  }],

Inconsistent states of checked values during filtering

Style improvements

Provide disabled option for each tree item

Disabled items should be unclickable and have a class.

Add expandable prop property for tree

tree-row clickability

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...

  • feature request

• What is the current behavior?
  Currently only dropdown nodes are clickable to expand the subnodes.

• What is the expected behavior?
  Possibility to make the whole tree-row item clickable to toggle the checkbox.

• What is the motivation / use case for changing the behavior?
  User feedback on usability.

Transfer indeterminate values of checkboxes to slot

Add new node under any node? any icons to add or any method to achive it?

When updating updateNode it should be updated according to the value of useCheckbox

Styling with Tailwind

• I'm submitting a ...

  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• Do you want to request a feature or report a bug?
  Can i use this with Tailwind?

Support for drag & drop (reordering nodes) ?

• I'm submitting a ...

  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• What is the expected behavior?

I would love to see your Tree component support drag & drop (as in https://github.com/holiber/sl-vue-tree), alleviating https://shopify.github.io/draggable/ for instance.

• What is the motivation / use case for changing the behavior?

For professional apps using trees (like mine https://www.arcsecond.io), the possibility to re-order nodes is a must have.

• Please tell us about your environment:

  • Version: Not yet.
  • Browser: all
  • Language: TypeScript X.X | ES6/7
  • Bundler: Vitejs.

Misleading naming on TreeRow

This is actually an icon meaning the delete.

So it should be delete-icon or remove-icon.

https://github.com/teamseodo/vue3-tree/blob/cf03ac2bf9503d520ffaa8f67858b3be5098e2d9/src/lib/components/TreeRow.vue#L245

Using via cdn

Using cdn I got:
[Vue warn]: Component is missing template or render function.
at <Tree nodes= (2) [{…}, {…}]0: {id: 1, label: 'Animal', nodes: Array(2)}1: {id: 6, label: 'People'}length: 2[[Prototype]]: Array(0) onUpdate:nodes=fnonUpdate:nodes >

with following code:

<div id="trest">
	<Tree v-model:nodes="data" />
</div>

const test = Vue.createApp({
components: {
Tree,
},
setup() {
const data = Vue.ref([
{
id: 1,
label: 'Animal',
nodes: [
{
id: 2,
label: 'Dog',
},
{
id: 3,
label: 'Cat',
nodes: [
{
id: 4,
label: 'Egyptian Mau Cat',
},
{
id: 5,
label: 'Japanese Bobtail Cat',
},
],
},
],
},
{
id: 6,
label: 'People',
},
]);

return {
  data,
};

}
});
test.component("Tree", Tree)
const testEl = test.mount('#test')

Inline style related props should be removed.

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...

  • feature request

• What is the expected behavior?
  These props should be deleted.
  indentSize
  gap
  rowHoverBackground

• What is the motivation / use case for changing the behavior?
  Customizations should be organized through classes.

Create a separate component called TreeRow

Prop names starting with "use-*" should be changed to "show-*".

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...

  • feature request

• Do you want to request a feature or report a bug?

• What is the current behavior?
  useCheckbox
  useIcon
  useRowDelete

• What is the expected behavior?
  showCheckbox
  showExpandIcon
  showDeleteIcon

• What is the motivation / use case for changing the behavior?
  Names don't explain their purpose well enough.