feat(module:st): add no type (#261)

packages/abc/table/demo/type.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-支持十种不同列类型：多选、单选、徽标、标签、图片、数字、货币、日期、布尔徽章。也可以使用自定义列完成更复杂渲染。
+支持十种不同列类型：行号、多选、单选、徽标、标签、图片、数字、货币、日期、布尔徽章。也可以使用自定义列完成更复杂渲染。
 
 ## en-US
 
-Support for ten different column types: checkbox, radio, badge, tag, image, number, currency, date, boolean badge.
+Support for ten different column types: no, checkbox, radio, badge, tag, image, number, currency, date, boolean badge.
 
 ```ts
 import { Component } from '@angular/core';
@@ -43,9 +43,9 @@ const r = (min: number, max: number) => Math.floor(Math.random() * (max - min +
 export class DemoComponent {
   users: any[] = [];
   columns: STColumn[] = [
-    { title: '编号', index: 'id' },
+    { title: '行号', type: 'no' },
     { title: '姓名', index: 'name' },
-    { title: '年龄', index: 'age' },
+    { title: '年龄', index: 'age', type: 'number' },
     { title: 'tag', index: 'tag', type: 'tag', tag: TAG },
     { title: 'badge', index: 'badge', type: 'badge', badge: BADGE },
     { title: 'yn', index: 'yn', type: 'yn' },

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

@@ -200,7 +200,7 @@ Property | Description | Type | Default
 -------- | ----------- | ---- | -------
 `[title]` | Name of this column | `string` | -
 `[i18n]` | I18n key of this column | `string` | -
-`[type]` | `checkbox` selection, `radio` selection, `link` Link that triggers `click`, `img` Align to the center, `number` Align to the right, `currency` Align to the right, `date` Align to the center, `badge` [Nz-Badge](https://ng.ant.design/components/badge/en), `tag` [Nz-Tag](https://ng.ant.design/components/tag/en), `yn` Make boolean as [badge](/theme/yn) | `string` | -
+`[type]` | `no` Rows number<br>`checkbox` selection<br>`radio` selection<br>`link` Link that triggers `click`<br>`img` Align to the center<br>`number` Align to the right<br>`currency` Align to the right<br>`date` Align to the center<br>`badge` [Nz-Badge](https://ng.ant.design/components/badge/en)<br>`tag` [Nz-Tag](https://ng.ant.design/components/tag/en)<br>`yn` Make boolean as [badge](/theme/yn) | `string` | -
 `[index]` | Display field of the data record, could be set like `a.b.c` | `string, string[]` | -
 `[render]` | Custom render template ID | `string` | -
 `[renderTitle]` | Title custom render template ID | `string` | -

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

@@ -200,7 +200,7 @@ class TestComponent {
 ----|------|-----|------
 `[title]` | 列名 | `string` | -
 `[i18n]` | 列名i18n | `string` | -
-`[type]` | `checkbox` 多选；`radio` 单选；`link` 链接，可触发 `click`；`img` 图像且居中；`number` 数字且居右；`currency` 货币且居右；`date` 日期格式且居中；`badge` [徽标](https://ng.ant.design/components/badge/zh)；`tag` [标签](https://ng.ant.design/components/tag/zh)；`yn` 将`boolean`类型徽章化 [document](/theme/yn) | `string` | -
+`[type]` | `no` 行号<br>`checkbox` 多选<br>`radio` 单选<br>`link` 链接，可触发 `click`<br>`img` 图像且居中<br>`number` 数字且居右<br>`currency` 货币且居右<br>`date` 日期格式且居中<br>`badge` [徽标](https://ng.ant.design/components/badge/zh)<br>`tag` [标签](https://ng.ant.design/components/tag/zh)<br>`yn` 将`boolean`类型徽章化 [document](/theme/yn) | `string` | -
 `[index]` | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | `string, string[]` | -
 `[render]` | 自定义渲染ID | `string` | -
 `[renderTitle]` | 标题自定义渲染ID | `string` | -
@@ -222,6 +222,7 @@ class TestComponent {
 `[click]` | 链接回调 | `(record: any, instance?: STComponent) => void` | -
 `[badge]` | 徽标配置项 | `STColumnBadge` | -
 `[tag]` | 徽标配置项 | `STColumnTag` | -
+`[noIndex]` | 行号索引开始值 | `STColumnTag` | `1`
 
 ### STColumnSort
 

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

@@ -227,6 +227,7 @@ export class STColumnSource {
     if (!list || list.length === 0)
       throw new Error(`[st]: the columns property muse be define!`);
 
+    const { noIndex } = this.cog;
     let checkboxCount = 0;
     let radioCount = 0;
     const columns: STColumn[] = [];
@@ -246,6 +247,10 @@ export class STColumnSource {
       if (item.i18n && this.i18nSrv) {
         item.title = this.i18nSrv.fanyi(item.i18n);
       }
+      // no
+      if (item.type === 'no') {
+        item.noIndex = item.noIndex == null ? noIndex : item.noIndex;
+      }
       // checkbox
       if (item.selections == null) {
         item.selections = [];

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

@@ -137,8 +137,8 @@ export class STDataSource {
       // data accelerator
       data$ = data$.pipe(
         map(result => {
-          for (const i of result) {
-            i._values = columns.map(c => this.get(i, c));
+          for (let i = 0, len = result.length; i < len; i++) {
+            result[i]._values = columns.map(c => this.get(result[i], c, i));
           }
           return result;
         }),
@@ -158,7 +158,7 @@ export class STDataSource {
     });
   }
 
-  private get(item: any, col: STColumn) {
+  private get(item: any, col: STColumn, idx: number) {
     if (col.format) {
       const formatRes = col.format(item, col) as string;
       if (~formatRes.indexOf('<')) {
@@ -171,6 +171,9 @@ export class STDataSource {
 
     let ret = value;
     switch (col.type) {
+      case 'no':
+        ret = col.noIndex + idx;
+        break;
       case 'img':
         ret = value ? `<img src="${value}" class="img">` : '';
         break;

packages/abc/table/table.component.html

@@ -102,22 +102,12 @@
           <span class="ant-table-rep__title" [innerHTML]="c.title"></span>
           <ng-template #render [ngTemplateOutlet]="c.__render" [ngTemplateOutletContext]="{$implicit: i, index: index, column: c }"></ng-template>
           <ng-container *ngIf="!c.__render; else render">
-            <ng-container *ngIf="c.index" [ngSwitch]="c.type">
-              <ng-container *ngSwitchCase="'checkbox'">
-                <label nz-checkbox [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_checkSelection(i, $event)"></label>
-              </ng-container>
-              <ng-container *ngSwitchCase="'radio'">
-                <label nz-radio [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_refRadio($event, i)"></label>
-              </ng-container>
-              <ng-container *ngSwitchCase="'link'">
-                <a (click)="_click($event, i, c)" [innerHTML]="i._values[cIdx]"></a>
-              </ng-container>
-              <ng-container *ngSwitchCase="'tag'">
-                <nz-tag [nzColor]="c.tag[i._values[cIdx]].color">{{c.tag[i._values[cIdx]].text || i._values[cIdx]}}</nz-tag>
-              </ng-container>
-              <ng-container *ngSwitchCase="'badge'">
-                <nz-badge [nzStatus]="c.badge[i._values[cIdx]].color" [nzText]="c.badge[i._values[cIdx]].text || i._values[cIdx]"></nz-badge>
-              </ng-container>
+            <ng-container [ngSwitch]="c.type">
+              <label *ngSwitchCase="'checkbox'" nz-checkbox [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_checkSelection(i, $event)"></label>
+              <label *ngSwitchCase="'radio'" nz-radio [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_refRadio($event, i)"></label>
+              <a *ngSwitchCase="'link'" (click)="_click($event, i, c)" [innerHTML]="i._values[cIdx]"></a>
+              <nz-tag *ngSwitchCase="'tag'" [nzColor]="c.tag[i._values[cIdx]].color">{{c.tag[i._values[cIdx]].text || i._values[cIdx]}}</nz-tag>
+              <nz-badge *ngSwitchCase="'badge'" [nzStatus]="c.badge[i._values[cIdx]].color" [nzText]="c.badge[i._values[cIdx]].text || i._values[cIdx]"></nz-badge>
               <span *ngSwitchDefault [innerHTML]="i._values[cIdx]"></span>
             </ng-container>
             <ng-container *ngFor="let btn of _validBtns(i, c); let last=last">

packages/abc/table/table.config.ts

@@ -102,4 +102,9 @@ export class STConfig {
     theme: 'outline',
     spin: false,
   };
+  /**
+   * 行号索引，默认：`1`
+   * - 计算规则为：`index + noIndex`
+   */
+  noIndex? = 1;
 }

packages/abc/table/table.interfaces.ts

@@ -138,6 +138,7 @@ export interface STColumn {
   index?: string | string[];
   /**
    * 类型
+   * - `no` 行号，计算规则：`index + noIndex`
    * - `checkbox` 多选
    * - `radio` 单选
    * - `link` 链接，务必指定 `click`
@@ -159,7 +160,8 @@ export interface STColumn {
     | 'currency'
     | 'number'
     | 'date'
-    | 'yn';
+    | 'yn'
+    | 'no';
   /**
    * 链接回调，若返回一个字符串表示导航URL会自动触发 `router.navigateByUrl`
    */
@@ -255,6 +257,11 @@ export interface STColumn {
    * 标签配置项
    */
   tag?: STColumnTag;
+  /**
+   * 行号索引，默认：`1`
+   * - 计算规则为：`index + noIndex`
+   */
+  noIndex?: number;
 
   [key: string]: any;
 }

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

@@ -68,6 +68,22 @@ describe('abc: table: column-souce', () => {
       });
     });
     describe('[type]', () => {
+      describe(`with no`, () => {
+        it('should be working', () => {
+          const res = srv.process([
+            { title: '', type: 'no' },
+          ]);
+          expect(res[0].type).toBe('no');
+          expect(res[0].noIndex).toBe(1);
+        });
+        it('should be start zero', () => {
+          const res = srv.process([
+            { title: '', type: 'no', noIndex: 0 },
+          ]);
+          expect(res[0].type).toBe('no');
+          expect(res[0].noIndex).toBe(0);
+        });
+      });
       describe(`with checkbox`, () => {
         it('should be keep an empty list', () => {
           const res = srv.process([

packages/abc/table/test/table-data-source.spec.ts

@@ -535,6 +535,24 @@ describe('abc: table: data-souce', () => {
           done();
         });
       });
+      describe('via no', () => {
+        it('with start 1', (done: () => void) => {
+          options.columns[0].type = 'no';
+          options.columns[0].noIndex = 1;
+          srv.process(options).then(res => {
+            expect(res.list[0]._values[0]).toBe(1);
+            done();
+          });
+        });
+        it('with start 0', (done: () => void) => {
+          options.columns[0].type = 'no';
+          options.columns[0].noIndex = 0;
+          srv.process(options).then(res => {
+            expect(res.list[0]._values[0]).toBe(0);
+            done();
+          });
+        });
+      });
       describe('via img', () => {
         it('with value', (done: () => void) => {
           options.columns[0].type = 'img';