@a2simcode/ui 0.0.55 → 0.0.56

package/docs/components/layer.md

@@ -1,127 +1,127 @@
-# Layer 层
-
-统一的弹层组件，支持弹窗、全屏、抽屉三种展示形式。
-
-## 基础用法
-
-Layer 组件支持三种展示形式：弹窗(modal)、全屏(full)、抽屉(drawer)。
-
-<Demo :source-code="layerBasicCode">
-  <template #source>
-    <layer-basic />
-  </template>
-  <template #description>
-    通过 `open` 方法的第二个参数指定展示形式，默认为 `modal`。使用 `ref` 调用组件方法来控制显示隐藏。
-  </template>
-</Demo>
-
-## 弹窗模式
-
-弹窗模式支持拖拽、缩放等功能。
-
-<Demo :source-code="layerModalCode">
-  <template #source>
-    <layer-modal />
-  </template>
-  <template #description>
-    弹窗模式下，可以通过 `width` 和 `height` 属性设置弹窗大小。支持拖拽和缩放功能。
-  </template>
-</Demo>
-
-## 全屏模式
-
-全屏模式会占据整个浏览器窗口。
-
-<Demo :source-code="layerFullCode">
-  <template #source>
-    <layer-full />
-  </template>
-  <template #description>
-    使用 `open` 方法的第二个参数传入 `'full'` 即可开启全屏模式。适用于需要大量展示内容的场景。
-  </template>
-</Demo>
-
-## 抽屉模式
-
-抽屉从右侧滑出，适合展示详情或表单。
-
-<Demo :source-code="layerDrawerCode">
-  <template #source>
-    <layer-drawer />
-  </template>
-  <template #description>
-    使用 `open` 方法的第二个参数传入 `'drawer'` 即可开启抽屉模式。
-  </template>
-</Demo>
-
-## 步骤弹窗
-
-通过 `isStep` 属性可以创建带步骤条的弹窗。
-
-<Demo :source-code="layerStepsCode">
-  <template #source>
-    <layer-steps />
-  </template>
-  <template #description>
-    适用于分步骤的表单或流程，支持步骤校验。使用 `isStep` 开启步骤模式，使用 `steps` 设置步骤列表，使用 `validateSteps` 进行步骤校验。
-  </template>
-</Demo>
-
-## 自定义按钮
-
-通过 `buttons` 属性可以自定义底部按钮。
-
-<Demo :source-code="layerCustomButtonsCode">
-  <template #source>
-    <layer-custom-buttons />
-  </template>
-  <template #description>
-    使用 `buttons` 属性配置自定义按钮，支持设置按钮类型、样式、图标、点击事件等。设置 `hasSaveBtn` 为 `false` 可隐藏默认的保存按钮。
-  </template>
-</Demo>
-
-## API
-
-### 属性
-
-<ApiTable :data="layerApi" componentName="layer" />
-
-### 事件
-
-| 事件名 | 说明                   | 回调参数                                         |
-| ------ | ---------------------- | ------------------------------------------------ |
-| ok     | 点击确定按钮时触发     | `(showLoading: Function, hideLoading: Function)` |
-| cancel | 点击取消按钮时触发     | -                                                |
-| closed | 弹窗关闭动画结束后触发 | -                                                |
-
-### 插槽
-
-| 插槽名  | 说明         |
-| ------- | ------------ |
-| default | 弹层内容区域 |
-
-### 方法
-
-| 方法名      | 说明         | 参数                                                                    |
-| ----------- | ------------ | ----------------------------------------------------------------------- |
-| open        | 打开弹层     | `(title: string, type?: 'modal' \| 'full' \| 'drawer', subtitle?: any)` |
-| close       | 关闭弹层     | -                                                                       |
-| showLoading | 显示加载状态 | `(text?: string)`                                                       |
-| hideLoading | 隐藏加载状态 | -                                                                       |
-
-<script setup>
-import LayerBasic from '../examples/layer/basic.vue'
-import LayerModal from '../examples/layer/modal.vue'
-import LayerFull from '../examples/layer/full.vue'
-import LayerDrawer from '../examples/layer/drawer.vue'
-import LayerSteps from '../examples/layer/steps.vue'
-import LayerCustomButtons from '../examples/layer/custom-buttons.vue'
-import layerApi from './meta/layer'
-
-import layerBasicCode from '../examples/layer/basic.vue?raw'
-import layerModalCode from '../examples/layer/modal.vue?raw'
-import layerFullCode from '../examples/layer/full.vue?raw'
-import layerDrawerCode from '../examples/layer/drawer.vue?raw'
-import layerStepsCode from '../examples/layer/steps.vue?raw'
-import layerCustomButtonsCode from '../examples/layer/custom-buttons.vue?raw'
-</script>
+# Layer 层
+
+统一的弹层组件，支持弹窗、全屏、抽屉三种展示形式。
+
+## 基础用法
+
+Layer 组件支持三种展示形式：弹窗(modal)、全屏(full)、抽屉(drawer)。
+
+<Demo :source-code="layerBasicCode">
+  <template #source>
+    <layer-basic />
+  </template>
+  <template #description>
+    通过 `open` 方法的第二个参数指定展示形式，默认为 `modal`。使用 `ref` 调用组件方法来控制显示隐藏。
+  </template>
+</Demo>
+
+## 弹窗模式
+
+弹窗模式支持拖拽、缩放等功能。
+
+<Demo :source-code="layerModalCode">
+  <template #source>
+    <layer-modal />
+  </template>
+  <template #description>
+    弹窗模式下，可以通过 `width` 和 `height` 属性设置弹窗大小。支持拖拽和缩放功能。
+  </template>
+</Demo>
+
+## 全屏模式
+
+全屏模式会占据整个浏览器窗口。
+
+<Demo :source-code="layerFullCode">
+  <template #source>
+    <layer-full />
+  </template>
+  <template #description>
+    使用 `open` 方法的第二个参数传入 `'full'` 即可开启全屏模式。适用于需要大量展示内容的场景。
+  </template>
+</Demo>
+
+## 抽屉模式
+
+抽屉从右侧滑出，适合展示详情或表单。
+
+<Demo :source-code="layerDrawerCode">
+  <template #source>
+    <layer-drawer />
+  </template>
+  <template #description>
+    使用 `open` 方法的第二个参数传入 `'drawer'` 即可开启抽屉模式。
+  </template>
+</Demo>
+
+## 步骤弹窗
+
+通过 `isStep` 属性可以创建带步骤条的弹窗。
+
+<Demo :source-code="layerStepsCode">
+  <template #source>
+    <layer-steps />
+  </template>
+  <template #description>
+    适用于分步骤的表单或流程，支持步骤校验。使用 `isStep` 开启步骤模式，使用 `steps` 设置步骤列表，使用 `validateSteps` 进行步骤校验。
+  </template>
+</Demo>
+
+## 自定义按钮
+
+通过 `buttons` 属性可以自定义底部按钮。
+
+<Demo :source-code="layerCustomButtonsCode">
+  <template #source>
+    <layer-custom-buttons />
+  </template>
+  <template #description>
+    使用 `buttons` 属性配置自定义按钮，支持设置按钮类型、样式、图标、点击事件等。设置 `hasSaveBtn` 为 `false` 可隐藏默认的保存按钮。
+  </template>
+</Demo>
+
+## API
+
+### 属性
+
+<ApiTable :data="layerApi" componentName="layer" />
+
+### 事件
+
+| 事件名 | 说明                   | 回调参数                                         |
+| ------ | ---------------------- | ------------------------------------------------ |
+| ok     | 点击确定按钮时触发     | `(showLoading: Function, hideLoading: Function)` |
+| cancel | 点击取消按钮时触发     | -                                                |
+| closed | 弹窗关闭动画结束后触发 | -                                                |
+
+### 插槽
+
+| 插槽名  | 说明         |
+| ------- | ------------ |
+| default | 弹层内容区域 |
+
+### 方法
+
+| 方法名      | 说明         | 参数                                                                    |
+| ----------- | ------------ | ----------------------------------------------------------------------- |
+| open        | 打开弹层     | `(title: string, type?: 'modal' \| 'full' \| 'drawer', subtitle?: any)` |
+| close       | 关闭弹层     | -                                                                       |
+| showLoading | 显示加载状态 | `(text?: string)`                                                       |
+| hideLoading | 隐藏加载状态 | -                                                                       |
+
+<script setup>
+import LayerBasic from '../examples/layer/basic.vue'
+import LayerModal from '../examples/layer/modal.vue'
+import LayerFull from '../examples/layer/full.vue'
+import LayerDrawer from '../examples/layer/drawer.vue'
+import LayerSteps from '../examples/layer/steps.vue'
+import LayerCustomButtons from '../examples/layer/custom-buttons.vue'
+import layerApi from './meta/layer'
+
+import layerBasicCode from '../examples/layer/basic.vue?raw'
+import layerModalCode from '../examples/layer/modal.vue?raw'
+import layerFullCode from '../examples/layer/full.vue?raw'
+import layerDrawerCode from '../examples/layer/drawer.vue?raw'
+import layerStepsCode from '../examples/layer/steps.vue?raw'
+import layerCustomButtonsCode from '../examples/layer/custom-buttons.vue?raw'
+</script>

package/docs/components/layout.md

@@ -1,132 +1,132 @@
-# Layout 布局
-
-用于页面的整体布局，支持上下左右四个区域的组合布局。
-
-## 基础用法
-
-最基础的布局示例，包含上下左右和中间主体区域。
-
-<Demo :source-code="layoutBasicCode">
-  <template #source>
-    <layout-basic />
-  </template>
-  <template #description>
-    Layout 组件提供了五个插槽：left（左侧）、right（右侧）、top（顶部）、bottom（底部）和 default（中间主体）。每个区域都可以通过拖拽分隔线来调整大小。
-  </template>
-</Demo>
-
-## 简单布局
-
-左右布局的简单示例，常用于后台管理系统。
-
-<Demo :source-code="layoutSimpleCode">
-  <template #source>
-    <layout-simple />
-  </template>
-  <template #description>
-    只使用左侧和中间区域，构建经典的侧边栏布局。左侧通常用于导航菜单，中间区域展示主要内容。
-  </template>
-</Demo>
-
-## 顶部导航布局
-
-经典的顶部导航布局样式。
-
-<Demo :source-code="layoutTopSideCode">
-  <template #source>
-    <layout-top-side />
-  </template>
-  <template #description>
-    只使用顶部和中间区域，构建顶部导航布局。适用于首页、官网等场景。
-  </template>
-</Demo>
-
-## 自定义尺寸
-
-通过 props 自定义各个区域的初始尺寸。
-
-<Demo :source-code="layoutCustomSizeCode">
-  <template #source>
-    <layout-custom-size />
-  </template>
-  <template #description>
-    可以通过 left、right、top、bottom 属性设置各个区域的初始宽度或高度。支持数字（像素）和字符串（百分比）两种方式。
-  </template>
-</Demo>
-
-## 百分比布局
-
-使用百分比设置区域大小，实现响应式布局。
-
-<Demo :source-code="layoutPercentSizeCode">
-  <template #source>
-    <layout-percent-size />
-  </template>
-  <template #description>
-    支持使用百分比（如 "20%"）设置区域大小，布局会随容器大小自动调整。拖动调整大小后，会自动转换为像素值以保持拖动后的尺寸。
-  </template>
-</Demo>
-
-## 禁用拖拽
-
-禁用区域的拖拽调整功能。
-
-<Demo :source-code="layoutDisableMoveCode">
-  <template #source>
-    <layout-disable-move />
-  </template>
-  <template #description>
-    通过 leftMove、rightMove、topMove、bottomMove 属性可以控制各个区域是否允许拖拽调整大小。设置为 false 即可禁用拖拽功能。
-  </template>
-</Demo>
-
-## 限制最小尺寸
-
-为中间区域设置最小宽度和高度，防止被过度压缩。
-
-<Demo :source-code="layoutMinSizeCode">
-  <template #source>
-    <layout-min-size />
-  </template>
-  <template #description>
-    通过 midMinWidth 和 midMinHeight 属性可以设置中间区域的最小宽度和高度。当拖动四周区域时,中间区域始终保持不小于设置的最小尺寸,确保内容区域有足够的显示空间。
-  </template>
-</Demo>
-
-## 自动隐藏中间区域
-
-当整体宽度小于设置的最小中间宽度时自动隐藏中间区域，左右区域平分剩余宽度。
-
-<Demo :source-code="layoutHideMidWhenNarrowCode">
-  <template #source>
-    <layout-hide-mid-when-narrow />
-  </template>
-  <template #description>
-    通过设置 hideMidWhenNarrow 属性为 true，当容器宽度小于「左侧宽度 + 右侧宽度 + mid最小宽度」时，中间区域会自动隐藏。如果同时存在左侧和右侧区域，它们会平分剩余宽度（各占50%）；如果只有一侧，则该侧占据100%宽度。这在响应式布局中非常有用。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="layoutApi" componentName="layout" />
-
-<script setup>
-import LayoutBasic from '../examples/layout/basic.vue'
-import LayoutSimple from '../examples/layout/simple.vue'
-import LayoutTopSide from '../examples/layout/top-side.vue'
-import LayoutCustomSize from '../examples/layout/custom-size.vue'
-import LayoutPercentSize from '../examples/layout/percent-size.vue'
-import LayoutDisableMove from '../examples/layout/disable-move.vue'
-import LayoutMinSize from '../examples/layout/min-size.vue'
-import LayoutHideMidWhenNarrow from '../examples/layout/hide-mid-when-narrow.vue'
-import layoutApi from './meta/layout'
-
-import layoutBasicCode from '../examples/layout/basic.vue?raw'
-import layoutSimpleCode from '../examples/layout/simple.vue?raw'
-import layoutTopSideCode from '../examples/layout/top-side.vue?raw'
-import layoutCustomSizeCode from '../examples/layout/custom-size.vue?raw'
-import layoutPercentSizeCode from '../examples/layout/percent-size.vue?raw'
-import layoutDisableMoveCode from '../examples/layout/disable-move.vue?raw'
-import layoutMinSizeCode from '../examples/layout/min-size.vue?raw'
-import layoutHideMidWhenNarrowCode from '../examples/layout/hide-mid-when-narrow.vue?raw'
-</script>
+# Layout 布局
+
+用于页面的整体布局，支持上下左右四个区域的组合布局。
+
+## 基础用法
+
+最基础的布局示例，包含上下左右和中间主体区域。
+
+<Demo :source-code="layoutBasicCode">
+  <template #source>
+    <layout-basic />
+  </template>
+  <template #description>
+    Layout 组件提供了五个插槽：left（左侧）、right（右侧）、top（顶部）、bottom（底部）和 default（中间主体）。每个区域都可以通过拖拽分隔线来调整大小。
+  </template>
+</Demo>
+
+## 简单布局
+
+左右布局的简单示例，常用于后台管理系统。
+
+<Demo :source-code="layoutSimpleCode">
+  <template #source>
+    <layout-simple />
+  </template>
+  <template #description>
+    只使用左侧和中间区域，构建经典的侧边栏布局。左侧通常用于导航菜单，中间区域展示主要内容。
+  </template>
+</Demo>
+
+## 顶部导航布局
+
+经典的顶部导航布局样式。
+
+<Demo :source-code="layoutTopSideCode">
+  <template #source>
+    <layout-top-side />
+  </template>
+  <template #description>
+    只使用顶部和中间区域，构建顶部导航布局。适用于首页、官网等场景。
+  </template>
+</Demo>
+
+## 自定义尺寸
+
+通过 props 自定义各个区域的初始尺寸。
+
+<Demo :source-code="layoutCustomSizeCode">
+  <template #source>
+    <layout-custom-size />
+  </template>
+  <template #description>
+    可以通过 left、right、top、bottom 属性设置各个区域的初始宽度或高度。支持数字（像素）和字符串（百分比）两种方式。
+  </template>
+</Demo>
+
+## 百分比布局
+
+使用百分比设置区域大小，实现响应式布局。
+
+<Demo :source-code="layoutPercentSizeCode">
+  <template #source>
+    <layout-percent-size />
+  </template>
+  <template #description>
+    支持使用百分比（如 "20%"）设置区域大小，布局会随容器大小自动调整。拖动调整大小后，会自动转换为像素值以保持拖动后的尺寸。
+  </template>
+</Demo>
+
+## 禁用拖拽
+
+禁用区域的拖拽调整功能。
+
+<Demo :source-code="layoutDisableMoveCode">
+  <template #source>
+    <layout-disable-move />
+  </template>
+  <template #description>
+    通过 leftMove、rightMove、topMove、bottomMove 属性可以控制各个区域是否允许拖拽调整大小。设置为 false 即可禁用拖拽功能。
+  </template>
+</Demo>
+
+## 限制最小尺寸
+
+为中间区域设置最小宽度和高度，防止被过度压缩。
+
+<Demo :source-code="layoutMinSizeCode">
+  <template #source>
+    <layout-min-size />
+  </template>
+  <template #description>
+    通过 midMinWidth 和 midMinHeight 属性可以设置中间区域的最小宽度和高度。当拖动四周区域时,中间区域始终保持不小于设置的最小尺寸,确保内容区域有足够的显示空间。
+  </template>
+</Demo>
+
+## 自动隐藏中间区域
+
+当整体宽度小于设置的最小中间宽度时自动隐藏中间区域，左右区域平分剩余宽度。
+
+<Demo :source-code="layoutHideMidWhenNarrowCode">
+  <template #source>
+    <layout-hide-mid-when-narrow />
+  </template>
+  <template #description>
+    通过设置 hideMidWhenNarrow 属性为 true，当容器宽度小于「左侧宽度 + 右侧宽度 + mid最小宽度」时，中间区域会自动隐藏。如果同时存在左侧和右侧区域，它们会平分剩余宽度（各占50%）；如果只有一侧，则该侧占据100%宽度。这在响应式布局中非常有用。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="layoutApi" componentName="layout" />
+
+<script setup>
+import LayoutBasic from '../examples/layout/basic.vue'
+import LayoutSimple from '../examples/layout/simple.vue'
+import LayoutTopSide from '../examples/layout/top-side.vue'
+import LayoutCustomSize from '../examples/layout/custom-size.vue'
+import LayoutPercentSize from '../examples/layout/percent-size.vue'
+import LayoutDisableMove from '../examples/layout/disable-move.vue'
+import LayoutMinSize from '../examples/layout/min-size.vue'
+import LayoutHideMidWhenNarrow from '../examples/layout/hide-mid-when-narrow.vue'
+import layoutApi from './meta/layout'
+
+import layoutBasicCode from '../examples/layout/basic.vue?raw'
+import layoutSimpleCode from '../examples/layout/simple.vue?raw'
+import layoutTopSideCode from '../examples/layout/top-side.vue?raw'
+import layoutCustomSizeCode from '../examples/layout/custom-size.vue?raw'
+import layoutPercentSizeCode from '../examples/layout/percent-size.vue?raw'
+import layoutDisableMoveCode from '../examples/layout/disable-move.vue?raw'
+import layoutMinSizeCode from '../examples/layout/min-size.vue?raw'
+import layoutHideMidWhenNarrowCode from '../examples/layout/hide-mid-when-narrow.vue?raw'
+</script>

package/docs/components/map.md

@@ -1,24 +1,24 @@
-# Map 地图
-
-百度地图组件，用于选择地址和坐标。
-
-## 基础用法
-
-<Demo :source-code="mapBasicCode">
-  <template #source>
-    <map-basic />
-  </template>
-  <template #description>
-    使用 v-model 绑定地址和坐标。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="mapApi" componentName="map" />
-
-<script setup>
-import MapBasic from '../examples/map/basic.vue'
-import mapApi from './meta/map'
-import mapBasicCode from '../examples/map/basic.vue?raw'
-</script>
+# Map 地图
+
+百度地图组件，用于选择地址和坐标。
+
+## 基础用法
+
+<Demo :source-code="mapBasicCode">
+  <template #source>
+    <map-basic />
+  </template>
+  <template #description>
+    使用 v-model 绑定地址和坐标。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="mapApi" componentName="map" />
+
+<script setup>
+import MapBasic from '../examples/map/basic.vue'
+import mapApi from './meta/map'
+import mapBasicCode from '../examples/map/basic.vue?raw'
+</script>