@a2simcode/ui 0.0.45 → 0.0.47

package/docs/components/number.md

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

package/docs/components/page.md

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

package/docs/components/radio.md

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

package/docs/components/rate.md

@@ -0,0 +1,71 @@
+# Rate 评分
+
+评分组件，用于对事物进行等级评价。
+
+## 基础用法
+
+最基础的评分用法。
+
+<Demo :source-code="rateBasicCode">
+  <template #source>
+    <rate-basic />
+  </template>
+  <template #description>
+    使用 v-model 实现双向绑定。
+  </template>
+</Demo>
+
+## 允许半选
+
+可以允许选择半颗星。
+
+<Demo :source-code="rateHalfCode">
+  <template #source>
+    <rate-half />
+  </template>
+  <template #description>
+    设置 `allow-half` 属性可以实现半选。
+  </template>
+</Demo>
+
+## 辅助文字与分数
+
+可以显示辅助文字或当前分数。
+
+<Demo :source-code="rateTextCode">
+  <template #source>
+    <rate-text />
+  </template>
+  <template #description>
+    使用 `show-text` 显示辅助文字，使用 `show-score` 显示当前分数。
+  </template>
+</Demo>
+
+## 只读
+
+只读状态下无法交互。
+
+<Demo :source-code="rateReadonlyCode">
+  <template #source>
+    <rate-readonly />
+  </template>
+  <template #description>
+    通过 `readonly` 属性指定是否只读。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="rateApi" componentName="rate" />
+
+<script setup>
+import RateBasic from '../examples/rate/basic.vue'
+import RateHalf from '../examples/rate/half.vue'
+import RateText from '../examples/rate/text.vue'
+import RateReadonly from '../examples/rate/readonly.vue'
+import rateApi from './meta/rate'
+import rateBasicCode from '../examples/rate/basic.vue?raw'
+import rateHalfCode from '../examples/rate/half.vue?raw'
+import rateTextCode from '../examples/rate/text.vue?raw'
+import rateReadonlyCode from '../examples/rate/readonly.vue?raw'
+</script>

package/docs/components/select.md

@@ -0,0 +1,133 @@
+# Select 选择器
+
+当选项过多时，使用下拉菜单展示并选择内容。
+
+## 基础用法
+
+<Demo :source-code="selectBasicCode">
+  <template #source>
+    <select-basic />
+  </template>
+  <template #description>
+    使用 v-model 实现双向数据绑定。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Select 组件提供三种尺寸。
+
+<Demo :source-code="selectSizeCode">
+  <template #source>
+    <select-size />
+  </template>
+  <template #description>
+    使用 size 属性改变选择器大小。除了默认大小外,还有另外两个选项: large, small。
+  </template>
+</Demo>
+
+## 禁用和只读
+
+通过 `disabled` 和 `readonly` 属性指定选择器的状态。
+
+<Demo :source-code="selectDisabledCode">
+  <template #source>
+    <select-disabled />
+  </template>
+  <template #description>
+    通过 disabled 属性指定是否禁用 select 组件,通过 readonly 属性指定是否只读。
+  </template>
+</Demo>
+
+## 可清除
+
+使用 `clearable` 属性即可得到一个可清除的选择器。
+
+<Demo :source-code="selectClearableCode">
+  <template #source>
+    <select-clearable />
+  </template>
+  <template #description>
+    设置 `clearable` 属性为 `true` 即可显示清除按钮。
+  </template>
+</Demo>
+
+## 多选
+
+使用 `multiple` 属性即可启用多选模式。
+
+::: tip 注意
+在多选模式下，绑定值（v-model）将以逗号分隔的字符串形式返回，例如：`"1,2,3"`。
+:::
+
+<Demo :source-code="selectMultipleCode">
+  <template #source>
+    <select-multiple />
+  </template>
+  <template #description>
+    设置 `multiple` 属性为 `true` 即可启用多选模式。
+  </template>
+</Demo>
+
+## 可搜索
+
+使用 `filterable` 属性即可启用搜索功能。
+
+<Demo :source-code="selectFilterableCode">
+  <template #source>
+    <select-filterable />
+  </template>
+  <template #description>
+    设置 `filterable` 属性为 `true` 即可启用搜索功能。
+  </template>
+</Demo>
+
+## 分组
+
+使用 `is-group` 和 `group-key` 属性即可实现选项分组。
+
+<Demo :source-code="selectGroupCode">
+  <template #source>
+    <select-group />
+  </template>
+  <template #description>
+    设置 `is-group` 属性为 `true` 并指定 `group-key` 即可实现选项分组。
+  </template>
+</Demo>
+
+## 带图标
+
+选项可以包含图标。
+
+<Demo :source-code="selectIconCode">
+  <template #source>
+    <select-icon />
+  </template>
+  <template #description>
+    在选项数据中添加 `icon` 属性即可显示图标。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="selectApi" componentName="select" />
+
+<script setup>
+import SelectBasic from '../examples/select/basic.vue'
+import SelectSize from '../examples/select/size.vue'
+import SelectDisabled from '../examples/select/disabled.vue'
+import SelectClearable from '../examples/select/clearable.vue'
+import SelectMultiple from '../examples/select/multiple.vue'
+import SelectFilterable from '../examples/select/filterable.vue'
+import SelectGroup from '../examples/select/group.vue'
+import SelectIcon from '../examples/select/icon.vue'
+import selectApi from './meta/select'
+import selectBasicCode from '../examples/select/basic.vue?raw'
+import selectSizeCode from '../examples/select/size.vue?raw'
+import selectDisabledCode from '../examples/select/disabled.vue?raw'
+import selectClearableCode from '../examples/select/clearable.vue?raw'
+import selectMultipleCode from '../examples/select/multiple.vue?raw'
+import selectFilterableCode from '../examples/select/filterable.vue?raw'
+import selectGroupCode from '../examples/select/group.vue?raw'
+import selectIconCode from '../examples/select/icon.vue?raw'
+</script>

package/docs/components/slider-captcha.md

@@ -0,0 +1,41 @@
+# SliderCaptcha 滑块验证
+
+通过拖动滑块进行人机验证。
+
+## 基础用法
+
+最简单的滑块验证码使用方式。
+
+<Demo :source-code="sliderCaptchaBasicCode">
+  <template #source>
+    <slider-captcha-basic />
+  </template>
+  <template #description>
+    使用 v-model 绑定验证状态，可以通过 text 和 success-text 自定义提示文字。
+  </template>
+</Demo>
+
+## 自定义样式
+
+可以通过样式属性自定义滑块验证码的外观。
+
+<Demo :source-code="sliderCaptchaCustomCode">
+  <template #source>
+    <slider-captcha-custom />
+  </template>
+  <template #description>
+    通过 wrapper-style、bar-style、action-style 和 content-style 属性可以自定义组件各部分的样式。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="sliderCaptchaApi" componentName="slider-captcha" />
+
+<script setup>
+import SliderCaptchaBasic from '../examples/slider-captcha/basic.vue'
+import SliderCaptchaCustom from '../examples/slider-captcha/custom.vue'
+import sliderCaptchaApi from './meta/slider-captcha'
+import sliderCaptchaBasicCode from '../examples/slider-captcha/basic.vue?raw'
+import sliderCaptchaCustomCode from '../examples/slider-captcha/custom.vue?raw'
+</script>

package/docs/components/slider.md

@@ -0,0 +1,101 @@
+# Slider 滑块
+
+通过拖动滑块在一个固定区间内进行选择。
+
+## 基础用法
+
+在自定义间距内选择一个数值。
+
+<Demo :source-code="sliderBasicCode">
+  <template #source>
+    <slider-basic />
+  </template>
+  <template #description>
+    展示了基础用法、间断点、带有输入框以及范围选择。
+  </template>
+</Demo>
+
+## 禁用状态
+
+通过设置 `readonly` 属性禁用滑块。
+
+<Demo :source-code="sliderDisabledCode">
+  <template #source>
+    <slider-disabled />
+  </template>
+  <template #description>
+    禁用状态下滑块不可拖动。
+  </template>
+</Demo>
+
+## 自定义提示
+
+可以自定义提示信息的格式或隐藏提示。
+
+<Demo :source-code="sliderTooltipCode">
+  <template #source>
+    <slider-tooltip />
+  </template>
+  <template #description>
+    使用 `format-tooltip` 自定义提示内容，使用 `show-tooltip` 控制提示的显示。
+  </template>
+</Demo>
+
+## 垂直模式
+
+设置 `vertical` 属性为 true 可以启用垂直模式。
+
+<Demo :source-code="sliderVerticalCode">
+  <template #source>
+    <slider-vertical />
+  </template>
+  <template #description>
+    垂直模式下必须设置高度 `height` 属性。
+  </template>
+</Demo>
+
+## 显示标记
+
+使用 `marks` 属性标注关键节点。
+
+<Demo :source-code="sliderMarksCode">
+  <template #source>
+    <slider-marks />
+  </template>
+  <template #description>
+    通过 `marks` 对象可以在滑块上显示标记，key 为位置，value 为标记内容。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Slider 组件提供三种尺寸。
+
+<Demo :source-code="sliderSizeCode">
+  <template #source>
+    <slider-size />
+  </template>
+  <template #description>
+    通过 `size` 属性设置不同的尺寸：large、default、small。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="sliderApi" componentName="slider" />
+
+<script setup>
+import SliderBasic from '../examples/slider/basic.vue'
+import SliderDisabled from '../examples/slider/disabled.vue'
+import SliderTooltip from '../examples/slider/tooltip.vue'
+import SliderVertical from '../examples/slider/vertical.vue'
+import SliderMarks from '../examples/slider/marks.vue'
+import SliderSize from '../examples/slider/size.vue'
+import sliderApi from './meta/slider'
+import sliderBasicCode from '../examples/slider/basic.vue?raw'
+import sliderDisabledCode from '../examples/slider/disabled.vue?raw'
+import sliderTooltipCode from '../examples/slider/tooltip.vue?raw'
+import sliderVerticalCode from '../examples/slider/vertical.vue?raw'
+import sliderMarksCode from '../examples/slider/marks.vue?raw'
+import sliderSizeCode from '../examples/slider/size.vue?raw'
+</script>

package/docs/components/switch.md

@@ -0,0 +1,90 @@
+# Switch 开关
+
+在两种状态之间切换。
+
+## 基础用法
+
+绑定 v-model 到一个 Boolean 类型的变量。
+
+<Demo :source-code="basicCode">
+  <template #source>
+    <basic />
+  </template>
+  <template #description>
+    最基本的用法。
+  </template>
+</Demo>
+
+## 尺寸
+
+提供三种不同尺寸。
+
+<Demo :source-code="sizeCode">
+  <template #source>
+    <size />
+  </template>
+  <template #description>
+    通过 `size` 属性设置尺寸，可选值为 `large`、`default`、`small`。
+  </template>
+</Demo>
+
+## 文字描述
+
+你可以添加 `active-text` 和 `inactive-text` 属性来显示文字描述。
+
+<Demo :source-code="textCode">
+  <template #source>
+    <text />
+  </template>
+  <template #description>
+    使用 `active-text` 和 `inactive-text` 属性来显示开关状态的文字描述。
+  </template>
+</Demo>
+
+## 禁用状态
+
+设置 `disabled` 属性来禁用开关。
+
+<Demo :source-code="disabledCode">
+  <template #source>
+    <disabled />
+  </template>
+  <template #description>
+    使用 `disabled` 属性来设置开关为禁用状态。
+  </template>
+</Demo>
+
+## 加载状态
+
+设置 `loading` 属性来显示加载状态。
+
+<Demo :source-code="loadingCode">
+  <template #source>
+    <loading />
+  </template>
+  <template #description>
+    使用 `loading` 属性来显示开关的加载状态。
+  </template>
+</Demo>
+
+## API
+
+### 属性
+
+<ApiTable :data="switchApi" componentName="switch" />
+
+<script setup>
+import basicCode from '../examples/switch/basic.vue?raw'
+import sizeCode from '../examples/switch/size.vue?raw'
+import textCode from '../examples/switch/text.vue?raw'
+import disabledCode from '../examples/switch/disabled.vue?raw'
+import loadingCode from '../examples/switch/loading.vue?raw'
+
+import Basic from '../examples/switch/basic.vue'
+import Size from '../examples/switch/size.vue'
+import Text from '../examples/switch/text.vue'
+import Disabled from '../examples/switch/disabled.vue'
+import Loading from '../examples/switch/loading.vue'
+
+import switchApi from '../components/meta/switch'
+</script>