@ai-table/grid 0.0.30 → 0.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/{field-property-editor/field-property-editor.component.d.ts → field-setting/field-setting.component.d.ts} +4 -4
- package/components/field-setting/field-setting.component.d.ts.map +1 -0
- package/components/{field-property-editor/field-property-editor.component.scss → field-setting/field-setting.component.scss} +1 -1
- package/components/index.d.ts +1 -1
- package/components/index.d.ts.map +1 -1
- package/core/context.d.ts +4 -2
- package/core/context.d.ts.map +1 -1
- package/core/coordinate.d.ts +3 -3
- package/core/coordinate.d.ts.map +1 -1
- package/core/types/ai-table.d.ts +2 -2
- package/core/types/ai-table.d.ts.map +1 -1
- package/core/utils/common.d.ts.map +1 -1
- package/esm2022/components/field-setting/field-setting.component.mjs +102 -0
- package/esm2022/components/index.mjs +2 -2
- package/esm2022/core/context.mjs +5 -3
- package/esm2022/core/coordinate.mjs +9 -9
- package/esm2022/core/types/ai-table.mjs +10 -3
- package/esm2022/core/utils/common.mjs +2 -3
- package/esm2022/dom-grid.component.mjs +3 -3
- package/esm2022/grid-base.component.mjs +2 -3
- package/esm2022/grid.component.mjs +10 -7
- package/esm2022/renderer/creations/create-active-cell-border.mjs +2 -2
- package/esm2022/renderer/drawers/cell-drawer.mjs +7 -8
- package/esm2022/renderer/drawers/drawer.mjs +5 -3
- package/esm2022/services/event.service.mjs +6 -3
- package/esm2022/services/field.service.mjs +4 -4
- package/esm2022/types/grid.mjs +1 -1
- package/esm2022/utils/cell.mjs +5 -5
- package/fesm2022/ai-table-grid.mjs +64 -54
- package/fesm2022/ai-table-grid.mjs.map +1 -1
- package/grid-base.component.d.ts.map +1 -1
- package/grid.component.d.ts +2 -1
- package/grid.component.d.ts.map +1 -1
- package/package.json +1 -1
- package/renderer/drawers/cell-drawer.d.ts.map +1 -1
- package/renderer/drawers/drawer.d.ts.map +1 -1
- package/services/event.service.d.ts.map +1 -1
- package/styles/styles.scss +1 -0
- package/types/grid.d.ts +6 -4
- package/types/grid.d.ts.map +1 -1
- package/utils/cell.d.ts +1 -1
- package/utils/cell.d.ts.map +1 -1
- package/components/field-property-editor/field-property-editor.component.d.ts.map +0 -1
- package/esm2022/components/field-property-editor/field-property-editor.component.mjs +0 -106
@@ -13,26 +13,26 @@ import { ThyDatePicker, ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
|
|
13
13
|
import { ThyTimePickerModule } from 'ngx-tethys/time-picker';
|
14
14
|
import { ThyStopPropagationDirective, ThyAutofocusDirective, ThyEnterDirective, ThyOption } from 'ngx-tethys/shared';
|
15
15
|
import * as i3 from 'ngx-tethys/input';
|
16
|
-
import { ThyInputDirective, ThyInputGroup, ThyInputModule, ThyInputCount
|
16
|
+
import { ThyInputDirective, ThyInputGroup, ThyInputModule, ThyInputCount } from 'ngx-tethys/input';
|
17
17
|
import * as i2$1 from 'ngx-tethys/tooltip';
|
18
18
|
import { ThyTooltipModule } from 'ngx-tethys/tooltip';
|
19
19
|
import { ThyAction } from 'ngx-tethys/action';
|
20
20
|
import { ThyFlexibleTextModule, ThyFlexibleText } from 'ngx-tethys/flexible-text';
|
21
21
|
import { ThyButton } from 'ngx-tethys/button';
|
22
22
|
import * as i2 from 'ngx-tethys/form';
|
23
|
-
import { ThyFormSubmitDirective, ThyFormModule, ThyUniqueCheckValidator
|
23
|
+
import { ThyFormSubmitDirective, ThyFormModule, ThyUniqueCheckValidator } from 'ngx-tethys/form';
|
24
24
|
import { ThyNotifyService } from 'ngx-tethys/notify';
|
25
25
|
import { ThyInputNumber } from 'ngx-tethys/input-number';
|
26
26
|
import { ThySlider } from 'ngx-tethys/slider';
|
27
27
|
import { ThyRate } from 'ngx-tethys/rate';
|
28
28
|
import * as i1$2 from '@angular/common';
|
29
|
-
import { NgTemplateOutlet, NgIf, NgClass,
|
29
|
+
import { NgTemplateOutlet, NgIf, NgClass, CommonModule, NgComponentOutlet } from '@angular/common';
|
30
30
|
import { ThyDot } from 'ngx-tethys/dot';
|
31
31
|
import { ThyEmptyModule } from 'ngx-tethys/empty';
|
32
32
|
import { ThyIcon } from 'ngx-tethys/icon';
|
33
33
|
import { ThySelect } from 'ngx-tethys/select';
|
34
34
|
import { ThyTag } from 'ngx-tethys/tag';
|
35
|
-
import { ThyDropdownDirective, ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemNameDirective,
|
35
|
+
import { ThyDropdownDirective, ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemNameDirective, ThyDropdownAbstractMenu, ThyDropdownMenuItemIconDirective } from 'ngx-tethys/dropdown';
|
36
36
|
import { ThyListItem } from 'ngx-tethys/list';
|
37
37
|
import { of, Subject, fromEvent, debounceTime, mergeWith, filter } from 'rxjs';
|
38
38
|
import * as i4 from 'ngx-tethys/avatar';
|
@@ -118,14 +118,14 @@ const AITable = {
|
|
118
118
|
},
|
119
119
|
isCellVisible(aiTable, cell) {
|
120
120
|
const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
|
121
|
-
const visibleColumnIndexMap = aiTable.context.
|
121
|
+
const visibleColumnIndexMap = aiTable.context.visibleColumnsIndexMap();
|
122
122
|
const [recordId, fieldId] = cell || [];
|
123
123
|
const isVisible = visibleRowIndexMap.has(recordId) && visibleColumnIndexMap.has(fieldId);
|
124
124
|
return isVisible;
|
125
125
|
},
|
126
126
|
getCellIndex(aiTable, cell) {
|
127
127
|
const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
|
128
|
-
const visibleColumnIndexMap = aiTable.context.
|
128
|
+
const visibleColumnIndexMap = aiTable.context.visibleColumnsIndexMap();
|
129
129
|
if (AITable.isCellVisible(aiTable, cell)) {
|
130
130
|
const [recordId, fieldId] = cell;
|
131
131
|
return {
|
@@ -134,6 +134,13 @@ const AITable = {
|
|
134
134
|
};
|
135
135
|
}
|
136
136
|
return null;
|
137
|
+
},
|
138
|
+
isFrozenColumn(aiTable, columnIndex) {
|
139
|
+
const frozenColumnCount = aiTable.context.frozenColumnCount();
|
140
|
+
if (columnIndex <= frozenColumnCount - 1) {
|
141
|
+
return true;
|
142
|
+
}
|
143
|
+
return false;
|
137
144
|
}
|
138
145
|
};
|
139
146
|
|
@@ -362,11 +369,11 @@ var AITableFilterOperation;
|
|
362
369
|
* 用于构建 Canvas 基础坐标系,后续的绘制工作以此为基础
|
363
370
|
*/
|
364
371
|
class Coordinate {
|
365
|
-
constructor({ rowHeight, rowCount, columnCount, container,
|
372
|
+
constructor({ rowHeight, rowCount, columnCount, container, rowIndicesSizeMap = {}, columnIndicesSizeMap = {}, rowInitSize = 0, columnInitSize = 0, frozenColumnCount = 0 }) {
|
366
373
|
// 用 index 映射 每一行的 高度
|
367
|
-
this.
|
374
|
+
this.rowIndicesSizeMap = {};
|
368
375
|
// 用 index 映射 每一列 的 宽度
|
369
|
-
this.
|
376
|
+
this.columnIndicesSizeMap = {};
|
370
377
|
// 行坐标集中最后一行的索引
|
371
378
|
this.lastRowIndex = -1;
|
372
379
|
// 列坐标集中最后一列的索引
|
@@ -379,8 +386,8 @@ class Coordinate {
|
|
379
386
|
this.rowInitSize = rowInitSize;
|
380
387
|
this.columnInitSize = columnInitSize;
|
381
388
|
this.containerWidth = container.offsetWidth;
|
382
|
-
this.
|
383
|
-
this.
|
389
|
+
this.rowIndicesSizeMap = rowIndicesSizeMap;
|
390
|
+
this.columnIndicesSizeMap = columnIndicesSizeMap;
|
384
391
|
this.containerHeight = container.offsetHeight;
|
385
392
|
this.frozenColumnCount = frozenColumnCount;
|
386
393
|
this.container = container;
|
@@ -409,13 +416,13 @@ class Coordinate {
|
|
409
416
|
* 根据 rowIndex 获取对应行高
|
410
417
|
*/
|
411
418
|
getRowHeight(index) {
|
412
|
-
return this.
|
419
|
+
return this.rowIndicesSizeMap[index] ?? this.rowHeight;
|
413
420
|
}
|
414
421
|
/**
|
415
422
|
* 根据 columnIndex 获取对应列宽
|
416
423
|
*/
|
417
424
|
getColumnWidth(index) {
|
418
|
-
return this.
|
425
|
+
return this.columnIndicesSizeMap[index];
|
419
426
|
}
|
420
427
|
/**
|
421
428
|
* 获取每个 cell 垂直/水平方向的坐标信息
|
@@ -439,7 +446,7 @@ class Coordinate {
|
|
439
446
|
offset = itemMetadata.offset + itemMetadata.size;
|
440
447
|
}
|
441
448
|
for (let i = lastMeasuredIndex + 1; i <= index; i++) {
|
442
|
-
const size = isColumnType ? this.
|
449
|
+
const size = isColumnType ? this.columnIndicesSizeMap[i] : (this.rowIndicesSizeMap[i] ?? this.rowHeight);
|
443
450
|
cellMetadataMap[i] = {
|
444
451
|
offset,
|
445
452
|
size
|
@@ -716,8 +723,7 @@ function createAITable(records, fields) {
|
|
716
723
|
}, {});
|
717
724
|
}),
|
718
725
|
recordsWillHidden: signal([]),
|
719
|
-
recordsWillMove: signal([])
|
720
|
-
references: signal({ members: {} })
|
726
|
+
recordsWillMove: signal([])
|
721
727
|
};
|
722
728
|
return aiTable;
|
723
729
|
}
|
@@ -795,13 +801,15 @@ const AITableQueries = {
|
|
795
801
|
|
796
802
|
class RendererContext {
|
797
803
|
constructor(options) {
|
798
|
-
const { linearRows, pointPosition, scrollState,
|
804
|
+
const { linearRows, pointPosition, scrollState, visibleColumnsIndexMap, visibleRowsIndexMap, frozenColumnCount, references, scrollAction } = options;
|
799
805
|
this.linearRows = linearRows;
|
800
806
|
this.pointPosition = pointPosition;
|
801
807
|
this.scrollState = scrollState;
|
802
808
|
this.scrollAction = scrollAction;
|
803
|
-
this.
|
809
|
+
this.visibleColumnsIndexMap = visibleColumnsIndexMap;
|
804
810
|
this.visibleRowsIndexMap = visibleRowsIndexMap;
|
811
|
+
this.frozenColumnCount = frozenColumnCount;
|
812
|
+
this.references = references;
|
805
813
|
}
|
806
814
|
setPointPosition(position) {
|
807
815
|
const oldPosition = this.pointPosition();
|
@@ -1471,7 +1479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
1471
1479
|
}]
|
1472
1480
|
}], ctorParameters: () => [] });
|
1473
1481
|
|
1474
|
-
class
|
1482
|
+
class AITableFieldSetting {
|
1475
1483
|
constructor() {
|
1476
1484
|
this.aiEditField = model.required();
|
1477
1485
|
this.aiExternalTemplate = null;
|
@@ -1519,28 +1527,24 @@ class AITableFieldPropertyEditor {
|
|
1519
1527
|
cancel() {
|
1520
1528
|
this.thyPopoverRef.close();
|
1521
1529
|
}
|
1522
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
1523
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type:
|
1530
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldSetting, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
1531
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: false, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, host: { classAttribute: "field-setting d-block pl-5 pr-5 pb-5 pt-4" }, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n <thy-input-group>\n <input\n thyInput\n [thyAutofocus]=\"true\"\n name=\"fieldName\"\n [maxlength]=\"fieldMaxLength\"\n [(ngModel)]=\"aiEditField().name\"\n required\n placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n [thyUniqueCheck]=\"checkUniqueName\"\n />\n <ng-template #suffix>\n <thy-input-count></thy-input-count>\n </ng-template>\n </thy-input-group>\n </thy-form-group>\n <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n <div class=\"ml-n5 mr-n5\">\n <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n <span>\n <thy-icon [thyIconName]=\"selectedFieldOption().icon\" class=\"text-desc mr-2\"></thy-icon>\n <span>{{ selectedFieldOption().name }}</span>\n </span>\n <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n </thy-list-item>\n </div>\n </thy-form-group>\n <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultTemplate>\n <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n </ng-template>\n <thy-form-group-footer thyAlign=\"right\">\n <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n @for (item of fieldOptions; track $index) {\n @let isSelectedField = aiEditField().type === item.type;\n @let isSameMultipleMode = (item.settings! | fieldIsMultiple) === (aiEditField().settings! | fieldIsMultiple);\n <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n [ngClass]=\"{\n active: isSelectedField && isSameMultipleMode\n }\"\n (click)=\"selectFieldType(item)\"\n >\n <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n </a>\n }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "component", type: ThyListItem, selector: "thy-list-item,[thy-list-item]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsMultiplePipe, name: "fieldIsMultiple" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1524
1532
|
}
|
1525
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
1533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldSetting, decorators: [{
|
1526
1534
|
type: Component,
|
1527
|
-
args: [{ selector: 'ai-table-field-
|
1535
|
+
args: [{ selector: 'ai-table-field-setting', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
1528
1536
|
NgIf,
|
1529
|
-
NgForOf,
|
1530
1537
|
NgClass,
|
1531
1538
|
FormsModule,
|
1532
1539
|
ThyIcon,
|
1533
|
-
ThyInput,
|
1534
1540
|
ThyInputGroup,
|
1535
1541
|
ThyInputCount,
|
1536
1542
|
ThyInputDirective,
|
1537
|
-
ThyConfirmValidatorDirective,
|
1538
1543
|
ThyUniqueCheckValidator,
|
1539
1544
|
ThyDropdownDirective,
|
1540
1545
|
ThyDropdownMenuComponent,
|
1541
1546
|
ThyDropdownMenuItemDirective,
|
1542
1547
|
ThyDropdownMenuItemNameDirective,
|
1543
|
-
ThyDropdownMenuItemIconDirective,
|
1544
1548
|
ThyButton,
|
1545
1549
|
ThyFormModule,
|
1546
1550
|
ThyListItem,
|
@@ -1548,7 +1552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
1548
1552
|
ThyAutofocusDirective,
|
1549
1553
|
AITableFieldIsMultiplePipe
|
1550
1554
|
], host: {
|
1551
|
-
class: 'field-
|
1555
|
+
class: 'field-setting d-block pl-5 pr-5 pb-5 pt-4'
|
1552
1556
|
}, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n <thy-input-group>\n <input\n thyInput\n [thyAutofocus]=\"true\"\n name=\"fieldName\"\n [maxlength]=\"fieldMaxLength\"\n [(ngModel)]=\"aiEditField().name\"\n required\n placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n [thyUniqueCheck]=\"checkUniqueName\"\n />\n <ng-template #suffix>\n <thy-input-count></thy-input-count>\n </ng-template>\n </thy-input-group>\n </thy-form-group>\n <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n <div class=\"ml-n5 mr-n5\">\n <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n <span>\n <thy-icon [thyIconName]=\"selectedFieldOption().icon\" class=\"text-desc mr-2\"></thy-icon>\n <span>{{ selectedFieldOption().name }}</span>\n </span>\n <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n </thy-list-item>\n </div>\n </thy-form-group>\n <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultTemplate>\n <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n </ng-template>\n <thy-form-group-footer thyAlign=\"right\">\n <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n @for (item of fieldOptions; track $index) {\n @let isSelectedField = aiEditField().type === item.type;\n @let isSameMultipleMode = (item.settings! | fieldIsMultiple) === (aiEditField().settings! | fieldIsMultiple);\n <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n [ngClass]=\"{\n active: isSelectedField && isSameMultipleMode\n }\"\n (click)=\"selectFieldType(item)\"\n >\n <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n </a>\n }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
|
1553
1557
|
}], propDecorators: { aiTable: [{
|
1554
1558
|
type: Input,
|
@@ -1931,7 +1935,7 @@ class AITableGridFieldService {
|
|
1931
1935
|
}
|
1932
1936
|
editFieldProperty(aiTable, options) {
|
1933
1937
|
const { field, isUpdate, origin, position } = options;
|
1934
|
-
const component = this.aiFieldConfig?.
|
1938
|
+
const component = this.aiFieldConfig?.fieldSettingComponent ?? AITableFieldSetting;
|
1935
1939
|
return this.thyPopover.open(component, {
|
1936
1940
|
origin,
|
1937
1941
|
originPosition: position,
|
@@ -1939,7 +1943,7 @@ class AITableGridFieldService {
|
|
1939
1943
|
manualClosure: true,
|
1940
1944
|
originActiveClass: undefined,
|
1941
1945
|
height: 'auto',
|
1942
|
-
panelClass: 'ai-table-field-
|
1946
|
+
panelClass: 'ai-table-field-setting-panel',
|
1943
1947
|
initialState: {
|
1944
1948
|
aiTable,
|
1945
1949
|
aiEditField: field,
|
@@ -1972,12 +1976,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
1972
1976
|
type: Injectable
|
1973
1977
|
}], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
|
1974
1978
|
|
1975
|
-
function
|
1976
|
-
const
|
1979
|
+
function getColumnIndicesSizeMap(fields) {
|
1980
|
+
const columnIndicesSizeMap = {};
|
1977
1981
|
fields?.forEach((field, index) => {
|
1978
|
-
|
1982
|
+
columnIndicesSizeMap[index] = field.width ?? getFieldOptionByField(field).width;
|
1979
1983
|
});
|
1980
|
-
return
|
1984
|
+
return columnIndicesSizeMap;
|
1981
1985
|
}
|
1982
1986
|
/**
|
1983
1987
|
* 获取单元格位置
|
@@ -2983,9 +2987,12 @@ class AITableGridEventService {
|
|
2983
2987
|
columnCount
|
2984
2988
|
});
|
2985
2989
|
const originRect = container.getBoundingClientRect();
|
2990
|
+
const isFrozenColumn = AITable.isFrozenColumn(aiTable, columnIndex);
|
2991
|
+
const scrollLeft = isFrozenColumn ? 0 : scrollState().scrollLeft;
|
2992
|
+
const scrollTop = scrollState().scrollTop;
|
2986
2993
|
const originPosition = {
|
2987
|
-
x: originX + originOffset -
|
2988
|
-
y: originY -
|
2994
|
+
x: originX + originOffset - scrollLeft + originRect.x,
|
2995
|
+
y: originY - scrollTop + originRect.y,
|
2989
2996
|
width: originWidth,
|
2990
2997
|
height: rowHeight
|
2991
2998
|
};
|
@@ -3159,7 +3166,6 @@ class AITableGridBase {
|
|
3159
3166
|
this.aiTableGridSelectionService.initialize(this.aiTable);
|
3160
3167
|
this.aiTableGridEventService.registerEvents(this.elementRef.nativeElement);
|
3161
3168
|
this.aiTableGridFieldService.initAIFieldConfig(this.aiFieldConfig());
|
3162
|
-
this.aiTable.references.set(this.aiReferences());
|
3163
3169
|
AI_TABLE_GRID_FIELD_SERVICE_MAP.set(this.aiTable, this.aiTableGridFieldService);
|
3164
3170
|
}
|
3165
3171
|
addRecord() {
|
@@ -3183,7 +3189,7 @@ class AITableGridBase {
|
|
3183
3189
|
origin: gridColumnBlank,
|
3184
3190
|
position
|
3185
3191
|
});
|
3186
|
-
if (popoverRef && !this.aiFieldConfig()?.
|
3192
|
+
if (popoverRef && !this.aiFieldConfig()?.fieldSettingComponent) {
|
3187
3193
|
popoverRef.componentInstance.addField.subscribe((defaultValue) => {
|
3188
3194
|
const fields = this.gridData().fields;
|
3189
3195
|
const fieldCount = fields.length;
|
@@ -3284,7 +3290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
3284
3290
|
ThyIcon,
|
3285
3291
|
ThyRate,
|
3286
3292
|
ThyProgress,
|
3287
|
-
|
3293
|
+
AITableFieldSetting,
|
3288
3294
|
ThyDatePickerFormatPipe,
|
3289
3295
|
ThyFlexibleText,
|
3290
3296
|
ThyStopPropagationDirective,
|
@@ -4078,9 +4084,11 @@ class Drawer {
|
|
4078
4084
|
const { x, y, text, maxWidth, lineHeight, maxRow = DEFAULT_WRAP_TEXT_MAX_ROW, fontSize = DEFAULT_FONT_SIZE, fillStyle = this.colors.gray800, textAlign = DEFAULT_TEXT_ALIGN_LEFT, verticalAlign = DEFAULT_TEXT_VERTICAL_ALIGN_TOP, fontWeight = DEFAULT_FONT_WEIGHT, textDecoration = DEFAULT_TEXT_DECORATION, fieldType, needDraw = false } = options;
|
4079
4085
|
let offsetX = 0;
|
4080
4086
|
let offsetY = 0;
|
4087
|
+
const fontStyle = `${fontWeight} ${fontSize}px ${DEFAULT_FONT_FAMILY}`;
|
4081
4088
|
const baselineOffset = verticalAlign === DEFAULT_TEXT_VERTICAL_ALIGN_TOP ? fontSize / 2 : 0;
|
4082
|
-
const
|
4089
|
+
const fontStyleKey = `${fontWeight}-${fontSize}px`;
|
4083
4090
|
const isUnderline = textDecoration === 'underline';
|
4091
|
+
this.ctx.font = fontStyle;
|
4084
4092
|
const textRenderer = (textDataList) => {
|
4085
4093
|
textDataList.forEach((data) => {
|
4086
4094
|
const { offsetX, offsetY, text, width, linkUrl } = data;
|
@@ -4098,7 +4106,7 @@ class Drawer {
|
|
4098
4106
|
if (fillStyle)
|
4099
4107
|
this.setStyle({ fillStyle });
|
4100
4108
|
this.ctx.textAlign = textAlign;
|
4101
|
-
const cacheKey = `${
|
4109
|
+
const cacheKey = `${fontStyleKey}-${maxRow}-${maxWidth || 0}-${fieldType}-${text}`;
|
4102
4110
|
const cacheTextData = textDataCache.get(cacheKey);
|
4103
4111
|
if (cacheTextData) {
|
4104
4112
|
if (this.needDraw && needDraw) {
|
@@ -5480,7 +5488,6 @@ class CellDrawer extends Drawer {
|
|
5480
5488
|
if (!userInfo)
|
5481
5489
|
continue;
|
5482
5490
|
const { uid, display_name, avatar } = userInfo;
|
5483
|
-
const type = AITableMemberType.member;
|
5484
5491
|
const itemWidth = AITableAvatarSize.size24 + (isMulti ? AI_TABLE_CELL_MEMBER_ITEM_PADDING : 0);
|
5485
5492
|
currentX = AI_TABLE_CELL_PADDING + index * itemWidth;
|
5486
5493
|
let realMaxTextWidth = maxTextWidth < 0 ? 0 : maxTextWidth;
|
@@ -5498,22 +5505,22 @@ class CellDrawer extends Drawer {
|
|
5498
5505
|
let isMore = currentX + itemWidth > columnWidth - 2 * AI_TABLE_CELL_PADDING;
|
5499
5506
|
if (columnWidth != null) {
|
5500
5507
|
// 在非活动状态下,当超出列宽时,不会渲染后续内容
|
5501
|
-
if (
|
5508
|
+
if (currentX >= columnWidth - 2 * AI_TABLE_CELL_PADDING) {
|
5502
5509
|
break;
|
5503
5510
|
}
|
5504
5511
|
// 如果不是非活动状态的最后一行,则换行渲染溢出内容
|
5505
|
-
if (
|
5512
|
+
if (currentX > columnWidth - 2 * AI_TABLE_CELL_PADDING) {
|
5506
5513
|
currentX = AI_TABLE_CELL_PADDING;
|
5507
5514
|
}
|
5508
|
-
if (
|
5515
|
+
if (currentX + itemWidth > columnWidth - AI_TABLE_CELL_PADDING) {
|
5509
5516
|
currentX = AI_TABLE_CELL_PADDING;
|
5510
5517
|
currentY += itemHeight;
|
5511
5518
|
}
|
5512
|
-
if (
|
5519
|
+
if (currentY >= maxHeight) {
|
5513
5520
|
isOverflow = true;
|
5514
5521
|
}
|
5515
5522
|
}
|
5516
|
-
if (ctx
|
5523
|
+
if (ctx) {
|
5517
5524
|
this.avatar({
|
5518
5525
|
x: x + currentX,
|
5519
5526
|
y: y + currentY,
|
@@ -6542,7 +6549,7 @@ const createActiveCellBorder = (config) => {
|
|
6542
6549
|
if (Array.isArray(activeCell) &&
|
6543
6550
|
!!activeCell.length &&
|
6544
6551
|
aiTable.context.visibleRowsIndexMap().has(activeCell[0]) &&
|
6545
|
-
aiTable.context.
|
6552
|
+
aiTable.context.visibleColumnsIndexMap().has(activeCell[1])) {
|
6546
6553
|
const fieldId = activeCell[1];
|
6547
6554
|
const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, activeCell);
|
6548
6555
|
const checkIsVisible = (rowIndex, columnIndex) => {
|
@@ -6778,6 +6785,7 @@ class AITableGrid extends AITableGridBase {
|
|
6778
6785
|
this.dragSelectionStart = null;
|
6779
6786
|
this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
|
6780
6787
|
this.containerRect = signal({ width: 0, height: 0 });
|
6788
|
+
this.frozenColumnCount = signal(1);
|
6781
6789
|
this.hasContainerRect = computed(() => {
|
6782
6790
|
return this.containerRect().width > 0 && this.containerRect().height > 0;
|
6783
6791
|
});
|
@@ -6787,7 +6795,7 @@ class AITableGrid extends AITableGridBase {
|
|
6787
6795
|
this.linearRows = computed(() => {
|
6788
6796
|
return buildGridLinearRows(this.gridData().records, !this.aiReadonly());
|
6789
6797
|
});
|
6790
|
-
this.
|
6798
|
+
this.visibleColumnsIndexMap = computed(() => {
|
6791
6799
|
const columns = AITable.getVisibleFields(this.aiTable);
|
6792
6800
|
return new Map(columns?.map((item, index) => [item._id, index]));
|
6793
6801
|
});
|
@@ -6806,9 +6814,9 @@ class AITableGrid extends AITableGridBase {
|
|
6806
6814
|
columnCount: fields.length,
|
6807
6815
|
rowInitSize: AI_TABLE_FIELD_HEAD_HEIGHT,
|
6808
6816
|
columnInitSize: AI_TABLE_ROW_HEAD_WIDTH,
|
6809
|
-
|
6810
|
-
|
6811
|
-
frozenColumnCount:
|
6817
|
+
rowIndicesSizeMap: {},
|
6818
|
+
columnIndicesSizeMap: getColumnIndicesSizeMap(fields),
|
6819
|
+
frozenColumnCount: this.frozenColumnCount()
|
6812
6820
|
});
|
6813
6821
|
return {
|
6814
6822
|
aiTable: this.aiTable,
|
@@ -6892,10 +6900,12 @@ class AITableGrid extends AITableGridBase {
|
|
6892
6900
|
initContext() {
|
6893
6901
|
this.aiTable.context = new RendererContext({
|
6894
6902
|
linearRows: this.linearRows,
|
6895
|
-
|
6903
|
+
visibleColumnsIndexMap: this.visibleColumnsIndexMap,
|
6896
6904
|
visibleRowsIndexMap: this.visibleRowsIndexMap,
|
6897
6905
|
pointPosition: signal(DEFAULT_POINT_POSITION),
|
6898
6906
|
scrollState: signal(DEFAULT_SCROLL_STATE),
|
6907
|
+
frozenColumnCount: this.frozenColumnCount,
|
6908
|
+
references: this.aiReferences,
|
6899
6909
|
scrollAction: this.scrollAction
|
6900
6910
|
});
|
6901
6911
|
}
|
@@ -7214,5 +7224,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
7214
7224
|
* Generated bundle index. Do not edit.
|
7215
7225
|
*/
|
7216
7226
|
|
7217
|
-
export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsMultiplePipe,
|
7227
|
+
export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsMultiplePipe, AITableFieldSetting, AITableFieldType, AITableFilterOperation, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, FONT_SIZE_SM, FieldOptions, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, ViewOperationMap, WebOutlinedPath, buildGridData, buildGridLinearRows, castToString, compareNumber, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getHoverEditorBoxOffset, getHoverEditorSpace, getMousePosition, getPlaceHolderCellsConfigs, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isArrayField, isCellMatchKeywords, isEmpty, isMac, isNumberFiled, isSameFieldOption, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, transformCellValue, zhIntlCollator };
|
7218
7228
|
//# sourceMappingURL=ai-table-grid.mjs.map
|