chore(release): release 17.0.0 (#346)

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

Hide file tree

Showing 174 changed files with 1,768 additions and 1,279 deletions.
diff --git a/devui/alert/alert-carousel-item.component.scss b/devui/alert/alert-carousel-item.component.scss
@@ -1,4 +1,5 @@
 :host {
-  display: block;
+  display: flex;
+  align-items: center;
   width: 100%;
 }
diff --git a/devui/alert/alert-carousel-item.component.ts b/devui/alert/alert-carousel-item.component.ts
@@ -1,9 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'd-alert-carousel-item',
   styleUrls: ['./alert-carousel-item.component.scss'],
   template: `<ng-content></ng-content>`,
   preserveWhitespaces: false,
 })
-export class AlertCarouselItemComponent {}
+export class AlertCarouselItemComponent {
+  constructor(public el: ElementRef) {}
+}
diff --git a/devui/alert/alert.component.html b/devui/alert/alert.component.html
@@ -1,4 +1,4 @@
-<div class="devui-alert devui-alert-{{ type }} {{ cssClass }}" *ngIf="!hide">
+<div class="devui-alert devui-alert-{{ type }} {{ cssClass }}" *ngIf="!hide" [style.alignItems]="carouselNum > 1 ? 'center' : 'flex-start'">
   <span class="devui-alert-icon" *ngIf="showIcon !== false && type !== 'simple'">
     <svg
       width="16px"
@@ -58,7 +58,7 @@
       </g>
     </svg>
   </span>
-  <div class="devui-alert-carousel-container">
+  <div class="devui-alert-carousel-container" [style.height]="carouselNum > 1 ? autoplayHeight : 'auto'">
     <div
       #carouselContainer
       class="devui-alert-carousel-box"
@@ -69,11 +69,15 @@
     </div>
   </div>
   <div class="devui-alert-operation-container">
-    <div *ngIf="carouselNum > 1" class="devui-alert-carousel-num">
-      <span>{{ currentIndex }}/{{ carouselNum }}</span>
-      <span class="devui-alert-carousel-button" (click)="next()">
+    <ng-container *ngIf="carouselNum > 1">
+      <div class="devui-alert-carousel-num">
+        <span>{{ currentIndex }}/{{ carouselNum }}</span>
+      </div>
+      <span class="devui-alert-carousel-button">
         <svg
+          (click)="next()"
           width="12px"
+          devui-alert-operation-container
           height="12px"
           viewBox="0 0 16 16"
           version="1.1"
@@ -88,7 +92,7 @@
           </g>
         </svg>
       </span>
-    </div>
+    </ng-container>
     <ng-template [ngTemplateOutlet]="operationTemplate" [ngTemplateOutletContext]="{ close: close }"> </ng-template>
     <div class="devui-close" (click)="close()" *ngIf="closeable">
       <svg

diff --git a/devui/alert/alert.component.scss b/devui/alert/alert.component.scss
@@ -5,6 +5,10 @@
 
 :host {
   display: block;
+
+  ::ng-deep .devui-alert-carousel-container .devui-alert-carousel-box > d-alert-carousel-item {
+    min-height: var(--devui-alert-carousel-item-height, 24px);
+  }
 }
 
 .devui-alert {
@@ -18,7 +22,6 @@
   word-wrap: break-word;
   display: flex;
   flex-wrap: nowrap;
-  align-items: center;
 
   &.devui-alert-success {
     background-color: $devui-success-bg;
@@ -143,9 +146,8 @@
   }
 
   .devui-alert-carousel-container {
-    flex-grow: 1;
-    flex-shrink: 0;
-    height: 24px;
+    flex: 1;
+    min-height: 24px;
     overflow: hidden;
 
     .devui-alert-carousel-box {
@@ -161,15 +163,19 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    height: 24px;
-    min-width: 200px;
+    min-height: 24px;
+    width: fit-content;
+
+    &:empty {
+      display: none;
+    }
 
     .devui-alert-carousel-num {
       padding-right: 8px;
     }
 
     .devui-alert-carousel-button {
-      margin-left: 8px;
+      margin-right: 8px;
       display: inline-flex;
       align-items: center;
       justify-content: center;

diff --git a/devui/alert/alert.component.ts b/devui/alert/alert.component.ts
@@ -12,7 +12,7 @@ import {
   Renderer2,
   SimpleChanges,
   TemplateRef,
-  ViewChild
+  ViewChild,
 } from '@angular/core';
 import { AlertCarouselItemComponent } from './alert-carousel-item.component';
 import { AlertType } from './alert.types';
@@ -41,11 +41,13 @@ export class AlertComponent implements OnChanges, OnDestroy, AfterViewInit {
   @ViewChild('carouselContainer') box: ElementRef<any>;
   @ContentChildren(AlertCarouselItemComponent) carouselItems: QueryList<AlertCarouselItemComponent>;
   hide = false;
+  autoplayHeight: string;
   carouselNum: number;
   currentIndex = 1;
   scheduledId: any;
+  SINGLE_LINE_HEIGHT = '24px';
 
-  constructor(private renderer: Renderer2) {}
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
 
   ngOnChanges(changes: SimpleChanges) {
     const { autoplay, autoplaySpeed, transitionSpeed } = changes;
@@ -70,7 +72,16 @@ export class AlertComponent implements OnChanges, OnDestroy, AfterViewInit {
 
   renderCarouselItem() {
     this.carouselNum = this.carouselItems.length;
-    if (this.carouselNum) {
+    if (this.carouselNum > 1) {
+      if (!this.autoplayHeight) {
+        const itemHeights = this.carouselItems.map((item) => {
+          const rect = item?.el.nativeElement.getBoundingClientRect();
+          return rect?.height || 0;
+        });
+        const maxHeight = Math.max(...itemHeights);
+        this.autoplayHeight = maxHeight ? `${maxHeight}px` : this.SINGLE_LINE_HEIGHT;
+      }
+      this.el.nativeElement.style.setProperty('--devui-alert-carousel-item-height', this.autoplayHeight);
       this.renderer.setStyle(this.box.nativeElement, 'transition', `top ${this.transitionSpeed}ms ease`);
       this.autoScheduleTransition();
     }
@@ -105,6 +116,7 @@ export class AlertComponent implements OnChanges, OnDestroy, AfterViewInit {
   }
 
   close = (): void => {
+    this.clearScheduledTransition();
     this.closeEvent.emit(this);
     this.hide = true;
   };

diff --git a/devui/alert/demo/carousel/carousel.component.ts b/devui/alert/demo/carousel/carousel.component.ts
@@ -15,7 +15,7 @@ export class CarouselComponent {
   data = [
     {
       id: 1,
-      content: 'info 1',
+      content: `info 1`,
     },
     {
       id: 2,

diff --git a/devui/alert/doc/api-cn.md b/devui/alert/doc/api-cn.md
@@ -16,17 +16,17 @@ import { AlertModule } from 'ng-devui/alert';
 
 ### d-alert 参数
 
-| 参数              | 类型                      | 默认   | 说明                                            | 跳转 Demo                           | 全局配置项 |
-| ----------------- | ------------------------- | ------ | ----------------------------------------------- | ----------------------------------- | ---------- |
-| type              | [`AlertType`](#alerttype) | 'info' | 必选，指定警告提示的样式                        | [基本用法](demo#basic-usage)        |
-| cssClass          | `string`                  | --     | 可选，自定义 class 名                           |
-| closeable         | `boolean`                 | true   | 可选，默认显示关闭按钮                          | [基本用法](demo#tips-to-close)      |
-| dismissTime       | `number`                  | --     | 可选，自动关闭 alert 的延迟时间（`ms`）         |
-| showIcon          | `boolean`                 | true   | 可选，是否使用默认的类型图标                    | [不使用默认图标](demo#without-icon) |
-| autoplay          | `boolean`                 | false  | 可选，是否自动轮播                              | [自动轮播](demo#carousel)           |
-| autoplaySpeed     | `number`                  | 3000   | 可选，配合`autoplay`使用，自动轮播速度，单位 ms | [自动轮播](demo#carousel)           |
-| transitionSpeed   | `number`                  | 500    | 可选，内容切换动画速度，单位 ms                 | [自动轮播](demo#carousel)           |
-| operationTemplate | `TemplateRef<any>`        | --     | 可选，自定义操作区内容模板                      | [自动轮播](demo#carousel)           |
+| 参数              | 类型                      | 默认   | 说明                                                                         | 跳转 Demo                           | 全局配置项 |
+| ----------------- | ------------------------- | ------ | ---------------------------------------------------------------------------- | ----------------------------------- | ---------- |
+| type              | [`AlertType`](#alerttype) | 'info' | 必选，指定警告提示的样式                                                     | [基本用法](demo#basic-usage)        |
+| cssClass          | `string`                  | --     | 可选，自定义 class 名                                                        |
+| closeable         | `boolean`                 | true   | 可选，默认显示关闭按钮                                                       | [基本用法](demo#tips-to-close)      |
+| dismissTime       | `number`                  | --     | 可选，自动关闭 alert 的延迟时间，单位（`ms`）                                |
+| showIcon          | `boolean`                 | true   | 可选，是否使用默认的类型图标                                                 | [不使用默认图标](demo#without-icon) |
+| autoplay          | `boolean`                 | false  | 可选，是否自动轮播                                                           | [自动轮播](demo#carousel)           |
+| autoplaySpeed     | `number`                  | 3000   | 可选，配合`autoplay`使用，自动轮播速度，单位 ms                              | [自动轮播](demo#carousel)           |
+| transitionSpeed   | `number`                  | 500    | 可选，内容切换动画速度，单位（`ms`）                                         | [自动轮播](demo#carousel)           |
+| operationTemplate | `TemplateRef<any>`        | --     | 可选，自定义操作区内容模板                                                   | [自动轮播](demo#carousel)           |
 
 ### d-alert 事件
 

diff --git a/devui/alert/doc/api-en.md b/devui/alert/doc/api-en.md
@@ -16,17 +16,17 @@ In the page:
 
 ### d-alert Parameter
 
-| Attributes        | Type                      | Default | Description                                                                             | Jump to Demo                      | Global Config |
-| ----------------- | ------------------------- | ------- | --------------------------------------------------------------------------------------- | --------------------------------- | ------------- |
-| type              | [`AlertType`](#alerttype) | 'info'  | Required. Specify the style of the warning prompt.                                      | [Basic Usage](demo#basic-usage)   |
-| cssClass          | `string`                  | --      | Optional. Customize className.                                                          |
-| closeable         | `boolean`                 | true    | Optional. The close button is displayed by default.                                     | [Basic Usage](demo#tips-to-close) |
-| dismissTime       | `number`                  | --      | Optional. Toggle off the delay time of Alert (`ms`).                                    |
-| showIcon          | `boolean`                 | true    | Optional. Whether to use the default type icon.                                         | [Without Icon](demo#without-icon) |
-| autoplay          | `boolean`                 | false   | Optional. Indicating whether to enable automatic NVOD.                                  | [Carousel](demo#carousel)         |
-| autoplaySpeed     | `number`                  | 3000    | Optional. Automatic NVOD speed, in ms. This parameter is used together with `autoplay'. | [Carousel](demo#carousel)         |
-| transitionSpeed   | `number`                  | 500     | Optional. Content switch animation interval, in ms.                                     | [Carousel](demo#carousel)         |
-| operationTemplate | `TemplateRef<any>`        | --      | Optional. Customized operation area template.                                           | [Carousel](demo#carousel)         |
+| Attributes        | Type                      | Default | Description                                                                                                                                             | Jump to Demo                      | Global Config |
+| ----------------- | ------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------- |
+| type              | [`AlertType`](#alerttype) | 'info'  | Required. Specify the style of the warning prompt.                                                                                                      | [Basic Usage](demo#basic-usage)   |
+| cssClass          | `string`                  | --      | Optional. Customize className.                                                                                                                          |
+| closeable         | `boolean`                 | true    | Optional. The close button is displayed by default.                                                                                                     | [Basic Usage](demo#tips-to-close) |
+| dismissTime       | `number`                  | --      | Optional. Toggle off the delay time of Alert, in ms.                                                                                                    |
+| showIcon          | `boolean`                 | true    | Optional. Whether to use the default type icon.                                                                                                         | [Without Icon](demo#without-icon) |
+| autoplay          | `boolean`                 | false   | Optional. Indicating whether to enable automatic NVOD.                                                                                                  | [Carousel](demo#carousel)         |
+| autoplaySpeed     | `number`                  | 3000    | Optional. Automatic NVOD speed, in ms. This parameter is used together with `autoplay`.                                                                 | [Carousel](demo#carousel)         |
+| transitionSpeed   | `number`                  | 500     | Optional. Content switch animation interval, in ms.                                                                                                     | [Carousel](demo#carousel)         |
+| operationTemplate | `TemplateRef<any>`        | --      | Optional. Customized operation area template.                                                                                                           | [Carousel](demo#carousel)         |
 
 ### d-alert Event
 

diff --git a/devui/anchor/demo/scroll-target/scroll-target.component.html b/devui/anchor/demo/scroll-target/scroll-target.component.html
@@ -1,4 +1,4 @@
-<div class="container" #scrollTarget>
+<div class="container devui-scrollbar" #scrollTarget>
   <div
     dAnchorBox
     [scrollTarget]="scrollTarget"

diff --git a/devui/avatar/avatar.component.ts b/devui/avatar/avatar.component.ts
@@ -11,8 +11,8 @@ export class AvatarComponent implements OnChanges, OnInit {
   isNobody = true;
   isErrorImg = false;
   /**
-  * 自定义头像显示文字
-  */
+   * 自定义头像显示文字
+   */
   @Input() gender: 'male' | 'female' | string;
   /**
    * avatar宽度
@@ -22,45 +22,46 @@ export class AvatarComponent implements OnChanges, OnInit {
    * avatar高度
    */
   @Input() height = 36;
-
   /**
    * 是否是圆形n
    */
   @Input() isRound = true;
-
   /**
    * 是否是图片
    */
   @Input() imgSrc: string;
   /**
- * 用户名称
- */
+   * 用户名称
+   */
   @Input() name: string;
   /**
    * 自定义头像显示文字
    */
   @Input() customText: string;
-
+  /**
+   * 头像中间文字最小尺寸
+   */
+  MINIMUM_FONT_SIZE = 12;
   fontSize = 12;
   code: number;
   nameDisplay: string;
-  constructor() { }
+
   ngOnInit(): void {
     this.calcValues(this.customText ? this.customText : this.name);
   }
+
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['width'] && !changes['width'].isFirstChange() ||
-      changes['customText'] && !changes['customText'].isFirstChange() ||
-      changes['gender'] && !changes['gender'].isFirstChange() ||
-      changes['height'] && !changes['height'].isFirstChange() ||
-      changes['name'] && !changes['name'].isFirstChange()
-    ) {
+    const { width, customText, gender, height, name } = changes;
+    const result = [width, customText, gender, height, name].map((item) => item && !item.isFirstChange());
+    if (result.includes(true)) {
       this.calcValues(this.customText ? this.customText : this.name);
     }
   }
+
   showErrAvatar() {
     this.isErrorImg = true;
   }
+
   calcValues(nameInput) {
     const userName = nameInput;
     const minNum = Math.min(this.width, this.height);
@@ -74,8 +75,10 @@ export class AvatarComponent implements OnChanges, OnInit {
     } else {
       this.isNobody = true;
     }
-    this.fontSize = minNum / 4 + 3;
+    const size = minNum / 4 + 3;
+    this.fontSize = size < this.MINIMUM_FONT_SIZE ? this.MINIMUM_FONT_SIZE : size;
   }
+
   setDisplayName(name, width) {
     if (this.customText) {
       this.nameDisplay = this.customText;
@@ -109,6 +112,7 @@ export class AvatarComponent implements OnChanges, OnInit {
     }
     this.getBackgroundColor(name.substr(0, 1));
   }
+
   getBackgroundColor(char) {
     if (this.gender) {
       if (this.gender.toLowerCase() === 'male') {

diff --git a/devui/back-top/demo/scroll-container/scroll-container.component.html b/devui/back-top/demo/scroll-container/scroll-container.component.html
@@ -1,5 +1,5 @@
 <div class="devui-scroll-container">
-  <ul class="devui-scroll-content">
+  <ul class="devui-scroll-content devui-scrollbar">
     <li class="item" *ngFor="let item of list; let index = index">
       {{ index + 1 + '. ' + item }}
     </li>

diff --git a/devui/breadcrumb/demo/custom/custom.component.html b/devui/breadcrumb/demo/custom/custom.component.html
@@ -10,17 +10,17 @@ <h4>Use Custom Template</h4>
 <ng-template #menuTpl>
   <ul class="breadcrumb-dropdown-menu">
     <li>
-      <span class="icon-arrow-right"></span>
+      <span class="icon-arrow-right-o"></span>
       <a href="/components/zh-cn/anchor/demo">Anchor</a>
     </li>
     <li>
-      <span class="icon-arrow-right"></span>
+      <span class="icon-arrow-right-o"></span>
       <a href="/components/zh-cn/button/demo">Button</a>
     </li>
   </ul>
 </ng-template>
 <ng-template #separatorIcon>
-  <span class="icon-arrow-right"></span>
+  <span class="icon-arrow-right-o"></span>
 </ng-template>
 
 <h4>Use Custom Dropdown Behavior</h4>

diff --git a/devui/button/button.component.scss b/devui/button/button.component.scss
@@ -186,7 +186,7 @@ $devui-btn-pseudo-config: (
     &:disabled {
       color: $devui-light-text;
       background: $devui-primary-disabled;
-      border: none;
+      border-color: transparent;
     }
   }
 
@@ -247,7 +247,7 @@ $devui-btn-pseudo-config: (
     &.devui-btn-danger {
       border-color: $devui-danger;
       color: $devui-danger;
-      background-color: $devui-danger;
+      background-color: $devui-block;
     }
   }
 

diff --git a/devui/button/button.component.ts b/devui/button/button.component.ts
@@ -26,7 +26,7 @@ export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
   styleUrls: ['./button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
-  })
+})
 export class ButtonComponent implements AfterContentChecked {
   @Input() id: string;
   @Input() type: IButtonType = 'button';
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ export class CarouselComponent { @@
       data = [
         {
           id: 1,
-          content: 'info 1',
+          content: `info 1`,
         },
         {
           id: 2,
@@ Expand Down @@