@a2simcode/ui 0.0.318 → 0.0.320

package/docs/components/input-color.md

@@ -1,114 +1,114 @@
-# InputColor 颜色选择器
-
-用于颜色选择，支持多种颜色格式。
-
-## 基础用法
-
-<Demo :source-code="inputColorBasicCode">
-  <template #source>
-    <input-color-basic />
-  </template>
-  <template #description>
-    使用 v-model 实现双向数据绑定。
-  </template>
-</Demo>
-
-## 不同尺寸
-
-InputColor 组件提供三种尺寸。
-
-<Demo :source-code="inputColorSizeCode">
-  <template #source>
-    <input-color-size />
-  </template>
-  <template #description>
-    使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
-  </template>
-</Demo>
-
-## 禁用和只读
-
-通过 `disabled` 和 `readonly` 属性指定输入框的状态。
-
-<Demo :source-code="inputColorDisabledCode">
-  <template #source>
-    <input-color-disabled />
-  </template>
-  <template #description>
-    通过 disabled 属性指定是否禁用 input-color 组件,通过 readonly 属性指定是否只读。
-  </template>
-</Demo>
-
-## 仅显示按钮
-
-使用 `only-button` 属性可以只显示颜色选择器按钮，隐藏输入框。
-
-<Demo :source-code="inputColorOnlyButtonCode">
-  <template #source>
-    <input-color-only-button />
-  </template>
-  <template #description>
-    设置 `only-button` 属性为 `true` 即可只显示颜色选择器按钮。
-  </template>
-</Demo>
-
-## 预定义颜色
-
-使用 `predefine-colors` 属性可以设置预定义的颜色选项。
-
-<Demo :source-code="inputColorPredefineCode">
-  <template #source>
-    <input-color-predefine />
-  </template>
-  <template #description>
-    通过 `predefine-colors` 属性设置预定义的颜色数组，支持多种颜色格式。
-  </template>
-</Demo>
-
-## 透明度支持
-
-使用 `show-alpha` 属性控制是否支持透明度选择。
-
-<Demo :source-code="inputColorNoAlphaCode">
-  <template #source>
-    <input-color-no-alpha />
-  </template>
-  <template #description>
-    设置 `show-alpha` 属性为 `true` 或 `false` 来控制是否支持透明度选择。
-  </template>
-</Demo>
-
-## 颜色格式
-
-使用 `color-format` 属性可以设置写入 v-model 的颜色的格式。
-
-<Demo :source-code="inputColorFormatCode">
-  <template #source>
-    <input-color-format />
-  </template>
-  <template #description>
-    通过 `color-format` 属性设置颜色格式，支持 hex、rgb、hsl、hsv 四种格式。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="inputColorApi" componentName="input-color" />
-
-<script setup>
-import InputColorBasic from '../examples/input-color/basic.vue'
-import InputColorSize from '../examples/input-color/size.vue'
-import InputColorDisabled from '../examples/input-color/disabled.vue'
-import InputColorOnlyButton from '../examples/input-color/only-button.vue'
-import InputColorPredefine from '../examples/input-color/predefine.vue'
-import InputColorNoAlpha from '../examples/input-color/no-alpha.vue'
-import InputColorFormat from '../examples/input-color/format.vue'
-import inputColorApi from './meta/input-color'
-import inputColorBasicCode from '../examples/input-color/basic.vue?raw'
-import inputColorSizeCode from '../examples/input-color/size.vue?raw'
-import inputColorDisabledCode from '../examples/input-color/disabled.vue?raw'
-import inputColorOnlyButtonCode from '../examples/input-color/only-button.vue?raw'
-import inputColorPredefineCode from '../examples/input-color/predefine.vue?raw'
-import inputColorNoAlphaCode from '../examples/input-color/no-alpha.vue?raw'
-import inputColorFormatCode from '../examples/input-color/format.vue?raw'
-</script>
+# InputColor 颜色选择器
+
+用于颜色选择，支持多种颜色格式。
+
+## 基础用法
+
+<Demo :source-code="inputColorBasicCode">
+  <template #source>
+    <input-color-basic />
+  </template>
+  <template #description>
+    使用 v-model 实现双向数据绑定。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+InputColor 组件提供三种尺寸。
+
+<Demo :source-code="inputColorSizeCode">
+  <template #source>
+    <input-color-size />
+  </template>
+  <template #description>
+    使用 size 属性改变输入框大小。除了默认大小外,还有另外两个选项: large, small。
+  </template>
+</Demo>
+
+## 禁用和只读
+
+通过 `disabled` 和 `readonly` 属性指定输入框的状态。
+
+<Demo :source-code="inputColorDisabledCode">
+  <template #source>
+    <input-color-disabled />
+  </template>
+  <template #description>
+    通过 disabled 属性指定是否禁用 input-color 组件,通过 readonly 属性指定是否只读。
+  </template>
+</Demo>
+
+## 仅显示按钮
+
+使用 `only-button` 属性可以只显示颜色选择器按钮，隐藏输入框。
+
+<Demo :source-code="inputColorOnlyButtonCode">
+  <template #source>
+    <input-color-only-button />
+  </template>
+  <template #description>
+    设置 `only-button` 属性为 `true` 即可只显示颜色选择器按钮。
+  </template>
+</Demo>
+
+## 预定义颜色
+
+使用 `predefine-colors` 属性可以设置预定义的颜色选项。
+
+<Demo :source-code="inputColorPredefineCode">
+  <template #source>
+    <input-color-predefine />
+  </template>
+  <template #description>
+    通过 `predefine-colors` 属性设置预定义的颜色数组，支持多种颜色格式。
+  </template>
+</Demo>
+
+## 透明度支持
+
+使用 `show-alpha` 属性控制是否支持透明度选择。
+
+<Demo :source-code="inputColorNoAlphaCode">
+  <template #source>
+    <input-color-no-alpha />
+  </template>
+  <template #description>
+    设置 `show-alpha` 属性为 `true` 或 `false` 来控制是否支持透明度选择。
+  </template>
+</Demo>
+
+## 颜色格式
+
+使用 `color-format` 属性可以设置写入 v-model 的颜色的格式。
+
+<Demo :source-code="inputColorFormatCode">
+  <template #source>
+    <input-color-format />
+  </template>
+  <template #description>
+    通过 `color-format` 属性设置颜色格式，支持 hex、rgb、hsl、hsv 四种格式。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputColorApi" componentName="input-color" />
+
+<script setup>
+import InputColorBasic from '../examples/input-color/basic.vue'
+import InputColorSize from '../examples/input-color/size.vue'
+import InputColorDisabled from '../examples/input-color/disabled.vue'
+import InputColorOnlyButton from '../examples/input-color/only-button.vue'
+import InputColorPredefine from '../examples/input-color/predefine.vue'
+import InputColorNoAlpha from '../examples/input-color/no-alpha.vue'
+import InputColorFormat from '../examples/input-color/format.vue'
+import inputColorApi from './meta/input-color'
+import inputColorBasicCode from '../examples/input-color/basic.vue?raw'
+import inputColorSizeCode from '../examples/input-color/size.vue?raw'
+import inputColorDisabledCode from '../examples/input-color/disabled.vue?raw'
+import inputColorOnlyButtonCode from '../examples/input-color/only-button.vue?raw'
+import inputColorPredefineCode from '../examples/input-color/predefine.vue?raw'
+import inputColorNoAlphaCode from '../examples/input-color/no-alpha.vue?raw'
+import inputColorFormatCode from '../examples/input-color/format.vue?raw'
+</script>

package/docs/components/input-layer.md

@@ -1,56 +1,56 @@
-# InputLayer 弹窗选择
-
-带有弹窗选择功能的输入框组件。
-
-## 基础用法
-
-基础的弹窗选择用法。
-
-<Demo :source-code="inputLayerBasicCode">
-  <template #source>
-    <input-layer-basic />
-  </template>
-  <template #description>
-    使用 `load-layer-data` 属性配置数据加载方法，`columns` 配置表格列。
-  </template>
-</Demo>
-
-## 自定义渲染
-
-通过 `render-v-node` 透传到底层 `j-table-panel`，可以用 VNode 自定义每条记录的展示方式（例如卡片列表）。示例中点击卡片会设置选中项，点击“确定”后回填到输入框。
-
-<Demo :source-code="inputLayerRenderVNodeCode">
-  <template #source>
-    <input-layer-render-vnode />
-  </template>
-  <template #description>
-    `render-v-node` 接收当前行数据并返回 VNode；点击卡片设置选中项后，InputLayer 会从表格面板的选中项回填值与文本。
-  </template>
-</Demo>
-
-## 分页（自定义渲染）
-
-`render-v-node` 模式下开启分页（`is-page`），配合 `load-layer-data` 返回分页结构数据（`{ rows, records }`）。示例里通过卡片点击实现多选，最后点“确定”回填到输入框。
-
-<Demo :source-code="inputLayerRenderVNodePageCode">
-  <template #source>
-    <input-layer-render-vnode-page />
-  </template>
-  <template #description>
-    `load-layer-data(params)` 在 `params.pagination` 中拿到 `page/rows`，返回 `{ rows, records }` 给表格面板分页使用。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="inputLayerApi" componentName="input-layer" />
-
-<script setup>
-import InputLayerBasic from '../examples/input-layer/basic.vue'
-import InputLayerRenderVnode from '../examples/input-layer/render-vnode.vue'
-import InputLayerRenderVnodePage from '../examples/input-layer/render-vnode-page.vue'
-import inputLayerBasicCode from '../examples/input-layer/basic.vue?raw'
-import inputLayerRenderVNodeCode from '../examples/input-layer/render-vnode.vue?raw'
-import inputLayerRenderVNodePageCode from '../examples/input-layer/render-vnode-page.vue?raw'
-import inputLayerApi from './meta/input-layer'
-</script>
+# InputLayer 弹窗选择
+
+带有弹窗选择功能的输入框组件。
+
+## 基础用法
+
+基础的弹窗选择用法。
+
+<Demo :source-code="inputLayerBasicCode">
+  <template #source>
+    <input-layer-basic />
+  </template>
+  <template #description>
+    使用 `load-layer-data` 属性配置数据加载方法，`columns` 配置表格列。
+  </template>
+</Demo>
+
+## 自定义渲染
+
+通过 `render-v-node` 透传到底层 `j-table-panel`，可以用 VNode 自定义每条记录的展示方式（例如卡片列表）。示例中点击卡片会设置选中项，点击“确定”后回填到输入框。
+
+<Demo :source-code="inputLayerRenderVNodeCode">
+  <template #source>
+    <input-layer-render-vnode />
+  </template>
+  <template #description>
+    `render-v-node` 接收当前行数据并返回 VNode；点击卡片设置选中项后，InputLayer 会从表格面板的选中项回填值与文本。
+  </template>
+</Demo>
+
+## 分页（自定义渲染）
+
+`render-v-node` 模式下开启分页（`is-page`），配合 `load-layer-data` 返回分页结构数据（`{ rows, records }`）。示例里通过卡片点击实现多选，最后点“确定”回填到输入框。
+
+<Demo :source-code="inputLayerRenderVNodePageCode">
+  <template #source>
+    <input-layer-render-vnode-page />
+  </template>
+  <template #description>
+    `load-layer-data(params)` 在 `params.pagination` 中拿到 `page/rows`，返回 `{ rows, records }` 给表格面板分页使用。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputLayerApi" componentName="input-layer" />
+
+<script setup>
+import InputLayerBasic from '../examples/input-layer/basic.vue'
+import InputLayerRenderVnode from '../examples/input-layer/render-vnode.vue'
+import InputLayerRenderVnodePage from '../examples/input-layer/render-vnode-page.vue'
+import inputLayerBasicCode from '../examples/input-layer/basic.vue?raw'
+import inputLayerRenderVNodeCode from '../examples/input-layer/render-vnode.vue?raw'
+import inputLayerRenderVNodePageCode from '../examples/input-layer/render-vnode-page.vue?raw'
+import inputLayerApi from './meta/input-layer'
+</script>