chore(release): release 12.0.0 (#132)

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>`^11.0.0`</font>
+Now supports Angular <font color=red>`^12.0.0`</font>
 
 ## Getting Started
 

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

@@ -27,8 +27,8 @@
         </div>  
         <div *ngIf="showAvatar" class="header-avatar">
           <d-avatar
-            [width]="'40'"
-            [height]="'40'"
+            [width]="40"
+            [height]="40"
             [imgSrc]="userAvatar"
           ></d-avatar>
         </div>

devui/accordion/accordion.component.scss

@@ -30,7 +30,7 @@
   }
 
   & > .devui-accordion-list {
-    padding: 10px 0;
+    padding: 8px 0;
   }
 
   .devui-over-flow-ellipsis {
@@ -50,7 +50,7 @@
   display: block;
   height: 40px;
   width: 100%;
-  padding: 0 10px 0 20px;
+  padding: 0 12px 0 20px;
   font-weight: 400;
   line-height: 40px;
   color: $devui-text-weak;
@@ -103,7 +103,7 @@
     padding: 0;
 
     & > a {
-      padding: 0 10px 0 20px;
+      padding: 0 12px 0 20px;
     }
   }
 }
@@ -126,7 +126,7 @@
     width: 16px;
     height: 16px;
     line-height: 16px;
-    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-smooth;
+    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
 
     & > svg {
       width: 16px;
@@ -162,7 +162,7 @@
 
 /* 可展开的菜单 */
 :host ::ng-deep .devui-accordion-menu-item > .devui-accordion-item-title {
-  padding-right: 30px;
+  padding-right: 28px;
 
   &.active:not(.open) {
     color: $devui-brand-active;
@@ -214,12 +214,12 @@
 
 :host ::ng-deep .devui-accordion-show-animate .devui-accordion-item-title {
   transition:
-    font-weight $devui-animation-duration-fast $devui-animation-ease-in-smooth,
-    background-color $devui-animation-duration-fast $devui-animation-ease-in-smooth;
+    font-weight $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
+    background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth;
 
   .devui-accordion-splitter::before {
     transform: scaleY(0);
-    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-smooth;
+    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
   }
 
   &.devui-router-active,

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

@@ -5,7 +5,7 @@
 .my-menu {
   min-height: 60px;
   line-height: 40px;
-  padding: 10px;
+  padding: 12px;
 }
 
 @media (max-width: 500px) {

devui/accordion/demo/template/template.component.scss

@@ -8,21 +8,19 @@
   display: inline-block;
   width: 16px;
   height: 16px;
-  border-radius: (16px/2);
+  border-radius: 8px;
   font-size: $devui-font-size;
-  line-height: 12px;
-  padding: 2px;
+  line-height: 16px;
   color: $devui-light-text;
   text-align: center;
   background: $devui-brand;
-  margin-top: -2px;
   font-weight: 400;
 }
 
 .loading {
   position: relative;
   line-height: 40px;
-  padding-left: 66px;
+  padding-left: 64px;
 }
 
 .circle-spinner {

devui/alert/alert.component.scss

@@ -2,7 +2,7 @@
 @import '../style/theme/color';
 @import '../style/theme/shadow';
 @import '../style/theme/corner';
-@import '../style/core/_font';
+@import '../style/theme/_font';
 
 :host {
   display: block;
@@ -12,8 +12,8 @@
   color: $devui-text;
   font-size: $devui-font-size;
   border: 1px solid transparent;
-  padding: 10px;
-  line-height: 20px;
+  padding: 8px;
+  line-height: 24px;
   border-radius: $devui-border-radius;
   padding-left: 16px;
   word-break: normal;

devui/anchor/demo/async/async.component.scss

@@ -2,7 +2,7 @@
 
 /* 序号 */
 .step-nav {
-  padding-top: 10px;
+  padding-top: 8px;
   width: 240px;
 }
 
@@ -41,7 +41,7 @@
   line-height: 26px;
   border-radius: 50%;
   background-color: $devui-base-bg;
-  margin-right: 18px;
+  margin-right: 20px;
   border: 2px solid $devui-dividing-line;
 }
 
@@ -75,7 +75,7 @@
 }
 
 .mycontent {
-  padding: 10px;
+  padding: 8px;
   margin-left: 240px;
 }
 

devui/anchor/demo/basic/basic.component.scss

@@ -2,7 +2,7 @@
 
 /* 序号 */
 .step-nav {
-  padding-top: 10px;
+  padding-top: 8px;
   width: 240px;
 }
 
@@ -41,7 +41,7 @@
   line-height: 26px;
   border-radius: 50%;
   background-color: $devui-base-bg;
-  margin-right: 18px;
+  margin-right: 20px;
   border: 2px solid $devui-dividing-line;
 }
 
@@ -75,7 +75,7 @@
 }
 
 .mycontent {
-  padding: 10px;
+  padding: 8px;
   margin-left: 240px;
 }
 

devui/anchor/demo/hash/hash.component.scss

@@ -2,7 +2,7 @@
 
 /* 序号 */
 .step-nav {
-  padding-top: 10px;
+  padding-top: 8px;
   width: 240px;
 }
 
@@ -40,7 +40,7 @@
   line-height: 26px;
   border-radius: 50%;
   background-color: $devui-base-bg;
-  margin-right: 18px;
+  margin-right: 20px;
   border: 2px solid $devui-dividing-line;
 }
 
@@ -74,7 +74,7 @@
 }
 
 .mycontent {
-  padding: 10px;
+  padding: 8px;
   margin-left: 240px;
 }
 

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

@@ -2,7 +2,7 @@
 
 /* 序号 */
 .step-nav {
-  padding-top: 10px;
+  padding-top: 8px;
   width: 240px;
 }
 
@@ -41,7 +41,7 @@
   line-height: 26px;
   border-radius: 50%;
   background-color: $devui-base-bg;
-  margin-right: 18px;
+  margin-right: 20px;
   border: 2px solid $devui-dividing-line;
 }
 
@@ -75,7 +75,7 @@
 }
 
 .mycontent {
-  padding: 10px;
+  padding: 8px;
   margin-left: 240px;
 }
 

devui/auto-complete/auto-complete-popup.component.html

@@ -46,7 +46,7 @@
           [title]="formatter(item)"
           [ngClass]="{
             selected: $index == activeIndex,
-            'devui-dropdown-bg': $index == activeIndex,
+            'devui-dropdown-bg': $index == hoverIndex,
             disabled: disabledKey && item[disabledKey]
           }"
           (click)="onSelect($event, item)"

devui/auto-complete/auto-complete-popup.component.scss

@@ -10,23 +10,29 @@
   cursor: pointer;
   display: block;
   width: 100%;
-  padding: 8px 10px;
+  padding: 8px 12px;
   clear: both;
   border: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 14px;
+}
 
-  &.selected:not(.disabled) {
-    color: $devui-brand-active;
+.devui-dropdown-menu {
+  .devui-dropdown-item:not(.disabled) {
+    &.selected {
+      color: $devui-list-item-active-text;
+      background-color: $devui-list-item-active-bg;
+    }
   }
 }
 
 .devui-no-result-template,
 .devui-is-searching-template {
   display: block;
   width: 100%;
-  padding: 8px 10px;
+  padding: 8px 12px;
   clear: both;
   border: 0;
   overflow: hidden;
@@ -35,6 +41,7 @@
   cursor: not-allowed;
   background-color: $devui-disabled-bg;
   color: $devui-disabled-text;
+  line-height: 14px;
 
   &:hover,
   &:active,
@@ -61,5 +68,5 @@ ul.devui-list-unstyled {
 
 .devui-popup-tips {
   color: $devui-text-weak; // TODO: Color-Question
-  padding: 3px 1em;
+  padding: 4px 12px;
 }

devui/auto-complete/auto-complete-popup.component.ts

@@ -38,6 +38,7 @@ export class AutoCompletePopupComponent implements ControlValueAccessor {
   @ViewChild('selectMenuElement') selectMenuElement: ElementRef;
   @ViewChild('dropdownUl') dropdownUl: ElementRef;
   activeIndex = 0;
+  hoverIndex = 0;
   showLoading = false;
   private value: any;
   labelMinHeight = 20; // position.top小于20px时候，表示光标在第一行
@@ -83,7 +84,8 @@ export class AutoCompletePopupComponent implements ControlValueAccessor {
   }
 
   selectCurrentItem(event) {
-    this.onSelect(event, this.source[this.activeIndex]);
+    this.activeIndex = this.hoverIndex;
+    this.onSelect(event, this.source[this.hoverIndex]);
   }
 
   onActiveIndexChange(index) {
@@ -92,12 +94,14 @@ export class AutoCompletePopupComponent implements ControlValueAccessor {
 
   reset() {
     this.activeIndex = 0;
+    this.hoverIndex = 0;
   }
 
-  scrollToActive(): void {
+  scrollToActive(index?): void {
     const that = this;
     setTimeout(() => {
-      const selectIndex = that.activeIndex;
+      const scrollIndex = index === undefined ? this.activeIndex : index;
+      const selectIndex = scrollIndex;
       const scrollPane: any = that.dropdownUl.nativeElement.children[selectIndex];
       if (scrollPane.scrollIntoViewIfNeeded) {
         scrollPane.scrollIntoViewIfNeeded(false);
@@ -113,25 +117,25 @@ export class AutoCompletePopupComponent implements ControlValueAccessor {
 
   next() {
     if (this.isOpen && this.source && this.source.length) {
-      if (this.activeIndex === this.source.length - 1) {
-        this.activeIndex = 0;
-        this.scrollToActive();
+      if (this.hoverIndex === this.source.length - 1) {
+        this.hoverIndex = 0;
+        this.scrollToActive(this.hoverIndex);
         return;
       }
-      this.activeIndex = this.activeIndex + 1;
-      this.scrollToActive();
+      this.hoverIndex = this.hoverIndex + 1;
+      this.scrollToActive(this.hoverIndex);
     }
   }
 
   prev() {
     if (this.isOpen && this.source && this.source.length) {
-      if (this.activeIndex === 0) {
-        this.activeIndex = this.source.length - 1;
-        this.scrollToActive();
+      if (this.hoverIndex === 0) {
+        this.hoverIndex = this.source.length - 1;
+        this.scrollToActive(this.hoverIndex);
         return;
       }
-      this.activeIndex = this.activeIndex - 1;
-      this.scrollToActive();
+      this.hoverIndex = this.hoverIndex - 1;
+      this.scrollToActive(this.hoverIndex);
     }
   }
 

devui/badge/badge.component.scss

@@ -38,10 +38,10 @@
     min-width: 16px;
     height: 16px;
     font-size: $devui-font-size;
-    line-height: 12px;
+    line-height: 16px;
     text-align: center;
-    padding: 2px 4px;
-    border-radius: (16px/2);
+    padding: 0 4px;
+    border-radius: 8px;
   }
 
   &-dot {
@@ -85,10 +85,10 @@
   min-width: 16px;
   height: 16px;
   font-size: $devui-font-size;
-  line-height: 12px;
+  line-height: 16px;
   text-align: center;
-  padding: 2px 4px;
-  border-radius: (16px/2);
+  padding: 0 4px;
+  border-radius: 8px;
   @include status-color;
 }