@ai-table/grid 0.0.48 → 0.0.50

package/fesm2022/ai-table-grid.mjs

@@ -956,7 +956,7 @@ class Coordinate {
      * 根据 columnIndex 获取对应列宽
      */
     getColumnWidth(index) {
-        return this.columnIndicesSizeMap[index];
+        return this.columnIndicesSizeMap[index] ?? 0;
     }
     /**
      * 获取每个 cell 垂直/水平方向的坐标信息
@@ -980,7 +980,7 @@ class Coordinate {
                 offset = itemMetadata.offset + itemMetadata.size;
             }
             for (let i = lastMeasuredIndex + 1; i <= index; i++) {
-                const size = isColumnType ? this.columnIndicesSizeMap[i] : (this.rowIndicesSizeMap[i] ?? this.rowHeight);
+                const size = isColumnType ? (this.columnIndicesSizeMap[i] ?? 0) : (this.rowIndicesSizeMap[i] ?? this.rowHeight);
                 cellMetadataMap[i] = {
                     offset,
                     size
@@ -2560,13 +2560,13 @@ class AITableFieldMenu extends ThyDropdownAbstractMenu {
         return menu.name || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n            @let isRemoveField = menu.type === 'removeField';\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ getMenuName(menu, field()) }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                    <span>{{ getMenuName(menu, field()) }}</span>\n                </a>\n            }\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'field-menu'
-                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass], template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n            @let isRemoveField = menu.type === 'removeField';\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ getMenuName(menu, field()) }}</span>\n            </a>\n        }\n    }\n}\n" }]
+                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass], template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                    <span>{{ getMenuName(menu, field()) }}</span>\n                </a>\n            }\n        }\n    }\n}\n" }]
         }], propDecorators: { fieldId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3134,7 +3134,7 @@ function hasIntersect(array1, array2) {
 
 class Field {
     // 筛选
-    isMeetFilter(condition, cellValue) {
+    isMeetFilter(condition, cellValue, options) {
         switch (condition.operation) {
             case AITableFilterOperation.empty:
             case AITableFilterOperation.exists: {
@@ -3183,9 +3183,9 @@ class AttachmentField extends Field {
                 return super.isMeetFilter(condition, cellValue);
         }
     }
-    compare(cellValue1, cellValue2, field, references, sortKey) {
-        const value1 = cellValueToSortValue$5(cellValue1, field, references, sortKey);
-        const value2 = cellValueToSortValue$5(cellValue2, field, references, sortKey);
+    compare(cellValue1, cellValue2, references, sortKey, options) {
+        const value1 = cellValueToSortValue$5(cellValue1, options.field, references, sortKey);
+        const value2 = cellValueToSortValue$5(cellValue2, options.field, references, sortKey);
         return compareString(value1, value2);
     }
     cellFullText(transformValue, field, references) {
@@ -3416,9 +3416,9 @@ class MemberField extends Field {
                 return super.isMeetFilter(condition, cellValue);
         }
     }
-    compare(cellValue1, cellValue2, field, references, sortKey) {
-        const value1 = cellValueToSortValue$2(cellValue1, field, references, sortKey);
-        const value2 = cellValueToSortValue$2(cellValue2, field, references, sortKey);
+    compare(cellValue1, cellValue2, references, sortKey, options) {
+        const value1 = cellValueToSortValue$2(cellValue1, options.field, references, sortKey);
+        const value2 = cellValueToSortValue$2(cellValue2, options.field, references, sortKey);
         return compareString(value1, value2);
     }
     cellFullText(transformValue, field, references) {
@@ -3675,6 +3675,39 @@ function toRateFieldValue(plainText, targetField, originData) {
     return null;
 }
 
+class RichTextField extends Field {
+    isMeetFilter(condition, cellValue, options) {
+        const textValue = transformCellValue(options.aiTable, options.field, cellValue || []);
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+                return isEmpty(textValue);
+            case AITableFilterOperation.exists:
+                return !isEmpty(textValue);
+            case AITableFilterOperation.contain:
+                return !isEmpty(textValue) && stringInclude(textValue, condition.value);
+            default:
+                return super.isMeetFilter(condition, textValue);
+        }
+    }
+    compare(cellValue1, cellValue2, references, sortKey, options) {
+        const value1 = transformCellValue(options.aiTable, options.field, cellValue1 || []);
+        const value2 = transformCellValue(options.aiTable, options.field, cellValue2 || []);
+        return compareString(value1, value2);
+    }
+    toFieldValue(plainText, targetField, originData) {
+        return toRichTextFieldValue(plainText, targetField, originData);
+    }
+}
+function toRichTextFieldValue(plainText, targetField, originData) {
+    if (originData) {
+        const { field, cellValue } = originData;
+        if (field.type === AITableFieldType.richText) {
+            return cellValue;
+        }
+    }
+    return null;
+}
+
 class SelectField extends Field {
     isMeetFilter(condition, cellValue) {
         switch (condition.operation) {
@@ -3690,9 +3723,9 @@ class SelectField extends Field {
                 return super.isMeetFilter(condition, cellValue);
         }
     }
-    compare(cellValue1, cellValue2, field) {
-        const value1 = cellValueToSortValue$1(cellValue1, field);
-        const value2 = cellValueToSortValue$1(cellValue2, field);
+    compare(cellValue1, cellValue2, references, sortKey, options) {
+        const value1 = cellValueToSortValue$1(cellValue1, options.field);
+        const value2 = cellValueToSortValue$1(cellValue2, options.field);
         return compareString(value1, value2);
     }
     cellFullText(transformValue, field) {
@@ -3839,7 +3872,7 @@ function cellValueToSortValue(cellValue) {
 
 const FieldModelMap = {
     [AITableFieldType.text]: new TextField(),
-    [AITableFieldType.richText]: new TextField(),
+    [AITableFieldType.richText]: new RichTextField(),
     [AITableFieldType.select]: new SelectField(),
     [AITableFieldType.date]: new DateField(),
     [AITableFieldType.createdAt]: new DateField(),
@@ -4211,7 +4244,7 @@ const getHoverEditorBoxOffset = () => {
     return borderSpace / 2;
 };
 
-const handleMouseStyle = (realTargetName, areaType = AITableAreaType.grid, container) => {
+const handleMouseStyle = (realTargetName, areaType = AITableAreaType.grid, container, isReadOnly) => {
     const { targetName, mouseStyle } = getDetailByTargetName(realTargetName);
     if (mouseStyle)
         return setMouseStyle(mouseStyle, container);
@@ -4226,6 +4259,9 @@ const handleMouseStyle = (realTargetName, areaType = AITableAreaType.grid, conta
             return setMouseStyle('pointer', container);
         }
         case AI_TABLE_FIELD_HEAD_OPACITY_LINE: {
+            if (isReadOnly) {
+                return setMouseStyle('default', container);
+            }
             return setMouseStyle('col-resize', container);
         }
         default:
@@ -6775,10 +6811,13 @@ class AITableAddField {
         this.rectConfig = computed(() => {
             const { pointPosition: { targetName }, readonly } = this.config();
             const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
+            const fields = this.config().fields || [];
+            const index = this.config().columnStopIndex;
+            const fieldId = fields.length && index < fields.length ? fields[index]._id : '';
             return {
                 name: generateTargetName({
                     targetName: AI_TABLE_FIELD_ADD_BUTTON,
-                    fieldId: this.config().fields[this.config().columnStopIndex]._id,
+                    fieldId,
                     mouseStyle: readonly ? 'default' : 'pointer'
                 }),
                 x: AI_TABLE_OFFSET,
@@ -7813,7 +7852,7 @@ const createCells = (config) => {
         // 获取该列对应的宽度
         const columnWidth = coordinate.getColumnWidth(columnIndex);
         const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
-        const isLastColumn = columnIndex === aiTable.fields.length - 1;
+        const isLastColumn = columnIndex === aiTable.gridData().fields?.length - 1;
         if (columnIndex === 1) {
             cellDrawer.initStyle(field, { fontWeight: DEFAULT_FONT_STYLE });
         }
@@ -8996,6 +9035,8 @@ class AITableDragComponent {
         this.draggedData = null;
         this.mouseStartPosition = null;
         this.aiTableDrag = null;
+        this.mouseDownTimeout = null;
+        this.isDraggingEnabled = false;
         effect(() => this.handleDragStateChange());
     }
     ngOnInit() {
@@ -9009,8 +9050,18 @@ class AITableDragComponent {
     setupEventListeners() {
         this.mousedownListener = this.render2.listen('window', 'mousedown', (e) => {
             this.mouseStartPosition = { x: e.x, y: e.y };
+            if (this.mouseDownTimeout) {
+                clearTimeout(this.mouseDownTimeout);
+            }
+            this.isDraggingEnabled = false;
+            this.mouseDownTimeout = setTimeout(() => {
+                this.isDraggingEnabled = true;
+            }, 200);
         });
         this.mousemoveListener = this.render2.listen('window', 'mousemove', (e) => {
+            if (!this.isDraggingEnabled) {
+                return;
+            }
             if (this.timer) {
                 cancelAnimationFrame(this.timer);
             }
@@ -9021,6 +9072,11 @@ class AITableDragComponent {
             });
         });
         this.mouseupListener = this.render2.listen('window', 'mouseup', () => {
+            if (this.mouseDownTimeout) {
+                clearTimeout(this.mouseDownTimeout);
+                this.mouseDownTimeout = null;
+            }
+            this.isDraggingEnabled = false;
             this.mouseStartPosition = null;
             this.aiTableDrag = null;
             this.handleDragEnd();
@@ -9135,11 +9191,26 @@ class AITableDragComponent {
         };
     }
     handleDragEnd() {
-        this.setDisplayStyle('none');
         if (this.draggedData) {
             this.dragEnd.emit({ ...this.draggedData });
-            this.draggedData = null;
         }
+        this.clearDragState();
+    }
+    clearDragState() {
+        this.setDisplayStyle('none');
+        this.setRectStyles({
+            width: '0',
+            height: '0',
+            top: '0',
+            left: '0'
+        });
+        this.setAuxiliaryLineStyles({
+            width: '0',
+            height: '0',
+            top: '0',
+            left: '0'
+        });
+        this.draggedData = null;
     }
     calculateDragWidth(fields, coordinate, drag) {
         let width = 0;
@@ -9373,7 +9444,7 @@ class AITableGrid extends AITableGridBase {
             const { context } = this.aiTable;
             const { x, y } = pos;
             const curMousePosition = getMousePosition(this.aiTable, x, y, this.coordinate(), AITable.getVisibleFields(this.aiTable), context, targetName);
-            handleMouseStyle(curMousePosition.realTargetName, curMousePosition.areaType, this.containerElement());
+            handleMouseStyle(curMousePosition.realTargetName, curMousePosition.areaType, this.containerElement(), this.aiReadonly());
             context.setPointPosition(curMousePosition);
             this.timer = null;
             if (this.isDragSelecting) {
@@ -9410,12 +9481,7 @@ class AITableGrid extends AITableGridBase {
                 mouseEvent.preventDefault();
                 if (!fieldId)
                     return;
-                this.aiTableGridSelectionService.drag({
-                    type: DragType.columnWidth,
-                    sourceIds: new Set([fieldId]),
-                    scroll: this.getScrollPosition(),
-                    coordinate: this.coordinate()
-                });
+                this.handleFieldWidthDragStart(fieldId);
                 return;
             case AI_TABLE_CELL:
                 if (!recordId || !fieldId)
@@ -9467,6 +9533,11 @@ class AITableGrid extends AITableGridBase {
         });
     }
     stageClick(e) {
+        const targetNameDetail = getDetailByTargetName(e.event.target.name());
+        this.aiClick.emit({
+            ...e,
+            targetNameDetail
+        });
         const mouseEvent = e.event.evt;
         mouseEvent.preventDefault();
         this.aiTableGridEventService.closeCellEditor();
@@ -9528,21 +9599,16 @@ class AITableGrid extends AITableGridBase {
                 }
                 break;
         }
-        const targetNameDetail = getDetailByTargetName(e.event.target.name());
-        this.aiClick.emit({
-            ...e,
-            targetNameDetail
-        });
         return;
     }
     stageDblclick(e) {
         const _targetName = e.event.target.name();
         const targetNameDetail = getDetailByTargetName(_targetName);
+        this.aiDbClick.emit({
+            ...e,
+            targetNameDetail
+        });
         if (this.aiReadonly()) {
-            this.aiDbClick.emit({
-                ...e,
-                targetNameDetail
-            });
             return;
         }
         const { fieldId, recordId } = targetNameDetail;
@@ -9566,12 +9632,6 @@ class AITableGrid extends AITableGridBase {
                 });
             }, 0);
         }
-        else {
-            this.aiDbClick.emit({
-                ...e,
-                targetNameDetail
-            });
-        }
     }
     bindWheel() {
         fromEvent(this.containerElement(), 'wheel', { passive: false })
@@ -9739,6 +9799,16 @@ class AITableGrid extends AITableGridBase {
             });
         }
     }
+    handleFieldWidthDragStart(fieldId) {
+        if (!this.aiReadonly() && fieldId) {
+            this.aiTableGridSelectionService.drag({
+                type: DragType.columnWidth,
+                sourceIds: new Set([fieldId]),
+                scroll: this.getScrollPosition(),
+                coordinate: this.coordinate()
+            });
+        }
+    }
     getScrollPosition() {
         const horizontalBar = this.horizontalBarRef()?.nativeElement;
         const verticalBar = this.verticalBarRef()?.nativeElement;