DevCloudFE · wangyaju · Nov 9, 2022 · Nov 9, 2022
diff --git a/angular.json b/angular.json
@@ -18,7 +18,6 @@
               "highlight.js",
               "codemirror",
               "xss",
-              "enquire.js",
               "color",
               "codesandbox"
             ],

diff --git a/devui/anchor/anchor-box.directive.ts b/devui/anchor/anchor-box.directive.ts
@@ -1,5 +1,5 @@
-import { ContentChildren, Directive, Input, OnDestroy, OnInit, QueryList } from '@angular/core';
-import { Subject, Subscription} from 'rxjs';
+import { ContentChildren, Directive, Input, OnDestroy, QueryList } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { AnchorDirective } from './anchor.directive';
 import { AnchorActiveChangeSource, IAnchorBox } from './anchor.type';

diff --git a/devui/auto-complete/auto-complete-popup.component.html b/devui/auto-complete/auto-complete-popup.component.html
@@ -19,7 +19,12 @@
 <ng-template #popTpl>
   <div
     class="devui-dropdown-menu"
-    [ngClass]="{ 'devui-dropdown-menu-cdk': appendToBody }"
+    [ngClass]="{
+      'devui-dropdown-menu-cdk': appendToBody,
+      'devui-custom-right': customViewTemplate && customViewDirection === 'right',
+      'devui-custom-left': customViewTemplate && customViewDirection === 'left',
+      'devui-custom-top': customViewTemplate && customViewDirection === 'top'
+    }"
     [style.display]="isOpen && (source?.length || noResultItemTemplate) && !disabled ? 'inline-block' : 'none'"
     [style.top]="overview === 'multiline' ? (position?.top < labelMinHeight ? '50%' : '100%') : '100%'"
     [style.left]="overview === 'multiline' ? position?.left + 'px' : '0'"
@@ -32,7 +37,7 @@
     [backdrop]="true"
   >
     <ul
-      class="devui-list-unstyled devui-scrollbar scroll-height"
+      class="devui-list-unstyled devui-scrollbar scroll-height devui-dropdown-menu-wrap"
       [style.maxHeight]="maxHeight + 'px'"
       dLazyLoad
       [enableLazyLoad]="enableLazyLoad"
@@ -53,6 +58,7 @@
             disabled: disabledKey && item[disabledKey]
           }"
           (click)="onSelect($event, item)"
+          (mouseover)="onMouseOver($event, item)"
         >
           <ng-template
             [ngTemplateOutlet]="itemTemplate || defaultItemTemplate"
@@ -74,6 +80,11 @@
         <ng-template [ngTemplateOutlet]="searchingTemplate" [ngTemplateOutletContext]="{ term: term }"> </ng-template>
       </div>
     </ul>
+    <ng-container *ngIf="customViewTemplate">
+      <div class="devui-select-custom-area">
+        <ng-template [ngTemplateOutlet]="customViewTemplate" [ngTemplateOutletContext]="{ $implicit: this }"></ng-template>
+      </div>
+    </ng-container>
   </div>
 </ng-template>
 

diff --git a/devui/auto-complete/auto-complete-popup.component.scss b/devui/auto-complete/auto-complete-popup.component.scss
@@ -3,6 +3,60 @@
 .devui-dropdown-menu {
   width: 100%;
   display: block;
+
+  &.devui-custom-right,
+  &.devui-custom-left,
+  &.devui-custom-top {
+    min-width: 400px;
+    display: flex !important;
+
+    & > .devui-dropdown-menu-wrap {
+      display: inline-block;
+    }
+
+    & > .devui-select-custom-area {
+      display: inline-block;
+      overflow: auto;
+    }
+
+    &:not(.devui-custom-top) > .devui-dropdown-menu-wrap {
+      width: calc(50% - 1px);
+    }
+
+    &:not(.devui-custom-top) > .devui-select-custom-area {
+      width: 50%;
+    }
+
+    & > .devui-select-custom-area::before {
+      display: none;
+    }
+  }
+
+  &.devui-custom-top {
+    flex-direction: column-reverse;
+  }
+
+  &.devui-custom-left > .devui-select-custom-area {
+    border-right: 1px solid $devui-dividing-line;
+    order: -1;
+  }
+
+  &.devui-custom-right > .devui-select-custom-area {
+    border-left: 1px solid $devui-dividing-line;
+  }
+
+  &.devui-custom-top > .devui-select-custom-area {
+    border-bottom: 1px solid $devui-dividing-line;
+  }
+}
+
+.devui-select-custom-area::before {
+  display: block;
+  content: '';
+  width: calc(100% - 20px);
+  margin: 0 10px;
+  height: 1px;
+  border-top: 1px solid $devui-dividing-line;
 }
 
 .devui-dropdown-menu-cdk {

diff --git a/devui/auto-complete/auto-complete-popup.component.ts b/devui/auto-complete/auto-complete-popup.component.ts
@@ -3,9 +3,9 @@ import {
   CdkOverlayOrigin,
   ConnectedOverlayPositionChange,
   ConnectedPosition,
-  VerticalConnectionPos
+  VerticalConnectionPos,
 } from '@angular/cdk/overlay';
-import { Component, ElementRef, Input, TemplateRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { fadeInOut } from 'ng-devui/utils';
 import { AutoCompleteConfig } from './auto-complete-config';
@@ -34,6 +34,8 @@ export class AutoCompletePopupComponent implements ControlValueAccessor {
   @Input() overview: string;
   @Input() itemTemplate: TemplateRef<any>;
   @Input() noResultItemTemplate: TemplateRef<any>;
+  @Input() customViewTemplate: TemplateRef<any>;
+  @Input() customViewDirection: 'bottom' | 'right' | 'left' | 'top' = 'bottom';
   @Input() searchingTemplate: TemplateRef<any>;
   @Input() isSearching = false;
   @Input() formatter: (item: any) => string;
@@ -44,6 +46,7 @@ export class AutoCompletePopupComponent implements ControlValueAccessor {
   @Input() cdkOverlayOffsetY = 0;
   @Input() origin: CdkOverlayOrigin | undefined;
   @Input() showAnimation = true;
+  @Output() hoverItem: EventEmitter<any> = new EventEmitter();
   @ViewChild('selectMenuElement') selectMenuElement: ElementRef;
   @ViewChild('dropdownUl') dropdownUl: ElementRef;
   @ViewChild(CdkConnectedOverlay) connectedOverlay: CdkConnectedOverlay;
@@ -176,4 +179,8 @@ export class AutoCompletePopupComponent implements ControlValueAccessor {
   onPositionChange(position: ConnectedOverlayPositionChange) {
     this.popPosition = position.connectionPair.originY;
   }
+
+  onMouseOver(event: MouseEvent, item: any) {
+    this.hoverItem.emit(item);
+  }
 }
diff --git a/devui/auto-complete/auto-complete.directive.ts b/devui/auto-complete/auto-complete.directive.ts
@@ -102,6 +102,8 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont
    */
   @Input() enableLazyLoad = false;
   @Input() allowEmptyValueSearch = false; // 在value为空时，是否允许进行搜索
+  @Input() customViewTemplate: TemplateRef<any>;
+  @Input() customViewDirection: 'bottom' | 'right' | 'left' | 'top' = 'bottom';
   @Output() loadMore = new EventEmitter<any>();
   @Output() selectValue = new EventEmitter<any>();
   @Output() transInputFocusEmit = new EventEmitter<any>(); // input状态传给父组件函数
@@ -110,6 +112,7 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont
    */
   @Output() changeDropDownStatus = new EventEmitter<any>();
   @Output() toggleChange = new EventEmitter<boolean>();
+  @Output() hoverItem: EventEmitter<any> = new EventEmitter();
   KEYBOARD_EVENT_NOT_REFRESH = ['escape', 'enter', 'arrowup', 'arrowdown', /* ie 10 edge */ 'esc', 'up', 'down'];
   popupRef: ComponentRef<AutoCompletePopupComponent>;
 
@@ -136,9 +139,7 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont
     private changeDetectorRef: ChangeDetectorRef,
     private i18n: I18nService,
     private devConfigService: DevConfigService
-  ) {
-
-  }
+  ) {}
 
   ngOnInit() {
     this.init();
@@ -150,6 +151,7 @@ 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.popupRef.instance.hoverItem.subscribe((item) => this.hoverItem.emit(item));
     this.fillPopup(this.source);
 
     if (!this.searchFn) {
@@ -463,6 +465,8 @@ export class AutoCompleteDirective implements OnInit, OnDestroy, OnChanges, Cont
       'position',
       'overview',
       'showAnimation',
+      'customViewTemplate',
+      'customViewDirection',
     ].forEach((key) => {
       if (this[key] !== undefined) {
         pop[key] = this[key];

diff --git a/devui/button/demo/danger/danger.component.html b/devui/button/demo/danger/danger.component.html
@@ -1 +1 @@
-<d-button bsStyle="danger" type="submit">Buy</d-button>
+<d-button bsStyle="danger" type="submit">Delete</d-button>
diff --git a/devui/card/demo/card-demo.module.ts b/devui/card/demo/card-demo.module.ts
@@ -11,9 +11,9 @@ 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 { CardDemoComponent } from './card-demo.component';
+import { CardInteractiveComponent } from './card-interactive/card-interactive.component';
 import { CustomComponent } from './custom/custom.component';
 import { WithMediaComponent } from './with-media/with-media.component';
-import { CardInteractiveComponent } from './card-interactive/card-interactive.component';
 
 @NgModule({
   declarations: [CardDemoComponent, BasicComponent, CustomComponent, WithMediaComponent, CardInteractiveComponent],

diff --git a/devui/cascader/cascader-li.component.html b/devui/cascader/cascader-li.component.html
@@ -67,7 +67,7 @@
       <ng-template
         [ngTemplateOutlet]="dropDownItemTemplate || defaultDropdownItemTemplate"
         [ngTemplateOutletContext]="{
-          source: option,
+          option: option,
           label: option.label
         }"
       >

diff --git a/devui/cascader/cascader.component.ts b/devui/cascader/cascader.component.ts
@@ -119,6 +119,7 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV
     this.cascaderSrv.initOptions(this.options);
     this.cascaderSrv.isMultiple = this.multiple;
     this.cascaderSrv.isLazyLoad = this.isLazyLoad;
+    this.cascaderSrv.checkboxRelation = this.checkboxRelation;
     this.initObservale();
     this.initI18n();
   }
@@ -247,6 +248,7 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV
     tagEvent.event.stopPropagation();
     this.cascaderSrv.updateOptionCheckedStatus(option.value, false, this.checkboxRelation.upward, this.checkboxRelation.downward);
     this.multipleValueList = this.multipleValueList.filter(t => t.value !== option.value);
+    this.onChange(this.cascaderSrv.currentMultipleValue);
     // 当taglist变化导致input高度变化时，更新相对位置
     setTimeout(() => {
       this.mainDropdown.updateCdkConnectedOverlayOrigin();
@@ -287,9 +289,11 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV
     const targetList = [];
     valueList.forEach(value => {
       let cur: CascaderItem;
+      let cacheTarget: CascaderItem;
       let list = this.cascaderSrv.options;
       for (let i = 0; i < value.length; i++) {
         cur = list.find(l => l.value === value[i]);
+        cacheTarget = cur;
         if (this.isLazyLoad && cur && !cur.children?.length && !cur.isLeaf) {
           this.cascaderSrv.lazyloadMultipleChild(cur, i);
           break;
@@ -299,17 +303,24 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV
       }
       if (cur && cur.isLeaf) {
         targetList.push(cur);
+        cacheTarget = null;
         this.cascaderSrv.updateOptionCheckedStatus(cur.value, true, this.checkboxRelation.upward, this.checkboxRelation.downward);
       }
+
+      if (cacheTarget) {
+        targetList.push(cacheTarget);
+        this.cascaderSrv.updateOptionCheckedStatus(cacheTarget.value, true, this.checkboxRelation.upward, this.checkboxRelation.downward);
+      }
     });
+
     return targetList;
   }
 
   // 获取路径末的label
   getLabelFromValue(value: Array<number | string>): string {
     let cur;
     let list = this.cascaderSrv.options;
-    value.map(item => {
+    value.forEach(item => {
       cur = list.find(t => t.value === item) || '';
       list = cur.children || [];
     });
@@ -323,7 +334,7 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV
     let cur;
     let list = this.cascaderSrv.options;
 
-    value.map((item, index) => {
+    value.forEach((item, index) => {
       cur = list.find(t => t.value === item) || '';
       if (cur) {
         path = path === '' ? path + cur.label : path + ' / ' + cur.label;
@@ -385,7 +396,7 @@ export class CascaderComponent implements OnInit, OnDestroy, OnChanges, ControlV
       const width = this.dropdownComp.overlay.overlayRef?.overlayElement.clientWidth;
       const offsetX = this.dropdownComp.overlay.overlayRef?.overlayElement.offsetLeft;
       const offsetRight = window.innerWidth - width - offsetX - 20;
-      this.subMenuDirections.map(t => {t.offsetX = offsetRight < 0 ? offsetRight : 0;});
+      this.subMenuDirections.forEach(t => {t.offsetX = offsetRight < 0 ? offsetRight : 0;});
       this.dropdownComp.reposition();
     }, 0);
   }

diff --git a/devui/cascader/cascader.service.ts b/devui/cascader/cascader.service.ts
@@ -21,6 +21,7 @@ export class CascaderService implements OnDestroy {
 
   isLazyLoad = false;
   lazyloadCache = {};
+  checkboxRelation = { upward: true, downward: true };
 
   loadChildrenFn: (value: CascaderItem) => Promise<CascaderItem[]> | Observable<CascaderItem[]>;
 
@@ -274,16 +275,22 @@ export class CascaderService implements OnDestroy {
   }
 
   getMultipleValue(value, option: CascaderItem[]): void {
+    const isNoRelation = !this.checkboxRelation.downward || !this.checkboxRelation.upward;
     option.forEach(item => {
       const _value = [...value];
+      _value.push(item.value);
       if (item.children && item.children.length && (item.checked || item.halfChecked)) {
-        _value.push(item.value);
         this.getMultipleValue(_value, item.children);
+        if (isNoRelation) {
+          this.multipleValue.push(_value);
+        }
       } else if (item.checked) {
-        _value.push(item.value);
         this.multipleValue.push(_value);
+      } else if (isNoRelation && item.children?.length) {
+        this.getMultipleValue(_value, item.children);
       }
     });
+
   }
 
   closeAllDropdown(): void {

diff --git a/devui/cascader/demo/parent-select-cascader/parent-select-cascader.component.ts b/devui/cascader/demo/parent-select-cascader/parent-select-cascader.component.ts
@@ -106,7 +106,7 @@ export class ParentSelectCascaderComponent {
   ];
 
   value1: Array<string | number>[] = [];
-  value2: Array<string | number>[] = [[1, 4, 8], [1, 4, 9, 81], [1, 41]];
+  value2: Array<string | number>[] = [ [1], [2], [1, 4]];
   value3: Array<string | number>[] = [[1, 4, 8], [1, 4, 9, 81], [1, 41]];
   value4: Array<string | number>[] = [[1, 4, 8], [1, 4, 9, 81], [1, 41]];
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<d-button bsStyle="danger" type="submit">Buy</d-button>
		<d-button bsStyle="danger" type="submit">Delete</d-button>