feat(dropdown): remove thyDropdown thyPopoverOptions width

src/dropdown/doc/zh-cn.md

@@ -76,7 +76,7 @@ export class CustomMenuComponent extends ThyDropdownAbstractMenu {}
 <example name="thy-dropdown-component-example" />
 
 ## 可传入popoverOptions
-thyPopoverOptions默认值为`{ placement: 'bottom', width: '240px' }`
+thyPopoverOptions默认值为`{ placement: 'bottom' }`
 
 <example name="thy-dropdown-options-example" />
 

src/dropdown/dropdown-menu.component.ts

@@ -11,10 +11,11 @@ import {
 } from '@angular/core';
 import { InputBoolean, InputCssPixel } from 'ngx-tethys/core';
 import { SafeAny } from 'ngx-tethys/types';
-import { THY_DROPDOWN_DEFAULT_WIDTH } from './dropdown.directive';
 
 export type ThyDropdownMenuDividerType = 'default' | 'crossing' | '';
 
+export const THY_DROPDOWN_DEFAULT_WIDTH = '240px';
+
 /**
  * @private
  */

src/dropdown/dropdown.directive.ts

@@ -1,17 +1,18 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ComponentType, OverlayRef } from '@angular/cdk/overlay';
+import { Platform } from '@angular/cdk/platform';
 import {
+    ChangeDetectorRef,
     Directive,
     ElementRef,
-    OnInit,
+    EventEmitter,
     Input,
     NgZone,
-    ViewContainerRef,
-    TemplateRef,
-    EventEmitter,
+    OnInit,
     Output,
-    ChangeDetectorRef
+    TemplateRef,
+    ViewContainerRef
 } from '@angular/core';
-import { ThyDropdownMenuComponent } from './dropdown-menu.component';
-import { ThyPopover, ThyPopoverConfig, ThyPopoverRef } from 'ngx-tethys/popover';
 import {
     ComponentTypeOrTemplateRef,
     InputBoolean,
@@ -20,16 +21,13 @@ import {
     ThyOverlayTrigger,
     ThyPlacement
 } from 'ngx-tethys/core';
-import { ComponentType, OverlayRef } from '@angular/cdk/overlay';
-import { Platform } from '@angular/cdk/platform';
-import { FocusMonitor } from '@angular/cdk/a11y';
+import { ThyPopover, ThyPopoverConfig, ThyPopoverRef } from 'ngx-tethys/popover';
 import { SafeAny } from 'ngx-tethys/types';
 import { coerceArray, helpers, isFunction, isTemplateRef } from 'ngx-tethys/util';
+import { ThyDropdownMenuComponent } from './dropdown-menu.component';
 
 export type ThyDropdownTrigger = 'click' | 'hover';
 
-export const THY_DROPDOWN_DEFAULT_WIDTH = '240px';
-
 type ThyDropdownMenu = ThyDropdownMenuComponent | TemplateRef<SafeAny> | ComponentType<SafeAny>;
 
 /**
@@ -102,10 +100,10 @@ export class ThyDropdownDirective extends ThyOverlayDirectiveBase implements OnI
     @Input() thyActiveClass: string = 'thy-dropdown-origin-active';
 
     /**
-     * 弹出框的参数，底层使用 Popover 组件, 默认为`{ placement: "bottomLeft", width: "240px", insideClosable: true, minWidth: "240px" }`
-     * @default { placement: "bottomLeft", width: "240px", insideClosable: true, minWidth: "240px" }
+     * 弹出框的参数，底层使用 Popover 组件, 默认为`{ placement: "bottomLeft", insideClosable: true, minWidth: "240px" }`
+     * @default { placement: "bottomLeft", insideClosable: true, minWidth: "240px" }
      */
-    @Input() thyPopoverOptions: Pick<ThyPopoverConfig, 'placement' | 'width' | 'height' | 'insideClosable' | 'minWidth'>;
+    @Input() thyPopoverOptions: Pick<ThyPopoverConfig, 'placement' | 'height' | 'insideClosable' | 'minWidth'>;
 
     /**
      * 弹出框的显示位置，会覆盖 thyPopoverOptions 中的 placement，`top` | `topLeft` | `topRight` | `bottom` | `bottomLeft` | `bottomRight` | `left` | `leftTop` | `leftBottom` | `right` | `rightTop` | `rightBottom`
@@ -165,8 +163,8 @@ export class ThyDropdownDirective extends ThyOverlayDirectiveBase implements OnI
             }
         }
 
-        const { placement, width, height, insideClosable, minWidth } = Object.assign(
-            { placement: 'bottomLeft', width: THY_DROPDOWN_DEFAULT_WIDTH, insideClosable: true },
+        const { placement, height, insideClosable, minWidth } = Object.assign(
+            { placement: 'bottomLeft', insideClosable: true },
             this.thyPopoverOptions
         );
         const config: ThyPopoverConfig = {
@@ -176,7 +174,6 @@ export class ThyDropdownDirective extends ThyOverlayDirectiveBase implements OnI
             offset: 0,
             panelClass: this.thyPanelClass,
             placement: this.thyPlacement ? this.thyPlacement : placement,
-            width,
             height,
             outsideClosable: true,
             insideClosable: helpers.isUndefined(this.thyMenuInsideClosable) ? insideClosable : this.thyMenuInsideClosable,

src/dropdown/examples/options/options.component.html

@@ -15,9 +15,6 @@
       <option value="rightBottom">rightBottom</option>
     </thy-select>
   </thy-form-group>
-  <thy-form-group thyLabelText="Width">
-    <input thyInput type="number" [(ngModel)]="popoverOptions.width" name="width" />
-  </thy-form-group>
   <thy-form-group thyLabelText="Height">
     <input thyInput type="number" [(ngModel)]="popoverOptions.height" name="height" />
   </thy-form-group>
@@ -32,8 +29,7 @@
   [thyDropdown]="menu"
   [thyPopoverOptions]="popoverOptions"
   [thyPlacement]="popoverOptions.placement"
-  [thyPanelClass]="'dropdown-panel-class'"
->
+  [thyPanelClass]="'dropdown-panel-class'">
   Dropdown <thy-icon thyIconName="caret-down"></thy-icon>
 </button>
 
@@ -80,7 +76,6 @@
   [thyDropdown]="menu"
   [thyPlacement]="placement"
   [thyPanelClass]="panelClass"
-  [thyMenuInsideClosable]="insideClosable"
->
+  [thyMenuInsideClosable]="insideClosable">
   Dropdown <thy-icon thyIconName="caret-down"></thy-icon>
 </button>

src/dropdown/examples/options/options.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { THY_DROPDOWN_DEFAULT_WIDTH } from 'ngx-tethys/dropdown';
 import { ThyPlacement } from 'ngx-tethys/core';
 
 @Component({
@@ -9,12 +8,10 @@ import { ThyPlacement } from 'ngx-tethys/core';
 export class ThyDropdownOptionsExampleComponent {
     popoverOptions: {
         placement?: ThyPlacement;
-        width?: string | number;
         height?: string | number;
         minWidth?: string | number;
     } = {
         placement: 'bottom',
-        width: parseInt(THY_DROPDOWN_DEFAULT_WIDTH.replace('px', ''), 10),
         height: 108,
         minWidth: '200px'
     };

src/dropdown/test/dropdown.spec.ts

@@ -6,7 +6,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ThyButtonModule } from 'ngx-tethys/button';
 import { ComponentTypeOrTemplateRef, ThyOverlayTrigger, ThyPlacement } from 'ngx-tethys/core';
-import { THY_DROPDOWN_DEFAULT_WIDTH, ThyDropdownDirective, ThyDropdownModule } from 'ngx-tethys/dropdown';
+import { ThyDropdownDirective, ThyDropdownModule } from 'ngx-tethys/dropdown';
 import { ThyIconModule } from 'ngx-tethys/icon';
 import { ThyPopoverConfig } from 'ngx-tethys/popover';
 import { dispatchMouseEvent, dispatchTouchEvent } from 'ngx-tethys/testing';
@@ -91,7 +91,6 @@ describe('basic dropdown', () => {
         expect(overlayContainerElement).toBeTruthy();
         const overlayPaneElement: HTMLElement = overlayContainerElement.querySelector('.cdk-overlay-pane');
         expect(overlayPaneElement).toBeTruthy();
-        expect(overlayPaneElement.style.width).toEqual('240px');
         expect(overlayPaneElement.classList.contains('thy-dropdown-pane')).toBeTruthy();
         tick(100);
         fixture.detectChanges();
@@ -615,6 +614,7 @@ describe('dropdown submenu', () => {
         tick();
         fixture.detectChanges();
         const dropdownMenu = getDropdownMenu();
+        expect(dropdownMenu.style.width).toEqual('240px');
         const submenu = dropdownMenu.querySelector('#submenu-default');
         expect(submenu.classList.contains('dropdown-submenu')).toBeTruthy();
         expect(submenu.parentElement.classList.contains('dropdown-menu-item')).toBeTruthy();
@@ -955,7 +955,6 @@ describe('dropdown options', () => {
     it('should modify style when popoverOptions has changed', fakeAsync(() => {
         fixture.componentInstance.placement = 'left';
         fixture.componentInstance.popoverOptions = {
-            width: '800px',
             height: '20px'
         };
         fixture.detectChanges();
@@ -964,7 +963,6 @@ describe('dropdown options', () => {
         tick();
         const boundingBox: HTMLElement = overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box');
         const overlayPaneElement: HTMLElement = overlayContainerElement.querySelector('.cdk-overlay-pane');
-        expect(overlayPaneElement.style.width).toEqual('800px');
         expect(overlayPaneElement.style.height).toEqual('20px');
         expect(boundingBox.style.top).toEqual('0px');
         dropdown.hide();
@@ -996,7 +994,6 @@ describe('dropdown options', () => {
             expect(calledConfig).toEqual(
                 jasmine.objectContaining({
                     placement: 'bottomLeft',
-                    width: THY_DROPDOWN_DEFAULT_WIDTH,
                     height: undefined,
                     insideClosable: true,
                     hasBackdrop: false,
@@ -1013,7 +1010,6 @@ describe('dropdown options', () => {
             expect(calledConfig).toEqual(
                 jasmine.objectContaining({
                     placement: 'bottomLeft',
-                    width: THY_DROPDOWN_DEFAULT_WIDTH,
                     height: undefined,
                     insideClosable: true,
                     hasBackdrop: false,
@@ -1025,15 +1021,13 @@ describe('dropdown options', () => {
 
         it('should get custom options', () => {
             dropdown.thyPopoverOptions = {
-                height: '100px',
-                width: '100px'
+                height: '100px'
             };
             expect(calledConfig).toBeUndefined();
             dropdown.createOverlay();
             expect(calledConfig).toEqual(
                 jasmine.objectContaining({
-                    height: '100px',
-                    width: '100px'
+                    height: '100px'
                 })
             );
         });
@@ -1177,7 +1171,7 @@ describe('immediate render dropdown', () => {
         expect(overlayContainerElement).toBeTruthy();
         const overlayPaneElement: HTMLElement = overlayContainerElement.querySelector('.cdk-overlay-pane');
         expect(overlayPaneElement).toBeTruthy();
-        expect(overlayPaneElement.style.width).toEqual('240px');
+        expect((overlayPaneElement.querySelector('.thy-dropdown-menu') as HTMLElement).style.width).toEqual('240px');
         expect(overlayPaneElement.classList.contains('thy-dropdown-pane')).toBeTruthy();
         const dropdownMenuElement: HTMLElement = overlayContainerElement.querySelector('.thy-dropdown-menu');
         expect(dropdownMenuElement).toBeTruthy();