@ai-table/grid 0.1.44 → 0.1.45

package/fesm2022/ai-table-grid.mjs

@@ -5674,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
         });
     }
@@ -6642,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)) {
@@ -6654,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;
@@ -7008,7 +7018,7 @@ class GroupLayout extends Layout {
             });
         }
         const iconContainerWidth = AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
-        if (!isEmpty(groupValue) || field.type === AITableFieldType.checkbox) {
+        if (!isEmpty(groupValue) || [AITableFieldType.checkbox, AITableFieldType.progress].includes(field.type)) {
             cellDrawer.initStyle(field, style);
             cellDrawer.renderCell({
                 ...render,
@@ -9528,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;
@@ -9563,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 }); }
@@ -9573,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>
         }
     `,
@@ -9850,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) {
@@ -9861,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>
@@ -9873,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>
@@ -9970,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()
             };
         });