@a2simcode/ui 0.0.46 → 0.0.47

package/docs/components/input.md

@@ -0,0 +1,129 @@
+# Input 输入框
+
+通过鼠标或键盘输入字符。
+
+## 基础用法
+
+<Demo :source-code="inputBasicCode">
+  <template #source>
+    <input-basic />
+  </template>
+  <template #description>
+    使用 v-model 实现双向数据绑定。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Input 组件提供三种尺寸。
+
+<Demo :source-code="inputSizeCode">
+  <template #source>
+    <input-size />
+  </template>
+  <template #description>
+    使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
+  </template>
+</Demo>
+
+## 禁用和只读
+
+通过 `disabled` 和 `readonly` 属性指定输入框的状态。
+
+<Demo :source-code="inputDisabledCode">
+  <template #source>
+    <input-disabled />
+  </template>
+  <template #description>
+    通过 disabled 属性指定是否禁用 input 组件,通过 readonly 属性指定是否只读。
+  </template>
+</Demo>
+
+## 可清除
+
+使用 `clearable` 属性即可得到一个可清除的输入框。
+
+<Demo :source-code="inputClearableCode">
+  <template #source>
+    <input-clearable />
+  </template>
+  <template #description>
+    设置 `clearable` 属性为 `true` 即可显示清除按钮。
+  </template>
+</Demo>
+
+## 密码框
+
+使用 `show-password` 属性即可得到一个可切换显示隐藏的密码框。
+
+<Demo :source-code="inputPasswordCode">
+  <template #source>
+    <input-password />
+  </template>
+  <template #description>
+    设置 `show-password` 属性为 `true` 即可显示密码切换图标。
+  </template>
+</Demo>
+
+## 字数统计
+
+设置 `show-word-limit` 属性来展示字数统计。
+
+<Demo :source-code="inputWordLimitCode">
+  <template #source>
+    <input-word-limit />
+  </template>
+  <template #description>
+    使用 `maxlength` 和 `show-word-limit` 属性来限制输入字数。通过 `word-limit-position` 可以设置字数统计的位置。
+  </template>
+</Demo>
+
+## 文本域
+
+用于输入多行文本信息可缩放的输入框。添加 `type="textarea"` 属性即可将输入框转换为文本域。
+
+<Demo :source-code="inputTextareaCode">
+  <template #source>
+    <input-textarea />
+  </template>
+  <template #description>
+    通过 `rows` 控制文本域行数，或使用 `autosize` 属性设置自适应高度。
+  </template>
+</Demo>
+
+## 带图标的输入框
+
+可以通过 `prefix-icon` 和 `suffix-icon` 属性在输入框中显示图标。
+
+<Demo :source-code="inputIconCode">
+  <template #source>
+    <input-icon />
+  </template>
+  <template #description>
+    使用 `prefix-icon` 设置前缀图标，使用 `suffix-icon` 设置后缀图标。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputApi" componentName="input" />
+
+<script setup>
+import InputBasic from '../examples/input/basic.vue'
+import InputSize from '../examples/input/size.vue'
+import InputDisabled from '../examples/input/disabled.vue'
+import InputClearable from '../examples/input/clearable.vue'
+import InputPassword from '../examples/input/password.vue'
+import InputWordLimit from '../examples/input/word-limit.vue'
+import InputTextarea from '../examples/input/textarea.vue'
+import InputIcon from '../examples/input/icon.vue'
+import inputApi from './meta/input'
+import inputBasicCode from '../examples/input/basic.vue?raw'
+import inputSizeCode from '../examples/input/size.vue?raw'
+import inputDisabledCode from '../examples/input/disabled.vue?raw'
+import inputClearableCode from '../examples/input/clearable.vue?raw'
+import inputPasswordCode from '../examples/input/password.vue?raw'
+import inputWordLimitCode from '../examples/input/word-limit.vue?raw'
+import inputTextareaCode from '../examples/input/textarea.vue?raw'
+import inputIconCode from '../examples/input/icon.vue?raw'
+</script>

package/docs/components/layer-form.md

@@ -0,0 +1,61 @@
+# LayerForm 弹窗表单
+
+通过点击按钮打开一个弹窗，在弹窗中通过 JSON Schema 配置渲染表单。
+
+::: warning 重要提示
+`j-layer-form` 组件不是单独使用的，需要结合 `j-form` 组件使用。`j-layer-form` 应该作为 `j-form` 的 `schema` 配置中的一项，通过 `type: 'j-layer-form'` 来指定。`j-layer-form` 依赖 `j-form` 提供的表单上下文（通过 `useFormInject` 获取），用于获取表单配置信息如 `labelWidth`、`labelPosition` 等。
+:::
+
+## 基础用法
+
+`j-layer-form` 需要作为 `j-form` 的 `schema` 配置中的一项使用。弹窗内的表单字段通过 `children` 配置。
+
+<Demo :source-code="layerFormBasicCode">
+  <template #source>
+    <layer-form-basic />
+  </template>
+  <template #description>
+    在 `j-form` 的 `schema` 中配置 `type: 'j-layer-form'`，弹窗内的表单字段通过 `children` 配置。`j-layer-form` 会自动继承 `j-form` 的表单配置（如 `labelWidth`、`labelPosition` 等），点击按钮打开弹窗进行表单填写。
+  </template>
+</Demo>
+
+## 自定义弹窗尺寸
+
+通过 `layerWidth` 和 `layerHeight` 属性自定义弹窗的宽度和高度。
+
+<Demo :source-code="layerFormSizeCode">
+  <template #source>
+    <layer-form-size />
+  </template>
+  <template #description>
+    在 `j-layer-form` 的 `config` 中设置 `layerWidth` 和 `layerHeight` 属性可以自定义弹窗的尺寸。
+  </template>
+</Demo>
+
+## 表单配置
+
+通过 `formConfig` 属性配置表单的布局、标签位置、大小等。`j-layer-form` 的 `formConfig` 会覆盖 `j-form` 的配置。
+
+<Demo :source-code="layerFormConfigCode">
+  <template #source>
+    <layer-form-config />
+  </template>
+  <template #description>
+    在 `j-layer-form` 的 `config` 中通过 `formConfig` 可以配置表单的 `labelWidth`、`labelPosition`、`size`、`gutter`、`span` 等属性。如果 `j-layer-form` 的 `formConfig` 中未指定某些属性，会自动继承 `j-form` 的配置。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="layerFormApi" componentName="layer-form" />
+
+<script setup>
+import LayerFormBasic from '../examples/layer-form/basic.vue'
+import LayerFormSize from '../examples/layer-form/size.vue'
+import LayerFormConfig from '../examples/layer-form/config.vue'
+import layerFormApi from './meta/layer-form'
+
+import layerFormBasicCode from '../examples/layer-form/basic.vue?raw'
+import layerFormSizeCode from '../examples/layer-form/size.vue?raw'
+import layerFormConfigCode from '../examples/layer-form/config.vue?raw'
+</script>

package/docs/components/layer.md

@@ -0,0 +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>

package/docs/components/layout.md

@@ -0,0 +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>

package/docs/components/map.md

@@ -0,0 +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>

package/docs/components/menu.md

@@ -0,0 +1,121 @@
+# Menu 菜单
+
+为页面和功能提供导航的菜单列表。
+
+## 基础用法
+
+默认为内嵌模式，支持展开和收起子菜单。
+
+<Demo :source-code="menuBasicCode">
+  <template #source>
+    <menu-basic />
+  </template>
+  <template #description>
+    通过 `menus` 属性设置菜单数据，`active-id` 设置当前激活的菜单项，`click` 事件监听菜单点击。
+  </template>
+</Demo>
+
+## 水平菜单
+
+通过 `mode` 属性设置为 `horizontal` 可以使用水平菜单。
+
+<Demo :source-code="menuHorizontalCode">
+  <template #source>
+    <menu-horizontal />
+  </template>
+  <template #description>
+    水平菜单适用于顶部导航栏。
+  </template>
+</Demo>
+
+## 垂直菜单
+
+通过 `mode` 属性设置为 `vertical` 可以使用垂直菜单。
+
+<Demo :source-code="menuVerticalCode">
+  <template #source>
+    <menu-vertical />
+  </template>
+  <template #description>
+    垂直菜单适用于侧边栏，不支持子菜单展开。
+  </template>
+</Demo>
+
+## 折叠菜单
+
+通过 `collapsed` 属性可以折叠菜单。
+
+<Demo :source-code="menuCollapsedCode">
+  <template #source>
+    <menu-collapsed />
+  </template>
+  <template #description>
+    折叠菜单只显示图标，适用于需要节省空间的场景。
+  </template>
+</Demo>
+
+## 主题
+
+通过 `theme` 属性可以设置菜单主题，支持 `light` 和 `dark` 两种主题。
+
+<Demo :source-code="menuThemeCode">
+  <template #source>
+    <menu-theme />
+  </template>
+  <template #description>
+    深色主题适用于深色背景。
+  </template>
+</Demo>
+
+## 选中状态测试
+
+测试切换选中菜单，验证菜单状态是否变化。
+
+<Demo :source-code="menuSelectionTestCode">
+  <template #source>
+    <menu-selection-test />
+  </template>
+  <template #description>
+    通过修改 `active-id` 可以程序化改变选中项。
+  </template>
+</Demo>
+
+## API
+
+### 属性
+
+<ApiTable :data="menuApi" componentName="menu" />
+
+### 事件
+
+| 事件名 | 说明             | 回调参数                      |
+| ------ | ---------------- | ----------------------------- |
+| click  | 点击菜单项时触发 | `(item: Record<string, any>)` |
+
+## 菜单数据结构
+
+```typescript
+interface MenuItem {
+  label: string // 菜单项文本
+  value: string // 菜单项唯一标识
+  icon?: string // 图标
+  children?: MenuItem[] // 子菜单
+}
+```
+
+<script setup>
+import MenuBasic from '../examples/menu/basic.vue'
+import MenuHorizontal from '../examples/menu/horizontal.vue'
+import MenuVertical from '../examples/menu/vertical.vue'
+import MenuCollapsed from '../examples/menu/collapsed.vue'
+import MenuTheme from '../examples/menu/theme.vue'
+import MenuSelectionTest from '../examples/menu/selection-test.vue'
+import menuApi from './meta/menu'
+
+import menuBasicCode from '../examples/menu/basic.vue?raw'
+import menuHorizontalCode from '../examples/menu/horizontal.vue?raw'
+import menuVerticalCode from '../examples/menu/vertical.vue?raw'
+import menuCollapsedCode from '../examples/menu/collapsed.vue?raw'
+import menuThemeCode from '../examples/menu/theme.vue?raw'
+import menuSelectionTestCode from '../examples/menu/selection-test.vue?raw'
+</script>