refactor: merge next to master (#2563)

* docs: update NG-ZORRO logo (#2425) * fix(module:collapse): can't fold up active panel with accordion (#2440) close #2437 * chore: update styles(ant-design 3.10.7) (#2432) * chore: update styles(ant-design 3.10.8) (#2475) * feat: Adds danish locale (#2486) close #2485 * fix(module:menu): fix dropdown menu item selected className (#2434) close #2433 * fix(module:list): fix invalid render empty style when unspecified data source (#2415) close #2385 * docs(module:modal): add missing nzClassName property (#2400) * docs: add faq in icons docs (#2459) * fix(module:menu): fix fold menu (#2454) close #2449 * refactor(module:all): use cdk keycodes instead of magic number (#2499) * release(1.8.1): release 1.8.1 (#2523) * chore: update styles(ant-design 3.10.9) (#2525) * fix(readme): fix misspelling (#2472) * refactor(module:all): support Angular 7.0 (#2372) * refactor(module:all): refactor component to support onPush & SSR * refactor(module:badge): refactor badge * refactor(module:button & card): refactor * test(module:button): fix test case * fix(module:avatar): fix avatar * fix(module:tree): fix tree tslint * fix(module:tree): fix tree module * fix(module:all): fix tslint config * refactor(module:all): upgrade to angular 7.0 * fix(module:all): fix typescript error * fix(module:build): fix build less options * fix(module:integration): fix webpack test * build: rm unused package * build: fix build & ci * test(module:spin): fix test error * docs: update readme * refactor(module:checkbox): support checkbox onPush (#2478) * docs: update NG-ZORRO logo (#2425) * fix(module:collapse): can't fold up active panel with accordion (#2440) close #2437 * chore: update styles(ant-design 3.10.7) (#2432) * refactor(module:checkbox): support checkbox onPush * refactor(module:collapse): support onPush in collapse (#2481) * refactor(module:divider): refactor divider (#2482) ref #2381 * refactor(module:form): refactor form (#2493) * refactor(module:grid): refactor grid module (#2498) * refactor(module:layout): refactor layout (#2500) * feat(module:progress): support custom strokeColor and strokeLinecap (#2404) close #2378 * feat(module:avatar): support custom size (#2416) close #2380 * fix(module:timeline): fix loading icon (#2386) close #2377 * feat(module:drawer): add input property in NzDrawerRef (#2464) close #2403 * refactor(module:radio): refactor radio to support OnPush (#2519) * refactor(module:spin): refactor spin (#2530) * refactor(module:alert & card): refactor card & refactor template outlet (#2532) * refactor(module:switch & checkbox): refactor switch & checkbox (#2533) * refactor(module:core): refactor input convert decorators (#2535) ref #2474 * refactor(module:mention): refactor mention (#2510) ref: #2381 * refactor(module:steps): refactor steps (#2512) ref #2381 * feat(module:modal): support clicking ESC to close modal (#2483) close #1999 * refactor(module:breadcrumb): refactor breadcrumb (#2513) ref #2381 * refactor(module:skeleton): refactor skeleton (#2514) ref #2381 * refactor(module:icon): refactor icon (#2517) ref #2381 * refactor(module:tree-select): refactor tree-select (#2528) ref: #2381 * build: bump webpack integration (#2524) build: bump webpack integration * refactor(module:timeline): refactor timeline (#2515) close #2379 * support alternate positions, alternate and right alternate * support reversing * refactor(module:autocomplete): refactor autocomplete (#2505) ref #2381, close #2420 * refactor(module:cascader): refactor cascader (#2516) * refactor(module:cascader): refactor cascader close #2935 ref #2198 * fix(module:cascader): fix isFocused access * refactor(module:avatar): refactor avatar (#2536) * fix(module:avatar): fix text style * refactor(module:avatar): refactor avatar ref: #2381 * refactor(module:upload): refactor upload (#2555) * refactor(module:upload): refactor upload - feat: add `nzOpenFileDialogOnClick` prop to allow setting whether to open the upload dialog when the component is clicked * chore: add encapsulation:ViewEncapsulation.None ref #2381 * refactor(module:list): refactor list (#2548) * refactor(module:list): refactor list * fix: import scrolling in share module * chore: add encapsulation:ViewEncapsulation.None ref #2381 * refactor(module:transfer): refactor transfer (#2553) * refactor(module:transfer): refactor transfer - feat: add nzDisabled property - need verify design details, ant-design/ant-design#13330 * chore: search muse be disabled * chore: add encapsulation:ViewEncapsulation.None ref #2381 * refactor(module:back-top): refactor back-top (#2547) refactor(module:back-top): refactor back-top * refactor(module:anchor): refactor anchor (#2546) * refactor(module:anchor): refactor anchor - feat: the nzTarget support string value - fix: invalid id in demo * chore: add encapsulation:ViewEncapsulation.None * chore: add encapsulation:ViewEncapsulation.None * chore: fix display style in host * chore: remove :host ref #2381 * refactor(module:affix): refactor affix (#2544) * refactor(module:affix): refactor affix - the nzTarget support string value * fix: release * style: removed no-any in first line * fix: fix style * chore: fix test * chore: fix display style in host * chore: remove :host
NG-ZORRO · Nov 30, 2018 · 0ff1864 · 0ff1864
1 parent 9f48b8f
commit 0ff1864
Show file tree

Hide file tree

Showing 33 changed files with 303 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,21 @@
+<a name="1.8.1"></a>
+## [1.8.1](https://github.com/NG-ZORRO/ng-zorro-antd/compare/1.8.0...1.8.1) (2018-11-24)
+
+
+### Bug Fixes
+
+* **collapse:** can't fold up active panel with accordion ([#2440](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2440)) ([a17ea49](https://github.com/NG-ZORRO/ng-zorro-antd/commit/a17ea49)), closes [#2437](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2437)
+* **list:** fix invalid render empty style when unspecified data source ([#2415](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2415)) ([7ae325f](https://github.com/NG-ZORRO/ng-zorro-antd/commit/7ae325f)), closes [#2385](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2385)
+* **menu:** fix dropdown menu item selected className ([#2434](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2434)) ([e6e2369](https://github.com/NG-ZORRO/ng-zorro-antd/commit/e6e2369)), closes [#2433](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2433)
+* **menu:** fix fold menu ([#2454](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2454)) ([e41640a](https://github.com/NG-ZORRO/ng-zorro-antd/commit/e41640a)), closes [#2449](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2449)
+
+
+### Features
+
+* Adds danish locale ([#2486](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2486)) ([811a009](https://github.com/NG-ZORRO/ng-zorro-antd/commit/811a009)), closes [#2485](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2485)
+
+
+
 <a name="1.8.0"></a>
 # [1.8.0](https://github.com/NG-ZORRO/ng-zorro-antd/compare/1.7.1...1.8.0) (2018-10-26)
 

diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -70,7 +70,7 @@ $ ng add ng-zorro-antd
 在每一个需要使用组件的 module 中引入 `NgZorroAntdModule`。
 
 ```ts
-import { NgZorroAntModule } from 'ng-zorro-antd';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
 
 @NgModule({
   imports: [ NgZorroAntdModule ]

diff --git a/README.md b/README.md
@@ -77,7 +77,7 @@ $ npm install ng-zorro-antd
 Import the module into every module where you want to use the components.
 
 ```ts
-import { NgZorroAntModule } from 'ng-zorro-antd';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
 
 @NgModule({
   imports: [ NgZorroAntdModule ]

diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts
@@ -1,3 +1,4 @@
+import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
   AfterViewInit,
@@ -231,10 +232,10 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte
   }
 
   onKeyDown(e: KeyboardEvent): void {
-    if (e.keyCode === 37) { // Left
+    if (e.keyCode === LEFT_ARROW) { // Left
       this.pre();
       e.preventDefault();
-    } else if (e.keyCode === 39) { // Right
+    } else if (e.keyCode === RIGHT_ARROW) { // Right
       this.next();
       e.preventDefault();
     }

diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts
@@ -1,3 +1,4 @@
+import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { Component, ViewChild } from '@angular/core';
 import { fakeAsync, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -73,16 +74,16 @@ describe('carousel', () => {
       fixture.detectChanges();
       expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
       const list = carouselWrapper.nativeElement.querySelector('.slick-list');
-      dispatchKeyboardEvent(list, 'keydown', 37);
+      dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
       fixture.detectChanges();
       expect(carouselContents[ 3 ].nativeElement.classList).toContain('slick-active');
-      dispatchKeyboardEvent(list, 'keydown', 37);
+      dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
       fixture.detectChanges();
       expect(carouselContents[ 2 ].nativeElement.classList).toContain('slick-active');
-      dispatchKeyboardEvent(list, 'keydown', 39);
+      dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
       fixture.detectChanges();
       expect(carouselContents[ 3 ].nativeElement.classList).toContain('slick-active');
-      dispatchKeyboardEvent(list, 'keydown', 39);
+      dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
       fixture.detectChanges();
       expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
     });

diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less
@@ -27,6 +27,14 @@
     &.dragging {
       cursor: pointer;
     }
+
+    .slick-slide {
+      pointer-events: none;
+
+      &.slick-active {
+        pointer-events: auto;
+      }
+    }
   }
   .slick-slider .slick-track,
   .slick-slider .slick-list {

diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
@@ -46,7 +46,7 @@
       display: block;
       width: @checkbox-size;
       height: @checkbox-size;
-      border: @border-width-base @border-style-base @border-color-base;
+      border: @checkbox-border-width @border-style-base @border-color-base;
       border-radius: @border-radius-sm;
       background-color: @checkbox-check-color;
       transition: all .3s;

diff --git a/components/dropdown/nz-dropdown.spec.ts b/components/dropdown/nz-dropdown.spec.ts
@@ -133,6 +133,14 @@ describe('dropdown', () => {
       expect(items[ 0 ].classList.contains('ant-dropdown-menu-item')).toBe(true);
       expect(items[ 0 ].classList.contains('ant-dropdown-menu-item-selected')).toBe(false);
     });
+    it('should append the correct className', () => {
+      testComponent.visible = true;
+      testComponent.itemSelected = true;
+      fixture.detectChanges();
+      const items = overlayContainerElement.querySelectorAll('.ant-dropdown-menu-item') as NodeListOf<HTMLElement>;
+      expect(items[ 0 ].classList.contains('.ant-menu-item-selected')).toBe(false);
+      expect(items[ 0 ].classList.contains('ant-dropdown-menu-item-selected')).toBe(true);
+    });
     it('should backdrop work with click', () => {
       testComponent.trigger = 'click';
       fixture.detectChanges();
@@ -390,7 +398,7 @@ describe('dropdown', () => {
         Hover me <i nz-icon type="down"></i>
       </a>
       <ul nz-menu [nzSelectable]="selectable">
-        <li nz-menu-item>
+        <li nz-menu-item [nzSelected]="itemSelected">
           <a>1st menu item</a>
         </li>
         <li nz-menu-item>
@@ -413,6 +421,7 @@ export class NzTestDropdownComponent {
   @ViewChild(NzSubMenuComponent) nzSubMenuComponent: NzSubMenuComponent;
   visible = false;
   selectable = true;
+  itemSelected = false;
   trigger = 'hover';
   placement = 'bottomLeft';
   disabled = false;

diff --git a/components/i18n/languages/da_DK.ts b/components/i18n/languages/da_DK.ts
@@ -0,0 +1,44 @@
+import Calendar from './calendar/da_DK';
+import DatePicker from './date-picker/da_DK';
+import Pagination from './pagination/da_DK';
+import TimePicker from './time-picker/da_DK';
+
+export default {
+  locale: 'da',
+  DatePicker,
+  TimePicker,
+  Calendar,
+  Pagination,
+  Table: {
+    filterTitle: 'Filtermenu',
+    filterConfirm: 'OK',
+    filterReset: 'Nulstil',
+    emptyText: 'Ingen data',
+    selectAll: 'Vælg alle',
+    selectInvert: 'Inverter valg',
+  },
+  Modal: {
+    okText: 'OK',
+    cancelText: 'Annuller',
+    justOkText: 'OK',
+  },
+  Popconfirm: {
+    okText: 'OK',
+    cancelText: 'Annuller',
+  },
+  Transfer: {
+    notFoundContent: 'Intet match',
+    searchPlaceholder: 'Søg her',
+    itemUnit: 'element',
+    itemsUnit: 'elementer',
+  },
+  Select: {
+    notFoundContent: 'Intet match',
+  },
+  Upload: {
+    uploading: 'Uploader...',
+    removeFile: 'Fjern fil',
+    uploadError: 'Fejl ved upload',
+    previewFile: 'Forhåndsvisning',
+  },
+};
diff --git a/components/i18n/languages/date-picker/da_DK.ts b/components/i18n/languages/date-picker/da_DK.ts
@@ -0,0 +1,19 @@
+import CalendarLocale from '../calendar/da_DK';
+import TimePickerLocale from '../time-picker/da_DK';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Vælg dato',
+    rangePlaceholder: ['Startdato', 'Slutdato'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;
diff --git a/components/i18n/languages/time-picker/da_DK.ts b/components/i18n/languages/time-picker/da_DK.ts
@@ -0,0 +1,6 @@
+const locale = {
+    placeholder: 'Vælg tid',
+  };
+
+  export default locale;
+
diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md
@@ -77,13 +77,16 @@ Static loading. By registering icons to `AppModule` you load icons statically.
 
 ```ts
 import { IconDefinition } from '@ant-design/icons-angular';
-import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';
 import { NgZorroAntdModule, NZ_ICON_DEFAULT_TWOTONE_COLOR, NZ_ICONS } from 'ng-zorro-antd';
-// import * as AllIcons from '@ant-design/icons-angular/icons';
 
 // Import what you need. RECOMMENDED. ✔️
+import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';
+
 const icons: IconDefinition[] = [ AccountBookFill, AlertOutline, AlertFill ];
+
 // Import all. NOT RECOMMENDED. ❌
+// import * as AllIcons from '@ant-design/icons-angular/icons';
+
 // const antDesignIcons = AllIcons as {
 //   [key: string]: IconDefinition;
 // };
@@ -163,3 +166,34 @@ The following option are available:
 The property scriptUrl should be set to import the svg sprite symbols.
 
 See [iconfont.cn](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) documents to learn about how to generate scriptUrl.
+
+## FAQ
+
+### All my icons are gone!
+
+Have you read the docs above?
+
+### There are two similar icons in a `<i></i>` tag. What happened?
+
+In older versions of NG-ZORRO, there was a font file which would use `:before` to insert a icon according to a `i` tag's `className`. So if you have two icons, try to remove `node_modules` and reinstall. If the problem is still there, search `@icon-url` and remove that line.
+
+### I want to import all icons statically. What should I do?
+
+Actually we demonstrate it here <a href="/components/icon/en#static-loading-and-dynamic-loading">Static loading and dynamic loading</a>:
+
+```ts
+// import * as AllIcons from '@ant-design/icons-angular/icons';
+
+// const antDesignIcons = AllIcons as {
+//   [key: string]: IconDefinition;
+// };
+// const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])
+```
+
+### Does dynamic loading affect web pages' performance?
+
+We used several methods to reduce requests, like static cache, dynamic cache and reusable request. It's basically not noticeable for visitors that icons are loaded asynchronously assuming web connections are fairly good.
+
+### How do I know a icon's corresponding module to import?
+
+Capital camel-case `type & theme`, i.e. `alibaba` => `AlibabaOutline`.
diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md
@@ -78,13 +78,16 @@ NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解
 
 ```ts
 import { IconDefinition } from '@ant-design/icons-angular';
-import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';
 import { NgZorroAntdModule, NZ_ICON_DEFAULT_TWOTONE_COLOR, NZ_ICONS } from 'ng-zorro-antd';
-// import * as AllIcons from '@ant-design/icons-angular/icons';
 
 // 引入你需要的图标，比如你需要 fill 主题的 AccountBook Alert 和 outline 主题的 Alert，推荐 ✔️
+import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';
+
 const icons: IconDefinition[] = [ AccountBookFill, AlertOutline, AlertFill ];
-// 全量引入，不推荐 ❌
+
+// 引入全部的图标，不推荐 ❌
+// import * as AllIcons from '@ant-design/icons-angular/icons';
+
 // const antDesignIcons = AllIcons as {
 //   [key: string]: IconDefinition;
 // };
@@ -109,7 +112,7 @@ export class AppModule {
 
 本质上是调用了 `NzIconService` 的 `addIcon` 方法，引入后的文件会被打包到 `.js` 文件中。静态引入会增加包体积，所以我们建议尽可能地使用动态加载，如果要静态加载，也仅仅加载你需要用到的图标，具体请看 Ant Design 的 [issue](https://github.com/ant-design/ant-design/issues/12011)。
 
-> 为了加快渲染速度，`NG-ZORRO` 本身用到的 icon 是静态引入的。而官网的图标是动态引入的。
+> 为了加快渲染速度，NG-ZORRO 本身用到的 icon 是静态引入的。而官网的图标是动态引入的。
 
 动态加载，这是为了减少包体积而提供的方式。当 NG-ZORRO 检测用户想要渲染的图标还没有静态引入时，会发起 HTTP 请求动态引入。你只需要配置 `angular.json` 文件：
 
@@ -164,3 +167,38 @@ this._iconService.fetchFromIconfont({
 在 scriptUrl 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
 
 见 [iconfont.cn](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 使用帮助 查看如何生成 js 地址。
+
+## 常见问题
+
+### 图标都不见了！
+
+你是不是没有阅读以上的文档？
+
+### 出现了两个图标，这是怎么回事？
+
+1.7.0 及之后与之前的版本在图标的实现上完全不同，旧版本的主题文件中，会引入字体文件，字体文件根据 CSS 类名，通过一个伪类元素将 icon 添加进来，加上新版的 SVG icon，就会出现两个 icon。
+
+如果发生了，请先删除 `node_modules` 然后重装，如果还是不行，仔细检查你是否在别处引用了旧版本的主题文件，全局查找 `@icon-url`，删除该行代码即可。
+
+### 我想静态引入全部的图标，该怎么做？
+
+实际上我们已经在 <a href="/components/icon/zh#%E9%9D%99%E6%80%81%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD">静态加载与动态加载</a> 部分演示过了：
+
+```ts
+// import * as AllIcons from '@ant-design/icons-angular/icons';
+
+// const antDesignIcons = AllIcons as {
+//   [key: string]: IconDefinition;
+// };
+// const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])
+```
+
+然后通过 InjectionToken（1.8.0）或者 `NzIconService` 的 `addIcon` 方法引入。
+
+### 动态加载会不会影响网页的性能？
+
+我们用了多种手段来尽量减少动态请求，包括先静态后动态、缓存和相同 icon 的请求复用，用户很少能感知到 icon 是异步加载的。在网络环境尚可的情况下，即使是有三百多 icon 同时展示的 NG-ZORRO 官网，也基本没有卡顿。对于加载速度要求更高的用户，我们也支持 CDN。
+
+### 我怎么知道一个 icon 的静态引入名？
+
+很简单，大写驼峰加主题即为 icon 的引入名。比如，`alibaba` 的引入名就是 `AlibabaOutline`，事实上，编辑器的自动补全能帮助到你。
diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts
@@ -1,3 +1,4 @@
+import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import {
   forwardRef,
   AfterViewInit,
@@ -320,11 +321,11 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   }
 
   onKeyDown(e: KeyboardEvent): void {
-    if (e.code === 'ArrowUp' || e.keyCode === 38) {
+    if (e.code === 'ArrowUp' || e.keyCode === UP_ARROW) {
       const ratio = this.getRatio(e);
       this.up(e, ratio);
       this.stop();
-    } else if (e.code === 'ArrowDown' || e.keyCode === 40) {
+    } else if (e.code === 'ArrowDown' || e.keyCode === DOWN_ARROW) {
       const ratio = this.getRatio(e);
       this.down(e, ratio);
       this.stop();

diff --git a/components/input/nz-input.spec.ts b/components/input/nz-input.spec.ts
@@ -1,3 +1,4 @@
+import { ENTER } from '@angular/cdk/keycodes';
 import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { async, fakeAsync, flush, TestBed } from '@angular/core/testing';
 import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -75,7 +76,7 @@ describe('input', () => {
       });
       it('should resize when input change', fakeAsync(() => {
         const previousHeight = textarea.clientHeight;
-        dispatchKeyboardEvent(textarea, 'input', 13, textarea);
+        dispatchKeyboardEvent(textarea, 'input', ENTER, textarea);
         testComponent.value = '\n';
         fixture.detectChanges();
         flush();