feat(abc:st): add tooltip in tag or badge (#1634)

angular.json

@@ -192,7 +192,7 @@
             "codeCoverageExclude": ["schematics/**", "packages/testing/**"],
             "include": [
               "./test.ts",
-              // "**/select.widget.spec.ts"
+              // "**/st.spec.ts"
               "**/*.spec.ts"
             ]
           }

packages/abc/st/demo/type.md

@@ -15,33 +15,34 @@ Support for ten different column types: no, checkbox, radio, badge, tag, image,
 
 ```ts
 import { Component } from '@angular/core';
-import { STColumn, STColumnBadge, STColumnTag } from '@delon/abc/st';
+
+import { STColumn, STColumnBadge, STColumnTag, STData } from '@delon/abc/st';
 
 const BADGE: STColumnBadge = {
   1: { text: '成功', color: 'success' },
-  2: { text: '错误', color: 'error' },
+  2: { text: '错误', color: 'error', tooltip: 'TIPS' },
   3: { text: '进行中', color: 'processing' },
   4: { text: '默认', color: 'default' },
-  5: { text: '警告', color: 'warning' },
+  5: { text: '警告', color: 'warning' }
 };
 const TAG: STColumnTag = {
   1: { text: '成功', color: 'green' },
   2: { text: '错误', color: 'red' },
   3: { text: '进行中', color: 'blue' },
   4: { text: '默认', color: '' },
-  5: { text: '警告', color: 'orange' },
+  5: { text: '警告', color: 'orange', tooltip: 'TIPS' }
 };
-const r = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min);
+const r = (min: number, max: number): number => Math.floor(Math.random() * (max - min + 1) + min);
 
 @Component({
   selector: 'app-demo',
   template: `
     <button nz-button (click)="reload()">Reload</button>
     <st #st [data]="users" [columns]="columns" [page]="{ position: 'both' }"></st>
-  `,
+  `
 })
 export class DemoComponent {
-  users: any[] = [];
+  users: STData[] = [];
   columns: STColumn[] = [
     { title: '行号', type: 'no' },
     { title: '姓名', index: 'name' },
@@ -51,7 +52,7 @@ export class DemoComponent {
     { title: 'tag', index: 'tag', type: 'tag', tag: TAG },
     { title: 'badge', index: 'badge', type: 'badge', badge: BADGE },
     { title: 'Enum', index: 'enum', type: 'enum', enum: { 1: '壹', 2: '贰', 3: '叁' } },
-    { title: 'yn', index: 'yn', type: 'yn' },
+    { title: 'yn', index: 'yn', type: 'yn' }
   ];
 
   reload(): void {
@@ -65,7 +66,7 @@ export class DemoComponent {
         badge: r(1, 5),
         enum: r(1, 3),
         yn: [true, false][r(1, 5) % 2],
-        html: `<strong>${idx + 1}</strong> Other`,
+        html: `<strong>${idx + 1}</strong> Other`
       }));
   }
 

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

@@ -420,13 +420,15 @@ class TestComponent {
 |----------|-------------|------|---------|
 | `[text]` | Badge text | `string` | - |
 | `[color]` | Badge color value | `success,processing,default,error,warning` | - |
+| `[tooltip]` | Text popup tip | `string` | - |
 
 ### STColumnTag
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|
 | `[text]` | Tag text | `string` | - |
 | `[color]` | Tag color value | `string` | - |
+| `[tooltip]` | Text popup tip | `string` | - |
 
 ### STWidgetColumn
 

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

@@ -420,13 +420,15 @@ class TestComponent {
 |----|----|----|-----|
 | `[text]` | 文本 | `string` | - |
 | `[color]` | 徽标颜色值 | `success,processing,default,error,warning` | - |
+| `[tooltip]` | 文字提示 | `string` | - |
 
 ### STColumnTag
 
 | 成员 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|
 | `[text]` | 文本 | `string` | - |
 | `[color]` | Tag颜色值 | `string` | - |
+| `[tooltip]` | 文字提示 | `string` | - |
 
 ### STWidgetColumn
 

packages/abc/st/st-data-source.ts

@@ -222,6 +222,7 @@ export class STDataSource {
 
       let text = value;
       let color: string | undefined;
+      let tooltip: string | undefined;
       switch (col.type) {
         case 'no':
           text = this.getNoIndex(item, col, idx);
@@ -251,6 +252,7 @@ export class STDataSource {
             const dataItem = data[text];
             text = dataItem.text;
             color = dataItem.color;
+            tooltip = dataItem.tooltip;
           } else {
             text = '';
           }
@@ -262,6 +264,7 @@ export class STDataSource {
         _text: safeHtml ? this.dom.bypassSecurityTrustHtml(text) : text,
         org: value,
         color,
+        tooltip,
         safeType: col.safeType!,
         buttons: []
       };

packages/abc/st/st-td.component.html

@@ -69,10 +69,15 @@
       [attr.title]="i._values[cIdx].text"
     ></a>
     <ng-container *ngIf="i._values[cIdx].text">
-      <nz-tag *ngSwitchCase="'tag'" [nzColor]="i._values[cIdx].color">
+      <nz-tag *ngSwitchCase="'tag'" [nzColor]="i._values[cIdx].color" [nz-tooltip]="i._values[cIdx].tooltip">
         <span [innerHTML]="i._values[cIdx]._text"></span>
       </nz-tag>
-      <nz-badge *ngSwitchCase="'badge'" [nzStatus]="i._values[cIdx].color" [nzText]="i._values[cIdx].text" />
+      <nz-badge
+        *ngSwitchCase="'badge'"
+        [nzStatus]="i._values[cIdx].color"
+        [nzText]="i._values[cIdx].text"
+        [nz-tooltip]="i._values[cIdx].tooltip"
+      />
     </ng-container>
     <ng-template *ngSwitchCase="'widget'" st-widget-host [record]="i" [column]="c" />
     <ng-container *ngSwitchDefault>

packages/abc/st/st.interfaces.ts

@@ -1060,6 +1060,12 @@ export interface STColumnBadgeValue {
    * 徽标颜色值
    */
   color?: 'success' | 'processing' | 'default' | 'error' | 'warning';
+  /**
+   * Text popup tip
+   *
+   * 文字提示
+   */
+  tooltip?: string;
 }
 
 /**
@@ -1093,6 +1099,13 @@ export interface STColumnTagValue {
     | 'green'
     | 'cyan'
     | string;
+
+  /**
+   * Text popup tip
+   *
+   * 文字提示
+   */
+  tooltip?: string;
 }
 
 export type STChangeType =

packages/abc/st/st.types.ts

@@ -87,6 +87,7 @@ export interface _STDataValue {
   _text: SafeHtml;
   org?: any;
   color?: string;
+  tooltip?: string;
   safeType: STColumnSafeType;
   buttons?: _STColumnButton[];
   props?: STOnCellResult | null;

packages/abc/st/test/st.spec.ts

@@ -16,6 +16,7 @@ import {
 } from '@delon/theme';
 import { deepCopy } from '@delon/util/other';
 import { NzPaginationComponent } from 'ng-zorro-antd/pagination';
+import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 
 import { STWidgetRegistry } from './../st-widget';
 import {
@@ -345,7 +346,7 @@ describe('abc: st', () => {
           2: { text: '错误', color: 'error' },
           3: { text: '进行中', color: 'processing' },
           4: { text: '默认', color: 'default' },
-          5: { text: '警告', color: 'warning' }
+          5: { text: '警告', color: 'warning', tooltip: 'TIPS' }
         };
         it(`should be render badge`, fakeAsync(() => {
           page
@@ -359,14 +360,20 @@ describe('abc: st', () => {
             .expectElCount('.ant-badge', 0)
             .asyncEnd();
         }));
+        it(`#tooltip`, fakeAsync(() => {
+          page.updateColumn([{ title: '', index: 'status', type: 'badge', badge: BADGE }]).updateData([{ status: 5 }]);
+          const tooltips = page.dl.queryAll(By.directive(NzTooltipDirective));
+          expect(tooltips.length).toBe(1);
+          page.asyncEnd();
+        }));
       });
       describe('with tag', () => {
         const TAG: STColumnTag = {
           1: { text: '成功', color: 'green' },
           2: { text: '错误', color: 'red' },
           3: { text: '进行中', color: 'blue' },
           4: { text: '默认', color: '' },
-          5: { text: '警告', color: 'orange' }
+          5: { text: '警告', color: 'orange', tooltip: 'TIPS' }
         };
         it(`should be render tag`, fakeAsync(() => {
           page
@@ -380,6 +387,12 @@ describe('abc: st', () => {
             .expectElCount('.ant-tag', 0)
             .asyncEnd();
         }));
+        it(`#tooltip`, fakeAsync(() => {
+          page.updateColumn([{ title: 'tag', index: 'tag', type: 'tag', tag: TAG }]).updateData([{ tag: 5 }]);
+          const tooltips = page.dl.queryAll(By.directive(NzTooltipDirective));
+          expect(tooltips.length).toBe(1);
+          page.asyncEnd();
+        }));
       });
       describe('[other]', () => {
         it('should custom render via format', fakeAsync(() => {