@ai-table/grid 0.1.43 → 0.1.45

package/components/cell-editors/date/date-editor.component.d.ts

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
 export declare class DateCellEditorComponent extends AbstractEditCellEditor<DateFieldValue> {
     placeholder: string;
     ngOnInit(): void;
-    updateValue(value: number): void;
+    updateValue(timestamp: number): void;
     thyOpenChange(isOpen: Boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateCellEditorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DateCellEditorComponent, "date-cell-editor", never, {}, {}, never, never, true, never>;

package/components/cell-editors/date/date-editor.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-editor.component.d.ts","sourceRoot":"","sources":["../../../../../packages/grid/src/components/cell-editors/date/date-editor.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAI3E,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAEjD,qBAyBa,uBAAwB,SAAQ,sBAAsB,CAAC,cAAc,CAAC;IAC/E,WAAW,SAAM;IAER,QAAQ,IAAI,IAAI;IAazB,WAAW,CAAC,KAAK,EAAE,MAAM;IAUzB,aAAa,CAAC,MAAM,EAAE,OAAO;yCA1BpB,uBAAuB;2CAAvB,uBAAuB;CA+BnC"}
+{"version":3,"file":"date-editor.component.d.ts","sourceRoot":"","sources":["../../../../../packages/grid/src/components/cell-editors/date/date-editor.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAI3E,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAEjD,qBAyBa,uBAAwB,SAAQ,sBAAsB,CAAC,cAAc,CAAC;IAC/E,WAAW,SAAM;IAER,QAAQ,IAAI,IAAI;IAazB,WAAW,CAAC,SAAS,EAAE,MAAM;IAW7B,aAAa,CAAC,MAAM,EAAE,OAAO;yCA3BpB,uBAAuB;2CAAvB,uBAAuB;CAgCnC"}

package/fesm2022/ai-table-grid.mjs

@@ -1731,10 +1731,11 @@ class DateCellEditorComponent extends AbstractEditCellEditor {
         })();
         this.placeholder = getI18nTextByKey(this.aiTable, AITableGridI18nKey.dataPickerPlaceholder);
     }
-    updateValue(value) {
+    updateValue(timestamp) {
+        const value = timestamp ? { timestamp: timestamp } : null;
         this.updateFieldValues.emit([
             {
-                value: { timestamp: value },
+                value,
                 path: [this.record()._id, this.field()._id]
             }
         ]);
@@ -2018,16 +2019,19 @@ function getColumnIndicesSizeMap(aiTable, fields) {
  */
 function getCellHorizontalPosition(options) {
     let { columnWidth, columnIndex, columnCount, depth = 0 } = options;
+    const isGroupAndFirstColumn = depth > 0 && columnIndex === 0;
+    columnWidth = isGroupAndFirstColumn ? columnWidth - AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE : columnWidth;
     depth += 1;
     if (!depth)
         return { width: columnWidth, offset: 0 };
     const firstIndent = columnIndex === 0 && depth;
     const lastIndent = columnIndex === columnCount - 1 && depth === 3;
-    const offset = firstIndent ? (depth - 1) * AI_TABLE_ROW_GROUP_OFFSET + 0.5 : 0;
+    let offset = firstIndent ? (depth - 1) * AI_TABLE_ROW_GROUP_OFFSET + 0.5 : 0;
     const width = lastIndent && !firstIndent ? columnWidth - AI_TABLE_ROW_GROUP_OFFSET : columnWidth - offset;
     return {
         width,
-        offset
+        offset,
+        isGroupAndFirstColumn
     };
 }
 function transformToCellText(cellValue, options) {
@@ -2282,12 +2286,15 @@ function getPlaceHolderCellsConfigs(options) {
             }
             // 当前行的 Y 轴偏移量，并根据列宽和列索引获取单元格的水平位置（宽度和偏移量）
             const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET * 2;
-            const { width, offset } = getCellHorizontalPosition({
+            let { width, offset, isGroupAndFirstColumn } = getCellHorizontalPosition({
                 columnWidth,
                 columnIndex,
                 columnCount,
                 depth
             });
+            if (isGroupAndFirstColumn) {
+                offset += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
+            }
             const height = rowHeight - AI_TABLE_OFFSET * 4;
             configs.unshift({
                 key: `placeholder-cell-${fieldId}-${recordId}`,
@@ -5457,11 +5464,17 @@ const createActiveCellBorder = (config) => {
                 const y = coordinate.getRowOffset(rowIndex);
                 const columnWidth = coordinate.getColumnWidth(columnIndex);
                 const isFrozenColumn = columnIndex < frozenColumnCount;
-                const { offset, width } = getCellHorizontalPosition({
+                const row = aiTable.context?.linearRows()[rowIndex];
+                const depth = row?.depth ?? 0;
+                let { offset, width, isGroupAndFirstColumn } = getCellHorizontalPosition({
                     columnWidth,
                     columnIndex,
-                    columnCount: totalColumnCount
+                    columnCount: totalColumnCount,
+                    depth
                 });
+                if (isGroupAndFirstColumn) {
+                    offset += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
+                }
                 const currentConfig = {
                     x: x + offset + AI_TABLE_OFFSET,
                     y: y + AI_TABLE_OFFSET,
@@ -5661,7 +5674,7 @@ class AddRowLayout extends Layout {
         if (this.isFirst || this.isLast)
             return;
         this.renderCell({
-            width: this.columnWidth,
+            width: this.columnWidth + AI_TABLE_CELL_LINE_BORDER,
             isHoverRow
         });
     }
@@ -6202,13 +6215,13 @@ class CellDrawer extends Drawer {
         }
     }
     renderCellCheckbox(render, ctx) {
-        const { x, y, field, columnWidth, transformValue, isCoverCell } = render;
+        const { x, y, field, columnWidth, transformValue, isCoverCell, isGroupFirstRender } = render;
         if (isCoverCell) {
             return;
         }
         const isChecked = !isEmpty(transformValue) && !!transformValue;
         const checkboxSize = AI_TABLE_ICON_COMMON_SIZE;
-        const checkboxX = x + (columnWidth - checkboxSize) / 2;
+        const checkboxX = isGroupFirstRender ? x + AI_TABLE_CELL_PADDING : x + (columnWidth - checkboxSize) / 2;
         const checkboxY = y + (AI_TABLE_ROW_BLANK_HEIGHT - checkboxSize) / 2;
         this.path({
             x: checkboxX,
@@ -6219,7 +6232,7 @@ class CellDrawer extends Drawer {
         });
     }
     renderCellText(render, ctx) {
-        const { x, y, transformValue, field, columnWidth, style } = render;
+        const { x, y, transformValue, field, columnWidth, style, isGroupFirstRender } = render;
         if (isUndefinedOrNull(transformValue)) {
             return;
         }
@@ -6273,7 +6286,7 @@ class CellDrawer extends Drawer {
                 lineHeight: DEFAULT_TEXT_LINE_HEIGHT,
                 textAlign,
                 verticalAlign: DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE,
-                fillStyle: fieldType === AITableFieldType.link ? Colors.primary : color,
+                fillStyle: fieldType === AITableFieldType.link && !isGroupFirstRender ? Colors.primary : color,
                 fontWeight,
                 textDecoration,
                 fieldType,
@@ -6629,7 +6642,7 @@ class CellDrawer extends Drawer {
         });
     }
     renderCellProgress(render, ctx) {
-        const { x, y, transformValue, columnWidth, style } = render;
+        const { x, y, transformValue, columnWidth, style, isGroupFirstRender } = render;
         const colors = AITable.getColors();
         let validateTransformValue = transformValue;
         if (isUndefinedOrNull(validateTransformValue)) {
@@ -6641,31 +6654,41 @@ class CellDrawer extends Drawer {
         const offsetX = AI_TABLE_CELL_PADDING;
         const offsetY = (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_PROGRESS_BAR_HEIGHT) / 2;
         const textOffsetY = (AI_TABLE_ROW_BLANK_HEIGHT - textHeight) / 2;
-        // 绘制背景
-        this.rect({
-            x: x + offsetX,
-            y: y + offsetY,
-            width,
-            height,
-            radius: AI_TABLE_PROGRESS_BAR_RADIUS,
-            fill: colors.gray200
-        });
-        // 计算并绘制进度
-        const progressWidth = (validateTransformValue / 100) * width;
-        this.rect({
-            x: x + offsetX,
-            y: y + offsetY,
-            width: progressWidth,
-            height,
-            radius: AI_TABLE_PROGRESS_BAR_RADIUS,
-            fill: colors.success
-        });
-        this.text({
-            x: x + offsetX + width + AI_TABLE_TEXT_GAP,
-            y: y + textOffsetY,
-            text: `${validateTransformValue}%`,
-            fillStyle: colors.gray800
-        });
+        if (isGroupFirstRender) {
+            this.text({
+                x: x + offsetX,
+                y: y + textOffsetY,
+                text: `${validateTransformValue}%`,
+                fillStyle: colors.gray800
+            });
+        }
+        else {
+            // 绘制背景
+            this.rect({
+                x: x + offsetX,
+                y: y + offsetY,
+                width,
+                height,
+                radius: AI_TABLE_PROGRESS_BAR_RADIUS,
+                fill: colors.gray200
+            });
+            // 计算并绘制进度
+            const progressWidth = (validateTransformValue / 100) * width;
+            this.rect({
+                x: x + offsetX,
+                y: y + offsetY,
+                width: progressWidth,
+                height,
+                radius: AI_TABLE_PROGRESS_BAR_RADIUS,
+                fill: colors.success
+            });
+            this.text({
+                x: x + offsetX + width + AI_TABLE_TEXT_GAP,
+                y: y + textOffsetY,
+                text: `${validateTransformValue}%`,
+                fillStyle: colors.gray800
+            });
+        }
     }
     renderCellMember(render, ctx) {
         const { references, x, y, field, transformValue, rowHeight, columnWidth, isActive } = render;
@@ -6995,12 +7018,13 @@ class GroupLayout extends Layout {
             });
         }
         const iconContainerWidth = AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
-        if (!isEmpty(groupValue)) {
+        if (!isEmpty(groupValue) || [AITableFieldType.checkbox, AITableFieldType.progress].includes(field.type)) {
             cellDrawer.initStyle(field, style);
             cellDrawer.renderCell({
                 ...render,
                 x: render.x + iconContainerWidth,
-                columnWidth: render.columnWidth - iconContainerWidth
+                columnWidth: render.columnWidth - iconContainerWidth,
+                isGroupFirstRender: true
             }, this.ctx, columnWidth);
         }
         else {
@@ -7141,10 +7165,9 @@ const createCells = (config) => {
                         isHoverRow: isHoverRecord(isHover, targetName),
                         isCheckedRow: isSelectedRecord(recordId, aiTable)
                     });
-                    const isGroupAndFirstColumn = depth > 0 && columnIndex === 0;
-                    const { width, offset } = getCellHorizontalPosition({
+                    const { width, offset, isGroupAndFirstColumn } = getCellHorizontalPosition({
                         columnIndex,
-                        columnWidth: isGroupAndFirstColumn ? columnWidth - AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE : columnWidth,
+                        columnWidth,
                         columnCount,
                         depth
                     });
@@ -7213,12 +7236,15 @@ const createCells = (config) => {
                         frozenColumnCount,
                         xIsScroll
                     });
-                    const { width, offset } = getCellHorizontalPosition({
+                    let { width, offset, isGroupAndFirstColumn } = getCellHorizontalPosition({
                         columnIndex,
                         columnWidth,
                         columnCount,
                         depth
                     });
+                    if (isGroupAndFirstColumn) {
+                        width += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
+                    }
                     const realX = x + offset + AI_TABLE_OFFSET;
                     const realY = y + AI_TABLE_OFFSET;
                     const style = { fontWeight: DEFAULT_FONT_STYLE };
@@ -8969,10 +8995,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 const createGroupCells = (config) => {
     const { coordinate, rowStartIndex, rowStopIndex, columnStartIndex, columnStopIndex, aiTable, actions, readonly } = config;
     const linearRows = aiTable.context?.linearRows();
-    const { columnCount } = coordinate;
+    const { rowCount, columnCount } = coordinate;
     const groups = [];
     for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
-        if (rowIndex > columnCount - 1)
+        if (rowIndex > rowCount - 1)
             break;
         if (rowIndex < 0)
             continue;
@@ -9512,6 +9538,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class AITableGroups {
     constructor() {
         this.config = input.required();
+        this.trackBy = (groupStat) => {
+            return groupStat.groupRow._id + groupStat.columnIndex;
+        };
         this.frozenColumnCount = computed(() => {
             const { coordinate } = this.config();
             return coordinate.frozenColumnCount ?? 0;
@@ -9547,7 +9576,7 @@ class AITableGroups {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGroups, isStandalone: true, selector: "ai-table-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        @for (groupCell of groupCells(); track $index) {
+        @for (groupCell of groupCells(); track trackBy(groupCell.groupStat!)) {
             <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
         }
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -9557,7 +9586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     selector: 'ai-table-groups',
                     template: `
-        @for (groupCell of groupCells(); track $index) {
+        @for (groupCell of groupCells(); track trackBy(groupCell.groupStat!)) {
             <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
         }
     `,
@@ -9745,10 +9774,9 @@ class AITableCoverCellEntry {
             const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
             const columnWidth = coordinate.getColumnWidth(columnIndex);
             const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
-            const isGroupAndFirstColumn = depth > 0 && columnIndex === 0;
-            const { width, offset } = getCellHorizontalPosition({
+            const { width, offset, isGroupAndFirstColumn } = getCellHorizontalPosition({
                 columnIndex,
-                columnWidth: isGroupAndFirstColumn ? columnWidth - AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE : columnWidth,
+                columnWidth,
                 columnCount,
                 depth
             });
@@ -9835,6 +9863,9 @@ class AITableFieldStats {
         this.config = input.required();
         this.hover = output();
         this.isHover = signal(false);
+        this.trackBy = (groupStat) => {
+            return groupStat.columnIndex;
+        };
         this.statConfigs = computed(() => createFieldStats(this.config()));
     }
     onMouseenter(e) {
@@ -9846,7 +9877,7 @@ class AITableFieldStats {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldStats, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldStats, isStandalone: true, selector: "ai-table-column-stats", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
         <ko-group>
-            @for (config of statConfigs(); track $index) {
+            @for (config of statConfigs(); track trackBy(config)) {
                 <ai-table-field-stat [config]="config" (hover)="hover.emit($event)"></ai-table-field-stat>
             }
         </ko-group>
@@ -9858,7 +9889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     selector: 'ai-table-column-stats',
                     template: `
         <ko-group>
-            @for (config of statConfigs(); track $index) {
+            @for (config of statConfigs(); track trackBy(config)) {
                 <ai-table-field-stat [config]="config" (hover)="hover.emit($event)"></ai-table-field-stat>
             }
         </ko-group>
@@ -9955,7 +9986,6 @@ class AITableRenderer {
             return {
                 clipX: 0,
                 clipY: AI_TABLE_FIELD_HEAD_HEIGHT,
-                clipWidth: this.frozenAreaWidth() + AI_TABLE_SHADOW_DEFAULT_WIDTH,
                 clipHeight: this.gridContainerHeight()
             };
         });
@@ -11889,11 +11919,18 @@ class AITableGridEventService {
         const originX = coordinate.getColumnOffset(columnIndex);
         const originY = coordinate.getRowOffset(rowIndex);
         const columnWidth = coordinate.getColumnWidth(columnIndex);
-        const { width: originWidth, offset: originOffset } = getCellHorizontalPosition({
+        const row = aiTable.context?.linearRows()[rowIndex];
+        const depth = row?.depth ?? 0;
+        const isGroupAndFirstColumn = depth > 0 && columnIndex === 0;
+        let { width: originWidth, offset: originOffset } = getCellHorizontalPosition({
             columnWidth,
             columnIndex,
-            columnCount
+            columnCount,
+            depth
         });
+        if (isGroupAndFirstColumn) {
+            originOffset += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
+        }
         const originRect = container.getBoundingClientRect();
         const isFrozenColumn = AITable.isFrozenColumn(aiTable, columnIndex);
         const scrollLeft = isFrozenColumn ? 0 : scrollState().scrollLeft;
@@ -12996,8 +13033,9 @@ class AITableGrid extends AITableGridBase {
             const scrollTop = this.aiTable.context.scrollState().scrollTop;
             const rowIndices = this.toolTipRowIndices();
             return rowIndices.map((rowIndex) => {
+                const offset = this.coordinate().getRowOffset(rowIndex);
                 return {
-                    top: rowIndex * AI_TABLE_ROW_HEIGHT - scrollTop,
+                    top: offset - scrollTop - AI_TABLE_FIELD_HEAD_HEIGHT,
                     left: 0
                 };
             });