@a2simcode/ui 0.0.70 → 0.0.72

package/docs/components/select.md

@@ -1,133 +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>
+# 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

@@ -1,41 +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>
+# 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

@@ -1,101 +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>
+# 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>