@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.
Files changed (48) hide show
  1. package/esm2022/components/field-menu/field-menu.component.mjs +3 -3
  2. package/esm2022/core/coordinate.mjs +2 -2
  3. package/esm2022/dom-grid.component.mjs +2 -2
  4. package/esm2022/grid-base.component.mjs +4 -5
  5. package/esm2022/grid.component.mjs +20 -14
  6. package/esm2022/renderer/components/add-field-column.component.mjs +38 -20
  7. package/esm2022/renderer/components/field-head.component.mjs +5 -5
  8. package/esm2022/renderer/components/frozen-heads.component.mjs +3 -3
  9. package/esm2022/renderer/components/heads.component.mjs +1 -1
  10. package/esm2022/renderer/creations/create-cells.mjs +4 -4
  11. package/esm2022/renderer/creations/create-heads.mjs +1 -1
  12. package/esm2022/renderer/drawers/add-row-layout-drawer.mjs +4 -4
  13. package/esm2022/renderer/drawers/layout-drawer.mjs +12 -10
  14. package/esm2022/renderer/drawers/record-row-layout-drawer.mjs +16 -7
  15. package/esm2022/renderer/renderer.component.mjs +13 -12
  16. package/esm2022/services/field.service.mjs +5 -7
  17. package/esm2022/types/component-config.mjs +1 -1
  18. package/esm2022/types/field.mjs +1 -1
  19. package/esm2022/types/grid.mjs +1 -1
  20. package/esm2022/utils/build.mjs +3 -3
  21. package/fesm2022/ai-table-grid.mjs +110 -78
  22. package/fesm2022/ai-table-grid.mjs.map +1 -1
  23. package/grid-base.component.d.ts +4 -5
  24. package/grid-base.component.d.ts.map +1 -1
  25. package/grid.component.d.ts +1 -1
  26. package/grid.component.d.ts.map +1 -1
  27. package/package.json +1 -1
  28. package/renderer/components/add-field-column.component.d.ts +3 -6
  29. package/renderer/components/add-field-column.component.d.ts.map +1 -1
  30. package/renderer/components/frozen-heads.component.d.ts +2 -2
  31. package/renderer/components/heads.component.d.ts +2 -2
  32. package/renderer/creations/create-heads.d.ts +2 -2
  33. package/renderer/drawers/add-row-layout-drawer.d.ts +1 -1
  34. package/renderer/drawers/add-row-layout-drawer.d.ts.map +1 -1
  35. package/renderer/drawers/layout-drawer.d.ts +2 -2
  36. package/renderer/drawers/layout-drawer.d.ts.map +1 -1
  37. package/renderer/drawers/record-row-layout-drawer.d.ts.map +1 -1
  38. package/renderer/renderer.component.d.ts +3 -1
  39. package/renderer/renderer.component.d.ts.map +1 -1
  40. package/services/field.service.d.ts.map +1 -1
  41. package/types/component-config.d.ts +9 -1
  42. package/types/component-config.d.ts.map +1 -1
  43. package/types/field.d.ts +1 -1
  44. package/types/field.d.ts.map +1 -1
  45. package/types/grid.d.ts +1 -0
  46. package/types/grid.d.ts.map +1 -1
  47. package/utils/build.d.ts +1 -1
  48. 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 <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n } @else {\n @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\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 }); }
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 <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n } @else {\n @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\n <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n <span>{{ menu.name! }}</span>\n </a>\n }\n }\n}\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: origin ? 'active' : undefined,
1700
- hasBackdrop: false,
1701
- insideClosable: true,
1702
- outsideClosable: true,
1700
+ originActiveClass: undefined,
1703
1701
  initialState: {
1704
1702
  origin: editOrigin,
1705
- position: options.editOriginPosition,
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.coordinate = input.required();
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.coordinate().getColumnWidth(this.columnStopIndex());
3199
- const lastColumnOffset = this.coordinate().getColumnOffset(this.columnStopIndex());
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.fields()[this.columnStopIndex()]._id,
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.coordinate().containerWidth - this.x() < this.btnWidth ? this.btnWidth : this.coordinate().containerWidth - this.x(),
3212
- height: this.coordinate().rowInitSize,
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 offsetY = (this.coordinate().rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
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.1.0", version: "18.2.0", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { coordinate: { classPropertyName: "coordinate", publicName: "coordinate", isSignal: true, isRequired: true, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, columnStopIndex: { classPropertyName: "columnStopIndex", publicName: "columnStopIndex", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
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-rect [config]="rectConfig()"></ko-rect>
3233
- <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
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-rect [config]="rectConfig()"></ko-rect>
3244
- <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
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, KoStage, KoShape, AITableIcon],
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: this.x + 0.5,
4232
- y: y - 0.5,
4233
- width: this.containerWidth - this.x < width ? width : this.containerWidth - this.x,
4234
- height: rowHeight + 1,
4235
- fill: this.colors.transparent
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, areaType, targetName } = context.pointPosition();
5054
- const isHover = pointRowIndex === rowIndex && areaType !== AITableAreaType.none;
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 - AI_TABLE_CELL_PADDING - AI_TABLE_ACTION_COMMON_SIZE,
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: isSelected || isHoverIcon ? Colors.itemActiveBgColor : Colors.gray80,
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, KoStage, KoShape, AITableFieldIcon, AITableText, AITableIcon],
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: [KoStage, KoShape, AITableFieldHead, AITableIcon, KoContainer],
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
- const { scrollLeft } = this.scrollState();
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.columnHeadConfig = computed(() => {
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]=\"columnHeadConfig()\"></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]=\"columnHeadConfig()\"></ai-table-column-heads>\n <ai-table-add-field\n [coordinate]=\"coordinate()\"\n [fields]=\"fields()\"\n [columnStopIndex]=\"visibleRangeInfo().columnStopIndex\"\n ></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: ["coordinate", "fields", "columnStopIndex"] }, { 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 }); }
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]=\"columnHeadConfig()\"></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]=\"columnHeadConfig()\"></ai-table-column-heads>\n <ai-table-add-field\n [coordinate]=\"coordinate()\"\n [fields]=\"fields()\"\n [columnStopIndex]=\"visibleRangeInfo().columnStopIndex\"\n ></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" }]
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 editOriginPosition = {
6283
- x: AI_TABLE_POPOVER_LEFT_OFFSET + fieldGroupRect.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
- editOriginPosition
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 + this.ADD_BUTTON_WIDTH;
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]=\"coordinate().totalWidth + ADD_BUTTON_WIDTH\"></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 }); }
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]=\"coordinate().totalWidth + ADD_BUTTON_WIDTH\"></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" }]
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
  /**