refactor: rename

packages/grid/src/components/cell-editors/select/select-editor.component.ts

@@ -15,7 +15,7 @@ export interface AITableSingleSelectField extends AITableField<AITableSelectOpti
 @Component({
     selector: 'single-select-cell-editor',
     template: `<thy-select [(ngModel)]="modelValue" [thyAutoExpand]="true" (thyOnExpandStatusChange)="updateValue($event)">
-        <thy-option *ngFor="let option of selectOptions()" [thyValue]="option.id" [thyLabelText]="option.name"> </thy-option>
+        <thy-option *ngFor="let option of selectOptions()" [thyValue]="option._id" [thyLabelText]="option.text"> </thy-option>
     </thy-select> `,
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,

packages/grid/src/components/field-menu/field-menu.component.html

@@ -1,5 +1,5 @@
 @for (menu of fieldMenus; track index; let index = $index) {
-    @if (menu.id === 'divider') {
+    @if (menu._id === 'divider') {
         <thy-divider [thyStyle]="'solid'"></thy-divider>
     } @else {
         <a thyDropdownMenuItem href="javascript:;" (click)="execute(menu)">

packages/grid/src/components/field-property-editor/field-property-editor.component.ts

@@ -88,7 +88,7 @@ export class AITableFieldPropertyEditor {
 
     checkUniqueName = (fieldName: string) => {
         fieldName = fieldName?.trim();
-        return of(!!this.aiTable.fields()?.find((field) => field.name === fieldName && this.aiField()?.id !== field.id));
+        return of(!!this.aiTable.fields()?.find((field) => field.name === fieldName && this.aiField()?._id !== field._id));
     };
 
     selectFieldType(fieldType: AITableFieldType) {
@@ -97,7 +97,7 @@ export class AITableFieldPropertyEditor {
 
     editFieldProperty() {
         if (this.isUpdate) {
-            const path = this.aiTable.fields().findIndex((item) => item.id === this.aiField().id);
+            const path = this.aiTable.fields().findIndex((item) => item._id === this.aiField()._id);
             Actions.setField(this.aiTable, this.aiField(), [path]);
         } else {
             Actions.addField(this.aiTable, this.aiField(), [this.aiTable.fields().length]);

packages/grid/src/constants/field.ts

@@ -4,11 +4,11 @@ import { ElementRef, signal, Signal, WritableSignal } from '@angular/core';
 import { AITableFieldMenuItem } from '../types';
 
 export const DividerMenuItem = {
-    id: 'divider'
+    _id: 'divider'
 };
 
 export const EditFieldPropertyItem = {
-    id: 'editFieldProperty',
+    _id: 'editFieldProperty',
     name: '编辑列',
     icon: 'edit',
     exec: (aiTable: AITable, field: Signal<AITableField>, origin?: HTMLElement | ElementRef<any>) => {
@@ -19,7 +19,7 @@ export const EditFieldPropertyItem = {
 };
 
 export const RemoveFieldItem = {
-    id: 'removeField',
+    _id: 'removeField',
     name: '删除列',
     icon: 'trash',
     exec: (aiTable: AITable, field: Signal<AITableField>) => {

packages/grid/src/core/action/general.ts

@@ -7,7 +7,7 @@ const apply = (aiTable: AITable, records: AITableRecords, fields: AITableFields,
         case ActionName.UpdateFieldValue: {
             const [recordIndex, fieldIndex] = options.path;
             if (fieldIndex > -1 && recordIndex > -1) {
-                const fieldId = aiTable.fields()[fieldIndex].id;
+                const fieldId = aiTable.fields()[fieldIndex]._id;
                 records[recordIndex].values[fieldId] = options.newFieldValue;
             }
             break;
@@ -25,7 +25,7 @@ const apply = (aiTable: AITable, records: AITableRecords, fields: AITableFields,
                 const newField = options.field;
                 fields.splice(fieldIndex, 0, newField);
                 const newRecord = {
-                    [newField.id]: ''
+                    [newField._id]: ''
                 };
                 records.forEach((item) => {
                     item.values = {
@@ -59,7 +59,7 @@ const apply = (aiTable: AITable, records: AITableRecords, fields: AITableFields,
         case ActionName.RemoveField: {
             const [fieldIndex] = options.path;
             if (fieldIndex > -1) {
-                const fieldId = aiTable.fields()[fieldIndex].id;
+                const fieldId = aiTable.fields()[fieldIndex]._id;
                 fields.splice(fieldIndex, 1);
                 records.forEach((item) => {
                     delete item.values[fieldId];

packages/grid/src/core/types/core.ts

@@ -38,13 +38,15 @@ export enum AITableStatType {
 }
 
 export interface AITableSelectOption {
-    id: string;
-    name: string;
+    _id: string;
+    text: string;
     color?: string;
+    bg_color?: string;
+    [key: string]: any;
 }
 
 export interface AITableField<T = unknown> {
-    id: string;
+    _id: string;
     name: string;
     type: AITableFieldType;
     icon?: string;
@@ -81,7 +83,7 @@ export type FieldValue =
     | any;
 
 export interface AITableRecord {
-    id: string;
+    _id: string;
     checked?: boolean;
     values: Record<string, FieldValue>;
 }

packages/grid/src/core/utils/field.ts

@@ -13,5 +13,5 @@ export function createDefaultFieldName(aiTable: AITable, type: AITableFieldType
 }
 
 export function createDefaultField(aiTable: AITable, type: AITableFieldType = AITableFieldType.text) {
-    return { id: idCreator(), type, name: createDefaultFieldName(aiTable, type) };
+    return { _id: idCreator(), type, name: createDefaultFieldName(aiTable, type) };
 }

packages/grid/src/core/utils/queries.ts

@@ -34,7 +34,7 @@ export const AITableQueries = {
         if (!field) {
             throw new Error(`can not find field at path [${path}]`);
         }
-        return aiTable.records()[path[0]].values[field.id];
+        return aiTable.records()[path[0]].values[field._id];
     },
 
     getField(aiTable: AITable, path: AIFieldPath): AITableField {

packages/grid/src/core/utils/record.ts

@@ -4,11 +4,11 @@ import { idCreator } from './id-creator';
 
 export function getDefaultRecord(fields: AITableFields) {
     const newRow: AITableRecord = {
-        id: idCreator(),
+        _id: idCreator(),
         values: {}
     };
     fields.map((item) => {
-        newRow.values[item.id] = getDefaultFieldValue(item.type);
+        newRow.values[item._id] = getDefaultFieldValue(item.type);
     });
     return newRow;
 }

packages/grid/src/grid.component.html

@@ -2,12 +2,12 @@
     <div class="grid-column-checkbox grid-cell">
         <label thyCheckbox thyLabelText="" [ngModel]="isSelectedAll" (ngModelChange)="toggleSelectAll($event)"></label>
     </div>
-    @for (field of gridData().fields; track field.id) {
+    @for (field of gridData().fields; track field._id) {
         <div
             class="grid-cell grid-field"
             #fieldAction
-            [attr.fieldId]="field.id"
-            [ngClass]="{ highlight: aiTable.selection().selectedFields.has(field.id) }"
+            [attr.fieldId]="field._id"
+            [ngClass]="{ highlight: aiTable.selection().selectedFields.has(field._id) }"
             [ngStyle]="{ width: field.width + 'px' }"
         >
             <span class="text-truncate">
@@ -23,7 +23,7 @@
                 href="javascript:;"
             >
                 <thy-dropdown-menu #fieldMenu>
-                    <field-menu [origin]="fieldAction" [fieldId]="field.id" [aiTable]="aiTable" [fieldMenus]="fieldMenus"></field-menu>
+                    <field-menu [origin]="fieldAction" [fieldId]="field._id" [aiTable]="aiTable" [fieldMenus]="fieldMenus"></field-menu>
                 </thy-dropdown-menu>
             </a>
         </div>
@@ -33,15 +33,15 @@
     </div>
 </div>
 <div class="grid-body d-flex">
-    @for (record of gridData().records; track record.id; let index = $index) {
-        <div class="grid-row d-flex" [ngClass]="{ highlight: aiTable.selection().selectedRecords.has(record.id) }">
+    @for (record of gridData().records; track record._id; let index = $index) {
+        <div class="grid-row d-flex" [ngClass]="{ highlight: aiTable.selection().selectedRecords.has(record._id) }">
             <div class="grid-row-index">
                 <label
                     [ngClass]="record.checked ? 'checked-box' : 'unchecked-box'"
                     thyCheckbox
                     thyLabelText=""
                     [ngModel]="record.checked"
-                    (ngModelChange)="selectRecord(record.id)"
+                    (ngModelChange)="selectRecord(record._id)"
                 ></label>
                 <span [ngClass]="record.checked ? 'grid-row-no-number' : 'grid-row-number'"> {{ index + 1 }} </span>
             </div>
@@ -50,51 +50,51 @@
                     #cell
                     class="grid-cell"
                     [ngClass]="{
-                        highlight: aiTable.selection().selectedCells.has(record.id) || aiTable.selection().selectedFields.has(field.id),
-                        selected: aiTable.selection().selectedCells.get(record.id)?.hasOwnProperty(field.id)
+                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),
+                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)
                     }"
                     [attr.type]="[field.type]"
-                    [attr.fieldId]="[field.id]"
-                    [attr.recordId]="[record.id]"
+                    [attr.fieldId]="[field._id]"
+                    [attr.recordId]="[record._id]"
                     [ngStyle]="{ width: field.width + 'px' }"
                 >
                     @switch (field.type) {
                         @case (AITableFieldType.select) {
-                            @if (!field.isMultiple && record.values[field.id] | selectOption: field['options']; as selectedOption) {
-                                <thy-tag [thyColor]="selectedOption!.color!">{{ selectedOption.name }}</thy-tag>
+                            @if (!field.isMultiple && record.values[field._id] | selectOption: field['options']; as selectedOption) {
+                                <thy-tag [thyColor]="selectedOption!.color!">{{ selectedOption.text }}</thy-tag>
                             }
                         }
                         @case (AITableFieldType.date) {
-                            {{ record.values[field.id] | thyDatePickerFormat }}
+                            {{ record.values[field._id] | thyDatePickerFormat }}
                         }
                         @case (AITableFieldType.rate) {
-                            <thy-rate [(ngModel)]="record.values[field.id]"></thy-rate>
+                            <thy-rate [(ngModel)]="record.values[field._id]"></thy-rate>
                         }
                         @case (AITableFieldType.link) {
                             <a
                                 class="d-block"
                                 target="_blank"
-                                [href]="record.values[field.id]?.url"
+                                [href]="record.values[field._id]?.url"
                                 thyStopPropagation
                                 thyFlexibleText
-                                [thyTooltipContent]="record.values[field.id]?.text"
+                                [thyTooltipContent]="record.values[field._id]?.text"
                             >
-                                {{ record.values[field.id]?.text }}
+                                {{ record.values[field._id]?.text }}
                             </a>
                         }
                         @case (AITableFieldType.progress) {
                             <thy-progress
                                 class="w-100"
-                                [thyValue]="record.values[field.id]"
-                                [thySize]="record.values[field.id]?.config?.size || 'md'"
-                                [thyMax]="record.values[field.id]?.config?.max || 100"
-                                [thyType]="record.values[field.id]?.config?.progressType || 'success'"
+                                [thyValue]="record.values[field._id]"
+                                [thySize]="record.values[field._id]?.config?.size || 'md'"
+                                [thyMax]="record.values[field._id]?.config?.max || 100"
+                                [thyType]="record.values[field._id]?.config?.progressType || 'success'"
                             >
-                                <span> {{ record.values[field.id] }}{{ record.values[field.id]?.config?.suffix || '%' }} </span>
+                                <span> {{ record.values[field._id] }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>
                             </thy-progress>
                         }
                         @default {
-                            <span class="text-truncate"> {{ record.values[field.id] }}</span>
+                            <span class="text-truncate"> {{ record.values[field._id] }}</span>
                         }
                     }
                     <div class="autofill-container"></div>

packages/grid/src/pipes/grid.ts

@@ -6,7 +6,7 @@ import { AITableSelectOption } from '../core';
     standalone: true
 })
 export class SelectOptionPipe implements PipeTransform {
-    transform(id: string, options: AITableSelectOption[]) {
-        return options.find((item) => item.id === id);
+    transform(_id: string, options: AITableSelectOption[]) {
+        return options.find((item) => item._id === _id);
     }
 }

packages/grid/src/services/selection.service.ts

@@ -46,7 +46,7 @@ export class AITableGridSelectionService {
         this.clearSelection();
         if (checked) {
             this.aiTable.records().forEach((item) => {
-                this.selectRecord(item.id);
+                this.selectRecord(item._id);
             });
         }
     }

packages/grid/src/styles/styles.scss

@@ -135,14 +135,6 @@
         align-items: center;
     }
 
-    .text-column {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
     .cell-active {
         border: 1px solid variables.$primary;
         margin-left: 0.5px;

packages/grid/src/types/field.ts

@@ -2,7 +2,7 @@ import { ElementRef, Signal } from '@angular/core';
 import { AITable, AITableField } from '../core';
 
 export interface AITableFieldMenuItem {
-    id: string;
+    _id: string;
     name?: string;
     icon?: string;
     exec?: (aiTable: AITable, field: Signal<AITableField>, origin?: HTMLElement | ElementRef<any>) => void;

packages/grid/src/utils/build.ts

@@ -12,7 +12,7 @@ export const buildGridData = (recordValue: AITableRecords, fieldsValue: AITableF
             }
         }),
         records: recordValue.map((item) => {
-            return { ...item, checked: selection.selectedRecords.has(item.id) };
+            return { ...item, checked: selection.selectedRecords.has(item._id) };
         })
     };
 };

packages/grid/src/utils/cell.ts

@@ -1,8 +1,8 @@
 import { computed, Signal } from '@angular/core';
 import { AITableField, AITableFields, AITableRecord, AITableRecords } from '../core';
 
-export function getRecordOrField(value: Signal<AITableRecords | AITableFields>, id: string): Signal<AITableField | AITableRecord> {
+export function getRecordOrField(value: Signal<AITableRecords | AITableFields>, _id: string): Signal<AITableField | AITableRecord> {
     return computed(() => {
-        return value().find((item) => item.id === id)!;
+        return value().find((item) => item._id === _id)!;
     });
 }

src/app/component/common/content/content.component.ts

@@ -43,15 +43,15 @@ export class DemoTableContent {
     listOfOption = [
         {
             value: 'short',
-            text: 'short'
+            name: 'short'
         },
         {
             value: 'medium',
-            text: 'medium'
+            name: 'medium'
         },
         {
             value: 'tall',
-            text: 'tall'
+            name: 'tall'
         }
     ];
 
@@ -61,7 +61,7 @@ export class DemoTableContent {
             EditFieldPropertyItem,
             DividerMenuItem,
             {
-                id: 'filterFields',
+                _id: 'filterFields',
                 name: '按本列筛选',
                 icon: 'filter-line',
                 exec: (aiTable: AITable, field: Signal<AITableField>) => {},
@@ -138,15 +138,15 @@ export class DemoTableContent {
     removeRecord() {
         const recordIds = [...this.aiTable.selection().selectedRecords.keys()];
         recordIds.forEach((item) => {
-            const path = this.aiTable.records().findIndex((record) => record.id === item);
+            const path = this.aiTable.records().findIndex((record) => record._id === item);
             Actions.removeRecord(this.aiTable, [path]);
         });
     }
 
     moveField() {
         const newIndex = 2;
         const selectedFieldIds = [...this.aiTable.selection().selectedFields.keys()];
-        const selectedRecords = this.aiTable.fields().filter((item) => selectedFieldIds.includes(item.id));
+        const selectedRecords = this.aiTable.fields().filter((item) => selectedFieldIds.includes(item._id));
         selectedRecords.forEach((item) => {
             const path = AITableQueries.findPath(this.aiTable, item) as AIFieldPath;
             Actions.moveField(this.aiTable, path, [newIndex]);
@@ -155,7 +155,7 @@ export class DemoTableContent {
 
     moveRecord() {
         const selectedRecordIds = [...this.aiTable.selection().selectedRecords.keys()];
-        const selectedRecords = this.aiTable.records().filter((item) => selectedRecordIds.includes(item.id));
+        const selectedRecords = this.aiTable.records().filter((item) => selectedRecordIds.includes(item._id));
         const selectedRecordsAfterNewPath: AITableRecord[] = [];
         let offset = 0;
         const newIndex = 2;

src/app/component/table.component.html

@@ -4,9 +4,9 @@
         tableService.provider ? '断开连接' : '连接协同'
     }}</a>
 </div>
-<thy-tabs (thyActiveTabChange)="activeTabChange($event)" [thyActiveTab]="tableService.activeView().id">
+<thy-tabs (thyActiveTabChange)="activeTabChange($event)" [thyActiveTab]="tableService.activeView()._id">
     @for (item of tableService.views(); track $index) {
-        <thy-tab [thyTitle]="item.name" [id]="item.id">
+        <thy-tab [thyTitle]="item.name" [id]="item._id">
             @if (item.isActive) {
                 <router-outlet></router-outlet>
             }