chore(release): release 11.0.0 (#91)

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

Author: wangyaju

README.md

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

README_zh_CN.md

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

angular.json

@@ -13,6 +13,13 @@
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "allowedCommonJsDependencies": [
+              "date-fns",
+              "highlight.js",
+              "codemirror",
+              "xss",
+              "enquire.js"
+            ],
             "customWebpackConfig": {
               "path": "scripts/extra-webpack.config.js"
             },
@@ -23,7 +30,8 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/assets/i18n"
             ],
             "styles": [
               "node_modules/highlight.js/styles/an-old-hope.css",
@@ -103,7 +111,8 @@
             "scripts": [],
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/assets/i18n"
             ]
           }
         },
@@ -156,7 +165,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "devui/tsconfig.lib.json",
             "project": "devui/ng-package.json"

devui/accordion/accordion-list.component.ts

@@ -1,4 +1,7 @@
-import { Component, Host, Input, OnDestroy, OnInit, Optional, QueryList, SkipSelf, ViewChildren, ViewEncapsulation } from '@angular/core';
+import {
+  Component, Host, HostBinding, Input, OnDestroy, OnInit,
+  Optional, QueryList, SkipSelf, ViewChildren, ViewEncapsulation
+} from '@angular/core';
 import { AccordionItemRouterlinkComponent } from './accordion-item-routerlink.component';
 import { AccordionMenuComponent } from './accordion-menu.component';
 import { AccordionComponent } from './accordion.component';
@@ -18,7 +21,6 @@ export class AccordionListComponent implements OnInit, OnDestroy {
   @ViewChildren(AccordionItemRouterlinkComponent) accordionItemRouterlinkQueryList: QueryList<AccordionItemRouterlinkComponent>;
   constructor(@Optional() @Host() @SkipSelf() private parentComponent: AccordionMenuComponent,
               private accordion: AccordionComponent) {}
-
   ngOnInit(): void {
     if (this.parentComponent) {
       setTimeout(() => {this.parentComponent.accordionListFromView = this; });
@@ -30,6 +32,10 @@ export class AccordionListComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostBinding('class.devui-accordion-show-animate') get animateState() {
+    return this.accordion.showAnimation;
+  }
+
   get loading() {
     return this.parent && this.parent[this.accordion.loadingKey];
   }

devui/accordion/accordion-menu.component.html

@@ -40,7 +40,8 @@
 </div>
 <d-accordion-list
   class="devui-accordion-submenu"
-  [ngClass]="{ 'devui-accordion-menu-hidden': !open }"
+  [@collapseState]="!showAnimate ? '' : open ? 'expanded' : 'collapsed'"
+  [ngClass]="{ 'devui-accordion-menu-hidden': !open && !showAnimate }"
   [deepth]="deepth + 1"
   [data]="children"
   [parent]="item"

devui/accordion/accordion-menu.component.ts

@@ -1,14 +1,15 @@
 import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
+import { collapseMotion } from 'ng-devui/utils';
 import { AccordionBaseComponent } from './accordion-base-component.class';
 import { AccordionListComponent } from './accordion-list.component';
 import { AccordionComponent } from './accordion.component';
 import { AccordionBaseMenu, AccordionMenuItem } from './accordion.type';
-
 @Component({
   selector: 'd-accordion-menu',
   templateUrl: './accordion-menu.component.html',
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  animations: [collapseMotion]
 })
 export class AccordionMenuComponent extends AccordionBaseComponent<AccordionBaseMenu<AccordionMenuItem>> {
   @HostBinding('class.devui-accordion-menu-item')
@@ -20,6 +21,10 @@ export class AccordionMenuComponent extends AccordionBaseComponent<AccordionBase
     return this.accordion.menuItemTemplate;
   }
 
+  get showAnimate() {
+    return this.accordion.showAnimation;
+  }
+
   @HostBinding('class.open')
   get open() {
     return (this.keyOpen === undefined && this.accordion.autoOpenActiveMenu)

devui/accordion/accordion.component.scss

@@ -107,6 +107,10 @@
   }
 }
 
+:host ::ng-deep .devui-accordion-menu-item {
+  overflow-y: hidden;
+}
+
 /* 展开图标相关 */
 :host ::ng-deep .devui-accordion-menu-item > .devui-accordion-item-title {
   position: relative;
@@ -187,17 +191,46 @@
     }
   }
 
+  .devui-accordion-splitter::before {
+    content: '';
+    display: block;
+    width: 2px;
+    height: 18px;
+    background-color: $devui-form-control-line-active;
+    position: absolute;
+    top: 11px;
+    left: 0;
+    opacity: 0;
+  }
+
   &.devui-router-active,
   &.active {
     &:not(.open) .devui-accordion-splitter::before {
-      content: '';
-      display: block;
-      width: 2px;
-      height: 18px;
-      background: $devui-form-control-line-active;
-      position: absolute;
-      top: 11px;
-      left: 0;
+      opacity: 1;
+    }
+  }
+}
+
+:host ::ng-deep .devui-accordion-show-animate .devui-accordion-item-title {
+  transition: font-weight ease-in-out 0.3s;
+
+  &:not(.disabled) {
+    &.devui-router-active,
+    &.active:not(.open) {
+      transition: font-weight ease-in-out 0.3s;
+    }
+  }
+
+  .devui-accordion-splitter::before {
+    transform: scaleY(0);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  &.devui-router-active,
+  &.active {
+    &:not(.open) .devui-accordion-splitter::before {
+      transform: scaleY(1);
+      transition: transform 0.3s ease-in-out;
     }
   }
 }

devui/accordion/accordion.component.ts

@@ -1,8 +1,7 @@
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef } from '@angular/core';
 import { I18nInterface, I18nService } from 'ng-devui/i18n';
 import { Subscription } from 'rxjs';
-import { AccordionItemClickEvent, AccordionMenuToggleEvent, AccordionMenuType, AccordionOptions} from './accordion.type';
-
+import { AccordionItemClickEvent, AccordionMenuToggleEvent, AccordionMenuType, AccordionOptions } from './accordion.type';
 @Component({
   selector: 'd-accordion',
   templateUrl: './accordion.component.html',
@@ -43,11 +42,11 @@ export class AccordionComponent implements AccordionOptions, OnChanges, OnInit,
   @Input() linkDefaultTarget = '_self'; // 不设置target的时候target默认值
 
   @Input() accordionType: 'normal' | 'embed' = 'normal';
+  @Input() showAnimation = true;
 
   activeItem; // 记录用户点击的激活菜单项
   i18nCommonText: I18nInterface['common'];
   i18nSubscription: Subscription;
-
   constructor(private i18n: I18nService) {
   }
 

devui/accordion/demo/basic/basic.component.html

@@ -7,5 +7,7 @@
   (activeItemChange)="log($event)"
   [accordionType]="accordionTypeEmbed ? 'embed' : 'normal'"
 ></d-accordion>
-<div class="option"><d-toggle [(ngModel)]="restrictOneOpen"></d-toggle> 限制只能展开一个一级菜单</div>
-<div class="option"><d-toggle [(ngModel)]="accordionTypeEmbed"></d-toggle> 内嵌菜单形式（无阴影）</div>
+<div class="option">
+  <d-toggle [(ngModel)]="restrictOneOpen"></d-toggle> Only one level-1 menu can be expanded.<!--限制只能展开一个一级菜单-->
+</div>
+<div class="option"><d-toggle [(ngModel)]="accordionTypeEmbed"></d-toggle> Embedded menu (no shadow)<!--内嵌菜单形式（无阴影）--></div>

devui/accordion/demo/basic/basic.component.ts

@@ -9,37 +9,37 @@ export class BasicComponent {
   restrictOneOpen = false;
   accordionTypeEmbed = false;
   menu = [{
-    title: '内容一',
+    title: 'Content 1',
     children: [
-      {title: '子内容1'},
-      {title: '子内容2'},
-      {title: '子内容3'},
+      {title: 'Child Content 1'},
+      {title: 'Child Content 2'},
+      {title: 'Child Content '},
     ]
   }, {
-    title: '内容二（超长长长长长长长长长长长长长长内容测试）',
+    title: 'Content 2（This is a long sentence for option display.）',
     children: [
-      {title: '子内容1（超长长长长长长长长长长长长长长内容测试'},
-      {title: '子内容2'},
-      {title: '子内容3'},
+      {title: 'Child Content 1 (This is a long sentence for option display.)'},
+      {title: 'Child Content 2'},
+      {title: 'Child Content 3'},
     ]
   }, {
-    title: '内容三（默认展开）',
+    title: 'Content 3 (Default Open)',
     open: true,
     children: [
-      {title: '子内容1(禁用)', disabled: true},
-      {title: '子内容2(默认激活)', active: true},
-      {title: '子内容3'},
+      {title: 'Child Content 1 (Disabled)', disabled: true},
+      {title: 'Child Content 2 (Default Active)', active: true},
+      {title: 'Child Content 3'},
     ]
   }, {
-    title: '内容四（没有子项）',
+    title: 'Content 4 (No Child)',
     children: []
   }, {
-    title: '内容五（禁用）',
+    title: 'Content 5 (Disabled)',
     disabled: true,
     children: [
     ]
   }, {
-    title: '内容六（动态加载）',
+    title: 'Content 6 (Dynamic Content)',
     needLoadChildren: true,
     loading: false,
     children: [
@@ -56,8 +56,8 @@ export class BasicComponent {
       event.item.loading = true;
       setTimeout(() => {
         event.item.children = [
-          {title: '子内容1'},
-          {title: '子内容2'}
+          {title: 'Child Content 1'},
+          {title: 'Child Content 2'}
         ];
         event.item.needLoadChildren = false;
         event.item.loading = false;

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

@@ -14,14 +14,14 @@ export class ChangeKeyComponent {
     childrenKey: 'subs',
   };
   menu = [{
-    value: '内容一',
+    value: 'Content 1',
   }, {
-    value: '内容二（展开）',
+    value: 'Content 2 (expended)',
     $show: true,
     subs: [
-      {value: '子内容1（禁用）', forbidden: true},
-      {value: '子内容2（选中）', $selected: true},
-      {value: '子内容3'},
+      { value: 'Child Content 1 (disabled)', forbidden: true },
+      { value: 'Child Content 2 (active)', $selected: true },
+      { value: 'Child Content 3' },
     ]
   }];
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'd-inner-list-template',
@@ -7,13 +7,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class InnerListTemplateComponent {
   menu = [{
-    title: '内容一',
+    title: 'Content 1',
     children: [],
-    content: '内容一的内容'
+    content: 'Child Content of Content 1'
   }, {
-    title: '内容二',
+    title: 'Content 2',
     children: [],
-    content: '内容二的内容'
+    content: 'Child Content of Content 2'
   }];
 
   itemClick(event) {

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

@@ -32,3 +32,7 @@
     width: 80%;
   }
 }
+
+.menu-wrapper > div {
+  margin-bottom: 8px;
+}

devui/accordion/demo/link/link.component.html

@@ -1,12 +1,12 @@
 <div class="menu-wrapper">
-  <div>路由链接（推荐使用）</div>
+  <div>router link (recommended)<!--路由链接（推荐使用）--></div>
   <d-accordion [data]="menu" class="menu" [linkType]="'routerLink'"></d-accordion>
 </div>
 <div class="menu-wrapper">
-  <div>原生超链接（涉及跨站场景使用）</div>
-  <d-accordion [data]="menu2" class="menu" [linkType]="'hrefLink'" [linkDefaultTarget]="'_self'"></d-accordion>
+  <div>original hyperlink (cross site scene)<!--原生超链接（涉及跨站场景使用）--></div>
+  <d-accordion [data]="menu2" class="menu" [linkType]="'hrefLink'" [linkDefaultTarget]="'self'"></d-accordion>
 </div>
 <div class="menu-wrapper">
-  <div>混合链接（部分涉及跨站场景使用）</div>
-  <d-accordion [data]="menu3" class="menu" [linkType]="'dependOnLinkTypeKey'"></d-accordion>
+  <div>mix link (partial cross site scene) (<!--混合链接（部分涉及跨站场景使用）--></div>
+  <d-accordion [data]="menu3" class="menu" [linkType]="'dependOnLinkTypeKey'" [showAnimation]="false"></d-accordion>
 </div>