chore(release): release 13.3.0 (#244)

Co-authored-by: huaweidevcloud <devcloudmobile@huawei.com>

Author: wangyaju

devui/auto-complete/auto-complete-popup.component.html

@@ -66,15 +66,13 @@
           >
           </ng-template>
         </li>
-        <li class="devui-no-result-template" *ngIf="!source?.length && noResultItemTemplate != null">
+        <div class="devui-no-data-tip" *ngIf="!source?.length && noResultItemTemplate">
           <ng-template [ngTemplateOutlet]="noResultItemTemplate" [ngTemplateOutletContext]="{ term: term, source: source }"> </ng-template>
-        </li>
-      </ng-container>
-      <ng-container *ngIf="isSearching && searchingTemplate">
-        <li class="devui-is-searching-template">
-          <ng-template [ngTemplateOutlet]="searchingTemplate" [ngTemplateOutletContext]="{ term: term }"> </ng-template>
-        </li>
+        </div>
       </ng-container>
+      <div class="devui-no-data-tip" *ngIf="isSearching && searchingTemplate">
+        <ng-template [ngTemplateOutlet]="searchingTemplate" [ngTemplateOutletContext]="{ term: term }"> </ng-template>
+      </div>
     </ul>
   </div>
 </ng-template>

devui/auto-complete/auto-complete-popup.component.scss

@@ -9,28 +9,6 @@
   position: static;
 }
 
-.devui-no-result-template,
-.devui-is-searching-template {
-  display: block;
-  width: 100%;
-  padding: 8px 12px;
-  clear: both;
-  border: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: not-allowed;
-  background-color: $devui-disabled-bg;
-  color: $devui-disabled-text;
-  line-height: 20px;
-
-  &:hover,
-  &:active,
-  &:hover:active {
-    background-color: $devui-unavailable;
-  }
-}
-
 ul.devui-list-unstyled {
   margin: 0;
 }

devui/auto-complete/auto-complete.directive.ts

@@ -109,7 +109,7 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont
    * @deprecated
    */
   @Output() changeDropDownStatus = new EventEmitter<any>();
-  @Output() toggleChange = new EventEmitter<any>();
+  @Output() toggleChange = new EventEmitter<boolean>();
   KEYBOARD_EVENT_NOT_REFRESH = ['escape', 'enter', 'arrowup', 'arrowdown', /* ie 10 edge */ 'esc', 'up', 'down'];
   popupRef: ComponentRef<AutoCompletePopupComponent>;
 
@@ -137,14 +137,11 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont
     private i18n: I18nService,
     private devConfigService: DevConfigService
   ) {
-    this.minLength = this.autoCompleteConfig.autoComplete.minLength;
-    this.itemTemplate = this.autoCompleteConfig.autoComplete.itemTemplate;
-    this.noResultItemTemplate = this.autoCompleteConfig.autoComplete.noResultItemTemplate;
-    this.formatter = this.autoCompleteConfig.autoComplete.formatter;
-    this.valueParser = this.autoCompleteConfig.autoComplete.valueParser;
+
   }
 
   ngOnInit() {
+    this.init();
     this.setI18nText();
     this.valueChanges = this.registerInputEvent(this.elementRef);
     // 调用时机：input keyup
@@ -153,12 +150,11 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont
     // 动态的创建了popup组件，
     const factory = this.componentFactoryResolver.resolveComponentFactory(AutoCompletePopupComponent);
     this.popupRef = this.viewContainerRef.createComponent(factory, this.viewContainerRef.length, this.injector);
-
     this.fillPopup(this.source);
 
     if (!this.searchFn) {
       this.searchFn = (term) => {
-        return of(this.source.filter((lang) => this.formatter(lang).toLowerCase().indexOf(term.toLowerCase()) !== -1));
+        return of(this.source.filter((item) => this.formatter(item).toLowerCase().indexOf(term.toLowerCase()) !== -1));
       };
     }
 
@@ -193,6 +189,14 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont
     }
   }
 
+  init() {
+    this.minLength = this.minLength ?? this.autoCompleteConfig.autoComplete.minLength;
+    this.itemTemplate = this.itemTemplate || this.autoCompleteConfig.autoComplete.itemTemplate;
+    this.noResultItemTemplate = this.noResultItemTemplate || this.autoCompleteConfig.autoComplete.noResultItemTemplate;
+    this.formatter = this.formatter || this.autoCompleteConfig.autoComplete.formatter;
+    this.valueParser = this.valueParser || this.autoCompleteConfig.autoComplete.valueParser;
+  }
+
   setPositions() {
     if (this.popupRef) {
       this.popupRef.instance.overlayPositions =

devui/auto-complete/doc/api-cn.md

@@ -24,7 +24,7 @@ import { AutoCompleteModule } from 'ng-devui/auto-complete';
 | appendToBodyDirections | `Array<AppendToBodyDirection \| ConnectedPosition>` | `['rightDown', 'leftDown', 'rightUp', 'leftUp']` |                               可选，方向数组优先采用数组里靠前的位置，AppendToBodyDirection 和 ConnectedPosition 请参考 dropdown                                | [自定义模板展示](demo#auto-custom)     |
 |        disabled        |                      `boolean`                      |                      false                       |                                                                       可选，是否禁止指令                                                                        | [设置禁用](demo#auto-disable)          |
 |         delay          |                      `number`                       |                       300                        |                                                 可选，只有在 delay 时间经过后并且输入新值，才做搜索查询（`ms`）                                                 | [自定义模板展示](demo#auto-custom)     |
-|      disabledKey       |                      `string`                       |                        --                        | 可选，禁用单个选项，当传入资源 source 选项类型为对象，比如设置为'disabled'，则当对象的 disable 属性为 true 时，比如{ label: xxx, disabled: true }，该选项将禁用 | [设置禁用](demo#auto-disable)          |
+|      disabledKey       |                      `string`                       |                        --                        | 可选，禁用单个选项，当传入资源 source 选项类型为对象，比如设置为'disabled'，则当对象的 disabled 属性为 true 时，比如{ label: xxx, disabled: true }，该选项将禁用 | [设置禁用](demo#auto-disable)          |
 |      itemTemplate      |                    `TemplateRef`                    |                        --                        |                                                                      可选，自定义展示模板                                                                       | [自定义模板展示](demo#auto-custom)     |
 |  noResultItemTemplate  |                    `TemplateRef`                    |                        --                        |                                                                   可选，没有匹配项的展示结果                                                                    | [自定义模板展示](demo#auto-custom)     |
 |       formatter        |               `(item: any) => string`               |     [`defaultFormatter`](#defaultformatter)      |                                                                        可选，格式化函数                                                                         | [设置禁用](demo#auto-disable)          |

devui/auto-complete/doc/api-en.md

@@ -24,7 +24,7 @@ In the page
 | appendToBodyDirections | `Array<AppendToBodyDirection \| ConnectedPosition>` | `['rightDown','leftDown',`<br>`'rightUp','leftUp']` |                                        Optional. The first position in the array is preferred for the direction array, for details about AppendToBodyDirection and ConnectedPosition, see dropdown                                        | [Customized template display](demo#auto-custom)     |
 |        disabled        |                      `boolean`                      |                     false                     |                                                                                             Optional. Indicating whether to disable commands.                                                                                             | [Disabled](demo#auto-disable)                       |
 |         delay          |                      `number`                       |                      300                      |                                                                  Optional. The search is performed only after the delay time elapses and a new value is entered. (`ms`)                                                                   | [Customized template display](demo#auto-custom)     |
-|      disabledKey       |                      `string`                       |                      --                       | Optional. Disable a single option. If the input resource source option type is an object, for example, disabled, and the disable attribute of the object is true, for example, {label: xxx, disabled: true}, this option will be disabled | [Disabled](demo#auto-disable)                       |
+|      disabledKey       |                      `string`                       |                      --                       | Optional. Disable a single option. If the input resource source option type is an object, for example, disabled, and the disabled attribute of the object is true, for example, {label: xxx, disabled: true}, this option will be disabled | [Disabled](demo#auto-disable)                       |
 |      itemTemplate      |                    `TemplateRef`                    |                      --                       |                                                                                                   Optional. Customized display template                                                                                                   | [Customized template display](demo#auto-custom)     |
 |  noResultItemTemplate  |                    `TemplateRef`                    |                      --                       |                                                                                                 Optional. No matching item is displayed.                                                                                                  | [Customized template display](demo#auto-custom)     |
 |       formatter        |               `(item: any) => string`               |    [`defaultFormatter`](#defaultformatter)    |                                                                                                       Optional. Formatting function                                                                                                       | [Disabled](demo#auto-disable)                       |

devui/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss

@@ -3,7 +3,7 @@
 @import '../../style/core/animation';
 
 .devui-breadcrumb-font-style {
-  font-size: $devui-font-size;
+  font-size: $devui-font-size-sm;
   color: $devui-aide-text;
 }
 
@@ -41,12 +41,6 @@
   svg g path {
     fill: $devui-icon-fill;
   }
-
-  &:hover {
-    svg g path {
-      fill: $devui-icon-fill-hover;
-    }
-  }
 }
 
 .devui-breadcrumb-item-active {
@@ -120,8 +114,16 @@ d-search {
   width: 100%;
 }
 
-.devui-breadcrumb-item-with-menu .devui-breadcrumb-item {
-  cursor: pointer;
+.devui-breadcrumb-item-with-menu {
+  .devui-breadcrumb-item {
+    cursor: pointer;
+  }
+
+  &:hover {
+    svg g path {
+      fill: $devui-icon-fill-hover;
+    }
+  }
 }
 
 .devui-dropdown-open {

devui/breadcrumb/breadcrumb.component.scss

@@ -8,6 +8,10 @@
   ::ng-deep d-breadcrumb-item:last-child {
     & .devui-breadcrumb-item {
       color: $devui-text;
+
+      a {
+        color: $devui-text;
+      }
     }
 
     .devui-breadcrumb-separator {

devui/breadcrumb/demo/breadcrumb-demo.component.html

@@ -28,4 +28,11 @@
       <d-custom demo></d-custom>
     </d-codebox>
   </div>
+  <div class="devui-demo-example" [dAnchor]="'click-block-breadcrumbs'">
+    <div class="devui-demo-title">{{ 'components.breadcrumb.clickBlockDemo.title' | translate }}</div>
+    <div class="devui-demo-text"></div>
+    <d-codebox id="components-breadcrumb-click-block" [sourceData]="ClickBlockSource">
+      <d-click-block demo></d-click-block>
+    </d-codebox>
+  </div>
 </div>

devui/breadcrumb/demo/breadcrumb-demo.component.ts

@@ -29,6 +29,11 @@ export class BreadCrumbDemoComponent implements OnInit, OnDestroy {
     { title: 'TS', language: 'typescript', code: require('./menu/menu.component.ts?raw') },
   ];
 
+  ClickBlockSource: Array<DevuiSourceData> = [
+    { title: 'HTML', language: 'xml', code: require('./click-block/click-block.component.html?raw') },
+    { title: 'TS', language: 'typescript', code: require('./click-block/click-block.component.ts?raw') },
+  ];
+
   navItems = [];
   subs: Subscription = new Subscription();
   constructor(private translate: TranslateService) {}
@@ -53,7 +58,8 @@ export class BreadCrumbDemoComponent implements OnInit, OnDestroy {
       { dAnchorLink: 'basic-breadcrumbs', value: values['basic-breadcrumbs'] },
       { dAnchorLink: 'source-config-breadcrumbs', value: values['source-config-breadcrumbs'] },
       { dAnchorLink: 'drop-down-breadcrumbs', value: values['drop-down-breadcrumbs'] },
-      { dAnchorLink: 'self-defined-breadcrumbs', value: values['self-defined-breadcrumbs'] }
+      { dAnchorLink: 'self-defined-breadcrumbs', value: values['self-defined-breadcrumbs'] },
+      { dAnchorLink: 'click-block-breadcrumbs', value: values['click-block-breadcrumbs'] }
     ];
   }
 

devui/breadcrumb/demo/breadcrumb-demo.module.ts

@@ -3,13 +3,15 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { BreadcrumbModule } from 'ng-devui/breadcrumb';
+import { DropDownModule } from 'ng-devui/dropdown';
 import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component';
 import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module';
 import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox';
 import { TranslateModule } from '@ngx-translate/core';
 import { DDemoNavModule } from 'devui-commons/src/demo-nav/d-demo-nav.module';
 import { BasicComponent } from './basic/basic.component';
 import { BreadCrumbDemoComponent } from './breadcrumb-demo.component';
+import { ClickBlockComponent } from './click-block/click-block.component';
 import { CustomComponent } from './custom/custom.component';
 import { MenuComponent } from './menu/menu.component';
 import { SourceConfigComponent } from './source-config/source-config.component';
@@ -23,6 +25,7 @@ import { SourceConfigComponent } from './source-config/source-config.component';
     DevUICodeboxModule,
     DevUIApiModule,
     DDemoNavModule,
+    DropDownModule,
     RouterModule.forChild([
       { path: '',  redirectTo: 'demo' },
       { path: 'demo', component: BreadCrumbDemoComponent},
@@ -37,14 +40,16 @@ import { SourceConfigComponent } from './source-config/source-config.component';
     BasicComponent,
     MenuComponent,
     CustomComponent,
-    SourceConfigComponent
+    SourceConfigComponent,
+    ClickBlockComponent
   ],
   declarations: [
     BreadCrumbDemoComponent,
     BasicComponent,
     MenuComponent,
     CustomComponent,
-    SourceConfigComponent
+    SourceConfigComponent,
+    ClickBlockComponent
   ]
 })
 export class BreadCrumbDemoModule { }