feat(module:empty): add empty component (#2722)

close #2711

components/cascader/nz-cascader.component.html

@@ -76,7 +76,7 @@
         (click)="onOptionClick(option, i, $event)">
       </li>
       <li *ngIf="isSearching && !columns[0].length" class="ant-cascader-menu-item ant-cascader-menu-item-expanded ant-cascader-menu-item-disabled">
-        {{ nzNotFoundContent || ('Select.notFoundContent' | nzI18n) }}
+        <nz-embed-empty [nzComponentName]="'cascader'" [specificContent]="nzNotFoundContent"></nz-embed-empty>
       </li>
     </ul>
   </div>

components/cascader/nz-cascader.module.ts

@@ -3,14 +3,14 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { NzI18nModule } from '../i18n/nz-i18n.module';
+import { NzEmptyModule } from '../empty/nz-empty.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 import { NzInputModule } from '../input/nz-input.module';
 import { NzCascaderOptionComponent } from './nz-cascader-li.component';
 import { NzCascaderComponent } from './nz-cascader.component';
 
 @NgModule({
-  imports     : [ CommonModule, FormsModule, OverlayModule, NzInputModule, NzIconModule, NzI18nModule ],
+  imports     : [ CommonModule, FormsModule, OverlayModule, NzInputModule, NzIconModule, NzEmptyModule ],
   declarations: [
     NzCascaderComponent,
     NzCascaderOptionComponent

components/components.less

@@ -15,6 +15,7 @@
 @import "./divider/style/index.less";
 @import "./drawer/style/index";
 @import "./dropdown/style/index.less";
+@import "./empty/style/index.less";
 @import "./form/style/index.less";
 @import "./grid/style/index.less";
 @import "./input/style/index.less";
@@ -50,4 +51,4 @@
 @import "./cascader/style/index.less";
 @import "./tree/style/index.less";
 @import "./tree-select/style/index.less";
-@import "./calendar/style/index.less";
+@import "./calendar/style/index.less";

components/empty/demo/basic.md

@@ -0,0 +1,16 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+简单的展示。
+
+## en-US
+
+Simplest usage.
+
+

components/empty/demo/basic.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-empty-basic',
+  template: `
+    <nz-empty></nz-empty>`,
+  styles  : []
+})
+export class NzDemoEmptyBasicComponent {
+}

components/empty/demo/config.md

@@ -0,0 +1,16 @@
+---
+order: 2
+title:
+  zh-CN: 全局化配置
+  en-US: Default Config
+---
+
+## zh-CN
+
+自定义全局组件的 Empty 样式。
+
+## en-US
+
+Use `NzEmptyService` set global Empty style.
+
+

components/empty/demo/config.ts

@@ -0,0 +1,100 @@
+import { ChangeDetectorRef, Component, TemplateRef, ViewChild } from '@angular/core';
+import { NzEmptyService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-empty-config',
+  template: `
+    <nz-switch
+      [nzUnCheckedChildren]="'default'"
+      [nzCheckedChildren]="'customize'"
+      [(ngModel)]="customize"
+      (ngModelChange)="onConfigChange()">
+    </nz-switch>
+
+    <nz-divider></nz-divider>
+
+    <h3>Select</h3>
+    <nz-select style="width: 200px"></nz-select>
+
+    <h3>TreeSelect</h3>
+    <nz-tree-select style="width: 200px;"></nz-tree-select>
+
+    <h3>Cascader</h3>
+    <nz-cascader style="width: 200px;" [nzShowSearch]="true" [nzOptions]="options"></nz-cascader>
+
+    <h3>Transfer</h3>
+    <nz-transfer></nz-transfer>
+
+    <h3>Table</h3>
+    <nz-table>
+      <thead>
+      <tr>
+        <th>Title</th>
+        <th>Age</th>
+      </tr>
+      </thead>
+    </nz-table>
+
+    <h3>List</h3>
+    <nz-list [nzDataSource]="[]"></nz-list>
+
+    <ng-template #customTpl let-name>
+      <div style="text-align: center;">
+        <i nz-icon type="smile" style="font-size: 20px;"></i>
+        <p>Data Not Found in {{ name }}</p>
+      </div>
+    </ng-template>
+  `,
+  styles  : [ `h3 {
+    font-size: inherit;
+    margin: 16px 0 8px 0;
+  }`
+  ]
+})
+export class NzDemoEmptyConfigComponent {
+  @ViewChild('customTpl') customTpl: TemplateRef<any>; // tslint:disable-line:no-any
+
+  customize = false;
+  options = [
+    {
+      value   : 'zhejiang',
+      label   : 'Zhejiang',
+      children: [ {
+        value   : 'hangzhou',
+        label   : 'Hangzhou',
+        children: [ {
+          value : 'xihu',
+          label : 'West Lake',
+          isLeaf: true
+        } ]
+      }, {
+        value : 'ningbo',
+        label : 'Ningbo',
+        isLeaf: true
+      } ]
+    }, {
+      value   : 'jiangsu',
+      label   : 'Jiangsu',
+      children: [ {
+        value   : 'nanjing',
+        label   : 'Nanjing',
+        children: [ {
+          value : 'zhonghuamen',
+          label : 'Zhong Hua Men',
+          isLeaf: true
+        } ]
+      } ]
+    }
+  ];
+
+  constructor(private nzEmptyService: NzEmptyService) {
+  }
+
+  onConfigChange(): void {
+    if (this.customize) {
+      this.nzEmptyService.setDefaultContent(this.customTpl); // tslint:disable-line:no-any
+    } else {
+      this.nzEmptyService.resetDefault();
+    }
+  }
+}

components/empty/demo/customize.md

@@ -0,0 +1,16 @@
+---
+order: 1
+title:
+  zh-CN: 自定义
+  en-US: Customize
+---
+
+## zh-CN
+
+自定义图片、描述、附属内容。
+
+## en-US
+
+Customize image, description and extra content.
+
+

components/empty/demo/customize.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-empty-customize',
+  template: `
+    <nz-empty
+      [nzNotFoundImage]="'https://camo.githubusercontent.com/f23136cf1985a02fa5cc9a09b766b65f8677826c/68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f54423146564d446f737249384b4a6a79304668585862666e7058612d3230302d3230302e737667'"
+      [nzNotFoundContent]="contentTpl"
+      [nzNotFoundFooter]="footerTpl">
+      <ng-template #contentTpl>
+        <span>
+          Customize <a href="#API">Description</a>
+        </span>
+      </ng-template>
+      <ng-template #footerTpl>
+        <button nz-button nzType="primary" (click)="onClick()">Create Now</button>
+      </ng-template>
+    </nz-empty>`,
+  styles  : []
+})
+export class NzDemoEmptyCustomizeComponent {
+  onClick(): void {
+    console.log('clicked');
+  }
+}

components/empty/doc/index.en-US.md

@@ -0,0 +1,41 @@
+---
+category: Components
+type: Data Display
+title: Empty
+cols: 1
+---
+
+Empty state placeholder.
+
+## When To Use
+
+When there is no data provided, display for friendly tips.
+
+## API
+
+### nz-empty
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| `[nzNotFoundImage]` | Customize image. Will tread as image url when string provided | `string` ｜ `TemplateRef<void>` | - |
+| `[nzNotFoundContent]` | Custom description | `string` ｜ `TemplateRef<void>` | - |
+| `[nzNotFoundFooter]` | Custom Footer | `string` ｜ `TemplateRef<void>` | - |
+
+### NzEmptyService
+
+| Methods/Properties | Description | Parameters |
+| -------- | ----------- | ---- |
+| `setDefaultContent` | To set the default empty content. The parent component name would be passed to the template. | `TemplateRef<string>` ｜ `string` |
+| `resetDefault` | Reset default empty content | - |
+
+### InjectionToken
+
+| Token | Description | Parameters |
+| ----- | --- | ---- |
+| `NZ_DEFAULT_EMPTY_CONTENT` | To provide a user default empty component | `Component` ｜ `string` |
+| `NZ_EMPTY_COMPONENT_NAME` | Would be injected to `NZ_DEFAULT_EMPTY_CONTENT`, telling that component its parent component's name | `string` |
+
+### Global Customizable Empty Content
+
+You may notice or used some inputs like `nzNotFoundContent` in some components. Now they would use `Empty` component. And you can even render a user default empty component, either by providing a `NZ_DEFAULT_EMPTY_CONTENT` in your root module or invoke `setDefaultEmptyContent`.
+

components/empty/doc/index.zh-CN.md

@@ -0,0 +1,42 @@
+---
+category: Components
+type: Data Display
+subtitle: 空状态
+title: Empty
+cols: 1
+---
+
+空状态时的展示占位图。
+
+## 何时使用
+
+当目前没有数据时，用于显式的用户提示。
+
+## API
+
+### nz-empty
+
+| 参数 | 说明 | 类型 | 默认值 |
+| -------- | ----------- | ---- | ------- |
+| `[nzNotFoundImage]` | 设置显示图片，为 `string` 时表示自定义图片地址 | `string` ｜ `TemplateRef<void>` | - |
+| `[nzNotFoundContent]` | 自定义描述内容 | `string` ｜ `TemplateRef<void>` | - |
+| `[nzNotFoundFooter]` | 设置自定义 footer | `string` ｜ `TemplateRef<void>` | - |
+
+### NzEmptyService
+
+| 属性/方法 | 说明 | 参数 |
+| -------- | ----------- | ---- |
+| `setDefaultEmptyContent` | 设置全局空内容，空组件的父组件名称将会被传递给模板 | `TemplateRef<string>` ｜ `string` |
+| `resetDefault` | 重置默认空内容 | - |
+
+### InjectionToken
+
+| Token | 说明 | 参数 |
+| ----- | --- | ---- |
+| `NZ_DEFAULT_EMPTY_CONTENT` | 提供一个用户自定义的空组件 | `Component` ｜ `string` |
+| `NZ_EMPTY_COMPONENT_NAME` | 将会被注入到 `NZ_DEFAULT_EMPTY_CONTENT` 中，告诉该组件其父组件的名称 | `string` |
+
+### 全局自定义空组件
+
+你或许知道或者用过一些类似 `nzNotFoundContent` 的属性来自定义组件数据为空时的内容，现在它们都会使用 `Empty` 组件。你甚至可以通过提供在根模块中提供 `NZ_DEFAULT_EMPTY_CONTENT`，或者是调用 `setDefaultEmptyContent` 方法来定义一个自定义的全局空组件。
+

components/empty/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

components/empty/nz-embed-empty.component.html

@@ -0,0 +1,11 @@
+<ng-container *ngIf="!content; else userDefineTpl" [ngSwitch]="size">
+  <nz-empty *ngSwitchCase="'normal'" class="ant-empty-normal" [nzNotFoundImage]="defaultSvg"></nz-empty>
+  <nz-empty *ngSwitchCase="'small'" class="ant-empty-small" [nzNotFoundImage]="defaultSvg"></nz-empty>
+  <nz-empty *ngSwitchDefault></nz-empty>
+</ng-container>
+<ng-template #userDefineTpl>
+  <ng-template *ngIf="contentType !== 'string'" [cdkPortalOutlet]="contentPortal"></ng-template>
+  <ng-container *ngIf="contentType === 'string'">
+    {{ content }}
+  </ng-container>
+</ng-template>