feat: use template menu

Author: igauch

.changeset/famous-beers-sip.md

@@ -0,0 +1,6 @@
+---
+'@alauda/ui': minor
+---
+
+feat: select, dropdown, tree-select and autocomplete add animation
+[BREAKING CHANGE] refactor: remove auiMenuContent directive; When using the auiDropdown directive, you cannot directly use aui-menu, but need to wrap it with ng-template, because the aui-menu template has been removed

src/autocomplete/autocomplete.directive.ts

@@ -29,6 +29,7 @@ import {
 } from 'rxjs';
 
 import { BaseTooltip, TooltipTrigger, TooltipType } from '../tooltip';
+import { AnimationType } from '../tooltip/animations';
 import { scrollIntoView } from '../utils';
 
 import { AutocompleteComponent } from './autocomplete.component';
@@ -93,6 +94,8 @@ export class AutoCompleteDirective
   @Input('auiAutocompleteAutoPatch')
   autoPatch = true;
 
+  override animationType: AnimationType = 'scaleY';
+
   private _autocomplete: AutocompleteComponent;
   private focusedSuggestion: SuggestionComponent;
 

src/core/animation/animation-consts.ts

@@ -3,3 +3,8 @@ export enum AnimationDuration {
   Base = '0.24s',
   Fast = '0.2s',
 }
+
+export enum TimingFunction {
+  easeOut = 'cubic-bezier(0, 0, 0.2, 1)',
+  easeInOut = 'cubic-bezier(0.38, 0, 0.24, 1)',
+}

src/date-picker/date-picker/date-picker.template.html

@@ -4,7 +4,7 @@
   [format]="format"
   style="display: flex"
   [auiTooltip]="template"
-  [auiDisableAnimation]="true"
+  auiTooltipAnimType="none"
   auiTooltipType="info"
   auiTooltipClass="date-picker-wrapper"
   [disabled]="!!disabled"

src/date-picker/range-picker/range-picker.template.html

@@ -4,7 +4,7 @@
   [size]="size"
   [value]="value"
   [auiTooltip]="template"
-  [auiDisableAnimation]="true"
+  auiTooltipAnimType="none"
   [disabled]="!!disabled"
   style="display: flex"
   auiTooltipType="info"

src/dropdown/dropdown-button/dropdown-button.component.html

@@ -23,3 +23,4 @@
     <aui-icon icon="angle_down"></aui-icon>
   </button>
 </div>
+<ng-template #menu><ng-content select="aui-menu"></ng-content></ng-template>

src/dropdown/dropdown-button/dropdown-button.component.ts

@@ -3,7 +3,6 @@ import {
   AfterContentInit,
   ChangeDetectionStrategy,
   Component,
-  ContentChild,
   ContentChildren,
   EventEmitter,
   Input,
@@ -19,7 +18,6 @@ import { IconComponent } from '../../icon/icon.component';
 import { ComponentSize } from '../../types';
 import { Bem, buildBem, coerceAttrBoolean } from '../../utils';
 import { DropdownDirective } from '../dropdown.directive';
-import { MenuComponent } from '../menu/menu.component';
 import { MenuItemComponent } from '../menu-item/menu-item.component';
 
 @Component({
@@ -53,9 +51,6 @@ export class DropdownButtonComponent implements AfterContentInit {
   @Output()
   buttonClick = new EventEmitter<Event>();
 
-  @ContentChild(MenuComponent, { static: true })
-  menu: MenuComponent;
-
   @ContentChildren(MenuItemComponent, { descendants: true })
   private readonly menuItems: QueryList<MenuItemComponent>;
 

src/dropdown/dropdown.directive.ts

@@ -6,17 +6,15 @@ import {
   EventEmitter,
   Input,
   NgZone,
-  OnInit,
   Output,
   Renderer2,
   ViewContainerRef,
 } from '@angular/core';
-import { takeUntil } from 'rxjs';
 
 import { BaseTooltip, TooltipTrigger, TooltipType } from '../tooltip';
+import { AnimationType } from '../tooltip/animations';
 
 import { DropdownActiveDirective } from './dropdown-active.directive';
-import { MenuComponent } from './menu/menu.component';
 
 @Directive({
   selector: '[auiDropdown]',
@@ -26,6 +24,8 @@ import { MenuComponent } from './menu/menu.component';
     'disabled:auiDropdownDisabled',
     'position:auiDropdownPosition',
     'trigger:auiDropdownTrigger',
+    'context:auiDropdownContext',
+    'content:auiDropdown',
   ],
   providers: [
     {
@@ -35,30 +35,14 @@ import { MenuComponent } from './menu/menu.component';
   ],
   standalone: true,
 })
-export class DropdownDirective extends BaseTooltip implements OnInit {
-  @Input('auiDropdown')
-  get menu() {
-    return this._menu;
-  }
-
-  set menu(value) {
-    if (value === this._menu) {
-      return;
-    }
-    this._menu = value;
-    this.content = value.template;
-  }
-
-  @Input('auiDropdownContext')
-  lazyContentContext: any;
-
+export class DropdownDirective extends BaseTooltip {
   @Input('auiDropdownHideOnClick')
   override hideOnClick = true;
 
   @Output('auiDropdownVisibleChange')
   override visibleChange = new EventEmitter<boolean>();
 
-  private _menu: MenuComponent;
+  override animationType: AnimationType = 'scaleY';
 
   constructor(
     overlay: Overlay,
@@ -73,22 +57,5 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
     this.type = TooltipType.Plain;
     this.position = 'bottom end';
     this.trigger = TooltipTrigger.Click;
-    this.disableAnimation = false;
-    this.animationType = 'scaleY';
-  }
-
-  ngOnInit() {
-    this.visibleChange.pipe(takeUntil(this.destroy$)).subscribe(visible => {
-      if (this.menu.lazyContent) {
-        if (visible) {
-          setTimeout(() => {
-            this.menu.lazyContent.attach(this.lazyContentContext);
-            this.updatePosition();
-          });
-        } else {
-          this.menu.lazyContent.detach();
-        }
-      }
-    });
   }
 }

src/dropdown/dropdown.module.ts

@@ -9,7 +9,6 @@ import { DropdownActiveDirective } from './dropdown-active.directive';
 import { DropdownButtonComponent } from './dropdown-button/dropdown-button.component';
 import { DropdownDirective } from './dropdown.directive';
 import { MenuGroupTitleDirective } from './helper-directives';
-import { MenuContentDirective } from './menu/menu-content.directive';
 import { MenuComponent } from './menu/menu.component';
 import { MenuGroupComponent } from './menu-group/menu-group.component';
 import { MenuItemComponent } from './menu-item/menu-item.component';
@@ -29,7 +28,6 @@ import { SubmenuComponent } from './submenu/submenu.component';
     MenuGroupTitleDirective,
     MenuItemComponent,
     SubmenuComponent,
-    MenuContentDirective,
   ],
   exports: [
     DropdownDirective,
@@ -40,7 +38,6 @@ import { SubmenuComponent } from './submenu/submenu.component';
     MenuGroupTitleDirective,
     MenuItemComponent,
     SubmenuComponent,
-    MenuContentDirective,
   ],
 })
 export class DropdownModule {}

src/dropdown/index.ts

@@ -5,7 +5,6 @@ export * from './dropdown-active.directive';
 export * from './dropdown-button/dropdown-button.component';
 export * from './helper-directives';
 export * from './menu/menu.component';
-export * from './menu/menu-content.directive';
 export * from './menu-group/menu-group.component';
 export * from './menu-item/menu-item.component';
 export * from './submenu/submenu.component';

src/dropdown/menu/menu-content.directive.ts

@@ -1,3 +1 @@
-<ng-template>
-  <div [class]="bem.block(size)"><ng-content></ng-content></div>
-</ng-template>
+<div [class]="bem.block(size)"><ng-content></ng-content></div>

src/dropdown/menu/menu.component.html

@@ -1,10 +1,6 @@
 @import '../../theme/var';
 @import '../../theme/mixin';
 
-aui-menu {
-  display: none;
-}
-
 $max-width: 280px;
 
 $button-size: (

src/dropdown/menu/menu.component.scss

@@ -1,18 +1,13 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  ContentChild,
   Input,
-  TemplateRef,
-  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 
 import { ComponentSize } from '../../types';
 import { Bem, buildBem } from '../../utils';
 
-import { MenuContentDirective } from './menu-content.directive';
-
 @Component({
   selector: 'aui-menu',
   templateUrl: './menu.component.html',
@@ -27,10 +22,4 @@ export class MenuComponent {
 
   @Input()
   size: ComponentSize = ComponentSize.Small;
-
-  @ViewChild(TemplateRef, { static: true })
-  template: TemplateRef<any>;
-
-  @ContentChild(MenuContentDirective, { static: true })
-  lazyContent: MenuContentDirective;
 }

src/dropdown/menu/menu.component.ts

@@ -1,7 +1,7 @@
 <button
   [class]="className"
-  [auiTooltip]="menu.template"
-  auiTooltipAnimationType="scaleY"
+  [auiTooltip]="menu"
+  auiTooltipAnimType="scaleY"
   [auiTooltipDisabled]="disabled"
   [auiTooltipTrigger]="trigger"
   [auiTooltipHideOnClick]="true"
@@ -18,9 +18,8 @@
   ></aui-icon>
 </button>
 
-<aui-menu
-  #menu
-  [size]="size"
->
-  <ng-content select="aui-menu-item"></ng-content>
-</aui-menu>
+<ng-template #menu>
+  <aui-menu [size]="size">
+    <ng-content select="aui-menu-item"></ng-content>
+  </aui-menu>
+</ng-template>

src/dropdown/submenu/submenu.component.html

@@ -118,6 +118,7 @@ exports[`PaginatorComponent should change page size correctly 1`] = `
         >
           <aui-select>
             <div
+              auitooltipanimtype="scaleY"
               auitooltipposition="bottom start"
               auitooltiptrigger="click"
               auitooltiptype="plain"
@@ -395,6 +396,7 @@ exports[`PaginatorComponent should render current template 1`] = `
         >
           <aui-select>
             <div
+              auitooltipanimtype="scaleY"
               auitooltipposition="bottom start"
               auitooltiptrigger="click"
               auitooltiptype="plain"
@@ -681,6 +683,7 @@ exports[`PaginatorComponent should render current template 2`] = `
         >
           <aui-select>
             <div
+              auitooltipanimtype="scaleY"
               auitooltipposition="bottom start"
               auitooltiptrigger="click"
               auitooltiptype="plain"