refactor(abc:cell): widget data type changed to CellTextResult (#…

…1771)

angular.json

@@ -155,6 +155,7 @@
             "include": [
               "./test.ts",
               // "**/st.spec.ts"
+              // "**/st/**/*.spec.ts"
               "**/*.spec.ts"
             ]
           }

packages/abc/cell/cell-host.directive.ts

@@ -3,7 +3,7 @@ import { Directive, Input, OnInit, Type, ViewContainerRef, inject } from '@angul
 import { warn } from '@delon/util/other';
 
 import { CellService } from './cell.service';
-import { CellWidgetData } from './cell.types';
+import { CellTextResult } from './cell.types';
 
 @Directive({
   selector: '[cell-widget-host]',
@@ -13,7 +13,7 @@ export class CellHostDirective implements OnInit {
   private readonly srv = inject(CellService);
   private readonly viewContainerRef = inject(ViewContainerRef);
 
-  @Input() data!: CellWidgetData;
+  @Input() data!: CellTextResult;
 
   ngOnInit(): void {
     const widget = this.data.options!.widget!;
@@ -27,6 +27,6 @@ export class CellHostDirective implements OnInit {
 
     this.viewContainerRef.clear();
     const componentRef = this.viewContainerRef.createComponent(componentType);
-    (componentRef.instance as { data: CellWidgetData }).data = this.data;
+    (componentRef.instance as { data: CellTextResult }).data = this.data;
   }
 }

packages/abc/cell/cell.component.ts

@@ -33,7 +33,7 @@ import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 
 import { CellHostDirective } from './cell-host.directive';
 import { CellService } from './cell.service';
-import type { CellDefaultText, CellOptions, CellTextResult, CellValue, CellWidgetData } from './cell.types';
+import type { CellDefaultText, CellOptions, CellTextResult, CellValue } from './cell.types';
 
 @Component({
   selector: 'cell, [cell]',
@@ -62,7 +62,9 @@ import type { CellDefaultText, CellOptions, CellTextResult, CellValue, CellWidge
           <nz-badge [nzStatus]="res?.result?.color" nzText="{{ _text }}" />
         }
         @case ('widget') {
-          <ng-template cell-widget-host [data]="hostData" />
+          @if (res != null) {
+            <ng-template cell-widget-host [data]="res" />
+          }
         }
         @case ('img') {
           @for (i of $any(_text); track $index) {
@@ -155,13 +157,6 @@ export class CellComponent implements OnChanges, OnDestroy {
     return this.res?.safeHtml === 'text';
   }
 
-  get hostData(): CellWidgetData {
-    return {
-      value: this.value,
-      options: this.srv.fixOptions(this.options)
-    };
-  }
-
   private updateValue(): void {
     this.destroy$?.unsubscribe();
     this.destroy$ = this.srv.get(this.value, this.options).subscribe(res => {

packages/abc/cell/cell.spec.ts

@@ -15,7 +15,7 @@ import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 import { CellComponent } from './cell.component';
 import { CellModule } from './cell.module';
 import { CellService } from './cell.service';
-import { CellFuValue, CellOptions, CellWidgetData } from './cell.types';
+import { CellFuValue, CellOptions, CellTextResult } from './cell.types';
 import { provideCellWidgets } from './provide';
 
 const DATE = new Date(2022, 0, 1, 1, 2, 3);
@@ -354,12 +354,12 @@ describe('abc: cell', () => {
 });
 
 @Component({
-  template: `{{ data.value }}-{{ data.options.widget.data }}`
+  template: `{{ data.result.text }}-{{ data.options.widget.data }}`
 })
 class TestWidget {
   static readonly KEY = 'test';
 
-  data!: CellWidgetData;
+  data!: CellTextResult;
 }
 
 @Component({

packages/abc/cell/cell.types.ts

@@ -297,11 +297,6 @@ export interface CellDefaultText {
   condition?: unknown;
 }
 
-export interface CellWidgetData {
-  value?: unknown;
-  options?: CellOptions;
-}
-
 export interface CellWidgetInstance {
-  readonly data: CellWidgetData;
+  readonly data: CellTextResult;
 }

packages/abc/cell/index.en-US.md

@@ -67,25 +67,27 @@ Cell formatting is supported for multiple data types, and supports widget mode.
 Just implement the `CellWidgetInstance` interface, for example:
 
 ```ts
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
-import type { CellWidgetData, CellWidgetInstance } from '@delon/abc/cell';
+import type { CellTextResult, CellWidgetInstance } from '@delon/abc/cell';
 import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 @Component({
   selector: 'cell-widget-test',
-  template: ` <img nz-tooltip nzTooltipTitle="Client it" [src]="data.value" class="img" style="cursor: pointer" /> `,
+  template: `<img nz-tooltip nzTooltipTitle="Client it" [src]="data.result.text" class="img" style="cursor: pointer" /> `,
   host: {
     '(click)': 'show()'
   },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ NzToolTipModule ]
 })
 export class CellTestWidget implements CellWidgetInstance {
+  private readonly msg = inject(NzMessageService);
   static readonly KEY = 'test';
 
-  readonly data!: CellWidgetData;
-
-  constructor(private msg: NzMessageService) {}
+  readonly data!: CellTextResult;
 
   show(): void {
     this.msg.info(`click`);

packages/abc/cell/index.zh-CN.md

@@ -67,25 +67,27 @@ module: import { CellModule } from '@delon/abc/cell';
 实现 `CellWidgetInstance` 接口即可，例如：
 
 ```ts
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
-import type { CellWidgetData, CellWidgetInstance } from '@delon/abc/cell';
+import type { CellTextResult, CellWidgetInstance } from '@delon/abc/cell';
 import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 @Component({
   selector: 'cell-widget-test',
-  template: ` <img nz-tooltip nzTooltipTitle="Client it" [src]="data.value" class="img" style="cursor: pointer" /> `,
+  template: `<img nz-tooltip nzTooltipTitle="Client it" [src]="data.result.text" class="img" style="cursor: pointer" /> `,
   host: {
     '(click)': 'show()'
   },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ NzToolTipModule ]
 })
 export class CellTestWidget implements CellWidgetInstance {
+  private readonly msg = inject(NzMessageService);
   static readonly KEY = 'test';
 
-  readonly data!: CellWidgetData;
-
-  constructor(private msg: NzMessageService) {}
+  readonly data!: CellTextResult;
 
   show(): void {
     this.msg.info(`click`);

src/app/shared/cell-widget/test.ts

@@ -1,12 +1,12 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
-import type { CellWidgetData, CellWidgetInstance } from '@delon/abc/cell';
+import type { CellTextResult, CellWidgetInstance } from '@delon/abc/cell';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 @Component({
   selector: 'cell-widget-test',
-  template: ` <img nz-tooltip nzTooltipTitle="Client it" [src]="data.value" class="img" style="cursor: pointer" /> `,
+  template: `<img nz-tooltip nzTooltipTitle="Client it" [src]="data.result.text" class="img" style="cursor: pointer" /> `,
   host: {
     '(click)': 'show()'
   },
@@ -15,11 +15,10 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
   imports: [ NzToolTipModule ]
 })
 export class CellTestWidget implements CellWidgetInstance {
+  private readonly msg = inject(NzMessageService);
   static readonly KEY = 'test';
 
-  readonly data!: CellWidgetData;
-
-  constructor(private msg: NzMessageService) {}
+  readonly data!: CellTextResult;
 
   show(): void {
     this.msg.info(`click`);