From 35bf8d8eca597be0d47d20aa7d95dd6ae76c744a Mon Sep 17 00:00:00 2001 From: wangyaju Date: Fri, 1 Mar 2024 09:25:32 +0800 Subject: [PATCH] chore(release): release 17.0.0 (#346) Co-authored-by: huaweidevcloud --- .../alert/alert-carousel-item.component.scss | 3 +- devui/alert/alert-carousel-item.component.ts | 6 +- devui/alert/alert.component.html | 16 +- devui/alert/alert.component.scss | 20 +- devui/alert/alert.component.ts | 18 +- .../alert/demo/carousel/carousel.component.ts | 2 +- devui/alert/doc/api-cn.md | 22 +-- devui/alert/doc/api-en.md | 22 +-- .../scroll-target.component.html | 2 +- devui/avatar/avatar.component.ts | 34 ++-- .../scroll-container.component.html | 2 +- .../demo/custom/custom.component.html | 6 +- devui/button/button.component.scss | 4 +- devui/button/button.component.ts | 2 +- devui/cascader/cascader.component.html | 12 +- .../category-search.component.html | 9 +- .../category-search.component.scss | 4 + .../category-search.component.ts | 52 +++-- .../demo/auto-scroll/auto-scroll.component.ts | 126 +----------- devui/checkbox/checkbox-group.component.ts | 43 ++-- devui/common/common.module.ts | 21 +- devui/common/demo/common-demo.component.html | 9 + devui/common/demo/common-demo.component.ts | 6 + devui/common/demo/common-demo.module.ts | 7 +- .../shapeIconHoverable.component.html | 23 +++ .../shapeIconHoverable.component.ts | 11 ++ devui/common/public-api.ts | 1 + devui/common/shapeIconHoverable.directive.ts | 12 ++ devui/dashboard/widget/widget.component.html | 2 +- .../data-table/data-table-body.component.html | 2 +- .../data-table/data-table-head.component.html | 1 + devui/data-table/data-table.component.html | 3 +- devui/data-table/data-table.component.scss | 83 +++++--- devui/data-table/data-table.component.ts | 6 +- .../interaction/interaction.component.html | 1 + .../demo/interaction/interaction.component.ts | 16 +- .../table-option-modal.component.scss | 1 - .../table/body/tbody.component.html | 2 +- .../head/th/filter/filter.component.html | 6 +- .../table/head/th/filter/filter.component.ts | 12 +- .../data-table/table/head/th/th.component.ts | 6 + .../datepicker-pro-calendar.component.ts | 4 +- .../datepicker-pro/datepicker-pro.service.ts | 4 +- .../lib/calendar-panel.component.scss | 2 - .../lib/calendar-panel.component.ts | 21 +- .../lib/month-panel.component.scss | 2 - .../lib/timepicker-panel.component.scss | 2 - .../lib/year-panel.component.scss | 2 - .../range-datepicker-pro.component.ts | 6 + .../color/demo/color/color.component.html | 4 +- .../color/demo/color/color.component.ts | 30 +-- devui/drawer/drawer.component.scss | 7 +- .../dropdown/demo/dropdown-demo.component.ts | 2 +- .../dropdown/demo/hover/hover.component.html | 2 +- .../multi-level/multi-level.component.css | 7 - .../multi-level/multi-level.component.html | 81 ++++---- .../multi-level/multi-level.component.scss | 15 ++ .../demo/multi-level/multi-level.component.ts | 57 +++--- .../demo/multi-col/multi-col.component.html | 9 +- devui/form/doc/api-cn.md | 1 + devui/form/doc/api-en.md | 1 + devui/form/form-label.component.html | 2 +- devui/form/form-label.component.ts | 3 +- devui/gantt/demo/table/table.component.html | 6 +- devui/gantt/demo/table/table.component.ts | 4 +- .../gantt-scale/gantt-scale.component.html | 2 +- devui/i18n/en-us.ts | 22 ++- devui/i18n/i18n.model.ts | 8 +- devui/i18n/zh-cn.ts | 18 +- devui/icon/icon.component.scss | 2 + devui/icon/icon.component.spec.ts | 4 +- devui/input-number/input-number.component.ts | 2 +- devui/loading/doc/api-cn.md | 2 +- devui/loading/loading.component.scss | 2 +- devui/modal/demo/basic/basic.component.ts | 1 + devui/modal/dialog.service.ts | 41 ++-- devui/modal/doc/api-cn.md | 4 +- devui/modal/doc/api-en.md | 2 +- devui/modal/modal-container.component.scss | 1 - devui/modal/modal-header.component.html | 10 +- devui/modal/modal-header.component.scss | 1 + devui/modal/modal.component.html | 2 +- devui/modal/modal.component.scss | 6 + devui/modal/modal.component.ts | 113 ++++++----- devui/modal/modal.service.ts | 23 +-- devui/modal/modal.types.ts | 4 +- .../demo/basic/basic.component.html | 2 +- .../scroll-container.component.html | 2 +- devui/package.json | 14 +- .../multi-readtip.component.scss | 3 +- devui/relative-time/relative-time.pipe.ts | 6 +- devui/select/before-checkbox-change.pipe.ts | 10 + devui/select/public-api.ts | 1 + devui/select/select.component.html | 8 +- devui/select/select.component.ts | 16 +- devui/select/select.module.ts | 3 +- .../devui-online-ide.service.ts | 24 +-- devui/steps-guide/doc/api-cn.md | 2 +- devui/steps-guide/steps-guide.component.html | 5 +- devui/steps-guide/steps-guide.component.ts | 4 +- devui/steps-guide/steps-guide.module.ts | 15 +- .../scroll-target.component.html | 2 +- devui/style/core/_common.scss | 10 + devui/style/core/_font.scss | 2 +- devui/style/core/_form.scss | 25 +++ devui/style/core/_reset.scss | 72 +++++++ devui/style/theme/_variables.scss | 2 +- .../demo/big-data/big-data.component.html | 4 +- .../tabs/demo/big-data/big-data.component.ts | 2 +- devui/tabs/tabs.component.ts | 11 +- .../demo/customize/customize.component.ts | 4 +- devui/text-input/text-input.directive.ts | 14 +- .../textarea/demo/count/count.component.html | 12 +- .../textarea/demo/count/count.component.scss | 3 - devui/textarea/demo/count/count.component.ts | 22 +-- devui/textarea/demo/text-demo.component.ts | 3 +- devui/textarea/doc/api-cn.md | 3 +- devui/textarea/doc/api-en.md | 5 +- devui/textarea/textarea.directive.ts | 60 +++++- devui/time-picker/time-picker.component.scss | 2 - devui/toast/toast.component.html | 18 +- devui/toast/toast.component.ts | 4 - devui/toast/toast.module.ts | 12 +- .../toggle-menu-label.component.html | 2 +- .../toggle-menu/toggle-menu-list.component.ts | 6 +- .../transfer-demo-custom.component.html | 4 +- devui/transfer/transfer.component.html | 3 + devui/tree-select/tree-select.component.ts | 2 +- .../demo/customize/customize.component.html | 10 +- devui/tree/operable-tree.component.html | 6 +- devui/tree/operable-tree.component.scss | 4 - devui/tree/operable-tree.component.ts | 53 +++-- devui/tree/tree-factory.class.ts | 27 ++- devui/tree/tree.component.html | 1 + devui/upload/demo/basic/basic.component.html | 12 +- devui/upload/demo/basic/basic.component.ts | 36 ++-- .../demo/slice/upload-slice.component.html | 16 +- .../demo/slice/upload-slice.component.ts | 32 +-- devui/upload/doc/api-cn.md | 186 +++++++++--------- devui/upload/doc/api-en.md | 186 +++++++++--------- devui/upload/file-uploader.class.ts | 40 ++-- devui/upload/file-uploader.types.ts | 2 + .../upload/multiple-upload-view.component.ts | 4 +- devui/upload/multiple-upload.component.html | 2 +- devui/upload/multiple-upload.component.ts | 158 ++++++++------- devui/upload/multiple-upload.spec.ts | 99 ++++++---- devui/upload/public-api.ts | 1 + devui/upload/single-upload-view.component.ts | 2 +- devui/upload/single-upload.component.html | 3 +- devui/upload/single-upload.component.ts | 128 +++--------- devui/upload/single-upload.spec.ts | 66 ++++--- devui/upload/slice-upload.service.ts | 147 ++++++++++++++ devui/upload/upload-view.component.scss | 4 + devui/upload/upload.class.ts | 26 +-- devui/upload/upload.module.ts | 14 +- devui/user-guide/user-guide-ui.component.html | 4 +- devui/user-guide/user-guide-ui.component.ts | 3 +- devui/utils/animations/wipe-in-out.ts | 4 +- devui/utils/globalConfig/config.ts | 1 + devui/utils/is-template.module.ts | 8 + devui/utils/is-template.pipe.ts | 10 + devui/utils/popper/popper.component.html | 8 +- devui/utils/popper/popper.component.scss | 7 +- devui/utils/public-api.ts | 4 +- devui/version.ts | 2 +- package.json | 30 +-- src/app/app.component.scss | 41 ++++ .../component/example-panel.component.html | 3 +- src/app/component/example-panel.component.ts | 1 - src/app/component/getStarted-cn.md | 2 +- src/app/component/getStarted-en.md | 2 +- src/app/component/scope-list.ts | 21 +- src/assets/i18n/en-us.json | 11 +- src/assets/i18n/zh-cn.json | 16 +- 174 files changed, 1768 insertions(+), 1279 deletions(-) create mode 100644 devui/common/demo/shapeIconHoverable/shapeIconHoverable.component.html create mode 100644 devui/common/demo/shapeIconHoverable/shapeIconHoverable.component.ts create mode 100644 devui/common/shapeIconHoverable.directive.ts delete mode 100644 devui/dropdown/demo/multi-level/multi-level.component.css create mode 100644 devui/dropdown/demo/multi-level/multi-level.component.scss create mode 100644 devui/select/before-checkbox-change.pipe.ts delete mode 100644 devui/textarea/demo/count/count.component.scss create mode 100644 devui/upload/slice-upload.service.ts create mode 100644 devui/utils/is-template.module.ts create mode 100644 devui/utils/is-template.pipe.ts 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)" />
      -
      +