chore(release): release 12.1.0 (#145)

Co-authored-by: huaweidevcloud <[email protected]>
DevCloudFE · Sep 18, 2021 · bb665de · bb665de
1 parent 70ac40c
commit bb665de
Show file tree

Hide file tree

Showing 220 changed files with 5,028 additions and 1,158 deletions.
diff --git a/devui-commons/src/header/header.component.html b/devui-commons/src/header/header.component.html
@@ -9,7 +9,15 @@
     }">
       <div class="header-left">
         <div *ngIf="showSlideButton" class="slide-menu-link" (click)="clickSlideMenu()">
-          <span></span>
+          <span>
+            <svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <g id="slide-button-outer" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g id="slide-button-inner">
+                      <path d="M18,6 L18,8 L0,8 L0,6 L18,6 Z M18,0 L18,2 L0,2 L0,0 L18,0 Z M14,12 L14,14 L0,14 L0,12 L14,12 Z"></path>
+                  </g>
+              </g>
+            </svg>
+          </span>
         </div>
         <ng-content select="d-header-logo"></ng-content>
         <d-search *ngIf="showSearch" [isKeyupSearch]="true" [placeholder]="searchPlaceholder" (searchFn)="onSearch($event)"></d-search>

diff --git a/devui-commons/src/header/header.component.scss b/devui-commons/src/header/header.component.scss
@@ -71,13 +71,16 @@
       border-right: 1px solid $devui-dividing-line;
 
       span {
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOAQMAAAAYFN70AAAABlBMVEUAAAAhKDGQazuIAAAAAXRSTlMAQObYZgAAABRJREFUCNdj+P//ABijAdzif8AYAMnZDu+UDPvPAAAAAElFTkSuQmCC)
-          no-repeat scroll 0 center;
+        line-height: 40px;
         display: block;
         width: 18px;
         height: 40px;
         margin: 0 10px;
         cursor: pointer;
+
+        #slide-button-inner {
+          fill: $devui-text;
+        }
       }
     }
   }
@@ -90,7 +93,7 @@
       vertical-align: text-bottom;
       border: 0;
       height: 20px;
-      width: 90px;
+      width: 100px;
       margin: 0 12px;
     }
   }
@@ -176,6 +179,12 @@
   }
 }
 
+@media (max-width: 380px) {
+  d-search {
+    width: 180px;
+  }
+}
+
 :host d-search ::ng-deep input {
   border-width: 0;
 }
diff --git a/devui-commons/src/header/logo/logo.component.scss b/devui-commons/src/header/logo/logo.component.scss
@@ -28,4 +28,12 @@
       margin-left: 0 !important;
     }
   }
+}
+
+@media (max-width: 360px) {
+  .header-logo {
+    .text {
+      display: none;
+    }
+  }
 }
diff --git a/devui-commons/src/header/menu/menu.component.scss b/devui-commons/src/header/menu/menu.component.scss
@@ -87,7 +87,7 @@
     }
 }
 
-@media (max-width: 1180px) {
+@media (max-width: 1360px) {
     .header-menu {
         flex-direction: column;
     }

diff --git a/devui-commons/src/header/version-switch/version-switch.component.scss b/devui-commons/src/header/version-switch/version-switch.component.scss
@@ -7,4 +7,10 @@
     .header-version-switch {
         width: 60px;
     }
+}
+
+@media (max-width: 1360px) {
+    .header-version-switch {
+        width: 70px;
+    }
 }
diff --git a/devui/accordion/accordion.component.scss b/devui/accordion/accordion.component.scss
@@ -51,7 +51,7 @@
   height: 40px;
   width: 100%;
   padding: 0 12px 0 20px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 40px;
   color: $devui-text-weak;
   background: transparent;

diff --git a/devui/accordion/demo/template/template.component.scss b/devui/accordion/demo/template/template.component.scss
@@ -14,7 +14,7 @@
   color: $devui-light-text;
   text-align: center;
   background: $devui-brand;
-  font-weight: 400;
+  font-weight: normal;
 }
 
 .loading {

diff --git a/devui/alert/alert.component.html b/devui/alert/alert.component.html
@@ -1,5 +1,5 @@
 <div class="devui-alert devui-alert-{{ type }} {{ cssClass }}" *ngIf="!hide">
-  <button type="button" class="devui-close" (click)="close()" *ngIf="closeable">
+  <div class="devui-close" (click)="close()" *ngIf="closeable">
     <svg
       width="10px"
       height="10px"
@@ -16,7 +16,7 @@
         </g>
       </g>
     </svg>
-  </button>
+  </div>
   <span class="devui-alert-icon" *ngIf="showIcon !== false && type !== 'simple'">
     <svg
       width="16px"

diff --git a/devui/alert/alert.component.scss b/devui/alert/alert.component.scss
@@ -2,7 +2,7 @@
 @import '../style/theme/color';
 @import '../style/theme/shadow';
 @import '../style/theme/corner';
-@import '../style/theme/_font';
+@import '../style/core/_font';
 
 :host {
   display: block;
@@ -12,16 +12,17 @@
   color: $devui-text;
   font-size: $devui-font-size;
   border: 1px solid transparent;
-  padding: 8px;
+  padding: 8px 16px;
   line-height: 24px;
   border-radius: $devui-border-radius;
-  padding-left: 16px;
   word-break: normal;
   word-wrap: break-word;
 
-  button.devui-close {
+  .devui-close {
     color: $devui-text;
     opacity: 1;
+    line-height: 26px;
+    height: 24px;
 
     & > svg path {
       fill: $devui-light-text;
@@ -39,7 +40,7 @@
     border-color: $devui-success-line;
     color: $devui-text;
 
-    button.devui-close {
+    .devui-close {
       & > svg path {
         fill: $devui-success-line;
       }
@@ -51,7 +52,7 @@
     border-color: $devui-info-line;
     color: $devui-text;
 
-    button.devui-close {
+    .devui-close {
       & > svg path {
         fill: $devui-info-line;
       }
@@ -63,7 +64,7 @@
     border-color: $devui-warning-line;
     color: $devui-text;
 
-    button.devui-close {
+    .devui-close {
       & > svg path {
         fill: $devui-warning-line;
       }
@@ -75,7 +76,7 @@
     border-color: $devui-danger-line;
     color: $devui-text;
 
-    button.devui-close {
+    .devui-close {
       & > svg path {
         fill: $devui-danger-line;
       }
@@ -86,7 +87,7 @@
     border-color: $devui-line;
     color: $devui-text;
 
-    button.devui-close {
+    .devui-close {
       & > svg path {
         fill: $devui-text-weak;
       }

diff --git a/devui/alert/alert.spec.ts b/devui/alert/alert.spec.ts
@@ -107,15 +107,15 @@ describe('alert', () => {
 
     describe('alert close', () => {
       it('Alert should close', () => {
-        const closeButton = alertElement.querySelector('button');
-        closeButton.click();
+        const closeButton = alertElement.querySelector('.devui-close');
+        closeButton.dispatchEvent(new Event('click'));
         fixture.detectChanges();
         expect(alertElement.querySelector('.devui-alert')).toBe(null);
       });
 
       it('Alert should activate closeEvent', () => {
-        const closeButton = alertElement.querySelector('button');
-        closeButton.click();
+        const closeButton = alertElement.querySelector('.devui-close');
+        closeButton.dispatchEvent(new Event('click'));
         fixture.detectChanges();
         expect(testComponent.clickCount).toBe(1);
       });

diff --git a/devui/auto-complete/auto-complete-popup.component.ts b/devui/auto-complete/auto-complete-popup.component.ts
@@ -67,7 +67,7 @@ export class AutoCompletePopupComponent implements ControlValueAccessor {
   }
 
   onSelect(event, item) {
-    if (this.disabledKey && item[this.disabledKey]) {
+    if (this.disabledKey && item && item[this.disabledKey]) {
       event.preventDefault();
       event.stopPropagation();
       return;

diff --git a/devui/badge/doc/api-cn.md b/devui/badge/doc/api-cn.md
@@ -21,7 +21,7 @@ import { BadgeModule } from 'ng-devui/badge';
 |    maxCount     | `number`   | 99  | 可选，设置基本徽章和计数徽章最大可显示数目，当 count > maxCount 时显示maxCount+  | [基本徽章](demo#badge-basic)     |
 |   showDot   | `boolean`  | false | 可选，true时为点状徽章(有包裹)或状态徽章(无包裹)，false时为基本徽章(有包裹)或计数徽章(无包裹) | [点状徽章](demo#badge-dot)   |
 | status |`BadgeStatusType` | -- | 可选，状态色 'danger' \| 'warning' \| 'waiting' \| 'success' \| 'info' | [基本徽章](demo#badge-basic) |
-|   badgePos    | `BadgePositionType`   |  'top-right'   | 可选，徽标位置 'top-left' \| 'top-right' \| 'bottpm-left' \| ''bottom-right''   | [徽章位置](demo#position)      |
+|   badgePos    | `BadgePositionType`   |  'top-right'   | 可选，徽标位置 'top-left' \| 'top-right' \| 'bottom-left' \| ''bottom-right''   | [徽章位置](demo#position)      |
 |  offsetXY   |   `[number, number]`     |  --  | 可选，有包裹时徽标位置偏移量，格式为[x,y]，单位为px。x为相对right偏移量(right: -x `px`)，y为相对top偏移量(top: y `px`)               |   [自定义](demo#custom)   |
 |    bgColor     |    `string`     |   --    | 可选，自定义徽标色，此时status参数设置的徽章状态色失效 |  [自定义](demo#custom)      |
 |    textColor     |    `string`     |   --    | 可选， 可自定义徽标文字颜色 |  [自定义](demo#custom)      |
diff --git a/devui/badge/doc/api-en.md b/devui/badge/doc/api-en.md
@@ -21,7 +21,7 @@ In the page:
 | maxCount | `number` | 99 | Optional. Sets the maximum number of basic and counting badges that can be displayed. When count is greater than maxCount, maxCount+ is displayed. | [Basic Badge](demo#badge-basic) |
 | showDot | `boolean` | false | Optional. The value true indicates the dot badge (with package) or status badge (without package). The value false indicates the basic badge (with package) or count badge (without package). | [Dotted Badge](demo#badge-dot) |
 | status |`BadgeStatusType` | -- | Optional. The status color is'danger'\| 'warning' \| 'waiting' \| 'success' \| 'info'. | [Basic Badge](demo#badge-basic) |
-| badgePos | `BadgePositionType` | 'top-right' | Optional. Logo position'top-left' \|'top-right' \|'bottpm-left' \|'bottom-right'. | [Badge Position](demo#position) |
+| badgePos | `BadgePositionType` | 'top-right' | Optional. Logo position'top-left' \|'top-right' \|'bottom-left' \|'bottom-right'. | [Badge Position](demo#position) |
 | offsetXY | `[number, number]` | -- |Optional. Indicates the logo position offset when there is a package. The format is [x,y], in px. This parameter is optional. x is the relative right offset (right: -x `px`), y is the relative top offset (top: y `px`). | [Custom](demo#custom) |
 | bgColor | `string` | -- | Optional. The badge color can be customized. In this case, the badge status color specified by status is invalid.| [Custom](demo#custom) |
 | textColor | `string` | -- | Optional. You can customize the logo text color. | [Custom](demo#custom) |
diff --git a/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss b/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss
@@ -79,7 +79,7 @@
   max-width: 200px;
 
   li {
-    padding: 0 16px;
+    padding: 0 12px;
     font-size: $devui-font-size;
     line-height: 36px;
     overflow: hidden;

diff --git a/devui/button/button.component.html b/devui/button/button.component.html
@@ -13,7 +13,7 @@
   (click)="onClick($event)"
   [ngClass]="{ 'd-btn-icon': !!icon && !hasContent() && bsStyle !== 'primary', 'd-btn-icon-wrap': !!icon }"
 >
-  <span *ngIf="!!icon" class="devui-icon-fix icon {{ icon }}" [ngClass]="{ 'clear-right-5': hasContent() }"></span>
+  <span *ngIf="!!icon" class="devui-icon-fix icon {{ icon }}" [ngClass]="{ 'clear-right-4': hasContent() }"></span>
   <!--
   --><span class="button-content" [class.devui-btn-more-text-omits]="width !== undefined" #buttonContent><ng-content></ng-content></span>
 </button>
diff --git a/devui/button/button.component.scss b/devui/button/button.component.scss
@@ -6,18 +6,18 @@
 @import '../style/core/animation';
 
 $devui-btn-loading-color: $devui-text;
-$devui-btn-xs-padding: 1px 5px;
+$devui-btn-xs-padding: 0 4px;
 $devui-btn-xs-height: 24px;
 $devui-btn-icon-xs-min-width: 24px;
 $devui-btn-xs-min-width: 48px;
-$devui-btn-sm-padding: 1px 15px;
+$devui-btn-sm-padding: 0 16px;
 $devui-btn-sm-min-width: 56px;
 $devui-btn-icon-sm-min-width: 24px;
 $devui-btn-sm-height: 24px;
 $devui-btn-min-width: 64px;
 $devui-btn-height: 28px;
-$devui-btn-padding: 3px 20px;
-$devui-btn-lg-padding: 5px 23px;
+$devui-btn-padding: 0 20px;
+$devui-btn-lg-padding: 0 24px;
 $devui-btn-lg-min-width: 72px;
 $devui-btn-icon-lg-min-width: 32px;
 $devui-btn-lg-height: 32px;
@@ -173,7 +173,7 @@ $devui-btn-pseudo-config: (
   border-width: 1px;
   border-color: transparent;
   background-color: transparent;
-  @each $type in text, text-dark, common, stress, primary, danger, left, right, xs, sm, lg {
+  @each $type in common, stress, primary, danger, left, right, xs, sm, lg, text, text-dark {
     &.devui-btn-#{$type} {
       @each $key, $value in map-get($devui-btn-normal-config, $type) {
         #{$key}: $value;
@@ -332,13 +332,13 @@ $devui-btn-pseudo-config: (
   }
 
   &.d-btn-icon {
-    padding: 7px 8px;
+    padding: 8px 8px;
     line-height: 1em;
     border: 1px solid transparent;
 
     &.devui-btn-xs,
     &.devui-btn-sm {
-      padding: 5px;
+      padding: 4px;
     }
 
     &.devui-btn-xs {
@@ -393,8 +393,8 @@ $devui-btn-pseudo-config: (
   position: relative;
 }
 
-.clear-right-5 {
-  margin-right: 5px;
+.clear-right-4 {
+  margin-right: 4px;
 }
 
 .devui-btn-more-text-omits {

diff --git a/devui/button/button.spec.ts b/devui/button/button.spec.ts
@@ -1,5 +1,5 @@
 import { Component, DebugElement } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ButtonModule } from 'ng-devui/button';
 import { LoadingComponent } from './../loading/loading.component';
@@ -44,7 +44,7 @@ class TestButtonAutoFocusComponent {
 
 describe('Button', () => {
   let fixture: ComponentFixture<any>;
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [ButtonModule],
       declarations: [TestButtonComponent, TestButtonAutoFocusComponent],

diff --git a/devui/button/demo/text/text.component.html b/devui/button/demo/text/text.component.html
@@ -1,3 +1,4 @@
+<d-button bsStyle="text" bsSize="lg">lgText</d-button>
 <d-button bsStyle="text" style="margin-right: 20px">Text</d-button>
 <d-button bsStyle="text-dark" style="margin-right: 20px">Text dark</d-button>
 <d-button bsStyle="text" [disabled]="true">Disabled</d-button>
diff --git a/devui/card/card.component.scss b/devui/card/card.component.scss
@@ -21,7 +21,7 @@ $card-content-font-size: $devui-font-size;
 .devui-card-title {
   display: block;
   font-size: $card-title-font-size;
-  font-weight: 600;
+  font-weight: bold;
   color: $devui-text;
 }
 

diff --git a/devui/carousel/carousel-item.component.spec.ts b/devui/carousel/carousel-item.component.spec.ts
@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { CarouselItemComponent } from './carousel-item.component';
 
 describe('CarouselItemComponent', () => {
   let component: CarouselItemComponent;
   let fixture: ComponentFixture<CarouselItemComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ CarouselItemComponent ]
     })

diff --git a/devui/carousel/carousel.component.spec.ts b/devui/carousel/carousel.component.spec.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CarouselComponent } from './carousel.component';
 import { CarouselModule } from './carousel.module';
@@ -38,7 +38,7 @@ describe('CarouselComponent', () => {
   let fixture: ComponentFixture<TestCarouselComponent>;
   let carouselElement: HTMLElement;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [CarouselModule],
       declarations: [ TestCarouselComponent ],