chore(release): release 14.0.0 (#259)

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

README.md

@@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home).
 
 ## Angular Support
 
-Now supports Angular <font color=red>`^13.0.0`</font>
+Now supports Angular <font color=red>`^14.0.0`</font>
 
 ## Getting Started
 

README_zh_CN.md

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

angular.json

@@ -67,6 +67,14 @@
                 }
               ]
             },
+            "development": { 
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
             "es5": {
               "tsConfig": "src/tsconfig.app.es5.json"
             },
@@ -84,13 +92,17 @@
             "production": {
               "browserTarget": "devui:build:production"
             },
+            "development": { 
+              "browserTarget": "devui:build:development"
+            },
             "es5": {
               "browserTarget": "devui:build:es5"
             },
             "separate": {
               "browserTarget": "devui:build:separate"
             }
-          }
+          },
+          "defaultConfiguration": "development" 
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",

devui-commons/src/codecopy/codecopy.directive.ts

@@ -9,7 +9,7 @@ import { ReadTipOption, StrCopySVG } from './codecopy.types';
 })
 export class CodeCopyDirective implements OnInit, AfterViewInit, OnDestroy {
   @Output('copied') copied: EventEmitter<any> = new EventEmitter<any>();
-  private destroy$ = new Subject();
+  private destroy$ = new Subject<void>();
   timer: any;
   optionsSuccess = ReadTipOption.optionSuccessData['zh-cn'];
   options = ReadTipOption.optionData['zh-cn'];

devui-commons/src/demo-nav/d-demo-nav.component.html

@@ -1,7 +1,7 @@
 <div class="devui-content-nav">
   <d-sticky [container]="demoDocViewerMain">
     <div>
-      <div class="devui-fast-forward">{{ goToText }}</div>
+      <!-- <div class="devui-fast-forward">{{ goToText }}</div> -->
       <ul class="devui-step-nav">
         <li *ngFor="let navitem of navItems" dAnchorLink="{{ navitem.dAnchorLink }}" anchorActive="active">
           {{ navitem.value }}

devui-commons/src/devui-commons.scss

@@ -16,10 +16,9 @@
 .devui-content-layout {
   top: 60px;
   position: absolute;
-  padding: 0 20% 32px 13%;
-  margin-left: 260px;
-  width: calc(100% - 260px);
-  background-color: $devui-base-bg;
+  padding: 0 15vw 0 25vw;
+  width: calc(100vw - 20px);
+  background-color: $devui-global-bg;
 }
 
 //内容区文档头样式
@@ -48,7 +47,11 @@
 }
 
 .devui-demo-example {
-  margin-bottom: 48px;
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: $devui-base-bg;
+  box-shadow: $devui-shadow-length-base $devui-light-shadow;
+  border-radius: 8px;
 }
 
 .devui-demo-title {
@@ -154,10 +157,10 @@
 .devui-content-nav {
   width: 240px;
   position: fixed;
-  top: 90px;
+  top: 170px;
   right: 0;
   height: 100%;
-  z-index: 1;
+  z-index: calc(#{$devui-z-index-framework} + 1);
 
   .devui-fast-forward {
     width: 130px;
@@ -218,10 +221,6 @@
   .devui-content-nav {
     width: 150px;
   }
-
-  .devui-content-layout {
-    padding: 0 15% 0 8%;
-  }
 }
 
 @media (max-width: 1250px) {

devui-commons/src/header/header.component.ts

@@ -33,7 +33,7 @@ export class HeaderComponent implements OnInit {
 
   @HostListener('window:resize')
   resize(): void {
-    this.showSlideMenu = document.body.clientWidth < 1024 ? false : true;
+    this.showSlideMenu = document.body.clientWidth < 1280 ? false : true;
     this.setSlideBarStyle();
   }
 
@@ -69,7 +69,7 @@ export class HeaderComponent implements OnInit {
   setSlideBarStyle(): void {
     const ele = document.querySelector('.sidebar-wrapper');
     if (ele) {
-      ele.setAttribute('style', `max-width: ${ this.showSlideMenu ? '260px' : '0'}`);
+      ele.setAttribute('style', `max-width: ${ this.showSlideMenu ? '320px' : '0'}`);
     }
   }
 

devui-commons/src/header/version-switch/version-switch.component.scss

@@ -1,5 +1,5 @@
 .header-version-switch {
-    width: 80px;
+    width: 100px;
     margin: 0 12px;
 }
 

devui-commons/src/sidebar/sidebar.component.scss

@@ -2,11 +2,12 @@
 
 .sidebar-wrapper {
   position: fixed;
-  top: 70px;
-  width: 260px;
-  max-width: 260px;
+  top: 60px;
+  width: 320px;
+  max-width: 320px;
   height: 100%;
   overflow-y: hidden;
+  scroll-behavior: smooth;
   z-index: 1000;
   border-right: 1px solid $devui-dividing-line;
   background-color: $devui-base-bg;
@@ -19,12 +20,12 @@
 }
 
 .sidebar-nav {
-  width: 260px;
+  width: 100%;
   padding-bottom: 80px;
 }
 
 .sidebar-menu {
-  width: 260px;
+  width: 320px;
 
   outline: none;
   margin-bottom: 0;

devui-commons/src/sidebar/sidebar.component.ts

@@ -1,20 +1,25 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import { cloneDeep } from 'lodash-es';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 import { DevuiCommonsService } from '../devui-commons.service';
 
 @Component({
   selector: 'd-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss']
 })
-export class SidebarComponent implements OnInit {
+export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() sideMenuList;
   @Input() linkType = 'routerLink';
   @Input() text = {
     new: 'New',
     sunset: 'Sunset'
   };
   _navData;
+  private _currentUrl: string = '';
+  private destroy$: Subject<void> = new Subject();
   componentsDataDisplay;
 
   @Input() set navData(data) {
@@ -26,14 +31,40 @@ export class SidebarComponent implements OnInit {
     return this._navData;
   }
 
-  constructor(private commonsService: DevuiCommonsService) { }
+  constructor(private commonsService: DevuiCommonsService, private router: Router, private ele: ElementRef) { }
 
   ngOnInit(): void {
+    this._currentUrl = this.router.url;
     this.commonsService.on<any>('searchEvent').subscribe(term => {
       this.filterData(term);
     });
   }
 
+  ngAfterViewInit(): void {
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((event) => {
+        const destUrl = (event as NavigationEnd).urlAfterRedirects;
+        if (this._currentUrl.endsWith('overview')) {
+          setTimeout(() => {
+            const activeItem: HTMLElement = this.ele.nativeElement.querySelector('.devui-router-active');
+            if (activeItem) {
+              activeItem.scrollIntoView({ block: 'center' });
+            }
+          });
+        }
+        this._currentUrl = destUrl;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   filterData(event): void {
     this.componentsDataDisplay = cloneDeep(this.navData).filter(catalog => {
       catalog.children = catalog.children.filter(item => {

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

@@ -12,9 +12,10 @@ import { ACCORDION } from './accordion-token';
 export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent implements OnChanges {
   @ViewChild(RouterLinkActive) routerLinkActiveDirective: RouterLinkActive;
   @HostBinding('class.devui-router-active')
-  get routerLinkActived(): boolean {
+  get routerLinkActivated(): boolean {
     return !!(this.routerLinkActiveDirective && this.routerLinkActiveDirective.isActive);
   }
+
   private set urlTree(urlTree: UrlTree) {
     if (urlTree) {
       this.queryParams = urlTree.queryParams;
@@ -25,25 +26,25 @@ export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent
     }
   }
 
-  public path: string;
-  public queryParams: Params;
-  public fragment: string;
-
-  constructor(@Inject(ACCORDION) protected accordion: any, private router: Router) {
-    super(accordion);
-  }
-
   @HostListener('click', ['$event'])
   onClick(event: MouseEvent) {
     if (!this.disabled) {
       this.accordion.linkItemClickFn({
         item: this.item,
         parent: this.parent,
-        event: event
+        event: event,
       });
     }
   }
 
+  path: string;
+  queryParams: Params;
+  fragment: string;
+
+  constructor(@Inject(ACCORDION) protected accordion: any, private router: Router) {
+    super(accordion);
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['item']) {
       if (this.link) {

devui/accordion/accordion-list.component.html

@@ -4,12 +4,13 @@
     <d-accordion-menu *ngIf="item[childrenKey] !== undefined" [item]="item" [deepth]="deepth" [parent]="parent"></d-accordion-menu>
     <!--非菜单类型-->
     <d-accordion-list
+      #listInstance
       *ngIf="item[childrenKey] !== undefined"
       class="devui-accordion-submenu"
       [deepth]="deepth + 1"
       [data]="item[childrenKey]"
       [parent]="item"
-      [@collapse]="item.open ? 'expanded' : 'collapsed'"
+      [@collapse]="getOpenState(item, listInstance)"
       [@.disabled]="!animateState"
     >
     </d-accordion-list>