@ai-table/grid 0.0.16 → 0.0.18
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/esm2022/components/field-menu/field-menu.component.mjs +3 -3
- package/esm2022/core/coordinate.mjs +2 -2
- package/esm2022/dom-grid.component.mjs +2 -2
- package/esm2022/grid-base.component.mjs +4 -5
- package/esm2022/grid.component.mjs +20 -14
- package/esm2022/renderer/components/add-field-column.component.mjs +38 -20
- package/esm2022/renderer/components/field-head.component.mjs +5 -5
- package/esm2022/renderer/components/frozen-heads.component.mjs +3 -3
- package/esm2022/renderer/components/heads.component.mjs +1 -1
- package/esm2022/renderer/creations/create-cells.mjs +4 -4
- package/esm2022/renderer/creations/create-heads.mjs +1 -1
- package/esm2022/renderer/drawers/add-row-layout-drawer.mjs +4 -4
- package/esm2022/renderer/drawers/layout-drawer.mjs +12 -10
- package/esm2022/renderer/drawers/record-row-layout-drawer.mjs +16 -7
- package/esm2022/renderer/renderer.component.mjs +13 -12
- package/esm2022/services/field.service.mjs +5 -7
- package/esm2022/types/component-config.mjs +1 -1
- package/esm2022/types/field.mjs +1 -1
- package/esm2022/types/grid.mjs +1 -1
- package/esm2022/utils/build.mjs +3 -3
- package/fesm2022/ai-table-grid.mjs +110 -78
- package/fesm2022/ai-table-grid.mjs.map +1 -1
- package/grid-base.component.d.ts +4 -5
- package/grid-base.component.d.ts.map +1 -1
- package/grid.component.d.ts +1 -1
- package/grid.component.d.ts.map +1 -1
- package/package.json +1 -1
- package/renderer/components/add-field-column.component.d.ts +3 -6
- package/renderer/components/add-field-column.component.d.ts.map +1 -1
- package/renderer/components/frozen-heads.component.d.ts +2 -2
- package/renderer/components/heads.component.d.ts +2 -2
- package/renderer/creations/create-heads.d.ts +2 -2
- package/renderer/drawers/add-row-layout-drawer.d.ts +1 -1
- package/renderer/drawers/add-row-layout-drawer.d.ts.map +1 -1
- package/renderer/drawers/layout-drawer.d.ts +2 -2
- package/renderer/drawers/layout-drawer.d.ts.map +1 -1
- package/renderer/drawers/record-row-layout-drawer.d.ts.map +1 -1
- package/renderer/renderer.component.d.ts +3 -1
- package/renderer/renderer.component.d.ts.map +1 -1
- package/services/field.service.d.ts.map +1 -1
- package/types/component-config.d.ts +9 -1
- package/types/component-config.d.ts.map +1 -1
- package/types/field.d.ts +1 -1
- package/types/field.d.ts.map +1 -1
- package/types/grid.d.ts +1 -0
- package/types/grid.d.ts.map +1 -1
- package/utils/build.d.ts +1 -1
- package/utils/build.d.ts.map +1 -1
@@ -19,7 +19,7 @@ import { ThyButton } from 'ngx-tethys/button';
|
|
19
19
|
import * as i2 from 'ngx-tethys/form';
|
20
20
|
import { ThyFormSubmitDirective, ThyFormModule, ThyUniqueCheckValidator, ThyConfirmValidatorDirective } from 'ngx-tethys/form';
|
21
21
|
import * as _ from 'lodash';
|
22
|
-
import ___default from 'lodash';
|
22
|
+
import ___default, { isNil } from 'lodash';
|
23
23
|
import { ThyNotifyService } from 'ngx-tethys/notify';
|
24
24
|
import { ThyInputNumber } from 'ngx-tethys/input-number';
|
25
25
|
import { ThySlider } from 'ngx-tethys/slider';
|
@@ -406,7 +406,7 @@ class Coordinate {
|
|
406
406
|
offset = itemMetadata.offset + itemMetadata.size;
|
407
407
|
}
|
408
408
|
for (let i = lastMeasuredIndex + 1; i <= index; i++) {
|
409
|
-
const size = isColumnType ? this.columnIndicesMap[i] : this.rowIndicesMap[i] ?? this.rowHeight;
|
409
|
+
const size = isColumnType ? this.columnIndicesMap[i] : (this.rowIndicesMap[i] ?? this.rowHeight);
|
410
410
|
cellMetadataMap[i] = {
|
411
411
|
offset,
|
412
412
|
size
|
@@ -1603,7 +1603,7 @@ class FieldMenu extends ThyDropdownAbstractMenu {
|
|
1603
1603
|
}
|
1604
1604
|
}
|
1605
1605
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
1606
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: FieldMenu, isStandalone: true, selector: "field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, usesInheritance: true, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n @if (menu.type === 'divider') {\n
|
1606
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: FieldMenu, isStandalone: true, selector: "field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, 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 <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n (click)=\"execute(menu)\"\n [thyDisabled]=\"!!(menu.disabled && menu.disabled(aiTable, field))\"\n >\n <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n <span>{{ menu.name! }}</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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1607
1607
|
}
|
1608
1608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FieldMenu, decorators: [{
|
1609
1609
|
type: Component,
|
@@ -1614,7 +1614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
1614
1614
|
ThyDropdownMenuItemDirective,
|
1615
1615
|
ThyDropdownMenuItemNameDirective,
|
1616
1616
|
ThyDropdownMenuItemIconDirective
|
1617
|
-
], template: "@for (menu of fieldMenus; track index; let index = $index) {\n @if (menu.type === 'divider') {\n
|
1617
|
+
], 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 <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n (click)=\"execute(menu)\"\n [thyDisabled]=\"!!(menu.disabled && menu.disabled(aiTable, field))\"\n >\n <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n <span>{{ menu.name! }}</span>\n </a>\n }\n }\n}\n" }]
|
1618
1618
|
}], propDecorators: { fieldId: [{
|
1619
1619
|
type: Input,
|
1620
1620
|
args: [{ required: true }]
|
@@ -1630,7 +1630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
1630
1630
|
type: Input
|
1631
1631
|
}] } });
|
1632
1632
|
|
1633
|
-
const buildGridLinearRows = (visibleRecords) => {
|
1633
|
+
const buildGridLinearRows = (visibleRecords, isAddingVisible = true) => {
|
1634
1634
|
const linearRows = [];
|
1635
1635
|
let displayRowIndex = 0;
|
1636
1636
|
[...visibleRecords, { _id: '' }].forEach((row) => {
|
@@ -1642,7 +1642,7 @@ const buildGridLinearRows = (visibleRecords) => {
|
|
1642
1642
|
displayIndex: displayRowIndex
|
1643
1643
|
});
|
1644
1644
|
}
|
1645
|
-
if (!row._id) {
|
1645
|
+
if (isAddingVisible && !row._id) {
|
1646
1646
|
linearRows.push({
|
1647
1647
|
type: AITableRowType.add,
|
1648
1648
|
_id: ''
|
@@ -1681,8 +1681,9 @@ class AITableGridFieldService {
|
|
1681
1681
|
return this.thyPopover.open(component, {
|
1682
1682
|
origin,
|
1683
1683
|
originPosition: position,
|
1684
|
-
manualClosure: true,
|
1685
1684
|
placement: 'bottomLeft',
|
1685
|
+
manualClosure: true,
|
1686
|
+
originActiveClass: undefined,
|
1686
1687
|
initialState: {
|
1687
1688
|
aiTable,
|
1688
1689
|
aiEditField: field,
|
@@ -1696,13 +1697,10 @@ class AITableGridFieldService {
|
|
1696
1697
|
origin,
|
1697
1698
|
originPosition: position,
|
1698
1699
|
placement: 'bottomLeft',
|
1699
|
-
originActiveClass:
|
1700
|
-
hasBackdrop: false,
|
1701
|
-
insideClosable: true,
|
1702
|
-
outsideClosable: true,
|
1700
|
+
originActiveClass: undefined,
|
1703
1701
|
initialState: {
|
1704
1702
|
origin: editOrigin,
|
1705
|
-
position: options.
|
1703
|
+
position: options.editFieldPosition,
|
1706
1704
|
aiTable,
|
1707
1705
|
fieldId,
|
1708
1706
|
fieldMenus
|
@@ -2509,6 +2507,9 @@ class AITableGridBase {
|
|
2509
2507
|
this.aiAddRecord = output();
|
2510
2508
|
this.aiAddField = output();
|
2511
2509
|
this.aiUpdateFieldValue = output();
|
2510
|
+
this.fieldMenus = computed(() => {
|
2511
|
+
return this.aiFieldConfig()?.fieldMenus || [];
|
2512
|
+
});
|
2512
2513
|
this.gridData = computed(() => {
|
2513
2514
|
if (this.aiBuildRenderDataFn && this.aiBuildRenderDataFn() && this.aiTable) {
|
2514
2515
|
return this.aiBuildRenderDataFn()(this.aiTable);
|
@@ -2528,7 +2529,6 @@ class AITableGridBase {
|
|
2528
2529
|
ngOnInit() {
|
2529
2530
|
this.initAITable();
|
2530
2531
|
this.initService();
|
2531
|
-
this.buildFieldMenus();
|
2532
2532
|
}
|
2533
2533
|
initAITable() {
|
2534
2534
|
this.aiTable = createAITable(this.aiRecords, this.aiFields);
|
@@ -2544,9 +2544,6 @@ class AITableGridBase {
|
|
2544
2544
|
this.aiTableGridFieldService.initAIFieldConfig(this.aiFieldConfig());
|
2545
2545
|
AI_TABLE_GRID_FIELD_SERVICE_MAP.set(this.aiTable, this.aiTableGridFieldService);
|
2546
2546
|
}
|
2547
|
-
buildFieldMenus() {
|
2548
|
-
this.fieldMenus = this.aiFieldConfig()?.fieldMenus || [];
|
2549
|
-
}
|
2550
2547
|
addRecord() {
|
2551
2548
|
const records = this.gridData().records;
|
2552
2549
|
const recordCount = records.length;
|
@@ -2647,7 +2644,7 @@ class AITableDomGrid extends AITableGridBase {
|
|
2647
2644
|
origin: moreBtn,
|
2648
2645
|
editOrigin: fieldAction,
|
2649
2646
|
fieldId: field._id,
|
2650
|
-
fieldMenus: this.fieldMenus
|
2647
|
+
fieldMenus: this.fieldMenus()
|
2651
2648
|
});
|
2652
2649
|
}
|
2653
2650
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
@@ -3190,47 +3187,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
3190
3187
|
|
3191
3188
|
class AITableAddField {
|
3192
3189
|
constructor() {
|
3193
|
-
this.
|
3194
|
-
this.fields = input.required();
|
3195
|
-
this.columnStopIndex = input.required();
|
3190
|
+
this.config = input.required();
|
3196
3191
|
this.btnWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
|
3197
3192
|
this.x = computed(() => {
|
3198
|
-
const lastColumnWidth = this.
|
3199
|
-
const lastColumnOffset = this.
|
3193
|
+
const lastColumnWidth = this.config().coordinate.getColumnWidth(this.config().columnStopIndex);
|
3194
|
+
const lastColumnOffset = this.config().coordinate.getColumnOffset(this.config().columnStopIndex);
|
3200
3195
|
return lastColumnWidth + lastColumnOffset;
|
3201
3196
|
});
|
3202
3197
|
this.rectConfig = computed(() => {
|
3198
|
+
const { pointPosition: { targetName }, readonly } = this.config();
|
3199
|
+
const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
|
3203
3200
|
return {
|
3204
3201
|
name: generateTargetName({
|
3205
3202
|
targetName: AI_TABLE_FIELD_ADD_BUTTON,
|
3206
|
-
fieldId: this.
|
3207
|
-
mouseStyle: 'pointer'
|
3203
|
+
fieldId: this.config().fields[this.config().columnStopIndex]._id,
|
3204
|
+
mouseStyle: readonly ? 'default' : 'pointer'
|
3208
3205
|
}),
|
3209
3206
|
x: AI_TABLE_OFFSET,
|
3210
3207
|
y: AI_TABLE_OFFSET,
|
3211
|
-
width: this.
|
3212
|
-
|
3208
|
+
width: this.config().coordinate.containerWidth - this.x() < this.btnWidth
|
3209
|
+
? this.btnWidth
|
3210
|
+
: this.config().coordinate.containerWidth - this.x(),
|
3211
|
+
height: this.config().coordinate.rowInitSize,
|
3213
3212
|
stroke: Colors.gray200,
|
3214
3213
|
strokeWidth: 1,
|
3215
|
-
listening: true
|
3214
|
+
listening: true,
|
3215
|
+
fill
|
3216
3216
|
};
|
3217
3217
|
});
|
3218
3218
|
this.addIconConfig = computed(() => {
|
3219
|
-
const
|
3219
|
+
const { readonly } = this.config();
|
3220
|
+
const offsetY = (this.config().coordinate.rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
|
3220
3221
|
return {
|
3221
3222
|
x: AI_TABLE_CELL_PADDING,
|
3222
3223
|
y: offsetY,
|
3223
3224
|
data: AddOutlinedPath,
|
3224
3225
|
fill: Colors.gray600,
|
3225
|
-
listening: false
|
3226
|
+
listening: false,
|
3227
|
+
visible: isNil(readonly) ? true : !readonly
|
3226
3228
|
};
|
3227
3229
|
});
|
3228
3230
|
}
|
3229
3231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
3230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
3232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
3231
3233
|
<ko-group [config]="{ x: x() }">
|
3232
|
-
<ko-
|
3233
|
-
|
3234
|
+
<ko-group>
|
3235
|
+
<ko-rect [config]="rectConfig()"></ko-rect>
|
3236
|
+
</ko-group>
|
3237
|
+
<ko-group>
|
3238
|
+
@if (addIconConfig().visible) {
|
3239
|
+
<ai-table-icon [config]="addIconConfig()"></ai-table-icon>
|
3240
|
+
}
|
3241
|
+
</ko-group>
|
3234
3242
|
</ko-group>
|
3235
3243
|
`, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
3236
3244
|
}
|
@@ -3240,12 +3248,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
3240
3248
|
selector: 'ai-table-add-field',
|
3241
3249
|
template: `
|
3242
3250
|
<ko-group [config]="{ x: x() }">
|
3243
|
-
<ko-
|
3244
|
-
|
3251
|
+
<ko-group>
|
3252
|
+
<ko-rect [config]="rectConfig()"></ko-rect>
|
3253
|
+
</ko-group>
|
3254
|
+
<ko-group>
|
3255
|
+
@if (addIconConfig().visible) {
|
3256
|
+
<ai-table-icon [config]="addIconConfig()"></ai-table-icon>
|
3257
|
+
}
|
3258
|
+
</ko-group>
|
3245
3259
|
</ko-group>
|
3246
3260
|
`,
|
3247
3261
|
standalone: true,
|
3248
|
-
imports: [KoContainer,
|
3262
|
+
imports: [KoContainer, KoShape, AITableIcon],
|
3249
3263
|
changeDetection: ChangeDetectionStrategy.OnPush
|
3250
3264
|
}]
|
3251
3265
|
}] });
|
@@ -4223,23 +4237,25 @@ class Layout extends Drawer {
|
|
4223
4237
|
get isLast() {
|
4224
4238
|
return this.columnIndex === this.columnCount - 1;
|
4225
4239
|
}
|
4226
|
-
renderAddFieldBlank() {
|
4227
|
-
const width = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
|
4228
|
-
const y = this.y;
|
4240
|
+
renderAddFieldBlank({ style, isHoverRow }) {
|
4229
4241
|
const rowHeight = this.rowHeight;
|
4242
|
+
const fill = style?.fill || (isHoverRow ? this.colors.gray80 : this.colors.transparent);
|
4243
|
+
const addFieldBlankX = this.x + this.columnWidth + AI_TABLE_OFFSET;
|
4230
4244
|
this.rect({
|
4231
|
-
x:
|
4232
|
-
y: y
|
4233
|
-
width: this.containerWidth -
|
4234
|
-
|
4235
|
-
|
4245
|
+
x: addFieldBlankX,
|
4246
|
+
y: this.y + AI_TABLE_OFFSET,
|
4247
|
+
width: this.containerWidth - addFieldBlankX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH
|
4248
|
+
? AI_TABLE_FIELD_ADD_BUTTON_WIDTH
|
4249
|
+
: this.containerWidth - addFieldBlankX,
|
4250
|
+
height: rowHeight,
|
4251
|
+
fill
|
4236
4252
|
});
|
4237
4253
|
}
|
4238
4254
|
}
|
4239
4255
|
|
4240
4256
|
class AddRowLayout extends Layout {
|
4241
|
-
renderAddFieldBlank() {
|
4242
|
-
super.renderAddFieldBlank();
|
4257
|
+
renderAddFieldBlank({ isHoverRow }) {
|
4258
|
+
super.renderAddFieldBlank({ isHoverRow });
|
4243
4259
|
const rowHeight = this.rowHeight;
|
4244
4260
|
const defaultWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
|
4245
4261
|
const width = this.containerWidth - this.x < defaultWidth ? defaultWidth : this.containerWidth - this.x;
|
@@ -4308,7 +4324,7 @@ class AddRowLayout extends Layout {
|
|
4308
4324
|
isHoverRow
|
4309
4325
|
});
|
4310
4326
|
}
|
4311
|
-
this.renderAddFieldBlank();
|
4327
|
+
this.renderAddFieldBlank({ isHoverRow });
|
4312
4328
|
}
|
4313
4329
|
renderCommonCell({ isHoverRow }) {
|
4314
4330
|
if (this.isFirst || this.isLast)
|
@@ -4971,22 +4987,31 @@ class RecordRowLayout extends Layout {
|
|
4971
4987
|
}
|
4972
4988
|
}
|
4973
4989
|
// 尾列
|
4974
|
-
renderLastCell({ style }) {
|
4990
|
+
renderLastCell({ style, isHoverRow }) {
|
4975
4991
|
if (!this.isLast || this.isFirst)
|
4976
4992
|
return;
|
4977
4993
|
const { fill, stroke } = style;
|
4978
|
-
const columnWidth = this.columnWidth;
|
4979
|
-
const width = columnWidth;
|
4980
4994
|
const colors = AITable.getColors();
|
4981
4995
|
// 背景、边框
|
4982
4996
|
this.rect({
|
4983
4997
|
x: this.x,
|
4984
4998
|
y: this.y,
|
4985
|
-
width,
|
4999
|
+
width: this.columnWidth,
|
4986
5000
|
height: this.rowHeight,
|
4987
5001
|
fill: fill || colors.white,
|
4988
5002
|
stroke: stroke || colors.gray200
|
4989
5003
|
});
|
5004
|
+
// 延伸到 FIELD_ADD_BUTTON
|
5005
|
+
super.renderAddFieldBlank({ style, isHoverRow });
|
5006
|
+
const rowHeight = this.rowHeight;
|
5007
|
+
const startX = this.x + this.columnWidth;
|
5008
|
+
const lineWidth = this.containerWidth - startX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH ? AI_TABLE_FIELD_ADD_BUTTON_WIDTH : this.containerWidth - startX;
|
5009
|
+
this.line({
|
5010
|
+
x: startX,
|
5011
|
+
y: this.y,
|
5012
|
+
points: [0, rowHeight, lineWidth, rowHeight],
|
5013
|
+
stroke: this.colors.gray200
|
5014
|
+
});
|
4990
5015
|
}
|
4991
5016
|
// 绘制中间的普通单元格
|
4992
5017
|
renderCommonCell({ style }) {
|
@@ -5008,7 +5033,7 @@ class RecordRowLayout extends Layout {
|
|
5008
5033
|
const { row, style, isCheckedRow, isHoverRow } = config;
|
5009
5034
|
this.renderFirstCell({ row, style, isCheckedRow, isHoverRow });
|
5010
5035
|
this.renderCommonCell({ style });
|
5011
|
-
this.renderLastCell({ style });
|
5036
|
+
this.renderLastCell({ style, isHoverRow });
|
5012
5037
|
}
|
5013
5038
|
}
|
5014
5039
|
const recordRowLayout = new RecordRowLayout();
|
@@ -5050,8 +5075,8 @@ const createCells = (config) => {
|
|
5050
5075
|
const row = context.linearRows()[rowIndex];
|
5051
5076
|
const { _id: recordId, type } = row;
|
5052
5077
|
const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
|
5053
|
-
const { rowIndex: pointRowIndex,
|
5054
|
-
const isHover = pointRowIndex === rowIndex
|
5078
|
+
const { rowIndex: pointRowIndex, targetName } = context.pointPosition();
|
5079
|
+
const isHover = pointRowIndex === rowIndex;
|
5055
5080
|
switch (type) {
|
5056
5081
|
case AITableRowType.add: {
|
5057
5082
|
const isHoverRow = isHover && targetName === AI_TABLE_ROW_ADD_BUTTON;
|
@@ -5349,11 +5374,11 @@ class AITableFieldHead {
|
|
5349
5374
|
targetName: AI_TABLE_FIELD_HEAD_MORE,
|
5350
5375
|
fieldId: field._id
|
5351
5376
|
}),
|
5352
|
-
x: width -
|
5377
|
+
x: width - AI_TABLE_ACTION_COMMON_SIZE,
|
5353
5378
|
y: commonIconOffsetY,
|
5354
5379
|
data: MoreStandOutlinedPath,
|
5355
5380
|
fill: isHoverIcon ? Colors.primary : Colors.gray600,
|
5356
|
-
background:
|
5381
|
+
background: Colors.transparent,
|
5357
5382
|
backgroundWidth: AI_TABLE_ACTION_COMMON_SIZE,
|
5358
5383
|
backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
|
5359
5384
|
cornerRadius: 4
|
@@ -5391,7 +5416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
5391
5416
|
</ko-group>
|
5392
5417
|
`,
|
5393
5418
|
standalone: true,
|
5394
|
-
imports: [KoContainer,
|
5419
|
+
imports: [KoContainer, KoShape, AITableFieldIcon, AITableText, AITableIcon],
|
5395
5420
|
changeDetection: ChangeDetectionStrategy.OnPush
|
5396
5421
|
}]
|
5397
5422
|
}] });
|
@@ -5576,7 +5601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
5576
5601
|
<ko-rect [config]="headBgConfig()"></ko-rect>
|
5577
5602
|
`,
|
5578
5603
|
standalone: true,
|
5579
|
-
imports: [
|
5604
|
+
imports: [KoShape, AITableFieldHead, AITableIcon, KoContainer],
|
5580
5605
|
changeDetection: ChangeDetectionStrategy.OnPush
|
5581
5606
|
}]
|
5582
5607
|
}] });
|
@@ -5917,6 +5942,9 @@ class AITableRenderer {
|
|
5917
5942
|
this.fields = computed(() => {
|
5918
5943
|
return AITable.getVisibleFields(this.config().aiTable);
|
5919
5944
|
});
|
5945
|
+
this.readonly = computed(() => {
|
5946
|
+
return this.config()?.readonly;
|
5947
|
+
});
|
5920
5948
|
this.coordinate = computed(() => {
|
5921
5949
|
return this.config()?.coordinate;
|
5922
5950
|
});
|
@@ -5942,8 +5970,7 @@ class AITableRenderer {
|
|
5942
5970
|
return this.coordinate().getColumnOffset(this.visibleRangeInfo().columnStopIndex);
|
5943
5971
|
});
|
5944
5972
|
this.cellGroupClipWidth = computed(() => {
|
5945
|
-
|
5946
|
-
return Math.min(this.containerWidth() - this.frozenAreaWidth(), AI_TABLE_FIELD_ADD_BUTTON_WIDTH + this.lastColumnOffset() + this.lastColumnWidth() - scrollLeft - this.frozenAreaWidth());
|
5973
|
+
return this.containerWidth() - this.frozenAreaWidth();
|
5947
5974
|
});
|
5948
5975
|
this.stageConfig = computed(() => {
|
5949
5976
|
const { isScrolling } = this.scrollState();
|
@@ -6004,9 +6031,9 @@ class AITableRenderer {
|
|
6004
6031
|
offsetY: scrollTop
|
6005
6032
|
};
|
6006
6033
|
});
|
6007
|
-
this.
|
6034
|
+
this.columnHeadOrAddFieldConfig = computed(() => {
|
6008
6035
|
const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
|
6009
|
-
const { aiTable, coordinate } = this.config();
|
6036
|
+
const { aiTable, coordinate, readonly } = this.config();
|
6010
6037
|
const { pointPosition } = aiTable.context;
|
6011
6038
|
const fields = this.fields();
|
6012
6039
|
return {
|
@@ -6015,7 +6042,8 @@ class AITableRenderer {
|
|
6015
6042
|
fields,
|
6016
6043
|
columnStartIndex,
|
6017
6044
|
columnStopIndex,
|
6018
|
-
pointPosition: pointPosition()
|
6045
|
+
pointPosition: pointPosition(),
|
6046
|
+
readonly
|
6019
6047
|
};
|
6020
6048
|
});
|
6021
6049
|
this.cellsConfig = computed(() => {
|
@@ -6048,7 +6076,7 @@ class AITableRenderer {
|
|
6048
6076
|
this.koDblclick.emit(e);
|
6049
6077
|
}
|
6050
6078
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
6051
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick" }, ngImport: i0, template: "<ko-stage\n [config]=\"stageConfig()\"\n (koMousemove)=\"stageMousemove($event)\"\n (koMousedown)=\"stageMousedown($event)\"\n (koClick)=\"stageClick($event)\"\n (koDblclick)=\"stageDblclick($event)\"\n>\n <ko-layer>\n <ko-group [config]=\"gridGroupConfig()\">\n <ko-group [config]=\"offsetYConfig()\">\n <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n </ko-group>\n\n <ko-group>\n <ai-table-frozen-column-heads [config]=\"
|
6079
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick" }, ngImport: i0, template: "<ko-stage\n [config]=\"stageConfig()\"\n (koMousemove)=\"stageMousemove($event)\"\n (koMousedown)=\"stageMousedown($event)\"\n (koClick)=\"stageClick($event)\"\n (koDblclick)=\"stageDblclick($event)\"\n>\n <ko-layer>\n <ko-group [config]=\"gridGroupConfig()\">\n <ko-group [config]=\"offsetYConfig()\">\n <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n </ko-group>\n\n <ko-group>\n <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n </ko-group>\n\n <ko-group [config]=\"commonGroupConfig()\">\n <ko-group [config]=\"offsetConfig()\">\n <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n </ko-group>\n\n <ko-group [config]=\"offsetXConfig()\">\n <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n </ko-group>\n </ko-group>\n\n <ko-group [config]=\"attachGroupConfig()\">\n <ko-group [config]=\"offsetConfig()\">\n <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n @if (activeCellBorderConfig().activeCellBorder) {\n <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n }\n </ko-group>\n </ko-group>\n\n <ko-group [config]=\"frozenAttachGroupConfig()\">\n <ko-group [config]=\"offsetYConfig()\">\n @if (activeCellBorderConfig().frozenActiveCellBorder) {\n <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n }\n </ko-group>\n </ko-group>\n </ko-group>\n </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { 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"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
6052
6080
|
}
|
6053
6081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableRenderer, decorators: [{
|
6054
6082
|
type: Component,
|
@@ -6056,8 +6084,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
6056
6084
|
KoContainer,
|
6057
6085
|
KoStage,
|
6058
6086
|
KoShape,
|
6059
|
-
AITableIcon,
|
6060
|
-
AITableFieldHead,
|
6061
6087
|
AITableColumnHeads,
|
6062
6088
|
AITableFrozenColumnHeads,
|
6063
6089
|
AITableCells,
|
@@ -6067,14 +6093,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
6067
6093
|
AITableAddField,
|
6068
6094
|
AITableHoverRowHeads,
|
6069
6095
|
AITableOtherRows
|
6070
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n [config]=\"stageConfig()\"\n (koMousemove)=\"stageMousemove($event)\"\n (koMousedown)=\"stageMousedown($event)\"\n (koClick)=\"stageClick($event)\"\n (koDblclick)=\"stageDblclick($event)\"\n>\n <ko-layer>\n <ko-group [config]=\"gridGroupConfig()\">\n <ko-group [config]=\"offsetYConfig()\">\n <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n </ko-group>\n\n <ko-group>\n <ai-table-frozen-column-heads [config]=\"
|
6096
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n [config]=\"stageConfig()\"\n (koMousemove)=\"stageMousemove($event)\"\n (koMousedown)=\"stageMousedown($event)\"\n (koClick)=\"stageClick($event)\"\n (koDblclick)=\"stageDblclick($event)\"\n>\n <ko-layer>\n <ko-group [config]=\"gridGroupConfig()\">\n <ko-group [config]=\"offsetYConfig()\">\n <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n </ko-group>\n\n <ko-group>\n <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n </ko-group>\n\n <ko-group [config]=\"commonGroupConfig()\">\n <ko-group [config]=\"offsetConfig()\">\n <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n </ko-group>\n\n <ko-group [config]=\"offsetXConfig()\">\n <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n </ko-group>\n </ko-group>\n\n <ko-group [config]=\"attachGroupConfig()\">\n <ko-group [config]=\"offsetConfig()\">\n <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n @if (activeCellBorderConfig().activeCellBorder) {\n <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n }\n </ko-group>\n </ko-group>\n\n <ko-group [config]=\"frozenAttachGroupConfig()\">\n <ko-group [config]=\"offsetYConfig()\">\n @if (activeCellBorderConfig().frozenActiveCellBorder) {\n <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n }\n </ko-group>\n </ko-group>\n </ko-group>\n </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
|
6071
6097
|
}] });
|
6072
6098
|
|
6073
6099
|
class AITableGrid extends AITableGridBase {
|
6074
6100
|
constructor() {
|
6075
6101
|
super();
|
6076
6102
|
this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
|
6077
|
-
this.ADD_BUTTON_WIDTH = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
|
6078
6103
|
this.containerRect = signal({ width: 0, height: 0 });
|
6079
6104
|
this.hasContainerRect = computed(() => {
|
6080
6105
|
return this.containerRect().width > 0 && this.containerRect().height > 0;
|
@@ -6083,7 +6108,7 @@ class AITableGrid extends AITableGridBase {
|
|
6083
6108
|
this.verticalBarRef = viewChild('verticalBar');
|
6084
6109
|
this.horizontalBarRef = viewChild('horizontalBar');
|
6085
6110
|
this.linearRows = computed(() => {
|
6086
|
-
return buildGridLinearRows(this.gridData().records);
|
6111
|
+
return buildGridLinearRows(this.gridData().records, !this.aiReadonly());
|
6087
6112
|
});
|
6088
6113
|
this.visibleColumnsMap = computed(() => {
|
6089
6114
|
const columns = AITable.getVisibleFields(this.aiTable);
|
@@ -6114,7 +6139,8 @@ class AITableGrid extends AITableGridBase {
|
|
6114
6139
|
coordinate: coordinate,
|
6115
6140
|
containerWidth: this.containerRect().width,
|
6116
6141
|
containerHeight: this.containerRect().height,
|
6117
|
-
references: this.aiReferences()
|
6142
|
+
references: this.aiReferences(),
|
6143
|
+
readonly: this.aiReadonly()
|
6118
6144
|
};
|
6119
6145
|
});
|
6120
6146
|
this.coordinate = computed(() => {
|
@@ -6123,6 +6149,9 @@ class AITableGrid extends AITableGridBase {
|
|
6123
6149
|
this.scrollTotalHeight = computed(() => {
|
6124
6150
|
return Math.max(this.coordinate().totalHeight, this.containerRect().height - this.fieldHeadHeight);
|
6125
6151
|
});
|
6152
|
+
this.scrollbarWidth = computed(() => {
|
6153
|
+
return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
|
6154
|
+
});
|
6126
6155
|
this.scrollAction = (options) => {
|
6127
6156
|
if (this.timer) {
|
6128
6157
|
cancelAnimationFrame(this.timer);
|
@@ -6168,7 +6197,7 @@ class AITableGrid extends AITableGridBase {
|
|
6168
6197
|
}
|
6169
6198
|
});
|
6170
6199
|
effect(() => {
|
6171
|
-
if (this.aiTable.context?.pointPosition()) {
|
6200
|
+
if (!this.aiReadonly() && this.aiTable.context?.pointPosition()) {
|
6172
6201
|
this.toggleHoverCellEditor();
|
6173
6202
|
}
|
6174
6203
|
});
|
@@ -6239,7 +6268,7 @@ class AITableGrid extends AITableGridBase {
|
|
6239
6268
|
mouseEvent.preventDefault();
|
6240
6269
|
const { context } = this.aiTable;
|
6241
6270
|
const { targetName, rowIndex: pointRowIndex } = context.pointPosition();
|
6242
|
-
if (mouseEvent.button !== AITableMouseDownType.Left)
|
6271
|
+
if (mouseEvent.button !== AITableMouseDownType.Left || (targetName !== AI_TABLE_FIELD_HEAD_MORE && this.aiReadonly()))
|
6243
6272
|
return;
|
6244
6273
|
switch (targetName) {
|
6245
6274
|
case AI_TABLE_ROW_ADD_BUTTON: {
|
@@ -6279,24 +6308,27 @@ class AITableGrid extends AITableGridBase {
|
|
6279
6308
|
x: containerRect.x + moreRect.x,
|
6280
6309
|
y: containerRect.y + moreRect.y + moreRect.height
|
6281
6310
|
};
|
6282
|
-
const
|
6283
|
-
x:
|
6311
|
+
const editFieldPosition = {
|
6312
|
+
x: containerRect.x + fieldGroupRect.x - AI_TABLE_CELL_PADDING,
|
6284
6313
|
y: containerRect.y + fieldGroupRect.y + fieldGroupRect.height
|
6285
6314
|
};
|
6286
6315
|
const editOrigin = this.containerElement().querySelector('.konvajs-content');
|
6287
6316
|
this.aiTableGridFieldService.openFieldMenu(this.aiTable, {
|
6288
6317
|
fieldId: fieldId,
|
6289
|
-
fieldMenus: this.fieldMenus,
|
6318
|
+
fieldMenus: this.fieldMenus(),
|
6290
6319
|
origin: this.containerElement(),
|
6291
6320
|
position,
|
6292
6321
|
editOrigin: editOrigin,
|
6293
|
-
|
6322
|
+
editFieldPosition
|
6294
6323
|
});
|
6295
6324
|
}
|
6296
6325
|
return;
|
6297
6326
|
}
|
6298
6327
|
}
|
6299
6328
|
stageDblclick(e) {
|
6329
|
+
if (this.aiReadonly()) {
|
6330
|
+
return;
|
6331
|
+
}
|
6300
6332
|
const _targetName = e.event.target.name();
|
6301
6333
|
const { fieldId, recordId } = getDetailByTargetName(_targetName);
|
6302
6334
|
if (!recordId || !fieldId) {
|
@@ -6364,7 +6396,7 @@ class AITableGrid extends AITableGridBase {
|
|
6364
6396
|
containerResizeListener() {
|
6365
6397
|
this.resizeObserver = new ResizeObserver(() => {
|
6366
6398
|
const containerWidth = this.containerElement().offsetWidth;
|
6367
|
-
const totalWidth = this.coordinate().totalWidth +
|
6399
|
+
const totalWidth = this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
|
6368
6400
|
this.setContainerRect();
|
6369
6401
|
if (containerWidth >= totalWidth) {
|
6370
6402
|
this.aiTable.context.setScrollState({ scrollLeft: 0 });
|
@@ -6417,13 +6449,13 @@ class AITableGrid extends AITableGridBase {
|
|
6417
6449
|
}
|
6418
6450
|
}
|
6419
6451
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
6420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n @if (hasContainerRect()) {\n <ai-table-renderer\n [config]=\"rendererConfig()\"\n (koMousemove)=\"stageMousemove($event)\"\n (koMousedown)=\"stageMousedown($event)\"\n (koClick)=\"stageClick($event)\"\n (koDblclick)=\"stageDblclick($event)\"\n >\n <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"
|
6452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n @if (hasContainerRect()) {\n <ai-table-renderer\n [config]=\"rendererConfig()\"\n (koMousemove)=\"stageMousemove($event)\"\n (koMousedown)=\"stageMousedown($event)\"\n (koClick)=\"stageClick($event)\"\n (koDblclick)=\"stageDblclick($event)\"\n >\n <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n </div>\n <div\n #verticalBar\n class=\"ai-table-vertical-scroll-bar-wrapper\"\n [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n [style.top.px]=\"fieldHeadHeight\"\n >\n <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n </div>\n </ai-table-renderer>\n }\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koWheel", "koClick", "koDblclick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
6421
6453
|
}
|
6422
6454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGrid, decorators: [{
|
6423
6455
|
type: Component,
|
6424
6456
|
args: [{ selector: 'ai-table-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
6425
6457
|
class: 'ai-table-grid'
|
6426
|
-
}, imports: [AITableRenderer], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div #container class=\"ai-table-grid-view\">\n @if (hasContainerRect()) {\n <ai-table-renderer\n [config]=\"rendererConfig()\"\n (koMousemove)=\"stageMousemove($event)\"\n (koMousedown)=\"stageMousedown($event)\"\n (koClick)=\"stageClick($event)\"\n (koDblclick)=\"stageDblclick($event)\"\n >\n <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"
|
6458
|
+
}, imports: [AITableRenderer], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div #container class=\"ai-table-grid-view\">\n @if (hasContainerRect()) {\n <ai-table-renderer\n [config]=\"rendererConfig()\"\n (koMousemove)=\"stageMousemove($event)\"\n (koMousedown)=\"stageMousedown($event)\"\n (koClick)=\"stageClick($event)\"\n (koDblclick)=\"stageDblclick($event)\"\n >\n <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n </div>\n <div\n #verticalBar\n class=\"ai-table-vertical-scroll-bar-wrapper\"\n [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n [style.top.px]=\"fieldHeadHeight\"\n >\n <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n </div>\n </ai-table-renderer>\n }\n</div>\n" }]
|
6427
6459
|
}], ctorParameters: () => [] });
|
6428
6460
|
|
6429
6461
|
/**
|