Skip to content

Commit 35bf8d8

Browse files
wangyajuhuaweidevcloud
wangyaju
and
huaweidevcloud
authored
chore(release): release 17.0.0 (#346)
Co-authored-by: huaweidevcloud <[email protected]>
1 parent 53591cf commit 35bf8d8

File tree

174 files changed

+1768
-1279
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

174 files changed

+1768
-1279
lines changed

‎devui/alert/alert-carousel-item.component.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
:host {
2-
display: block;
2+
display: flex;
3+
align-items: center;
34
width: 100%;
45
}

‎devui/alert/alert-carousel-item.component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ElementRef } from '@angular/core';
22

33
@Component({
44
selector: 'd-alert-carousel-item',
55
styleUrls: ['./alert-carousel-item.component.scss'],
66
template: `<ng-content></ng-content>`,
77
preserveWhitespaces: false,
88
})
9-
export class AlertCarouselItemComponent {}
9+
export class AlertCarouselItemComponent {
10+
constructor(public el: ElementRef) {}
11+
}

‎devui/alert/alert.component.html

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="devui-alert devui-alert-{{ type }} {{ cssClass }}" *ngIf="!hide">
1+
<div class="devui-alert devui-alert-{{ type }} {{ cssClass }}" *ngIf="!hide" [style.alignItems]="carouselNum > 1 ? 'center' : 'flex-start'">
22
<span class="devui-alert-icon" *ngIf="showIcon !== false && type !== 'simple'">
33
<svg
44
width="16px"
@@ -58,7 +58,7 @@
5858
</g>
5959
</svg>
6060
</span>
61-
<div class="devui-alert-carousel-container">
61+
<div class="devui-alert-carousel-container" [style.height]="carouselNum > 1 ? autoplayHeight : 'auto'">
6262
<div
6363
#carouselContainer
6464
class="devui-alert-carousel-box"
@@ -69,11 +69,15 @@
6969
</div>
7070
</div>
7171
<div class="devui-alert-operation-container">
72-
<div *ngIf="carouselNum > 1" class="devui-alert-carousel-num">
73-
<span>{{ currentIndex }}/{{ carouselNum }}</span>
74-
<span class="devui-alert-carousel-button" (click)="next()">
72+
<ng-container *ngIf="carouselNum > 1">
73+
<div class="devui-alert-carousel-num">
74+
<span>{{ currentIndex }}/{{ carouselNum }}</span>
75+
</div>
76+
<span class="devui-alert-carousel-button">
7577
<svg
78+
(click)="next()"
7679
width="12px"
80+
devui-alert-operation-container
7781
height="12px"
7882
viewBox="0 0 16 16"
7983
version="1.1"
@@ -88,7 +92,7 @@
8892
</g>
8993
</svg>
9094
</span>
91-
</div>
95+
</ng-container>
9296
<ng-template [ngTemplateOutlet]="operationTemplate" [ngTemplateOutletContext]="{ close: close }"> </ng-template>
9397
<div class="devui-close" (click)="close()" *ngIf="closeable">
9498
<svg

‎devui/alert/alert.component.scss

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55

66
:host {
77
display: block;
8+
9+
::ng-deep .devui-alert-carousel-container .devui-alert-carousel-box > d-alert-carousel-item {
10+
min-height: var(--devui-alert-carousel-item-height, 24px);
11+
}
812
}
913

1014
.devui-alert {
@@ -18,7 +22,6 @@
1822
word-wrap: break-word;
1923
display: flex;
2024
flex-wrap: nowrap;
21-
align-items: center;
2225

2326
&.devui-alert-success {
2427
background-color: $devui-success-bg;
@@ -143,9 +146,8 @@
143146
}
144147

145148
.devui-alert-carousel-container {
146-
flex-grow: 1;
147-
flex-shrink: 0;
148-
height: 24px;
149+
flex: 1;
150+
min-height: 24px;
149151
overflow: hidden;
150152

151153
.devui-alert-carousel-box {
@@ -161,15 +163,19 @@
161163
display: flex;
162164
align-items: center;
163165
justify-content: flex-end;
164-
height: 24px;
165-
min-width: 200px;
166+
min-height: 24px;
167+
width: fit-content;
168+
169+
&:empty {
170+
display: none;
171+
}
166172

167173
.devui-alert-carousel-num {
168174
padding-right: 8px;
169175
}
170176

171177
.devui-alert-carousel-button {
172-
margin-left: 8px;
178+
margin-right: 8px;
173179
display: inline-flex;
174180
align-items: center;
175181
justify-content: center;

‎devui/alert/alert.component.ts

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
Renderer2,
1313
SimpleChanges,
1414
TemplateRef,
15-
ViewChild
15+
ViewChild,
1616
} from '@angular/core';
1717
import { AlertCarouselItemComponent } from './alert-carousel-item.component';
1818
import { AlertType } from './alert.types';
@@ -41,11 +41,13 @@ export class AlertComponent implements OnChanges, OnDestroy, AfterViewInit {
4141
@ViewChild('carouselContainer') box: ElementRef<any>;
4242
@ContentChildren(AlertCarouselItemComponent) carouselItems: QueryList<AlertCarouselItemComponent>;
4343
hide = false;
44+
autoplayHeight: string;
4445
carouselNum: number;
4546
currentIndex = 1;
4647
scheduledId: any;
48+
SINGLE_LINE_HEIGHT = '24px';
4749

48-
constructor(private renderer: Renderer2) {}
50+
constructor(private el: ElementRef, private renderer: Renderer2) {}
4951

5052
ngOnChanges(changes: SimpleChanges) {
5153
const { autoplay, autoplaySpeed, transitionSpeed } = changes;
@@ -70,7 +72,16 @@ export class AlertComponent implements OnChanges, OnDestroy, AfterViewInit {
7072

7173
renderCarouselItem() {
7274
this.carouselNum = this.carouselItems.length;
73-
if (this.carouselNum) {
75+
if (this.carouselNum > 1) {
76+
if (!this.autoplayHeight) {
77+
const itemHeights = this.carouselItems.map((item) => {
78+
const rect = item?.el.nativeElement.getBoundingClientRect();
79+
return rect?.height || 0;
80+
});
81+
const maxHeight = Math.max(...itemHeights);
82+
this.autoplayHeight = maxHeight ? `${maxHeight}px` : this.SINGLE_LINE_HEIGHT;
83+
}
84+
this.el.nativeElement.style.setProperty('--devui-alert-carousel-item-height', this.autoplayHeight);
7485
this.renderer.setStyle(this.box.nativeElement, 'transition', `top ${this.transitionSpeed}ms ease`);
7586
this.autoScheduleTransition();
7687
}
@@ -105,6 +116,7 @@ export class AlertComponent implements OnChanges, OnDestroy, AfterViewInit {
105116
}
106117

107118
close = (): void => {
119+
this.clearScheduledTransition();
108120
this.closeEvent.emit(this);
109121
this.hide = true;
110122
};

‎devui/alert/demo/carousel/carousel.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class CarouselComponent {
1515
data = [
1616
{
1717
id: 1,
18-
content: 'info 1',
18+
content: `info 1`,
1919
},
2020
{
2121
id: 2,

‎devui/alert/doc/api-cn.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ import { AlertModule } from 'ng-devui/alert';
1616

1717
### d-alert 参数
1818

19-
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
20-
| ----------------- | ------------------------- | ------ | ----------------------------------------------- | ----------------------------------- | ---------- |
21-
| type | [`AlertType`](#alerttype) | 'info' | 必选，指定警告提示的样式 | [基本用法](demo#basic-usage) |
22-
| cssClass | `string` | -- | 可选，自定义 class 名 |
23-
| closeable | `boolean` | true | 可选，默认显示关闭按钮 | [基本用法](demo#tips-to-close) |
24-
| dismissTime | `number` | -- | 可选，自动关闭 alert 的延迟时间（`ms`） |
25-
| showIcon | `boolean` | true | 可选，是否使用默认的类型图标 | [不使用默认图标](demo#without-icon) |
26-
| autoplay | `boolean` | false | 可选，是否自动轮播 | [自动轮播](demo#carousel) |
27-
| autoplaySpeed | `number` | 3000 | 可选，配合`autoplay`使用，自动轮播速度，单位 ms | [自动轮播](demo#carousel) |
28-
| transitionSpeed | `number` | 500 | 可选，内容切换动画速度，单位 ms | [自动轮播](demo#carousel) |
29-
| operationTemplate | `TemplateRef<any>` | -- | 可选，自定义操作区内容模板 | [自动轮播](demo#carousel) |
19+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
20+
| ----------------- | ------------------------- | ------ | ---------------------------------------------------------------------------- | ----------------------------------- | ---------- |
21+
| type | [`AlertType`](#alerttype) | 'info' | 必选，指定警告提示的样式 | [基本用法](demo#basic-usage) |
22+
| cssClass | `string` | -- | 可选，自定义 class 名 |
23+
| closeable | `boolean` | true | 可选，默认显示关闭按钮 | [基本用法](demo#tips-to-close) |
24+
| dismissTime | `number` | -- | 可选，自动关闭 alert 的延迟时间，单位（`ms`） |
25+
| showIcon | `boolean` | true | 可选，是否使用默认的类型图标 | [不使用默认图标](demo#without-icon) |
26+
| autoplay | `boolean` | false | 可选，是否自动轮播 | [自动轮播](demo#carousel) |
27+
| autoplaySpeed | `number` | 3000 | 可选，配合`autoplay`使用，自动轮播速度，单位 ms | [自动轮播](demo#carousel) |
28+
| transitionSpeed | `number` | 500 | 可选，内容切换动画速度，单位（`ms`） | [自动轮播](demo#carousel) |
29+
| operationTemplate | `TemplateRef<any>` | -- | 可选，自定义操作区内容模板 | [自动轮播](demo#carousel) |
3030

3131
### d-alert 事件
3232

‎devui/alert/doc/api-en.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ In the page:
1616

1717
### d-alert Parameter
1818

19-
| Attributes | Type | Default | Description | Jump to Demo | Global Config |
20-
| ----------------- | ------------------------- | ------- | --------------------------------------------------------------------------------------- | --------------------------------- | ------------- |
21-
| type | [`AlertType`](#alerttype) | 'info' | Required. Specify the style of the warning prompt. | [Basic Usage](demo#basic-usage) |
22-
| cssClass | `string` | -- | Optional. Customize className. |
23-
| closeable | `boolean` | true | Optional. The close button is displayed by default. | [Basic Usage](demo#tips-to-close) |
24-
| dismissTime | `number` | -- | Optional. Toggle off the delay time of Alert (`ms`). |
25-
| showIcon | `boolean` | true | Optional. Whether to use the default type icon. | [Without Icon](demo#without-icon) |
26-
| autoplay | `boolean` | false | Optional. Indicating whether to enable automatic NVOD. | [Carousel](demo#carousel) |
27-
| autoplaySpeed | `number` | 3000 | Optional. Automatic NVOD speed, in ms. This parameter is used together with `autoplay'. | [Carousel](demo#carousel) |
28-
| transitionSpeed | `number` | 500 | Optional. Content switch animation interval, in ms. | [Carousel](demo#carousel) |
29-
| operationTemplate | `TemplateRef<any>` | -- | Optional. Customized operation area template. | [Carousel](demo#carousel) |
19+
| Attributes | Type | Default | Description | Jump to Demo | Global Config |
20+
| ----------------- | ------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------- |
21+
| type | [`AlertType`](#alerttype) | 'info' | Required. Specify the style of the warning prompt. | [Basic Usage](demo#basic-usage) |
22+
| cssClass | `string` | -- | Optional. Customize className. |
23+
| closeable | `boolean` | true | Optional. The close button is displayed by default. | [Basic Usage](demo#tips-to-close) |
24+
| dismissTime | `number` | -- | Optional. Toggle off the delay time of Alert, in ms. |
25+
| showIcon | `boolean` | true | Optional. Whether to use the default type icon. | [Without Icon](demo#without-icon) |
26+
| autoplay | `boolean` | false | Optional. Indicating whether to enable automatic NVOD. | [Carousel](demo#carousel) |
27+
| autoplaySpeed | `number` | 3000 | Optional. Automatic NVOD speed, in ms. This parameter is used together with `autoplay`. | [Carousel](demo#carousel) |
28+
| transitionSpeed | `number` | 500 | Optional. Content switch animation interval, in ms. | [Carousel](demo#carousel) |
29+
| operationTemplate | `TemplateRef<any>` | -- | Optional. Customized operation area template. | [Carousel](demo#carousel) |
3030

3131
### d-alert Event
3232

‎devui/anchor/demo/scroll-target/scroll-target.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="container" #scrollTarget>
1+
<div class="container devui-scrollbar" #scrollTarget>
22
<div
33
dAnchorBox
44
[scrollTarget]="scrollTarget"

‎devui/avatar/avatar.component.ts

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export class AvatarComponent implements OnChanges, OnInit {
1111
isNobody = true;
1212
isErrorImg = false;
1313
/**
14-
* 自定义头像显示文字
15-
*/
14+
* 自定义头像显示文字
15+
*/
1616
@Input() gender: 'male' | 'female' | string;
1717
/**
1818
* avatar宽度
@@ -22,45 +22,46 @@ export class AvatarComponent implements OnChanges, OnInit {
2222
* avatar高度
2323
*/
2424
@Input() height = 36;
25-
2625
/**
2726
* 是否是圆形n
2827
*/
2928
@Input() isRound = true;
30-
3129
/**
3230
* 是否是图片
3331
*/
3432
@Input() imgSrc: string;
3533
/**
36-
* 用户名称
37-
*/
34+
* 用户名称
35+
*/
3836
@Input() name: string;
3937
/**
4038
* 自定义头像显示文字
4139
*/
4240
@Input() customText: string;
43-
41+
/**
42+
* 头像中间文字最小尺寸
43+
*/
44+
MINIMUM_FONT_SIZE = 12;
4445
fontSize = 12;
4546
code: number;
4647
nameDisplay: string;
47-
constructor() { }
48+
4849
ngOnInit(): void {
4950
this.calcValues(this.customText ? this.customText : this.name);
5051
}
52+
5153
ngOnChanges(changes: SimpleChanges): void {
52-
if (changes['width'] && !changes['width'].isFirstChange() ||
53-
changes['customText'] && !changes['customText'].isFirstChange() ||
54-
changes['gender'] && !changes['gender'].isFirstChange() ||
55-
changes['height'] && !changes['height'].isFirstChange() ||
56-
changes['name'] && !changes['name'].isFirstChange()
57-
) {
54+
const { width, customText, gender, height, name } = changes;
55+
const result = [width, customText, gender, height, name].map((item) => item && !item.isFirstChange());
56+
if (result.includes(true)) {
5857
this.calcValues(this.customText ? this.customText : this.name);
5958
}
6059
}
60+
6161
showErrAvatar() {
6262
this.isErrorImg = true;
6363
}
64+
6465
calcValues(nameInput) {
6566
const userName = nameInput;
6667
const minNum = Math.min(this.width, this.height);
@@ -74,8 +75,10 @@ export class AvatarComponent implements OnChanges, OnInit {
7475
} else {
7576
this.isNobody = true;
7677
}
77-
this.fontSize = minNum / 4 + 3;
78+
const size = minNum / 4 + 3;
79+
this.fontSize = size < this.MINIMUM_FONT_SIZE ? this.MINIMUM_FONT_SIZE : size;
7880
}
81+
7982
setDisplayName(name, width) {
8083
if (this.customText) {
8184
this.nameDisplay = this.customText;
@@ -109,6 +112,7 @@ export class AvatarComponent implements OnChanges, OnInit {
109112
}
110113
this.getBackgroundColor(name.substr(0, 1));
111114
}
115+
112116
getBackgroundColor(char) {
113117
if (this.gender) {
114118
if (this.gender.toLowerCase() === 'male') {

0 commit comments

Comments
 (0)