{"id":22486346,"url":"https://github.com/holiber/sl-vue-tree","last_synced_at":"2026-01-14T21:07:30.581Z","repository":{"id":30451275,"uuid":"124970002","full_name":"holiber/sl-vue-tree","owner":"holiber","description":"Customizable draggable tree component for Vue.js","archived":false,"fork":false,"pushed_at":"2024-12-09T07:14:25.000Z","size":766,"stargazers_count":348,"open_issues_count":51,"forks_count":79,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-08-02T19:50:00.271Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://holiber.github.io/sl-vue-tree/","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/holiber.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":"2018-03-13T00:45:17.000Z","updated_at":"2025-07-02T03:09:26.000Z","dependencies_parsed_at":"2024-12-06T17:15:46.976Z","dependency_job_id":"467d34bc-10ef-48ab-8216-da3bab71a34c","html_url":"https://github.com/holiber/sl-vue-tree","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/holiber/sl-vue-tree","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holiber%2Fsl-vue-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holiber%2Fsl-vue-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holiber%2Fsl-vue-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holiber%2Fsl-vue-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/holiber","download_url":"https://codeload.github.com/holiber/sl-vue-tree/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holiber%2Fsl-vue-tree/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28434557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T18:57:19.464Z","status":"ssl_error","status_checked_at":"2026-01-14T18:52:48.501Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2024-12-06T17:14:24.974Z","updated_at":"2026-01-14T21:07:30.562Z","avatar_url":"https://github.com/holiber.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["树","UI Components","Tree"],"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\n## Installation\n\n```bash\nnpm i sl-vue-tree\n```\n\n# Vue3 Support\nSupport for Vue3 coming soon. Check out [sl-vue-tree-next](https://github.com/kcsujeet/sl-vue-tree-next) while that is being shaped up.\n\n# Quick Start\n\n```html\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  var nodes = [\n    { title: 'Item1', isLeaf: true },\n    { title: 'Item2', isLeaf: true, data: { visible: false } },\n    { title: 'Folder1' },\n    {\n      title: 'Folder2',\n      isExpanded: true,\n      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\u003c/script\u003e\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. These are actually `ISlTreeNodeModel` instances with some computed properties:\n\n```typescript\ninterface ISlTreeNode\u003cTDataType\u003e extends ISlTreeNodeModel\u003cTDataType\u003e {\n  isFirstChild: boolean;\n  isLastChild: boolean;\n  isVisible: boolean; // 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 an array of indexes, e.g., [2, 0, 1] is the path to `Item4` in the example above\n  pathStr: string;    // serialized path to node\n  children: ISlTreeNode\u003cTDataType\u003e[];\n}\n```\n\nYou can get the list of `ISlTreeNode` objects from the computed `slVueTree.nodes` property.\n\n# Props\n\n| Prop             | Type               | Default                | Description                                                                                                                                                                                                      |\n|------------------|--------------------|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| value            | ISlTreeNodeModel[] | `[]`                   | An array of nodes to display. Each node is represented by the `ISlTreeNodeModel` interface.                                                                                                                      |\n| allowMultiselect | Boolean            | `true`                 | Enables or disables the multiselect feature.                                                                                                                                                                     |\n| allowToggleBranch | Boolean           | `true`                 | Enables or disables the expand/collapse button.                                                                                                                                                                  |\n| edgeSize         | Number             | `3`                    | Offset in pixels from the top and bottom of a folder-node element. While dragging, if the cursor is within this offset, the dragged node will be placed before or after the folder-node instead of inside it.    |\n| scrollAreaHeight | Number             | `70`                   | Offset in pixels from the top and bottom of the component element. While dragging, if the cursor is within this area, scrolling starts.                                                                           |\n| maxScrollSpeed   | Number             | `20`                   | The maximum scroll speed. The scroll speed is relative to the cursor position.                                                                                                                                   |\n| multiselectKey   | String or String[] | `['ctrlKey', 'metaKey']` | The keys for enabling multiselect mode. Allowed values are `'ctrlKey'`, `'metaKey'`, `'altKey'`.                                                                                                                 |\n\n# Computed Properties\n\n| Property       | Type                       | Description                                                                                                                                                     |\n|----------------|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| nodes          | ISlTreeNode[]              | List of nodes with computed properties. See the `ISlTreeNode` interface.                                                                                        |\n| cursorPosition | ICursorPosition\u003cTDataType\u003e | Represents the current cursor position that describes the action to be applied to the dragged node on the `mouseup` event. See the `ICursorPosition` interface. |\n| selectionSize  | Number                     | The count of selected nodes.                                                                                                                                    |\n| dragSize       | Number                     | The count of selected and draggable nodes.                                                                                                                      |\n| isDragging     | Boolean                    | Indicates whether nodes are currently being dragged.                                                                                                            |\n\n```typescript\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[]`                                                 | Triggered whenever the `value` property changes.     |\n| select          | `selectedNodes: ISlTreeNode[]`, `event: MouseEvent`                         | Triggered when a node is selected or deselected.     |\n| toggle          | `toggledNode: ISlTreeNode`, `event: MouseEvent`                             | Triggered when a node is expanded or collapsed.      |\n| drop            | `draggingNodes: ISlTreeNode[]`, `position: ICursorPosition`, `event: MouseEvent` | Triggered when dragged nodes are dropped.            |\n| nodeclick       | `node: ISlTreeNode`, `event: MouseEvent`                                    | Handles the `click` event on a node.                 |\n| nodedblclick    | `node: ISlTreeNode`, `event: MouseEvent`                                    | Handles the `dblclick` event on a node.              |\n| nodecontextmenu | `node: ISlTreeNode`, `event: MouseEvent`                                    | Handles the `contextmenu` event on a node.           |\n| externaldrop    | `cursorPosition: ICursorPosition`, `event: MouseEvent`                      | Handles the `drop` event for external items. [Demo](https://holiber.github.io/sl-vue-tree/demo/externaldrag) |\n\n# Methods\n\n| Method                                                                                                        | Description                                                                                       |\n|---------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|\n| getNode(path: number[]): ISlTreeNode                                                                          | Finds a node by its path.                                                                         |\n| traverse(callback: (node: ISlTreeNode, nodeModel: ISlTreeNodeModel, siblings: ISlTreeNodeModel[]) =\u003e boolean) | Traverses all nodes. Traversing stops if the callback returns `false`.                            |\n| updateNode(path: number[], patch: Partial\u003cISlTreeNodeModel\u003e)                                                  | Updates a node by its path.                                                                       |\n| select(path: number[], addToSelection = false)                                                                | Selects a node by its path.                                                                       |\n| getNodeEl(path: number[]): HTMLElement                                                                        | Gets the node's HTMLElement by its path.                                                          |\n| getSelected(): ISlTreeNode[]                                                                                  | Gets the selected nodes.                                                                          |\n| insert(position: ICursorPosition, nodeModel: ISlTreeNodeModel)                                                | Inserts a node at the specified cursor position.                                                  |\n| remove(paths: number[][])                                                                                     | Removes nodes by their paths, e.g., `.remove([[0,1], [0,2]])`.                                    |\n| getFirstNode(): ISlTreeNode                                                                                   | Gets the first node in the tree.                                                                  |\n| getLastNode(): ISlTreeNode                                                                                    | Gets the last node in the tree.                                                                   |\n| getNextNode(path: number[], filter?: (node: ISlTreeNode\u003cTDataType\u003e) =\u003e boolean): ISlTreeNode\u003cTDataType\u003e       | Gets the next node. You can skip nodes by using the `filter` function.                            |\n| getPrevNode(path: number[], filter?: (node: ISlTreeNode\u003cTDataType\u003e) =\u003e boolean): ISlTreeNode\u003cTDataType\u003e       | Gets the previous node. You can skip nodes by using the `filter` function.                        |\n\n# Slots\n\n| Slot        | Context       | Description                                                                                   |\n|-------------|---------------|-----------------------------------------------------------------------------------------------|\n| title       | ISlTreeNode   | Slot for customizing the item title.                                                          |\n| toggle      | ISlTreeNode   | Slot for the expand/collapse button.                                                          |\n| sidebar     | ISlTreeNode   | Slot for sidebar content.                                                                     |\n| draginfo    | SlVueTree     | Slot that follows the mouse cursor while dragging. By default, shows the count of dragging nodes. |\n| empty-node  | ISlTreeNode   | Slot for an optional message when a folder is open but empty.                                 |\n\n\n# Examples\n\n## Add a Folder or Item Icon via the `title` Slot\n\n```html\n\u003csl-vue-tree v-model=\"nodes\"\u003e\n  \u003ctemplate slot=\"title\" slot-scope=\"{ node }\"\u003e\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-else\u003e\u003c/i\u003e\n    \u003c/span\u003e\n    {{ node.title }}\n  \u003c/template\u003e\n\u003c/sl-vue-tree\u003e\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\n# IE11 Support\n\nYou must include a [babel-polyfill](https://babeljs.io/docs/en/babel-polyfill) for the component to work correctly in IE11.\n\n[See IE11 Example](https://holiber.github.io/sl-vue-tree/demo/ie11test.html)\n\n# Contributing\n\n[See CONTRIBUTING.md](CONTRIBUTING.md)\n\n# Changelog\n\n## v1.8.5\n\n- Fixed TypeScript definitions. See [#77](https://github.com/holiber/sl-vue-tree/pull/77).\n\n## v1.8.4\n\n- Added `insert` method. See [#39](https://github.com/holiber/sl-vue-tree/pull/39).\n\n## v1.8.3\n\n- Enabled the ability to disable or enable the expand/collapse button. See [#33](https://github.com/holiber/sl-vue-tree/pull/33).\n\n## v1.8.1\n\n- Added IE11 support. See [#17](https://github.com/holiber/sl-vue-tree/issues/17).\n\n## v1.8.0\n\n- Added `empty-node` slot.\n\n## v1.7.1\n\n- Added `multiselectKey` property.\n\n## v1.7.0\n\n- Added `isSelectable` and `isDraggable` flags.\n\n## v1.6.0\n\n- Added `getNextNode` and `getPrevNode` methods. See [#6](https://github.com/holiber/sl-vue-tree/issues/6).\n\n## v1.5.1\n\n- Improved dropping at the bottom of the tree. See [#5](https://github.com/holiber/sl-vue-tree/issues/5).\n\n## v1.5.0\n\n- Added `SlVueTree.select` method.\n- Fixed `SlVueTree.@nodeclick` event.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholiber%2Fsl-vue-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fholiber%2Fsl-vue-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholiber%2Fsl-vue-tree/lists"}