wopehq / vue3-tree Goto Github PK

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

• 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?

Looks like the link in the README leads nowhere.

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.

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.

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

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

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

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

https://vuepress.vuejs.org/

• 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

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')

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

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

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',
  }],

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.

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.

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.

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

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

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

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 ?

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.

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

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

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

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

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

Disabled items should be unclickable and have a class.

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.

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.

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.