{"library":"sl-vue-tree","title":"sl-vue-tree","description":"sl-vue-tree is a customizable and draggable tree component designed for Vue.js applications. Currently stable at version 1.8.5, it provides a robust solution for displaying hierarchical data with interactive features such as drag-and-drop reordering, multiselection, and branch expansion/collapse. While an explicit release cadence isn't detailed in the provided documentation, the package has seen consistent updates in its 1.x line. Its key differentiators include comprehensive TypeScript type definitions for nodes (`ISlTreeNodeModel`, `ISlTreeNode`), allowing for strongly-typed data manipulation, and a flexible API that exposes various props and events for fine-grained control over tree behavior and appearance, including customizable styling via CSS themes. It is particularly suited for applications requiring complex hierarchical data management with an emphasis on user interaction.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install sl-vue-tree"],"cli":null},"imports":["import SlVueTree from 'sl-vue-tree';","import type { ISlTreeNodeModel } from 'sl-vue-tree';","import type { ISlTreeNode } from 'sl-vue-tree';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <sl-vue-tree v-model=\"nodes\" class=\"sl-vue-tree-dark\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\nimport SlVueTree from 'sl-vue-tree';\nimport type { ISlTreeNodeModel } from 'sl-vue-tree';\nimport 'sl-vue-tree/dist/sl-vue-tree-dark.css'; // Import the default dark theme CSS\n\ninterface CustomNodeData {\n  visible?: boolean;\n}\n\nexport default defineComponent({\n  name: 'App',\n  components: {\n    SlVueTree,\n  },\n  setup() {\n    const nodes = ref<ISlTreeNodeModel<CustomNodeData>[]>([\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    return {\n      nodes,\n    };\n  },\n});\n</script>\n\n<style>\n/* Optional: Add custom styles here or override theme variables */\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: #2c3e50;\n  margin-top: 60px;\n  height: 500px; /* Give the tree some height */\n  width: 400px; /* Give the tree some width */\n  border: 1px solid #eee;\n  padding: 10px;\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates a basic `sl-vue-tree` integration within a modern Vue 3 Single File Component (SFC) using TypeScript. It initializes a reactive tree structure, imports the necessary component and its default dark theme CSS, and binds the tree data using `v-model`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}