feat: tooltip add animation; fix: autocomplete init position

.changeset/chatty-dolphins-kick.md

@@ -0,0 +1,6 @@
+---
+'@alauda/ui': patch
+---
+
+feat: tooltip add animation
+fix: autocomplete init position

src/autocomplete/autocomplete.component.ts

@@ -54,20 +54,23 @@ export class AutocompleteComponent implements AfterContentInit {
 
   hasVisibleSuggestion$: Observable<boolean>;
   hasContent$: Observable<boolean>;
+  visibles$: Observable<boolean[]>;
 
   directive$$ = new ReplaySubject<AutoCompleteDirective>(1);
 
   constructor(private readonly cdr: ChangeDetectorRef) {}
 
   ngAfterContentInit() {
-    this.hasVisibleSuggestion$ = this.suggestions.changes.pipe(
+    this.visibles$ = this.suggestions.changes.pipe(
       startWith(this.suggestions),
       switchMap((suggestions: QueryList<SuggestionComponent>) =>
         suggestions.length > 0
           ? combineLatest(suggestions.map(suggestion => suggestion.visible$))
           : of([] as boolean[]),
       ),
       debounceTime(0),
+    );
+    this.hasVisibleSuggestion$ = this.visibles$.pipe(
       map(visible => visible.some(Boolean)),
       withLatestFrom(this.directive$$),
       map(([hasVisibleSuggestion, directive]) => {
@@ -105,5 +108,19 @@ export class AutocompleteComponent implements AfterContentInit {
         }
       }),
     );
+
+    this.visibles$
+      .pipe(
+        distinctUntilChanged(
+          (prev, cur) => JSON.stringify(prev) === JSON.stringify(cur),
+        ),
+      )
+      .subscribe(() => {
+        this.directive$$.pipe(first()).subscribe(directive => {
+          window.requestAnimationFrame(() => {
+            directive.overlayRef?.updatePosition();
+          });
+        });
+      });
   }
 }

src/autocomplete/autocomplete.directive.ts

@@ -82,11 +82,8 @@ export class AutoCompleteDirective
 
   declare innerSelector: string;
 
-  @Output('auiAutocompleteShow')
-  override show = new EventEmitter<void>();
-
-  @Output('auiAutocompleteHide')
-  override hide = new EventEmitter<void>();
+  @Output('auiAutocompleteVisibleChange')
+  override visibleChange = new EventEmitter<boolean>();
 
   @Output('auiAutocompleteSelected')
   selected = new EventEmitter<string>();
@@ -135,11 +132,8 @@ export class AutoCompleteDirective
   }
 
   ngOnInit() {
-    this.show.subscribe(() => {
-      this.updateSuggestionsContext();
-    });
-    this.hide.subscribe(() => {
-      this.resetFocusedSuggestion();
+    this.visibleChange.pipe(takeUntil(this.destroy$)).subscribe(visible => {
+      this[visible ? 'updateSuggestionsContext' : 'resetFocusedSuggestion']();
     });
 
     if (this.ngControl) {
@@ -196,7 +190,7 @@ export class AutoCompleteDirective
   onInput(event: Event) {
     const value = (event.target as HTMLInputElement).value;
     this.inputValue$$.next(value);
-    this.createTooltip();
+    this.show();
   }
 
   onKeyDown(event: KeyboardEvent) {
@@ -219,7 +213,7 @@ export class AutoCompleteDirective
         }
         break;
       case 'Escape':
-        this.disposeTooltip();
+        this.hide();
         event.stopPropagation();
         event.preventDefault();
         break;
@@ -249,11 +243,11 @@ export class AutoCompleteDirective
     this.inputValue$$.next(isArrCtrl ? '' : value);
 
     this.selected.emit(value);
-    this.disposeTooltip();
+    this.hide();
   }
 
-  override createTooltip() {
-    super.createTooltip();
+  override show() {
+    super.show();
     this.autoFocusFirstSuggestion();
   }
 
@@ -281,7 +275,7 @@ export class AutoCompleteDirective
 
   private focusSuggestionDir(dir: 'down' | 'up') {
     if (!this.isCreated) {
-      this.createTooltip();
+      this.show();
       return;
     }
     const visibleSuggestions = this.autocomplete.suggestions.filter(

src/date-picker/date-picker/date-picker.component.ts

@@ -81,7 +81,7 @@ export class DatePickerComponent
   placeholder: string;
 
   @Output()
-  openChange = new EventEmitter<boolean>();
+  visibleChange = new EventEmitter<boolean>();
 
   value: Dayjs;
   DatePickerType = DatePickerType;
@@ -117,4 +117,11 @@ export class DatePickerComponent
     this.value = null;
     this.emitValue(null);
   }
+
+  tooltipVisibleChange(visible: boolean) {
+    this.visibleChange.next(visible);
+    if (!visible) {
+      this.emitValue(this.value);
+    }
+  }
 }

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

@@ -4,6 +4,7 @@
   [format]="format"
   style="display: flex"
   [auiTooltip]="template"
+  [auiDisableAnimation]="true"
   auiTooltipType="info"
   auiTooltipClass="date-picker-wrapper"
   [disabled]="!!disabled"
@@ -12,8 +13,7 @@
   [auiTooltipDisabled]="!!disabled"
   [auiTooltipHideOnClick]="true"
   [placeholder]="placeholder"
-  (auiTooltipHide)="openChange.next(false); emitValue(value)"
-  (auiTooltipShow)="openChange.next(true)"
+  (auiTooltipVisibleChange)="tooltipVisibleChange($event)"
   (clear)="clearValue()"
   #tooltip="auiTooltip"
 ></aui-date-picker-trigger>
@@ -36,6 +36,6 @@
     [maxDate]="maxDate"
     (click)="$event.stopImmediatePropagation()"
     (clear)="clearValue()"
-    (confirm)="tooltip.disposeTooltip(); emitValue(value)"
+    (confirm)="tooltip.hide(); emitValue(value)"
   ></aui-date-picker-panel>
 </ng-template>

src/date-picker/range-picker/range-picker.component.ts

@@ -10,7 +10,7 @@ import {
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import dayjs, { ConfigType, Dayjs } from 'dayjs';
 
-import { CommonFormControl } from '../../form/common-form';
+import { CommonFormControl } from '../../form';
 import { ComponentSize } from '../../types';
 import { DisabledDateFn, DisabledTimeFn } from '../date-picker.type';
 
@@ -69,7 +69,7 @@ export class RangePickerComponent extends CommonFormControl<
   size: ComponentSize;
 
   @Output()
-  openChange = new EventEmitter<boolean>();
+  visibleChange = new EventEmitter<boolean>();
 
   value: [Dayjs, Dayjs];
 
@@ -87,4 +87,11 @@ export class RangePickerComponent extends CommonFormControl<
     this.value = null;
     this.emitValue(null);
   }
+
+  tooltipVisibleChange(visible: boolean) {
+    this.visibleChange.next(visible);
+    if (!visible) {
+      this.emitValue(this.value);
+    }
+  }
 }

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

@@ -4,6 +4,7 @@
   [size]="size"
   [value]="value"
   [auiTooltip]="template"
+  [auiDisableAnimation]="true"
   [disabled]="!!disabled"
   style="display: flex"
   auiTooltipType="info"
@@ -12,8 +13,7 @@
   auiTooltipTrigger="click"
   [auiTooltipHideOnClick]="true"
   [auiTooltipDisabled]="!!disabled"
-  (auiTooltipHide)="openChange.next(false); emitValue(value)"
-  (auiTooltipShow)="openChange.next(true)"
+  (auiTooltipVisibleChange)="tooltipVisibleChange($event)"
   (clear)="clearValue()"
   #tooltip="auiTooltip"
 ></aui-date-picker-trigger>
@@ -33,6 +33,6 @@
     [maxDate]="maxDate"
     (click)="$event.stopImmediatePropagation()"
     (clear)="clearValue()"
-    (confirm)="tooltip.disposeTooltip(); emitValue(value)"
+    (confirm)="tooltip.hide(); emitValue(value)"
   ></aui-date-range-picker-panel>
 </ng-template>

src/dropdown/dropdown.directive.ts

@@ -11,7 +11,7 @@ import {
   Renderer2,
   ViewContainerRef,
 } from '@angular/core';
-import { debounceTime } from 'rxjs';
+import { takeUntil } from 'rxjs';
 
 import { BaseTooltip, TooltipTrigger, TooltipType } from '../tooltip';
 
@@ -54,11 +54,8 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
   @Input('auiDropdownHideOnClick')
   override hideOnClick = true;
 
-  @Output('auiDropdownShow')
-  override show = new EventEmitter<void>();
-
-  @Output('auiDropdownHide')
-  override hide = new EventEmitter<void>();
+  @Output('auiDropdownVisibleChange')
+  override visibleChange = new EventEmitter<boolean>();
 
   private _menu: MenuComponent;
 
@@ -78,16 +75,16 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
   }
 
   ngOnInit() {
-    this.show.pipe(debounceTime(0)).subscribe(() => {
-      if (this.menu.lazyContent) {
-        this.menu.lazyContent.attach(this.lazyContentContext);
-        this.updatePosition();
-      }
-    });
-
-    this.hide.subscribe(() => {
+    this.visibleChange.pipe(takeUntil(this.destroy$)).subscribe(visible => {
       if (this.menu.lazyContent) {
-        this.menu.lazyContent.detach();
+        if (visible) {
+          setTimeout(() => {
+            this.menu.lazyContent.attach(this.lazyContentContext);
+            this.updatePosition();
+          });
+        } else {
+          this.menu.lazyContent.detach();
+        }
       }
     });
   }

src/dropdown/submenu/submenu.component.html

@@ -1,6 +1,7 @@
 <button
   [class]="className"
   [auiTooltip]="menu.template"
+  [auiDisableAnimation]="true"
   [auiTooltipDisabled]="disabled"
   [auiTooltipTrigger]="trigger"
   [auiTooltipHideOnClick]="true"

src/select/base-select.ts

@@ -294,11 +294,11 @@ export abstract class BaseSelect<T, V = T>
   }
 
   openOption() {
-    this.tooltipRef.createTooltip();
+    this.tooltipRef.show();
   }
 
   closeOption() {
-    this.tooltipRef.disposeTooltip();
+    this.tooltipRef.hide();
   }
 
   onShowOptions() {

src/select/multi-select/multi-select.component.html

@@ -3,12 +3,12 @@
   #selectRef
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
+  [auiDisableAnimation]="true"
   [auiTooltipDisabled]="disabled"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"
   auiTooltipType="plain"
-  (auiTooltipShow)="onShowOptions()"
-  (auiTooltipHide)="onHideOptions()"
+  (auiTooltipVisibleChange)="onVisibleOptions($event)"
   (mousedown)="$event.preventDefault()"
   [style.max-height]="maxHeight"
 >

src/select/multi-select/multi-select.component.spec.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MultiSelectComponent, SelectModule } from '..';
 import { ComponentSize } from '../../types';
@@ -22,7 +23,7 @@ describe('multiSelectComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [SelectModule, FormsModule],
+      imports: [SelectModule, FormsModule, BrowserAnimationsModule],
       declarations: [TestComponent],
     });
     fixture = TestBed.createComponent(TestComponent);
@@ -76,6 +77,7 @@ describe('multiSelectComponent', () => {
     ).toBe(2);
     el.dispatchEvent(new Event('click'));
     fixture.detectChanges();
+    tick();
     ocEl
       .querySelectorAll('.aui-option')
       .item(2)

src/select/multi-select/multi-select.component.ts

@@ -265,15 +265,15 @@ export class MultiSelectComponent<T = unknown>
     );
   }
 
-  override onShowOptions() {
-    super.onShowOptions();
-    this.inputRef.nativeElement.focus();
-  }
-
-  override onHideOptions() {
-    super.onHideOptions();
-    this.inputRef.nativeElement.value = '';
-    this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
+  onVisibleOptions(visible: boolean) {
+    if (visible) {
+      super.onShowOptions();
+      this.inputRef.nativeElement.focus();
+    } else {
+      super.onHideOptions();
+      this.inputRef.nativeElement.value = '';
+      this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
+    }
   }
 
   override onInput(event: Event) {

src/select/select.component.html

@@ -7,12 +7,12 @@
   #selectRef
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
+  [auiDisableAnimation]="true"
   [auiTooltipDisabled]="disabled"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"
   auiTooltipType="plain"
-  (auiTooltipShow)="onShowOptions()"
-  (auiTooltipHide)="onHideOptions()"
+  (auiTooltipVisibleChange)="onVisibleOptions($event)"
 >
   <aui-input-group>
     <input

src/select/select.component.spec.ts

@@ -3,6 +3,7 @@ import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, inject } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ComponentSize } from '../types';
 
@@ -19,7 +20,7 @@ describe('SelectComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [SelectModule, FormsModule],
+      imports: [SelectModule, FormsModule, BrowserAnimationsModule],
       declarations: [TestComponent],
     });
     fixture = TestBed.createComponent(TestComponent);