@a2simcode/ui 0.0.56 → 0.0.57

package/docs/components/meta/input-cards.ts

@@ -56,7 +56,7 @@ export default {
     {
       "name": "change",
       "description": "变更事件",
-      "type": "{\r\n  id: string\r\n  value: any\r\n  data: any\r\n  formData: Record<string, any>\r\n  tableData: Record<string, any>[]\r\n  type: 'add' | 'delete' | 'update'\r\n}"
+      "type": "{\n  id: string\n  value: any\n  data: any\n  formData: Record<string, any>\n  tableData: Record<string, any>[]\n  type: 'add' | 'delete' | 'update'\n}"
     },
     {
       "name": "rowChange",

package/docs/components/meta/number.ts

@@ -54,7 +54,7 @@ export default {
       "name": "controls",
       "description": "是否使用控制按钮",
       "type": "boolean",
-      "default": "false"
+      "default": "true"
     },
     {
       "name": "controlsPosition",

package/docs/components/meta/panel.ts

@@ -8,36 +8,38 @@ export default {
     {
       "name": "toolBtns",
       "description": "操作按钮",
-      "type": "ButtonCompType[]",
+      "type": "Array",
       "default": "() => []"
     },
     {
       "name": "bootmBtns",
       "description": "底部按钮",
-      "type": "ButtonCompType[]",
+      "type": "Array",
       "default": "() => []"
     },
     {
       "name": "bootmRightBtns",
       "description": "底部右侧按钮",
-      "type": "ButtonCompType[]",
+      "type": "Array",
       "default": "() => []"
     },
     {
       "name": "bodyStyle",
       "description": "样式",
       "type": "CSSProperties",
-      "default": "() => ({ padding: '8px', })"
+      "default": "() => ({\n  padding: '8px',\n})"
     },
     {
       "name": "noPadding",
       "description": "是否需要边距",
-      "type": "boolean"
+      "type": "boolean",
+      "default": "false"
     },
     {
       "name": "notTitle",
       "description": "是否不显示标题",
-      "type": "boolean"
+      "type": "boolean",
+      "default": "false"
     },
     {
       "name": "flexWidth",
@@ -46,38 +48,105 @@ export default {
     },
     {
       "name": "height",
-      "description": "高度",
+      "description": "",
       "type": "number"
     },
     {
       "name": "unit",
-      "description": "单位",
+      "description": "",
       "type": "string",
       "default": "'%'"
     },
     {
       "name": "notSetWidth",
-      "description": "是否不设置宽度",
-      "type": "boolean"
-    }
-  ],
-  "events": [
+      "description": "",
+      "type": "boolean",
+      "default": "false"
+    },
     {
-      "name": "click",
-      "description": "点击事件",
-      "type": "ButtonCompType"
+      "name": "size",
+      "description": "按钮大小",
+      "type": "string",
+      "default": "'default'"
     }
   ],
+  "events": [],
   "slots": [
     {
       "name": "title",
-      "description": "标题插槽"
+      "description": ""
     },
     {
       "name": "default",
-      "description": "内容插槽"
+      "description": ""
     }
   ],
   "methods": [],
-  "types": []
+  "types": [
+    {
+      "name": "PanelProps",
+      "properties": [
+        {
+          "name": "title",
+          "type": "string",
+          "description": "标题"
+        },
+        {
+          "name": "toolBtns",
+          "type": "ButtonCompType[]",
+          "description": "操作按钮"
+        },
+        {
+          "name": "bootmBtns",
+          "type": "ButtonCompType[]",
+          "description": "底部按钮"
+        },
+        {
+          "name": "bootmRightBtns",
+          "type": "ButtonCompType[]",
+          "description": "底部右侧按钮"
+        },
+        {
+          "name": "bodyStyle",
+          "type": "CSSProperties",
+          "description": "样式"
+        },
+        {
+          "name": "noPadding",
+          "type": "boolean",
+          "description": "是否需要边距"
+        },
+        {
+          "name": "notTitle",
+          "type": "boolean",
+          "description": "是否不显示标题"
+        },
+        {
+          "name": "flexWidth",
+          "type": "number",
+          "description": "宽度"
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "description": ""
+        },
+        {
+          "name": "unit",
+          "type": "string",
+          "description": ""
+        },
+        {
+          "name": "notSetWidth",
+          "type": "boolean",
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "string",
+          "description": "按钮大小"
+        }
+      ]
+    }
+  ]
 }

package/docs/components/meta/table.ts

@@ -237,6 +237,11 @@ export default {
           "type": "'left' | 'center' | 'right'",
           "description": "列的对齐方式"
         },
+        {
+          "name": "headerAlign",
+          "type": "'left' | 'center' | 'right'",
+          "description": "列标题的对齐方式，不设置时默认使用 align"
+        },
         {
           "name": "dataType",
           "type": "string",

package/docs/components/meta/tree-select.ts

@@ -26,7 +26,7 @@ export default {
       "name": "props",
       "description": "配置选项，定义树形节点的相关字段，如 children、label、value 等",
       "type": "Record",
-      "default": "() => ({\r\n  children: 'children',\r\n  label: 'label',\r\n  value: 'value',\r\n})"
+      "default": "() => ({\n  children: 'children',\n  label: 'label',\n  value: 'value',\n})"
     },
     {
       "name": "size",

package/docs/components/table.md

@@ -15,6 +15,20 @@
   </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`（右侧冻结）。
@@ -174,6 +188,7 @@
 
 <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'
@@ -188,6 +203,7 @@ 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'

package/docs/examples/table/tag.vue

@@ -0,0 +1,43 @@
+<template>
+  <div style="position: relative; width: 100%; height: 220px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '客户',
+      width: 160,
+      align: 'left',
+    },
+  },
+  {
+    id: 'tags',
+    type: 'j-tag',
+    config: {
+      label: '标签',
+      width: 360,
+      align: 'left',
+      dataType: 'options',
+      options: [
+        { value: 'ax', label: '安盛科技', color: '#fff7e8' },
+        { value: 'jy', label: '锦银集团', color: '#e8f3ff' },
+        { value: 'drs', label: '大都人寿', color: '#e8fffb' },
+        { value: 'auto1', label: '自动白字', color: '#165dff' },
+        { value: 'auto2', label: '自动黑字', color: '#94bfff' },
+      ],
+    },
+  },
+])
+
+const records = ref([
+  { name: '客户A', tags: 'ax,jy' },
+  { name: '客户B', tags: 'drs,auto1' },
+  { name: '客户C', tags: 'ax,jy,drs,auto2' },
+])
+</script>

package/package.json

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