@a2simcode/ui 0.0.306 → 0.0.308

package/docs/components/meta/buttons.ts

@@ -1,81 +1,81 @@
-export default {
-  "props": [
-    {
-      "name": "list",
-      "description": "按钮数据",
-      "type": "(Array as PropType<ButtonCompType[]>) ||\r\n(Object as PropType<Record<string, ButtonCompType[]>>)",
-      "default": "() => []"
-    },
-    {
-      "name": "size",
-      "description": "设置按钮大小",
-      "type": "'large' | 'default' | 'small'",
-      "default": "'default'"
-    },
-    {
-      "name": "isLink",
-      "description": "是否是链接按钮",
-      "type": "boolean"
-    },
-    {
-      "name": "readonly",
-      "description": "按钮组是否为禁用状态",
-      "type": "boolean"
-    }
-  ],
-  "events": [],
-  "slots": [],
-  "methods": [],
-  "types": [
-    {
-      "name": "ButtonClickScope",
-      "properties": [
-        {
-          "name": "data",
-          "type": "Record<string, any>",
-          "description": ""
-        },
-        {
-          "name": "openLayer",
-          "type": "(options: LayerParamType) => void",
-          "description": ""
-        }
-      ]
-    },
-    {
-      "name": "ButtonCompActionType",
-      "properties": [
-        {
-          "name": "config",
-          "type": "ButtonProps & {\r\n    // 按钮是否显示\r\n    display?: boolean\r\n    // 按钮动作\r\n    action?: string\r\n    // 上传接受的文件类型\r\n    uploadAccept?: string\r\n    // 上传回调\r\n    uploadCallback?: (param: any) => void\r\n    // 上传成功回调\r\n    uploadSuccess?: (param: any) => void\r\n  }",
-          "description": "按钮配置"
-        },
-        {
-          "name": "click",
-          "type": "(scope: ButtonClickScope) => void",
-          "description": "按钮点击方法"
-        }
-      ]
-    },
-    {
-      "name": "ButtonCompType",
-      "properties": [
-        {
-          "name": "id",
-          "type": "string",
-          "description": "按钮ID"
-        },
-        {
-          "name": "label",
-          "type": "string",
-          "description": "按钮名称"
-        },
-        {
-          "name": "children",
-          "type": "ButtonCompType[]",
-          "description": "按钮子集"
-        }
-      ]
-    }
-  ]
-}
+export default {
+  "props": [
+    {
+      "name": "list",
+      "description": "按钮数据",
+      "type": "(Array as PropType<ButtonCompType[]>) ||\n(Object as PropType<Record<string, ButtonCompType[]>>)",
+      "default": "() => []"
+    },
+    {
+      "name": "size",
+      "description": "设置按钮大小",
+      "type": "'large' | 'default' | 'small'",
+      "default": "'default'"
+    },
+    {
+      "name": "isLink",
+      "description": "是否是链接按钮",
+      "type": "boolean"
+    },
+    {
+      "name": "readonly",
+      "description": "按钮组是否为禁用状态",
+      "type": "boolean"
+    }
+  ],
+  "events": [],
+  "slots": [],
+  "methods": [],
+  "types": [
+    {
+      "name": "ButtonClickScope",
+      "properties": [
+        {
+          "name": "data",
+          "type": "Record<string, any>",
+          "description": ""
+        },
+        {
+          "name": "openLayer",
+          "type": "(options: LayerParamType) => void",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "ButtonCompActionType",
+      "properties": [
+        {
+          "name": "config",
+          "type": "ButtonProps & {\n    // 按钮是否显示\n    display?: boolean\n    // 按钮动作\n    action?: string\n    // 上传接受的文件类型\n    uploadAccept?: string\n    // 上传回调\n    uploadCallback?: (param: any) => void\n    // 上传成功回调\n    uploadSuccess?: (param: any) => void\n  }",
+          "description": "按钮配置"
+        },
+        {
+          "name": "click",
+          "type": "(scope: ButtonClickScope) => void",
+          "description": "按钮点击方法"
+        }
+      ]
+    },
+    {
+      "name": "ButtonCompType",
+      "properties": [
+        {
+          "name": "id",
+          "type": "string",
+          "description": "按钮ID"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "按钮名称"
+        },
+        {
+          "name": "children",
+          "type": "ButtonCompType[]",
+          "description": "按钮子集"
+        }
+      ]
+    }
+  ]
+}

package/docs/components/meta/select.ts

@@ -163,6 +163,16 @@ export default {
           "type": "string",
           "description": ""
         },
+        {
+          "name": "color",
+          "type": "string",
+          "description": "选项背景颜色"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "description": "选项文字颜色，不设置时根据背景色自动计算"
+        },
         {
           "name": "children",
           "type": "SelectOption[]",

package/docs/components/select.md

@@ -108,6 +108,20 @@ Select 组件提供三种尺寸。
   </template>
 </Demo>
 
+## 带颜色
+
+选项可以设置背景颜色和文字颜色。
+
+<Demo :source-code="selectColorCode">
+  <template #source>
+    <select-color />
+  </template>
+  <template #description>
+    在选项数据中添加 `color` 属性设置背景颜色，添加 `textColor` 属性设置文字颜色；
+    未设置 `textColor` 时会根据背景色自动计算合适的文字颜色。选中后输入框内的标签同样显示对应颜色。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="selectApi" componentName="select" />
@@ -121,6 +135,7 @@ import SelectMultiple from '../examples/select/multiple.vue'
 import SelectFilterable from '../examples/select/filterable.vue'
 import SelectGroup from '../examples/select/group.vue'
 import SelectIcon from '../examples/select/icon.vue'
+import SelectColor from '../examples/select/color.vue'
 import selectApi from './meta/select'
 import selectBasicCode from '../examples/select/basic.vue?raw'
 import selectSizeCode from '../examples/select/size.vue?raw'
@@ -130,4 +145,5 @@ import selectMultipleCode from '../examples/select/multiple.vue?raw'
 import selectFilterableCode from '../examples/select/filterable.vue?raw'
 import selectGroupCode from '../examples/select/group.vue?raw'
 import selectIconCode from '../examples/select/icon.vue?raw'
+import selectColorCode from '../examples/select/color.vue?raw'
 </script>

package/docs/components/table.md

@@ -53,6 +53,20 @@
   </template>
 </Demo>
 
+## ShowTag 文本列标签展示
+
+不设置列类型，在列 `config` 中配置 `showTag: true`，即可将普通文本列按标签样式渲染。
+
+<Demo :source-code="tableShowTagCode">
+  <template #source>
+    <table-show-tag />
+  </template>
+  <template #description>
+    配置 `dataType: 'options'` 和 `options` 时，按逗号拆分单元格值并映射为 `{ value,label,color }` 标签列表；
+    未配置 `options` 时，可通过 `tagDefaultColor` 指定默认背景色，将逗号分隔的原始文本直接渲染为标签。
+  </template>
+</Demo>
+
 ## Icon 图标
 
 通过列类型 `j-icon` 可以渲染 SVG 图标。支持传入 SVG 字符串或 Iconify 图标名称。
@@ -444,6 +458,7 @@
 import TableBasic from '../examples/table/basic.vue'
 import TableColumnFilter from '../examples/table/column-filter.vue'
 import TableTag from '../examples/table/tag.vue'
+import TableShowTag from '../examples/table/show-tag.vue'
 import TableIcon from '../examples/table/icon.vue'
 import TableLink from '../examples/table/link.vue'
 import TableLayerForm from '../examples/table/layer-form.vue'
@@ -478,6 +493,7 @@ import tableApi from './meta/table'
 import tableBasicCode from '../examples/table/basic.vue?raw'
 import tableColumnFilterCode from '../examples/table/column-filter.vue?raw'
 import tableTagCode from '../examples/table/tag.vue?raw'
+import tableShowTagCode from '../examples/table/show-tag.vue?raw'
 import tableIconCode from '../examples/table/icon.vue?raw'
 import tableLinkCode from '../examples/table/link.vue?raw'
 import tableLayerFormCode from '../examples/table/layer-form.vue?raw'

package/docs/examples/select/color.vue

@@ -0,0 +1,16 @@
+<template>
+  <j-select v-model="value" :options="options" placeholder="带颜色选择" style="width: 300px" />
+  <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  { label: '默认选项', value: '1' },
+  { label: '成功', value: '2', color: '#e8f7ee' },
+  { label: '警告', value: '3', color: '#fff3e0', textColor: '#d46b08' },
+  { label: '错误', value: '4', color: '#f53f3f' },
+]
+</script>

package/docs/examples/table/dynamic-type.vue

@@ -68,6 +68,7 @@ const records = ref([
   { id: 2, name: '评分', showType: 'j-rate', render: 3.5 },
   { id: 3, name: '滑块', showType: 'j-slider', render: 30 },
   { id: 4, name: '标签', showType: 'j-tag', render: 'a,b,c' },
+  { id: 4, name: '标签', showType: 'j-input-tag', render: 'a,b,c' },
   { id: 5, name: '标签', showType: 'text', render: 'a,b,c' },
 ])
 </script>

package/docs/examples/table/show-tag.vue

@@ -0,0 +1,68 @@
+<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: 120,
+      align: 'left',
+    },
+  },
+  {
+    id: 'tags',
+    config: {
+      label: '标签（options 映射）',
+      width: 280,
+      align: 'left',
+      showTag: true,
+      dataType: 'options',
+      options: [
+        { value: 'ax', label: '安盛科技', color: '#fff7e8' },
+        { value: 'jy', label: '锦银集团', color: '#e8f3ff' },
+        { value: 'drs', label: '大都人寿', color: '#e8fffb' },
+      ],
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: '状态（默认颜色）',
+      width: 240,
+      align: 'left',
+      showTag: true,
+      tagDefaultColor: '#e8f3ff',
+    },
+  },
+  {
+    id: 'level',
+    type: 'j-select',
+    config: {
+      label: '等级（j-select）',
+      width: 140,
+      align: 'center',
+      dataType: 'options',
+      showTag: true,
+      options: [
+        { value: 'high', label: '高', color: '#ffeded' },
+        { value: 'mid', label: '中', color: '#fff7e8' },
+        { value: 'low', label: '低', color: '#e8f3ff' },
+      ],
+      placeholder: '请选择等级',
+    },
+  },
+])
+
+const records = ref([
+  { name: '客户A', tags: 'ax,jy', status: '进行中', level: 'high' },
+  { name: '客户B', tags: 'drs', status: '已签约,待回访', level: 'mid' },
+  { name: '客户C', tags: 'ax,jy,drs', status: '已完成', level: 'low' },
+])
+</script>

package/package.json

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