@a2simcode/ui 0.0.179 → 0.0.181

package/docs/components/hpanel.md

@@ -1,24 +1,24 @@
-# Hpanel 水平布局
-
-用于水平排列内容的面板，支持左、中（主内容）、右三个区域。
-
-## 基础用法
-
-<Demo :source-code="hpanelBasicCode">
-  <template #source>
-    <hpanel-basic />
-  </template>
-  <template #description>
-    使用 `left`、`default` 和 `right` 插槽来定义面板的不同部分。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="hpanelApi" componentName="hpanel" />
-
-<script setup>
-import HpanelBasic from '../examples/hpanel/basic.vue'
-import hpanelApi from './meta/hpanel'
-import hpanelBasicCode from '../examples/hpanel/basic.vue?raw'
-</script>
+# Hpanel 水平布局
+
+用于水平排列内容的面板，支持左、中（主内容）、右三个区域。
+
+## 基础用法
+
+<Demo :source-code="hpanelBasicCode">
+  <template #source>
+    <hpanel-basic />
+  </template>
+  <template #description>
+    使用 `left`、`default` 和 `right` 插槽来定义面板的不同部分。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="hpanelApi" componentName="hpanel" />
+
+<script setup>
+import HpanelBasic from '../examples/hpanel/basic.vue'
+import hpanelApi from './meta/hpanel'
+import hpanelBasicCode from '../examples/hpanel/basic.vue?raw'
+</script>

package/docs/components/icon.md

@@ -1,56 +1,56 @@
-# Icon 图标
-
-语义化的矢量图形。使用了 [@iconify/vue](https://iconify.design/docs/icon-components/vue/)。
-
-## 基础用法
-
-通过 `icon` 属性来指定图标名称。你可以从 [Iconify](https://icon-sets.iconify.design/) 搜索成千上万个图标。
-
-<Demo :source-code="iconBasicCode">
-  <template #source>
-    <icon-basic />
-  </template>
-  <template #description>
-    使用 icon、color 来定义图标和颜色。
-  </template>
-</Demo>
-
-## 不同尺寸
-
-使用 `size` 属性来配置图标尺寸。
-
-<Demo :source-code="iconSizeCode">
-  <template #source>
-    <icon-size />
-  </template>
-  <template #description>
-    size 接受数字(单位为px)。
-  </template>
-</Demo>
-
-## 旋转与翻转
-
-使用 `rotate` 和 `flip` 属性来调整图标方向。
-
-<Demo :source-code="iconRotateFlipCode">
-  <template #source>
-    <icon-rotate-flip />
-  </template>
-  <template #description>
-    使用 rotate 定义角度,使用 flip 定义翻转方向。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="iconApi" componentName="icon" />
-
-<script setup>
-import IconBasic from '../examples/icon/basic.vue'
-import IconSize from '../examples/icon/size.vue'
-import IconRotateFlip from '../examples/icon/rotate-flip.vue'
-import iconApi from './meta/icon'
-import iconBasicCode from '../examples/icon/basic.vue?raw'
-import iconSizeCode from '../examples/icon/size.vue?raw'
-import iconRotateFlipCode from '../examples/icon/rotate-flip.vue?raw'
-</script>
+# Icon 图标
+
+语义化的矢量图形。使用了 [@iconify/vue](https://iconify.design/docs/icon-components/vue/)。
+
+## 基础用法
+
+通过 `icon` 属性来指定图标名称。你可以从 [Iconify](https://icon-sets.iconify.design/) 搜索成千上万个图标。
+
+<Demo :source-code="iconBasicCode">
+  <template #source>
+    <icon-basic />
+  </template>
+  <template #description>
+    使用 icon、color 来定义图标和颜色。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+使用 `size` 属性来配置图标尺寸。
+
+<Demo :source-code="iconSizeCode">
+  <template #source>
+    <icon-size />
+  </template>
+  <template #description>
+    size 接受数字(单位为px)。
+  </template>
+</Demo>
+
+## 旋转与翻转
+
+使用 `rotate` 和 `flip` 属性来调整图标方向。
+
+<Demo :source-code="iconRotateFlipCode">
+  <template #source>
+    <icon-rotate-flip />
+  </template>
+  <template #description>
+    使用 rotate 定义角度,使用 flip 定义翻转方向。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="iconApi" componentName="icon" />
+
+<script setup>
+import IconBasic from '../examples/icon/basic.vue'
+import IconSize from '../examples/icon/size.vue'
+import IconRotateFlip from '../examples/icon/rotate-flip.vue'
+import iconApi from './meta/icon'
+import iconBasicCode from '../examples/icon/basic.vue?raw'
+import iconSizeCode from '../examples/icon/size.vue?raw'
+import iconRotateFlipCode from '../examples/icon/rotate-flip.vue?raw'
+</script>

package/docs/components/input-button.md

@@ -1,24 +1,24 @@
-# InputButton 输入按钮
-
-通过点击按钮打开一个弹窗层，用于输入或选择复杂的数据。
-
-## 基础用法
-
-<Demo :source-code="inputButtonBasicCode">
-  <template #source>
-    <input-button-basic />
-  </template>
-  <template #description>
-    点击按钮打开弹窗，在弹窗中完成输入后点击确定。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="inputButtonApi" componentName="input-button" />
-
-<script setup>
-import InputButtonBasic from '../examples/input-button/basic.vue'
-import inputButtonApi from './meta/input-button'
-import inputButtonBasicCode from '../examples/input-button/basic.vue?raw'
-</script>
+# InputButton 输入按钮
+
+通过点击按钮打开一个弹窗层，用于输入或选择复杂的数据。
+
+## 基础用法
+
+<Demo :source-code="inputButtonBasicCode">
+  <template #source>
+    <input-button-basic />
+  </template>
+  <template #description>
+    点击按钮打开弹窗，在弹窗中完成输入后点击确定。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputButtonApi" componentName="input-button" />
+
+<script setup>
+import InputButtonBasic from '../examples/input-button/basic.vue'
+import inputButtonApi from './meta/input-button'
+import inputButtonBasicCode from '../examples/input-button/basic.vue?raw'
+</script>

package/docs/components/input-code.md

@@ -1,24 +1,24 @@
-# InputCode 脚本输入框
-
-通过点击按钮打开一个集成了脚本编辑器的弹窗，用于编写代码或脚本内容。
-
-## 基础用法
-
-<Demo :source-code="inputCodeBasicCode">
-  <template #source>
-    <input-code-basic />
-  </template>
-  <template #description>
-    点击按钮打开代码编辑器，支持多种语言模式和示例代码对比。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="inputCodeApi" componentName="input-code" />
-
-<script setup>
-import InputCodeBasic from '../examples/input-code/basic.vue'
-import inputCodeApi from './meta/input-code'
-import inputCodeBasicCode from '../examples/input-code/basic.vue?raw'
-</script>
+# InputCode 脚本输入框
+
+通过点击按钮打开一个集成了脚本编辑器的弹窗，用于编写代码或脚本内容。
+
+## 基础用法
+
+<Demo :source-code="inputCodeBasicCode">
+  <template #source>
+    <input-code-basic />
+  </template>
+  <template #description>
+    点击按钮打开代码编辑器，支持多种语言模式和示例代码对比。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="inputCodeApi" componentName="input-code" />
+
+<script setup>
+import InputCodeBasic from '../examples/input-code/basic.vue'
+import inputCodeApi from './meta/input-code'
+import inputCodeBasicCode from '../examples/input-code/basic.vue?raw'
+</script>

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,26 +1,41 @@
-# InputLayer 弹窗选择
-
-带有弹窗选择功能的输入框组件。
-
-## 基础用法
-
-基础的弹窗选择用法。
-
-<Demo :source-code="inputLayerBasicCode">
-  <template #source>
-    <input-layer-basic />
-  </template>
-  <template #description>
-    使用 `load-layer-data` 属性配置数据加载方法，`columns` 配置表格列。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="inputLayerApi" componentName="input-layer" />
-
-<script setup>
-import InputLayerBasic from '../examples/input-layer/basic.vue'
-import inputLayerBasicCode from '../examples/input-layer/basic.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>
+
+## 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 inputLayerBasicCode from '../examples/input-layer/basic.vue?raw'
+import inputLayerRenderVNodeCode from '../examples/input-layer/render-vnode.vue?raw'
+import inputLayerApi from './meta/input-layer'
+</script>