@a2simcode/ui 0.0.187 → 0.0.188

package/docs/components/number.md

@@ -1,124 +1,124 @@
-# Number 计数器
-
-仅允许输入标准的数字值，可定义范围和步长。
-
-## 基础用法
-
-<Demo :source-code="numberBasicCode">
-  <template #source>
-    <number-basic />
-  </template>
-  <template #description>
-    使用 v-model 实现双向数据绑定。
-  </template>
-</Demo>
-
-## 不同尺寸
-
-Number 组件提供三种尺寸。
-
-<Demo :source-code="numberSizeCode">
-  <template #source>
-    <number-size />
-  </template>
-  <template #description>
-    使用 size 属性改变计数器大小。除了默认大小外，还有另外两个选项: large, small。
-  </template>
-</Demo>
-
-## 步长
-
-使用 `step` 属性定义计数器的步长。
-
-<Demo :source-code="numberStepCode">
-  <template #source>
-    <number-step />
-  </template>
-  <template #description>
-    通过 step 属性设置计数器的步长。
-  </template>
-</Demo>
-
-## 严格步长
-
-使用 `step-strictly` 属性确保输入值只能是 step 的倍数。
-
-<Demo :source-code="numberStepStrictlyCode">
-  <template #source>
-    <number-step-strictly />
-  </template>
-  <template #description>
-    设置 `step-strictly` 属性为 `true` 时，输入值必须是 step 的倍数。
-  </template>
-</Demo>
-
-## 禁用
-
-通过 `disabled` 和 `readonly` 属性指定计数器的状态。
-
-<Demo :source-code="numberDisabledCode">
-  <template #source>
-    <number-disabled />
-  </template>
-  <template #description>
-    通过 disabled 属性指定是否禁用 number 组件，通过 readonly 属性指定是否只读。
-  </template>
-</Demo>
-
-## 图标、前后缀
-
-可自定义计数器的前缀、后缀和按钮图标。Number 组件支持多种自定义方式：
-
-- **插槽方式**：使用 `prefix` 和 `suffix` 插槽可以插入复杂内容
-- **属性方式**：使用 `prefix`、`suffix`、`decrease-icon`、`increase-icon` 属性可以设置简单内容（支持字符串形式的图标名称）
-- **控制按钮位置**：使用 `controls-position` 属性可以调整按钮位置
-
-<Demo :source-code="numberSlotsCode">
-  <template #source>
-    <number-slots />
-  </template>
-  <template #description>
-    通过 `prefix` 和 `suffix` 插槽添加前缀/后缀内容，通过 `decrease-icon` 和 `increase-icon` 属性自定义按钮图标。
-  </template>
-</Demo>
-
-## 高级用法
-
-Number 组件还提供了以下高级功能，满足更多定制化需求：
-
-- **精度控制**：使用 `precision` 属性精确控制数值的小数位数
-- **控制按钮**：使用 `controls` 属性控制是否显示增加/减少按钮
-- **文本对齐**：使用 `align` 属性设置输入框内文本的对齐方式
-- **禁用科学计数法**：使用 `disabled-scientific` 属性防止用户输入科学计数法
-- **其他属性**：包括 `placeholder`、`aria-label`、`inputmode`、`value-on-clear` 等
-
-<Demo :source-code="numberAdvancedCode">
-  <template #source>
-    <number-advanced />
-  </template>
-  <template #description>
-    展示了 `precision`、`controls`、`align`、`disabled-scientific` 等高级属性的用法。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="numberApi" componentName="number" />
-
-<script setup>
-import NumberBasic from '../examples/number/basic.vue'
-import NumberSize from '../examples/number/size.vue'
-import NumberStep from '../examples/number/step.vue'
-import NumberStepStrictly from '../examples/number/step-strictly.vue'
-import NumberDisabled from '../examples/number/disabled.vue'
-import NumberSlots from '../examples/number/slots.vue'
-import NumberAdvanced from '../examples/number/advanced.vue'
-import numberApi from './meta/number'
-import numberBasicCode from '../examples/number/basic.vue?raw'
-import numberSizeCode from '../examples/number/size.vue?raw'
-import numberStepCode from '../examples/number/step.vue?raw'
-import numberStepStrictlyCode from '../examples/number/step-strictly.vue?raw'
-import numberDisabledCode from '../examples/number/disabled.vue?raw'
-import numberSlotsCode from '../examples/number/slots.vue?raw'
-import numberAdvancedCode from '../examples/number/advanced.vue?raw'
-</script>
+# Number 计数器
+
+仅允许输入标准的数字值，可定义范围和步长。
+
+## 基础用法
+
+<Demo :source-code="numberBasicCode">
+  <template #source>
+    <number-basic />
+  </template>
+  <template #description>
+    使用 v-model 实现双向数据绑定。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Number 组件提供三种尺寸。
+
+<Demo :source-code="numberSizeCode">
+  <template #source>
+    <number-size />
+  </template>
+  <template #description>
+    使用 size 属性改变计数器大小。除了默认大小外，还有另外两个选项: large, small。
+  </template>
+</Demo>
+
+## 步长
+
+使用 `step` 属性定义计数器的步长。
+
+<Demo :source-code="numberStepCode">
+  <template #source>
+    <number-step />
+  </template>
+  <template #description>
+    通过 step 属性设置计数器的步长。
+  </template>
+</Demo>
+
+## 严格步长
+
+使用 `step-strictly` 属性确保输入值只能是 step 的倍数。
+
+<Demo :source-code="numberStepStrictlyCode">
+  <template #source>
+    <number-step-strictly />
+  </template>
+  <template #description>
+    设置 `step-strictly` 属性为 `true` 时，输入值必须是 step 的倍数。
+  </template>
+</Demo>
+
+## 禁用
+
+通过 `disabled` 和 `readonly` 属性指定计数器的状态。
+
+<Demo :source-code="numberDisabledCode">
+  <template #source>
+    <number-disabled />
+  </template>
+  <template #description>
+    通过 disabled 属性指定是否禁用 number 组件，通过 readonly 属性指定是否只读。
+  </template>
+</Demo>
+
+## 图标、前后缀
+
+可自定义计数器的前缀、后缀和按钮图标。Number 组件支持多种自定义方式：
+
+- **插槽方式**：使用 `prefix` 和 `suffix` 插槽可以插入复杂内容
+- **属性方式**：使用 `prefix`、`suffix`、`decrease-icon`、`increase-icon` 属性可以设置简单内容（支持字符串形式的图标名称）
+- **控制按钮位置**：使用 `controls-position` 属性可以调整按钮位置
+
+<Demo :source-code="numberSlotsCode">
+  <template #source>
+    <number-slots />
+  </template>
+  <template #description>
+    通过 `prefix` 和 `suffix` 插槽添加前缀/后缀内容，通过 `decrease-icon` 和 `increase-icon` 属性自定义按钮图标。
+  </template>
+</Demo>
+
+## 高级用法
+
+Number 组件还提供了以下高级功能，满足更多定制化需求：
+
+- **精度控制**：使用 `precision` 属性精确控制数值的小数位数
+- **控制按钮**：使用 `controls` 属性控制是否显示增加/减少按钮
+- **文本对齐**：使用 `align` 属性设置输入框内文本的对齐方式
+- **禁用科学计数法**：使用 `disabled-scientific` 属性防止用户输入科学计数法
+- **其他属性**：包括 `placeholder`、`aria-label`、`inputmode`、`value-on-clear` 等
+
+<Demo :source-code="numberAdvancedCode">
+  <template #source>
+    <number-advanced />
+  </template>
+  <template #description>
+    展示了 `precision`、`controls`、`align`、`disabled-scientific` 等高级属性的用法。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="numberApi" componentName="number" />
+
+<script setup>
+import NumberBasic from '../examples/number/basic.vue'
+import NumberSize from '../examples/number/size.vue'
+import NumberStep from '../examples/number/step.vue'
+import NumberStepStrictly from '../examples/number/step-strictly.vue'
+import NumberDisabled from '../examples/number/disabled.vue'
+import NumberSlots from '../examples/number/slots.vue'
+import NumberAdvanced from '../examples/number/advanced.vue'
+import numberApi from './meta/number'
+import numberBasicCode from '../examples/number/basic.vue?raw'
+import numberSizeCode from '../examples/number/size.vue?raw'
+import numberStepCode from '../examples/number/step.vue?raw'
+import numberStepStrictlyCode from '../examples/number/step-strictly.vue?raw'
+import numberDisabledCode from '../examples/number/disabled.vue?raw'
+import numberSlotsCode from '../examples/number/slots.vue?raw'
+import numberAdvancedCode from '../examples/number/advanced.vue?raw'
+</script>

package/docs/components/page.md

@@ -1,102 +1,102 @@
-# Page 页面
-
-基于 Schema 的页面渲染组件,通过 JSON 配置动态渲染组件树。
-
-## 基础用法
-
-通过 Schema 配置渲染页面组件。
-
-<Demo :source-code="pageBasicCode">
-  <template #source>
-    <page-basic />
-  </template>
-  <template #description>
-    通过 `schema` 属性配置组件树,支持嵌套子组件,动态渲染整个页面结构。
-  </template>
-</Demo>
-
-## 使用 init 方法初始化
-
-通过组件实例的 `init` 方法动态初始化 Schema。
-
-<Demo :source-code="pageInitCode">
-  <template #source>
-    <page-init />
-  </template>
-  <template #description>
-    通过 `ref` 获取组件实例，调用 `init` 方法可以动态设置或更新页面的 Schema 配置。
-  </template>
-</Demo>
-
-## 日志页面示例
-
-结合 Table Panel 的复杂页面示例。
-
-<Demo :source-code="pageLogCode">
-  <template #source>
-    <page-log />
-  </template>
-  <template #description>
-    展示了如何使用 `j-page` 配置一个包含表格、弹窗和自定义逻辑的完整页面。
-  </template>
-</Demo>
-
-## 用户管理页面示例
-
-参考业务项目中的写法，展示了如何在 `j-page` 内嵌 `j-table-panel`，并完成“新增 / 编辑 / 重置密码 / 删除 / 状态开关”等常见交互。
-
-<Demo :source-code="pageUserManagementCode">
-  <template #source>
-    <page-user-management />
-  </template>
-  <template #description>
-    示例使用 Mock 数据模拟分页接口，并通过 `openLayer` 打开表单弹窗；保存/删除后通过 `j-page.call('mainTable','refreshData')` 刷新表格。
-  </template>
-</Demo>
-
-## 部门-用户联动示例
-
-参考业务项目中常见的“左侧列表 / 右侧列表”的联动写法：点击左侧部门，触发 `onSelect` 更新筛选条件，并通过 `j-page.call('userTable','resetData')` 刷新右侧分页表格。
-
-<Demo :source-code="pageDeptUserManagementCode">
-  <template #source>
-    <page-dept-user-management />
-  </template>
-  <template #description>
-    左侧使用 `j-table-panel`（不分页）展示部门；右侧使用 `j-table-panel`（分页）展示用户，并提供“全部用户 / 刷新”等常用按钮。
-  </template>
-</Demo>
-
-## 数据表模型页面示例
-
-参考业务项目中常见的“左侧树 / 右侧表格”的写法：点击左侧数据库树切换数据源；右侧使用 `j-table-panel` 展示表模型列表，并支持“新增 / 导入 / 编辑 / 删除 / 同步 / 更新”等常见操作；通过 `j-page.call('mainTable','refreshData')` 刷新表格。
-
-<Demo :source-code="pageCodeTableModelCode">
-  <template #source>
-    <page-code-table-model />
-  </template>
-  <template #description>
-    示例没有依赖额外的 page 配置文件，直接在 Demo 内部定义 schema、按钮与动作，适合用于演示 `j-page` 的 Schema 页面组织能力。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="pageApi" componentName="page" />
-
-<script setup>
-import PageBasic from '../examples/page/basic.vue'
-import PageInit from '../examples/page/init.vue'
-import PageLog from '../examples/page/log.vue'
-import PageUserManagement from '../examples/page/user-management.vue'
-import PageDeptUserManagement from '../examples/page/dept-user-management.vue'
-import PageCodeTableModel from '../examples/page/code-table-model.vue'
-import pageApi from './meta/page'
-
-import pageBasicCode from '../examples/page/basic.vue?raw'
-import pageInitCode from '../examples/page/init.vue?raw'
-import pageLogCode from '../examples/page/log.vue?raw'
-import pageUserManagementCode from '../examples/page/user-management.vue?raw'
-import pageDeptUserManagementCode from '../examples/page/dept-user-management.vue?raw'
-import pageCodeTableModelCode from '../examples/page/code-table-model.vue?raw'
-</script>
+# Page 页面
+
+基于 Schema 的页面渲染组件,通过 JSON 配置动态渲染组件树。
+
+## 基础用法
+
+通过 Schema 配置渲染页面组件。
+
+<Demo :source-code="pageBasicCode">
+  <template #source>
+    <page-basic />
+  </template>
+  <template #description>
+    通过 `schema` 属性配置组件树,支持嵌套子组件,动态渲染整个页面结构。
+  </template>
+</Demo>
+
+## 使用 init 方法初始化
+
+通过组件实例的 `init` 方法动态初始化 Schema。
+
+<Demo :source-code="pageInitCode">
+  <template #source>
+    <page-init />
+  </template>
+  <template #description>
+    通过 `ref` 获取组件实例，调用 `init` 方法可以动态设置或更新页面的 Schema 配置。
+  </template>
+</Demo>
+
+## 日志页面示例
+
+结合 Table Panel 的复杂页面示例。
+
+<Demo :source-code="pageLogCode">
+  <template #source>
+    <page-log />
+  </template>
+  <template #description>
+    展示了如何使用 `j-page` 配置一个包含表格、弹窗和自定义逻辑的完整页面。
+  </template>
+</Demo>
+
+## 用户管理页面示例
+
+参考业务项目中的写法，展示了如何在 `j-page` 内嵌 `j-table-panel`，并完成“新增 / 编辑 / 重置密码 / 删除 / 状态开关”等常见交互。
+
+<Demo :source-code="pageUserManagementCode">
+  <template #source>
+    <page-user-management />
+  </template>
+  <template #description>
+    示例使用 Mock 数据模拟分页接口，并通过 `openLayer` 打开表单弹窗；保存/删除后通过 `j-page.call('mainTable','refreshData')` 刷新表格。
+  </template>
+</Demo>
+
+## 部门-用户联动示例
+
+参考业务项目中常见的“左侧列表 / 右侧列表”的联动写法：点击左侧部门，触发 `onSelect` 更新筛选条件，并通过 `j-page.call('userTable','resetData')` 刷新右侧分页表格。
+
+<Demo :source-code="pageDeptUserManagementCode">
+  <template #source>
+    <page-dept-user-management />
+  </template>
+  <template #description>
+    左侧使用 `j-table-panel`（不分页）展示部门；右侧使用 `j-table-panel`（分页）展示用户，并提供“全部用户 / 刷新”等常用按钮。
+  </template>
+</Demo>
+
+## 数据表模型页面示例
+
+参考业务项目中常见的“左侧树 / 右侧表格”的写法：点击左侧数据库树切换数据源；右侧使用 `j-table-panel` 展示表模型列表，并支持“新增 / 导入 / 编辑 / 删除 / 同步 / 更新”等常见操作；通过 `j-page.call('mainTable','refreshData')` 刷新表格。
+
+<Demo :source-code="pageCodeTableModelCode">
+  <template #source>
+    <page-code-table-model />
+  </template>
+  <template #description>
+    示例没有依赖额外的 page 配置文件，直接在 Demo 内部定义 schema、按钮与动作，适合用于演示 `j-page` 的 Schema 页面组织能力。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="pageApi" componentName="page" />
+
+<script setup>
+import PageBasic from '../examples/page/basic.vue'
+import PageInit from '../examples/page/init.vue'
+import PageLog from '../examples/page/log.vue'
+import PageUserManagement from '../examples/page/user-management.vue'
+import PageDeptUserManagement from '../examples/page/dept-user-management.vue'
+import PageCodeTableModel from '../examples/page/code-table-model.vue'
+import pageApi from './meta/page'
+
+import pageBasicCode from '../examples/page/basic.vue?raw'
+import pageInitCode from '../examples/page/init.vue?raw'
+import pageLogCode from '../examples/page/log.vue?raw'
+import pageUserManagementCode from '../examples/page/user-management.vue?raw'
+import pageDeptUserManagementCode from '../examples/page/dept-user-management.vue?raw'
+import pageCodeTableModelCode from '../examples/page/code-table-model.vue?raw'
+</script>

package/docs/components/panel.md

@@ -1,37 +1,37 @@
-# Panel 面板
-
-通用的内容面板。
-
-## 基础用法
-
-<Demo :source-code="panelBasicCode">
-  <template #source>
-    <panel-basic />
-  </template>
-  <template #description>
-    最简单的 Panel 用法。
-  </template>
-</Demo>
-
-## 操作按钮
-
-<Demo :source-code="panelToolButtonsCode">
-  <template #source>
-    <panel-tool-buttons />
-  </template>
-  <template #description>
-    通过 `toolBtns` 属性可以在面板头部添加操作按钮。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="panelApi" componentName="panel" />
-
-<script setup>
-import PanelBasic from '../examples/panel/basic.vue'
-import panelBasicCode from '../examples/panel/basic.vue?raw'
-import panelToolButtons from '../examples/panel/tool-buttons.vue'
-import panelToolButtonsCode from '../examples/panel/tool-buttons.vue?raw'
-import panelApi from './meta/panel'
-</script>
+# Panel 面板
+
+通用的内容面板。
+
+## 基础用法
+
+<Demo :source-code="panelBasicCode">
+  <template #source>
+    <panel-basic />
+  </template>
+  <template #description>
+    最简单的 Panel 用法。
+  </template>
+</Demo>
+
+## 操作按钮
+
+<Demo :source-code="panelToolButtonsCode">
+  <template #source>
+    <panel-tool-buttons />
+  </template>
+  <template #description>
+    通过 `toolBtns` 属性可以在面板头部添加操作按钮。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="panelApi" componentName="panel" />
+
+<script setup>
+import PanelBasic from '../examples/panel/basic.vue'
+import panelBasicCode from '../examples/panel/basic.vue?raw'
+import panelToolButtons from '../examples/panel/tool-buttons.vue'
+import panelToolButtonsCode from '../examples/panel/tool-buttons.vue?raw'
+import panelApi from './meta/panel'
+</script>