diff --git a/devui/alert/alert-carousel-item.component.scss b/devui/alert/alert-carousel-item.component.scss index fe8bbc5f..1d02fc40 100644 --- 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 index 71946465..908e145b 100644 --- a/devui/alert/alert-carousel-item.component.ts +++ b/devui/alert/alert-carousel-item.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'd-alert-carousel-item', @@ -6,4 +6,6 @@ import { Component } from '@angular/core'; template: ``, 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 index e9a121a2..d471bd7a 100755 --- a/devui/alert/alert.component.html +++ b/devui/alert/alert.component.html @@ -1,4 +1,4 @@ -
+
-
+
-
- {{ currentIndex }}/{{ carouselNum }} - + +
+ {{ currentIndex }}/{{ carouselNum }} +
+ -
+
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 index 5d5f032b..4f7aaa27 100755 --- 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; @ContentChildren(AlertCarouselItemComponent) carouselItems: QueryList; 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 index bd01a3fe..da3d7318 100644 --- 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 index b5bc2ca6..00ad85f0 100644 --- 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` | -- | 可选，自定义操作区内容模板 | [自动轮播](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` | -- | 可选，自定义操作区内容模板 | [自动轮播](demo#carousel) | ### d-alert 事件 diff --git a/devui/alert/doc/api-en.md b/devui/alert/doc/api-en.md index 881c1cb5..ad0a4ad4 100644 --- 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` | -- | 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` | -- | 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 index 15d86b72..0b41a3db 100644 --- a/devui/anchor/demo/scroll-target/scroll-target.component.html +++ b/devui/anchor/demo/scroll-target/scroll-target.component.html @@ -1,4 +1,4 @@ -
+
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 index 82d7c2d3..e0f394aa 100644 --- 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 @@
-
    +
    • {{ index + 1 + '. ' + item }}
      • diff --git a/devui/breadcrumb/demo/custom/custom.component.html b/devui/breadcrumb/demo/custom/custom.component.html index 569b6712..22a9b80b 100644 --- a/devui/breadcrumb/demo/custom/custom.component.html +++ b/devui/breadcrumb/demo/custom/custom.component.html @@ -10,17 +10,17 @@

      Use Custom Template

      - +

      Use Custom Dropdown Behavior

      diff --git a/devui/button/button.component.scss b/devui/button/button.component.scss index 11e28f6a..1bc16225 100755 --- 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 index f753867c..23a5cc3c 100755 --- 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'; diff --git a/devui/cascader/cascader.component.html b/devui/cascader/cascader.component.html index 813b9dc7..306dee56 100644 --- a/devui/cascader/cascader.component.html +++ b/devui/cascader/cascader.component.html @@ -31,7 +31,7 @@ (ngModelChange)="valueChanges($event)" />
      -
      +