✨feat(grid): render select and multi select #WIK-16262

.gitignore

@@ -10,6 +10,7 @@
 /node_modules
 npm-debug.log
 yarn-error.log
+pnpm-lock.yaml
 
 # IDEs and editors
 .idea/

package.json

@@ -26,39 +26,39 @@
         "url": "https://github.com/worktile/ai-table"
     },
     "dependencies": {
-        "@angular/animations": "^18.0.0",
-        "@angular/cdk": "^18.0.2",
-        "@angular/common": "^18.0.0",
-        "@angular/compiler": "^18.0.0",
-        "@angular/core": "^18.0.0",
-        "@angular/forms": "^18.0.0",
-        "@angular/platform-browser": "^18.0.0",
-        "@angular/platform-browser-dynamic": "^18.0.0",
-        "@angular/router": "^18.0.0",
-        "@tethys/cdk": "^17.0.8",
-        "@tethys/icons": "^1.4.62",
+        "@angular/animations": "^18.1.4",
+        "@angular/cdk": "^18.1.4",
+        "@angular/common": "^18.1.4",
+        "@angular/compiler": "^18.1.4",
+        "@angular/core": "^18.1.4",
+        "@angular/forms": "^18.1.4",
+        "@angular/platform-browser": "^18.1.4",
+        "@angular/platform-browser-dynamic": "^18.1.4",
+        "@angular/router": "^18.1.4",
+        "@tethys/cdk": "^17.0.17",
+        "@tethys/icons": "^1.4.69",
         "date-fns": "^3.6.0",
         "immer": "^10.0.3",
-        "ngx-tethys": "17.0.14",
+        "ngx-tethys": "17.0.17",
         "npm": "^10.8.1",
         "rxjs": "~7.8.0",
         "tslib": "^2.6.3",
         "zone.js": "~0.14.3"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^18.0.3",
-        "@angular/cli": "^18.0.3",
-        "@angular/compiler-cli": "^18.0.0",
-        "@types/jasmine": "~5.1.0",
+        "@angular-devkit/build-angular": "^18.1.4",
+        "@angular/cli": "^18.1.4",
+        "@angular/compiler-cli": "^18.1.4",
+        "@types/jasmine": "~5.1.4",
         "@types/node": "^10.14.9",
         "@types/ws": "^7.4.7",
         "@worktile/pkg-manager": "^0.1.0",
         "chalk": "^2.4.2",
         "cpx": "^1.5.0",
-        "jasmine-core": "~5.1.0",
-        "karma": "~6.4.0",
+        "jasmine-core": "~5.2.0",
+        "karma": "~6.4.4",
         "karma-chrome-launcher": "~3.2.0",
-        "karma-coverage": "~2.2.0",
+        "karma-coverage": "~2.2.1",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
         "ng-packagr": "^18.0.0",

packages/grid/package.json

@@ -2,8 +2,8 @@
     "name": "@ai-table/grid",
     "version": "0.0.6",
     "peerDependencies": {
-        "@angular/common": "^18.0.0",
-        "@angular/core": "^18.0.0"
+        "@angular/common": "^18.1.4",
+        "@angular/core": "^18.1.4"
     },
     "dependencies": {
         "tslib": "^2.3.0"

packages/grid/src/components/cell-editors/cell-editor.scss

@@ -1,3 +1,6 @@
+@use 'ngx-tethys/styles/variables.scss';
+@use './progress/progress-editor.component.scss';
+
 .date-time-cell-editor {
     .thy-calendar-picker {
         height: 100%;
@@ -16,10 +19,27 @@
 }
 
 .number-cell-editor {
-    .thy-input-number{
+    .thy-input-number {
         .input-number-input {
             border-width: 2px;
         }
     }
-
+}
+
+.select-cell-editor {
+    &:not(.tag) {
+        .select-control-multiple {
+            .choice-remove-link {
+                .thy-icon-close {
+                    color: variables.$gray-700;
+                }
+            }
+        }
+    }
+}
+
+.grid-cell-editor {
+    .select-cell-editor .form-control {
+        height: auto;
+    }
 }

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

@@ -0,0 +1,23 @@
+<thy-select
+    [(ngModel)]="modelValue"
+    [thyAutoExpand]="true"
+    [thyAllowClear]="true"
+    [thyMode]="field().isMultiple ? 'multiple' : ''"
+    [thyPreset]="'tag'"
+    (thyOnExpandStatusChange)="updateValue($event)"
+>
+    <ng-template #selectedDisplay let-option>
+        @if (optionStyle() === AITableSelectOptionStyle.tag) {
+            <select-option [field]="field()" [displayOption]="option"></select-option>
+        } @else {
+            <div thyTag class="mb-1 mr-1">
+                <select-option [field]="field()" [displayOption]="option"></select-option>
+            </div>
+        }
+    </ng-template>
+    @for (option of selectOptions(); track option._id) {
+        <thy-option [thyValue]="option._id" [thyRawValue]="option" [thyShowOptionCustom]="true" [thyLabelText]="option.text">
+            <select-option [field]="field()" [displayOption]="option"></select-option>
+        </thy-option>
+    }
+</thy-select>

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

@@ -1,36 +1,52 @@
-import { NgForOf, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, Input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { ThySelect } from 'ngx-tethys/select';
-import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
-import { ThyTag } from 'ngx-tethys/tag';
+import { ThyDot } from 'ngx-tethys/dot';
+import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
 import { ThyIcon } from 'ngx-tethys/icon';
+import { ThySelect } from 'ngx-tethys/select';
 import { ThyOption } from 'ngx-tethys/shared';
-import { AITableSelectOption, AITableField } from '../../../core';
-
-export interface AITableSingleSelectField extends AITableField<AITableSelectOption> {
-    options: AITableSelectOption[];
-}
+import { ThyTag } from 'ngx-tethys/tag';
+import { ThyTooltipModule } from 'ngx-tethys/tooltip';
+import { SelectOptionPipe } from '../../../pipes';
+import { AITableSelectField, AITableSelectOptionStyle } from '../../../types';
+import { SelectOptionComponent } from '../../cell-views/select/option.component';
+import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
 
 @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.text"> </thy-option>
-    </thy-select> `,
+    selector: 'select-cell-editor',
+    templateUrl: './select-editor.component.html',
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
-        class: 'd-block h-100'
+        class: 'd-block h-100 select-cell-editor',
+        '[class.tag]': 'field()!.optionStyle === AITableSelectOptionStyle.tag'
     },
-    imports: [NgIf, NgForOf, FormsModule, ThySelect, ThyOption, ThyTag, ThyIcon]
+    imports: [
+        FormsModule,
+        NgTemplateOutlet,
+        ThySelect,
+        ThyOption,
+        ThyTag,
+        ThyIcon,
+        ThyTooltipModule,
+        ThyDot,
+        ThyFlexibleText,
+        SelectOptionPipe,
+        SelectOptionComponent
+    ]
 })
-export class SelectCellEditorComponent extends AbstractEditCellEditor<string, AITableSingleSelectField> {
-    @Input() isMultiple!: boolean;
-
+export class SelectCellEditorComponent extends AbstractEditCellEditor<string, AITableSelectField> {
     selectOptions = computed(() => {
         return this.field().options;
     });
 
+    optionStyle = computed(() => {
+        return (this.field() as AITableSelectField).optionStyle || AITableSelectOptionStyle.tag;
+    });
+
+    AITableSelectOptionStyle = AITableSelectOptionStyle;
+
     constructor() {
         super();
     }

packages/grid/src/components/cell-views/select/option.component.html

@@ -0,0 +1,32 @@
+@if (displayOption(); as displayOption) {
+    @switch (optionStyle()) {
+        @case (AITableSelectOptionStyle.dot) {
+            @if (displayOption.bg_color) {
+                <thy-dot [thyColor]="displayOption.bg_color" [thySize]="'sm'" class="mr-2"></thy-dot>
+            }
+            <span thyFlexibleText [thyTooltipContent]="displayOption.text">{{ displayOption.text }}</span>
+        }
+        @case (AITableSelectOptionStyle.tag) {
+            @if (displayOption.bg_color || displayOption.color; as color) {
+                <thy-tag thyTheme="fill" thyShape="pill" [thyColor]="color">
+                    @if (displayOption['icon']) {
+                        <thy-icon class="text-white" [thyIconName]="displayOption['icon']"></thy-icon>
+                    }
+                    <span thyFlexibleText [thyTooltipContent]="displayOption.text">{{ displayOption.text }}</span>
+                </thy-tag>
+            }
+        }
+        @case (AITableSelectOptionStyle.piece) {
+            @if (displayOption.bg_color || displayOption.color; as color) {
+                <thy-dot thyShape="square" [thyColor]="color" [thySize]="'sm'" class="mr-2"></thy-dot>
+            }
+            <span thyFlexibleText [thyTooltipContent]="displayOption.text">{{ displayOption.text }}</span>
+        }
+        @default {
+            @if (displayOption['icon']) {
+                <thy-icon [thyIconName]="displayOption['icon']" [style.color]="displayOption.color"></thy-icon>
+            }
+            <span thyFlexibleText [thyTooltipContent]="displayOption.text">{{ displayOption.text }}</span>
+        }
+    }
+}

packages/grid/src/components/cell-views/select/option.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ThyDot } from 'ngx-tethys/dot';
+import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
+import { ThyIcon } from 'ngx-tethys/icon';
+import { ThyTag } from 'ngx-tethys/tag';
+import { ThyTooltipModule } from 'ngx-tethys/tooltip';
+import { AITableField, AITableSelectOption } from '../../../core';
+import { AITableSelectField, AITableSelectOptionStyle } from '../../../types';
+
+@Component({
+    selector: 'select-option',
+    templateUrl: './option.component.html',
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'd-flex align-items-center select-option'
+    },
+    imports: [ThyTag, ThyIcon, ThyTooltipModule, ThyDot, ThyFlexibleText]
+})
+export class SelectOptionComponent {
+    field = input.required<AITableField>();
+
+    displayOption = input.required<AITableSelectOption>();
+
+    optionStyle = computed(() => {
+        return (this.field() as AITableSelectField).optionStyle || AITableSelectOptionStyle.tag;
+    });
+
+    AITableSelectOptionStyle = AITableSelectOptionStyle;
+}

packages/grid/src/components/index.ts

@@ -4,4 +4,5 @@ export * from './cell-editors/number/number-editor.component';
 export * from './cell-editors/progress/progress-editor.component';
 export * from './cell-editors/rating/rating-editor.component';
 export * from './cell-editors/text/text-editor.component';
+export * from './cell-views/select/option.component';
 export * from './field-property-editor/field-property-editor.component';

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

@@ -15,7 +15,12 @@ export const BasicFields = [
         icon: 'check-circle',
         width: 200
     },
-    // 多选
+    {
+        type: AITableFieldType.select,
+        name: '多选',
+        icon: 'list-check',
+        width: 200
+    },
     {
         type: AITableFieldType.number,
         name: '数字',

packages/grid/src/grid.component.html

@@ -63,10 +63,56 @@
                 >
                     @switch (field.type) {
                         @case (AITableFieldType.select) {
-                            @if (!field.isMultiple && record.values[field._id] | selectOption: field['options']; as selectedOption) {
-                                <thy-tag [thyColor]="selectedOption!.color! || selectedOption!.bg_color! || 'default'">{{
-                                    selectedOption.text
-                                }}</thy-tag>
+                            @let fieldValue = record.values[field._id];
+                            @let options = field['options'];
+                            @let optionStyle = field['optionStyle'] || AITableSelectOptionStyle.tag;
+                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;
+                            @let isPieceStyle = optionStyle === AITableSelectOptionStyle.piece;
+
+                            @if (!field.isMultiple && fieldValue | selectOption: options; as selectedOption) {
+                                @if (isTagStyle) {
+                                    <select-option class="mb-1 mr-1" [field]="field" [displayOption]="selectedOption"></select-option>
+                                } @else {
+                                    <div thyTag class="mb-1 mr-1">
+                                        <select-option [field]="field" [displayOption]="selectedOption"></select-option>
+                                    </div>
+                                }
+                            } @else {
+                                @let maxShowCount = field['maxCount'] ?? 2;
+
+                                <div class="d-flex">
+                                    @if (fieldValue | selectOptions: options; as selectedOptions) {
+                                        @for (option of selectedOptions; track option!._id; let i = $index) {
+                                            @if (i + 1 <= maxShowCount) {
+                                                @if (isTagStyle) {
+                                                    <select-option
+                                                        class="mb-1 mr-1"
+                                                        [field]="field"
+                                                        [displayOption]="option!"
+                                                    ></select-option>
+                                                } @else {
+                                                    <div thyTag class="mb-1 mr-1">
+                                                        <select-option [field]="field" [displayOption]="option!"></select-option>
+                                                    </div>
+                                                }
+                                            }
+                                        }
+
+                                        @let selectedLength = selectedOptions.length || 0;
+                                        @if (selectedOptions && maxShowCount < selectedLength) {
+                                            @let shape = isTagStyle ? 'pill' : 'rectangle';
+                                            @let isHidden = maxShowCount >= selectedLength;
+
+                                            <thy-tag
+                                                class="cursor-pointer"
+                                                [class.multi-property-value-hidden]="isHidden"
+                                                [thyShape]="shape"
+                                            >
+                                                <span class="text-truncate"> +{{ selectedLength - maxShowCount }} </span>
+                                            </thy-tag>
+                                        }
+                                    }
+                                </div>
                             }
                         }
                         @case (AITableFieldType.date) {
@@ -104,12 +150,12 @@
                         @case (AITableFieldType.progress) {
                             <thy-progress
                                 class="w-100"
-                                [thyValue]="record.values[field._id]"
+                                [thyValue]="record.values[field._id] || 0"
                                 [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] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>
                             </thy-progress>
                         }
                         @case (AITableFieldType.member) {