@ai-table/grid 0.4.5 → 0.4.6

package/fesm2022/ai-table-grid.mjs

@@ -3792,7 +3792,7 @@ function getPlaceHolderCellsConfigs(options) {
                 continue;
             }
             // 当前行的 Y 轴偏移量，并根据列宽和列索引获取单元格的水平位置（宽度和偏移量）
-            const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET * 2;
+            const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
             let { width, offset, isGroupAndFirstColumn } = getCellHorizontalPosition({
                 columnWidth,
                 columnIndex,
@@ -3802,7 +3802,7 @@ function getPlaceHolderCellsConfigs(options) {
             if (isGroupAndFirstColumn) {
                 offset += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
             }
-            const height = rowHeight;
+            const height = rowHeight - AI_TABLE_OFFSET;
             configs.unshift({
                 key: `placeholder-cell-${fieldId}-${recordId}`,
                 name: generateTargetName({
@@ -3810,9 +3810,9 @@ function getPlaceHolderCellsConfigs(options) {
                     fieldId,
                     recordId
                 }),
-                x: x + offset,
-                y,
-                width,
+                x: x,
+                y: y,
+                width: columnWidth - AI_TABLE_CELL_LINE_BORDER,
                 height,
                 fill: Colors.transparent,
                 strokeEnabled: false,
@@ -6851,6 +6851,13 @@ class RecordLayout extends Layout {
             stroke: this.colors.gray200
         });
         if (!this.hiddenIndexColumn) {
+            this.rect({
+                x: x,
+                y: y + AI_TABLE_OFFSET,
+                width: indexWidth,
+                height: rowHeight - AI_TABLE_OFFSET * 2,
+                fill: indexFill
+            });
             // 垂直边框
             this.line({
                 x: x,
@@ -8293,72 +8300,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
-class AITableExpandRecord {
-    constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
-        this.shouldShowIcon = computed(() => {
-            const { aiTable, rowStartIndex, rowStopIndex } = this.config();
-            const context = aiTable.context;
-            if (!context)
-                return false;
-            if (!context.recordDetailConfig?.()?.showExpandIcon)
-                return false;
-            const { rowIndex: pointRowIndex } = context.pointPosition();
-            const row = context.linearRows()[pointRowIndex];
-            return pointRowIndex >= rowStartIndex && pointRowIndex <= rowStopIndex && row && row.type === AITableRowType.record;
-        }, ...(ngDevMode ? [{ debugName: "shouldShowIcon" }] : []));
-        this.expandIconConfig = computed(() => {
-            const { coordinate, aiTable } = this.config();
-            const context = aiTable.context;
-            const { rowIndex: pointRowIndex } = context.pointPosition();
-            const row = context.linearRows()[pointRowIndex];
-            const recordId = row?._id;
-            const firstColumnOffset = coordinate.getColumnOffset(0);
-            const y = coordinate.getRowOffset(pointRowIndex) + AI_TABLE_OFFSET;
-            return {
-                coordinate,
-                name: generateTargetName({
-                    targetName: AI_TABLE_EXPAND_RECORD_ICON,
-                    recordId,
-                    mouseStyle: 'pointer'
-                }),
-                x: firstColumnOffset - AI_TABLE_ROW_HEAD_EXPAND_WIDTH + (AI_TABLE_ROW_HEAD_EXPAND_WIDTH - AI_TABLE_ACTION_COMMON_SIZE) / 2,
-                y: y + (AI_TABLE_FIELD_HEAD_HEIGHT - AI_TABLE_ACTION_COMMON_SIZE) / 2,
-                data: ExpandRecordPath,
-                fill: Colors.gray600,
-                hoverFill: Colors.primary,
-                backgroundWidth: AI_TABLE_ACTION_COMMON_SIZE,
-                backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
-                cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
-                listening: true
-            };
-        }, ...(ngDevMode ? [{ debugName: "expandIconConfig" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableExpandRecord, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AITableExpandRecord, isStandalone: true, selector: "ai-table-expand-record", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        <ko-group>
-            @if (shouldShowIcon()) {
-                <ai-table-action-icon [config]="expandIconConfig()"></ai-table-action-icon>
-            }
-        </ko-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableExpandRecord, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-expand-record',
-                    template: `
-        <ko-group>
-            @if (shouldShowIcon()) {
-                <ai-table-action-icon [config]="expandIconConfig()"></ai-table-action-icon>
-            }
-        </ko-group>
-    `,
-                    imports: [KoContainer, AITableActionIcon],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
-
 class AITableBackground {
     constructor() {
         this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -8529,6 +8470,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], koClick: [{ type: i0.Output, args: ["koClick"] }], hover: [{ type: i0.Output, args: ["hover"] }], koMouseenter: [{ type: i0.Output, args: ["koMouseenter"] }], koMouseleave: [{ type: i0.Output, args: ["koMouseleave"] }], isHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHover", required: false }] }, { type: i0.Output, args: ["isHoverChange"] }] } });
 
+class AITableExpandRecord {
+    constructor() {
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.backgroundConfig = computed(() => {
+            const { coordinate, aiTable } = this.config();
+            const context = aiTable.context;
+            const { rowIndex: pointRowIndex, columnIndex } = context.pointPosition();
+            const firstColumnOffset = coordinate.getColumnOffset(0);
+            const y = coordinate.getRowOffset(pointRowIndex) + AI_TABLE_OFFSET;
+            const rowHeight = coordinate.getRowHeight(pointRowIndex);
+            const firstField = aiTable.gridData().fields[0];
+            const row = context.linearRows()[pointRowIndex];
+            const recordId = row?._id;
+            const isRateOrProgress = firstField?.type === AITableFieldType.rate || firstField?.type === AITableFieldType.progress;
+            const isFirstColumn = columnIndex === 0;
+            const activeCell = aiTable.selection()?.activeCell;
+            const fieldId = aiTable.gridData().fields[0]._id;
+            const isWhiteBg = isRateOrProgress && isFirstColumn && (!activeCell || (activeCell?.[0] === recordId && activeCell?.[1] === fieldId));
+            return {
+                coordinate,
+                x: firstColumnOffset - AI_TABLE_ROW_HEAD_EXPAND_WIDTH,
+                y: y,
+                width: AI_TABLE_ROW_HEAD_EXPAND_WIDTH + AI_TABLE_CELL_LINE_BORDER * 2 + AI_TABLE_OFFSET,
+                height: rowHeight,
+                fill: isWhiteBg ? Colors.white : Colors.transparent,
+                hoverFill: Colors.transparent,
+                listening: true
+            };
+        }, ...(ngDevMode ? [{ debugName: "backgroundConfig" }] : []));
+        this.shouldShowIcon = computed(() => {
+            const { aiTable, rowStartIndex, rowStopIndex } = this.config();
+            const context = aiTable.context;
+            if (!context)
+                return false;
+            if (!context.recordDetailConfig?.()?.showExpandIcon)
+                return false;
+            const { rowIndex: pointRowIndex } = context.pointPosition();
+            const row = context.linearRows()[pointRowIndex];
+            return pointRowIndex >= rowStartIndex && pointRowIndex <= rowStopIndex && row && row.type === AITableRowType.record;
+        }, ...(ngDevMode ? [{ debugName: "shouldShowIcon" }] : []));
+        this.expandIconConfig = computed(() => {
+            const { coordinate, aiTable } = this.config();
+            const context = aiTable.context;
+            const { rowIndex: pointRowIndex } = context.pointPosition();
+            const row = context.linearRows()[pointRowIndex];
+            const recordId = row?._id;
+            const firstColumnOffset = coordinate.getColumnOffset(0);
+            const y = coordinate.getRowOffset(pointRowIndex) + AI_TABLE_OFFSET;
+            return {
+                coordinate,
+                name: generateTargetName({
+                    targetName: AI_TABLE_EXPAND_RECORD_ICON,
+                    recordId,
+                    mouseStyle: 'pointer'
+                }),
+                x: firstColumnOffset - AI_TABLE_ROW_HEAD_EXPAND_WIDTH + (AI_TABLE_ROW_HEAD_EXPAND_WIDTH - AI_TABLE_ACTION_COMMON_SIZE) / 2,
+                y: y + (AI_TABLE_FIELD_HEAD_HEIGHT - AI_TABLE_ACTION_COMMON_SIZE) / 2,
+                data: ExpandRecordPath,
+                fill: Colors.gray600,
+                hoverFill: Colors.primary,
+                backgroundWidth: AI_TABLE_ACTION_COMMON_SIZE,
+                backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
+                cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
+                listening: true
+            };
+        }, ...(ngDevMode ? [{ debugName: "expandIconConfig" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableExpandRecord, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AITableExpandRecord, isStandalone: true, selector: "ai-table-expand-record", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        <ko-group>
+            @if (shouldShowIcon()) {
+                <ai-table-background [config]="backgroundConfig()"></ai-table-background>
+                <ai-table-action-icon [config]="expandIconConfig()"></ai-table-action-icon>
+            }
+        </ko-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableExpandRecord, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-expand-record',
+                    template: `
+        <ko-group>
+            @if (shouldShowIcon()) {
+                <ai-table-background [config]="backgroundConfig()"></ai-table-background>
+                <ai-table-action-icon [config]="expandIconConfig()"></ai-table-action-icon>
+            }
+        </ko-group>
+    `,
+                    imports: [KoContainer, AITableActionIcon, AITableBackground],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
+
 class AITableShadow {
     constructor() {
         this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -9225,6 +9260,10 @@ class AITableFieldStat {
                         config.x = -AI_TABLE_OFFSET;
                         config.width = config.width + AI_TABLE_OFFSET;
                         config.borders = [false, true, false, true];
+                        if (aiTable.context?.recordDetailConfig?.()?.showExpandIcon) {
+                            config.width = config.width + AI_TABLE_ROW_HEAD_EXPAND_WIDTH;
+                            config.x = config.x - AI_TABLE_ROW_HEAD_EXPAND_WIDTH;
+                        }
                     }
                     config.stroke = Colors.gray200;
                     config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
@@ -12559,7 +12598,7 @@ class RecordDetailComponent {
             const field = this.firstField();
             if (field) {
                 const cellValue = AITableQueries.getFieldValue(this.aiTable(), [this.currentRecordId(), field._id]);
-                if (!isUndefinedOrNull(cellValue)) {
+                if (!this.isUndefinedTitle(cellValue, field)) {
                     const options = {
                         aiTable: this.aiTable(),
                         field,
@@ -12668,7 +12707,8 @@ class RecordDetailComponent {
     addNewField(e) {
         const origin = e.target;
         const newField = createDefaultField(this.aiTable(), AITableFieldType.text);
-        const popoverRef = this.thyPopover.open(AITableFieldSetting, {
+        const component = this.aiTable().context?.aiFieldConfig()?.fieldSettingComponent ?? AITableFieldSetting;
+        const popoverRef = this.thyPopover.open(component, {
             origin,
             placement: 'topLeft',
             manualClosure: true,
@@ -12706,6 +12746,14 @@ class RecordDetailComponent {
         clearSelection(this.aiTable());
         setActiveCell(this.aiTable(), [this.recordId(), fieldId]);
     }
+    isUndefinedTitle(value, field) {
+        switch (field.type) {
+            case AITableFieldType.text:
+                return value === '';
+            default:
+                return (Array.isArray(value) && value.length === 0) || isUndefinedOrNull(value);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\">\n                <thy-icon thyIconName=\"angle-up\"></thy-icon>\n            </button>\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\">\n                <thy-icon thyIconName=\"angle-down\"></thy-icon>\n            </button>\n        </div>\n        <thy-divider [thyVertical]=\"true\"></thy-divider>\n        <div class=\"header-operations\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n                <thy-icon thyIconName=\"list\"></thy-icon>\n            </button>\n\n            <ng-template #headerMoreMenu>\n                <div class=\"thy-dropdown-menu\">\n                    <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n                        <thy-icon thyIconName=\"trash\"></thy-icon>\n                        <span>{{ i18nTexts().deleteRecord }}</span>\n                    </a>\n                </div>\n            </ng-template>\n\n            <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\">\n                <thy-icon thyIconName=\"close\"></thy-icon>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div\n                    class=\"pt-4 cell-item\"\n                    [class.active]=\"activeFieldId === field._id\"\n                    (mouseenter)=\"showFieldMenu(field._id)\"\n                    (mouseleave)=\"hideFieldMenu(field._id)\"\n                >\n                    <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible()[field._id]\">\n                                <a\n                                    thyAction\n                                    [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                    href=\"javascript:;\"\n                                    (click)=\"fieldMenuMoreClick($event, field._id)\"\n                                    ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                                ></a>\n                            </div>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>{{ i18nTexts().addField }}</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { 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: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }