@veltra/desktop 1.7.12 → 1.7.13

package/dist/types/textarea.d.ts

@@ -1,7 +1,7 @@
 import { DeconstructValue, FormComponentProps } from "@veltra/utils";
 //#region src/types/textarea.d.ts
 /** textarea组件属性 */
-interface TextareaProps extends FormComponentProps {
+export interface TextareaProps extends FormComponentProps {
   /**
    * 文本域的值
    */
@@ -52,7 +52,7 @@ interface TextareaProps extends FormComponentProps {
   autosize?: boolean;
 }
 /** textarea组件定义的事件 */
-interface TextareaEmits {
+export interface TextareaEmits {
   /**modelValue值改变时触发 */
   (e: 'update:modelValue', value: string): void;
   /**当 modelValue 改变时，并且文本框失去焦点或用户按Enter时触发 */
@@ -65,9 +65,8 @@ interface TextareaEmits {
   (e: 'clear'): void;
 }
 /** textarea组件暴露的属性和方法(组件内部使用) */
-interface _TextareaExposed {}
+export interface _TextareaExposed {}
 /** textarea组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
-type TextareaExposed = DeconstructValue<_TextareaExposed>;
+export type TextareaExposed = DeconstructValue<_TextareaExposed>;
 //#endregion
-export { TextareaEmits, TextareaExposed, TextareaProps, _TextareaExposed };
 //# sourceMappingURL=textarea.d.ts.map

package/dist/types/theme.d.ts

@@ -2,12 +2,12 @@ import { DeconstructValue } from "@veltra/utils";
 import { UITheme } from "@veltra/styles/theme";
 //#region src/types/theme.d.ts
 /** 主题组件属性 */
-interface ThemeProps {
+export interface ThemeProps {
   /** 指定要编辑的主题实例，默认跟随当前已加载主题 */
   theme?: UITheme;
 }
 /** 主题组件暴露的属性和方法(组件内部使用) */
-interface _ThemeExposed {
+export interface _ThemeExposed {
   /** 恢复到当前基线主题 */
   reset: () => void;
   /** 导出当前主题 */
@@ -18,7 +18,6 @@ interface _ThemeExposed {
   applyDarkPreset: () => void;
 }
 /** 主题组件暴露的属性和方法 */
-type ThemeExposed = DeconstructValue<_ThemeExposed>;
+export type ThemeExposed = DeconstructValue<_ThemeExposed>;
 //#endregion
-export { ThemeExposed, ThemeProps, _ThemeExposed };
 //# sourceMappingURL=theme.d.ts.map

package/dist/types/tip.d.ts

@@ -1,10 +1,10 @@
 import { CSSProperties } from "vue";
 import { DeconstructValue } from "@veltra/utils";
 //#region src/types/tip.d.ts
-type TipDirection = 'top' | 'bottom' | 'left' | 'right';
-type TipAlign = 'center' | 'start' | 'end';
+export type TipDirection = 'top' | 'bottom' | 'left' | 'right';
+export type TipAlign = 'center' | 'start' | 'end';
 /** tip提示组件组件属性 */
-interface TipProps {
+export interface TipProps {
   /** 控制显影 */
   visible?: boolean;
   /**提示内容 */
@@ -45,13 +45,12 @@ interface TipProps {
   showDelay?: number;
 }
 /** tip提示组件组件定义的事件 */
-interface TipEmits {
+export interface TipEmits {
   (e: 'update:visible', value: boolean): void;
 }
 /** tip提示组件组件暴露的属性和方法(组件内部使用) */
-interface _TipExposed {}
+export interface _TipExposed {}
 /** tip提示组件组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
-type TipExposed = DeconstructValue<_TipExposed>;
+export type TipExposed = DeconstructValue<_TipExposed>;
 //#endregion
-export { TipAlign, TipDirection, TipEmits, TipExposed, TipProps, _TipExposed };
 //# sourceMappingURL=tip.d.ts.map

package/dist/types/tree-select.d.ts

@@ -3,7 +3,7 @@ import { CSSProperties } from "vue";
 import { DeconstructValue, FormComponentProps } from "@veltra/utils";
 //#region src/types/tree-select.d.ts
 /** 树形选择器组件属性 */
-interface TreeSelectProps extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
+export interface TreeSelectProps extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
   modelValue?: string | number;
   /** 自定义占位文字 */
   placeholder?: string;
@@ -31,7 +31,7 @@ interface TreeSelectProps extends FormComponentProps, Omit<TreeProps, 'selected'
   contentClass?: unknown;
 }
 /** 树形选择器组件定义的事件 */
-interface TreeSelectEmits {
+export interface TreeSelectEmits {
   (e: 'clear'): void;
   (e: 'update:modelValue', value?: string | number): void;
   (e: 'change', selectedData?: Record<string, any>): void;
@@ -42,9 +42,8 @@ interface TreeSelectEmits {
   (e: 'update:text', text?: string): void;
 }
 /** 树形选择器组件暴露的属性和方法(组件内部使用) */
-interface _TreeSelectExposed {}
+export interface _TreeSelectExposed {}
 /** 树形选择器组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
-type TreeSelectExposed = DeconstructValue<_TreeSelectExposed>;
+export type TreeSelectExposed = DeconstructValue<_TreeSelectExposed>;
 //#endregion
-export { TreeSelectEmits, TreeSelectExposed, TreeSelectProps, _TreeSelectExposed };
 //# sourceMappingURL=tree-select.d.ts.map

package/dist/types/tree.d.ts

@@ -20,7 +20,7 @@ interface TreeNode$1<Data extends Record<string, any> = Record<string, any>> ext
   bubbleSet: (setter: (node: TreeNode$1<Data>) => void) => void;
 }
 /** 树组件属性 */
-interface TreeProps {
+export interface TreeProps {
   /** 是否展开所有节点 */
   expandAll?: boolean;
   /** 是否在点击节点的时候展开或者收缩节点 */
@@ -62,7 +62,7 @@ interface TreeProps {
   /** 使选中项或多选项出现在滚动视图中 */
   scrollToView?: boolean;
 }
-interface TreeEmit {
+export interface TreeEmit {
   /** 节点展开/折叠事件 */
   (e: 'expand', node: TreeNode$1): void;
   /** 节点点击事件 */
@@ -76,7 +76,7 @@ interface TreeEmit {
   /** 选中项同步完成事件 */
   (e: 'selected-synced', selected?: Record<string, any>): void;
 }
-interface TreeNodeProps {
+export interface TreeNodeProps {
   node: TreeNode$1;
   /**
    * 虚拟项索引：对应 `nodes` 数组中的绝对位置。
@@ -86,7 +86,7 @@ interface TreeNodeProps {
   measureElement?: (index: number, el: Element | null) => void;
 }
 /** 树组件暴露的属性和方法(组件内部使用) */
-interface _TreeExposed {
+export interface _TreeExposed {
   /** 滚动到目标元素 */
   scrollTo: (index: number) => void;
   /**
@@ -112,7 +112,7 @@ interface _TreeExposed {
   collapseAll(): void;
 }
 /** 树组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
-type TreeExposed = DeconstructValue<_TreeExposed>;
+export type TreeExposed = DeconstructValue<_TreeExposed>;
 //#endregion
-export { TreeEmit, TreeExposed, TreeNode$1 as TreeNode, TreeNodeProps, TreeProps, _TreeExposed };
+export { TreeNode$1 as TreeNode };
 //# sourceMappingURL=tree.d.ts.map

package/dist/types/watermark.d.ts

@@ -1,7 +1,7 @@
 import { DeconstructValue } from "@veltra/utils";
 //#region src/types/watermark.d.ts
 /** watermark组件属性 */
-interface WatermarkProps {
+export interface WatermarkProps {
   /** 文字 */
   text?: string;
   /** 图片 */
@@ -14,11 +14,10 @@ interface WatermarkProps {
   fontSize?: number;
 }
 /** watermark组件定义的事件 */
-interface WatermarkEmits {}
+export interface WatermarkEmits {}
 /** watermark组件暴露的属性和方法(组件内部使用) */
-interface _WatermarkExposed {}
+export interface _WatermarkExposed {}
 /** watermark组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
-type WatermarkExposed = DeconstructValue<_WatermarkExposed>;
+export type WatermarkExposed = DeconstructValue<_WatermarkExposed>;
 //#endregion
-export { WatermarkEmits, WatermarkExposed, WatermarkProps, _WatermarkExposed };
 //# sourceMappingURL=watermark.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.12",
+  "version": "1.7.13",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -80,12 +80,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.2.1",
     "@cat-kit/fe": ">=1.2.1",
-    "@veltra/compositions": "^1.7.12",
-    "@veltra/directives": "^1.7.12",
+    "@veltra/compositions": "^1.7.13",
+    "@veltra/directives": "^1.7.13",
     "@veltra/icons": "^1.5.0",
     "@veltra/sheet-core": "^2.5.6",
-    "@veltra/styles": "^1.7.12",
-    "@veltra/utils": "^1.7.12",
+    "@veltra/styles": "^1.7.13",
+    "@veltra/utils": "^1.7.13",
     "vue": ">=3.5.42"
   },
   "peerDependenciesMeta": {

package/src/components/table/__test__/column-style.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+
+import { ColumnNode } from '../node/col'
+
+describe('ColumnNode column styles', () => {
+  it('headerAlign 未指定时回退到 align', () => {
+    const column = new ColumnNode({ key: 'a', name: 'A', align: 'center' }, 0, 0)
+
+    expect(column.headerAlign).toBe('center')
+  })
+
+  it('headerAlign 显式指定时优先于 align', () => {
+    const column = new ColumnNode(
+      { key: 'a', name: 'A', align: 'center', headerAlign: 'right' },
+      0,
+      0
+    )
+
+    expect(column.headerAlign).toBe('right')
+  })
+
+  it('headerCellStyle 未指定 headerStyle 时回退到 style', () => {
+    const column = new ColumnNode(
+      { key: 'a', name: 'A', style: { color: 'red', fontSize: 14 } },
+      0,
+      0
+    )
+
+    expect(column.cellStyle).toEqual({ color: 'red', fontSize: '14px' })
+    expect(column.headerCellStyle).toEqual({ color: 'red', fontSize: '14px' })
+  })
+
+  it('headerCellStyle 显式指定 headerStyle 时优先于 style', () => {
+    const column = new ColumnNode(
+      {
+        key: 'a',
+        name: 'A',
+        style: { color: 'red', fontSize: 12 },
+        headerStyle: { color: 'blue', fontSize: 16 }
+      },
+      0,
+      0
+    )
+
+    expect(column.cellStyle).toEqual({ color: 'red', fontSize: '12px' })
+    expect(column.headerCellStyle).toEqual({ color: 'blue', fontSize: '16px' })
+  })
+
+  it('fontSize 数字转为 px，字符串原样保留', () => {
+    const column = new ColumnNode({ key: 'a', name: 'A', style: { fontSize: 18 } }, 0, 0)
+    const columnWithUnit = new ColumnNode(
+      { key: 'b', name: 'B', style: { fontSize: '1.2rem' } },
+      0,
+      0
+    )
+
+    expect(column.cellStyle).toEqual({ fontSize: '18px' })
+    expect(columnWithUnit.cellStyle).toEqual({ fontSize: '1.2rem' })
+  })
+
+  it('未配置样式时 getter 返回 undefined', () => {
+    const column = new ColumnNode({ key: 'a', name: 'A' }, 0, 0)
+
+    expect(column.cellStyle).toBeUndefined()
+    expect(column.headerCellStyle).toBeUndefined()
+  })
+})

package/src/components/table/node/col.ts

@@ -1,7 +1,26 @@
 import { TreeNode } from '@cat-kit/core'
+import { withUnit } from '@veltra/utils'
 import { isReactive, reactive, shallowReactive } from 'vue'
 
-import type { TableColumn, TableColumnAlign } from '../../../types'
+import type { TableColumn, TableColumnAlign, TableColumnStyle } from '../../../types'
+
+function normalizeColumnStyle(style?: TableColumnStyle): Record<string, string> | undefined {
+  if (!style) return undefined
+
+  const result: Record<string, string> = {}
+
+  if (style.color !== undefined) {
+    result.color = style.color
+  }
+  if (style.fontSize !== undefined) {
+    const fontSize = withUnit(style.fontSize, 'px')
+    if (fontSize !== undefined) {
+      result.fontSize = fontSize
+    }
+  }
+
+  return Object.keys(result).length ? result : undefined
+}
 
 export class ColumnNode extends TreeNode<TableColumn, ColumnNode> {
   declare children?: ColumnNode[] | undefined
@@ -44,6 +63,16 @@ export class ColumnNode extends TreeNode<TableColumn, ColumnNode> {
     this.data.headerAlign = val
   }
 
+  /** 表体/表尾单元格样式 */
+  get cellStyle(): Record<string, string> | undefined {
+    return normalizeColumnStyle(this.data.style)
+  }
+
+  /** 表头单元格样式 */
+  get headerCellStyle(): Record<string, string> | undefined {
+    return normalizeColumnStyle(this.data.headerStyle ?? this.data.style)
+  }
+
   /** 宽度 */
   get width(): number | undefined {
     const width = this.data.width ?? this.derived.allocatedWidth

package/src/components/table/table-cell.vue

@@ -24,13 +24,18 @@ defineOptions({ name: 'UTableCell' })
  * 父组件 `TableRow` 已经持有注入上下文，直接把 `cellClass` 传下来即可；
  * 这里变成「完全受控」的纯渲染单元。
  */
-const { left, right } = defineProps<{
+const { left, right, cellStyle } = defineProps<{
   cellClass: string
   left?: number
   right?: number
+  cellStyle?: Record<string, string>
   rowspan?: number
   colspan?: number
 }>()
 
-const style = computed(() => ({ left: withUnit(left, 'px'), right: withUnit(right, 'px') }))
+const style = computed(() => ({
+  ...cellStyle,
+  left: withUnit(left, 'px'),
+  right: withUnit(right, 'px')
+}))
 </script>

package/src/components/table/table-foot.vue

@@ -5,6 +5,7 @@
         v-if="leafColumns[0]"
         :class="getCellClass(leafColumns[0])"
         :style="{
+          ...leafColumns[0].cellStyle,
           right: withUnit(leafColumns[0].style.right, 'px'),
           left: withUnit(leafColumns[0].style.left, 'px')
         }"
@@ -16,6 +17,7 @@
         :class="getCellClass(column)"
         :key="column.key"
         :style="{
+          ...column.cellStyle,
           right: withUnit(column.style.right, 'px'),
           left: withUnit(column.style.left, 'px')
         }"

package/src/components/table/table-head.tsx

@@ -26,6 +26,7 @@ const TableHead: DefineComponent = defineComponent({
                 colspan={column.leafs}
                 rowspan={column.children?.length ? undefined : headers.value.length - headerIndex}
                 style={{
+                  ...column.headerCellStyle,
                   left: withUnit(column.style.left, 'px'),
                   right: withUnit(column.style.right, 'px')
                 }}

package/src/components/table/table-row.tsx

@@ -99,6 +99,7 @@ export const UTableRow: DefineComponent<{ row: ITableRow; index: number }> = def
               cellClass={getCellClass(_expandColumn)}
               left={_expandColumn.style.left}
               right={_expandColumn.style.right}
+              cellStyle={_expandColumn.cellStyle}
               key={row.uid + _expandColumn.key}
               {...tableProps.mergeCell?.(expandCtx)}
             >
@@ -156,6 +157,7 @@ export const UTableRow: DefineComponent<{ row: ITableRow; index: number }> = def
                 cellClass={getCellClass(column)}
                 left={column.style.left}
                 right={column.style.right}
+                cellStyle={column.cellStyle}
                 key={row.uid + column.key}
                 // @ts-ignore
                 onClick={(e) => handleCellClick(row, column, e)}

package/src/types/table.ts

@@ -4,6 +4,11 @@ import type { ShallowRef, Slots, VNode } from 'vue'
 
 export type TableColumnAlign = 'left' | 'center' | 'right'
 
+export interface TableColumnStyle {
+  color?: string
+  fontSize?: number | string
+}
+
 /**
  * 合计上下文
  */
@@ -46,6 +51,10 @@ export interface TableColumn {
    * @default 'left'
    */
   align?: TableColumnAlign
+  /** 表体/表尾单元格样式 */
+  style?: TableColumnStyle
+  /** 表头单元格样式，未指定时取 style */
+  headerStyle?: TableColumnStyle
   /** 列渲染 */
   render?: (scope: TableColumnRenderContext) => RenderReturn
   /** 子列 */
@@ -164,6 +173,9 @@ export interface TableColumnNode extends TreeNode<TableColumn> {
   key: string
   name: string
   align: TableColumnAlign
+  headerAlign: TableColumnAlign
+  cellStyle?: Record<string, string>
+  headerCellStyle?: Record<string, string>
   width: number | undefined
   minWidth: number | undefined
   fixed: 'left' | 'right' | undefined