ep-craft 0.1.42 → 0.2.0

package/dist-ai/components/table.md

@@ -0,0 +1,205 @@
+# EpTable
+
+`ep-table` · data（数据展示） · `component:table`
+
+## 摘要
+
+数据表格，支持排序、筛选与固定列
+
+## 适用场景
+
+- 适用：展示结构化列表数据
+- 适用：排序、筛选与分页浏览
+- 不适用：展示单个对象详情时使用 Descriptions
+
+## 关键词
+
+- 中文：表格、数据表、列表、数据
+- English: table, grid, datatable, data
+
+## 变体
+
+- size: large/default/small（按容器空间与信息密度选择尺寸）
+- effect: border（通过视觉修饰属性调整外观效果）
+
+## Props
+
+- data (any[]，默认 [])：显示的数据
+- size ('large' | 'default' | 'small')：Table 的尺寸
+- width (unknown)
+- height (string | number)：Table 的高度
+- maxHeight (string | number)：Table 的最大高度
+- fit (boolean，默认 true)：列的宽度是否自撑开
+- stripe (boolean)：是否为斑马纹 table
+- border (boolean)：是否带有纵向边框
+- rowKey (string | ((row) => string))：行数据的 Key
+- context (unknown)
+- showHeader (boolean，默认 true)：是否显示表头
+- showSummary (boolean)：是否在表尾显示合计行
+- sumText (string)：合计行第一列的文本
+- summaryMethod (({ columns, data }) => string[])：自定义合计计算方法
+- rowClassName (string | ((row, rowIndex) => string))：行的 className 的回调方法
+- rowStyle (object | ((row, rowIndex) => object))：行的 style 的回调方法
+- cellClassName (string | ((row, column, rowIndex, columnIndex) => string))：单元格的 className 的回调方法
+- cellStyle (object | ((row, column, rowIndex, columnIndex) => object))：单元格的 style 的回调方法
+- headerRowClassName (string | ((row, rowIndex) => string))：表头行的 className 的回调
+- headerRowStyle (object | ((row, rowIndex) => object))：表头行的 style 的回调
+- headerCellClassName (unknown)
+- headerCellStyle (unknown)
+- highlightCurrentRow (boolean)：是否要高亮当前行
+- currentRowKey (string | number)：当前行的 key
+- emptyText (string)：空数据时显示的文本内容
+- expandRowKeys (string[])：可以通过该属性设置目前的展开行
+- defaultExpandAll (boolean)：是否默认展开所有行
+- rowExpandable (unknown)
+- defaultSort ({ prop: string, order: 'ascending' | 'descending' })：默认的排序列和排序顺序
+- tooltipEffect ('dark' | 'light')：tooltip 效果
+- tooltipOptions (unknown)
+- spanMethod (({ row, column, rowIndex, columnIndex }) => number[] | { rowspan: number, colspan: number })：合并行或列的计算方法
+- selectOnIndeterminate (boolean，默认 true)：全选勾选是否选择所有数据
+- indent (number，默认 16)：展示树形数据时缩进的大小
+- treeProps ({ hasChildren: string, children: string }，默认 { hasChildren: 'hasChildren', children: 'children' })：渲染嵌套数据的配置选项
+- lazy (boolean)：是否懒加载子节点数据
+- load ((row, treeNode, resolve) => void)：加载子节点数据的函数
+- className (unknown，默认 见文档)
+- style (unknown，默认 见文档)
+- tableLayout ('fixed' | 'auto'，默认 fixed)：表格布局方式
+- scrollbarAlwaysOn (boolean)：是否总是显示滚动条
+- flexible (boolean)：确保主轴的最小尺寸
+- showOverflowTooltip (unknown，默认 见文档)
+- tooltipFormatter (unknown)
+- appendFilterPanelTo (unknown)
+- scrollbarTabindex (unknown，默认 见文档)
+- allowDragLastColumn (unknown，默认 见文档)
+- preserveExpandedContent (unknown)
+- nativeScrollbar (unknown)
+
+## Events
+
+- select((selection, row))：当用户手动勾选数据行的 Checkbox 时触发
+- selectAll((selection))：当用户手动勾选全选 Checkbox 时触发
+- selectionChange((selection))：当选择项发生变化时触发
+- cellMouseEnter((row, column, cell, event))：当单元格 hover 进入时触发
+- cellMouseLeave((row, column, cell, event))：当单元格 hover 退出时触发
+- cellDblclick((row, column, cell, event))：当某个单元格被双击击时触发
+- cellContextmenu((row, column, cell, event))：当某个单元格被鼠标右键点击时触发
+- cellClick((row, column, cell, event))：当某个单元格被点击时触发
+- rowDblclick((row, column, event))：当某一行被双击时触发
+- rowClick((row, column, event))：当某一行被点击时触发
+- rowContextmenu((row, column, event))：当某一行被鼠标右键点击时触发
+- headerClick((column, event))：当某一列的表头被点击时触发
+- headerContextmenu((column, event))：当某一列的表头被鼠标右键点击时触发
+- sortChange(({ column, prop, order }))：当表格的排序条件发生变化时触发
+- filterChange((filters))：当表格的筛选条件发生变化时触发
+- currentChange((currentRow, oldCurrentRow))：当表格的当前行发生变化时触发
+- headerDragend((newWidth: number, oldWidth: number, column: TableColumnCtx, event: MouseEvent))：拖动列宽结束后触发
+- expandChange((row, expandedRows | expanded))：当用户对某一行展开或关闭时触发
+- scroll(({ scrollLeft, scrollTop }: { scrollLeft: number; scrollTop: number }))：表格滚动时触发
+
+## Slots
+
+- default：自定义默认内容
+- append：插入至表格最后一行之后的内容
+- empty：当数据为空时自定义的内容
+
+## Exposes
+
+- clearSelection(() => void)：清空用户的选择
+- getSelectionRows(() => any[])：返回当前选中的行
+- getHalfSelectionRows(() => any[])：返回当前半选的行
+- toggleRowSelection((row: any, selected?: boolean) => void)：切换某一行的选中状态
+- toggleAllSelection(() => void)：切换所有行的选中状态
+- toggleRowExpansion((row: any, expanded?: boolean) => void)：切换某一行的展开状态
+- setCurrentRow((row: any) => void)：设置某一行为选中行
+- clearSort(() => void)：清空排序条件
+- clearFilter((columnKeys?: string[]) => void)：清空过滤条件
+- doLayout(() => void)：对 Table 进行重新布局
+- sort((prop: string, order: string) => void)：手动对 Table 进行排序
+- updateKeyChildren((key: string, data: any[]) => void)：懒加载表格中，更新某一行的子节点数据（需设置 row-key）
+- scrollTo((options: ScrollToOptions | number, yCoord?: number) => void)：滚动到一组特定坐标
+- setScrollTop((top: number) => void)：设置垂直滚动位置
+- setScrollLeft((left: number) => void)：设置水平滚动位置
+
+## 关系
+
+- 子级：EpTableColumn
+- 常用组合：EpTable + EpTableColumn
+
+## 视觉提示
+
+- 形状：块级数据区域
+- 密度：紧凑
+- 插槽内容：default：自定义默认内容；append：插入至表格最后一行之后的内容；empty：当数据为空时自定义的内容
+- CSS 变量：--el-border-color-lighter、--el-bg-color、--el-text-color-regular、--el-font-size-base
+
+## 示例
+
+### 基础表格
+
+```vue
+<script setup lang="ts">
+import { EpTable, EpTableColumn } from 'ep-craft'
+
+const rows = [
+  { date: '2026-01-01', name: '张三', address: '杭州市西湖区' },
+  { date: '2026-01-02', name: '李四', address: '上海市浦东新区' },
+]
+</script>
+
+<template>
+  <ep-table :data="rows">
+    <ep-table-column prop="date" label="日期" width="160" />
+    <ep-table-column prop="name" label="姓名" width="120" />
+    <ep-table-column prop="address" label="地址" />
+  </ep-table>
+</template>
+```
+
+### 斑马纹与边框
+
+```vue
+<script setup lang="ts">
+import { EpTable, EpTableColumn } from 'ep-craft'
+
+const rows = [
+  { date: '2026-01-01', name: '张三' },
+  { date: '2026-01-02', name: '李四' },
+]
+</script>
+
+<template>
+  <ep-table :data="rows" stripe border>
+    <ep-table-column prop="date" label="日期" />
+    <ep-table-column prop="name" label="姓名" />
+  </ep-table>
+</template>
+```
+
+### 固定列
+
+```vue
+<script setup lang="ts">
+import { EpTable, EpTableColumn } from 'ep-craft'
+
+const rows = [
+  { id: '1001', name: '张三', address: '杭州市西湖区文三路 20 号' },
+  { id: '1002', name: '李四', address: '上海市浦东新区世纪大道 100 号' },
+]
+</script>
+
+<template>
+  <ep-table :data="rows" style="width: 100%">
+    <ep-table-column prop="id" label="编号" width="120" fixed="left" />
+    <ep-table-column prop="name" label="姓名" width="120" />
+    <ep-table-column prop="address" label="地址" width="360" />
+  </ep-table>
+</template>
+```
+
+## 相关条目
+
+- EpTableColumn
+
+---
+
+ep-craft 0.2.0

package/dist-ai/components/tabs.json

@@ -0,0 +1,231 @@
+{
+  "entry": {
+    "category": "navigation",
+    "events": [
+      {
+        "description": "选中选项卡的绑定值变化时触发",
+        "name": "update:modelValue",
+        "params": "(name: string | number)"
+      },
+      {
+        "description": "tab 被选中时触发",
+        "name": "tabClick",
+        "params": "(pane: TabsPaneContext, ev: Event)"
+      },
+      {
+        "description": "activeName 改变时触发",
+        "name": "tabChange",
+        "params": "(name: string | number)"
+      },
+      {
+        "description": "点击 tab 的新增或移除按钮时触发",
+        "name": "edit",
+        "params": "(paneName: string | number | undefined, action: 'remove' | 'add')"
+      },
+      {
+        "description": "点击 tab 移除按钮时触发",
+        "name": "tabRemove",
+        "params": "(name: string | number)"
+      },
+      {
+        "description": "点击 tab 新增按钮时触发",
+        "name": "tabAdd",
+        "params": "—"
+      }
+    ],
+    "exampleOmittedReason": null,
+    "examples": [
+      {
+        "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { EpTabPane, EpTabs } from 'ep-craft'\n\nconst active = ref('first')\n</script>\n\n<template>\n  <ep-tabs v-model=\"active\">\n    <ep-tab-pane label=\"用户\" name=\"first\">用户管理</ep-tab-pane>\n    <ep-tab-pane label=\"配置\" name=\"second\">系统配置</ep-tab-pane>\n  </ep-tabs>\n</template>",
+        "id": "tabs-1",
+        "language": "vue",
+        "title": "基础标签页"
+      },
+      {
+        "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { EpTabPane, EpTabs } from 'ep-craft'\n\nconst active = ref('first')\n</script>\n\n<template>\n  <ep-tabs v-model=\"active\" type=\"card\">\n    <ep-tab-pane label=\"概览\" name=\"first\">概览内容</ep-tab-pane>\n    <ep-tab-pane label=\"详情\" name=\"second\">详情内容</ep-tab-pane>\n  </ep-tabs>\n</template>",
+        "id": "tabs-2",
+        "language": "vue",
+        "title": "卡片样式"
+      },
+      {
+        "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { EpTabPane, EpTabs } from 'ep-craft'\n\nconst active = ref('first')\n</script>\n\n<template>\n  <ep-tabs v-model=\"active\" tab-position=\"left\" style=\"height: 160px\">\n    <ep-tab-pane label=\"基础\" name=\"first\">基础设置</ep-tab-pane>\n    <ep-tab-pane label=\"高级\" name=\"second\">高级设置</ep-tab-pane>\n  </ep-tabs>\n</template>",
+        "id": "tabs-3",
+        "language": "vue",
+        "title": "左侧标签"
+      }
+    ],
+    "exposes": [],
+    "hot": true,
+    "id": "component:tabs",
+    "keywords": {
+      "en": [
+        "tabs",
+        "tab",
+        "tabbed",
+        "navigation"
+      ],
+      "zh": [
+        "标签页",
+        "选项卡",
+        "切换",
+        "导航"
+      ]
+    },
+    "kind": "component",
+    "name": "EpTabs",
+    "nonUseCases": [
+      "单步无层级的简单跳转时"
+    ],
+    "props": [
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "风格类型",
+        "hasDefault": true,
+        "name": "type",
+        "required": false,
+        "type": "'card' | 'border-card' | ''"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "标签是否可关闭",
+        "hasDefault": false,
+        "name": "closable",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "标签是否可增加",
+        "hasDefault": false,
+        "name": "addable",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": "v-model",
+        "defaultText": null,
+        "description": "绑定值，选中选项卡的 name",
+        "hasDefault": false,
+        "name": "modelValue",
+        "required": false,
+        "type": "string | number"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "",
+        "hasDefault": false,
+        "name": "defaultValue",
+        "required": false,
+        "type": "unknown"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "标签是否同时可增加和关闭",
+        "hasDefault": false,
+        "name": "editable",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "top",
+        "description": "选项卡所在位置",
+        "hasDefault": true,
+        "name": "tabPosition",
+        "required": false,
+        "type": "'top' | 'right' | 'bottom' | 'left'"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "切换标签之前的钩子，返回 false 或 reject 则阻止切换",
+        "hasDefault": true,
+        "name": "beforeLeave",
+        "required": false,
+        "type": "(activeName, oldActiveName) => boolean | Promise<void>"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "标签的宽度是否自撑开",
+        "hasDefault": false,
+        "name": "stretch",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "",
+        "hasDefault": true,
+        "name": "tabindex",
+        "required": false,
+        "type": "unknown"
+      }
+    ],
+    "related": [
+      "EpTabPane",
+      "EpMenu"
+    ],
+    "relations": {
+      "children": [
+        "EpTabPane"
+      ],
+      "combos": [
+        "EpTabs + EpTabPane"
+      ],
+      "parents": [],
+      "requiredChildren": [
+        "EpTabPane"
+      ]
+    },
+    "slots": [
+      {
+        "description": "默认插槽，放置 ep-tab-pane",
+        "name": "default"
+      },
+      {
+        "description": "自定义新增按钮图标",
+        "name": "add-icon"
+      }
+    ],
+    "slug": "tabs",
+    "summary": "标签页，切换同区域内的多组内容",
+    "tag": "ep-tabs",
+    "useCases": [
+      "同区域多视图切换",
+      "设置页与详情页的内容分组"
+    ],
+    "variants": [
+      {
+        "dimension": "type",
+        "values": [
+          "card",
+          "border-card"
+        ],
+        "when": "通过 type 选择风格类型"
+      }
+    ],
+    "visual": {
+      "cssVars": [
+        "--el-color-primary",
+        "--el-text-color-regular",
+        "--el-bg-color"
+      ],
+      "density": "中等",
+      "shape": "条状或列表",
+      "slotContent": [
+        "default：默认插槽，放置 ep-tab-pane",
+        "add-icon：自定义新增按钮图标"
+      ]
+    }
+  },
+  "generatedAt": "2026-11-03T03:09:12.050Z",
+  "libraryVersion": "0.2.0",
+  "schemaVersion": 1
+}

package/dist-ai/components/tabs.md

@@ -0,0 +1,127 @@
+# EpTabs
+
+`ep-tabs` · navigation（导航） · `component:tabs`
+
+## 摘要
+
+标签页，切换同区域内的多组内容
+
+## 适用场景
+
+- 适用：同区域多视图切换
+- 适用：设置页与详情页的内容分组
+- 不适用：单步无层级的简单跳转时
+
+## 关键词
+
+- 中文：标签页、选项卡、切换、导航
+- English: tabs, tab, tabbed, navigation
+
+## 变体
+
+- type: card/border-card（通过 type 选择风格类型）
+
+## Props
+
+- type ('card' | 'border-card' | ''，默认 见文档)：风格类型
+- closable (boolean)：标签是否可关闭
+- addable (boolean)：标签是否可增加
+- modelValue（别名 v-model） (string | number)：绑定值，选中选项卡的 name
+- defaultValue (unknown)
+- editable (boolean)：标签是否同时可增加和关闭
+- tabPosition ('top' | 'right' | 'bottom' | 'left'，默认 top)：选项卡所在位置
+- beforeLeave ((activeName, oldActiveName) => boolean | Promise<void>，默认 见文档)：切换标签之前的钩子，返回 false 或 reject 则阻止切换
+- stretch (boolean)：标签的宽度是否自撑开
+- tabindex (unknown，默认 见文档)
+
+## Events
+
+- update:modelValue((name: string | number))：选中选项卡的绑定值变化时触发
+- tabClick((pane: TabsPaneContext, ev: Event))：tab 被选中时触发
+- tabChange((name: string | number))：activeName 改变时触发
+- edit((paneName: string | number | undefined, action: 'remove' | 'add'))：点击 tab 的新增或移除按钮时触发
+- tabRemove((name: string | number))：点击 tab 移除按钮时触发
+- tabAdd(—)：点击 tab 新增按钮时触发
+
+## Slots
+
+- default：默认插槽，放置 ep-tab-pane
+- add-icon：自定义新增按钮图标
+
+## 关系
+
+- 子级：EpTabPane
+- 必需子组件：EpTabPane
+- 常用组合：EpTabs + EpTabPane
+
+## 视觉提示
+
+- 形状：条状或列表
+- 密度：中等
+- 插槽内容：default：默认插槽，放置 ep-tab-pane；add-icon：自定义新增按钮图标
+- CSS 变量：--el-color-primary、--el-text-color-regular、--el-bg-color
+
+## 示例
+
+### 基础标签页
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EpTabPane, EpTabs } from 'ep-craft'
+
+const active = ref('first')
+</script>
+
+<template>
+  <ep-tabs v-model="active">
+    <ep-tab-pane label="用户" name="first">用户管理</ep-tab-pane>
+    <ep-tab-pane label="配置" name="second">系统配置</ep-tab-pane>
+  </ep-tabs>
+</template>
+```
+
+### 卡片样式
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EpTabPane, EpTabs } from 'ep-craft'
+
+const active = ref('first')
+</script>
+
+<template>
+  <ep-tabs v-model="active" type="card">
+    <ep-tab-pane label="概览" name="first">概览内容</ep-tab-pane>
+    <ep-tab-pane label="详情" name="second">详情内容</ep-tab-pane>
+  </ep-tabs>
+</template>
+```
+
+### 左侧标签
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EpTabPane, EpTabs } from 'ep-craft'
+
+const active = ref('first')
+</script>
+
+<template>
+  <ep-tabs v-model="active" tab-position="left" style="height: 160px">
+    <ep-tab-pane label="基础" name="first">基础设置</ep-tab-pane>
+    <ep-tab-pane label="高级" name="second">高级设置</ep-tab-pane>
+  </ep-tabs>
+</template>
+```
+
+## 相关条目
+
+- EpTabPane
+- EpMenu
+
+---
+
+ep-craft 0.2.0