@a2simcode/ui 0.0.48 → 0.0.50

package/docs/components/checkbox.md

@@ -1,114 +1,114 @@
-# Checkbox 复选框
-
-复选框组件，用于多项选择。
-
-## 基础用法
-
-<Demo :source-code="checkboxBasicCode">
-  <template #source>
-    <checkbox-basic />
-  </template>
-  <template #description>
-    使用 v-model 实现双向数据绑定。
-  </template>
-</Demo>
-
-## 不同尺寸
-
-Checkbox 组件提供三种尺寸。
-
-<Demo :source-code="checkboxSizeCode">
-  <template #source>
-    <checkbox-size />
-  </template>
-  <template #description>
-    使用 size 属性改变复选框大小。除了默认大小外，还有另外两个选项: large, small。
-  </template>
-</Demo>
-
-## 禁用
-
-通过 `disabled` 和 `readonly` 属性指定复选框的状态。
-
-<Demo :source-code="checkboxDisabledCode">
-  <template #source>
-    <checkbox-disabled />
-  </template>
-  <template #description>
-    通过 disabled 属性指定是否禁用 checkbox 组件，通过 readonly 属性指定是否只读。
-  </template>
-</Demo>
-
-## 最小/最大选择数量
-
-使用 `min` 和 `max` 属性限制可选择的最小和最大数量。
-
-<Demo :source-code="checkboxMinMaxCode">
-  <template #source>
-    <checkbox-min-max />
-  </template>
-  <template #description>
-    设置 `min` 属性为 1 和 `max` 属性为 2，限制选择数量。
-  </template>
-</Demo>
-
-## 按钮样式
-
-使用 `type="button"` 将复选框显示为按钮样式。
-
-<Demo :source-code="checkboxButtonCode">
-  <template #source>
-    <checkbox-button />
-  </template>
-  <template #description>
-    设置 `type` 属性为 `button` 即可显示为按钮样式。
-  </template>
-</Demo>
-
-## 自定义颜色
-
-使用 `text-color` 和 `fill` 属性自定义按钮样式的颜色。
-
-<Demo :source-code="checkboxColorCode">
-  <template #source>
-    <checkbox-color />
-  </template>
-  <template #description>
-    在按钮样式中，通过 `text-color` 指定文字颜色，通过 `fill` 指定背景和边框颜色。
-  </template>
-</Demo>
-
-## 组合示例
-
-展示复选框组件的多种属性组合使用。
-
-<Demo :source-code="checkboxMixedCode">
-  <template #source>
-    <checkbox-mixed />
-  </template>
-  <template #description>
-    展示按钮样式+颜色、最小/最大选择、部分禁用等多种功能的组合使用。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="checkboxApi" componentName="checkbox" />
-
-<script setup>
-import CheckboxBasic from '../examples/checkbox/basic.vue'
-import CheckboxSize from '../examples/checkbox/size.vue'
-import CheckboxDisabled from '../examples/checkbox/disabled.vue'
-import CheckboxMinMax from '../examples/checkbox/min-max.vue'
-import CheckboxButton from '../examples/checkbox/button.vue'
-import CheckboxColor from '../examples/checkbox/color.vue'
-import CheckboxMixed from '../examples/checkbox/mixed.vue'
-import checkboxApi from './meta/checkbox'
-import checkboxBasicCode from '../examples/checkbox/basic.vue?raw'
-import checkboxSizeCode from '../examples/checkbox/size.vue?raw'
-import checkboxDisabledCode from '../examples/checkbox/disabled.vue?raw'
-import checkboxMinMaxCode from '../examples/checkbox/min-max.vue?raw'
-import checkboxButtonCode from '../examples/checkbox/button.vue?raw'
-import checkboxColorCode from '../examples/checkbox/color.vue?raw'
-import checkboxMixedCode from '../examples/checkbox/mixed.vue?raw'
-</script>
+# Checkbox 复选框
+
+复选框组件，用于多项选择。
+
+## 基础用法
+
+<Demo :source-code="checkboxBasicCode">
+  <template #source>
+    <checkbox-basic />
+  </template>
+  <template #description>
+    使用 v-model 实现双向数据绑定。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Checkbox 组件提供三种尺寸。
+
+<Demo :source-code="checkboxSizeCode">
+  <template #source>
+    <checkbox-size />
+  </template>
+  <template #description>
+    使用 size 属性改变复选框大小。除了默认大小外，还有另外两个选项: large, small。
+  </template>
+</Demo>
+
+## 禁用
+
+通过 `disabled` 和 `readonly` 属性指定复选框的状态。
+
+<Demo :source-code="checkboxDisabledCode">
+  <template #source>
+    <checkbox-disabled />
+  </template>
+  <template #description>
+    通过 disabled 属性指定是否禁用 checkbox 组件，通过 readonly 属性指定是否只读。
+  </template>
+</Demo>
+
+## 最小/最大选择数量
+
+使用 `min` 和 `max` 属性限制可选择的最小和最大数量。
+
+<Demo :source-code="checkboxMinMaxCode">
+  <template #source>
+    <checkbox-min-max />
+  </template>
+  <template #description>
+    设置 `min` 属性为 1 和 `max` 属性为 2，限制选择数量。
+  </template>
+</Demo>
+
+## 按钮样式
+
+使用 `type="button"` 将复选框显示为按钮样式。
+
+<Demo :source-code="checkboxButtonCode">
+  <template #source>
+    <checkbox-button />
+  </template>
+  <template #description>
+    设置 `type` 属性为 `button` 即可显示为按钮样式。
+  </template>
+</Demo>
+
+## 自定义颜色
+
+使用 `text-color` 和 `fill` 属性自定义按钮样式的颜色。
+
+<Demo :source-code="checkboxColorCode">
+  <template #source>
+    <checkbox-color />
+  </template>
+  <template #description>
+    在按钮样式中，通过 `text-color` 指定文字颜色，通过 `fill` 指定背景和边框颜色。
+  </template>
+</Demo>
+
+## 组合示例
+
+展示复选框组件的多种属性组合使用。
+
+<Demo :source-code="checkboxMixedCode">
+  <template #source>
+    <checkbox-mixed />
+  </template>
+  <template #description>
+    展示按钮样式+颜色、最小/最大选择、部分禁用等多种功能的组合使用。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="checkboxApi" componentName="checkbox" />
+
+<script setup>
+import CheckboxBasic from '../examples/checkbox/basic.vue'
+import CheckboxSize from '../examples/checkbox/size.vue'
+import CheckboxDisabled from '../examples/checkbox/disabled.vue'
+import CheckboxMinMax from '../examples/checkbox/min-max.vue'
+import CheckboxButton from '../examples/checkbox/button.vue'
+import CheckboxColor from '../examples/checkbox/color.vue'
+import CheckboxMixed from '../examples/checkbox/mixed.vue'
+import checkboxApi from './meta/checkbox'
+import checkboxBasicCode from '../examples/checkbox/basic.vue?raw'
+import checkboxSizeCode from '../examples/checkbox/size.vue?raw'
+import checkboxDisabledCode from '../examples/checkbox/disabled.vue?raw'
+import checkboxMinMaxCode from '../examples/checkbox/min-max.vue?raw'
+import checkboxButtonCode from '../examples/checkbox/button.vue?raw'
+import checkboxColorCode from '../examples/checkbox/color.vue?raw'
+import checkboxMixedCode from '../examples/checkbox/mixed.vue?raw'
+</script>

package/docs/components/code-mirror.md

@@ -1,85 +1,85 @@
-# CodeMirror 代码编辑器
-
-强大的代码编辑器组件，支持多种编程语言的语法高亮和代码折叠。
-
-## 基础用法
-
-<Demo :source-code="codeMirrorBasicCode">
-  <template #source>
-    <code-mirror-basic />
-  </template>
-  <template #description>
-    使用 value 绑定，通过 mode 属性指定语言模式。
-  </template>
-</Demo>
-
-## 只读模式
-
-通过 `readonly` 属性将编辑器设置为只读状态。
-
-<Demo :source-code="codeMirrorReadonlyCode">
-  <template #source>
-    <code-mirror-readonly />
-  </template>
-  <template #description>
-    设置 `readonly` 属性为 `true` 即可启用只读模式，用户无法编辑内容。
-  </template>
-</Demo>
-
-## 语言模式切换
-
-支持多种编程语言的语法高亮。
-
-<Demo :source-code="codeMirrorModeCode">
-  <template #source>
-    <code-mirror-mode />
-  </template>
-  <template #description>
-    通过 `mode` 属性指定语言模式，如 `application/javascript`、`text/x-sql` 等。
-  </template>
-</Demo>
-
-## 自定义高度
-
-使用 `height` 属性自定义编辑器高度。
-
-<Demo :source-code="codeMirrorHeightCode">
-  <template #source>
-    <code-mirror-height />
-  </template>
-  <template #description>
-    通过 `height` 属性设置编辑器的高度（单位：像素）。
-  </template>
-</Demo>
-
-## 事件监听
-
-监听代码变化事件并执行相应操作。
-
-<Demo :source-code="codeMirrorEventsCode">
-  <template #source>
-    <code-mirror-events />
-  </template>
-  <template #description>
-    通过 `@change` 事件监听代码内容的变化，获取实时更新的代码值。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="codeMirrorApi" componentName="code-mirror" />
-
-<script setup>
-import CodeMirrorBasic from '../examples/code-mirror/basic.vue'
-import CodeMirrorReadonly from '../examples/code-mirror/readonly.vue'
-import CodeMirrorMode from '../examples/code-mirror/mode.vue'
-import CodeMirrorHeight from '../examples/code-mirror/height.vue'
-import CodeMirrorEvents from '../examples/code-mirror/events.vue'
-import codeMirrorApi from './meta/code-mirror'
-
-import codeMirrorBasicCode from '../examples/code-mirror/basic.vue?raw'
-import codeMirrorReadonlyCode from '../examples/code-mirror/readonly.vue?raw'
-import codeMirrorModeCode from '../examples/code-mirror/mode.vue?raw'
-import codeMirrorHeightCode from '../examples/code-mirror/height.vue?raw'
-import codeMirrorEventsCode from '../examples/code-mirror/events.vue?raw'
-</script>
+# CodeMirror 代码编辑器
+
+强大的代码编辑器组件，支持多种编程语言的语法高亮和代码折叠。
+
+## 基础用法
+
+<Demo :source-code="codeMirrorBasicCode">
+  <template #source>
+    <code-mirror-basic />
+  </template>
+  <template #description>
+    使用 value 绑定，通过 mode 属性指定语言模式。
+  </template>
+</Demo>
+
+## 只读模式
+
+通过 `readonly` 属性将编辑器设置为只读状态。
+
+<Demo :source-code="codeMirrorReadonlyCode">
+  <template #source>
+    <code-mirror-readonly />
+  </template>
+  <template #description>
+    设置 `readonly` 属性为 `true` 即可启用只读模式，用户无法编辑内容。
+  </template>
+</Demo>
+
+## 语言模式切换
+
+支持多种编程语言的语法高亮。
+
+<Demo :source-code="codeMirrorModeCode">
+  <template #source>
+    <code-mirror-mode />
+  </template>
+  <template #description>
+    通过 `mode` 属性指定语言模式，如 `application/javascript`、`text/x-sql` 等。
+  </template>
+</Demo>
+
+## 自定义高度
+
+使用 `height` 属性自定义编辑器高度。
+
+<Demo :source-code="codeMirrorHeightCode">
+  <template #source>
+    <code-mirror-height />
+  </template>
+  <template #description>
+    通过 `height` 属性设置编辑器的高度（单位：像素）。
+  </template>
+</Demo>
+
+## 事件监听
+
+监听代码变化事件并执行相应操作。
+
+<Demo :source-code="codeMirrorEventsCode">
+  <template #source>
+    <code-mirror-events />
+  </template>
+  <template #description>
+    通过 `@change` 事件监听代码内容的变化，获取实时更新的代码值。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="codeMirrorApi" componentName="code-mirror" />
+
+<script setup>
+import CodeMirrorBasic from '../examples/code-mirror/basic.vue'
+import CodeMirrorReadonly from '../examples/code-mirror/readonly.vue'
+import CodeMirrorMode from '../examples/code-mirror/mode.vue'
+import CodeMirrorHeight from '../examples/code-mirror/height.vue'
+import CodeMirrorEvents from '../examples/code-mirror/events.vue'
+import codeMirrorApi from './meta/code-mirror'
+
+import codeMirrorBasicCode from '../examples/code-mirror/basic.vue?raw'
+import codeMirrorReadonlyCode from '../examples/code-mirror/readonly.vue?raw'
+import codeMirrorModeCode from '../examples/code-mirror/mode.vue?raw'
+import codeMirrorHeightCode from '../examples/code-mirror/height.vue?raw'
+import codeMirrorEventsCode from '../examples/code-mirror/events.vue?raw'
+</script>

package/docs/components/collapse.md

@@ -1,26 +1,26 @@
-# Collapse 折叠面板
-
-通过折叠面板收纳内容区域。
-
-## 基础用法
-
-可以折叠/展开的内容区域。
-
-<Demo :source-code="collapseBasicCode">
-  <template #source>
-    <collapse-basic />
-  </template>
-  <template #description>
-    通过 `v-model` 绑定当前激活的面板，使用 `el-collapse-item` 定义面板内容。支持 `accordion` 属性开启手风琴模式。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="collapseApi" componentName="collapse" />
-
-<script setup>
-import CollapseBasic from '../examples/collapse/basic.vue'
-import collapseApi from './meta/collapse'
-import collapseBasicCode from '../examples/collapse/basic.vue?raw'
-</script>
+# Collapse 折叠面板
+
+通过折叠面板收纳内容区域。
+
+## 基础用法
+
+可以折叠/展开的内容区域。
+
+<Demo :source-code="collapseBasicCode">
+  <template #source>
+    <collapse-basic />
+  </template>
+  <template #description>
+    通过 `v-model` 绑定当前激活的面板，使用 `el-collapse-item` 定义面板内容。支持 `accordion` 属性开启手风琴模式。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="collapseApi" componentName="collapse" />
+
+<script setup>
+import CollapseBasic from '../examples/collapse/basic.vue'
+import collapseApi from './meta/collapse'
+import collapseBasicCode from '../examples/collapse/basic.vue?raw'
+</script>

package/docs/components/comp.md

@@ -1,71 +1,71 @@
-# Comp 动态组件
-
-`j-comp` 是一个通用的动态组件渲染器，它可以根据配置渲染不同类型的组件，并支持递归渲染子组件。
-
-## 基础用法
-
-通过 `type` 属性指定组件类型，`config` 属性传递组件配置。
-
-<Demo :source-code="basicCode">
-  <template #source>
-    <basic />
-  </template>
-  <template #description>
-    使用 `j-comp` 渲染一个简单的按钮组件。
-  </template>
-</Demo>
-
-## Tabs 示例
-
-当 `type` 为 `j-tabs` 时：
-
-1. 子组件会自动添加 `name` 属性（`_tab` + index）。
-2. 组件会自动开启输入模式（`v-model` 生效）。
-3. 默认值规则：
-   - 优先使用 `config.defaultValue`。
-   - 其次查找子组件中配置了 `active: true` 的项，使用其对应的 `_tab` + index。
-   - 默认值为 `_tab0`。
-
-<Demo :source-code="tabsCode">
-  <template #source>
-    <tabs />
-  </template>
-  <template #description>
-    使用 `j-comp` 渲染 `j-tabs` 组件，子组件会自动获得 `name` 属性。
-  </template>
-</Demo>
-
-## Collapse 示例
-
-当 `type` 为 `j-collapse` 时：
-
-1. 子组件会自动添加 `name` 属性（`_collapse` + index）。
-2. 组件会自动开启输入模式（`v-model` 生效）。
-3. 默认值规则：
-   - 优先使用 `config.defaultValue`。
-   - 其次查找子组件中配置了 `active: true` 的项，使用其对应的 `_collapse` + index。
-   - 默认值为 `[]`（非手风琴模式）或 `''`（手风琴模式）。
-
-<Demo :source-code="collapseCode">
-  <template #source>
-    <collapse />
-  </template>
-  <template #description>
-    使用 `j-comp` 渲染 `j-collapse` 组件，子组件会自动获得 `name` 属性。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="compApi" componentName="comp" />
-
-<script setup>
-import Basic from '../examples/comp/basic.vue'
-import Tabs from '../examples/comp/tabs.vue'
-import Collapse from '../examples/comp/collapse.vue'
-import compApi from './meta/comp'
-
-import basicCode from '../examples/comp/basic.vue?raw'
-import tabsCode from '../examples/comp/tabs.vue?raw'
-import collapseCode from '../examples/comp/collapse.vue?raw'
-</script>
+# Comp 动态组件
+
+`j-comp` 是一个通用的动态组件渲染器，它可以根据配置渲染不同类型的组件，并支持递归渲染子组件。
+
+## 基础用法
+
+通过 `type` 属性指定组件类型，`config` 属性传递组件配置。
+
+<Demo :source-code="basicCode">
+  <template #source>
+    <basic />
+  </template>
+  <template #description>
+    使用 `j-comp` 渲染一个简单的按钮组件。
+  </template>
+</Demo>
+
+## Tabs 示例
+
+当 `type` 为 `j-tabs` 时：
+
+1. 子组件会自动添加 `name` 属性（`_tab` + index）。
+2. 组件会自动开启输入模式（`v-model` 生效）。
+3. 默认值规则：
+   - 优先使用 `config.defaultValue`。
+   - 其次查找子组件中配置了 `active: true` 的项，使用其对应的 `_tab` + index。
+   - 默认值为 `_tab0`。
+
+<Demo :source-code="tabsCode">
+  <template #source>
+    <tabs />
+  </template>
+  <template #description>
+    使用 `j-comp` 渲染 `j-tabs` 组件，子组件会自动获得 `name` 属性。
+  </template>
+</Demo>
+
+## Collapse 示例
+
+当 `type` 为 `j-collapse` 时：
+
+1. 子组件会自动添加 `name` 属性（`_collapse` + index）。
+2. 组件会自动开启输入模式（`v-model` 生效）。
+3. 默认值规则：
+   - 优先使用 `config.defaultValue`。
+   - 其次查找子组件中配置了 `active: true` 的项，使用其对应的 `_collapse` + index。
+   - 默认值为 `[]`（非手风琴模式）或 `''`（手风琴模式）。
+
+<Demo :source-code="collapseCode">
+  <template #source>
+    <collapse />
+  </template>
+  <template #description>
+    使用 `j-comp` 渲染 `j-collapse` 组件，子组件会自动获得 `name` 属性。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="compApi" componentName="comp" />
+
+<script setup>
+import Basic from '../examples/comp/basic.vue'
+import Tabs from '../examples/comp/tabs.vue'
+import Collapse from '../examples/comp/collapse.vue'
+import compApi from './meta/comp'
+
+import basicCode from '../examples/comp/basic.vue?raw'
+import tabsCode from '../examples/comp/tabs.vue?raw'
+import collapseCode from '../examples/comp/collapse.vue?raw'
+</script>

package/docs/components/count-up.md

@@ -1,24 +1,24 @@
-# CountUp 数字滚动动画组件
-
-使用数字滚动效果展示数值的变化，常用于数据统计展示和数值动画效果。
-
-## 基础用法
-
-<Demo :source-code="countUpBasicCode">
-  <template #source>
-    <count-up-basic />
-  </template>
-  <template #description>
-    通过 `end-value` 传入要显示的最终值。支持自定义动画时长、小数位数、起始值等功能。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="countUpApi" componentName="count-up" />
-
-<script setup>
-import CountUpBasic from '../examples/count-up/basic.vue'
-import countUpApi from './meta/count-up'
-import countUpBasicCode from '../examples/count-up/basic.vue?raw'
-</script>
+# CountUp 数字滚动动画组件
+
+使用数字滚动效果展示数值的变化，常用于数据统计展示和数值动画效果。
+
+## 基础用法
+
+<Demo :source-code="countUpBasicCode">
+  <template #source>
+    <count-up-basic />
+  </template>
+  <template #description>
+    通过 `end-value` 传入要显示的最终值。支持自定义动画时长、小数位数、起始值等功能。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="countUpApi" componentName="count-up" />
+
+<script setup>
+import CountUpBasic from '../examples/count-up/basic.vue'
+import countUpApi from './meta/count-up'
+import countUpBasicCode from '../examples/count-up/basic.vue?raw'
+</script>