@a2simcode/ui 0.0.59 → 0.0.61

package/docs/components/meta/table.ts

@@ -212,11 +212,6 @@ export default {
     {
       "name": "TableColumnConfig",
       "properties": [
-        {
-          "name": "label",
-          "type": "string",
-          "description": "列的标题"
-        },
         {
           "name": "width",
           "type": "number",
@@ -319,7 +314,7 @@ export default {
         },
         {
           "name": "config",
-          "type": "TableColumnConfig & BaseCompConfig",
+          "type": "TableColumnCompConfig & {\n    /**\n     * @zh 列的标题\n     */\n    label: string\n  }",
           "description": "列配置"
         },
         {

package/docs/components/table.md

@@ -29,6 +29,20 @@
   </template>
 </Demo>
 
+## Icon 图标
+
+通过列类型 `j-icon` 可以渲染 SVG 图标。支持传入 SVG 字符串或 Iconify 图标名称。
+
+<Demo :source-code="tableIconCode">
+  <template #source>
+    <table-icon />
+  </template>
+  <template #description>
+    在 `columns` 中设置 `type: 'j-icon'`。数据可以是 SVG 字符串，也可以是 Iconify 图标名称（如 `mdi:home`）。
+    可以通过 `config.size` 设置图标大小，`config.color` 设置图标颜色。
+  </template>
+</Demo>
+
 ## 冻结列
 
 通过 `columns` 中的 `config.frozen` 属性设置列的冻结方式，支持 `left`（左侧冻结）和 `right`（右侧冻结）。
@@ -189,6 +203,7 @@
 <script setup>
 import TableBasic from '../examples/table/basic.vue'
 import TableTag from '../examples/table/tag.vue'
+import TableIcon from '../examples/table/icon.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'
@@ -204,6 +219,7 @@ 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 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/icon.vue

@@ -0,0 +1,85 @@
+<template>
+  <div style="position: relative; width: 100%; height: 300px">
+    <j-table v-if="iconsReady" :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getIcon, iconLoaded, loadIcon } from '@iconify/vue'
+import { onBeforeMount, ref } from 'vue'
+
+const iconsReady = ref(false)
+
+const browsers = [
+  { name: 'Chrome', icon: 'logos:chrome' },
+  { name: 'Firefox', icon: 'logos:firefox' },
+  { name: 'Safari', icon: 'logos:safari' },
+  { name: 'Edge', icon: 'logos:microsoft-edge' },
+]
+
+const toSvg = (iconName: string) => {
+  const iconData = getIcon(iconName)
+  if (!iconData) return ''
+  return `<svg viewBox="0 0 ${iconData.width} ${iconData.height}">${iconData.body}</svg>`
+}
+
+const records = ref<Record<string, any>[]>([])
+
+onBeforeMount(async () => {
+  // @ts-ignore
+  if (import.meta.env.SSR) {
+    iconsReady.value = true
+    return
+  }
+
+  const icons = browsers.map((item) => item.icon)
+
+  await Promise.all(
+    icons.map(async (icon) => {
+      if (!iconLoaded(icon)) {
+        await loadIcon(icon)
+      }
+    })
+  )
+
+  records.value = browsers.map((item) => {
+    return {
+      ...item,
+      svg: toSvg(item.icon),
+    }
+  })
+
+  iconsReady.value = true
+})
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '浏览器',
+      width: 150,
+      align: 'left',
+    },
+  },
+  {
+    id: 'icon',
+    type: 'j-icon',
+    config: {
+      label: '图标（Iconify）',
+      width: 120,
+      align: 'center',
+      size: 24,
+    },
+  },
+  {
+    id: 'svg',
+    type: 'j-icon',
+    config: {
+      label: '图标（SVG）',
+      width: 120,
+      align: 'center',
+      size: 24,
+    },
+  },
+])
+</script>

package/package.json

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