holiber / sl-vue-tree Goto Github PK

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);
}

how to set the maximum attachment for each element?

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.

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

If the original tree does not have any file or forlder, can it pull the file from outside into that component?

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

Hello,

I have a categories system, with : id, name, parent_id

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

Question: Would it be possible to add transition wrapper to the expand/collapse v-if, so that collapse/expand could be animated?

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

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.

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

1. you agree that it's desirable
2. you have a preference as to how it should be done, options I can think of (you may have other ideas too) include:
   a) hit the keyboard escape key
   b) drop the dragging nodes left or right of the bounding box
   c.) drop the dragging nodes above or below the bounding box, sufficiently far removed that it's not interpreted as a drop 'before' the first node or 'after' the last node.

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.

How I set max-level that allowed?
I found option for this problem, but cannot.

Nice work! Noticed one issue-

In the above example, try dragging "Folder6" to the end of the list in a non-parented position, it's not possible.

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

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!

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?

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.

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:

1. [Vue Warn] Cannot set reactive property on undefined, null, or primitive value: null
2. [Vue warn]: Error in v-on handler: "TypeError: Cannot use 'in' operator to search for 'chapters' in null"
3. TypeError: Cannot use 'in' operator to search for 'chapters' in null

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!

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!

Is it possible to move selection by code?

For example, assume that selected Image Block 3:

If we call method up — selection moved to Image Block 2
If we call method down — selection moved to Text Block 4

Thanks!

How to replicate the bug in the demo

https://stream-labs.github.io/sl-vue-tree/demo/index

1. Click Folder 2, hold Shift, click Folder 5
2. Drag and drop the selection to Folder 1
3. Item 3, Item 4, Folder 3 and Item 5 are duplicated into their parent folder

i wan edit a title after click a node ,
example node 1 >>> node 2 rename

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.

is there a way of expanding the node by clicking the title?

cannot update path by using updateNode?

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

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!

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.

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 !

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.

I think the title sums it up.

It would be a nice if that works.

The component does not react to the edgeSize. The drop area always has 1px height.

Hi, how do I define the maximum nesting level?, I just want my list to be nested at 2 levels max.

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

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.

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.

• Chris

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

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!

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.

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?

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

I want to change file icon but I can not to find fa-file class.
Can I to change it?

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 some cases I don't want to drag drop. Is there any way to solve this problem? Please support me

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