@a2simcode/ui 0.0.54 → 0.0.56

package/docs/components/drawer.md

@@ -1,127 +1,127 @@
-# Drawer 抽屉
-
-抽屉组件，从屏幕边缘滑出的浮层面板。
-
-## 基础用法
-
-最简单的用法。
-
-<Demo :source-code="drawerBasicCode">
-  <template #source>
-    <drawer-basic />
-  </template>
-  <template #description>
-    基础的抽屉，默认从右侧滑出。使用 `v-model:visible` 控制显示隐藏。
-  </template>
-</Demo>
-
-## 打开方向
-
-抽屉可以从四个方向打开。
-
-<Demo :source-code="drawerDirectionCode">
-  <template #source>
-    <drawer-direction />
-  </template>
-  <template #description>
-    通过 `direction` 属性可以设置抽屉的打开方向，支持 `rtl`（右到左）、`ltr`（左到右）、`ttb`（上到下）、`btt`（下到上）。
-  </template>
-</Demo>
-
-## 不同尺寸
-
-通过 `width` 和 `height` 属性可以设置抽屉的尺寸。
-
-<Demo :source-code="drawerSizeCode">
-  <template #source>
-    <drawer-size />
-  </template>
-  <template #description>
-    支持自定义抽屉的尺寸。左右打开时使用 `width` 属性（单位：像素），上下打开时使用 `height` 属性（单位：像素）。
-  </template>
-</Demo>
-
-## 自定义按钮
-
-通过 `buttons` 属性可以自定义底部按钮。
-
-<Demo :source-code="drawerCustomButtonsCode">
-  <template #source>
-    <drawer-custom-buttons />
-  </template>
-  <template #description>
-    使用 `buttons` 属性配置自定义按钮，支持设置按钮类型、样式、图标、点击事件等。
-  </template>
-</Demo>
-
-## 无底部按钮
-
-设置 `hasBtns` 为 `false` 可以隐藏底部按钮。
-
-<Demo :source-code="drawerNoButtonsCode">
-  <template #source>
-    <drawer-no-buttons />
-  </template>
-  <template #description>
-    适用于只展示信息，不需要操作按钮的场景。
-  </template>
-</Demo>
-
-## 遮罩层配置
-
-可以配置遮罩层的显示。
-
-<Demo :source-code="drawerMaskCode">
-  <template #source>
-    <drawer-mask />
-  </template>
-  <template #description>
-    设置 `mask` 为 `false` 可以取消遮罩层。
-  </template>
-</Demo>
-
-## API
-
-### 属性
-
-<ApiTable :data="drawerApi" componentName="drawer" />
-
-### 事件
-
-| 事件名            | 说明                         | 回调参数                                         |
-| ----------------- | ---------------------------- | ------------------------------------------------ |
-| update:visible    | 抽屉显示状态变化时触发       | `(visible: boolean)`                             |
-| update:stepActive | 步骤变化时触发               | `(stepActive: number)`                           |
-| cancel            | 点击取消按钮或关闭按钮时触发 | -                                                |
-| ok                | 点击确定按钮时触发           | `(showLoading: Function, hideLoading: Function)` |
-| closed            | 抽屉关闭动画结束后触发       | -                                                |
-
-### 插槽
-
-| 插槽名  | 说明         |
-| ------- | ------------ |
-| default | 抽屉内容区域 |
-
-### 方法
-
-| 方法名      | 说明         | 参数              |
-| ----------- | ------------ | ----------------- |
-| showLoading | 显示加载状态 | `(text?: string)` |
-| hideLoading | 隐藏加载状态 | -                 |
-
-<script setup>
-import DrawerBasic from '../examples/drawer/basic.vue'
-import DrawerDirection from '../examples/drawer/direction.vue'
-import DrawerSize from '../examples/drawer/size.vue'
-import DrawerCustomButtons from '../examples/drawer/custom-buttons.vue'
-import DrawerNoButtons from '../examples/drawer/no-buttons.vue'
-import DrawerMask from '../examples/drawer/mask.vue'
-import drawerApi from './meta/drawer'
-
-import drawerBasicCode from '../examples/drawer/basic.vue?raw'
-import drawerDirectionCode from '../examples/drawer/direction.vue?raw'
-import drawerSizeCode from '../examples/drawer/size.vue?raw'
-import drawerCustomButtonsCode from '../examples/drawer/custom-buttons.vue?raw'
-import drawerNoButtonsCode from '../examples/drawer/no-buttons.vue?raw'
-import drawerMaskCode from '../examples/drawer/mask.vue?raw'
-</script>
+# Drawer 抽屉
+
+抽屉组件，从屏幕边缘滑出的浮层面板。
+
+## 基础用法
+
+最简单的用法。
+
+<Demo :source-code="drawerBasicCode">
+  <template #source>
+    <drawer-basic />
+  </template>
+  <template #description>
+    基础的抽屉，默认从右侧滑出。使用 `v-model:visible` 控制显示隐藏。
+  </template>
+</Demo>
+
+## 打开方向
+
+抽屉可以从四个方向打开。
+
+<Demo :source-code="drawerDirectionCode">
+  <template #source>
+    <drawer-direction />
+  </template>
+  <template #description>
+    通过 `direction` 属性可以设置抽屉的打开方向，支持 `rtl`（右到左）、`ltr`（左到右）、`ttb`（上到下）、`btt`（下到上）。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+通过 `width` 和 `height` 属性可以设置抽屉的尺寸。
+
+<Demo :source-code="drawerSizeCode">
+  <template #source>
+    <drawer-size />
+  </template>
+  <template #description>
+    支持自定义抽屉的尺寸。左右打开时使用 `width` 属性（单位：像素），上下打开时使用 `height` 属性（单位：像素）。
+  </template>
+</Demo>
+
+## 自定义按钮
+
+通过 `buttons` 属性可以自定义底部按钮。
+
+<Demo :source-code="drawerCustomButtonsCode">
+  <template #source>
+    <drawer-custom-buttons />
+  </template>
+  <template #description>
+    使用 `buttons` 属性配置自定义按钮，支持设置按钮类型、样式、图标、点击事件等。
+  </template>
+</Demo>
+
+## 无底部按钮
+
+设置 `hasBtns` 为 `false` 可以隐藏底部按钮。
+
+<Demo :source-code="drawerNoButtonsCode">
+  <template #source>
+    <drawer-no-buttons />
+  </template>
+  <template #description>
+    适用于只展示信息，不需要操作按钮的场景。
+  </template>
+</Demo>
+
+## 遮罩层配置
+
+可以配置遮罩层的显示。
+
+<Demo :source-code="drawerMaskCode">
+  <template #source>
+    <drawer-mask />
+  </template>
+  <template #description>
+    设置 `mask` 为 `false` 可以取消遮罩层。
+  </template>
+</Demo>
+
+## API
+
+### 属性
+
+<ApiTable :data="drawerApi" componentName="drawer" />
+
+### 事件
+
+| 事件名            | 说明                         | 回调参数                                         |
+| ----------------- | ---------------------------- | ------------------------------------------------ |
+| update:visible    | 抽屉显示状态变化时触发       | `(visible: boolean)`                             |
+| update:stepActive | 步骤变化时触发               | `(stepActive: number)`                           |
+| cancel            | 点击取消按钮或关闭按钮时触发 | -                                                |
+| ok                | 点击确定按钮时触发           | `(showLoading: Function, hideLoading: Function)` |
+| closed            | 抽屉关闭动画结束后触发       | -                                                |
+
+### 插槽
+
+| 插槽名  | 说明         |
+| ------- | ------------ |
+| default | 抽屉内容区域 |
+
+### 方法
+
+| 方法名      | 说明         | 参数              |
+| ----------- | ------------ | ----------------- |
+| showLoading | 显示加载状态 | `(text?: string)` |
+| hideLoading | 隐藏加载状态 | -                 |
+
+<script setup>
+import DrawerBasic from '../examples/drawer/basic.vue'
+import DrawerDirection from '../examples/drawer/direction.vue'
+import DrawerSize from '../examples/drawer/size.vue'
+import DrawerCustomButtons from '../examples/drawer/custom-buttons.vue'
+import DrawerNoButtons from '../examples/drawer/no-buttons.vue'
+import DrawerMask from '../examples/drawer/mask.vue'
+import drawerApi from './meta/drawer'
+
+import drawerBasicCode from '../examples/drawer/basic.vue?raw'
+import drawerDirectionCode from '../examples/drawer/direction.vue?raw'
+import drawerSizeCode from '../examples/drawer/size.vue?raw'
+import drawerCustomButtonsCode from '../examples/drawer/custom-buttons.vue?raw'
+import drawerNoButtonsCode from '../examples/drawer/no-buttons.vue?raw'
+import drawerMaskCode from '../examples/drawer/mask.vue?raw'
+</script>

package/docs/components/dynamic-layer.md

@@ -1,118 +1,118 @@
-# DynamicLayer 动态层
-
-动态加载组件的弹层，基于 Layer 组件封装，支持动态渲染任意组件并提供统一的弹层交互。
-
-## 基础用法
-
-通过 `open` 方法打开弹层，动态加载指定组件。
-
-<Demo :source-code="dynamicLayerBasicCode">
-  <template #source>
-    <dynamic-layer-basic />
-  </template>
-  <template #description>
-    使用 `ref` 调用 `open` 方法打开弹层，通过 `name` 属性指定要加载的组件。
-  </template>
-</Demo>
-
-## 表单场景
-
-适用于动态表单的场景，组件内可以定义 `open` 和 `ok` 方法与弹层交互。
-
-<Demo :source-code="dynamicLayerFormCode">
-  <template #source>
-    <dynamic-layer-form />
-  </template>
-  <template #description>
-    动态组件可以通过 `expose` 暴露 `open` 和 `ok` 方法。`open` 方法接收传入的参数，`ok` 方法在点击确定时调用，返回 `true` 时弹层关闭。
-  </template>
-</Demo>
-
-## 不同类型
-
-支持 modal、drawer、full 三种弹层类型。
-
-<Demo :source-code="dynamicLayerTypesCode">
-  <template #source>
-    <dynamic-layer-types />
-  </template>
-  <template #description>
-    通过 `type` 参数指定弹层类型，支持弹窗(modal)、抽屉(drawer)、全屏(full)三种形式。
-  </template>
-</Demo>
-
-## 自定义按钮
-
-组件内可以通过 `getConfig` 方法返回自定义按钮配置。
-
-<Demo :source-code="dynamicLayerCustomButtonsCode">
-  <template #source>
-    <dynamic-layer-custom-buttons />
-  </template>
-  <template #description>
-    动态组件通过 `getConfig` 方法返回 `buttons` 数组，可以添加自定义按钮。设置 `hasSaveBtn` 为 `false` 可隐藏默认保存按钮。
-  </template>
-</Demo>
-
-## 步骤弹窗
-
-支持步骤条模式的弹层。
-
-<Demo :source-code="dynamicLayerStepsCode">
-  <template #source>
-    <dynamic-layer-steps />
-  </template>
-  <template #description>
-    动态组件通过 `getConfig` 返回 `isStep` 和 `steps` 配置步骤条，通过 `validateSteps` 方法进行步骤校验。
-  </template>
-</Demo>
-
-## API
-
-### 方法
-
-| 方法名 | 说明     | 参数                             |
-| ------ | -------- | -------------------------------- |
-| open   | 打开弹层 | `(data: LayerParamType) => void` |
-
-### LayerParamType 参数
-
-<ApiTable :data="dynamicLayerApi" componentName="dynamic-layer" />
-
-### 动态组件约定
-
-动态加载的组件可以通过 `expose` 暴露以下方法与弹层交互：
-
-| 方法名        | 说明               | 参数                                             | 返回值                                                    |
-| ------------- | ------------------ | ------------------------------------------------ | --------------------------------------------------------- |
-| open          | 弹层打开时调用     | `(param: any, layerRef: any, afterOk: Function)` | `Promise<{ buttons?: any[] }>`                            |
-| ok            | 点击确定按钮时调用 | -                                                | `Promise<boolean \| any>`                                 |
-| closed        | 弹层关闭后调用     | -                                                | `void`                                                    |
-| beforeClose   | 弹层关闭前调用     | -                                                | `boolean \| Promise<boolean>`                             |
-| getConfig     | 获取弹层配置       | -                                                | `{ isStep?: boolean, steps?: string[], buttons?: any[] }` |
-| validateSteps | 步骤校验           | `(stepActive: number)`                           | `Promise<boolean>`                                        |
-
-### 回调函数
-
-可以通过 `open` 方法的参数传入以下回调函数：
-
-| 回调名      | 说明       | 参数                  |
-| ----------- | ---------- | --------------------- |
-| afterOk     | 确定后回调 | `(data: any) => void` |
-| afterClose  | 关闭后回调 | `() => void`          |
-| afterCancel | 取消后回调 | `() => void`          |
-
-<script setup>
-import DynamicLayerBasic from '../examples/dynamic-layer/basic.vue'
-import DynamicLayerForm from '../examples/dynamic-layer/form.vue'
-import DynamicLayerTypes from '../examples/dynamic-layer/types.vue'
-import DynamicLayerCustomButtons from '../examples/dynamic-layer/custom-buttons.vue'
-import DynamicLayerSteps from '../examples/dynamic-layer/steps.vue'
-import dynamicLayerApi from './meta/dynamic-layer'
-
-import dynamicLayerBasicCode from '../examples/dynamic-layer/basic.vue?raw'
-import dynamicLayerFormCode from '../examples/dynamic-layer/form.vue?raw'
-import dynamicLayerTypesCode from '../examples/dynamic-layer/types.vue?raw'
-import dynamicLayerCustomButtonsCode from '../examples/dynamic-layer/custom-buttons.vue?raw'
-import dynamicLayerStepsCode from '../examples/dynamic-layer/steps.vue?raw'
-</script>
+# DynamicLayer 动态层
+
+动态加载组件的弹层，基于 Layer 组件封装，支持动态渲染任意组件并提供统一的弹层交互。
+
+## 基础用法
+
+通过 `open` 方法打开弹层，动态加载指定组件。
+
+<Demo :source-code="dynamicLayerBasicCode">
+  <template #source>
+    <dynamic-layer-basic />
+  </template>
+  <template #description>
+    使用 `ref` 调用 `open` 方法打开弹层，通过 `name` 属性指定要加载的组件。
+  </template>
+</Demo>
+
+## 表单场景
+
+适用于动态表单的场景，组件内可以定义 `open` 和 `ok` 方法与弹层交互。
+
+<Demo :source-code="dynamicLayerFormCode">
+  <template #source>
+    <dynamic-layer-form />
+  </template>
+  <template #description>
+    动态组件可以通过 `expose` 暴露 `open` 和 `ok` 方法。`open` 方法接收传入的参数，`ok` 方法在点击确定时调用，返回 `true` 时弹层关闭。
+  </template>
+</Demo>
+
+## 不同类型
+
+支持 modal、drawer、full 三种弹层类型。
+
+<Demo :source-code="dynamicLayerTypesCode">
+  <template #source>
+    <dynamic-layer-types />
+  </template>
+  <template #description>
+    通过 `type` 参数指定弹层类型，支持弹窗(modal)、抽屉(drawer)、全屏(full)三种形式。
+  </template>
+</Demo>
+
+## 自定义按钮
+
+组件内可以通过 `getConfig` 方法返回自定义按钮配置。
+
+<Demo :source-code="dynamicLayerCustomButtonsCode">
+  <template #source>
+    <dynamic-layer-custom-buttons />
+  </template>
+  <template #description>
+    动态组件通过 `getConfig` 方法返回 `buttons` 数组，可以添加自定义按钮。设置 `hasSaveBtn` 为 `false` 可隐藏默认保存按钮。
+  </template>
+</Demo>
+
+## 步骤弹窗
+
+支持步骤条模式的弹层。
+
+<Demo :source-code="dynamicLayerStepsCode">
+  <template #source>
+    <dynamic-layer-steps />
+  </template>
+  <template #description>
+    动态组件通过 `getConfig` 返回 `isStep` 和 `steps` 配置步骤条，通过 `validateSteps` 方法进行步骤校验。
+  </template>
+</Demo>
+
+## API
+
+### 方法
+
+| 方法名 | 说明     | 参数                             |
+| ------ | -------- | -------------------------------- |
+| open   | 打开弹层 | `(data: LayerParamType) => void` |
+
+### LayerParamType 参数
+
+<ApiTable :data="dynamicLayerApi" componentName="dynamic-layer" />
+
+### 动态组件约定
+
+动态加载的组件可以通过 `expose` 暴露以下方法与弹层交互：
+
+| 方法名        | 说明               | 参数                                             | 返回值                                                    |
+| ------------- | ------------------ | ------------------------------------------------ | --------------------------------------------------------- |
+| open          | 弹层打开时调用     | `(param: any, layerRef: any, afterOk: Function)` | `Promise<{ buttons?: any[] }>`                            |
+| ok            | 点击确定按钮时调用 | -                                                | `Promise<boolean \| any>`                                 |
+| closed        | 弹层关闭后调用     | -                                                | `void`                                                    |
+| beforeClose   | 弹层关闭前调用     | -                                                | `boolean \| Promise<boolean>`                             |
+| getConfig     | 获取弹层配置       | -                                                | `{ isStep?: boolean, steps?: string[], buttons?: any[] }` |
+| validateSteps | 步骤校验           | `(stepActive: number)`                           | `Promise<boolean>`                                        |
+
+### 回调函数
+
+可以通过 `open` 方法的参数传入以下回调函数：
+
+| 回调名      | 说明       | 参数                  |
+| ----------- | ---------- | --------------------- |
+| afterOk     | 确定后回调 | `(data: any) => void` |
+| afterClose  | 关闭后回调 | `() => void`          |
+| afterCancel | 取消后回调 | `() => void`          |
+
+<script setup>
+import DynamicLayerBasic from '../examples/dynamic-layer/basic.vue'
+import DynamicLayerForm from '../examples/dynamic-layer/form.vue'
+import DynamicLayerTypes from '../examples/dynamic-layer/types.vue'
+import DynamicLayerCustomButtons from '../examples/dynamic-layer/custom-buttons.vue'
+import DynamicLayerSteps from '../examples/dynamic-layer/steps.vue'
+import dynamicLayerApi from './meta/dynamic-layer'
+
+import dynamicLayerBasicCode from '../examples/dynamic-layer/basic.vue?raw'
+import dynamicLayerFormCode from '../examples/dynamic-layer/form.vue?raw'
+import dynamicLayerTypesCode from '../examples/dynamic-layer/types.vue?raw'
+import dynamicLayerCustomButtonsCode from '../examples/dynamic-layer/custom-buttons.vue?raw'
+import dynamicLayerStepsCode from '../examples/dynamic-layer/steps.vue?raw'
+</script>

package/docs/components/echarts.md

@@ -1,72 +1,72 @@
-# Echarts 图表
-
-基于 ECharts 的 Vue 3 图表组件封装。
-
-## 基础用法
-
-通过 `option` 属性传入 ECharts 配置。
-
-<Demo :source-code="echartsBasicCode">
-  <template #source>
-    <echarts-basic />
-  </template>
-  <template #description>
-    最基础的柱状图示例，通过点击事件可以获取图表数据。
-  </template>
-</Demo>
-
-## 折线图
-
-使用折线图展示趋势数据。
-
-<Demo :source-code="echartsLineCode">
-  <template #source>
-    <echarts-line />
-  </template>
-  <template #description>
-    多系列折线图，适合展示趋势对比。
-  </template>
-</Demo>
-
-## 饼图
-
-使用饼图展示占比数据。
-
-<Demo :source-code="echartsPieCode">
-  <template #source>
-    <echarts-pie />
-  </template>
-  <template #description>
-    饼图适合展示各部分在整体中的占比。
-  </template>
-</Demo>
-
-## 动态数据
-
-图表数据可以动态更新。
-
-<Demo :source-code="echartsDynamicCode">
-  <template #source>
-    <echarts-dynamic />
-  </template>
-  <template #description>
-    通过修改 `option` 数据，图表会自动更新。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="echartsApi" componentName="echarts" />
-
-<script setup>
-import EchartsBasic from '../examples/echarts/basic.vue'
-import EchartsLine from '../examples/echarts/line.vue'
-import EchartsPie from '../examples/echarts/pie.vue'
-import EchartsDynamic from '../examples/echarts/dynamic.vue'
-import echartsApi from './meta/echarts'
-
-import echartsBasicCode from '../examples/echarts/basic.vue?raw'
-import echartsLineCode from '../examples/echarts/line.vue?raw'
-import echartsPieCode from '../examples/echarts/pie.vue?raw'
-import echartsDynamicCode from '../examples/echarts/dynamic.vue?raw'
-</script>
+# Echarts 图表
+
+基于 ECharts 的 Vue 3 图表组件封装。
+
+## 基础用法
+
+通过 `option` 属性传入 ECharts 配置。
+
+<Demo :source-code="echartsBasicCode">
+  <template #source>
+    <echarts-basic />
+  </template>
+  <template #description>
+    最基础的柱状图示例，通过点击事件可以获取图表数据。
+  </template>
+</Demo>
+
+## 折线图
+
+使用折线图展示趋势数据。
+
+<Demo :source-code="echartsLineCode">
+  <template #source>
+    <echarts-line />
+  </template>
+  <template #description>
+    多系列折线图，适合展示趋势对比。
+  </template>
+</Demo>
+
+## 饼图
+
+使用饼图展示占比数据。
+
+<Demo :source-code="echartsPieCode">
+  <template #source>
+    <echarts-pie />
+  </template>
+  <template #description>
+    饼图适合展示各部分在整体中的占比。
+  </template>
+</Demo>
+
+## 动态数据
+
+图表数据可以动态更新。
+
+<Demo :source-code="echartsDynamicCode">
+  <template #source>
+    <echarts-dynamic />
+  </template>
+  <template #description>
+    通过修改 `option` 数据，图表会自动更新。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="echartsApi" componentName="echarts" />
+
+<script setup>
+import EchartsBasic from '../examples/echarts/basic.vue'
+import EchartsLine from '../examples/echarts/line.vue'
+import EchartsPie from '../examples/echarts/pie.vue'
+import EchartsDynamic from '../examples/echarts/dynamic.vue'
+import echartsApi from './meta/echarts'
+
+import echartsBasicCode from '../examples/echarts/basic.vue?raw'
+import echartsLineCode from '../examples/echarts/line.vue?raw'
+import echartsPieCode from '../examples/echarts/pie.vue?raw'
+import echartsDynamicCode from '../examples/echarts/dynamic.vue?raw'
+</script>