@a2simcode/ui 0.0.305 → 0.0.307

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>

package/docs/components/rate.md

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

@@ -1,133 +1,149 @@
-# 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>
+
+## 带颜色
+
+选项可以设置背景颜色和文字颜色。
+
+<Demo :source-code="selectColorCode">
+  <template #source>
+    <select-color />
+  </template>
+  <template #description>
+    在选项数据中添加 `color` 属性设置背景颜色，添加 `textColor` 属性设置文字颜色；
+    未设置 `textColor` 时会根据背景色自动计算合适的文字颜色。选中后输入框内的标签同样显示对应颜色。
+  </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 SelectColor from '../examples/select/color.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'
+import selectColorCode from '../examples/select/color.vue?raw'
+</script>