@a2simcode/ui 0.0.108 → 0.0.109

package/docs/components/tabs.md

@@ -1,26 +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>
+# 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

@@ -1,24 +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>
+# 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

@@ -1,207 +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>
+# 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>