@ai-table/grid 0.1.28 → 0.1.30

package/core/utils/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/core/utils/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAoB,MAAM,eAAe,CAAC;AACzE,OAAO,EAAgB,aAAa,EAAiB,cAAc,EAAE,YAAY,EAAY,MAAM,iBAAiB,CAAC;AAErH,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,wBAAgB,aAAa,CACzB,OAAO,EAAE,cAAc,CAAC,cAAc,CAAC,EACvC,MAAM,EAAE,cAAc,CAAC,aAAa,CAAC,EACrC,QAAQ,EAAE,MAAM,CAAC,YAAY,CAAC,GAC/B,OAAO,CAwCT;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAahF"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/core/utils/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAoB,MAAM,eAAe,CAAC;AACzE,OAAO,EAAgB,aAAa,EAAiB,cAAc,EAAE,YAAY,EAAY,MAAM,iBAAiB,CAAC;AAErH,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,wBAAgB,aAAa,CACzB,OAAO,EAAE,cAAc,CAAC,cAAc,CAAC,EACvC,MAAM,EAAE,cAAc,CAAC,aAAa,CAAC,EACrC,QAAQ,EAAE,MAAM,CAAC,YAAY,CAAC,GAC/B,OAAO,CAyCT;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAahF"}

package/fesm2022/ai-table-grid.mjs

@@ -1354,6 +1354,7 @@ function createAITable(records, fields, gridData) {
             selectedCells: new Set(),
             activeCell: null,
             expandCell: null,
+            editingCell: null,
             selectAllState: AITableSelectAllState.none
         }),
         keywordsMatchedCells: signal(new Set()),
@@ -8789,11 +8790,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class AITableFillHandle {
     constructor() {
         this.config = input.required();
-        this.hasSelectedCells = computed(() => {
-            return this.config().aiTable.selection().selectedCells.size > 0;
-        });
-        this.readonly = computed(() => {
-            return this.config().readonly;
+        this.showFillHandle = computed(() => {
+            const { aiTable, readonly } = this.config();
+            const selection = aiTable.selection();
+            const hasSelectedCells = selection.selectedCells.size > 0;
+            const isExpandCell = selection.expandCell;
+            const isEditingCell = selection.editingCell;
+            return hasSelectedCells && !readonly && !isEditingCell && !isExpandCell;
         });
         this.handleConfig = computed(() => {
             const { aiTable, coordinate } = this.config();
@@ -8826,7 +8829,7 @@ class AITableFillHandle {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFillHandle, isStandalone: true, selector: "ai-table-fill-handle", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        @if (hasSelectedCells() && !readonly()) {
+        @if (showFillHandle()) {
             <ko-rect [config]="handleConfig()"></ko-rect>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }] }); }
@@ -8836,7 +8839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     selector: 'ai-table-fill-handle',
                     template: `
-        @if (hasSelectedCells() && !readonly()) {
+        @if (showFillHandle()) {
             <ko-rect [config]="handleConfig()"></ko-rect>
         }
     `,
@@ -9022,20 +9025,6 @@ class AITableFieldStat {
             const { width } = this.config();
             return width - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_CELL_PADDING;
         });
-        this.textData = computed(() => {
-            const textString = this.renderText() || '';
-            const availableTextWidth = this.availableTextWidth();
-            const { text, textWidth } = drawer.textEllipsis({
-                text: textString,
-                maxWidth: availableTextWidth,
-                fontSize: DEFAULT_FONT_SIZE,
-                fontWeight: DEFAULT_FONT_WEIGHT
-            });
-            return {
-                width: textWidth,
-                text
-            };
-        });
         this.groupConfig = computed(() => {
             return {
                 x: this.config().x,
@@ -9061,7 +9050,7 @@ class AITableFieldStat {
                 opacity: 1,
                 listening: !readonly
             };
-            if (this.renderText()) {
+            if (this.renderTexts()) {
                 config.borders = [false, true, false, true];
                 config.stroke = Colors.gray200;
                 config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
@@ -9098,53 +9087,119 @@ class AITableFieldStat {
             const aiTable = this.aiTable();
             return {
                 field: this.field(),
-                aiTable
+                aiTable,
+                getFieldValue: (record, options) => {
+                    const { aiTable, field } = options;
+                    const cellValue = AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
+                    return transformToCellText(cellValue, options);
+                }
             };
         });
         this.isActiveOrHover = computed(() => {
             return this.isActive() || this.isHover();
         });
-        this.renderText = computed(() => {
+        this.renderTexts = computed(() => {
+            const { height, width } = this.containerBox();
             const field = this.field();
             const records = this.records();
             const fieldModel = FieldModelMap[field.type];
             const selectedInfo = this.selectedInfo();
+            let resultString = null;
+            let formatString = null;
+            let statValue = '';
             if (this.isFirstColumn() && selectedInfo.isSelected) {
                 if (selectedInfo.selectedType === 'records') {
-                    const result = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedRecordsCount);
-                    return result.replace('{count}', selectedInfo.selectedCount.toString());
+                    formatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedRecordsCount);
                 }
                 else {
-                    const result = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedCellsCount);
-                    return result.replace('{count}', selectedInfo.selectedCount.toString());
+                    formatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedCellsCount);
                 }
+                resultString = formatString.replace('{count}', `${selectedInfo.selectedCount.toString()}`);
+                statValue = selectedInfo.selectedCount.toString();
             }
             else {
-                let result = fieldModel.getStatFormatValue(records, this.options());
-                if (!result && this.isActiveOrHover()) {
-                    result = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
+                statValue = fieldModel.stat(records, this.options());
+                if (!isUndefinedOrNull(statValue)) {
+                    formatString = fieldModel.getFormat(this.field(), this.aiTable());
+                    if (formatString) {
+                        resultString = formatString.replace('{{statValue}}', `${statValue.toString()}`);
+                        statValue = statValue.toString();
+                    }
+                }
+                else if (this.isActiveOrHover()) {
+                    formatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
+                    resultString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
                 }
-                return result;
             }
+            if (!resultString) {
+                return null;
+            }
+            const { text, textWidth } = drawer.textEllipsis({
+                text: resultString,
+                maxWidth: width - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_CELL_PADDING,
+                fontSize: DEFAULT_FONT_SIZE,
+                fontWeight: DEFAULT_FONT_WEIGHT
+            });
+            return {
+                texts: text.split(' '),
+                totalWidth: textWidth,
+                statValue: statValue || ''
+            };
         });
         this.containerBox = computed(() => {
             const { height, width } = this.config();
             return { height, width };
         });
-        this.textConfig = computed(() => {
+        this.textsConfig = computed(() => {
             const { height, width } = this.containerBox();
-            const text = this.renderText();
-            if (text) {
-                const renderWidth = this.textData().width;
-                return {
-                    x: width - AI_TABLE_ACTION_COMMON_SIZE - renderWidth,
-                    y: 0,
-                    width: renderWidth,
-                    height: height,
-                    text: this.textData().text,
-                    lineHeight: AI_TABLE_TEXT_LINE_HEIGHT,
-                    listening: false
-                };
+            const renderTexts = this.renderTexts();
+            const result = [];
+            let previousColor = Colors.gray700;
+            if (renderTexts) {
+                const { texts, totalWidth, statValue } = renderTexts;
+                let remainingWidth = width - AI_TABLE_ACTION_COMMON_SIZE;
+                for (const [index, text] of texts.entries()) {
+                    if (remainingWidth <= 0) {
+                        break;
+                    }
+                    let isLast = index === texts.length - 1;
+                    let isStatValue = statValue.includes(text.replace('%', '').replace('…', ''));
+                    let isEllipsis = text === '…';
+                    const { text: renderText, textWidth } = drawer.textEllipsis({
+                        text: isLast ? text : `${text} `,
+                        maxWidth: remainingWidth,
+                        fontSize: DEFAULT_FONT_SIZE,
+                        fontWeight: DEFAULT_FONT_WEIGHT
+                    });
+                    remainingWidth -= textWidth;
+                    let fill;
+                    if (isStatValue) {
+                        fill = Colors.gray700;
+                    }
+                    else if (isEllipsis) {
+                        fill = previousColor;
+                    }
+                    else {
+                        fill = Colors.gray600;
+                    }
+                    result.push({
+                        x: 0,
+                        y: 0,
+                        width: textWidth,
+                        height: height,
+                        fill,
+                        text: renderText,
+                        lineHeight: AI_TABLE_TEXT_LINE_HEIGHT,
+                        listening: false
+                    });
+                    previousColor = fill;
+                }
+                let startX = width - AI_TABLE_ACTION_COMMON_SIZE - totalWidth;
+                result.forEach((item) => {
+                    item.x = startX;
+                    startX += item.width;
+                });
+                return result;
             }
             return null;
         });
@@ -9228,9 +9283,9 @@ class AITableFieldStat {
         });
         ref.componentInstance.menuClick.subscribe((event) => {
             this.isActive.set(false);
-            actions.setField({
-                ...event.field,
-                stat_type: event.menu.type
+            actions.setFieldStatType({
+                path: [field._id],
+                statType: event.menu.type
             });
         });
         ref.afterClosed().subscribe(() => {
@@ -9249,8 +9304,10 @@ class AITableFieldStat {
             ></ai-table-background>
 
             <ko-group>
-                @if (textConfig()) {
-                    <ai-table-text [config]="textConfig()!"></ai-table-text>
+                @if (textsConfig()) {
+                    @for (textConfig of textsConfig(); track $index) {
+                        <ai-table-text [config]="textConfig"></ai-table-text>
+                    }
                     <ai-table-icon [config]="iconConfig()"></ai-table-icon>
                 }
             </ko-group>
@@ -9271,8 +9328,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             ></ai-table-background>
 
             <ko-group>
-                @if (textConfig()) {
-                    <ai-table-text [config]="textConfig()!"></ai-table-text>
+                @if (textsConfig()) {
+                    @for (textConfig of textsConfig(); track $index) {
+                        <ai-table-text [config]="textConfig"></ai-table-text>
+                    }
                     <ai-table-icon [config]="iconConfig()"></ai-table-icon>
                 }
             </ko-group>
@@ -10304,7 +10363,11 @@ function performFill(aiTable, sourceCells, mouseUpRecordId, actions) {
     const startFieldIndex = visibleColumnsIndexMap.get(sourceStartCell[1]);
     const endFieldIndex = visibleColumnsIndexMap.get(sourceEndCell[1]);
     for (let index = startFieldIndex; index <= endFieldIndex; index++) {
-        const fieldId = fields[index]._id;
+        const field = fields[index];
+        const fieldId = field._id;
+        if (isSystemField(field)) {
+            continue;
+        }
         for (let rowIndex = targetStartRowIndex; rowIndex <= targetEndRowIndex; rowIndex++) {
             const targetRecordId = linearRows[rowIndex]._id;
             const relativeRowIndex = direction === 'downward' ? rowIndex - targetStartRowIndex : targetEndRowIndex - rowIndex;
@@ -10498,6 +10561,7 @@ class AITableGridSelectionService {
             selectedCells: new Set(),
             activeCell: null,
             expandCell: null,
+            editingCell: null,
             selectAllState: AITableSelectAllState.none
         });
     }
@@ -10510,6 +10574,12 @@ class AITableGridSelectionService {
             expandCell: expandCell
         });
     }
+    setEditingCell(editingCell) {
+        this.aiTable.selection.set({
+            ...this.aiTable.selection(),
+            editingCell: editingCell
+        });
+    }
     selectField(fieldId) {
         if (this.aiTable.selection().selectedFields.has(fieldId)) {
             return;
@@ -10537,6 +10607,7 @@ class AITableGridSelectionService {
             selectedCells: new Set(),
             activeCell: null,
             expandCell: null,
+            editingCell: null,
             selectAllState: this.selectAllState()
         });
     }
@@ -10680,6 +10751,7 @@ class AITableGridEventService {
         this.globalMousedownEvent$ = new Subject();
         this.destroyRef = inject(DestroyRef);
         this.thyPopover = inject(ThyPopover);
+        this.selectionService = inject(AITableGridSelectionService);
     }
     initialize(aiTable, aiFieldRenderers) {
         this.aiTable = aiTable;
@@ -10798,6 +10870,7 @@ class AITableGridEventService {
         const fieldType = this.aiTable.fieldsMap()[fieldId].type;
         const { component, isInternalComponent } = this.getEditorComponent(fieldType);
         const offsetOriginPosition = this.getOriginPosition(aiTable, options);
+        this.selectionService.setEditingCell([recordId, fieldId]);
         this.cellEditorPopoverRef = this.thyPopover.open(component, {
             viewContainerRef: isInternalComponent ? undefined : options?.viewContainerRef,
             origin: container,
@@ -10845,6 +10918,7 @@ class AITableGridEventService {
             this.cellEditorPopoverRef.afterClosed().subscribe(() => {
                 wheelEvent.unsubscribe();
                 this.cellEditorPopoverRef = null;
+                this.selectionService.setEditingCell(null);
             });
             this.cellEditorPopoverRef.componentInstance.updateFieldValues.subscribe((value) => {
                 options.updateFieldValues(value);
@@ -10856,6 +10930,7 @@ class AITableGridEventService {
         if (this.cellEditorPopoverRef) {
             this.cellEditorPopoverRef.close();
             this.cellEditorPopoverRef = null;
+            this.selectionService.setEditingCell(null);
         }
     }
     getCurrentEditCell() {
@@ -11017,6 +11092,7 @@ class AITableGridBase {
         this.aiUpdateFieldValues = output();
         this.aiSetField = output();
         this.aiSetFieldWidth = output();
+        this.aiSetFieldStatType = output();
         this.aiMoveRecords = output();
         this.aiClick = output();
         this.aiDbClick = output();
@@ -11123,7 +11199,7 @@ class AITableGridBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiFieldsSizeMap: { classPropertyName: "aiFieldsSizeMap", publicName: "aiFieldsSizeMap", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiFieldsSizeMap: "aiFieldsSizeMapChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiFieldsSizeMap: { classPropertyName: "aiFieldsSizeMap", publicName: "aiFieldsSizeMap", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiFieldsSizeMap: "aiFieldsSizeMapChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridBase, decorators: [{
             type: Component,
@@ -11910,6 +11986,9 @@ class AITableGrid extends AITableGridBase {
             setField: (field) => {
                 this.aiSetField.emit(field);
             },
+            setFieldStatType: (data) => {
+                this.aiSetFieldStatType.emit(data);
+            },
             addField: (data) => {
                 this.aiAddField.emit(data);
             },