holiber / sl-vue-tree Goto Github PK
View Code? Open in Web Editor NEWCustomizable draggable tree component for Vue.js
License: MIT License
Customizable draggable tree component for Vue.js
License: MIT License
I want to change file icon but I can not to find fa-file class.
Can I to change it?
Currently, item's not getting selected if you click on it with the right mouse button.
Is it possible to add nodeclick event right before nodecontextmenu is getting fired if one or less items are selected. Also, let it behave as it does currently if more than 1 items selected?
Question: am I able to apply some classes or data to an element to allow dragging into the tree from an outside source?
I can add elements via selecting a node then then splice/push on the data array, but not having any luck reading the drop event as it's probably set to cancel default and stop propagation?
Maybe expose a drop event with the index of the node dropped onto?
Glad that our project used your component.
I have a issue that you mentioned the newest version v1.8.4 include feature isDraggable since v1.7.0.
but it's no any effect when i set isDraggable prop on that component.
I searched your relate solved issue to solve that disabled drag effect from #12 .
but that solution is not good for doing this. hope you can start complete this feature.
I think the title sums it up.
It would be a nice if that works.
I have been unable to add a drop handler to the demo, so I can't demonstrate this to you. But this is what I'm seeing in my app...
In the drop handler, I traverse the tree in order to sync the backend with the drag/drop event. However tree traversal (slVueTree.traverse) at this time finds the dragging nodes in both their original, pre-drag, position and also in the position in which they were dropped.
(if you can add a drop handler to the demo, I can probably offer the code that demonstrates this problem)
This is my drop handler:
drop_handler: function(draggingNodes,position,event){
const url = this.$store.state.staff_resource_path
const data = {};
slVueTree.traverse(function(node){data[JSON.stringify(node.path)] = {id: node.title.id, isFile: node.isLeaf}})
$.ajax({
url: url,
data: data,
method: 'put'
})
}
Well, I'm trying to create something where I'd need to drag leaves/folders from one tree and drop them to another tree.
Is there any way I can do it or this is not possible using your component?
Thanks!
Is there a built in way to cancel or revert a drag operation? I'd like to be able to disable or lock some nodes from being dragged.
Thanks.
This is a great library. Thank you.
I would like to know if it is possible to have a kind of accordion style that always only one folder can be opened while another will be closed.
Hi, how do I define the maximum nesting level?, I just want my list to be nested at 2 levels max.
Hi there.
I wanna cancel drop event when node is move to parent side.
Are there any function like stop or cancel the drop event?
Thanks a lot!
Hi,
I am struggling a bit to update a backend with the current state of information we get on the drop
callback.
There are 3 arguments: draggingNodes, position, and event. However, the path of each node inside draggingNodes are the old ones, and the position also contains the old path of the targetNode.
Morover, one couldn't get the updated indexes / paths without knowing the parent. And the getParent()
method is missing (there is one such method inside the code, but it does something else).
I would be happy to write myself, but so far I couldn't get to know when the tree paths are actually updated. Thanks!
How to replicate the bug in the demo
https://stream-labs.github.io/sl-vue-tree/demo/index
First off, thanks for the great work with sl-vue-tree. I seem to have my tree displaying properly on the page with the drag and collapse 'branch' functionality working. However, my console gives me a series of warnings whenever I click a node:
My chapters array is an array of the following objects - i am simply giving this.chapters to the sl-vue-tree v-model:
{
title: this.title,
data: {
image: this.image,
description: this.description,
id: uuid()
},
children: [
{
data: {
id: uuid(),
path: '#',
colour: 'primary',
isCompile: false,
},
title: 'Notes',
isLeaf: true,
isSelected: false,
isSelectable: true,
isDraggable: true,
isExpanded: true
}
],
isLeaf: false,
isSelected: false,
isSelectable: false,
isDraggable: true,
isExpanded: true
}
Apologies in advance if I have missed something simply - been scratching my head with this one for a couple of days now.
Thanks!
If the original tree does not have any file or forlder, can it pull the file from outside into that component?
Hi, great node tree component.
There is a way to use in a Vue CLI 3.0 project that uses import to get the node modules, instead of using a script tag?
When dragging an item in an expanded folder the cursor jumps to the bottom of the folder when hovering the lower part of the folder's title:
I used the demo in Chrome 79 on MacOS 10.13.6
hello it seems like setting
"data": {
"visible": false
}
for a node dosen't change anything
how can we fix this? (or am i missing something?) (actually even in the demo page is not working)
Question: Would it be possible to add transition wrapper to the expand/collapse v-if, so that collapse/expand could be animated?
The component does not react to the edgeSize. The drop area always has 1px height.
Hello,
I have a categories system, with : id, name, parent_id
is there a way of expanding the node by clicking the title?
Hello,
first of all thank you for this excellent library!
My problem: it looks like drag'n'drop for mobile devices (with touch gestures) doesn't work. Is there any plan to support it in the future?
Thanks again, Diego
When trying to supply the property allowMultiselect
it's still allowing multi-selection. Please inform me if I'm using this wrong.
<sl-vue-tree
@nodeclick="clickedTreeItem"
v-model="fileSystem"
:allowMultiselect="false"
/>
Also, per node, I'm supplying the flag isSelectable: false
with the directories, however, it's still allowing selection of directories, does this flag disable the nodeclick
event as I expect or again please inform me if I'm using this wrong.
Hi,
It seems there was an issue with the build of version 1.8.4 (which is currently the latest version available on npm): it includes arrow functions, and is therefore not compatible with IE11. The issue was not present in 1.8.3, and when I execute npm run build
on the cloned repo, the code is correctly transpiled.
Thanks!
Example:
<sl-vue-tree v-model="nodes" :allow-multiselect="false"></sl-vue-tree>
and somewhere selectedNode
method:
selectedNode(node) {
node.isSelected = true
}
When selecting node in sidebar — all ok, but if we select one node, and later somewhere change isSelected
in nodes — will be two selected nodes.
How to handle selecting nodes outside component, from data?
In using sl-vue-tree in my app, I have concluded that it's sometimes necessary to terminate dragging without dropping the draggingNodes anywhere. Sometimes I have inadvertently found dragging to be triggered and there's currently no way to terminate it. In another scenario, I initiate dragging but then change my mind, and I would just like to revert to the pre-dragging hierarchy.
I would happily submit a PR for this, but would like to understand if
Question:
I have two tree one with directory and one with the list of file and directory, in two separate boxes.
How can clicking on a directory of the first tree to see only the files on the second tree corresponding to the directory?
here my code
<div class="row" id="treeView">
<div class="tree-container col-md-3">
<sl-vue-tree
v-model="leftFrontTree"
ref="slVueTree"
>
<template slot="title" slot-scope="{ node }">
<span class="item-icon">
<i class="fa fa-folder" v-if="!node.isLeaf"></i>
<i class="fa fa-file-alt" v-if="node.isLeaf"></i>
</span>
{{ node.title }}
</template>
<template slot="toggle" slot-scope="{ node }">
<span v-if="!node.isLeaf">
<i v-if="node.isExpanded" class="fa fa-chevron-down"></i>
<i v-if="!node.isExpanded" class="fa fa-chevron-right"></i>
</span>
</template>
<template slot="sidebar" slot-scope="{ node }">
<span v-if="node.isLeaf" class="visible-icon" @click="event => listFiles(event, node)">
<i class="fa fa-eye"></i>
</span>
</template>
</sl-vue-tree>
</div>
<div id="fileListId" class="col-md-3">
<sl-vue-tree
v-model="frontTreeFull"
ref="refFrontTreeFull"
>
<template slot="title" slot-scope="{ node }">
<span class="item-icon">
<i class="fa fa-file"></i>
</span>
{{ node.title }}
</template>
<template slot="sidebar" slot-scope="{ node }">
<span class="visible-icon" @click="event => preview(event, node)">
<i class="fa fa-eye"></i>
</span>
<span class="visible-icon" @click="event => download(event, node)">
<i class="fa fa-cloud-download-alt"></i>
</span>
</template>
</sl-vue-tree>
</div>
<div id="filePreview" class="col-md-3">
<h3>qui va l'anteprima del pdf</h3>
</div>
</div>
the javascript method tha I want to call
listFiles: function (event, node) {
debugger
event.stopPropagation();
this.$refs.refFrontTreeFull = this.$refs.refFrontTreeFull.getNode(node.path);
}
It appears that the context menu is only acting upon the last/selected item. I would expect the behaviour to act upon the node that I have selected.
First off, this lib is great, thank you!
I'm having trouble getting @nodeclick or @select to fire correctly. @select seems to fire, but does not return the target node. @nodeclick does not fire.
<sl-vue-tree @nodeclick="test(node)" :allowMultiselect="false" v-model="nodes">
also tried...
<sl-vue-tree v-on:nodeclick="test(node)" :allowMultiselect="false" v-model="nodes">
Thanks again! Let me know if I'm doing something wrong.
I'm trying to add a tooltip for node leafs. The idea is to display leafs full title on hover, since leafs title is too long and has to be truncated. I'm trying to combine SlVueTree with v-tooltip, but I can't figure out how to add v-tooltip="Some message"
directive to leaf's title container.
Everywere is used
const newNodes = this.copy(this.currentValue);
This is a very resource-intensive operation.
I have the data with about 600 nodes.
If I just select node JSON.parse(JSON.stringify(entity))
happens for whole tree.
It works very very slow.
I think it should to revise the update node algorithm.
Maybe this will help:
https://jsperf.com/deep-copy-vs-json-stringify-json-parse/5
Hi there,
the path of targetNode in the callback nodeDropped is the old path instead of the one after the drop, that makes the updateNode function unable to use. How to fix this?
Thanks.
Hi. I'm using sl-vue-tree, installed by npm. (1.8.4 version) And thanks for your component.
As I write below in main.js, webpack build error occured.
import Vue from 'vue'
import 'babel-polyfill'
import App from './App'
import 'sl-vue-tree/src/sl-vue-tree-minimal.css' // this line makes error
new Vue({
render: h => h(App)
}).$mount('#app')
I tried both sl-vue-tree-minimal.css and sl-vue-tree-dark.css.
The error message says below.
ERROR in ./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/postcss-loader/lib??ref--6-3!./node_modules/sl-vue-tree/src/sl-vue-tree-minimal.css
Module build failed: BrowserslistError: Unknown browser query `dead`
But when I just copy & paste css code in vue component, it works. (In component, changing <style scoped> to <style>)
Maybe it is because in your package.json
"browserslist": "> 0.25%, not dead"
I'm using packages version like below, using webpack 3.6.0 (using vue cli)
{
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js",
"build:prod": "webpack --config build/webpack.prod.conf.js"
},
"dependencies": {
"@babel/polyfill": "^7.0.0",
"axios": "^0.18.0",
"es6-promise": "^4.2.5",
"html-loader": "^0.5.5",
"jqwidgets-scripts": "^7.1.0",
"moment": "^2.22.2",
"sl-vue-tree": "^1.8.4",
"vue": "^2.5.2",
"vue-js-modal": "^1.3.28",
"vue-router": "^3.0.1",
"vuejs-datepicker": "^1.5.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-component": "^1.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^2.1.1",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"validator": "^10.11.0",
"vue-loader": "^14.2.2",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Could you check this error, please.
Thanks.
cannot update path by using updateNode?
In the application I'm pondering it would be useful for the tree viewer to have a context menu.
The documentation doesn't say what to do, and neither do the demos.
I see in the source code that nodecontextmenu
is emitted, and I am successfully receiving the event, but don't know what to do afterward.
Hello!
In Vue Cli 3 in production mode plugin do not worked in IE 11. Reason: arrow function not transform.
Discussions here: https://forum.vuejs.org/t/vue-cli-3-and-ie-11/39933
So far your component worked great for me. However changing the icon of individual nodes seems impossible. If you change one you change them all. In the code snippet below I added two more icons depending on some conditions. When I click on the node with the bug icon all leaf items get the bug icon. Would be great if the next release supports changing individual nodes, either in the slot or via a method in JavaScript.
<template slot="title" slot-scope="{ node }">
<span class="item-icon">
<i v-if="node.isLeaf && getCurrentItemSubType == 0">
<font-awesome-icon icon="file" />
</i>
<i v-if="node.isLeaf && getCurrentItemSubType == 1">
<font-awesome-icon icon="hourglass-start" />
</i>
<i v-if="node.isLeaf && getCurrentItemSubType == 2">
<font-awesome-icon icon="bug" />
</i>
<i v-if="!node.isLeaf">
<font-awesome-icon icon="folder" />
</i>
</span>
{{ node.title }}
</template>
Thank you for your good work,
Erik
In some cases I don't want to drag drop. Is there any way to solve this problem? Please support me
Hello,
I have a categories system, with : id, name, parent_id, visible_on_menu
I put the name into title, id and visible_on_menu under data, the problem is once I update the visibility I lost the id
I'm using this : https://github.com/holiber/sl-vue-tree/blob/master/demo/dark-theme.html#L134
Hello.
I'm not very good at English and please acknowledge.
and It's good module.
Can you make a filter function on this?
I think it is better.
thankyou!
how to set the maximum attachment for each element?
Hi and very good work on sl-vue-tree.
Thanks a lot .. I want to use your vue tree with a lots of items and want to combine with vue-virtual-scroller
to limit the dom ressource, where do you think the best way to combine vue-virtual-scroller with your code ?
thanks...
How I set max-level that allowed?
I found option for this problem, but cannot.
i wan edit a title after click a node ,
example node 1 >>> node 2 rename
Is there a way to disable certain nodes/targets so we can prevent insertion in particular paths.
I have used isLeaf : true
, but it doesn't work when a node already have children.
Great lib, thanks !
how add inserted in last children
this.$refs.slVueTree.insert({node:node,placement: "inside"}, { title:node.title,code:node.code});
this code add in first items
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.