chore(release): release 9.0.0-beta.1

Author: huaweidevcloud

README.md

@@ -23,7 +23,7 @@ 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
 

README_zh_CN.md

@@ -23,7 +23,7 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资
 
 ## Angular版本
 
-当前支持的angular版本<font color=red>`^8.0.0`</font>
+当前支持的angular版本<font color=red>`^9.0.0`</font>
 
 ## 快速开始
 

angular.json

@@ -148,6 +148,11 @@
           "options": {
             "tsConfig": "devui/tsconfig.lib.json",
             "project": "devui/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "devui/tsconfig.lib.prod.json"
+            }
           }
         },
         "test": {

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,5 @@
 <ng-container *ngIf="!disabled">
-  <a href="{{ link }}" target="{{ target }}" rel="noopener" title="{{ title }}">
+  <a class="devui-over-flow-ellipsis" href="{{ link }}" target="{{ target }}" rel="noopener" title="{{ title }}">
     <ng-container *ngIf="!itemTemplate">
       {{ title }}
     </ng-container>
@@ -15,7 +15,7 @@
   </a>
 </ng-container>
 <ng-container *ngIf="disabled">
-  <a title="{{ title }}">
+  <a class="devui-over-flow-ellipsis" title="{{ title }}">
     <ng-container *ngIf="!itemTemplate">
       {{ title }}
     </ng-container>

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

@@ -1,5 +1,14 @@
 <ng-container *ngIf="!disabled">
-  <a [routerLink]="link" [routerLinkActive]="'devui-router-active'" target="{{ target }}" rel="noopener" title="{{ title }}">
+  <a
+    class="devui-over-flow-ellipsis"
+    [routerLink]="path"
+    [queryParams]="queryParams"
+    [fragment]="fragment"
+    [routerLinkActive]="'devui-router-active'"
+    target="{{ target }}"
+    rel="noopener"
+    title="{{ title }}"
+  >
     <ng-container *ngIf="!itemTemplate">
       {{ title }}
     </ng-container>
@@ -15,7 +24,7 @@
   </a>
 </ng-container>
 <ng-container *ngIf="disabled">
-  <a title="{{ title }}">
+  <a class="devui-over-flow-ellipsis" title="{{ title }}">
     <ng-container *ngIf="!itemTemplate">
       {{ title }}
     </ng-container>

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

@@ -1,19 +1,32 @@
 import { AccordionComponent } from './accordion.component';
-import { Component, ViewEncapsulation, HostBinding, ViewChild, HostListener} from '@angular/core';
+import { Component, ViewEncapsulation, HostBinding, ViewChild, HostListener, SimpleChanges, OnChanges} from '@angular/core';
 import { AccordionBaseLinkComponent } from './accordion-base-link-component.class';
-import { RouterLinkActive, Router } from '@angular/router';
+import { RouterLinkActive, Router, UrlTree, Params } from '@angular/router';
 
 @Component({
   selector: 'd-accordion-item-routerlink',
   templateUrl: './accordion-item-routerlink.component.html',
   encapsulation: ViewEncapsulation.None,
 })
-export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent {
-  @ViewChild(RouterLinkActive, { static: false }) routerLinkActiveDirective: RouterLinkActive;
+export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent implements OnChanges {
+  @ViewChild(RouterLinkActive) routerLinkActiveDirective: RouterLinkActive;
   @HostBinding('class.devui-router-active')
   get routerLinkActived(): boolean {
     return !!(this.routerLinkActiveDirective && this.routerLinkActiveDirective.isActive);
   }
+  private set urlTree(urlTree: UrlTree) {
+    if (urlTree) {
+      this.queryParams = urlTree.queryParams;
+      this.fragment = urlTree.fragment;
+    } else {
+      this.queryParams = undefined;
+      this.fragment = undefined;
+    }
+  }
+
+  public path: string;
+  public queryParams: Params;
+  public fragment: string;
 
   constructor(protected accordion: AccordionComponent, private router: Router) {
     super(accordion);
@@ -29,4 +42,24 @@ export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent
       });
     }
   }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['item']) {
+      if (this.link) {
+        this.urlTree = this.router.parseUrl(this.link);
+        const handelPath = (url: string) => {
+          let path = url;
+          const index = url.indexOf('?');
+          if (index > -1) {
+            path = url.slice(0, index);
+          }
+          return path;
+        };
+        this.path = handelPath(this.link);
+      } else {
+        this.urlTree = undefined;
+        this.path = undefined;
+      }
+    }
+  }
 }

devui/accordion/accordion.component.scss

@@ -4,6 +4,7 @@
 :host {
   display: block;
 }
+
 :host ::ng-deep d-accordion-menu,
 :host ::ng-deep d-accordion-item,
 :host ::ng-deep d-accordion-item-hreflink,
@@ -19,22 +20,26 @@
   box-shadow: 0 1px 2px 0 $dark-1-boxshadow;
   width: 100%;
   overflow-y: auto;
+
   & > .devui-accordion-list > .devui-accordion-item {
     & > .devui-accordion-menu-item > .devui-accordion-item-title,
     & > .devui-accordion-item-title {
       font-weight: 700;
     }
   }
+
   .devui-over-flow-ellipsis {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
+
 :host ::ng-deep .devui-accordion-submenu {
   background: $bg-white;
   width: 100%;
 }
+
 /* 单行菜单 */
 :host ::ng-deep .devui-accordion-item-title {
   display: block;
@@ -46,39 +51,51 @@
   color: $dark-1;
   background: transparent;
   cursor: pointer;
+
   &.disabled {
-    opacity: 0.3;
-    cursor: default;
+    color: $disabled-content;
+    cursor: not-allowed;
+
+    & > a {
+      color: $disabled-content;
+    }
   }
+
   &:not(.disabled) {
     &:hover {
       background: $hover-content;
     }
+
     &.devui-router-active,
     &.active {
       color: $brand-1;
       background: $brand-3;
+
       & > a {
         color: $brand-1;
       }
     }
   }
+
   & > a {
     text-decoration: none;
     display: block;
     width: 100%;
     color: $dark-1;
+
     &:hover {
       color: inherit;
       text-decoration: none;
     }
   }
 }
+
 /* 解决链接可点击区域大小不是100%宽度问题 */
 :host ::ng-deep d-accordion-item-hreflink,
 :host ::ng-deep d-accordion-item-routerlink {
   &.devui-accordion-item-title {
     padding: 0;
+
     & > a {
       padding: 0 10px 0 20px;
     }
@@ -88,41 +105,51 @@
 /* 展开图标相关 */
 :host ::ng-deep .devui-accordion-menu-item > .devui-accordion-item-title {
   position: relative;
+
   & > .devui-accordion-open-icon {
     display: inline-block;
     text-indent: 0;
-    pointer-events: none; /*让鼠标穿透*/
+    pointer-events: none; /* 让鼠标穿透 */
     position: absolute;
     right: 10px;
     top: 12px;
     width: 16px;
     height: 16px;
     line-height: 16px;
     transition: transform ease-out 300ms;
+
     & > svg {
       width: 16px;
       height: 16px;
+
       polygon {
         fill: $dark-1;
       }
     }
   }
+
   &:not(.open) > .devui-accordion-open-icon {
     transform: rotate(-90deg);
     transform-origin: center;
   }
+
   &.disabled > .devui-accordion-open-icon {
-    opacity: 0.3;
+    svg polygon {
+      fill: $disabled-content;
+    }
   }
 }
+
 /* 可展开的菜单 */
 :host ::ng-deep .devui-accordion-menu-item > .devui-accordion-item-title {
   padding-right: 30px;
+
   &.active {
     color: $brand-1;
     background: transparent;
   }
 }
+
 :host ::ng-deep d-accordion-list.devui-accordion-menu-hidden {
   display: none;
 }