@a2simcode/ui 0.0.46 → 0.0.47

package/docs/components/table-panel.md

@@ -0,0 +1,199 @@
+# TablePanel 表格面板
+
+基于 Table 组件封装的高级表格面板，集成搜索、筛选、排序、分页等常用功能。
+
+## 基础用法
+
+通过 `columns` 配置列，`loadData` 加载数据，`buttons` 配置工具栏按钮，`actions` 配置行内操作按钮。需设置 `row-key` 指定行数据的唯一标识字段。
+
+<Demo :source-code="tablePanelBasicCode">
+  <template #source>
+    <table-panel-basic />
+  </template>
+  <template #description>
+    配置 `columns` 中的 `config.filter.isSearchKeyword` 开启关键字搜索支持。注意：必须配置 `row-key` 属性指定数据唯一标识（如 id），否则无法正常使用多选功能。**重要提示：** 关键字搜索功能需要后端支持，`loadData` 方法会接收包含 `keyword` 参数的对象，需要将关键字传递给后端接口进行数据过滤。
+  </template>
+</Demo>
+
+## 筛选功能
+
+支持多条件筛选，可以针对不同字段类型选择不同的筛选方式。
+
+**重要提示：** 查询过滤功能（包括关键字搜索和筛选条件）需要后端支持。`loadData` 方法会接收包含 `keyword`（关键字搜索）和 `filter`（筛选条件）的参数，需要将这些参数传递给后端接口进行数据过滤。示例中的前端过滤仅用于演示，实际使用时请确保后端接口支持相应的查询参数。
+
+<Demo :source-code="tablePanelFilterCode">
+  <template #source>
+    <table-panel-filter />
+  </template>
+  <template #description>
+    通过 `config.dataType` 配置字段类型，筛选面板会自动根据类型提供合适的筛选方式。支持的类型：`options`（选项）、`dateTime`（日期时间）等。筛选面板可以点击固定按钮固定在右侧显示。**注意：** 此示例中的查询过滤功能需要后端支持，实际使用时请确保后端接口能够处理 `loadData` 传入的 `keyword` 和 `filter` 参数。
+  </template>
+</Demo>
+
+## 分页
+
+通过 `isPage` 开启分页，`loadData` 返回 `{ rows, records }` 格式数据。
+
+<Demo :source-code="tablePanelPaginationCode">
+  <template #source>
+    <table-panel-pagination />
+  </template>
+  <template #description>
+    设置 `isPage` 为 `true` 开启分页，`loadData` 方法会接收包含 `pagination` 信息的参数对象，返回数据需要包含 `rows`（当前页数据）和 `records`（总条数）。
+  </template>
+</Demo>
+
+## 多选功能
+
+通过 `is-multiple` 属性开启多选功能。多选功能支持两种使用场景：
+
+### 1. 无批处理按钮的多选
+
+当只需要多选功能，但不需要批处理按钮时，设置 `is-multiple` 为 `true` 即可。此时：
+
+- 表格会显示复选框列，支持单选和全选
+- 选中状态会跨页保持（需要配置 `row-key`）
+- 选中记录后，工具栏会显示选中记录数、"仅选中"/"全部"切换按钮、清空选中按钮
+- 支持"仅显示选中"模式，可以只查看已选中的记录
+- 工具栏按钮（如新增、导出等）始终显示
+- 查询设置按钮（搜索、筛选、排序等）在选中记录后仍显示，但进入"仅显示选中"模式后会隐藏
+- 可以通过组件实例的 `getSelection()` 方法获取当前选中的记录
+- 可以通过 `@select` 事件监听选中状态变化
+
+<Demo :source-code="tablePanelMultipleSelectionCode">
+  <template #source>
+    <table-panel-multiple-selection />
+  </template>
+  <template #description>
+    设置 `is-multiple` 为 `true` 开启多选功能。必须配置 `row-key` 属性指定数据唯一标识，否则无法跨页保持选中状态。选中记录后，会显示选中记录数、"仅选中"/"全部"切换按钮、清空选中按钮，支持仅显示选中项的功能。可以通过组件实例的 `getSelection()` 方法获取选中的记录，或通过 `@select` 事件监听选中状态变化。
+  </template>
+</Demo>
+
+### 2. 带批处理按钮的多选
+
+当需要批量操作功能时，除了设置 `is-multiple` 为 `true`，还需要配置 `batchButtons` 属性。此时：
+
+- 表格会显示复选框列，支持单选和全选
+- 选中记录后，工具栏会显示选中记录数、切换显示模式、清空选中等控制按钮
+- 配置的批量操作按钮会在选中记录后显示
+- 选中记录后，会隐藏原先的工具栏按钮和查询设置按钮（搜索、筛选、排序、列管理、刷新）
+- 批量操作按钮的 `click` 函数会接收当前选中的记录数组作为参数
+- 支持"仅显示选中"模式，可以只查看已选中的记录
+
+<Demo :source-code="tablePanelBatchOperationsCode">
+  <template #source>
+    <table-panel-batch-operations />
+  </template>
+  <template #description>
+    通过 `batchButtons` 配置批量操作按钮，`click` 函数会接收当前选中的记录数组作为参数。选中记录后，会显示选中记录数、切换显示/仅显示选中、清空选中等控制按钮，以及配置的批量操作按钮。同时会隐藏原先的按钮和查询设置按钮（搜索、筛选、排序、列管理、刷新）。
+  </template>
+</Demo>
+
+### 多选功能说明
+
+**重要提示：**
+
+1. **必须配置 `row-key`**：开启多选功能时，必须配置 `row-key` 属性指定数据唯一标识字段（如 `id`、`orderId` 等），否则无法正常使用多选功能，也无法跨页保持选中状态。
+
+2. **跨页保持选中**：
+   - 当配置了 `row-key` 时，选中状态会跨页保持
+   - 切换页面时，之前选中的记录仍然保持选中状态
+   - 如果数据被刷新或重新加载，有批处理按钮时会清空选中状态，无批处理按钮时会尝试保留仍然存在的记录
+
+3. **获取选中数据**：
+   ```vue
+   <template>
+     <j-table-panel ref="tablePanelRef" is-multiple @select="handleSelect" />
+   </template>
+   <script setup>
+   import { ref } from 'vue'
+   
+   const tablePanelRef = ref()
+   
+   // 方式1: 通过事件监听
+   const handleSelect = (selectedRecords) => {
+     console.log('选中的记录:', selectedRecords)
+   }
+   
+   // 方式2: 通过组件实例方法
+   const getSelected = () => {
+     const selected = tablePanelRef.value?.getSelection()
+     console.log('选中的记录:', selected)
+   }
+   </script>
+   ```
+
+4. **两种模式的区别**：
+
+| 特性 | 无批处理按钮 | 有批处理按钮 |
+|------|------------|------------|
+| 工具栏按钮 | 始终显示 | 选中后切换为选中控制按钮 |
+| 查询设置按钮 | 选中后仍显示，进入"仅显示选中"模式后隐藏 | 选中后立即隐藏 |
+| 选中状态保持 | 跨页保持，刷新后尝试保留 | 跨页保持，刷新后清空 |
+| 仅显示选中模式 | 支持 | 支持 |
+| 适用场景 | 需要获取选中数据，但操作在外部处理 | 需要批量操作功能 |
+
+## 批量操作
+
+批量操作是多选功能的一种扩展使用方式，详见上面的"多选功能"章节中的"带批处理按钮的多选"部分。
+
+## API
+
+<ApiTable :data="tablePanelApi" componentName="table-panel" />
+
+### ButtonItem 类型
+
+| 属性名 | 说明         | 类型                                                                  | 默认值 |
+| ------ | ------------ | --------------------------------------------------------------------- | ------ |
+| label  | 按钮显示文本 | `string`                                                              | -      |
+| icon   | 按钮图标     | `string`                                                              | -      |
+| type   | 按钮类型     | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'text'` | -      |
+| click  | 按钮点击回调 | `() => void`                                                          | -      |
+
+### loadData 参数
+
+调用 `loadData` 时会传入以下参数：
+
+```ts
+interface LoadDataParams {
+  // 关键字搜索
+  keyword?: {
+    value: string // 搜索关键字
+    fields: string[] // 搜索字段
+  }
+  // 筛选条件
+  filter?: {
+    rel: 'and' | 'or' // 条件关系
+    cond: {
+      // 条件列表
+      field: string // 字段名
+      method: string // 筛选方式: eq, ne, like, unlike, in, nin, gte, lte, range, empty, not_empty
+      value: any // 筛选值
+      type: string // 值类型
+    }[]
+  }
+  // 分页信息（isPage=true 时）
+  pagination?: {
+    rows: number // 每页条数
+    page: number // 当前页码
+    sort: string // 排序字段
+  }
+  // 排序（isPage=false 时）
+  sort?: string
+}
+```
+
+<script setup>
+import TablePanelBasic from '../examples/table-panel/basic.vue'
+import TablePanelFilter from '../examples/table-panel/filter.vue'
+import TablePanelPagination from '../examples/table-panel/pagination.vue'
+import TablePanelMultipleSelection from '../examples/table-panel/multiple-selection.vue'
+import TablePanelBatchOperations from '../examples/table-panel/batch-operations.vue'
+import tablePanelApi from './meta/table-panel'
+
+import tablePanelBasicCode from '../examples/table-panel/basic.vue?raw'
+import tablePanelFilterCode from '../examples/table-panel/filter.vue?raw'
+import tablePanelPaginationCode from '../examples/table-panel/pagination.vue?raw'
+import tablePanelMultipleSelectionCode from '../examples/table-panel/multiple-selection.vue?raw'
+import tablePanelBatchOperationsCode from '../examples/table-panel/batch-operations.vue?raw'
+</script>

package/docs/components/table.md

@@ -0,0 +1,202 @@
+# Table 表格
+
+基于字节 VTable 的高性能表格组件,用于展示大量结构化数据。
+
+## 基础用法
+
+基础的表格展示用法。
+
+<Demo :source-code="tableBasicCode">
+  <template #source>
+    <table-basic />
+  </template>
+  <template #description>
+    通过 `columns` 属性配置表格列,通过 `records` 属性设置表格数据。
+  </template>
+</Demo>
+
+## 冻结列
+
+通过 `columns` 中的 `config.frozen` 属性设置列的冻结方式，支持 `left`（左侧冻结）和 `right`（右侧冻结）。
+
+> 注意：在列组合（树形表头）中，如果子列设置了冻结属性，则包含该子列的整个父列组都会被冻结。
+
+<Demo :source-code="tableFrozenColumnCode">
+  <template #source>
+    <table-frozen-column />
+  </template>
+  <template #description>
+    设置 `frozen: 'left'` 或 `frozen: 'right'` 来冻结列。
+  </template>
+</Demo>
+
+## 高度模式
+
+通过 `heightMode` 属性控制表格高度模式，支持 `full` (充满父容器) 和 `auto` (内容自适应)。当设置为 `auto` 时，可通过 `maxHeight` 设置最大高度。
+
+<Demo :source-code="tableHeightModeCode">
+  <template #source>
+    <table-height-mode />
+  </template>
+  <template #description>
+    切换 `heightMode` 查看不同高度模式的效果。当 `heightMode` 为 `auto` 且设置了 `maxHeight` 时，超过最大高度会出现滚动条。
+  </template>
+</Demo>
+
+## 列组合
+
+通过在 `columns` 中嵌套 `children` 属性，可以实现多级表头（树形结构列配置）。
+
+<Demo :source-code="tableTreeColumnCode">
+  <template #source>
+    <table-tree-column />
+  </template>
+  <template #description>
+    在 `columns` 中嵌套 `children` 来声明分组。
+  </template>
+</Demo>
+
+## 树形展示
+
+通过 `isTree` 属性开启树形展示。
+
+<Demo :source-code="tableTreeDataCode">
+  <template #source>
+    <table-tree-data />
+  </template>
+  <template #description>
+    设置 `isTree` 为 `true` 开启树形展示，第一列会自动显示展开/折叠图标。
+  </template>
+</Demo>
+
+## 多选
+
+通过 `isMultiple` 属性开启多选。
+<Demo :source-code="tableMultipleCode">
+<template #source>
+<table-multiple />
+</template>
+<template #description>
+设置 `isMultiple` 为 `true` 开启多选，表格第一列会显示勾选框。
+</template>
+</Demo>
+
+## 单选获取选中行
+
+在非多选模式下，可以通过 `selectionChanged` 事件或 `getSelection` 方法获取当前选中的行数据。
+
+<Demo :source-code="tableSingleSelectionCode">
+  <template #source>
+    <table-single-selection />
+  </template>
+  <template #description>
+    默认情况下（`isMultiple` 为 `false`），点击表格行会触发 `selectionChanged` 事件。
+  </template>
+</Demo>
+
+## 字段控制选中状态
+
+通过 `selectField` 属性绑定选中状态字段。
+<Demo :source-code="tableFieldSelectionCode">
+<template #source>
+<table-field-selection />
+</template>
+<template #description>
+设置 `selectField` 属性，表格会根据数据中的该字段来渲染选中状态。
+</template>
+</Demo>
+
+## 分页
+
+通过 `isPage` 属性开启分页功能。
+
+<Demo :source-code="tablePaginationCode">
+  <template #source>
+    <table-pagination />
+  </template>
+  <template #description>
+    设置 `isPage` 为 `true` 开启分页，通过 `v-model:table-page` 和 `v-model:page-size` 绑定当前页码和每页显示数量，监听 `loadPageData` 事件来加载对应页的数据。
+  </template>
+</Demo>
+
+## 行内操作按钮
+
+通过 `actions` 属性配置行内操作按钮。
+
+<Demo :source-code="tableActionsCode">
+  <template #source>
+    <table-actions />
+  </template>
+  <template #description>
+    通过 `actions` 属性传入按钮配置数组，每个按钮需要配置 `id`（唯一标识）、`label`（显示文本）、`click`（点击回调函数）。可选配置 `color` 自定义按钮颜色。操作列宽度自动计算，默认最多显示3个按钮，超出部分收纳到"更多"下拉菜单中。可通过 `actionsMaxCount` 设置最大显示数量，`actionsLabel` 设置操作列标题。
+  </template>
+</Demo>
+
+## 单元格编辑
+
+通过在列配置中设置 `editor` 属性启用单元格编辑功能。
+
+<Demo :source-code="tableEditableCode">
+  <template #source>
+    <table-editable />
+  </template>
+  <template #description>
+    在列配置的 `config` 中设置 `editor: true` 启用编辑功能，点击单元格即可进入编辑模式。支持多种编辑器类型：
+    <ul>
+      <li><code>j-input</code> - 文本输入框</li>
+      <li><code>j-number</code> - 数字输入框</li>
+      <li><code>j-select</code> - 下拉选择器</li>
+      <li><code>j-radio</code> - 单选框</li>
+      <li><code>j-checkbox</code> - 复选框</li>
+      <li><code>j-switch</code> - 开关</li>
+      <li>以及其他 j-input 开头的输入组件</li>
+    </ul>
+    通过监听 <code>cell-change</code> 事件可以获取单元格值的变化。
+  </template>
+</Demo>
+
+## 添加数据
+
+通过 `editConfig` 属性配置 `isAddBtn` 为 `true` 来显示添加按钮。
+
+<Demo :source-code="tableAddRowCode">
+  <template #source>
+    <table-add-row />
+  </template>
+  <template #description>
+    设置 `editConfig` 的 `isAddBtn` 为 `true` 开启添加按钮，可通过 `addBtnText` 自定义按钮文本。点击添加按钮会触发 `add` 事件，并自动在表格中插入一行新数据（使用列配置中的 `defaultValue`）。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="tableApi" componentName="table" />
+
+<script setup>
+import TableBasic from '../examples/table/basic.vue'
+import TableFrozenColumn from '../examples/table/frozen-column.vue'
+import TableHeightMode from '../examples/table/height-mode.vue'
+import TableTreeColumn from '../examples/table/tree-column.vue'
+import TableTreeData from '../examples/table/tree-data.vue'
+import TableMultiple from '../examples/table/multiple.vue'
+import TableSingleSelection from '../examples/table/single-selection.vue'
+import TableFieldSelection from '../examples/table/field-selection.vue'
+import TablePagination from '../examples/table/pagination.vue'
+import TableActions from '../examples/table/actions.vue'
+import TableEditable from '../examples/table/editable.vue'
+import TableAddRow from '../examples/table/add-row.vue'
+import tableApi from './meta/table'
+
+import tableBasicCode from '../examples/table/basic.vue?raw'
+import tableFrozenColumnCode from '../examples/table/frozen-column.vue?raw'
+import tableHeightModeCode from '../examples/table/height-mode.vue?raw'
+import tableTreeColumnCode from '../examples/table/tree-column.vue?raw'
+import tableTreeDataCode from '../examples/table/tree-data.vue?raw'
+import tableMultipleCode from '../examples/table/multiple.vue?raw'
+import tableSingleSelectionCode from '../examples/table/single-selection.vue?raw'
+import tableFieldSelectionCode from '../examples/table/field-selection.vue?raw'
+import tablePaginationCode from '../examples/table/pagination.vue?raw'
+import tableActionsCode from '../examples/table/actions.vue?raw'
+import tableEditableCode from '../examples/table/editable.vue?raw'
+import tableAddRowCode from '../examples/table/add-row.vue?raw'
+</script>

package/docs/components/tabs.md

@@ -0,0 +1,26 @@
+# Tabs 标签页
+
+用于分隔内容上有关联但属于不同类别的数据集合。
+
+## 基础用法
+
+基础的、简洁的标签页。
+
+<Demo :source-code="tabsBasicCode">
+  <template #source>
+    <tabs-basic />
+  </template>
+  <template #description>
+    通过 `v-model` 绑定当前激活的标签页，使用 `el-tab-pane` 定义标签页内容。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="tabsApi" componentName="tabs" />
+
+<script setup>
+import TabsBasic from '../examples/tabs/basic.vue'
+import tabsApi from './meta/tabs'
+import tabsBasicCode from '../examples/tabs/basic.vue?raw'
+</script>

package/docs/components/title.md

@@ -0,0 +1,24 @@
+# Title 标题
+
+用于展示页面或区域的标题文本。支持自定义颜色、大小、粗细和样式等功能。
+
+## 基础用法
+
+<Demo :source-code="titleBasicCode">
+  <template #source>
+    <title-basic />
+  </template>
+  <template #description>
+    通过 `title` 属性设置标题内容，支持 `color`、`size`、`weight` 等属性自定义样式。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="titleApi" componentName="title" />
+
+<script setup>
+import TitleBasic from '../examples/title/basic.vue'
+import titleApi from './meta/title'
+import titleBasicCode from '../examples/title/basic.vue?raw'
+</script>

package/docs/components/tree.md

@@ -0,0 +1,207 @@
+# Tree 树形控件
+
+用清晰的层级结构展示信息，可展开或折叠。
+
+## 基础用法
+
+基础的树形结构展示。
+
+<Demo :source-code="treeBasicCode">
+  <template #source>
+    <tree-basic />
+  </template>
+  <template #description>
+    通过 `list` 属性设置树形数据，`click` 事件监听节点点击。
+  </template>
+</Demo>
+
+## 扁平数据
+
+支持扁平数组数据，会自动转换为树形结构。
+
+<Demo :source-code="treeFlatDataCode">
+  <template #source>
+    <tree-flat-data />
+  </template>
+  <template #description>
+    设置 `is-tree-data` 为 `false`，组件会自动将扁平数组转换为树形结构。需要提供 `pid` 字段表示父级关系。
+  </template>
+</Demo>
+
+## 可选择
+
+使用 `checkable` 属性开启复选框功能。
+
+<Demo :source-code="treeCheckableCode">
+  <template #source>
+    <tree-checkable />
+  </template>
+  <template #description>
+    设置 `checkable` 为 `true` 显示复选框，通过 `default-checked-keys` 设置默认选中，`check` 事件监听勾选变化。
+  </template>
+</Demo>
+
+## 异步加载
+
+通过 `load-data` 属性异步加载数据。
+
+<Demo :source-code="treeLoadDataCode">
+  <template #source>
+    <tree-load-data />
+  </template>
+  <template #description>
+    使用 `load-data` 属性传入异步加载函数，`after-load-data` 在数据加载完成后触发。
+  </template>
+</Demo>
+
+## 图标
+
+支持为节点设置图标。
+
+<Demo :source-code="treeIconCode">
+  <template #source>
+    <tree-icon />
+  </template>
+  <template #description>
+    通过 `default-icon` 和 `default-icon-color` 设置默认图标，节点数据中的 `nodeIcon` 和 `nodeIconColor` 字段可以覆盖默认值。
+  </template>
+</Demo>
+
+## 节点操作按钮
+
+通过 `tree-buttons` 属性为节点添加操作按钮。
+
+<Demo :source-code="treeButtonsCode">
+  <template #source>
+    <tree-buttons />
+  </template>
+  <template #description>
+    配置 `tree-buttons` 数组，每个节点右侧会显示操作按钮，点击按钮会触发对应的 `click` 方法。
+  </template>
+</Demo>
+
+## 手风琴模式
+
+使用 `accordion` 属性开启手风琴模式。
+
+<Demo :source-code="treeAccordionCode">
+  <template #source>
+    <tree-accordion />
+  </template>
+  <template #description>
+    设置 `accordion` 为 `true`，每次只打开一个同级树节点。
+  </template>
+</Demo>
+
+## 主题
+
+通过 `theme` 属性设置主题样式。
+
+<Demo :source-code="treeThemeCode">
+  <template #source>
+    <tree-theme />
+  </template>
+  <template #description>
+    支持 `default` 和 `menu` 两种主题，`menu` 主题适用于菜单场景。
+  </template>
+</Demo>
+
+## 可拖拽
+
+使用 `draggable` 属性开启拖拽功能。
+
+<Demo :source-code="treeDraggableCode">
+  <template #source>
+    <tree-draggable />
+  </template>
+  <template #description>
+    设置 `draggable` 为 `true` 开启拖拽，节点数据中的 `canInner` 字段控制是否允许拖入内部。
+  </template>
+</Demo>
+
+## 点击展开
+
+使用 `expand-on-click-node` 属性控制点击节点是否展开。
+
+<Demo :source-code="treeExpandOnClickCode">
+  <template #source>
+    <tree-expand-on-click />
+  </template>
+  <template #description>
+    设置 `expand-on-click-node` 为 `true`，点击节点时会展开或收缩，默认为 `false`，只有点击箭头图标才会展开。
+  </template>
+</Demo>
+
+## 自定义字段名
+
+通过 `label-key`、`value-key`、`pid-key` 等属性自定义字段名。
+
+<Demo :source-code="treeCustomKeysCode">
+  <template #source>
+    <tree-custom-keys />
+  </template>
+  <template #description>
+    当数据字段名不是默认值时，可以通过这些属性自定义字段名。
+  </template>
+</Demo>
+
+## 默认展开
+
+通过 `default-expanded-keys` 和 `default-expand-all` 控制默认展开状态。
+
+<Demo :source-code="treeDefaultExpandedCode">
+  <template #source>
+    <tree-default-expanded />
+  </template>
+  <template #description>
+    使用 `default-expanded-keys` 设置默认展开的节点，`default-expand-all` 控制是否默认展开所有节点。
+  </template>
+</Demo>
+
+## 方法调用
+
+通过 ref 调用组件方法。
+
+<Demo :source-code="treeMethodsCode">
+  <template #source>
+    <tree-methods />
+  </template>
+  <template #description>
+    使用 `setValue` 设置选中节点，`getValue` 获取选中节点，`setCheck` 设置选中复选框，`getCheck` 获取选中的复选框，`refreshData` 刷新数据。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="treeApi" componentName="tree" />
+
+<script setup>
+import TreeBasic from '../examples/tree/basic.vue'
+import TreeFlatData from '../examples/tree/flat-data.vue'
+import TreeCheckable from '../examples/tree/checkable.vue'
+import TreeLoadData from '../examples/tree/load-data.vue'
+import TreeIcon from '../examples/tree/icon.vue'
+import TreeButtons from '../examples/tree/buttons.vue'
+import TreeAccordion from '../examples/tree/accordion.vue'
+import TreeTheme from '../examples/tree/theme.vue'
+import TreeDraggable from '../examples/tree/draggable.vue'
+import TreeExpandOnClick from '../examples/tree/expand-on-click.vue'
+import TreeCustomKeys from '../examples/tree/custom-keys.vue'
+import TreeDefaultExpanded from '../examples/tree/default-expanded.vue'
+import TreeMethods from '../examples/tree/methods.vue'
+import treeApi from './meta/tree'
+
+import treeBasicCode from '../examples/tree/basic.vue?raw'
+import treeFlatDataCode from '../examples/tree/flat-data.vue?raw'
+import treeCheckableCode from '../examples/tree/checkable.vue?raw'
+import treeLoadDataCode from '../examples/tree/load-data.vue?raw'
+import treeIconCode from '../examples/tree/icon.vue?raw'
+import treeButtonsCode from '../examples/tree/buttons.vue?raw'
+import treeAccordionCode from '../examples/tree/accordion.vue?raw'
+import treeThemeCode from '../examples/tree/theme.vue?raw'
+import treeDraggableCode from '../examples/tree/draggable.vue?raw'
+import treeExpandOnClickCode from '../examples/tree/expand-on-click.vue?raw'
+import treeCustomKeysCode from '../examples/tree/custom-keys.vue?raw'
+import treeDefaultExpandedCode from '../examples/tree/default-expanded.vue?raw'
+import treeMethodsCode from '../examples/tree/methods.vue?raw'
+</script>