@central-design-system/skills 4.0.0-alpha.6

package/skills/cds-builder/references/components/cds-tree/examples.md

@@ -0,0 +1,785 @@
+# CdsTree — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+A tree shows a hierarchy: catalog sections, project files, an org structure. Nodes expand, get selected by a click or with checkboxes, load from the server and can be dragged, while virtual scrolling keeps everything smooth even with thousands of nodes.
+
+## Expanding nodes
+
+The data of the tree is an array of `{ title, key, children }` nodes in the `tree-data` prop. The expanded state is driven by `v-model:expanded-keys`; if you do not need to control it, set the initial state through `default-expanded-keys` or `default-expand-all`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsTree } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const basicTreeData: NTree.IDataNode[] = [
+  {
+    title: 'Родительский узел 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'Родительский узел 1-0',
+        key: '0-0-0',
+        children: [
+          { title: 'Вложенный узел', key: '0-0-0-0' },
+          { title: 'Вложенный узел', key: '0-0-0-1' }
+        ]
+      },
+      {
+        title: 'Родительский узел 1-1',
+        key: '0-0-1',
+        children: [{ title: 'Вложенный узел', key: '0-0-1-0' }]
+      }
+    ]
+  }
+];
+
+const expandedKeys = ref<string[]>(['0-0-0']);
+const treeData = basicTreeData;
+</script>
+
+<template>
+  <div class="m-auto max-w-[320px]">
+    <CdsTree v-model:expanded-keys="expandedKeys" :tree-data="treeData" />
+  </div>
+</template>
+```
+
+## Expanding nodes
+
+The `expand-action` prop expands a node by a click on the whole row: `click` for a single click, `dblclick` for a double one. Without it a node expands only from the switcher.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsTree } from '@central-design-system/components';
+
+const treeData = (action: NTree.TExpandAction): NTree.IDataNode[] => [
+  {
+    title: action === 'click' ? 'Нажми на меня' : 'Дважды нажми на меня',
+    key: '0-0',
+    children: [
+      {
+        title: 'Родительский узел 1-0',
+        key: '0-0-0',
+        children: [
+          { title: 'Вложенный узел', key: '0-0-0-0' },
+          { title: 'Вложенный узел', key: '0-0-0-1' }
+        ]
+      },
+      {
+        title: 'Родительский узел 1-1',
+        key: '0-0-1',
+        children: [{ title: 'Вложенный узел', key: '0-0-1-0' }]
+      }
+    ]
+  }
+];
+</script>
+
+<template>
+  <div class="m-auto flex max-w-[320px] flex-col gap-4">
+    <CdsTree :tree-data="treeData('click')" expand-action="click" />
+    <CdsTree :tree-data="treeData('dblclick')" expand-action="dblclick" />
+  </div>
+</template>
+```
+
+## Selecting nodes and checkboxes
+
+The `selectable` prop turns on selecting a node by a click (`v-model:selected-keys`), `multiple` allows selecting several nodes. The `checkable` prop adds checkboxes with their own `v-model:checked-keys` state: checking a parent checks all its descendants, and a partially checked parent goes into the indeterminate state (turned off with the `check-strictly` prop). Individual nodes are disabled with the `disabled` and `disableCheckbox` flags right in the data.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsToggle, CdsTree } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const treeData: NTree.IDataNode[] = [
+  {
+    title: 'Родительский узел 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'Родительский узел 1-0',
+        key: '0-0-0',
+        children: [
+          { title: 'Заблокированный узел', key: '0-0-0-0', disabled: true },
+          { title: 'Заблокированный чекбокс', key: '0-0-0-1', disableCheckbox: true },
+          { title: 'Вложенный узел', key: '0-0-0-2' }
+        ]
+      },
+      {
+        title: 'Родительский узел 1-1',
+        key: '0-0-1',
+        children: [
+          { title: 'Вложенный узел', key: '0-0-1-0' },
+          { title: 'Вложенный узел', key: '0-0-1-1' },
+          { title: 'Вложенный узел', key: '0-0-1-2' }
+        ]
+      }
+    ]
+  }
+];
+
+const expandedKeys = ref<string[]>(['0-0-0']);
+const selectedKeys = ref<string[]>(['0-0-0']);
+const checkedKeys = ref<string[]>(['0-0-0']);
+const isMultiple = ref(false);
+</script>
+
+<template>
+  <div class="m-auto max-w-[420px]">
+    <div class="mb-2">
+      <CdsToggle v-model="isMultiple" label="Мультивыбор selectedKeys" hide-messages />
+    </div>
+
+    <CdsTree
+      v-model:expanded-keys="expandedKeys"
+      v-model:selected-keys="selectedKeys"
+      v-model:checked-keys="checkedKeys"
+      :tree-data="treeData"
+      :multiple="isMultiple"
+      checkable
+      selectable
+    />
+
+    <div class="mt-4 flex justify-between gap-2 text-content-secondary">
+      <div>
+        <span>expandedKeys:</span>
+        <pre>{{ expandedKeys }}</pre>
+      </div>
+      <div>
+        <span>selectedKeys:</span>
+        <pre>{{ selectedKeys }}</pre>
+      </div>
+      <div>
+        <span>checkedKeys:</span>
+        <pre>{{ checkedKeys }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## Connecting lines
+
+The `show-line` prop draws lines between the nodes — in deep trees this makes it easier to follow the levels. The `{ showLeafIcon }` object controls the icon of the leaf nodes.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsToggle, CdsTree } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const treeData: NTree.IDataNode[] = [
+  {
+    title: 'Родительский узел 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'Родительский узел 1-0',
+        key: '0-0-0',
+        children: [
+          { title: 'Вложенный узел 1', key: '0-0-0-0' },
+          { title: 'Многострочный вложенный узел 2', key: '0-0-0-1' },
+          { title: 'Вложенный узел 3', key: '0-0-0-2' }
+        ]
+      },
+      {
+        title: 'Родительский узел 1-1',
+        key: '0-0-1',
+        children: [{ title: 'Вложенный узел 1', key: '0-0-1-0' }]
+      }
+    ]
+  },
+  {
+    title: 'Родительский узел 2',
+    key: '0-1',
+    children: [
+      {
+        title: 'Родительский узел 2-0',
+        key: '0-1-0',
+        children: [
+          { title: 'Вложенный узел', key: '0-1-0-0' },
+          { title: 'Вложенный узел', key: '0-1-0-1' }
+        ]
+      }
+    ]
+  }
+];
+
+const showLeafIcon = ref(false);
+
+const onSelect = (selectedKeys: NTree.TKey[], info: unknown) => {
+  console.log('selected', selectedKeys, info);
+};
+</script>
+
+<template>
+  <div class="m-auto max-w-[320px]">
+    <div class="mb-2">
+      <CdsToggle v-model="showLeafIcon" label="Иконка листа" hide-messages />
+    </div>
+    <CdsTree :tree-data="treeData" :default-expanded-keys="['0-0-0']" :show-line="{ showLeafIcon }" @select="onSelect">
+      <template #title="{ title, key }">
+        <template v-if="key === '0-0-0-1'">
+          <div>{{ title }}</div>
+          <div>{{ title }}</div>
+        </template>
+        <template v-else>{{ title }}</template>
+      </template>
+    </CdsTree>
+  </div>
+</template>
+```
+
+## Icons and slots
+
+Slots customize every part of a node; they receive the node context — `key`, `title`, `expanded`, `selected` and other fields.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsIcon, CdsTree } from '@central-design-system/components';
+
+const treeData: NTree.IDataNode[] = [
+  {
+    title: 'Родительский узел 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'Родительский узел 1-0',
+        key: '0-0-0',
+        disabled: true,
+        children: [
+          { title: 'Вложенный узел', key: '0-0-0-0' },
+          { title: 'Вложенный узел', key: '0-0-0-1' }
+        ]
+      },
+      {
+        title: 'Родительский узел 1-1',
+        key: '0-0-1',
+        children: [
+          { title: 'Вложенный узел', key: '0-0-1-0' },
+          { title: 'Вложенный узел', key: '0-0-1-1' }
+        ]
+      }
+    ]
+  }
+];
+</script>
+
+<template>
+  <div class="m-auto max-w-[320px]">
+    <CdsTree :tree-data="treeData" default-expand-all show-icon checkable>
+      <template #switcherIcon="{ switcherCls, expanded }">
+        <CdsIcon :name="expanded ? 'minus' : 'plus'" :class="switcherCls" />
+      </template>
+
+      <template #icon="{ key, selected }">
+        <CdsIcon v-if="key === '0-0'" name="add" />
+        <CdsIcon v-else-if="key === '0-0-0'" name="settings" />
+        <CdsIcon v-else-if="selected" name="info-fill" />
+        <CdsIcon v-else name="info" />
+      </template>
+
+      <template #title="{ title, key }">
+        <div v-if="key === '0-0-1-0'" class="flex items-center gap-1">
+          <strong>{{ title }}</strong>
+          <CdsIcon name="star" />
+        </div>
+        <template v-else>{{ title }}</template>
+      </template>
+    </CdsTree>
+  </div>
+</template>
+```
+
+## Asynchronous loading
+
+The `load-data` prop loads the child nodes on the first expand: the function receives the node, returns a promise and adds `children` to the data. Until the promise resolves, the node shows a loading indicator.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsTree } from '@central-design-system/components';
+import { ref, unref } from 'vue';
+
+const treeData = ref<NTree.IDataNode[]>([
+  { title: 'Родительский асинхронный узел', key: '0' },
+  { title: 'Родительский асинхронный узел', key: '1' },
+  { title: 'Родительский узел', key: '2', isLeaf: true }
+]);
+
+const expandedKeys = ref<string[]>([]);
+const selectedKeys = ref<string[]>([]);
+
+const onLoadData = (treeNode: NTree.IEventDataNode) =>
+  new Promise<void>((resolve) => {
+    if (treeNode.dataRef && treeNode.dataRef.children) {
+      resolve();
+      return;
+    }
+
+    setTimeout(() => {
+      if (!treeNode.dataRef) return;
+
+      treeNode.dataRef.children = [
+        { title: 'Вложенный асинхронный узел', key: `${treeNode.eventKey}-0` },
+        { title: 'Вложенный асинхронный узел', key: `${treeNode.eventKey}-1` }
+      ];
+
+      treeData.value = [...unref(treeData)];
+
+      resolve();
+    }, 1000);
+  });
+</script>
+
+<template>
+  <div class="m-auto max-w-[320px]">
+    <CdsTree
+      v-model:expanded-keys="expandedKeys"
+      v-model:selected-keys="selectedKeys"
+      :tree-data="treeData"
+      :load-data="onLoadData"
+    />
+  </div>
+</template>
+```
+
+## Dragging
+
+The `draggable` prop allows dragging the nodes; the `{ icon: true }` variant shows a drag handle. The tree does not change the data by itself — the `@drop` handler rebuilds `tree-data`, and `allow-drop` limits the valid drop targets.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsTree } from '@central-design-system/components';
+import { ref, unref } from 'vue';
+
+const generatedData: NTree.IDataNode[] = [];
+
+const x = 5;
+const y = 3;
+const z = 2;
+
+const generateData = (level: number, preKey = '0', treeNode: NTree.IDataNode[] = generatedData) => {
+  const children: string[] = [];
+  for (let i = 0; i < x; i++) {
+    const key = `${preKey}-${i}`;
+    treeNode.push({ title: key, key });
+    if (i < y) {
+      children.push(key);
+    }
+  }
+  if (level < 0) {
+    return treeNode;
+  }
+  const nextLevel = level - 1;
+  children.forEach((key, index) => {
+    treeNode[index].children = [];
+    generateData(nextLevel, key, treeNode[index].children);
+  });
+};
+
+generateData(z);
+
+const treeData = ref<NTree.IDataNode[]>(generatedData);
+
+const onDrop = (info: any) => {
+  const dropKey = info.node.key;
+  const dragKey = info.dragNode!.key;
+  const dropPos = info.node.pos!.split('-');
+  const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+
+  const loop = (data: NTree.IDataNode[] | undefined, key: string | number, callback: any) => {
+    if (!data) return;
+    data.forEach((item, index) => {
+      if (item.key === key) {
+        return callback(item, index, data);
+      }
+      if (item.children) {
+        return loop(item.children, key, callback);
+      }
+    });
+  };
+
+  const data = [...unref(treeData)];
+  let dragObj: NTree.IDataNode;
+
+  loop(data, dragKey!, (item: NTree.IDataNode, index: number, arr: NTree.IDataNode[]) => {
+    arr.splice(index, 1);
+    dragObj = item;
+  });
+
+  if (!info.dropToGap) {
+    loop(data, dropKey!, (item: NTree.IDataNode) => {
+      item.children = item.children || [];
+      item.children.unshift(dragObj);
+    });
+  } else if ((info.node.children || []).length > 0 && info.node.expanded && dropPosition === 1) {
+    loop(data, dropKey!, (item: NTree.IDataNode) => {
+      item.children = item.children || [];
+      item.children.unshift(dragObj);
+    });
+  } else {
+    let ar: NTree.IDataNode[] = [];
+    let i = 0;
+    loop(data, dropKey!, (_item: NTree.IDataNode, index: number, arr: NTree.IDataNode[]) => {
+      ar = arr;
+      i = index;
+    });
+    if (dropPosition === -1) {
+      ar.splice(i, 0, dragObj!);
+    } else {
+      ar.splice(i + 1, 0, dragObj!);
+    }
+  }
+
+  treeData.value = data;
+};
+</script>
+
+<template>
+  <div class="m-auto max-w-[320px]">
+    <CdsTree :tree-data="treeData" :draggable="{ icon: true }" block-node @drop="onDrop" />
+  </div>
+</template>
+```
+
+## Virtual scrolling
+
+The virtual list is on by default (the `virtual` prop). Set `height` and the tree scrolls inside a fixed height, rendering only the visible nodes: thousands of rows do not slow the page down.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsTree } from '@central-design-system/components';
+import { ref, unref, watch } from 'vue';
+
+const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+
+watch(selectedKeys, () => console.log('selectedKeys', unref(selectedKeys)));
+watch(checkedKeys, () => console.log('checkedKeys', unref(checkedKeys)));
+
+const dig = (path = '0', level = 3): NTree.IDataNode[] => {
+  const list: NTree.IDataNode[] = [];
+  for (let i = 0; i < 10; i += 1) {
+    const key = `${path}-${i}`;
+    const treeNode: NTree.IDataNode = { title: key, key };
+    if (level > 0) {
+      treeNode.children = dig(key, level - 1);
+    }
+    list.push(treeNode);
+  }
+  return list;
+};
+const treeData = dig();
+</script>
+
+<template>
+  <div class="m-auto max-w-[320px]">
+    <CdsTree
+      v-model:selected-keys="selectedKeys"
+      v-model:checked-keys="checkedKeys"
+      :tree-data="treeData"
+      :height="300"
+      default-expand-all
+      checkable
+    />
+  </div>
+</template>
+```
+
+## Directory mode
+
+`CdsTreeDirectory` is a tree with presets for files and folders: directory icons, expanding on click and full-width nodes. It accepts the same props as `CdsTree`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsTreeDirectory } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const treeData: NTree.IDataNode[] = [
+  {
+    title: 'Новая папка',
+    key: '0-0',
+    children: [
+      { title: 'index.ts', key: '0-0-0', isLeaf: true },
+      { title: 'index.html', key: '0-0-1', isLeaf: true }
+    ]
+  },
+  {
+    title: 'Другая папка',
+    key: '0-1',
+    children: [
+      { title: 'skuff.png', key: '0-1-0', isLeaf: true },
+      { title: 'newFile.md', key: '0-1-1', isLeaf: true }
+    ]
+  }
+];
+
+const expandedKeys = ref<string[]>(['0-0']);
+const selectedKeys = ref<string[]>([]);
+</script>
+
+<template>
+  <div class="m-auto max-w-[320px]">
+    <CdsTreeDirectory
+      v-model:expanded-keys="expandedKeys"
+      v-model:selected-keys="selectedKeys"
+      :tree-data="treeData"
+      multiple
+    />
+  </div>
+</template>
+```
+
+## Picking sections for an export
+
+Checkboxes collect a set of sections, and the counter in the button hints at the size of the selection. The `loading` prop of the button shows the export in progress, `disabled` prevents starting it with an empty selection.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsButton, CdsTree } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const treeData: NTree.IDataNode[] = [
+  {
+    title: 'Электроника',
+    key: 'electronics',
+    children: [
+      { title: 'Ноутбуки', key: 'laptops' },
+      { title: 'Мониторы', key: 'monitors' }
+    ]
+  },
+  {
+    title: 'Мебель',
+    key: 'furniture',
+    children: [
+      { title: 'Столы', key: 'tables' },
+      { title: 'Кресла', key: 'chairs' }
+    ]
+  },
+  { title: 'Канцтовары', key: 'stationery' }
+];
+
+const checkedKeys = ref<NTree.TKey[]>([]);
+const loading = ref(false);
+const exportedCount = ref(0);
+
+const count = computed(() => checkedKeys.value.length);
+
+const onExport = () => {
+  loading.value = true;
+  exportedCount.value = 0;
+
+  setTimeout(() => {
+    exportedCount.value = count.value;
+    checkedKeys.value = [];
+    loading.value = false;
+  }, 1500);
+};
+</script>
+
+<template>
+  <div class="m-auto flex w-[280px] flex-col gap-2">
+    <CdsTree v-model:checked-keys="checkedKeys" :tree-data="treeData" default-expand-all checkable />
+
+    <CdsButton :text="`Выгрузить разделы (${count})`" :loading="loading" :disabled="!count" @click="onExport" />
+
+    <span v-if="exportedCount" class="text-center text-content-secondary">
+      Выгружено разделов: {{ exportedCount }}
+    </span>
+  </div>
+</template>
+```
+
+## Search across the tree
+
+An input field filters `tree-data` on the fly: the matches and their parents stay in the tree, and `v-model:expanded-keys` expands the branches with the found nodes. When there are no matches, show an empty state instead of the tree.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsTextInput, CdsTree } from '@central-design-system/components';
+import { computed, ref, watch } from 'vue';
+
+const structure: NTree.IDataNode[] = [
+  {
+    title: 'Компания',
+    key: 'company',
+    children: [
+      {
+        title: 'Коммерческий департамент',
+        key: 'commercial',
+        children: [
+          { title: 'Отдел продаж', key: 'sales' },
+          { title: 'Отдел закупок', key: 'purchases' }
+        ]
+      },
+      {
+        title: 'ИТ-департамент',
+        key: 'it',
+        children: [
+          { title: 'Разработка', key: 'development' },
+          { title: 'Поддержка', key: 'support' }
+        ]
+      },
+      {
+        title: 'Финансовый департамент',
+        key: 'finance',
+        children: [{ title: 'Бухгалтерия', key: 'accounting' }]
+      }
+    ]
+  }
+];
+
+const query = ref('');
+const expandedKeys = ref<NTree.TKey[]>(['company']);
+
+const filterNodes = (nodes: NTree.IDataNode[], text: string): NTree.IDataNode[] =>
+  nodes.flatMap((node) => {
+    const children = filterNodes(node.children ?? [], text);
+    const matched = String(node.title).toLowerCase().includes(text);
+
+    if (!matched && !children.length) return [];
+
+    return [{ ...node, children: children.length ? children : node.children }];
+  });
+
+const treeData = computed(() => {
+  const text = query.value.trim().toLowerCase();
+
+  return text ? filterNodes(structure, text) : structure;
+});
+
+const collectParentKeys = (nodes: NTree.IDataNode[]): NTree.TKey[] =>
+  nodes.flatMap((node) =>
+    node.children?.length && node.key != null ? [node.key, ...collectParentKeys(node.children)] : []
+  );
+
+watch(treeData, (nodes) => {
+  if (query.value.trim()) {
+    expandedKeys.value = collectParentKeys(nodes);
+  }
+});
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-2">
+    <CdsTextInput
+      v-model="query"
+      placeholder="Найти подразделение"
+      prepend-inner-icon="search"
+      clearable
+      hide-messages
+    />
+
+    <CdsTree v-if="treeData.length" v-model:expanded-keys="expandedKeys" :tree-data="treeData" />
+
+    <span v-else class="text-center text-content-secondary">Ничего не найдено</span>
+  </div>
+</template>
+```
+
+## Project files
+
+`CdsTreeDirectory` with `v-model:selected-keys` works as a file explorer: a click on a folder expands it, a click on a file selects it. The node keys hold the path to the file, so the selected item is ready to be shown or requested right away.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTree } from '@central-design-system/components';
+import { CdsTreeDirectory } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const treeData: NTree.IDataNode[] = [
+  {
+    title: 'src',
+    key: 'src',
+    children: [
+      {
+        title: 'components',
+        key: 'src/components',
+        children: [
+          { title: 'AppHeader.vue', key: 'src/components/AppHeader.vue', isLeaf: true },
+          { title: 'AppFooter.vue', key: 'src/components/AppFooter.vue', isLeaf: true }
+        ]
+      },
+      { title: 'main.ts', key: 'src/main.ts', isLeaf: true }
+    ]
+  },
+  {
+    title: 'public',
+    key: 'public',
+    children: [{ title: 'favicon.svg', key: 'public/favicon.svg', isLeaf: true }]
+  },
+  { title: 'package.json', key: 'package.json', isLeaf: true }
+];
+
+const expandedKeys = ref<NTree.TKey[]>(['src']);
+const selectedKeys = ref<NTree.TKey[]>([]);
+
+const findNode = (nodes: NTree.IDataNode[], key: NTree.TKey): NTree.IDataNode | undefined => {
+  for (const node of nodes) {
+    if (node.key === key) return node;
+
+    const child = findNode(node.children ?? [], key);
+    if (child) return child;
+  }
+
+  return undefined;
+};
+
+const selectedFile = computed(() => {
+  const key = selectedKeys.value[0];
+  if (key === undefined) return undefined;
+
+  const node = findNode(treeData, key);
+
+  return node?.isLeaf ? String(key) : undefined;
+});
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-2">
+    <CdsTreeDirectory v-model:expanded-keys="expandedKeys" v-model:selected-keys="selectedKeys" :tree-data="treeData" />
+
+    <span class="text-center text-content-secondary">
+      {{ selectedFile ? `Открыт файл: ${selectedFile}` : 'Выберите файл' }}
+    </span>
+  </div>
+</template>
+```