@a2simcode/ui 0.0.46 → 0.0.48

package/docs/components/dynamic-layer.md

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

package/docs/components/echarts.md

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

package/docs/components/editor.md

@@ -0,0 +1,24 @@
+# Editor 富文本编辑器
+
+基于 wangeditor 的富文本编辑器组件。
+
+## 基础用法
+
+<Demo :source-code="editorBasicCode">
+  <template #source>
+    <editor-basic />
+  </template>
+  <template #description>
+    基础用法，支持 `v-model:value` 双向绑定。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="editorApi" componentName="editor" />
+
+<script setup>
+import EditorBasic from '../examples/editor/basic.vue'
+import editorApi from './meta/editor'
+import editorBasicCode from '../examples/editor/basic.vue?raw'
+</script>

package/docs/components/form.md

@@ -0,0 +1,27 @@
+# Form 表单
+
+`j-form` 是一个强大的动态表单组件，支持通过 Schema 配置来生成表单，提供了完整的表单验证、数据管理和事件处理能力。
+
+## 基础用法
+
+通过 `schema` 属性定义表单结构，`config` 属性配置表单样式。
+
+<Demo :source-code="basicCode">
+  <template #source>
+    <basic />
+  </template>
+  <template #description>
+    使用 `j-form` 快速创建一个包含多个输入项的表单。通过 `validate` 方法进行表单验证，通过 `getFormData` 方法获取表单数据。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="formApi" componentName="form" />
+
+<script setup>
+import Basic from '../examples/form/basic.vue'
+import formApi from './meta/form'
+
+import basicCode from '../examples/form/basic.vue?raw'
+</script>

package/docs/components/guid.md

@@ -0,0 +1,39 @@
+# GUID 全局唯一标识符
+
+用于生成和展示全局唯一标识符(GUID/UUID)。当不指定值时，组件会自动生成一个UUID，这在创建新记录或需要唯一标识时非常有用。
+
+## 基础用法
+
+<Demo :source-code="guidBasicCode">
+  <template #source>
+    <guid-basic />
+  </template>
+  <template #description>
+    自动生成UUID，如果需要指定特定的GUID值，可以通过 v-model 绑定。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Guid 组件提供三种尺寸。
+
+<Demo :source-code="guidSizeCode">
+  <template #source>
+    <guid-size />
+  </template>
+  <template #description>
+    使用 size 属性改变组件大小。除了默认大小外，还有另外两个选项：large, small。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="guidApi" componentName="guid" />
+
+<script setup>
+import GuidBasic from '../examples/guid/basic.vue'
+import GuidSize from '../examples/guid/size.vue'
+import guidApi from './meta/guid'
+import guidBasicCode from '../examples/guid/basic.vue?raw'
+import guidSizeCode from '../examples/guid/size.vue?raw'
+</script>

package/docs/components/hpanel.md

@@ -0,0 +1,24 @@
+# Hpanel 水平布局
+
+用于水平排列内容的面板，支持左、中（主内容）、右三个区域。
+
+## 基础用法
+
+<Demo :source-code="hpanelBasicCode">
+  <template #source>
+    <hpanel-basic />
+  </template>
+  <template #description>
+    使用 `left`、`default` 和 `right` 插槽来定义面板的不同部分。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="hpanelApi" componentName="hpanel" />
+
+<script setup>
+import HpanelBasic from '../examples/hpanel/basic.vue'
+import hpanelApi from './meta/hpanel'
+import hpanelBasicCode from '../examples/hpanel/basic.vue?raw'
+</script>

package/docs/components/icon.md

@@ -0,0 +1,56 @@
+# Icon 图标
+
+语义化的矢量图形。使用了 [@iconify/vue](https://iconify.design/docs/icon-components/vue/)。
+
+## 基础用法
+
+通过 `icon` 属性来指定图标名称。你可以从 [Iconify](https://icon-sets.iconify.design/) 搜索成千上万个图标。
+
+<Demo :source-code="iconBasicCode">
+  <template #source>
+    <icon-basic />
+  </template>
+  <template #description>
+    使用 icon、color 来定义图标和颜色。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+使用 `size` 属性来配置图标尺寸。
+
+<Demo :source-code="iconSizeCode">
+  <template #source>
+    <icon-size />
+  </template>
+  <template #description>
+    size 接受数字(单位为px)。
+  </template>
+</Demo>
+
+## 旋转与翻转
+
+使用 `rotate` 和 `flip` 属性来调整图标方向。
+
+<Demo :source-code="iconRotateFlipCode">
+  <template #source>
+    <icon-rotate-flip />
+  </template>
+  <template #description>
+    使用 rotate 定义角度,使用 flip 定义翻转方向。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="iconApi" componentName="icon" />
+
+<script setup>
+import IconBasic from '../examples/icon/basic.vue'
+import IconSize from '../examples/icon/size.vue'
+import IconRotateFlip from '../examples/icon/rotate-flip.vue'
+import iconApi from './meta/icon'
+import iconBasicCode from '../examples/icon/basic.vue?raw'
+import iconSizeCode from '../examples/icon/size.vue?raw'
+import iconRotateFlipCode from '../examples/icon/rotate-flip.vue?raw'
+</script>

package/docs/components/input-button.md

@@ -0,0 +1,24 @@
+# InputButton 输入按钮
+
+通过点击按钮打开一个弹窗层，用于输入或选择复杂的数据。
+
+## 基础用法
+
+<Demo :source-code="inputButtonBasicCode">
+  <template #source>
+    <input-button-basic />
+  </template>
+  <template #description>
+    点击按钮打开弹窗，在弹窗中完成输入后点击确定。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputButtonApi" componentName="input-button" />
+
+<script setup>
+import InputButtonBasic from '../examples/input-button/basic.vue'
+import inputButtonApi from './meta/input-button'
+import inputButtonBasicCode from '../examples/input-button/basic.vue?raw'
+</script>

package/docs/components/input-code.md

@@ -0,0 +1,24 @@
+# InputCode 脚本输入框
+
+通过点击按钮打开一个集成了脚本编辑器的弹窗，用于编写代码或脚本内容。
+
+## 基础用法
+
+<Demo :source-code="inputCodeBasicCode">
+  <template #source>
+    <input-code-basic />
+  </template>
+  <template #description>
+    点击按钮打开代码编辑器，支持多种语言模式和示例代码对比。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputCodeApi" componentName="input-code" />
+
+<script setup>
+import InputCodeBasic from '../examples/input-code/basic.vue'
+import inputCodeApi from './meta/input-code'
+import inputCodeBasicCode from '../examples/input-code/basic.vue?raw'
+</script>

package/docs/components/input-color.md

@@ -0,0 +1,114 @@
+# InputColor 颜色选择器
+
+用于颜色选择，支持多种颜色格式。
+
+## 基础用法
+
+<Demo :source-code="inputColorBasicCode">
+  <template #source>
+    <input-color-basic />
+  </template>
+  <template #description>
+    使用 v-model 实现双向数据绑定。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+InputColor 组件提供三种尺寸。
+
+<Demo :source-code="inputColorSizeCode">
+  <template #source>
+    <input-color-size />
+  </template>
+  <template #description>
+    使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
+  </template>
+</Demo>
+
+## 禁用和只读
+
+通过 `disabled` 和 `readonly` 属性指定输入框的状态。
+
+<Demo :source-code="inputColorDisabledCode">
+  <template #source>
+    <input-color-disabled />
+  </template>
+  <template #description>
+    通过 disabled 属性指定是否禁用 input-color 组件,通过 readonly 属性指定是否只读。
+  </template>
+</Demo>
+
+## 仅显示按钮
+
+使用 `only-button` 属性可以只显示颜色选择器按钮，隐藏输入框。
+
+<Demo :source-code="inputColorOnlyButtonCode">
+  <template #source>
+    <input-color-only-button />
+  </template>
+  <template #description>
+    设置 `only-button` 属性为 `true` 即可只显示颜色选择器按钮。
+  </template>
+</Demo>
+
+## 预定义颜色
+
+使用 `predefine-colors` 属性可以设置预定义的颜色选项。
+
+<Demo :source-code="inputColorPredefineCode">
+  <template #source>
+    <input-color-predefine />
+  </template>
+  <template #description>
+    通过 `predefine-colors` 属性设置预定义的颜色数组，支持多种颜色格式。
+  </template>
+</Demo>
+
+## 透明度支持
+
+使用 `show-alpha` 属性控制是否支持透明度选择。
+
+<Demo :source-code="inputColorNoAlphaCode">
+  <template #source>
+    <input-color-no-alpha />
+  </template>
+  <template #description>
+    设置 `show-alpha` 属性为 `true` 或 `false` 来控制是否支持透明度选择。
+  </template>
+</Demo>
+
+## 颜色格式
+
+使用 `color-format` 属性可以设置写入 v-model 的颜色的格式。
+
+<Demo :source-code="inputColorFormatCode">
+  <template #source>
+    <input-color-format />
+  </template>
+  <template #description>
+    通过 `color-format` 属性设置颜色格式，支持 hex、rgb、hsl、hsv 四种格式。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputColorApi" componentName="input-color" />
+
+<script setup>
+import InputColorBasic from '../examples/input-color/basic.vue'
+import InputColorSize from '../examples/input-color/size.vue'
+import InputColorDisabled from '../examples/input-color/disabled.vue'
+import InputColorOnlyButton from '../examples/input-color/only-button.vue'
+import InputColorPredefine from '../examples/input-color/predefine.vue'
+import InputColorNoAlpha from '../examples/input-color/no-alpha.vue'
+import InputColorFormat from '../examples/input-color/format.vue'
+import inputColorApi from './meta/input-color'
+import inputColorBasicCode from '../examples/input-color/basic.vue?raw'
+import inputColorSizeCode from '../examples/input-color/size.vue?raw'
+import inputColorDisabledCode from '../examples/input-color/disabled.vue?raw'
+import inputColorOnlyButtonCode from '../examples/input-color/only-button.vue?raw'
+import inputColorPredefineCode from '../examples/input-color/predefine.vue?raw'
+import inputColorNoAlphaCode from '../examples/input-color/no-alpha.vue?raw'
+import inputColorFormatCode from '../examples/input-color/format.vue?raw'
+</script>

package/docs/components/input-layer.md

@@ -0,0 +1,26 @@
+# InputLayer 弹窗选择
+
+带有弹窗选择功能的输入框组件。
+
+## 基础用法
+
+基础的弹窗选择用法。
+
+<Demo :source-code="inputLayerBasicCode">
+  <template #source>
+    <input-layer-basic />
+  </template>
+  <template #description>
+    使用 `load-layer-data` 属性配置数据加载方法，`columns` 配置表格列。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputLayerApi" componentName="input-layer" />
+
+<script setup>
+import InputLayerBasic from '../examples/input-layer/basic.vue'
+import inputLayerBasicCode from '../examples/input-layer/basic.vue?raw'
+import inputLayerApi from './meta/input-layer'
+</script>