chore(release): release 9.0.0 (#46)

Co-authored-by: huaweidevcloud <devcloudmobile@huawei.com>

CODE_OF_CONDUCT.md

@@ -68,9 +68,9 @@ members of the project's leadership.
 ## Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>
 
 [homepage]: https://www.contributor-covenant.org
 
 For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+<https://www.contributor-covenant.org/faq>

README.md

@@ -7,7 +7,7 @@
 </br>
   <a href="README.md"><img src="https://img.shields.io/badge/document-English-blue" alt="Document"></a>
   <a href="README_zh_CN.md"><img src="https://img.shields.io/badge/%E6%96%87%E6%A1%A3-%E4%B8%AD%E6%96%87-blue" alt="Document"></a>
-    <a href="https://www.npmjs.com/package/ng-devui"><img src="https://img.shields.io/npm/v/ng-devui" alt="Npm"></a>
+  <a href="https://www.npmjs.com/package/ng-devui"><img src="https://img.shields.io/npm/v/ng-devui" alt="Npm"></a>
   <a href="https://gitter.im/devui-design/devui-design"><img src="https://img.shields.io/gitter/room/devui-design/devui-design" alt="Chat"></a>
 </p>
 
@@ -23,14 +23,14 @@ To see more in [devui.design](https://devui.design/home).
 
 ## Angular Support
 
-Now supports Angular <font color=red>`^8.0.0`</font>
+Now supports Angular <font color=red>`^9.0.0`</font>
 
 ## Getting Started
 
 1. Create a new project
 
 ``` bash
-$ ng new New-Project
+ng new New-Project
 ```
 
 2. Installation:
@@ -80,7 +80,7 @@ export class AppModule { }
 5. Debugging
 
 ```bash
-$ ng serve --open
+ng serve --open
 ```
 
 ## Contribution

README_zh_CN.md

@@ -7,7 +7,7 @@
 </br>
   <a href="README.md"><img src="https://img.shields.io/badge/document-English-blue" alt="Document"></a>
   <a href="README_zh_CN.md"><img src="https://img.shields.io/badge/%E6%96%87%E6%A1%A3-%E4%B8%AD%E6%96%87-blue" alt="Document"></a>
-    <a href="https://www.npmjs.com/package/ng-devui"><img src="https://img.shields.io/npm/v/ng-devui" alt="Npm"></a>
+  <a href="https://www.npmjs.com/package/ng-devui"><img src="https://img.shields.io/npm/v/ng-devui" alt="Npm"></a>
   <a href="https://gitter.im/devui-design/devui-design"><img src="https://img.shields.io/gitter/room/devui-design/devui-design" alt="Chat"></a>
 </p>
 
@@ -23,7 +23,7 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资
 
 ## Angular版本
 
-当前支持的angular版本<font color=red>`^8.0.0`</font>
+当前支持的angular版本<font color=red>`^9.0.0`</font>
 
 ## 快速开始
 
@@ -32,15 +32,15 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资
 推荐使用`@angular/cli`创建你的项目
 
 ```bash
-$ ng new New-Project
+ng new New-Project
 ```
 
 2. 安装:
 
 ```bash
 $ cd New-Project
 $ npm i ng-devui
-# 可选，字体图标库 
+# 可选，字体图标库
 # $ npm i @devui-design/icons
 ```
 
@@ -82,7 +82,7 @@ export class AppModule { }
 5. 启动开发测试
 
 ```bash
-$ ng serve --open
+ng serve --open
 ```
 
 ## 贡献

angular.json

@@ -148,14 +148,24 @@
           "options": {
             "tsConfig": "devui/tsconfig.lib.json",
             "project": "devui/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "devui/tsconfig.lib.prod.json"
+            }
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "devui/test.ts",
             "tsConfig": "devui/tsconfig.spec.json",
-            "karmaConfig": "devui/karma.conf.js"
+            "karmaConfig": "devui/karma.conf.js",
+            "polyfills": "devui/polyfills.ts",
+            "codeCoverage": true,
+            "styles": [
+              "src/styles.scss"
+            ]
           }
         },
         "lint": {

devui/accordion/AccordionBaseComponent.ts

@@ -0,0 +1,25 @@
+import { Input, HostBinding, Directive } from '@angular/core';
+import { AccordionBase, AccordionOptions } from './accordion.type';
+
+@Directive()
+export abstract class AccordionBaseComponent<T extends AccordionBase> {
+  @Input() item: any | T;
+  @Input() deepth = 0;
+  @Input() parent: any | T;
+
+
+  @HostBinding('class.disabled')
+  get disabled() {
+    return this.item && this.item[this.accordion.disabledKey];
+  }
+  @HostBinding('attr.title')
+  public get title() {
+    return this.item && this.item[this.accordion.titleKey];
+  }
+  @HostBinding('style.textIndent')
+  get textIndent() {
+    return this.deepth * 20 + 'px';
+  }
+
+  constructor(protected accordion: AccordionOptions) { }
+}

devui/accordion/accordion-base-component.class.ts

@@ -1,6 +1,7 @@
-import { Input, HostBinding } from '@angular/core';
+import { Input, HostBinding, Directive } from '@angular/core';
 import { AccordionBase, AccordionOptions } from './accordion.type';
 
+@Directive()
 export abstract class AccordionBaseComponent<T extends AccordionBase> {
   @Input() item: any | T;
   @Input() deepth = 0;

devui/accordion/accordion-base-item-component.class.ts

@@ -1,7 +1,8 @@
-import { HostBinding } from '@angular/core';
+import { HostBinding, Directive } from '@angular/core';
 import { AccordionBaseItem, AccordionOptions } from './accordion.type';
 import { AccordionBaseComponent } from './accordion-base-component.class';
 
+@Directive()
 export abstract class AccordionBaseItemComponent<T extends AccordionBaseItem> extends AccordionBaseComponent<T> {
   get itemTemplate() {
     return this.accordion.itemTemplate;

devui/accordion/accordion-base-link-component.class.ts

@@ -1,7 +1,8 @@
-import { HostListener } from '@angular/core';
+import { HostListener, Directive } from '@angular/core';
 import { AccordionLinkableItem, AccordionOptions } from './accordion.type';
 import { AccordionBaseItemComponent } from './accordion-base-item-component.class';
 
+@Directive()
 export abstract class AccordionBaseLinkComponent extends AccordionBaseItemComponent<AccordionLinkableItem> {
   get link() {
     return this.item && this.item[this.accordion.linkKey];

devui/accordion/accordion-item-hreflink.component.html

@@ -1,5 +1,10 @@
 <ng-container *ngIf="!disabled">
   <a class="devui-over-flow-ellipsis" href="{{ link }}" target="{{ target }}" rel="noopener" title="{{ title }}">
+    <div
+      class="devui-accordion-splitter"
+      [ngClass]="{ 'devui-parent-list': deepth === 0 }"
+      [ngStyle]="{ left: deepth * 20 + 10 + 'px' }"
+    ></div>
     <ng-container *ngIf="!itemTemplate">
       {{ title }}
     </ng-container>
@@ -16,6 +21,11 @@
 </ng-container>
 <ng-container *ngIf="disabled">
   <a class="devui-over-flow-ellipsis" title="{{ title }}">
+    <div
+      class="devui-accordion-splitter"
+      [ngClass]="{ 'devui-parent-list': deepth === 0 }"
+      [ngStyle]="{ left: deepth * 20 + 10 + 'px' }"
+    ></div>
     <ng-container *ngIf="!itemTemplate">
       {{ title }}
     </ng-container>

devui/accordion/accordion-item-routerlink.component.html

@@ -9,6 +9,11 @@
     rel="noopener"
     title="{{ title }}"
   >
+    <div
+      class="devui-accordion-splitter"
+      [ngClass]="{ 'devui-parent-list': deepth === 0 }"
+      [ngStyle]="{ left: deepth * 20 + 10 + 'px' }"
+    ></div>
     <ng-container *ngIf="!itemTemplate">
       {{ title }}
     </ng-container>
@@ -25,6 +30,11 @@
 </ng-container>
 <ng-container *ngIf="disabled">
   <a class="devui-over-flow-ellipsis" title="{{ title }}">
+    <div
+      class="devui-accordion-splitter"
+      [ngClass]="{ 'devui-parent-list': deepth === 0 }"
+      [ngStyle]="{ left: deepth * 20 + 10 + 'px' }"
+    ></div>
     <ng-container *ngIf="!itemTemplate">
       {{ title }}
     </ng-container>

devui/accordion/accordion-item-routerlink.component.ts

@@ -9,7 +9,7 @@ import { RouterLinkActive, Router, UrlTree, Params } from '@angular/router';
   encapsulation: ViewEncapsulation.None,
 })
 export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent implements OnChanges {
-  @ViewChild(RouterLinkActive, { static: false }) routerLinkActiveDirective: RouterLinkActive;
+  @ViewChild(RouterLinkActive) routerLinkActiveDirective: RouterLinkActive;
   @HostBinding('class.devui-router-active')
   get routerLinkActived(): boolean {
     return !!(this.routerLinkActiveDirective && this.routerLinkActiveDirective.isActive);

devui/accordion/accordion-item.component.html

@@ -1,3 +1,4 @@
+<div class="devui-accordion-splitter" [ngClass]="{ 'devui-parent-list': deepth === 0 }" [ngStyle]="{ left: deepth * 20 + 10 + 'px' }"></div>
 <ng-container *ngIf="!itemTemplate">
   {{ title }}
 </ng-container>

devui/accordion/accordion-menu.component.html

@@ -8,6 +8,13 @@
   title="{{ title }}"
   (click)="!disabled && toggle($event)"
 >
+  <div
+    class="devui-accordion-splitter"
+    [ngClass]="{
+      'devui-parent-list': deepth === 0
+    }"
+    [ngStyle]="{ left: deepth * 20 + 10 + 'px' }"
+  ></div>
   <ng-container *ngIf="!menuItemTemplate">
     {{ title }}
   </ng-container>
@@ -23,7 +30,10 @@
   <span class="devui-accordion-open-icon">
     <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <polygon points="4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462"></polygon>
+        <polygon
+          transform="translate(8.000000, 8.000000) scale(1, -1) rotate(-360.000000) translate(-8.000000, -8.000000) "
+          points="4 5.5 12 5.5 8 10.5"
+        ></polygon>
       </g>
     </svg>
   </span>