@a2simcode/ui 0.0.55 → 0.0.57

package/docs/components/table.md

@@ -1,202 +1,218 @@
-# Table 表格
-
-基于字节 VTable 的高性能表格组件,用于展示大量结构化数据。
-
-## 基础用法
-
-基础的表格展示用法。
-
-<Demo :source-code="tableBasicCode">
-  <template #source>
-    <table-basic />
-  </template>
-  <template #description>
-    通过 `columns` 属性配置表格列,通过 `records` 属性设置表格数据。
-  </template>
-</Demo>
-
-## 冻结列
-
-通过 `columns` 中的 `config.frozen` 属性设置列的冻结方式，支持 `left`（左侧冻结）和 `right`（右侧冻结）。
-
-> 注意：在列组合（树形表头）中，如果子列设置了冻结属性，则包含该子列的整个父列组都会被冻结。
-
-<Demo :source-code="tableFrozenColumnCode">
-  <template #source>
-    <table-frozen-column />
-  </template>
-  <template #description>
-    设置 `frozen: 'left'` 或 `frozen: 'right'` 来冻结列。
-  </template>
-</Demo>
-
-## 高度模式
-
-通过 `heightMode` 属性控制表格高度模式，支持 `full` (充满父容器) 和 `auto` (内容自适应)。当设置为 `auto` 时，可通过 `maxHeight` 设置最大高度。
-
-<Demo :source-code="tableHeightModeCode">
-  <template #source>
-    <table-height-mode />
-  </template>
-  <template #description>
-    切换 `heightMode` 查看不同高度模式的效果。当 `heightMode` 为 `auto` 且设置了 `maxHeight` 时，超过最大高度会出现滚动条。
-  </template>
-</Demo>
-
-## 列组合
-
-通过在 `columns` 中嵌套 `children` 属性，可以实现多级表头（树形结构列配置）。
-
-<Demo :source-code="tableTreeColumnCode">
-  <template #source>
-    <table-tree-column />
-  </template>
-  <template #description>
-    在 `columns` 中嵌套 `children` 来声明分组。
-  </template>
-</Demo>
-
-## 树形展示
-
-通过 `isTree` 属性开启树形展示。
-
-<Demo :source-code="tableTreeDataCode">
-  <template #source>
-    <table-tree-data />
-  </template>
-  <template #description>
-    设置 `isTree` 为 `true` 开启树形展示，第一列会自动显示展开/折叠图标。
-  </template>
-</Demo>
-
-## 多选
-
-通过 `isMultiple` 属性开启多选。
-<Demo :source-code="tableMultipleCode">
-<template #source>
-<table-multiple />
-</template>
-<template #description>
-设置 `isMultiple` 为 `true` 开启多选，表格第一列会显示勾选框。
-</template>
-</Demo>
-
-## 单选获取选中行
-
-在非多选模式下，可以通过 `selectionChanged` 事件或 `getSelection` 方法获取当前选中的行数据。
-
-<Demo :source-code="tableSingleSelectionCode">
-  <template #source>
-    <table-single-selection />
-  </template>
-  <template #description>
-    默认情况下（`isMultiple` 为 `false`），点击表格行会触发 `selectionChanged` 事件。
-  </template>
-</Demo>
-
-## 字段控制选中状态
-
-通过 `selectField` 属性绑定选中状态字段。
-<Demo :source-code="tableFieldSelectionCode">
-<template #source>
-<table-field-selection />
-</template>
-<template #description>
-设置 `selectField` 属性，表格会根据数据中的该字段来渲染选中状态。
-</template>
-</Demo>
-
-## 分页
-
-通过 `isPage` 属性开启分页功能。
-
-<Demo :source-code="tablePaginationCode">
-  <template #source>
-    <table-pagination />
-  </template>
-  <template #description>
-    设置 `isPage` 为 `true` 开启分页，通过 `v-model:table-page` 和 `v-model:page-size` 绑定当前页码和每页显示数量，监听 `loadPageData` 事件来加载对应页的数据。
-  </template>
-</Demo>
-
-## 行内操作按钮
-
-通过 `actions` 属性配置行内操作按钮。
-
-<Demo :source-code="tableActionsCode">
-  <template #source>
-    <table-actions />
-  </template>
-  <template #description>
-    通过 `actions` 属性传入按钮配置数组，每个按钮需要配置 `id`（唯一标识）、`label`（显示文本）、`click`（点击回调函数）。可选配置 `color` 自定义按钮颜色。操作列宽度自动计算，默认最多显示3个按钮，超出部分收纳到"更多"下拉菜单中。可通过 `actionsMaxCount` 设置最大显示数量，`actionsLabel` 设置操作列标题。
-  </template>
-</Demo>
-
-## 单元格编辑
-
-通过在列配置中设置 `editor` 属性启用单元格编辑功能。
-
-<Demo :source-code="tableEditableCode">
-  <template #source>
-    <table-editable />
-  </template>
-  <template #description>
-    在列配置的 `config` 中设置 `editor: true` 启用编辑功能，点击单元格即可进入编辑模式。支持多种编辑器类型：
-    <ul>
-      <li><code>j-input</code> - 文本输入框</li>
-      <li><code>j-number</code> - 数字输入框</li>
-      <li><code>j-select</code> - 下拉选择器</li>
-      <li><code>j-radio</code> - 单选框</li>
-      <li><code>j-checkbox</code> - 复选框</li>
-      <li><code>j-switch</code> - 开关</li>
-      <li>以及其他 j-input 开头的输入组件</li>
-    </ul>
-    通过监听 <code>cell-change</code> 事件可以获取单元格值的变化。
-  </template>
-</Demo>
-
-## 添加数据
-
-通过 `editConfig` 属性配置 `isAddBtn` 为 `true` 来显示添加按钮。
-
-<Demo :source-code="tableAddRowCode">
-  <template #source>
-    <table-add-row />
-  </template>
-  <template #description>
-    设置 `editConfig` 的 `isAddBtn` 为 `true` 开启添加按钮，可通过 `addBtnText` 自定义按钮文本。点击添加按钮会触发 `add` 事件，并自动在表格中插入一行新数据（使用列配置中的 `defaultValue`）。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="tableApi" componentName="table" />
-
-<script setup>
-import TableBasic from '../examples/table/basic.vue'
-import TableFrozenColumn from '../examples/table/frozen-column.vue'
-import TableHeightMode from '../examples/table/height-mode.vue'
-import TableTreeColumn from '../examples/table/tree-column.vue'
-import TableTreeData from '../examples/table/tree-data.vue'
-import TableMultiple from '../examples/table/multiple.vue'
-import TableSingleSelection from '../examples/table/single-selection.vue'
-import TableFieldSelection from '../examples/table/field-selection.vue'
-import TablePagination from '../examples/table/pagination.vue'
-import TableActions from '../examples/table/actions.vue'
-import TableEditable from '../examples/table/editable.vue'
-import TableAddRow from '../examples/table/add-row.vue'
-import tableApi from './meta/table'
-
-import tableBasicCode from '../examples/table/basic.vue?raw'
-import tableFrozenColumnCode from '../examples/table/frozen-column.vue?raw'
-import tableHeightModeCode from '../examples/table/height-mode.vue?raw'
-import tableTreeColumnCode from '../examples/table/tree-column.vue?raw'
-import tableTreeDataCode from '../examples/table/tree-data.vue?raw'
-import tableMultipleCode from '../examples/table/multiple.vue?raw'
-import tableSingleSelectionCode from '../examples/table/single-selection.vue?raw'
-import tableFieldSelectionCode from '../examples/table/field-selection.vue?raw'
-import tablePaginationCode from '../examples/table/pagination.vue?raw'
-import tableActionsCode from '../examples/table/actions.vue?raw'
-import tableEditableCode from '../examples/table/editable.vue?raw'
-import tableAddRowCode from '../examples/table/add-row.vue?raw'
-</script>
+# Table 表格
+
+基于字节 VTable 的高性能表格组件,用于展示大量结构化数据。
+
+## 基础用法
+
+基础的表格展示用法。
+
+<Demo :source-code="tableBasicCode">
+  <template #source>
+    <table-basic />
+  </template>
+  <template #description>
+    通过 `columns` 属性配置表格列,通过 `records` 属性设置表格数据。
+  </template>
+</Demo>
+
+## Tag 标签
+
+通过列类型 `j-input-tag`（或 `j-tag`）配合 `getObjectList` 映射数据，渲染出类似“标签/胶囊”的效果。
+
+<Demo :source-code="tableTagCode">
+  <template #source>
+    <table-tag />
+  </template>
+  <template #description>
+    示例里通过注入 `jcode_app_provide` 提供 `getObjectList`，返回 `{ value,label,color }` 列表用于渲染。
+    其中 `color` 为背景色，设置 `color` 后会自动根据背景色亮度计算 `textColor`（黑/白），无需手动指定。
+  </template>
+</Demo>
+
+## 冻结列
+
+通过 `columns` 中的 `config.frozen` 属性设置列的冻结方式，支持 `left`（左侧冻结）和 `right`（右侧冻结）。
+
+> 注意：在列组合（树形表头）中，如果子列设置了冻结属性，则包含该子列的整个父列组都会被冻结。
+
+<Demo :source-code="tableFrozenColumnCode">
+  <template #source>
+    <table-frozen-column />
+  </template>
+  <template #description>
+    设置 `frozen: 'left'` 或 `frozen: 'right'` 来冻结列。
+  </template>
+</Demo>
+
+## 高度模式
+
+通过 `heightMode` 属性控制表格高度模式，支持 `full` (充满父容器) 和 `auto` (内容自适应)。当设置为 `auto` 时，可通过 `maxHeight` 设置最大高度。
+
+<Demo :source-code="tableHeightModeCode">
+  <template #source>
+    <table-height-mode />
+  </template>
+  <template #description>
+    切换 `heightMode` 查看不同高度模式的效果。当 `heightMode` 为 `auto` 且设置了 `maxHeight` 时，超过最大高度会出现滚动条。
+  </template>
+</Demo>
+
+## 列组合
+
+通过在 `columns` 中嵌套 `children` 属性，可以实现多级表头（树形结构列配置）。
+
+<Demo :source-code="tableTreeColumnCode">
+  <template #source>
+    <table-tree-column />
+  </template>
+  <template #description>
+    在 `columns` 中嵌套 `children` 来声明分组。
+  </template>
+</Demo>
+
+## 树形展示
+
+通过 `isTree` 属性开启树形展示。
+
+<Demo :source-code="tableTreeDataCode">
+  <template #source>
+    <table-tree-data />
+  </template>
+  <template #description>
+    设置 `isTree` 为 `true` 开启树形展示，第一列会自动显示展开/折叠图标。
+  </template>
+</Demo>
+
+## 多选
+
+通过 `isMultiple` 属性开启多选。
+<Demo :source-code="tableMultipleCode">
+<template #source>
+<table-multiple />
+</template>
+<template #description>
+设置 `isMultiple` 为 `true` 开启多选，表格第一列会显示勾选框。
+</template>
+</Demo>
+
+## 单选获取选中行
+
+在非多选模式下，可以通过 `selectionChanged` 事件或 `getSelection` 方法获取当前选中的行数据。
+
+<Demo :source-code="tableSingleSelectionCode">
+  <template #source>
+    <table-single-selection />
+  </template>
+  <template #description>
+    默认情况下（`isMultiple` 为 `false`），点击表格行会触发 `selectionChanged` 事件。
+  </template>
+</Demo>
+
+## 字段控制选中状态
+
+通过 `selectField` 属性绑定选中状态字段。
+<Demo :source-code="tableFieldSelectionCode">
+<template #source>
+<table-field-selection />
+</template>
+<template #description>
+设置 `selectField` 属性，表格会根据数据中的该字段来渲染选中状态。
+</template>
+</Demo>
+
+## 分页
+
+通过 `isPage` 属性开启分页功能。
+
+<Demo :source-code="tablePaginationCode">
+  <template #source>
+    <table-pagination />
+  </template>
+  <template #description>
+    设置 `isPage` 为 `true` 开启分页，通过 `v-model:table-page` 和 `v-model:page-size` 绑定当前页码和每页显示数量，监听 `loadPageData` 事件来加载对应页的数据。
+  </template>
+</Demo>
+
+## 行内操作按钮
+
+通过 `actions` 属性配置行内操作按钮。
+
+<Demo :source-code="tableActionsCode">
+  <template #source>
+    <table-actions />
+  </template>
+  <template #description>
+    通过 `actions` 属性传入按钮配置数组，每个按钮需要配置 `id`（唯一标识）、`label`（显示文本）、`click`（点击回调函数）。可选配置 `color` 自定义按钮颜色。操作列宽度自动计算，默认最多显示3个按钮，超出部分收纳到"更多"下拉菜单中。可通过 `actionsMaxCount` 设置最大显示数量，`actionsLabel` 设置操作列标题。
+  </template>
+</Demo>
+
+## 单元格编辑
+
+通过在列配置中设置 `editor` 属性启用单元格编辑功能。
+
+<Demo :source-code="tableEditableCode">
+  <template #source>
+    <table-editable />
+  </template>
+  <template #description>
+    在列配置的 `config` 中设置 `editor: true` 启用编辑功能，点击单元格即可进入编辑模式。支持多种编辑器类型：
+    <ul>
+      <li><code>j-input</code> - 文本输入框</li>
+      <li><code>j-number</code> - 数字输入框</li>
+      <li><code>j-select</code> - 下拉选择器</li>
+      <li><code>j-radio</code> - 单选框</li>
+      <li><code>j-checkbox</code> - 复选框</li>
+      <li><code>j-switch</code> - 开关</li>
+      <li>以及其他 j-input 开头的输入组件</li>
+    </ul>
+    通过监听 <code>cell-change</code> 事件可以获取单元格值的变化。
+  </template>
+</Demo>
+
+## 添加数据
+
+通过 `editConfig` 属性配置 `isAddBtn` 为 `true` 来显示添加按钮。
+
+<Demo :source-code="tableAddRowCode">
+  <template #source>
+    <table-add-row />
+  </template>
+  <template #description>
+    设置 `editConfig` 的 `isAddBtn` 为 `true` 开启添加按钮，可通过 `addBtnText` 自定义按钮文本。点击添加按钮会触发 `add` 事件，并自动在表格中插入一行新数据（使用列配置中的 `defaultValue`）。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="tableApi" componentName="table" />
+
+<script setup>
+import TableBasic from '../examples/table/basic.vue'
+import TableTag from '../examples/table/tag.vue'
+import TableFrozenColumn from '../examples/table/frozen-column.vue'
+import TableHeightMode from '../examples/table/height-mode.vue'
+import TableTreeColumn from '../examples/table/tree-column.vue'
+import TableTreeData from '../examples/table/tree-data.vue'
+import TableMultiple from '../examples/table/multiple.vue'
+import TableSingleSelection from '../examples/table/single-selection.vue'
+import TableFieldSelection from '../examples/table/field-selection.vue'
+import TablePagination from '../examples/table/pagination.vue'
+import TableActions from '../examples/table/actions.vue'
+import TableEditable from '../examples/table/editable.vue'
+import TableAddRow from '../examples/table/add-row.vue'
+import tableApi from './meta/table'
+
+import tableBasicCode from '../examples/table/basic.vue?raw'
+import tableTagCode from '../examples/table/tag.vue?raw'
+import tableFrozenColumnCode from '../examples/table/frozen-column.vue?raw'
+import tableHeightModeCode from '../examples/table/height-mode.vue?raw'
+import tableTreeColumnCode from '../examples/table/tree-column.vue?raw'
+import tableTreeDataCode from '../examples/table/tree-data.vue?raw'
+import tableMultipleCode from '../examples/table/multiple.vue?raw'
+import tableSingleSelectionCode from '../examples/table/single-selection.vue?raw'
+import tableFieldSelectionCode from '../examples/table/field-selection.vue?raw'
+import tablePaginationCode from '../examples/table/pagination.vue?raw'
+import tableActionsCode from '../examples/table/actions.vue?raw'
+import tableEditableCode from '../examples/table/editable.vue?raw'
+import tableAddRowCode from '../examples/table/add-row.vue?raw'
+</script>

package/docs/components/tabs.md

@@ -1,26 +1,26 @@
-# Tabs 标签页
-
-用于分隔内容上有关联但属于不同类别的数据集合。
-
-## 基础用法
-
-基础的、简洁的标签页。
-
-<Demo :source-code="tabsBasicCode">
-  <template #source>
-    <tabs-basic />
-  </template>
-  <template #description>
-    通过 `v-model` 绑定当前激活的标签页，使用 `el-tab-pane` 定义标签页内容。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="tabsApi" componentName="tabs" />
-
-<script setup>
-import TabsBasic from '../examples/tabs/basic.vue'
-import tabsApi from './meta/tabs'
-import tabsBasicCode from '../examples/tabs/basic.vue?raw'
-</script>
+# Tabs 标签页
+
+用于分隔内容上有关联但属于不同类别的数据集合。
+
+## 基础用法
+
+基础的、简洁的标签页。
+
+<Demo :source-code="tabsBasicCode">
+  <template #source>
+    <tabs-basic />
+  </template>
+  <template #description>
+    通过 `v-model` 绑定当前激活的标签页，使用 `el-tab-pane` 定义标签页内容。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="tabsApi" componentName="tabs" />
+
+<script setup>
+import TabsBasic from '../examples/tabs/basic.vue'
+import tabsApi from './meta/tabs'
+import tabsBasicCode from '../examples/tabs/basic.vue?raw'
+</script>

package/docs/components/title.md

@@ -1,24 +1,24 @@
-# Title 标题
-
-用于展示页面或区域的标题文本。支持自定义颜色、大小、粗细和样式等功能。
-
-## 基础用法
-
-<Demo :source-code="titleBasicCode">
-  <template #source>
-    <title-basic />
-  </template>
-  <template #description>
-    通过 `title` 属性设置标题内容，支持 `color`、`size`、`weight` 等属性自定义样式。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="titleApi" componentName="title" />
-
-<script setup>
-import TitleBasic from '../examples/title/basic.vue'
-import titleApi from './meta/title'
-import titleBasicCode from '../examples/title/basic.vue?raw'
-</script>
+# Title 标题
+
+用于展示页面或区域的标题文本。支持自定义颜色、大小、粗细和样式等功能。
+
+## 基础用法
+
+<Demo :source-code="titleBasicCode">
+  <template #source>
+    <title-basic />
+  </template>
+  <template #description>
+    通过 `title` 属性设置标题内容，支持 `color`、`size`、`weight` 等属性自定义样式。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="titleApi" componentName="title" />
+
+<script setup>
+import TitleBasic from '../examples/title/basic.vue'
+import titleApi from './meta/title'
+import titleBasicCode from '../examples/title/basic.vue?raw'
+</script>