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';