@demos-europe/demosplan-ui 0.4.21 → 0.4.22

package/storybook-static/assets/DpTreeList.stories-B_u3WNs8.js

@@ -1,673 +0,0 @@
-import{l as p}from"./iframe-KFxwsBtW.js";import{D as i}from"./DpTreeList-Cciwf3YU.js";import{_ as m}from"./DpIcon-dOAQoUKG.js";import"./dayjs.min-C3DHb-Vr.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpDraggable-DLTo9Q5K.js";import"./translations-DDOZrg-p.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./CleanHtml-CeG3Pc5D.js";import"./Tooltip-flnpMaRO.js";import"./DpApi-BU9X0WT6.js";import"./hasOwnProp-B0vmwdLB.js";import"./Stickier-DyqV0rTn.js";import"./getScrollTop-CXy7CyEd.js";const r=({node:e})=>e.type==="category"||e.type==="elements",T={title:"Components/TreeList",component:i,tags:["autodocs"],parameters:{docs:{description:{component:"A hierarchical tree component for displaying nested data structures with support for selection, drag-and-drop, and custom rendering."}}}},d=[{id:"category-1",type:"category",attributes:{title:"Category 1"},children:[{id:"item-1-1",type:"item",attributes:{title:"Item 1.1",status:"active"},children:[]},{id:"item-1-2",type:"item",attributes:{title:"Item 1.2",status:"inactive"},children:[]}]},{id:"category-2",type:"category",attributes:{title:"Category 2"},children:[{id:"subcategory-2-1",type:"category",attributes:{title:"Subcategory 2.1"},children:[{id:"item-2-1-1",type:"item",attributes:{title:"Item 2.1.1",status:"active"},children:[]}]}]}],a={render:e=>({components:{DpTreeList:i},setup(){return{args:e,isBranch:r}},template:`
-      <div class="w-[600px]">
-        <dp-tree-list
-          :tree-data="args.treeData"
-          :branch-identifier="isBranch"
-          :options="args.options">
-          <template #header>
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">Name</div>
-              <div class="w-[100px]">Status</div>
-            </div>
-          </template>
-          <template #branch="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">Folder</div>
-            </div>
-          </template>
-          <template #leaf="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-            </div>
-          </template>
-        </dp-tree-list>
-      </div>
-    `}),args:{treeData:d,options:{branchesSelectable:!1,leavesSelectable:!1,dragBranches:!1,dragLeaves:!1}},parameters:{docs:{source:{code:`
-<dp-tree-list
-  :tree-data="treeData"
-  :branch-identifier="isBranch"
-  :options="{
-    branchesSelectable: false,
-    leavesSelectable: false,
-    dragBranches: false,
-    dragLeaves: false
-  }">
-  <template #header>
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">Name</div>
-      <div class="w-[100px]">Status</div>
-    </div>
-  </template>
-  <template #branch="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">Folder</div>
-    </div>
-  </template>
-  <template #leaf="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-    </div>
-  </template>
-</dp-tree-list>
-`}}}},s={render:e=>({components:{DpTreeList:i},setup(){const c=p([]);return{args:e,isBranch:r,selectedNodes:c,handleNodeSelectionChange:t=>{c.value=t,console.log("Selected nodes:",t)}}},template:`
-      <div class="w-[600px]">
-        <dp-tree-list
-          :tree-data="args.treeData"
-          :branch-identifier="isBranch"
-          :options="args.options"
-          @node-selection-change="handleNodeSelectionChange">
-          <template #header>
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">Name</div>
-              <div class="w-[100px]">Status</div>
-            </div>
-          </template>
-          <template #branch="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">Folder</div>
-            </div>
-          </template>
-          <template #leaf="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-            </div>
-          </template>
-        </dp-tree-list>
-
-        <div class="mt-4 p-4 bg-gray-100 rounded">
-          <h3 class="font-bold mb-2">Selected Nodes:</h3>
-          <div v-if="selectedNodes.length === 0">No nodes selected</div>
-          <ul v-else class="list-disc pl-4">
-            <li v-for="(node, index) in selectedNodes" :key="index">
-              {{ node.attributes?.title || 'Unnamed node' }} ({{ node.nodeType }})
-            </li>
-          </ul>
-        </div>
-      </div>
-    `}),args:{treeData:d,options:{branchesSelectable:!0,leavesSelectable:!0,dragBranches:!1,dragLeaves:!1,selectOn:{childSelect:!1,parentSelect:!0},deselectOn:{childDeselect:!0,parentDeselect:!0}}},parameters:{docs:{source:{code:`
-<dp-tree-list
-  :tree-data="treeData"
-  :branch-identifier="isBranch"
-  :options="{
-    branchesSelectable: true,
-    leavesSelectable: true,
-    selectOn: {
-      childSelect: false,
-      parentSelect: true
-    },
-    deselectOn: {
-      childDeselect: true,
-      parentDeselect: true
-    }
-  }"
-  @node-selection-change="handleNodeSelectionChange">
-  <template #header>
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">Name</div>
-      <div class="w-[100px]">Status</div>
-    </div>
-  </template>
-  <template #branch="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">Folder</div>
-    </div>
-  </template>
-  <template #leaf="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-    </div>
-  </template>
-</dp-tree-list>
-`}}}},n={render:e=>({components:{DpTreeList:i},setup(){return{args:e,isBranch:r,handleTreeChange:t=>{console.log("Tree structure changed:",t)},handleDraggableChange:t=>{console.log("Draggable change:",t)}}},template:`
-      <div class="w-[600px]">
-        <dp-tree-list
-          :tree-data="args.treeData"
-          :branch-identifier="isBranch"
-          :options="args.options"
-          @tree:change="handleTreeChange"
-          @draggable:change="handleDraggableChange">
-          <template #header>
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">Name</div>
-              <div class="w-[100px]">Status</div>
-            </div>
-          </template>
-          <template #branch="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">Folder</div>
-            </div>
-          </template>
-          <template #leaf="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-            </div>
-          </template>
-          <template #footer>
-            <div class="text-sm italic text-gray-500">Drag items to reorder</div>
-          </template>
-        </dp-tree-list>
-      </div>
-    `}),args:{treeData:d,options:{dragBranches:!0,dragLeaves:!0,rootDraggable:!0,dragAcrossBranches:!0}},parameters:{docs:{source:{code:`
-<dp-tree-list
-  :tree-data="treeData"
-  :branch-identifier="isBranch"
-  :options="{
-    dragBranches: true,
-    dragLeaves: true,
-    rootDraggable: true,
-    dragAcrossBranches: true
-  }"
-  @tree:change="handleTreeChange"
-  @draggable:change="handleDraggableChange">
-  <template #header>
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">Name</div>
-      <div class="w-[100px]">Status</div>
-    </div>
-  </template>
-  <template #branch="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">Folder</div>
-    </div>
-  </template>
-  <template #leaf="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-    </div>
-  </template>
-  <template #footer>
-    <div class="text-sm italic text-gray-500">Drag items to reorder</div>
-  </template>
-</dp-tree-list>
-`}}}},l={render:e=>({components:{DpTreeList:i,DpIcon:m},setup(){return{args:e,isBranch:r}},template:`
-      <div class="w-[600px]">
-        <dp-tree-list
-          :tree-data="args.treeData"
-          :branch-identifier="isBranch"
-          :options="args.options">
-          <template #header>
-            <div class="flex items-center p-2 bg-gray-100 font-bold">
-              <div class="flex-1">File Explorer</div>
-              <div class="w-[100px] text-right">Type</div>
-            </div>
-          </template>
-          <template #branch="{ nodeElement }">
-            <div class="flex items-center p-2 hover:bg-gray-50">
-              <dp-icon icon="folder" class="mr-2 text-yellow-500" />
-              <div class="flex-1 font-medium">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px] text-right text-gray-500">Directory</div>
-            </div>
-          </template>
-          <template #leaf="{ nodeElement }">
-            <div class="flex items-center p-2 hover:bg-gray-50">
-              <dp-icon icon="file-text" class="mr-2 text-blue-500" />
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px] text-right text-gray-500">
-                {{ nodeElement.attributes.status === 'active' ? 'Document' : 'Draft' }}
-              </div>
-            </div>
-          </template>
-          <template #footer>
-            <div class="p-2 bg-gray-100 flex justify-between items-center">
-              <span class="text-sm text-gray-500">5 items</span>
-              <button class="px-3 py-1 bg-blue-500 text-white rounded text-sm">Add Item</button>
-            </div>
-          </template>
-        </dp-tree-list>
-      </div>
-    `}),args:{treeData:d,options:{branchesSelectable:!1,leavesSelectable:!0,dragBranches:!1,dragLeaves:!1}},parameters:{docs:{source:{code:`
-<dp-tree-list
-  :tree-data="treeData"
-  :branch-identifier="isBranch"
-  :options="{
-    branchesSelectable: false,
-    leavesSelectable: true
-  }">
-  <template #header>
-    <div class="flex items-center p-2 bg-gray-100 font-bold">
-      <div class="flex-1">File Explorer</div>
-      <div class="w-[100px] text-right">Type</div>
-    </div>
-  </template>
-  <template #branch="{ nodeElement }">
-    <div class="flex items-center p-2 hover:bg-gray-50">
-      <dp-icon icon="folder" class="mr-2 text-yellow-500" />
-      <div class="flex-1 font-medium">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px] text-right text-gray-500">Directory</div>
-    </div>
-  </template>
-  <template #leaf="{ nodeElement }">
-    <div class="flex items-center p-2 hover:bg-gray-50">
-      <dp-icon icon="file-text" class="mr-2 text-blue-500" />
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px] text-right text-gray-500">
-        {{ nodeElement.attributes.status === 'active' ? 'Document' : 'Draft' }}
-      </div>
-    </div>
-  </template>
-  <template #footer>
-    <div class="p-2 bg-gray-100 flex justify-between items-center">
-      <span class="text-sm text-gray-500">5 items</span>
-      <button class="px-3 py-1 bg-blue-500 text-white rounded text-sm">Add Item</button>
-    </div>
-  </template>
-</dp-tree-list>
-`}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTreeList
-    },
-    setup() {
-      return {
-        args,
-        isBranch
-      };
-    },
-    template: \`
-      <div class="w-[600px]">
-        <dp-tree-list
-          :tree-data="args.treeData"
-          :branch-identifier="isBranch"
-          :options="args.options">
-          <template #header>
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">Name</div>
-              <div class="w-[100px]">Status</div>
-            </div>
-          </template>
-          <template #branch="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">Folder</div>
-            </div>
-          </template>
-          <template #leaf="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-            </div>
-          </template>
-        </dp-tree-list>
-      </div>
-    \`
-  }),
-  args: {
-    treeData: sampleTreeData,
-    options: {
-      branchesSelectable: false,
-      leavesSelectable: false,
-      dragBranches: false,
-      dragLeaves: false
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: \`
-<dp-tree-list
-  :tree-data="treeData"
-  :branch-identifier="isBranch"
-  :options="{
-    branchesSelectable: false,
-    leavesSelectable: false,
-    dragBranches: false,
-    dragLeaves: false
-  }">
-  <template #header>
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">Name</div>
-      <div class="w-[100px]">Status</div>
-    </div>
-  </template>
-  <template #branch="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">Folder</div>
-    </div>
-  </template>
-  <template #leaf="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-    </div>
-  </template>
-</dp-tree-list>
-\`
-      }
-    }
-  }
-}`,...a.parameters?.docs?.source},description:{story:"Default tree list example",...a.parameters?.docs?.description}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTreeList
-    },
-    setup() {
-      const selectedNodes = ref([]);
-      const handleNodeSelectionChange = (nodes: any[]) => {
-        selectedNodes.value = nodes;
-        console.log('Selected nodes:', nodes);
-      };
-      return {
-        args,
-        isBranch,
-        selectedNodes,
-        handleNodeSelectionChange
-      };
-    },
-    template: \`
-      <div class="w-[600px]">
-        <dp-tree-list
-          :tree-data="args.treeData"
-          :branch-identifier="isBranch"
-          :options="args.options"
-          @node-selection-change="handleNodeSelectionChange">
-          <template #header>
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">Name</div>
-              <div class="w-[100px]">Status</div>
-            </div>
-          </template>
-          <template #branch="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">Folder</div>
-            </div>
-          </template>
-          <template #leaf="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-            </div>
-          </template>
-        </dp-tree-list>
-
-        <div class="mt-4 p-4 bg-gray-100 rounded">
-          <h3 class="font-bold mb-2">Selected Nodes:</h3>
-          <div v-if="selectedNodes.length === 0">No nodes selected</div>
-          <ul v-else class="list-disc pl-4">
-            <li v-for="(node, index) in selectedNodes" :key="index">
-              {{ node.attributes?.title || 'Unnamed node' }} ({{ node.nodeType }})
-            </li>
-          </ul>
-        </div>
-      </div>
-    \`
-  }),
-  args: {
-    treeData: sampleTreeData,
-    options: {
-      branchesSelectable: true,
-      leavesSelectable: true,
-      dragBranches: false,
-      dragLeaves: false,
-      selectOn: {
-        childSelect: false,
-        parentSelect: true
-      },
-      deselectOn: {
-        childDeselect: true,
-        parentDeselect: true
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: \`
-<dp-tree-list
-  :tree-data="treeData"
-  :branch-identifier="isBranch"
-  :options="{
-    branchesSelectable: true,
-    leavesSelectable: true,
-    selectOn: {
-      childSelect: false,
-      parentSelect: true
-    },
-    deselectOn: {
-      childDeselect: true,
-      parentDeselect: true
-    }
-  }"
-  @node-selection-change="handleNodeSelectionChange">
-  <template #header>
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">Name</div>
-      <div class="w-[100px]">Status</div>
-    </div>
-  </template>
-  <template #branch="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">Folder</div>
-    </div>
-  </template>
-  <template #leaf="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-    </div>
-  </template>
-</dp-tree-list>
-\`
-      }
-    }
-  }
-}`,...s.parameters?.docs?.source},description:{story:"Tree list with selectable nodes",...s.parameters?.docs?.description}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTreeList
-    },
-    setup() {
-      const handleTreeChange = (newTree: any) => {
-        console.log('Tree structure changed:', newTree);
-      };
-      const handleDraggableChange = (payload: any) => {
-        console.log('Draggable change:', payload);
-      };
-      return {
-        args,
-        isBranch,
-        handleTreeChange,
-        handleDraggableChange
-      };
-    },
-    template: \`
-      <div class="w-[600px]">
-        <dp-tree-list
-          :tree-data="args.treeData"
-          :branch-identifier="isBranch"
-          :options="args.options"
-          @tree:change="handleTreeChange"
-          @draggable:change="handleDraggableChange">
-          <template #header>
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">Name</div>
-              <div class="w-[100px]">Status</div>
-            </div>
-          </template>
-          <template #branch="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">Folder</div>
-            </div>
-          </template>
-          <template #leaf="{ nodeElement }">
-            <div class="flex items-center space-x-4">
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-            </div>
-          </template>
-          <template #footer>
-            <div class="text-sm italic text-gray-500">Drag items to reorder</div>
-          </template>
-        </dp-tree-list>
-      </div>
-    \`
-  }),
-  args: {
-    treeData: sampleTreeData,
-    options: {
-      dragBranches: true,
-      dragLeaves: true,
-      rootDraggable: true,
-      dragAcrossBranches: true
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: \`
-<dp-tree-list
-  :tree-data="treeData"
-  :branch-identifier="isBranch"
-  :options="{
-    dragBranches: true,
-    dragLeaves: true,
-    rootDraggable: true,
-    dragAcrossBranches: true
-  }"
-  @tree:change="handleTreeChange"
-  @draggable:change="handleDraggableChange">
-  <template #header>
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">Name</div>
-      <div class="w-[100px]">Status</div>
-    </div>
-  </template>
-  <template #branch="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">Folder</div>
-    </div>
-  </template>
-  <template #leaf="{ nodeElement }">
-    <div class="flex items-center space-x-4">
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px]">{{ nodeElement.attributes.status }}</div>
-    </div>
-  </template>
-  <template #footer>
-    <div class="text-sm italic text-gray-500">Drag items to reorder</div>
-  </template>
-</dp-tree-list>
-\`
-      }
-    }
-  }
-}`,...n.parameters?.docs?.source},description:{story:"Tree list with draggable nodes",...n.parameters?.docs?.description}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTreeList,
-      DpIcon
-    },
-    setup() {
-      return {
-        args,
-        isBranch
-      };
-    },
-    template: \`
-      <div class="w-[600px]">
-        <dp-tree-list
-          :tree-data="args.treeData"
-          :branch-identifier="isBranch"
-          :options="args.options">
-          <template #header>
-            <div class="flex items-center p-2 bg-gray-100 font-bold">
-              <div class="flex-1">File Explorer</div>
-              <div class="w-[100px] text-right">Type</div>
-            </div>
-          </template>
-          <template #branch="{ nodeElement }">
-            <div class="flex items-center p-2 hover:bg-gray-50">
-              <dp-icon icon="folder" class="mr-2 text-yellow-500" />
-              <div class="flex-1 font-medium">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px] text-right text-gray-500">Directory</div>
-            </div>
-          </template>
-          <template #leaf="{ nodeElement }">
-            <div class="flex items-center p-2 hover:bg-gray-50">
-              <dp-icon icon="file-text" class="mr-2 text-blue-500" />
-              <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-              <div class="w-[100px] text-right text-gray-500">
-                {{ nodeElement.attributes.status === 'active' ? 'Document' : 'Draft' }}
-              </div>
-            </div>
-          </template>
-          <template #footer>
-            <div class="p-2 bg-gray-100 flex justify-between items-center">
-              <span class="text-sm text-gray-500">5 items</span>
-              <button class="px-3 py-1 bg-blue-500 text-white rounded text-sm">Add Item</button>
-            </div>
-          </template>
-        </dp-tree-list>
-      </div>
-    \`
-  }),
-  args: {
-    treeData: sampleTreeData,
-    options: {
-      branchesSelectable: false,
-      leavesSelectable: true,
-      dragBranches: false,
-      dragLeaves: false
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: \`
-<dp-tree-list
-  :tree-data="treeData"
-  :branch-identifier="isBranch"
-  :options="{
-    branchesSelectable: false,
-    leavesSelectable: true
-  }">
-  <template #header>
-    <div class="flex items-center p-2 bg-gray-100 font-bold">
-      <div class="flex-1">File Explorer</div>
-      <div class="w-[100px] text-right">Type</div>
-    </div>
-  </template>
-  <template #branch="{ nodeElement }">
-    <div class="flex items-center p-2 hover:bg-gray-50">
-      <dp-icon icon="folder" class="mr-2 text-yellow-500" />
-      <div class="flex-1 font-medium">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px] text-right text-gray-500">Directory</div>
-    </div>
-  </template>
-  <template #leaf="{ nodeElement }">
-    <div class="flex items-center p-2 hover:bg-gray-50">
-      <dp-icon icon="file-text" class="mr-2 text-blue-500" />
-      <div class="flex-1">{{ nodeElement.attributes.title }}</div>
-      <div class="w-[100px] text-right text-gray-500">
-        {{ nodeElement.attributes.status === 'active' ? 'Document' : 'Draft' }}
-      </div>
-    </div>
-  </template>
-  <template #footer>
-    <div class="p-2 bg-gray-100 flex justify-between items-center">
-      <span class="text-sm text-gray-500">5 items</span>
-      <button class="px-3 py-1 bg-blue-500 text-white rounded text-sm">Add Item</button>
-    </div>
-  </template>
-</dp-tree-list>
-\`
-      }
-    }
-  }
-}`,...l.parameters?.docs?.source},description:{story:"Tree list with custom rendering",...l.parameters?.docs?.description}}};const C=["Default","SelectableNodes","DraggableNodes","CustomRendering"];export{l as CustomRendering,a as Default,n as DraggableNodes,s as SelectableNodes,C as __namedExportsOrder,T as default};