chore(release): release 8.2.0 (#40)

Co-authored-by: huaweidevcloud <[email protected]>

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 {
+export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent implements OnChanges {
   @ViewChild(RouterLinkActive, { static: false }) 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;
 }

devui/accordion/demo/accordion-demo.component.html

@@ -1,5 +1,6 @@
-<div class="demo-container">
-  <div class="demo-example">
+<div class="demo-container" dAnchorBox [view]="{ top: 60, bottom: 0 }">
+  <d-demo-nav [navItems]="navItems"></d-demo-nav>
+  <div [dAnchor]="'basic-usage'" class="demo-example">
     <div class="demo-title">基本用法</div>
     <div class="demo-text">
       传入菜单，监听含子项的可展开菜单的开合事件(menuToggle)或可点击菜单的点击事件(itemClick)。<br />
@@ -10,7 +11,7 @@
       <d-basic demo></d-basic>
     </d-codebox>
   </div>
-  <div class="demo-example">
+  <div [dAnchor]="'use-built-in-routing-and-link-types'" class="demo-example">
     <div class="demo-title">使用内置路由和链接类型</div>
     <div class="demo-text">
       通过设置linkType切换不同的内置路由和链接类型：默认类型''；
@@ -20,7 +21,7 @@
       <d-link demo></d-link>
     </d-codebox>
   </div>
-  <div class="demo-example">
+  <div [dAnchor]="'using-templates'" class="demo-example">
     <div class="demo-title">使用模板</div>
     <div class="demo-text">
       可展开菜单和可点击菜单分别使用模板。可展开菜单指定menuItemTemplate，可点击菜单指定itemTemplate。<br />
@@ -38,7 +39,7 @@
     </d-codebox>
   </div>
 
-  <div class="demo-example">
+  <div [dAnchor]="'compound-level-and-auto-expand'" class="demo-example">
     <div class="demo-title">复合层级和自动展开</div>
     <div class="demo-text">
       支持多层级和不限制嵌套层级。可以独立使用autoOpenActiveMenu使得激活的菜单的父层级自动展开。
@@ -47,7 +48,7 @@
       <d-multi-level demo></d-multi-level>
     </d-codebox>
   </div>
-  <div class="demo-example">
+  <div [dAnchor]="'change-values'" class="demo-example">
     <div class="demo-title">改变键值</div>
     <div class="demo-text">
       通过titleKey, childrenKey, disabledKey, activeKey等等改变数组键值，适配不同的接口类型定义。

devui/accordion/demo/accordion-demo.component.ts

@@ -44,5 +44,11 @@ export class  AccordionDemoComponent {
     code:  require('!!raw-loader!./change-key/change-key.component.ts')},
     {title: 'CSS', language: 'css', code:  require('!!raw-loader!./change-key/change-key.component.css')}
   ];
-
+  navItems = [
+    { dAnchorLink: 'basic-usage', value: '基本用法'},
+    { dAnchorLink: 'use-built-in-routing-and-link-types', value: '内置路由和链接类型'},
+    { dAnchorLink: 'using-templates', value: '使用模板'},
+    { dAnchorLink: 'compound-level-and-auto-expand', value: '复合层级和自动展开'},
+    { dAnchorLink: 'change-values', value: '改变键值'}
+  ];
 }

devui/accordion/demo/accordion-demo.moudule.ts

@@ -15,9 +15,11 @@ import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component
 import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module';
 import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox';
 import { ToggleModule } from 'ng-devui/toggle';
+import { DDemoNavModule } from 'src/app/component/d-demo-nav.module';
 
 @NgModule({
   imports: [
+    DDemoNavModule,
     CommonModule,
     AccordionModule,
     ToggleModule,

devui/accordion/demo/basic/basic.component.css

@@ -1,15 +1,18 @@
 .menu {
   width: 200px;
 }
+
 .option {
   line-height: 20px;
   vertical-align: middle;
   margin-top: 20px;
 }
+
 .option > d-toggle {
   display: inline-block;
   transform: translateY(3px);
 }
+
 @media (max-width: 250px) {
   .menu {
     width: 80%;

devui/accordion/demo/change-key/change-key.component.css

@@ -1,6 +1,7 @@
 .menu {
   width: 400px;
 }
+
 @media (max-width: 500px) {
   .menu {
     width: 80%;

devui/accordion/demo/inner-list-template/inner-list-template.component.css

@@ -1,11 +1,13 @@
 .menu {
   width: 400px;
 }
+
 .my-menu {
   min-height: 60px;
   line-height: 40px;
   padding: 10px;
 }
+
 @media (max-width: 500px) {
   .menu {
     width: 80%;

devui/accordion/demo/link/link.component.css

@@ -1,12 +1,15 @@
 .menu {
   width: 200px;
 }
+
 .menu-wrapper {
   float: left;
 }
+
 .menu-wrapper + .menu-wrapper {
   margin-left: 20px;
 }
+
 :host::after {
   content: '';
   display: block;
@@ -17,11 +20,13 @@
   .menu-wrapper {
     float: none;
   }
+
   .menu-wrapper + .menu-wrapper {
     margin-top: 20px;
-    margin-left: 0px;
+    margin-left: 0;
   }
 }
+
 @media (max-width: 250px) {
   .menu {
     width: 80%;

devui/accordion/demo/link/link.component.ts

@@ -17,7 +17,7 @@ export class LinkComponent {
     title: '高级组件',
     children: [
       {title: '表格(禁用)', disabled: true, link: '/components/datatable'},
-      {title: '拖拽', link: '/components/dragdrop'},
+      {title: '拖拽(参数示例)', link: '/components/dragdrop?query=foo#bar'},
     ]
   }, {
     title: '其他',