@a2simcode/ui 0.0.61 → 0.0.62

package/docs/components/table.md

@@ -43,6 +43,34 @@
   </template>
 </Demo>
 
+## Link 链接
+
+通过列类型 `link` 可以渲染链接，并支持点击事件。
+
+<Demo :source-code="tableLinkCode">
+  <template #source>
+    <table-link />
+  </template>
+  <template #description>
+    在 `columns` 中设置 `type: 'link'`。
+    通过 `config.click` 设置点击回调函数，参数为 `{ row, column, e, openLayer }`。
+  </template>
+</Demo>
+
+## 自定义布局
+
+通过列配置中的 `customLayout` 属性，可以使用 VTable 的 CustomLayout 功能自定义单元格渲染。
+
+<Demo :source-code="tableCustomLayoutCode">
+  <template #source>
+    <table-custom-layout />
+  </template>
+  <template #description>
+    在列对象中定义 `customLayout` 函数。该函数接收 `args` 参数，其中包含 `customLayout` 类（VTable.CustomLayout），可用于创建 Group, Text, Image 等布局元素。
+    函数需要返回 `{ rootContainer, renderDefault: false }`。
+  </template>
+</Demo>
+
 ## 冻结列
 
 通过 `columns` 中的 `config.frozen` 属性设置列的冻结方式，支持 `left`（左侧冻结）和 `right`（右侧冻结）。
@@ -204,6 +232,8 @@
 import TableBasic from '../examples/table/basic.vue'
 import TableTag from '../examples/table/tag.vue'
 import TableIcon from '../examples/table/icon.vue'
+import TableLink from '../examples/table/link.vue'
+import TableCustomLayout from '../examples/table/custom-layout.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'
@@ -220,6 +250,8 @@ import tableApi from './meta/table'
 import tableBasicCode from '../examples/table/basic.vue?raw'
 import tableTagCode from '../examples/table/tag.vue?raw'
 import tableIconCode from '../examples/table/icon.vue?raw'
+import tableLinkCode from '../examples/table/link.vue?raw'
+import tableCustomLayoutCode from '../examples/table/custom-layout.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'

package/docs/examples/table/custom-layout.vue

@@ -0,0 +1,115 @@
+<template>
+  <div style="position: relative; width: 100%; height: 400px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'id',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'info',
+    config: {
+      label: 'User Info (Custom Layout)',
+      width: 250,
+    },
+    customLayout: (args: any) => {
+      const { table, row, col, rect, customLayout } = args
+      const { Group, Text, Image } = customLayout
+      const record = table.getCellOriginRecord(col, row)
+      const { name, avatar, role } = record
+
+      const container = new Group({
+        height: rect.height,
+        width: rect.width,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: [0, 10],
+      })
+
+      // Avatar
+      const image = new Image({
+        width: 32,
+        height: 32,
+        image: avatar,
+        cornerRadius: 16,
+        marginRight: 10,
+      })
+      container.add(image)
+
+      // Text Container
+      const textContainer = new Group({
+        height: 32,
+        width: rect.width - 60,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+      })
+
+      const nameText = new Text({
+        text: name,
+        fontSize: 14,
+        fontFamily: 'sans-serif',
+        fill: '#333',
+      })
+      textContainer.add(nameText)
+
+      const roleText = new Text({
+        text: role,
+        fontSize: 12,
+        fontFamily: 'sans-serif',
+        fill: '#999',
+        marginTop: 4,
+      })
+      textContainer.add(roleText)
+
+      container.add(textContainer)
+
+      return {
+        rootContainer: container,
+        renderDefault: false,
+      }
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: 'Status',
+      width: 100,
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: 1,
+    name: 'John Doe',
+    role: 'Software Engineer',
+    avatar: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiMxNjVkZmYiLz48dGV4dCB4PSIxNiIgeT0iMjEiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiI+SjwvdGV4dD48L3N2Zz4=',
+    status: 'Active',
+  },
+  {
+    id: 2,
+    name: 'Jane Smith',
+    role: 'Product Manager',
+    avatar: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiMwMGI0MmEiLz48dGV4dCB4PSIxNiIgeT0iMjEiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiI+SjwvdGV4dD48L3N2Zz4=',
+    status: 'Inactive',
+  },
+  {
+    id: 3,
+    name: 'Bob Johnson',
+    role: 'Designer',
+    avatar: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiNmYmI0MDAiLz48dGV4dCB4PSIxNiIgeT0iMjEiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiI+QjwvdGV4dD48L3N2Zz4=',
+    status: 'Active',
+  },
+])
+</script>

package/docs/examples/table/link.vue

@@ -0,0 +1,66 @@
+<template>
+  <div style="position: relative; width: 100%; height: 400px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: 'link',
+    config: {
+      label: '项目名称',
+      width: 'auto',
+      align: 'left',
+      click: ({ row }: { row: any }) => {
+        ElMessage.success(`点击了项目: ${row.name}`)
+      },
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'owner',
+    type: 'link',
+    config: {
+      label: '负责人',
+      width: 'auto',
+      align: 'center',
+      click: ({ row }: { row: any }) => {
+        ElMessage.info(`查看负责人: ${row.owner}`)
+      },
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '项目A',
+    status: '进行中',
+    owner: '张三',
+  },
+  {
+    id: '2',
+    name: '项目B',
+    status: '已完成',
+    owner: '李四',
+  },
+  {
+    id: '3',
+    name: '项目C',
+    status: '待审核',
+    owner: '王五',
+  },
+])
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",