@ai-table/grid 0.0.36 → 0.0.38

package/fesm2022/ai-table-grid.mjs

@@ -32,7 +32,7 @@ import { ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { ThySelect } from 'ngx-tethys/select';
 import { ThyTag } from 'ngx-tethys/tag';
-import { ThyDropdownDirective, ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemNameDirective, ThyDropdownAbstractMenu, ThyDropdownMenuItemIconDirective } from 'ngx-tethys/dropdown';
+import { ThyDropdownDirective, ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemNameDirective, ThyDropdownAbstractMenu } from 'ngx-tethys/dropdown';
 import { ThyListItem } from 'ngx-tethys/list';
 import { of, Subject, fromEvent, debounceTime, mergeWith, filter } from 'rxjs';
 import * as i4 from 'ngx-tethys/avatar';
@@ -200,14 +200,14 @@ const FieldOptions = [
         type: AITableFieldType.text,
         name: '单行文本',
         icon: 'font',
-        width: 200
+        width: 300
     },
     // 多行文本
     {
         type: AITableFieldType.select,
         name: '单选',
         icon: 'check-circle',
-        width: 200
+        width: 160
     },
     {
         type: AITableFieldType.select,
@@ -222,7 +222,7 @@ const FieldOptions = [
         type: AITableFieldType.number,
         name: '数字',
         icon: 'hashtag',
-        width: 200
+        width: 140
     },
     {
         type: AITableFieldType.date,
@@ -234,7 +234,7 @@ const FieldOptions = [
         type: AITableFieldType.member,
         name: '单个成员',
         icon: 'user',
-        width: 200
+        width: 160
     },
     {
         type: AITableFieldType.member,
@@ -257,19 +257,19 @@ const FieldOptions = [
         type: AITableFieldType.rate,
         name: '评分',
         icon: 'star-circle',
-        width: 200
+        width: 160
     },
     {
         type: AITableFieldType.link,
         name: '链接',
         icon: 'link-insert',
-        width: 300
+        width: 200
     },
     {
         type: AITableFieldType.createdBy,
         name: '创建人',
         icon: 'user',
-        width: 200
+        width: 160
     },
     {
         type: AITableFieldType.createdAt,
@@ -281,7 +281,7 @@ const FieldOptions = [
         type: AITableFieldType.updatedBy,
         name: '更新人',
         icon: 'user',
-        width: 200
+        width: 160
     },
     {
         type: AITableFieldType.updatedAt,
@@ -917,7 +917,7 @@ class DateCellEditorComponent extends AbstractEditCellEditor {
         <thy-date-picker
             class="h-100"
             thyTimestampPrecision="seconds"
-            thyPlaceHolder="选择时间"
+            thyPlaceHolder="选择日期"
             [ngModel]="modelValue.timestamp"
             (ngModelChange)="updateValue($event)"
             (thyOpenChange)="thyOpenChange($event)"
@@ -939,7 +939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         <thy-date-picker
             class="h-100"
             thyTimestampPrecision="seconds"
-            thyPlaceHolder="选择时间"
+            thyPlaceHolder="选择日期"
             [ngModel]="modelValue.timestamp"
             (ngModelChange)="updateValue($event)"
             (thyOpenChange)="thyOpenChange($event)"
@@ -1399,7 +1399,7 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectCellEditorComponent, isStandalone: true, selector: "select-cell-editor", host: { classAttribute: "d-block h-100 select-cell-editor" }, usesInheritance: true, ngImport: i0, template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"true\"\n    [thyAllowClear]=\"true\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (thyOnExpandStatusChange)=\"updateValue($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option [thyValue]=\"option._id\" [thyRawValue]=\"option\" [thyShowOptionCustom]=\"true\" [thyLabelText]=\"option.text\">\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "ngmodule", type: ThyEmptyModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectCellEditorComponent, isStandalone: true, selector: "select-cell-editor", host: { classAttribute: "d-block h-100 select-cell-editor" }, usesInheritance: true, ngImport: i0, template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"true\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (thyOnExpandStatusChange)=\"updateValue($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option [thyValue]=\"option._id\" [thyRawValue]=\"option\" [thyShowOptionCustom]=\"true\" [thyLabelText]=\"option.text\">\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "ngmodule", type: ThyEmptyModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectCellEditorComponent, decorators: [{
             type: Component,
@@ -1418,7 +1418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SelectOptionPipe,
                         SelectOptionComponent,
                         ThyEmptyModule
-                    ], template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"true\"\n    [thyAllowClear]=\"true\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (thyOnExpandStatusChange)=\"updateValue($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option [thyValue]=\"option._id\" [thyRawValue]=\"option\" [thyShowOptionCustom]=\"true\" [thyLabelText]=\"option.text\">\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n" }]
+                    ], template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"true\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (thyOnExpandStatusChange)=\"updateValue($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option [thyValue]=\"option._id\" [thyRawValue]=\"option\" [thyShowOptionCustom]=\"true\" [thyLabelText]=\"option.text\">\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n" }]
         }], ctorParameters: () => [] });
 
 class TextCellEditorComponent extends AbstractEditCellEditor {
@@ -1663,18 +1663,18 @@ class AITableGridSelectionService {
     }
     selectCells(startCell, endCell) {
         const [startRecordId, startFieldId] = startCell;
-        const records = this.aiTable.records();
-        const fields = this.aiTable.fields();
+        const records = this.aiTable.context.linearRows();
+        const fields = AITable.getVisibleFields(this.aiTable);
         const selectedCells = new Set();
         if (!endCell) {
             selectedCells.add(`${startRecordId}:${startFieldId}`);
         }
         else {
             const [endRecordId, endFieldId] = endCell;
-            const startRowIndex = records.findIndex((record) => record._id === startRecordId);
-            const endRowIndex = records.findIndex((record) => record._id === endRecordId);
-            const startColIndex = fields.findIndex((field) => field._id === startFieldId);
-            const endColIndex = fields.findIndex((field) => field._id === endFieldId);
+            const startRowIndex = this.aiTable.context.visibleRowsIndexMap().get(startRecordId);
+            const endRowIndex = this.aiTable.context.visibleRowsIndexMap().get(endRecordId);
+            const startColIndex = this.aiTable.context.visibleColumnsIndexMap().get(startFieldId);
+            const endColIndex = this.aiTable.context.visibleColumnsIndexMap().get(endFieldId);
             const minRowIndex = Math.min(startRowIndex, endRowIndex);
             const maxRowIndex = Math.max(startRowIndex, endRowIndex);
             const minColIndex = Math.min(startColIndex, endColIndex);
@@ -1894,15 +1894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Component,
             args: [{ selector: 'ai-table-field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'field-menu'
-                    }, imports: [
-                        ThyIcon,
-                        ThyDivider,
-                        ThyDropdownMenuComponent,
-                        ThyDropdownMenuItemDirective,
-                        ThyDropdownMenuItemNameDirective,
-                        ThyDropdownMenuItemIconDirective,
-                        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>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n" }]
+                    }, 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>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n" }]
         }], propDecorators: { fieldId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3210,6 +3202,12 @@ class AITableText {
         this.koMouseMove = output();
         this.textConfig = computed(() => {
             const { x, y, width, height, text, padding, align = DEFAULT_TEXT_ALIGN_LEFT, verticalAlign = DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, fill = DEFAULT_TEXT_FILL, textDecoration, fontSize = DEFAULT_FONT_SIZE, fontStyle = DEFAULT_FONT_STYLE, ellipsis = DEFAULT_TEXT_ELLIPSIS, wrap = DEFAULT_TEXT_WRAP, transformsEnabled = DEFAULT_TEXT_TRANSFORMS_ENABLED, listening = DEFAULT_TEXT_LISTENING, fontFamily = DEFAULT_FONT_FAMILY, ...rest } = this.config();
+            const tmpText = new Konva.Text({
+                text,
+                fontSize,
+                fontFamily
+            });
+            const textBounds = tmpText.getClientRect();
             return {
                 x,
                 y,
@@ -3228,6 +3226,12 @@ class AITableText {
                 transformsEnabled,
                 listening,
                 fontFamily,
+                hitFunc: function (context) {
+                    context.beginPath();
+                    context.rect(AI_TABLE_OFFSET, (height - textBounds.height) / 2 - AI_TABLE_OFFSET, textBounds.width, textBounds.height);
+                    context.closePath();
+                    context.fillStrokeShape(this);
+                },
                 ...rest
             };
         });
@@ -4220,6 +4224,7 @@ class AITableCellLink {
                     lineHeight: 1.84,
                     listening: true,
                     ellipsis: true,
+                    textDecoration: 'underline',
                     zIndex
                 };
             }
@@ -4282,8 +4287,9 @@ function getHoverCell(aiTable) {
     if (!recordId || !fieldId) {
         return;
     }
+    const record = aiTable.recordsMap()[recordId];
     const field = aiTable.fieldsMap()[fieldId];
-    if (!field || !recordId || !fieldId) {
+    if (!record || !field || !recordId || !fieldId) {
         return;
     }
     const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, fieldId]);