diff --git a/apps/docs-app/app/components/f/components/popover.gts b/apps/docs-app/app/components/f/components/popover.gts index fc24bf32..d00cd121 100644 --- a/apps/docs-app/app/components/f/components/popover.gts +++ b/apps/docs-app/app/components/f/components/popover.gts @@ -36,6 +36,9 @@ export default class extends Component { @tracked arrow: boolean = true; + @tracked + delay?: number; + @tracked flip: boolean = false; @@ -62,6 +65,7 @@ export default class extends Component { + + + { id = `popover-${crypto.randomUUID()}`; - @tracked - isShown = false; - @tracked adjustedSide: Direction = 'bottom'; - get hasArrow() { - return this.args.arrow ?? true; - } - - get offset() { - const defaultOffset = this.hasArrow ? getRemValue() / 2 : 0; - const { offset } = this.args; - const numOffset = - typeof offset === 'number' ? offset : parseFloat(offset ?? '0'); + @tracked + isShown = false; - return numOffset + defaultOffset; + get control() { + return this.args.controlElement ?? this._control; } - get placement() { - let placement: Placement | Side = SIDE_TRANSLATION[this.side]; - if (this.args.alignment) { - placement += `-${this.args.alignment}`; - } - return placement as Placement; + get hasArrow() { + return this.args.arrow ?? true; } get middleware() { @@ -147,41 +136,30 @@ export default class Popover extends Component { return middleware; } - get side(): Direction { - return this.args.side ?? 'bottom'; - } + get offset() { + const defaultOffset = this.hasArrow ? getRemValue() / 2 : 0; + const { offset } = this.args; + const numOffset = + typeof offset === 'number' ? offset : parseFloat(offset ?? '0'); - get control() { - return this.args.controlElement ?? this._control; + return numOffset + defaultOffset; } - setArrow = (popover: HTMLElement) => { - this.arrow = popover; - }; - - show = async (evtOrInput: Event | HTMLInputElement) => { - if (this.isShown) { - return; + get placement() { + let placement: Placement | Side = SIDE_TRANSLATION[this.side]; + if (this.args.alignment) { + placement += `-${this.args.alignment}`; } + return placement as Placement; + } - const { currentTarget } = evtOrInput as Event; - this.isShown = true; - - await this.args.onShow?.(); - - if (evtOrInput instanceof HTMLInputElement) { - this._control = evtOrInput; - this.showPopover(); - } else if ( - evtOrInput instanceof Event && - currentTarget instanceof HTMLElement - ) { - this._control = currentTarget; - this.showPopover(); - } - }; + get side(): Direction { + return this.args.side ?? 'bottom'; + } hide = async () => { + this.triggerDisplay.cancelAll(); + if (!this.isShown) { return; } @@ -192,16 +170,22 @@ export default class Popover extends Component { this._control = null; }; - toggle = async (evt: Event) => { - const action = this.isShown ? this.hide : this.show; - - await action(evt); - }; - initPopover = (popover: HTMLElement) => { this.popover = popover; }; + setArrow = (popover: HTMLElement) => { + this.arrow = popover; + }; + + show = async (evtOrInput: Event | HTMLInputElement) => { + if (this.isShown) { + return; + } + + this.triggerDisplay.perform(evtOrInput); + } + showPopover = async () => { if (!this.control || !this.popover) { return; @@ -246,6 +230,35 @@ export default class Popover extends Component { }); }; + toggle = async (evt: Event) => { + const action = this.isShown ? this.hide : this.show; + + await action(evt); + }; + + triggerDisplay = restartableTask(async (evtOrInput: Event | HTMLInputElement) => { + const { currentTarget } = evtOrInput as Event; + + if (this.args.delay) { + await timeout(this.args.delay); + } + + this.isShown = true; + + await this.args.onShow?.(); + + if (evtOrInput instanceof HTMLInputElement) { + this._control = evtOrInput; + this.showPopover(); + } else if ( + evtOrInput instanceof Event && + currentTarget instanceof HTMLElement + ) { + this._control = currentTarget; + this.showPopover(); + } + }); + } -const Tooltip: TOC =