@a2simcode/ui 0.0.49 → 0.0.51

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,42 +1,42 @@
-# 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>
-
-## API
-
-<ApiTable :data="pageApi" componentName="page" />
-
-<script setup>
-import PageBasic from '../examples/page/basic.vue'
-import PageInit from '../examples/page/init.vue'
-import pageApi from './meta/page'
-
-import pageBasicCode from '../examples/page/basic.vue?raw'
-import pageInitCode from '../examples/page/init.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>
+
+## API
+
+<ApiTable :data="pageApi" componentName="page" />
+
+<script setup>
+import PageBasic from '../examples/page/basic.vue'
+import PageInit from '../examples/page/init.vue'
+import pageApi from './meta/page'
+
+import pageBasicCode from '../examples/page/basic.vue?raw'
+import pageInitCode from '../examples/page/init.vue?raw'
+</script>

package/docs/components/panel.md

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

package/docs/components/radio.md

@@ -1,87 +1,87 @@
-# Radio 单选框
-
-在一组备选项中进行单选。
-
-## 基础用法
-
-使用 `v-model` 实现双向数据绑定。
-
-<Demo :source-code="radioBasicCode">
-  <template #source>
-    <radio-basic />
-  </template>
-  <template #description>
-    使用 v-model 实现双向数据绑定。
-  </template>
-</Demo>
-
-## 按钮样式
-
-通过 `isButton` 属性可以将单选框设置为按钮样式。
-
-<Demo :source-code="radioButtonCode">
-  <template #source>
-    <radio-button />
-  </template>
-  <template #description>
-    设置 `isButton` 属性为 `true` 即可显示为按钮样式。
-  </template>
-</Demo>
-
-## 颜色标签
-
-通过 `isColor` 属性可以为选项添加颜色标签。
-
-<Demo :source-code="radioColorCode">
-  <template #source>
-    <radio-color />
-  </template>
-  <template #description>
-    设置 `isColor` 属性为 `true` 即可显示颜色标签。可以通过 `colors` 属性或选项中的 `color` 属性设置颜色。
-  </template>
-</Demo>
-
-## 不同尺寸
-
-Radio 组件提供三种尺寸。
-
-<Demo :source-code="radioSizeCode">
-  <template #source>
-    <radio-size />
-  </template>
-  <template #description>
-    使用 `size` 属性配置尺寸,可选值为 `large`、`default` 和 `small`。
-  </template>
-</Demo>
-
-## 禁用状态
-
-使用 `readonly` 属性来定义单选框是否被禁用。
-
-<Demo :source-code="radioDisabledCode">
-  <template #source>
-    <radio-disabled />
-  </template>
-  <template #description>
-    你可以使用 `readonly` 属性来定义单选框是否可用。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="radioApi" componentName="radio" />
-
-<script setup>
-import RadioBasic from '../examples/radio/basic.vue'
-import RadioButton from '../examples/radio/button.vue'
-import RadioColor from '../examples/radio/color.vue'
-import RadioSize from '../examples/radio/size.vue'
-import RadioDisabled from '../examples/radio/disabled.vue'
-import radioApi from './meta/radio'
-
-import radioBasicCode from '../examples/radio/basic.vue?raw'
-import radioButtonCode from '../examples/radio/button.vue?raw'
-import radioColorCode from '../examples/radio/color.vue?raw'
-import radioSizeCode from '../examples/radio/size.vue?raw'
-import radioDisabledCode from '../examples/radio/disabled.vue?raw'
-</script>
+# Radio 单选框
+
+在一组备选项中进行单选。
+
+## 基础用法
+
+使用 `v-model` 实现双向数据绑定。
+
+<Demo :source-code="radioBasicCode">
+  <template #source>
+    <radio-basic />
+  </template>
+  <template #description>
+    使用 v-model 实现双向数据绑定。
+  </template>
+</Demo>
+
+## 按钮样式
+
+通过 `isButton` 属性可以将单选框设置为按钮样式。
+
+<Demo :source-code="radioButtonCode">
+  <template #source>
+    <radio-button />
+  </template>
+  <template #description>
+    设置 `isButton` 属性为 `true` 即可显示为按钮样式。
+  </template>
+</Demo>
+
+## 颜色标签
+
+通过 `isColor` 属性可以为选项添加颜色标签。
+
+<Demo :source-code="radioColorCode">
+  <template #source>
+    <radio-color />
+  </template>
+  <template #description>
+    设置 `isColor` 属性为 `true` 即可显示颜色标签。可以通过 `colors` 属性或选项中的 `color` 属性设置颜色。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Radio 组件提供三种尺寸。
+
+<Demo :source-code="radioSizeCode">
+  <template #source>
+    <radio-size />
+  </template>
+  <template #description>
+    使用 `size` 属性配置尺寸,可选值为 `large`、`default` 和 `small`。
+  </template>
+</Demo>
+
+## 禁用状态
+
+使用 `readonly` 属性来定义单选框是否被禁用。
+
+<Demo :source-code="radioDisabledCode">
+  <template #source>
+    <radio-disabled />
+  </template>
+  <template #description>
+    你可以使用 `readonly` 属性来定义单选框是否可用。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="radioApi" componentName="radio" />
+
+<script setup>
+import RadioBasic from '../examples/radio/basic.vue'
+import RadioButton from '../examples/radio/button.vue'
+import RadioColor from '../examples/radio/color.vue'
+import RadioSize from '../examples/radio/size.vue'
+import RadioDisabled from '../examples/radio/disabled.vue'
+import radioApi from './meta/radio'
+
+import radioBasicCode from '../examples/radio/basic.vue?raw'
+import radioButtonCode from '../examples/radio/button.vue?raw'
+import radioColorCode from '../examples/radio/color.vue?raw'
+import radioSizeCode from '../examples/radio/size.vue?raw'
+import radioDisabledCode from '../examples/radio/disabled.vue?raw'
+</script>