chore(release): release 12.0.0-beta.2

README.md

@@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home).
 
 ## Angular Support
 
-Now supports Angular <font color=red>`^12.0.0-beta.1`</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>`^12.0.0-beta.1`</font>
+当前支持的angular版本<font color=red>`^11.0.0`</font>
 
 ## 快速开始
 

angular.json

@@ -31,7 +31,8 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/assets/i18n"
+              "src/assets/i18n",
+              "src/assets/overview/**/*"
             ],
             "styles": [
               "node_modules/highlight.js/styles/an-old-hope.css",

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

@@ -14,6 +14,12 @@
     </li>
   </ul>
   <nav class="sidebar-nav">
-    <d-accordion [data]="componentsDataDisplay" [linkType]="linkType"></d-accordion>
+    <d-accordion [data]="componentsDataDisplay" [linkType]="linkType" [itemTemplate]="itemtemplate"></d-accordion>
+
+    <ng-template #itemtemplate let-item="item">
+      {{ item.title }}
+      <d-tag *ngIf="item.newChange" [tag]="text.new" [labelStyle]="'orange-w98'"></d-tag>
+      <d-tag *ngIf="item.sunset" [tag]="text.sunset" [labelStyle]="'yellow-w98'"></d-tag>
+    </ng-template>
   </nav>
 </div>

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

@@ -74,4 +74,12 @@
 
 d-accordion ::ng-deep .devui-accordion-menu {
   box-shadow: none !important;
+}
+
+d-tag {
+  text-indent: 0;
+
+  & + d-tag {
+  margin-left: 4px;
+  }
 }

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

@@ -10,6 +10,10 @@ import { DevuiCommonsService } from '../devui-commons.service';
 export class SidebarComponent implements OnInit {
   @Input() sideMenuList;
   @Input() linkType = 'routerLink';
+  @Input() text = {
+    new: 'New',
+    sunset: 'Sunset'
+  };
   _navData;
   componentsDataDisplay;
 

devui/alert/alert.component.html

@@ -17,7 +17,7 @@
       </g>
     </svg>
   </button>
-  <span class="devui-alert-icon" *ngIf="showIcon !== false">
+  <span class="devui-alert-icon" *ngIf="showIcon !== false && type !== 'simple'">
     <svg
       width="16px"
       height="16px"

devui/alert/alert.component.scss

@@ -82,6 +82,17 @@
     }
   }
 
+  &.devui-alert-simple {
+    border-color: $devui-line;
+    color: $devui-text;
+
+    button.devui-close {
+      & > svg path {
+        fill: $devui-text-weak;
+      }
+    }
+  }
+
   svg.devui-icon {
     width: 16px;
     height: 16px;

devui/alert/alert.types.ts

@@ -1 +1 @@
-export type AlertType = 'success' | 'danger' | 'warning' | 'info';
+export type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple';

devui/alert/demo/basic/basic.component.html

@@ -2,3 +2,4 @@
 <d-alert [type]="'danger'" [closeable]="false"> danger </d-alert>
 <d-alert [type]="'warning'" [closeable]="false"> warning </d-alert>
 <d-alert [type]="'info'" [closeable]="false"> info </d-alert>
+<d-alert [type]="'simple'" [closeable]="false"> simple </d-alert>

devui/alert/demo/close/close.component.html

@@ -2,3 +2,4 @@
 <d-alert [type]="'danger'" (closeEvent)="handleClose($event)"> danger </d-alert>
 <d-alert [type]="'warning'" (closeEvent)="handleClose($event)"> warning </d-alert>
 <d-alert [type]="'info'" (closeEvent)="handleClose($event)"> info </d-alert>
+<d-alert [type]="'simple'" (closeEvent)="handleClose($event)"> simple </d-alert>

devui/alert/demo/withoutIcon/withoutIcon.component.html

@@ -2,3 +2,4 @@
 <d-alert [type]="'danger'" [showIcon]="false"> danger</d-alert>
 <d-alert [type]="'warning'" [showIcon]="false"> warning</d-alert>
 <d-alert [type]="'info'" [showIcon]="false"> info</d-alert>
+<d-alert [type]="'simple'" [showIcon]="false"> simple</d-alert>

devui/alert/doc/api-cn.md

@@ -34,5 +34,5 @@ import { AlertModule } from 'ng-devui/alert';
 默认值为'info'， 指定alert警告提示的类型
 
 ```ts
-export type AlertType = 'success' | 'danger' | 'warning' | 'info';
+export type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple';
 ```

devui/alert/doc/api-en.md

@@ -34,5 +34,5 @@ In the page:
 The default value is 'info', which specifies the type of alert warning.
 
 ```ts
-export type AlertType = 'success' | 'danger' | 'warning' | 'info';
+export type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple';
 ```

devui/anchor/anchor-link.directive.ts

@@ -66,6 +66,9 @@ export class AnchorLinkDirective implements OnInit, OnDestroy {
 
   @HostListener('click')
   scrollToAnchor(activeChangeBy?: AnchorActiveChangeSource) {
+    if (typeof document === 'undefined') {
+      return;
+    }
     if (!this.anchorBlock) {
       return;
     }

devui/anchor/anchor.directive.ts

@@ -122,7 +122,7 @@ export class AnchorDirective implements AfterViewInit, OnDestroy {
     if (this.scrollListenTarget) {
       return;
     }
-    if (this.boxElement) {
+    if (this.boxElement && typeof window !== 'undefined') {
       this.scrollListenTarget = this.boxElement.scrollTarget || window; // window有scroll事件，document.documentElement没有scroll事件
     }
     this.scrollListenTarget.addEventListener('scroll', this.throttle, { passive: true });

devui/anchor/demo/async/async.component.html

@@ -20,19 +20,19 @@
     </div>
     <div class="mycontent" *ngIf="loadContent">
       <div [dAnchor]="'base-info'" class="section-block">
-        <h3>Basic Infomation</h3>
+        <h3 class="devui-h3-title">Basic Infomation</h3>
         Show basic infomation here.
       </div>
       <div [dAnchor]="'issue-list'" class="section-block">
-        <h3>Demand List</h3>
+        <h3 class="devui-h3-title">Demand List</h3>
         Show demand list here.
       </div>
       <div [dAnchor]="'case-list'" class="section-block">
-        <h3>Case List</h3>
+        <h3 class="devui-h3-title">Case List</h3>
         Show case list here.
       </div>
       <div [dAnchor]="'quarlity-result'" class="section-block">
-        <h3>Quality Assessment</h3>
+        <h3 class="devui-h3-title">Quality Assessment</h3>
         Show quality assessment here.
       </div>
     </div>

devui/anchor/demo/basic/basic.component.html

@@ -12,19 +12,19 @@
     </div>
     <div class="mycontent">
       <div [dAnchor]="'base-info'" class="section-block">
-        <h3>Basic Infomation</h3>
+        <h3 class="devui-h3-title">Basic Infomation</h3>
         Show basic infomation here.
       </div>
       <div [dAnchor]="'issue-list'" class="section-block">
-        <h3>Demand List</h3>
+        <h3 class="devui-h3-title">Demand List</h3>
         Show demand list here.
       </div>
       <div [dAnchor]="'case-list'" class="section-block">
-        <h3>Case List</h3>
+        <h3 class="devui-h3-title">Case List</h3>
         Show case list here.
       </div>
       <div [dAnchor]="'quarlity-result'" class="section-block">
-        <h3>Quality Assessment</h3>
+        <h3 class="devui-h3-title">Quality Assessment</h3>
         Show quality assessment here.
       </div>
     </div>

devui/anchor/demo/hash/hash.component.html

@@ -20,19 +20,19 @@
     </div>
     <div class="mycontent">
       <div [dAnchor]="'base-info'" class="section-block">
-        <h3>Basic Infomation</h3>
+        <h3 class="devui-h3-title">Basic Infomation</h3>
         Show basic infomation here.
       </div>
       <div [dAnchor]="'issue-list'" class="section-block">
-        <h3>Demand List</h3>
+        <h3 class="devui-h3-title">Demand List</h3>
         Show demand list here.
       </div>
       <div [dAnchor]="'case-list'" class="section-block">
-        <h3>Case List</h3>
+        <h3 class="devui-h3-title">Case List</h3>
         Show case list here.
       </div>
       <div [dAnchor]="'quality-result'" class="section-block" id="quality_result">
-        <h3>Quality Assessment</h3>
+        <h3 class="devui-h3-title">Quality Assessment</h3>
         Show quality assessment here.
       </div>
     </div>

devui/anchor/demo/scroll-target/scroll-target.component.html

@@ -19,19 +19,19 @@
     </div>
     <div class="mycontent">
       <div [dAnchor]="'base-info'" class="section-block">
-        <h3>Basic Infomation</h3>
+        <h3 class="devui-h3-title">Basic Infomation</h3>
         Show basic infomation here.
       </div>
       <div [dAnchor]="'issue-list'" class="section-block">
-        <h3>Demand List</h3>
+        <h3 class="devui-h3-title">Demand List</h3>
         Show demand list here.
       </div>
       <div [dAnchor]="'case-list'" class="section-block">
-        <h3>Case List</h3>
+        <h3 class="devui-h3-title">Case List</h3>
         Show case list here.
       </div>
       <div [dAnchor]="'quality-result'" class="section-block">
-        <h3>Quality Assessment</h3>
+        <h3 class="devui-h3-title">Quality Assessment</h3>
         Show quality assessment here.
       </div>
     </div>

devui/back-top/back-top.component.ts

@@ -1,6 +1,7 @@
+import { DOCUMENT } from '@angular/common';
 import {
   ChangeDetectionStrategy, ChangeDetectorRef, Component,
-  ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef
+  ElementRef, EventEmitter, Inject, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef
 } from '@angular/core';
 import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -25,7 +26,10 @@ export class BackTopComponent implements OnInit, OnChanges, OnDestroy {
   SCROLL_REFRESH_INTERVAL = 100;
   target: HTMLElement | Window;
   subs: Subscription = new Subscription();
-  constructor(private cdr: ChangeDetectorRef, private el: ElementRef) {}
+  document: Document;
+  constructor(private cdr: ChangeDetectorRef, private el: ElementRef, @Inject(DOCUMENT) private doc: any) {
+    this.document = this.doc;
+  }
 
   ngOnInit() {
     this.addScrollEvent();
@@ -64,16 +68,16 @@ export class BackTopComponent implements OnInit, OnChanges, OnDestroy {
 
   showButton() {
     this.currScrollTop = this.target === window ?
-    (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) : this.scrollTarget.scrollTop;
+    (window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop) : this.scrollTarget.scrollTop;
     if (this.isVisible !== (this.currScrollTop >= this.visibleHeight)) {
       this.isVisible = !this.isVisible;
     }
   }
 
   goTop() {
     if (this.target === window) {
-      document.documentElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
-      document.body.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+      this.document.documentElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+      this.document.body.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
     } else {
       this.scrollTarget.style.scrollBehavior = 'smooth';
       this.scrollTarget.scrollTop = 0;

devui/back-top/demo/scroll-container/scroll-container.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, OnInit } from '@angular/core';
 
 @Component({
   selector: 'd-back-top-scroll-container',
@@ -10,13 +11,13 @@ export class ScrollContainerComponent implements OnInit {
   scrollElement;
   list = [];
   sentence = 'You know some birds are not meant to be caged, their feathers are just too bright.';
-  constructor() {}
+  constructor(@Inject(DOCUMENT) private doc: any) {}
 
   ngOnInit() {
     for (let i = 0; i < 20; i++) {
       this.list.push(this.sentence);
     }
-    this.scrollElement = document.querySelector('.devui-scroll-content');
+    this.scrollElement = this.doc.querySelector('.devui-scroll-content');
   }
 
   backTop(event) {

devui/button/button.component.scss

@@ -265,7 +265,7 @@ $devui-btn-pseudo-config: (
     &.devui-btn-danger {
       border-color: $devui-danger;
       color: $devui-danger;
-      background-color: $devui-block;
+      background-color: $devui-danger;
     }
   }
 

devui/button/button.component.ts

@@ -9,7 +9,7 @@ import {
   Input,
   Output,
   TemplateRef,
-  ViewChild,
+  ViewChild
 } from '@angular/core';
 export type IButtonType = 'button' | 'submit' | 'reset';
 export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger';
@@ -47,7 +47,8 @@ export class ButtonComponent implements AfterContentChecked {
     }
   }
 
-  constructor(private cd: ChangeDetectorRef) {}
+  constructor(private cd: ChangeDetectorRef) {
+  }
 
   // 新增click事件，解决直接在host上使用click，在disabled状态下还能触发事件
   onClick(event) {

devui/button/demo/autofocus/autofocus.component.html

@@ -1,2 +1,2 @@
-<d-button bsStyle="primary" bordered="true" [autofocus]="true" style="margin-right: 4px"> Confirm </d-button>
+<d-button bsStyle="primary" bordered="true" [autofocus]="true" style="margin-right: 8px"> Confirm </d-button>
 <d-button bsStyle="common"> Cancel </d-button>

devui/button/demo/combination/combination.component.css

@@ -1,3 +1,3 @@
 d-button:not(:last-child) {
-  margin-right: 4px;
+  margin-right: 8px;
 }

devui/button/demo/common/common.component.html

@@ -1 +1 @@
-<d-button bsStyle="common" style="margin-right: 4px">Common</d-button> <d-button bsStyle="common" [disabled]="true">Disabled</d-button>
+<d-button bsStyle="common" style="margin-right: 8px">Common</d-button> <d-button bsStyle="common" [disabled]="true">Disabled</d-button>

devui/button/demo/groups/groups.component.html

@@ -6,8 +6,8 @@
   </d-button-group>
   <d-button-group size="sm">
     <d-button bsStyle="primary">Left</d-button>
-    <d-button bsStyle="primary">Middle</d-button>
-    <d-button bsStyle="primary">Right</d-button>
+    <d-button bsStyle="common">Middle</d-button>
+    <d-button bsStyle="common">Right</d-button>
   </d-button-group>
   <d-button-group>
     <d-button bsStyle="primary" icon="icon-filter">Filter</d-button>
@@ -21,7 +21,7 @@
 <div class="btn-group">
   <d-button-group size="">
     <d-button bsStyle="primary" icon="icon-add">New</d-button>
-    <d-button bsStyle="primary">Delete</d-button>
+    <d-button bsStyle="common">Delete</d-button>
     <div dDropDown [closeScope]="'blank'">
       <d-button bsStyle="common" dDropDownToggle class="devui-dropdown-origin border-remove">
         Click me

devui/button/demo/icon/icon.component.scss

@@ -5,7 +5,7 @@
 }
 
 .btn-group d-button {
-  margin-right: 4px;
+  margin-right: 8px;
 }
 
 .icon-chevron-down {

devui/button/demo/left-right/left-right.component.html

@@ -1,2 +1,2 @@
 <d-button bsStyle="primary" bsPosition="left">Left</d-button>
-<d-button bsStyle="primary" bsPosition="right">Right</d-button>
+<d-button bsStyle="common" bsPosition="right">Right</d-button>

devui/button/demo/primary/primary.component.html

@@ -1,2 +1,2 @@
-<d-button id="primaryBtn" style="margin-right: 4px">Primary</d-button>
+<d-button id="primaryBtn" style="margin-right: 8px">Primary</d-button>
 <d-button [disabled]="true">Disabled</d-button>

devui/button/demo/size/size.component.html

@@ -1,4 +1,4 @@
-<d-button bsStyle="common" bsSize="xs" style="margin-right: 4px"> Extra small</d-button>
-<d-button bsStyle="common" bsSize="sm" style="margin-right: 4px"> Small </d-button>
-<d-button bsStyle="common" style="margin-right: 4px"> Middle </d-button>
+<d-button bsStyle="primary" bsSize="xs" style="margin-right: 8px"> Extra small</d-button>
+<d-button bsStyle="common" bsSize="sm" style="margin-right: 8px"> Small </d-button>
+<d-button bsStyle="common" style="margin-right: 8px"> Middle </d-button>
 <d-button bsStyle="common" bsSize="lg"> Large </d-button>

devui/card/demo/basic/basic.component.html

@@ -1,4 +1,4 @@
-<d-card style="width: 350px">
+<d-card class="card-container">
   <d-card-header>
     <d-avatar dCardAvatar [name]="'DevUI'"></d-avatar>
     <d-card-title>DEVUI Course</d-card-title>