chore(release): release 17.1.0 (#351)

Co-authored-by: huaweidevcloud <[email protected]>
DevCloudFE · May 22, 2024 · d0f65c4 · d0f65c4
1 parent 35bf8d8
commit d0f65c4
Show file tree

Hide file tree

Showing 150 changed files with 1,611 additions and 849 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home).
 
 ## Angular Support
 
-Now supports Angular <font color=red>`^16.0.0`</font>
+Now supports Angular <font color=red>`^17.0.0`</font>
 
 ## Getting Started
 

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

diff --git a/devui/auto-complete/demo/disabled/auto-complete-demo-disable.component.html b/devui/auto-complete/demo/disabled/auto-complete-demo-disable.component.html
@@ -32,6 +32,7 @@
         [disabledKey]="'disable'"
         [source]="languages1"
         [formatter]="formatter"
+        [valueParser]="valueParser"
         dAutoComplete
         [tipsText]="'search result'"
       />

diff --git a/devui/auto-complete/demo/disabled/auto-complete-demo-disable.component.ts b/devui/auto-complete/demo/disabled/auto-complete-demo-disable.component.ts
@@ -47,4 +47,8 @@ export class AutoDemoDisableComponent {
   formatter(item) {
     return item.name;
   }
+
+  valueParser(item) {
+    return item.name;
+  }
 }
diff --git a/devui/avatar/avatar.component.ts b/devui/avatar/avatar.component.ts
@@ -108,7 +108,11 @@ export class AvatarComponent implements OnChanges, OnInit {
       }
     }
     if (width < 30) {
-      this.nameDisplay = this.name.substr(0, 1).toUpperCase();
+      if (/^[\u4e00-\u9fa5]/.test(name)) {
+        this.nameDisplay = name.substr(name.length - 1, 1);
+      } else {
+        this.nameDisplay = this.name.substr(0, 1).toUpperCase();
+      }
     }
     this.getBackgroundColor(name.substr(0, 1));
   }

diff --git a/devui/avatar/avatar.spec.ts b/devui/avatar/avatar.spec.ts
@@ -51,7 +51,7 @@ describe('avatar basic', () => {
         component.comp.setDisplayName(component.name, component.width);
         fixture.detectChanges();
 
-        expect(nativeEl.textContent).toBe(component.name.substr(0, 1));
+        expect(nativeEl.textContent).toBe(component.name.substr(component.name.length - 1, 1));
       });
 
       it('one word name pick first two character', () => {

diff --git a/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.html b/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.html
@@ -11,17 +11,16 @@
     <ng-template [ngTemplateOutlet]="breadcrumbContentTpl"></ng-template>
     <i class="devui-breadcrumb-down-icon">
       <svg
-        width="1em"
-        height="1em"
+        width="16px"
+        height="16px"
         viewBox="0 0 16 16"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
       >
         <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
           <path
-            d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
-            fill-rule="nonzero"
+            d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
           ></path>
         </g>
       </svg>

diff --git a/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss b/devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss
@@ -2,8 +2,12 @@
 @import '../../style/core/_font';
 @import '../../style/core/animation';
 
+:host {
+  display: inline-flex;
+}
+
 .devui-breadcrumb-font-style {
-  font-size: $devui-font-size-sm;
+  font-size: $devui-font-size;
   color: $devui-aide-text;
 }
 
@@ -136,6 +140,11 @@ d-search {
   ::ng-deep a,
   ::ng-deep span {
     transition: color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 440px;
   }
 }
 

diff --git a/devui/breadcrumb/breadcrumb.component.scss b/devui/breadcrumb/breadcrumb.component.scss
@@ -2,7 +2,7 @@
 
 :host {
   display: flex;
-  -webkit-align-items: center;
+  align-items: center;
   min-height: 28px;
 
   ::ng-deep d-breadcrumb-item:last-child {

diff --git a/devui/breadcrumb/demo/custom/custom.component.html b/devui/breadcrumb/demo/custom/custom.component.html
@@ -31,7 +31,7 @@ <h4>Use Custom Dropdown Behavior</h4>
         <span>{{ item.label }}</span>
         <i
           *ngIf="item.showMenu"
-          class="icon icon-select-arrow devui-icon-rotate"
+          class="icon icon-chevron-down-2 devui-icon-rotate"
           [style.transform]="dropdownInstance?.isOpen ? 'rotate(180deg)' : 'rotate(0deg)'"
         ></i>
       </a>

diff --git a/devui/breadcrumb/demo/custom/custom.component.scss b/devui/breadcrumb/demo/custom/custom.component.scss
@@ -24,3 +24,8 @@
     text-decoration: none;
   }
 }
+
+.icon-chevron-down-2 {
+  font-size: 12px;
+  margin-left: 4px;
+}
diff --git a/devui/button/button.component.scss b/devui/button/button.component.scss
@@ -24,6 +24,9 @@ $devui-btn-sm-font-size: $devui-font-size-sm;
 $devui-btn-font-size: $devui-font-size-md;
 $devui-btn-lg-font-size: $devui-font-size-lg;
 $devui-btn-line-height: $devui-line-height-base;
+$devui-btn-border-radius: var(--devui-btn-border-radius, $devui-border-radius);
+$devui-btn-primary-bg-disabled: var(--devui-btn-primary-bg-disabled, $devui-primary-disabled);
+$devui-btn-primary-text-disabled: var(--devui-btn-primary-text-disabled, $devui-light-text);
 
 $devui-btn-normal-config: (
   text: (
@@ -148,7 +151,7 @@ $devui-btn-pseudo-config: (
   font-size: $devui-btn-font-size;
   height: $devui-btn-height;
   line-height: $devui-btn-line-height;
-  border-radius: $devui-border-radius;
+  border-radius: $devui-btn-border-radius;
   border-width: 1px;
   border-color: transparent;
   background-color: transparent;
@@ -176,25 +179,25 @@ $devui-btn-pseudo-config: (
 
   &.devui-btn-common {
     &:disabled {
-      color: $devui-disabled-text;
-      background: $devui-disabled-bg;
+      color: var(--devui-btn-common-text-disabled, $devui-disabled-text);
+      background: var(--devui-btn-common-bg-disabled, $devui-disabled-bg);
       border-color: var(--devui-btn-common-border-disabled, $devui-disabled-line);
     }
   }
 
   &.devui-btn-primary {
     &:disabled {
-      color: $devui-light-text;
-      background: $devui-primary-disabled;
+      color: $devui-btn-primary-text-disabled;
+      background: $devui-btn-primary-bg-disabled;
       border-color: transparent;
     }
   }
 
   &.devui-btn-danger {
     &:disabled {
-      color: $devui-disabled-text;
-      background: $devui-disabled-bg;
-      border: 1px solid $devui-disabled-line;
+      color: $devui-light-text;
+      background: $devui-red-20;
+      border: 1px solid $devui-red-20;
     }
   }
 

diff --git a/devui/button/demo/groups/groups.component.html b/devui/button/demo/groups/groups.component.html
@@ -1,12 +1,12 @@
 <div class="btn-wrapper">
   <d-button-group>
     <d-button bsStyle="primary">按钮名称</d-button>
-    <d-button icon="icon-select-arrow" bsStyle="primary"></d-button>
+    <d-button icon="icon-chevron-down-2" bsStyle="primary"></d-button>
   </d-button-group>
 
   <div dDropDown [style.margin-left.px]="8">
     <d-button-group>
-      <d-button bsStyle="common" dDropDownToggle>近期发布<span class="icon-select-arrow"></span></d-button>
+      <d-button bsStyle="common" dDropDownToggle>近期发布<span class="icon-chevron-down-2"></span></d-button>
       <d-button icon="icon icon-setting" bsStyle="common"></d-button>
     </d-button-group>
     <ul dDropDownMenu class="devui-dropdown-menu" role="menu">

diff --git a/devui/button/demo/groups/groups.component.scss b/devui/button/demo/groups/groups.component.scss
@@ -4,8 +4,8 @@
   display: flex;
 }
 
-.icon-select-arrow {
-  margin-left: 8px;
+.icon-chevron-down-2 {
+  margin-left: 4px;
 }
 
 // 为兼容老版本common类型button无边框

diff --git a/devui/carousel/carousel.component.spec.ts b/devui/carousel/carousel.component.spec.ts
@@ -17,7 +17,7 @@ import { CarouselModule } from './carousel.module';
     d-carousel-item {
       text-align: center;
       line-height: 200px;
-      background: var(--devui-global-bg, #f3f6f8);
+      background: var(--devui-global-bg, #f5f5f5);
     }
     `
   ]

diff --git a/devui/cascader/cascader.component.html b/devui/cascader/cascader.component.html
@@ -55,17 +55,16 @@
       <div class="devui-drop-icon-wrapper" [ngClass]="{ 'dropdown-show-clear': allowClear }">
         <span class="devui-drop-icon" [ngClass]="{ 'devui-drop-icon-animation': showAnimation }">
           <svg
-            width="1em"
-            height="1em"
+            width="16px"
+            height="16px"
             viewBox="0 0 16 16"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
           >
             <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
               <path
-                d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
-                fill-rule="nonzero"
+                d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
               ></path>
             </g>
           </svg>
@@ -92,17 +91,16 @@
     <div class="devui-single-drop-icon-wrapper" *ngIf="!multiple" [ngClass]="{ 'dropdown-show-clear': allowClear }">
       <span class="devui-drop-icon" [ngClass]="{ 'devui-drop-icon-animation': showAnimation }">
         <svg
-          width="1em"
-          height="1em"
+          width="16px"
+          height="16px"
           viewBox="0 0 16 16"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
         >
           <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <path
-              d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
-              fill-rule="nonzero"
+              d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
             ></path>
           </g>
         </svg>
@@ -231,17 +229,16 @@
       <div class="devui-drop-icon-wrapper" [ngClass]="{ 'dropdown-show-clear': allowClear }">
         <span class="devui-drop-icon" [ngClass]="{ 'devui-drop-icon-animation': showAnimation }">
           <svg
-            width="1em"
-            height="1em"
+            width="16px"
+            height="16px"
             viewBox="0 0 16 16"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
           >
             <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
               <path
-                d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
-                fill-rule="nonzero"
+                d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
               ></path>
             </g>
           </svg>
@@ -268,17 +265,16 @@
     <div class="devui-single-drop-icon-wrapper" *ngIf="!multiple" [ngClass]="{ 'dropdown-show-clear': allowClear }">
       <span class="devui-drop-icon" [ngClass]="{ 'devui-drop-icon-animation': showAnimation }">
         <svg
-          width="1em"
-          height="1em"
+          width="16px"
+          height="16px"
           viewBox="0 0 16 16"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
         >
           <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <path
-              d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
-              fill-rule="nonzero"
+              d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
             ></path>
           </g>
         </svg>

diff --git a/devui/cascader/cascader.component.scss b/devui/cascader/cascader.component.scss
@@ -34,7 +34,7 @@
 }
 
 .devui-input {
-  padding-right: 16px;
+  padding-right: 36px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -95,10 +95,10 @@
 }
 
 .devui-drop-icon {
-  width: 1em;
-  height: 1em;
+  width: 16px;
+  height: 16px;
   display: inline-block;
-  line-height: 1em;
+  line-height: 16px;
   vertical-align: middle;
 
   svg path {
@@ -142,9 +142,14 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: 4px;
-  width: 1em;
+  right: 12px;
+  width: 16px;
   display: flex;
+
+  .devui-cascader-close-icon {
+    position: relative;
+    left: 2px;
+  }
 }
 
 :host:not(.devui-glow-style) .devui-tags-input-wrapper:hover {
@@ -172,8 +177,8 @@
   }
 
   .devui-drop-icon-wrapper {
-    flex: 0 0 20px;
-    padding: 0;
+    flex: 0 0 40px;
+    padding: 0 12px;
     display: inline-flex;
     align-items: center;
     justify-content: center;