@a2simcode/ui 0.0.187 → 0.0.188

package/docs/components/input-tag.md

@@ -1,50 +1,50 @@
-# InputTag 输入标签
-
-用于输入并以标签形式展示内容的组件。
-
-## 基础用法
-
-<Demo :source-code="inputTagBasicCode">
-  <template #source>
-    <input-tag-basic />
-  </template>
-  <template #description>
-    使用 `v-model` 绑定一个逗号分隔的字符串。输入内容后按回车即可添加标签。
-  </template>
-</Demo>
-
-## 只读状态
-
-<Demo :source-code="inputTagReadonlyCode">
-  <template #source>
-    <input-tag-readonly />
-  </template>
-  <template #description>
-    设置 `readonly` 属性使组件处于只读状态，此时无法添加或删除标签。
-  </template>
-</Demo>
-
-## 自定义颜色
-
-<Demo :source-code="inputTagColorsCode">
-  <template #source>
-    <input-tag-colors />
-  </template>
-  <template #description>
-    通过 `colors` 属性传入颜色对象数组，可以自定义标签的样式。默认会循环使用这些颜色。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="inputTagApi" componentName="input-tag" />
-
-<script setup>
-import InputTagBasic from '../examples/input-tag/basic.vue'
-import InputTagReadonly from '../examples/input-tag/readonly.vue'
-import InputTagColors from '../examples/input-tag/colors.vue'
-import inputTagApi from './meta/input-tag'
-import inputTagBasicCode from '../examples/input-tag/basic.vue?raw'
-import inputTagReadonlyCode from '../examples/input-tag/readonly.vue?raw'
-import inputTagColorsCode from '../examples/input-tag/colors.vue?raw'
-</script>
+# InputTag 输入标签
+
+用于输入并以标签形式展示内容的组件。
+
+## 基础用法
+
+<Demo :source-code="inputTagBasicCode">
+  <template #source>
+    <input-tag-basic />
+  </template>
+  <template #description>
+    使用 `v-model` 绑定一个逗号分隔的字符串。输入内容后按回车即可添加标签。
+  </template>
+</Demo>
+
+## 只读状态
+
+<Demo :source-code="inputTagReadonlyCode">
+  <template #source>
+    <input-tag-readonly />
+  </template>
+  <template #description>
+    设置 `readonly` 属性使组件处于只读状态，此时无法添加或删除标签。
+  </template>
+</Demo>
+
+## 自定义颜色
+
+<Demo :source-code="inputTagColorsCode">
+  <template #source>
+    <input-tag-colors />
+  </template>
+  <template #description>
+    通过 `colors` 属性传入颜色对象数组，可以自定义标签的样式。默认会循环使用这些颜色。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputTagApi" componentName="input-tag" />
+
+<script setup>
+import InputTagBasic from '../examples/input-tag/basic.vue'
+import InputTagReadonly from '../examples/input-tag/readonly.vue'
+import InputTagColors from '../examples/input-tag/colors.vue'
+import inputTagApi from './meta/input-tag'
+import inputTagBasicCode from '../examples/input-tag/basic.vue?raw'
+import inputTagReadonlyCode from '../examples/input-tag/readonly.vue?raw'
+import inputTagColorsCode from '../examples/input-tag/colors.vue?raw'
+</script>

package/docs/components/input.md

@@ -1,129 +1,129 @@
-# Input 输入框
-
-通过鼠标或键盘输入字符。
-
-## 基础用法
-
-<Demo :source-code="inputBasicCode">
-  <template #source>
-    <input-basic />
-  </template>
-  <template #description>
-    使用 v-model 实现双向数据绑定。
-  </template>
-</Demo>
-
-## 不同尺寸
-
-Input 组件提供三种尺寸。
-
-<Demo :source-code="inputSizeCode">
-  <template #source>
-    <input-size />
-  </template>
-  <template #description>
-    使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
-  </template>
-</Demo>
-
-## 禁用和只读
-
-通过 `disabled` 和 `readonly` 属性指定输入框的状态。
-
-<Demo :source-code="inputDisabledCode">
-  <template #source>
-    <input-disabled />
-  </template>
-  <template #description>
-    通过 disabled 属性指定是否禁用 input 组件,通过 readonly 属性指定是否只读。
-  </template>
-</Demo>
-
-## 可清除
-
-使用 `clearable` 属性即可得到一个可清除的输入框。
-
-<Demo :source-code="inputClearableCode">
-  <template #source>
-    <input-clearable />
-  </template>
-  <template #description>
-    设置 `clearable` 属性为 `true` 即可显示清除按钮。
-  </template>
-</Demo>
-
-## 密码框
-
-使用 `show-password` 属性即可得到一个可切换显示隐藏的密码框。
-
-<Demo :source-code="inputPasswordCode">
-  <template #source>
-    <input-password />
-  </template>
-  <template #description>
-    设置 `show-password` 属性为 `true` 即可显示密码切换图标。
-  </template>
-</Demo>
-
-## 字数统计
-
-设置 `show-word-limit` 属性来展示字数统计。
-
-<Demo :source-code="inputWordLimitCode">
-  <template #source>
-    <input-word-limit />
-  </template>
-  <template #description>
-    使用 `maxlength` 和 `show-word-limit` 属性来限制输入字数。通过 `word-limit-position` 可以设置字数统计的位置。
-  </template>
-</Demo>
-
-## 文本域
-
-用于输入多行文本信息可缩放的输入框。添加 `type="textarea"` 属性即可将输入框转换为文本域。
-
-<Demo :source-code="inputTextareaCode">
-  <template #source>
-    <input-textarea />
-  </template>
-  <template #description>
-    通过 `rows` 控制文本域行数，或使用 `autosize` 属性设置自适应高度。
-  </template>
-</Demo>
-
-## 带图标的输入框
-
-可以通过 `prefix-icon` 和 `suffix-icon` 属性在输入框中显示图标。
-
-<Demo :source-code="inputIconCode">
-  <template #source>
-    <input-icon />
-  </template>
-  <template #description>
-    使用 `prefix-icon` 设置前缀图标，使用 `suffix-icon` 设置后缀图标。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="inputApi" componentName="input" />
-
-<script setup>
-import InputBasic from '../examples/input/basic.vue'
-import InputSize from '../examples/input/size.vue'
-import InputDisabled from '../examples/input/disabled.vue'
-import InputClearable from '../examples/input/clearable.vue'
-import InputPassword from '../examples/input/password.vue'
-import InputWordLimit from '../examples/input/word-limit.vue'
-import InputTextarea from '../examples/input/textarea.vue'
-import InputIcon from '../examples/input/icon.vue'
-import inputApi from './meta/input'
-import inputBasicCode from '../examples/input/basic.vue?raw'
-import inputSizeCode from '../examples/input/size.vue?raw'
-import inputDisabledCode from '../examples/input/disabled.vue?raw'
-import inputClearableCode from '../examples/input/clearable.vue?raw'
-import inputPasswordCode from '../examples/input/password.vue?raw'
-import inputWordLimitCode from '../examples/input/word-limit.vue?raw'
-import inputTextareaCode from '../examples/input/textarea.vue?raw'
-import inputIconCode from '../examples/input/icon.vue?raw'
-</script>
+# Input 输入框
+
+通过鼠标或键盘输入字符。
+
+## 基础用法
+
+<Demo :source-code="inputBasicCode">
+  <template #source>
+    <input-basic />
+  </template>
+  <template #description>
+    使用 v-model 实现双向数据绑定。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Input 组件提供三种尺寸。
+
+<Demo :source-code="inputSizeCode">
+  <template #source>
+    <input-size />
+  </template>
+  <template #description>
+    使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
+  </template>
+</Demo>
+
+## 禁用和只读
+
+通过 `disabled` 和 `readonly` 属性指定输入框的状态。
+
+<Demo :source-code="inputDisabledCode">
+  <template #source>
+    <input-disabled />
+  </template>
+  <template #description>
+    通过 disabled 属性指定是否禁用 input 组件,通过 readonly 属性指定是否只读。
+  </template>
+</Demo>
+
+## 可清除
+
+使用 `clearable` 属性即可得到一个可清除的输入框。
+
+<Demo :source-code="inputClearableCode">
+  <template #source>
+    <input-clearable />
+  </template>
+  <template #description>
+    设置 `clearable` 属性为 `true` 即可显示清除按钮。
+  </template>
+</Demo>
+
+## 密码框
+
+使用 `show-password` 属性即可得到一个可切换显示隐藏的密码框。
+
+<Demo :source-code="inputPasswordCode">
+  <template #source>
+    <input-password />
+  </template>
+  <template #description>
+    设置 `show-password` 属性为 `true` 即可显示密码切换图标。
+  </template>
+</Demo>
+
+## 字数统计
+
+设置 `show-word-limit` 属性来展示字数统计。
+
+<Demo :source-code="inputWordLimitCode">
+  <template #source>
+    <input-word-limit />
+  </template>
+  <template #description>
+    使用 `maxlength` 和 `show-word-limit` 属性来限制输入字数。通过 `word-limit-position` 可以设置字数统计的位置。
+  </template>
+</Demo>
+
+## 文本域
+
+用于输入多行文本信息可缩放的输入框。添加 `type="textarea"` 属性即可将输入框转换为文本域。
+
+<Demo :source-code="inputTextareaCode">
+  <template #source>
+    <input-textarea />
+  </template>
+  <template #description>
+    通过 `rows` 控制文本域行数，或使用 `autosize` 属性设置自适应高度。
+  </template>
+</Demo>
+
+## 带图标的输入框
+
+可以通过 `prefix-icon` 和 `suffix-icon` 属性在输入框中显示图标。
+
+<Demo :source-code="inputIconCode">
+  <template #source>
+    <input-icon />
+  </template>
+  <template #description>
+    使用 `prefix-icon` 设置前缀图标，使用 `suffix-icon` 设置后缀图标。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputApi" componentName="input" />
+
+<script setup>
+import InputBasic from '../examples/input/basic.vue'
+import InputSize from '../examples/input/size.vue'
+import InputDisabled from '../examples/input/disabled.vue'
+import InputClearable from '../examples/input/clearable.vue'
+import InputPassword from '../examples/input/password.vue'
+import InputWordLimit from '../examples/input/word-limit.vue'
+import InputTextarea from '../examples/input/textarea.vue'
+import InputIcon from '../examples/input/icon.vue'
+import inputApi from './meta/input'
+import inputBasicCode from '../examples/input/basic.vue?raw'
+import inputSizeCode from '../examples/input/size.vue?raw'
+import inputDisabledCode from '../examples/input/disabled.vue?raw'
+import inputClearableCode from '../examples/input/clearable.vue?raw'
+import inputPasswordCode from '../examples/input/password.vue?raw'
+import inputWordLimitCode from '../examples/input/word-limit.vue?raw'
+import inputTextareaCode from '../examples/input/textarea.vue?raw'
+import inputIconCode from '../examples/input/icon.vue?raw'
+</script>

package/docs/components/layer-form.md

@@ -1,61 +1,61 @@
-# LayerForm 弹窗表单
-
-通过点击按钮打开一个弹窗，在弹窗中通过 JSON Schema 配置渲染表单。
-
-::: warning 重要提示
-`j-layer-form` 组件不是单独使用的，需要结合 `j-form` 组件使用。`j-layer-form` 应该作为 `j-form` 的 `schema` 配置中的一项，通过 `type: 'j-layer-form'` 来指定。`j-layer-form` 依赖 `j-form` 提供的表单上下文（通过 `useFormInject` 获取），用于获取表单配置信息如 `labelWidth`、`labelPosition` 等。
-:::
-
-## 基础用法
-
-`j-layer-form` 需要作为 `j-form` 的 `schema` 配置中的一项使用。弹窗内的表单字段通过 `children` 配置。
-
-<Demo :source-code="layerFormBasicCode">
-  <template #source>
-    <layer-form-basic />
-  </template>
-  <template #description>
-    在 `j-form` 的 `schema` 中配置 `type: 'j-layer-form'`，弹窗内的表单字段通过 `children` 配置。`j-layer-form` 会自动继承 `j-form` 的表单配置（如 `labelWidth`、`labelPosition` 等），点击按钮打开弹窗进行表单填写。
-  </template>
-</Demo>
-
-## 自定义弹窗尺寸
-
-通过 `layerWidth` 和 `layerHeight` 属性自定义弹窗的宽度和高度。
-
-<Demo :source-code="layerFormSizeCode">
-  <template #source>
-    <layer-form-size />
-  </template>
-  <template #description>
-    在 `j-layer-form` 的 `config` 中设置 `layerWidth` 和 `layerHeight` 属性可以自定义弹窗的尺寸。
-  </template>
-</Demo>
-
-## 表单配置
-
-通过 `formConfig` 属性配置表单的布局、标签位置、大小等。`j-layer-form` 的 `formConfig` 会覆盖 `j-form` 的配置。
-
-<Demo :source-code="layerFormConfigCode">
-  <template #source>
-    <layer-form-config />
-  </template>
-  <template #description>
-    在 `j-layer-form` 的 `config` 中通过 `formConfig` 可以配置表单的 `labelWidth`、`labelPosition`、`size`、`gutter`、`span` 等属性。如果 `j-layer-form` 的 `formConfig` 中未指定某些属性，会自动继承 `j-form` 的配置。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="layerFormApi" componentName="layer-form" />
-
-<script setup>
-import LayerFormBasic from '../examples/layer-form/basic.vue'
-import LayerFormSize from '../examples/layer-form/size.vue'
-import LayerFormConfig from '../examples/layer-form/config.vue'
-import layerFormApi from './meta/layer-form'
-
-import layerFormBasicCode from '../examples/layer-form/basic.vue?raw'
-import layerFormSizeCode from '../examples/layer-form/size.vue?raw'
-import layerFormConfigCode from '../examples/layer-form/config.vue?raw'
-</script>
+# LayerForm 弹窗表单
+
+通过点击按钮打开一个弹窗，在弹窗中通过 JSON Schema 配置渲染表单。
+
+::: warning 重要提示
+`j-layer-form` 组件不是单独使用的，需要结合 `j-form` 组件使用。`j-layer-form` 应该作为 `j-form` 的 `schema` 配置中的一项，通过 `type: 'j-layer-form'` 来指定。`j-layer-form` 依赖 `j-form` 提供的表单上下文（通过 `useFormInject` 获取），用于获取表单配置信息如 `labelWidth`、`labelPosition` 等。
+:::
+
+## 基础用法
+
+`j-layer-form` 需要作为 `j-form` 的 `schema` 配置中的一项使用。弹窗内的表单字段通过 `children` 配置。
+
+<Demo :source-code="layerFormBasicCode">
+  <template #source>
+    <layer-form-basic />
+  </template>
+  <template #description>
+    在 `j-form` 的 `schema` 中配置 `type: 'j-layer-form'`，弹窗内的表单字段通过 `children` 配置。`j-layer-form` 会自动继承 `j-form` 的表单配置（如 `labelWidth`、`labelPosition` 等），点击按钮打开弹窗进行表单填写。
+  </template>
+</Demo>
+
+## 自定义弹窗尺寸
+
+通过 `layerWidth` 和 `layerHeight` 属性自定义弹窗的宽度和高度。
+
+<Demo :source-code="layerFormSizeCode">
+  <template #source>
+    <layer-form-size />
+  </template>
+  <template #description>
+    在 `j-layer-form` 的 `config` 中设置 `layerWidth` 和 `layerHeight` 属性可以自定义弹窗的尺寸。
+  </template>
+</Demo>
+
+## 表单配置
+
+通过 `formConfig` 属性配置表单的布局、标签位置、大小等。`j-layer-form` 的 `formConfig` 会覆盖 `j-form` 的配置。
+
+<Demo :source-code="layerFormConfigCode">
+  <template #source>
+    <layer-form-config />
+  </template>
+  <template #description>
+    在 `j-layer-form` 的 `config` 中通过 `formConfig` 可以配置表单的 `labelWidth`、`labelPosition`、`size`、`gutter`、`span` 等属性。如果 `j-layer-form` 的 `formConfig` 中未指定某些属性，会自动继承 `j-form` 的配置。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="layerFormApi" componentName="layer-form" />
+
+<script setup>
+import LayerFormBasic from '../examples/layer-form/basic.vue'
+import LayerFormSize from '../examples/layer-form/size.vue'
+import LayerFormConfig from '../examples/layer-form/config.vue'
+import layerFormApi from './meta/layer-form'
+
+import layerFormBasicCode from '../examples/layer-form/basic.vue?raw'
+import layerFormSizeCode from '../examples/layer-form/size.vue?raw'
+import layerFormConfigCode from '../examples/layer-form/config.vue?raw'
+</script>