fix(abc:st): fix built-in style into to className (#1525)

Author: cipchk

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

@@ -5,7 +5,7 @@ import { ACLService } from '@delon/acl';
 import { AlainI18NService, ALAIN_I18N_TOKEN } from '@delon/theme';
 import { AlainSTConfig } from '@delon/util/config';
 import { deepCopy, warn } from '@delon/util/other';
-import type { NzSafeAny } from 'ng-zorro-antd/core/types';
+import type { NgClassInterface, NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { STRowSource } from './st-row.directive';
 import { STWidgetRegistry } from './st-widget';
@@ -363,6 +363,40 @@ export class STColumnSource {
     return res;
   }
 
+  private mergeClass(item: _STColumn): void {
+    const builtInClassNames: string[] = [];
+    if (item._isTruncate) {
+      builtInClassNames.push('text-truncate');
+    }
+    const rawClassName = item.className;
+    if (!rawClassName) {
+      builtInClassNames.push(
+        (
+          {
+            number: 'text-right',
+            currency: 'text-right',
+            date: 'text-center'
+          } as NzSafeAny
+        )[item.type!]
+      );
+      item._className = builtInClassNames.filter(w => !!w);
+      return;
+    }
+
+    const rawClassNameIsArray = Array.isArray(rawClassName);
+    if (!rawClassNameIsArray && typeof rawClassName === 'object') {
+      const objClassNames: NgClassInterface = rawClassName;
+      builtInClassNames.forEach(key => (objClassNames[key] = true));
+      item._className = objClassNames;
+      return;
+    }
+
+    const arrayClassNames = rawClassNameIsArray ? Array.from(rawClassName as string[]) : [rawClassName];
+    arrayClassNames.splice(0, 0, ...builtInClassNames);
+    item._className = [...new Set(arrayClassNames)].filter(w => !!w);
+    console.log(arrayClassNames);
+  }
+
   process(
     list: STColumn[],
     options: STColumnSourceProcessOptions
@@ -440,16 +474,7 @@ export class STColumnSource {
       }
       item._isTruncate = !!item.width && options.widthMode.strictBehavior === 'truncate' && item.type !== 'img';
       // className
-      if (!item.className) {
-        item.className = (
-          {
-            number: 'text-right',
-            currency: 'text-right',
-            date: 'text-center'
-          } as NzSafeAny
-        )[item.type!];
-      }
-      item._className = item.className || (item._isTruncate ? 'text-truncate' : null);
+      this.mergeClass(item);
       // width
       if (typeof item.width === 'number') {
         item._width = item.width;

packages/abc/st/st.component.html

@@ -170,7 +170,7 @@
           [nzLeft]="!!c._left"
           [nzRight]="!!c._right"
           [attr.data-col-index]="cIdx"
-          [ngClass]="c._className!"
+          [ngClass]="c._className"
           [attr.colspan]="c.colSpan"
         >
           <span *ngIf="responsive" class="ant-table-rep__title">

packages/abc/st/test/st-column-source.spec.ts

@@ -3,7 +3,7 @@
 import { ACLService } from '@delon/acl';
 import { AlainI18NService, AlainI18NServiceFake } from '@delon/theme';
 import { deepGet } from '@delon/util/other';
-import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NgClassInterface, NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { STColumnSource, STColumnSourceProcessOptions } from '../st-column-source';
 import { STRowSource } from '../st-row.directive';
@@ -217,16 +217,32 @@ describe('st: column-source', () => {
     });
     describe('[className]', () => {
       it('should be custom class name', () => {
-        page.expectValue([{ title: '', type: 'number', className: 'aa' }], 'aa', 'className');
+        page.expectValue([{ title: '', className: 'aa' }], 'aa', '_className', true);
       });
       it('should be auto text-right when type is number', () => {
-        page.expectValue([{ title: '', type: 'number' }], 'text-right', 'className');
+        page.expectValue([{ title: '', type: 'number' }], 'text-right', '_className', true);
       });
       it('should be auto text-right when type is currency', () => {
-        page.expectValue([{ title: '', type: 'currency' }], 'text-right', 'className');
+        page.expectValue([{ title: '', type: 'currency' }], 'text-right', '_className', true);
       });
       it('should be auto text-center when type is date', () => {
-        page.expectValue([{ title: '', type: 'date' }], 'text-center', 'className');
+        page.expectValue([{ title: '', type: 'date' }], 'text-center', '_className', true);
+      });
+      it('should be working when className is object', () => {
+        const res = srv.process([{ title: '', width: 10, type: 'number', className: { a: true, b: false } }], {
+          widthMode: { strictBehavior: 'truncate' },
+          safeType: 'html'
+        }).columns;
+        const obj = res[0]._className as NgClassInterface;
+        expect(obj['text-truncate']).toBe(true);
+      });
+      it('should be remove duplicates', () => {
+        const res = srv.process(
+          [{ title: '', type: 'date', className: ['text-center', 'text-center'] }],
+          options
+        ).columns;
+        expect((res[0]._className as string[]).length).toBe(1);
+        expect(res[0]._className).toContain('text-center');
       });
     });
     describe('[iif]', () => {
@@ -729,10 +745,14 @@ describe('st: column-source', () => {
   });
 
   class PageObject {
-    expectValue(columns: STColumn[], value: any, path: string = 'indexKey'): this {
+    expectValue(columns: STColumn[], value: any, path: string = 'indexKey', contain: boolean = false): this {
       const newColumns = srv.process(columns, options).columns;
       expect(newColumns.length).toBeGreaterThan(0);
-      expect(deepGet(newColumns[0], path)).toBe(value);
+      if (contain) {
+        expect(deepGet(newColumns[0], path)).toContain(value);
+      } else {
+        expect(deepGet(newColumns[0], path)).toBe(value);
+      }
       return this;
     }
     expectBtnValue(columns: STColumn[], value: any, path: string = 'indexKey'): this {

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

@@ -1394,7 +1394,7 @@ describe('abc: st', () => {
             .cd()
             .updateColumn([{ title: '', index: 'id', width: 50, className: 'aaaa' }])
             .expectElCount(`.st__width-strict`, 1)
-            .expectElCount(`.text-truncate`, 0)
+            .expectElCount(`.text-truncate`, context.comp._data.length)
             .expectElCount(`td.aaaa`, context.comp._data.length)
             .asyncEnd();
         }));