{"id":27398932,"url":"https://github.com/streamlabs/sl-vue-tree","last_synced_at":"2025-04-14T02:12:44.136Z","repository":{"id":67821391,"uuid":"198885385","full_name":"streamlabs/sl-vue-tree","owner":"streamlabs","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-27T03:32:04.000Z","size":786,"stargazers_count":1,"open_issues_count":10,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T02:12:37.631Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/streamlabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-25T18:51:44.000Z","updated_at":"2021-03-18T04:02:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"4ceccb81-4418-40e8-b878-791818c2d8f0","html_url":"https://github.com/streamlabs/sl-vue-tree","commit_stats":null,"previous_names":["streamlabs/sl-vue-tree"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamlabs%2Fsl-vue-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamlabs%2Fsl-vue-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamlabs%2Fsl-vue-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamlabs%2Fsl-vue-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/streamlabs","download_url":"https://codeload.github.com/streamlabs/sl-vue-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248809051,"owners_count":21164896,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-14T02:12:43.502Z","updated_at":"2025-04-14T02:12:44.111Z","avatar_url":"https://github.com/streamlabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sl-vue-tree\n\nCustomizable draggable tree component for Vue.js\n\n![preview](preview.png)\n\n[demo](https://holiber.github.io/sl-vue-tree/demo/index)\n\ninstall\n\n`npm i sl-vue-tree`\n\n\n\t\n# Quick start\n````html\n\n\u003cdiv id=\"app\"\u003e\n  \u003csl-vue-tree v-model=\"nodes\"/\u003e\n\u003c/div\u003e\n\n\u003clink rel=\"stylesheet\" href=\"dist/sl-vue-tree-dark.css\"\u003e\n\u003cscript src=\"dist/sl-vue-tree.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n\n  var nodes = [\n    {title: 'Item1', isLeaf: true},\n    {title: 'Item2', isLeaf: true, data: { visible: false }},\n    {title: 'Folder1'},\n    {\n      title: 'Folder2', isExpanded: true, children: [\n        {title: 'Item3', isLeaf: true},\n        {title: 'Item4', isLeaf: true}\n      ]\n    }\n  ];\n\n  new Vue({\n    el: '#app',\n    components: { SlVueTree },\n    data: function () {\n     return {\n       nodes: nodes\n     }\n    }\n  });\n  \n\u003c/script\u003e    \n\n````\n\nThe `value` property is an array of `ISlTreeNodeModel` nodes:\n\n````typescript\ninterface ISlTreeNodeModel\u003cTDataType\u003e {\n    title: string;\n    isLeaf?: boolean;\n    children?: ISlTreeNodeModel\u003cTDataType\u003e[];\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isDraggable?: boolean;\n    isSelectable?: boolean;\n    data?: TDataType; // any serializable user data\n}\n````\n\nFor convenience the component's events return `ISlTreeNode` objects. Those actually are `ISlTreeNodeModel`\nwith some computed props:\n````typescript\ninterface ISlTreeNode\u003cTDataType\u003e extends ISlTreeNodeModel\u003cTDataType\u003e {\n    isFirstChild: boolean;\n    isLastChild: boolean;\n    isVisible: boolean;\t// node is visible if all of its parents are expanded\n    level: number; // nesting level\n    ind: number; // index in the array of siblings \n    path: number[]; // path to node as array of indexes, for example [2, 0, 1] in the example above is path to `Item4` \n    pathStr: string; // serialized path to node\n    children: ISlTreeNode\u003cTDataType\u003e[];\n}\n````\n\nYou can get the list of `ISlTreeNode` from the computed `slVueTree.nodes` property\n\n\n\n# Props\n\n| prop             | type               | default                | description                                                                                                                                                                                              |\n|------------------|--------------------|------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| value            | ISlTreeNodeModel[] | []                     | An array of nodes to show. Each node is represented by `ISlTreeNodeModel` interface                                                                                                                              |\n| allowMultiselect | Boolean            | true                   | Disable or enable the multiselect feature                                                                                                                                                                |\n| allowToggleBranch | Boolean            | true                   | Disable or enable the expand/collapse button                                                                                                                                                                |\n| edgeSize         | Number             | 3                      | Offset in pixels from top and bottom for folder-node element. While dragging cursor is in that offset, the dragging node will be placed before or after the folder-node instead of being placed inside the folder. |\n| scrollAreaHeight | Number             | 70                     | Offset in pixels from top and bottom for the component element. While dragging cursor is in that area, the scrolling starts.                                                                                |\n| maxScrollSpeed   | Number             | 20                     | The scroll speed is relative to the cursor position. Defines the max scroll speed.             \n| multiselectKey   | String/String[] |['ctrlKey', 'metaKey'] | The keys for multiselect mode. Allowed values are ['ctrlKey', 'metaKey', 'altKey']   \n\n# Computed props\n\n| prop           | type            | description                                                                                                                                                                                                                                                     |\n|----------------|-----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| nodes          | ISlTreeNode[]   | List of nodes with some computed props. See `ISlTreeNode` interface.                                                                                                                                                                                            |\n| cursorPosition | ICursorPosition | Represents the current cursor position that describes the action that will be applied to the dragged node on `mouseup` event. See `ICursorPosition` interface |\n| selectionSize  | Number          | The count of selected nodes\n| dragSize       | Number          | The count of selected and draggable nodes\n| isDragging     | Boolean         | True if nodes are dragging\n\n````\ninterface ICursorPosition\u003cTDataType\u003e {\n  node: ISlTreeNode\u003cTDataType\u003e;\n  placement: 'before' | 'inside' | 'after';\n}  \n````\n\n# Events\n\n| event           | callback arguments                                                         | description                                       |\n|-----------------|----------------------------------------------------------------------------|---------------------------------------------------|\n| input           | nodes: ISlTreeNodeModel[]                                                  | triggers for any changes to `value` property     |\n| select          | selectedNodes: ISlTreeNode[], event: MouseEvent                            | triggers when a node has been selected/deselected |\n| toggle          | toggledNode: ISlTreeNode, event: MouseEvent                                | triggers when a node has been collapsed/expanded  |\n| drop            | draggingNodes: ISlTreeNode[], position: ICursorPosition, event: MouseEvent | triggers when dragging nodes have been dropped    |\n| nodeclick       | node: ISlTreeNode, event: MouseEvent                                       | handle `click` event on node                      |\n| nodedblclick    | node: ISlTreeNode, event: MouseEvent                                       | handle `dblclick` event on node                   |\n| nodecontextmenu | node: ISlTreeNode, event: MouseEvent                                       | handle `contextmenu` event on node                |\n\n# Methods\n\n\n| method                                                                                                   | description                                                                                        |\n|----------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|\n| getNode(path: number[]): ISlTreeNode                                                                     | Find the node by using its path                                                                   |\n| traverse(cb: (node: ISlTreeNode, nodeModel: ISlTreeNodeModel, siblings: ISlTreeNodeModel[])  =\u003e boolean) | Helpful method to traverse all nodes. The traversing will be stopped if callback returns `false`.  |\n| updateNode(path: number[], patch: Partial\u003cISlTreeNodeModel\u003e)                                             | Update the node by using its path                                                                 |\n| select(path: number[], addToSelection = false)                                                           | Select the node by using its path                                                                 |                                                                                                                                              |\n| getNodeEl(): HTMLElement                                                                                 | Get the node HTMLElement by using its path                                                        |\n| getSelected(): ISlTreeNode[]                                                                             | Get selected nodes                                                                                 |\n| remove(paths: number[][])                                                                                | Remove nodes by paths. For example `.remove([[0,1], [0,2]])`\n| getFirstNode(): ISlTreeNode                                                                              | Get the first node in the tree                                                                     |\n| getLastNode(): ISlTreeNode                                                                               | Get the last node in the tree\n| getNextNode(path: number[], filter?: (node: ISlTreeNode\u003cTDataType\u003e) =\u003e boolean): ISlTreeNode\u003cTDataType\u003e; | Get the next node. You can skip the next nodes by using `filter`\n| getPrevNode(path: number[], filter?: (node: ISlTreeNode\u003cTDataType\u003e) =\u003e boolean): ISlTreeNode\u003cTDataType\u003e; | Get the previous node. You can skip the previous nodes by using `filter`\n\n# Slots\n\n\n| slot       | context     | description                                                                                   |\n|------------|-------------|-----------------------------------------------------------------------------------------------|\n| title      | ISlTreeNode | Slot for item title                                                                           |\n| toggle     | ISlTreeNode | Slot for expand/collapse button                                                               |\n| sidebar    | ISlTreeNode | Sidebar content                                                                               |\n| draginfo   | SlVueTree   | Slot that follows the mouse cursor while dragging. By default shows the dragging nodes count. |\n| empty-node | ISlTreeNode | Slot for (optional) message when folder is open, but empty                                    |\n\n# IE 11 support\n\nYou must add a [babel-polyfill](https://babeljs.io/docs/en/babel-polyfill) for it to work correctly in IE11  \n[See IE11 example](https://holiber.github.io/sl-vue-tree/demo/ie11test.html)\n\n\n# Examples\n\n\n## Add a folder or item icon via `title` slot\n````html\n\u003csl-vue-tree v-model=\"nodes\"\u003e\n    \u003ctemplate slot=\"title\" slot-scope=\"{ node }\"\u003e\n\n      \u003cspan class=\"item-icon\"\u003e\n        \u003ci class=\"fa fa-file\" v-if=\"node.isLeaf\"\u003e\u003c/i\u003e\n        \u003ci class=\"fa fa-folder\" v-if=\"!node.isLeaf\"\u003e\u003c/i\u003e\n      \u003c/span\u003e\n    \n      {{ node.title }}\n      \n    \u003c/template\u003e\n\u003c/sl-vue-tree\u003e\n\n````\n\n## Select all nodes\n\n```javascript\nslVueTree.traverse((node, nodeModel, path) =\u003e {\n    Vue.set(nodeModel, 'isSelected', true);\n})\n```\n\n## Handle keydown and keyup events via `getNextNode` and `getPrevNode` methods\n\n[demo](https://holiber.github.io/sl-vue-tree/demo/keyboardcontrol)\n\n## Contributing\n[see CONTRIBUTING.md](CONTRIBUTING.md)\n\n# Changelog\nv1.8.3\n- Allow to disable or enable the expand/collapse button https://github.com/holiber/sl-vue-tree/pull/33\n\nv1.8.1\n- added IE11 support https://github.com/holiber/sl-vue-tree/issues/17\n\nv1.8.0\n\n- added `empty-node` slot\n\nv1.7.1\n\n- added `multiselectKey` property\n\nv1.7.0\n\n- added `isSelectable` and `isDraggable` flags\n\nv1.6.0\n\n- added `getNextNode` and `getPrevNode` methods https://github.com/holiber/sl-vue-tree/issues/6\n\nv1.5.1\n- improve drop on the bottom of tree https://github.com/holiber/sl-vue-tree/issues/5\n\nv1.5.0\n- `SlVueTree.select` method added\n- `SlVueTree.@nodeclick` event fixed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamlabs%2Fsl-vue-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstreamlabs%2Fsl-vue-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamlabs%2Fsl-vue-tree/lists"}