@a2simcode/ui 0.0.54 → 0.0.56

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>

package/docs/components/upload.md

@@ -1,117 +1,117 @@
-# Upload 上传
-
-通过点击或者拖拽上传文件。
-
-## 基础用法
-
-最基本的上传组件。
-
-<Demo :source-code="uploadBasicCode">
-  <template #source>
-    <upload-basic />
-  </template>
-  <template #description>
-    使用 `v-model` 绑定文件ID值。设置 `is-not-api` 为 `true` 可在不调用后端API的情况下预览效果。
-  </template>
-</Demo>
-
-## 多文件上传
-
-支持一次性选择多个文件进行上传。
-
-<Demo :source-code="uploadMultipleCode">
-  <template #source>
-    <upload-multiple />
-  </template>
-  <template #description>
-    设置 `multiple` 属性启用多选模式。使用 `limit` 属性限制上传数量，设置为 `-1` 表示不限制。
-  </template>
-</Demo>
-
-## 拖拽上传
-
-支持拖拽文件到指定区域进行上传。
-
-<Demo :source-code="uploadDragCode">
-  <template #source>
-    <upload-drag />
-  </template>
-  <template #description>
-    设置 `drag` 属性为 `true` 即可启用拖拽上传功能。
-  </template>
-</Demo>
-
-## 图片上传
-
-专门用于上传图片的模式，提供图片预览功能。
-
-<Demo :source-code="uploadImageCode">
-  <template #source>
-    <upload-image />
-  </template>
-  <template #description>
-    设置 `is-upload-img` 属性为 `true` 启用图片上传模式，会以卡片形式展示上传的图片。
-  </template>
-</Demo>
-
-## 限制上传数量和大小
-
-可以限制上传文件的数量和大小。
-
-<Demo :source-code="uploadLimitCode">
-  <template #source>
-    <upload-limit />
-  </template>
-  <template #description>
-    使用 `limit` 属性限制上传数量，`max-size` 和 `size-type` 配合使用限制文件大小。设置 `is-tip` 显示提示信息。
-  </template>
-</Demo>
-
-## 文件类型限制
-
-限制上传的文件类型。
-
-<Demo :source-code="uploadAcceptCode">
-  <template #source>
-    <upload-accept />
-  </template>
-  <template #description>
-    使用 `accept` 属性指定接受的文件类型，例如 `.pdf`、`.xlsx,.xls`、`image/*` 等。
-  </template>
-</Demo>
-
-## 只读模式
-
-只读状态下不能上传，只能查看已上传的文件。
-
-<Demo :source-code="uploadReadonlyCode">
-  <template #source>
-    <upload-readonly />
-  </template>
-  <template #description>
-    设置 `readonly` 属性为 `true` 即可进入只读模式。可通过 `btn-text` 自定义按钮文字。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="uploadApi" componentName="upload" />
-
-<script setup>
-import UploadBasic from '../examples/upload/basic.vue'
-import UploadMultiple from '../examples/upload/multiple.vue'
-import UploadDrag from '../examples/upload/drag.vue'
-import UploadImage from '../examples/upload/image.vue'
-import UploadLimit from '../examples/upload/limit.vue'
-import UploadAccept from '../examples/upload/accept.vue'
-import UploadReadonly from '../examples/upload/readonly.vue'
-import uploadApi from './meta/upload'
-
-import uploadBasicCode from '../examples/upload/basic.vue?raw'
-import uploadMultipleCode from '../examples/upload/multiple.vue?raw'
-import uploadDragCode from '../examples/upload/drag.vue?raw'
-import uploadImageCode from '../examples/upload/image.vue?raw'
-import uploadLimitCode from '../examples/upload/limit.vue?raw'
-import uploadAcceptCode from '../examples/upload/accept.vue?raw'
-import uploadReadonlyCode from '../examples/upload/readonly.vue?raw'
-</script>
+# Upload 上传
+
+通过点击或者拖拽上传文件。
+
+## 基础用法
+
+最基本的上传组件。
+
+<Demo :source-code="uploadBasicCode">
+  <template #source>
+    <upload-basic />
+  </template>
+  <template #description>
+    使用 `v-model` 绑定文件ID值。设置 `is-not-api` 为 `true` 可在不调用后端API的情况下预览效果。
+  </template>
+</Demo>
+
+## 多文件上传
+
+支持一次性选择多个文件进行上传。
+
+<Demo :source-code="uploadMultipleCode">
+  <template #source>
+    <upload-multiple />
+  </template>
+  <template #description>
+    设置 `multiple` 属性启用多选模式。使用 `limit` 属性限制上传数量，设置为 `-1` 表示不限制。
+  </template>
+</Demo>
+
+## 拖拽上传
+
+支持拖拽文件到指定区域进行上传。
+
+<Demo :source-code="uploadDragCode">
+  <template #source>
+    <upload-drag />
+  </template>
+  <template #description>
+    设置 `drag` 属性为 `true` 即可启用拖拽上传功能。
+  </template>
+</Demo>
+
+## 图片上传
+
+专门用于上传图片的模式，提供图片预览功能。
+
+<Demo :source-code="uploadImageCode">
+  <template #source>
+    <upload-image />
+  </template>
+  <template #description>
+    设置 `is-upload-img` 属性为 `true` 启用图片上传模式，会以卡片形式展示上传的图片。
+  </template>
+</Demo>
+
+## 限制上传数量和大小
+
+可以限制上传文件的数量和大小。
+
+<Demo :source-code="uploadLimitCode">
+  <template #source>
+    <upload-limit />
+  </template>
+  <template #description>
+    使用 `limit` 属性限制上传数量，`max-size` 和 `size-type` 配合使用限制文件大小。设置 `is-tip` 显示提示信息。
+  </template>
+</Demo>
+
+## 文件类型限制
+
+限制上传的文件类型。
+
+<Demo :source-code="uploadAcceptCode">
+  <template #source>
+    <upload-accept />
+  </template>
+  <template #description>
+    使用 `accept` 属性指定接受的文件类型，例如 `.pdf`、`.xlsx,.xls`、`image/*` 等。
+  </template>
+</Demo>
+
+## 只读模式
+
+只读状态下不能上传，只能查看已上传的文件。
+
+<Demo :source-code="uploadReadonlyCode">
+  <template #source>
+    <upload-readonly />
+  </template>
+  <template #description>
+    设置 `readonly` 属性为 `true` 即可进入只读模式。可通过 `btn-text` 自定义按钮文字。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="uploadApi" componentName="upload" />
+
+<script setup>
+import UploadBasic from '../examples/upload/basic.vue'
+import UploadMultiple from '../examples/upload/multiple.vue'
+import UploadDrag from '../examples/upload/drag.vue'
+import UploadImage from '../examples/upload/image.vue'
+import UploadLimit from '../examples/upload/limit.vue'
+import UploadAccept from '../examples/upload/accept.vue'
+import UploadReadonly from '../examples/upload/readonly.vue'
+import uploadApi from './meta/upload'
+
+import uploadBasicCode from '../examples/upload/basic.vue?raw'
+import uploadMultipleCode from '../examples/upload/multiple.vue?raw'
+import uploadDragCode from '../examples/upload/drag.vue?raw'
+import uploadImageCode from '../examples/upload/image.vue?raw'
+import uploadLimitCode from '../examples/upload/limit.vue?raw'
+import uploadAcceptCode from '../examples/upload/accept.vue?raw'
+import uploadReadonlyCode from '../examples/upload/readonly.vue?raw'
+</script>