chore(release): release 16.2.0 (#339)

Co-authored-by: huaweidevcloud <[email protected]>

Author: wangyaju

CodeArts-logo.png

@@ -105,7 +105,7 @@ Modern browsers and Internet Explorer 11+.
 
 ## Who use it
 
-<p><a href="https://devcloud.huaweicloud.com/" target="_blank" rel="noopener noreferrer"><img alt="DevCloud Logo" src="devcloud-logo.png" width="150" style="max-width:100%;"></a></p>
+<p><a href="https://www.huaweicloud.com/devcloud/" target="_blank" rel="noopener noreferrer"><img alt="CodeArts Logo" src="CodeArts-logo.png" width="150" style="max-width:100%;"></a></p>
 
 ## LICENSE
 

README.md

@@ -107,7 +107,7 @@ ng serve --open
 
 ## 谁在使用
 
-<p><a href="https://devcloud.huaweicloud.com/" target="_blank" rel="noopener noreferrer"><img alt="DevCloud Logo" src="devcloud-logo.png" width="150" style="max-width:100%;"></a></p>
+<p><a href="https://www.huaweicloud.com/devcloud/" target="_blank" rel="noopener noreferrer"><img alt="CodeArts Logo" src="CodeArts-logo.png" width="150" style="max-width:100%;"></a></p>
 
 ## LICENSE
 

README_zh_CN.md

@@ -1,6 +1,12 @@
 <div class="sidebar-wrapper">
-  <d-search class="sidebar-search-container" [iconPosition]="'left'" [styleType]="'gray'" [isKeyupSearch]="true"
-    [placeholder]="searchPlaceholder" (searchFn)="onSearch($event)"></d-search>
+  <d-search
+    class="sidebar-search-container"
+    [iconPosition]="'left'"
+    [styleType]="'gray'"
+    [isKeyupSearch]="true"
+    [placeholder]="searchPlaceholder"
+    (searchFn)="onSearch($event)"
+  ></d-search>
   <ul class="sidebar-menu" [ngClass]="{'sidebar-menu-design': !sideMenuList.length}">
     <li *ngFor="let item of sideMenuList" class="sidebar-menu-item" routerLinkActive="sidebar-menu-item-selected">
       <a *ngIf="item.linkType === 'routerLink'" [routerLink]="item.path">
@@ -12,8 +18,7 @@
     </li>
   </ul>
   <nav class="sidebar-nav">
-    <d-accordion [data]="componentsDataDisplay" [linkType]="linkType" [itemTemplate]="itemtemplate"
-      (itemClick)="handleResetPage()" [linkDefaultTarget]="linkDefaultTarget"></d-accordion>
+    <d-accordion [data]="componentsDataDisplay" [linkType]="linkType" [itemTemplate]="itemtemplate" (itemClick)="handleResetPage()" [linkDefaultTarget]="linkDefaultTarget"></d-accordion>
     <ng-template #itemtemplate let-item="item">
       {{ item.title }}
       <d-tag *ngIf="item.newChange" [tag]="text.new" [labelStyle]="'update-custom'"></d-tag>
@@ -40,4 +45,4 @@
       </a>
     </div>
   </div>
-</div>
+</div>

devcloud-logo.png

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 100%;
+}

devui-commons/src/sidebar/sidebar.component.html

@@ -0,0 +1,9 @@
+import { Component } 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 {}

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

@@ -1,22 +1,4 @@
 <div class="devui-alert devui-alert-{{ type }} {{ cssClass }}" *ngIf="!hide">
-  <div class="devui-close" (click)="close()" *ngIf="closeable">
-    <svg
-      width="10px"
-      height="10px"
-      viewBox="0 0 10 10"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero">
-          <path
-            d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
-          ></path>
-        </g>
-      </g>
-    </svg>
-  </div>
   <span class="devui-alert-icon" *ngIf="showIcon !== false && type !== 'simple'">
     <svg
       width="16px"
@@ -76,5 +58,55 @@
       </g>
     </svg>
   </span>
-  <ng-content></ng-content>
+  <div class="devui-alert-carousel-container">
+    <div
+      #carouselContainer
+      class="devui-alert-carousel-box"
+      (mouseenter)="clearScheduledTransition()"
+      (mouseleave)="autoScheduleTransition()"
+    >
+      <ng-content></ng-content>
+    </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()">
+        <svg
+          width="12px"
+          height="12px"
+          viewBox="0 0 16 16"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <path
+              d="M2.64644661,5.14644661 C2.82001296,4.97288026 3.08943736,4.95359511 3.2843055,5.08859116 L3.35355339,5.14644661 L7.999,9.793 L12.6464466,5.14644661 C12.820013,4.97288026 13.0894374,4.95359511 13.2843055,5.08859116 L13.3535534,5.14644661 C13.5271197,5.32001296 13.5464049,5.58943736 13.4114088,5.7843055 L13.3535534,5.85355339 L8.35355339,10.8535534 C8.17998704,11.0271197 7.91056264,11.0464049 7.7156945,10.9114088 L7.64644661,10.8535534 L2.64644661,5.85355339 C2.45118446,5.65829124 2.45118446,5.34170876 2.64644661,5.14644661 Z"
+              fill-rule="nonzero"
+            ></path>
+          </g>
+        </svg>
+      </span>
+    </div>
+    <ng-template [ngTemplateOutlet]="operationTemplate" [ngTemplateOutletContext]="{ close: close }"> </ng-template>
+    <div class="devui-close" (click)="close()" *ngIf="closeable">
+      <svg
+        width="10px"
+        height="10px"
+        viewBox="0 0 10 10"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero">
+            <path
+              d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
 </div>

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

@@ -16,23 +16,9 @@
   border-radius: $devui-border-radius;
   word-break: normal;
   word-wrap: break-word;
-
-  .devui-close {
-    color: $devui-text;
-    opacity: 1;
-    line-height: 26px;
-    height: 24px;
-
-    & > svg path {
-      fill: $devui-light-text;
-    }
-
-    span {
-      color: $devui-text;
-      font-size: $devui-font-size;
-      font-weight: bold;
-    }
-  }
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
 
   &.devui-alert-success {
     background-color: $devui-success-bg;
@@ -93,6 +79,10 @@
     }
   }
 
+  .devui-alert-icon {
+    padding-right: 8px;
+  }
+
   svg.devui-icon {
     width: 16px;
     height: 16px;
@@ -151,8 +141,78 @@
       }
     }
   }
-}
 
-.devui-alert-icon {
-  margin-right: 4px;
+  .devui-alert-carousel-container {
+    flex-grow: 1;
+    flex-shrink: 0;
+    height: 24px;
+    overflow: hidden;
+
+    .devui-alert-carousel-box {
+      position: relative;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  .devui-alert-operation-container {
+    flex-grow: 0;
+    flex-shrink: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 24px;
+    min-width: 200px;
+
+    .devui-alert-carousel-num {
+      padding-right: 8px;
+    }
+
+    .devui-alert-carousel-button {
+      margin-left: 8px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 16px;
+      line-height: 16px;
+      vertical-align: middle;
+      background-color: transparent;
+      text-align: center;
+      border-radius: $devui-border-radius;
+      cursor: pointer;
+
+      svg path {
+        fill: $devui-text;
+      }
+
+      &:hover {
+        background-color: $devui-shape-icon-fill-hover;
+
+        svg path {
+          fill: $devui-light-text;
+        }
+      }
+    }
+  }
+
+  .devui-close {
+    flex-grow: 0;
+    flex-shrink: 1;
+    color: $devui-text;
+    opacity: 1;
+    line-height: 26px;
+    height: 24px;
+    padding-left: 8px;
+
+    & > svg path {
+      fill: $devui-light-text;
+    }
+
+    span {
+      color: $devui-text;
+      font-size: $devui-font-size;
+      font-weight: bold;
+    }
+  }
 }

devui/alert/alert.component.html

@@ -1,10 +1,20 @@
 import {
+  AfterViewInit,
   Component,
-
+  ContentChildren,
+  ElementRef,
   EventEmitter,
   Input,
-  Output
+  OnChanges,
+  OnDestroy,
+  Output,
+  QueryList,
+  Renderer2,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild
 } from '@angular/core';
+import { AlertCarouselItemComponent } from './alert-carousel-item.component';
 import { AlertType } from './alert.types';
 
 @Component({
@@ -13,26 +23,89 @@ import { AlertType } from './alert.types';
   styleUrls: ['./alert.component.scss'],
   preserveWhitespaces: false,
 })
-export class AlertComponent {
+export class AlertComponent implements OnChanges, OnDestroy, AfterViewInit {
   @Input() type: AlertType = 'info';
   @Input() cssClass: string;
   @Input() closeable = true;
-  /**
-   * @deprecated
-   */
-  @Input() content: HTMLElement | string;
   @Input() showIcon = true;
-  @Output() closeEvent = new EventEmitter<AlertComponent>();
-  @Input() set dismissTime(time) {
+  @Input() autoplay = false;
+  @Input() autoplaySpeed = 3000;
+  @Input() transitionSpeed = 500;
+  @Input() operationTemplate: TemplateRef<any>;
+  @Input() set dismissTime(time: number) {
     setTimeout(() => {
       this.close();
     }, time);
   }
-
+  @Output() closeEvent = new EventEmitter<AlertComponent>();
+  @ViewChild('carouselContainer') box: ElementRef<any>;
+  @ContentChildren(AlertCarouselItemComponent) carouselItems: QueryList<AlertCarouselItemComponent>;
   hide = false;
+  carouselNum: number;
+  currentIndex = 1;
+  scheduledId: any;
+
+  constructor(private renderer: Renderer2) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    const { autoplay, autoplaySpeed, transitionSpeed } = changes;
+    if ((autoplay || autoplaySpeed) && (!this.autoplay || !this.autoplaySpeed)) {
+      this.clearScheduledTransition();
+    } else {
+      this.autoScheduleTransition();
+    }
+    if (transitionSpeed && this.transitionSpeed) {
+      this.renderer.setStyle(this.box.nativeElement, 'transition', `top ${this.transitionSpeed}ms ease`);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.renderCarouselItem();
+    this.carouselItems.changes.subscribe(() => this.renderCarouselItem());
+  }
+
+  ngOnDestroy() {
+    this.clearScheduledTransition();
+  }
 
-  close() {
+  renderCarouselItem() {
+    this.carouselNum = this.carouselItems.length;
+    if (this.carouselNum) {
+      this.renderer.setStyle(this.box.nativeElement, 'transition', `top ${this.transitionSpeed}ms ease`);
+      this.autoScheduleTransition();
+    }
+  }
+
+  next = (): void => {
+    if (this.currentIndex < this.carouselNum) {
+      this.currentIndex++;
+    } else {
+      this.currentIndex = 1;
+    }
+    this.translatePosition(this.currentIndex - 1);
+    this.autoScheduleTransition();
+  };
+
+  autoScheduleTransition() {
+    this.clearScheduledTransition();
+    if (this.autoplay && this.autoplaySpeed) {
+      this.scheduledId = setTimeout(() => this.next(), this.autoplaySpeed);
+    }
+  }
+
+  clearScheduledTransition() {
+    if (this.scheduledId) {
+      clearTimeout(this.scheduledId);
+      this.scheduledId = undefined;
+    }
+  }
+
+  translatePosition(size: number) {
+    this.renderer.setStyle(this.box.nativeElement, 'top', `${-size * 100}%`);
+  }
+
+  close = (): void => {
     this.closeEvent.emit(this);
     this.hide = true;
-  }
+  };
 }