Popover

1import {
2  arrow,
3  autoUpdate,
4  computePosition,
5  flip,
6  offset,
7  type Placement,
8  type Strategy,
9  shift,
10} from "@floating-ui/dom";
11import { css, html, LitElement, type PropertyValues } from "lit";
12import { customElement, property, query, state } from "lit/decorators.js";
13import { TW } from "@/lib/tailwindMixin";
14import { cn } from "@/lib/utils";
15 
16@customElement("ui-popover")
17export class Popover extends TW(LitElement) {
18  @property() placement: Placement = "top";
19  @property({ type: Number }) distance = 0;
20  @property({ type: Number }) skidding = 0;
21  @property({ type: Boolean }) flip = false;
22  @property({ type: Boolean }) shift = false;
23  @property({ type: Boolean }) arrow = false;
24  @property({ type: Number }) arrowPadding = 0;
25  @property() strategy: Strategy = "absolute";
26  @property({ type: Boolean, reflect: true }) active = false;
27  @property({ attribute: false }) anchor?: Element | string;
28 
29  @query('[part="popup"]') popup!: HTMLElement;
30  @query('[part="arrow"]') arrowElement?: HTMLElement;
31 
32  @state() private currentPlacement: Placement = "top";
33 
34  private cleanup?: () => void;
35  private anchorEl?: Element | null;
36 
37  static styles = css`
38    :host {
39      display: contents;
40    }
41  `;
42 
43  override async connectedCallback() {
44    super.connectedCallback();
45    await this.updateComplete;
46    this.handleAnchorChange();
47  }
48 
49  override disconnectedCallback() {
50    super.disconnectedCallback();
51    this.stop();
52  }
53 
54  override async updated(changedProperties: PropertyValues) {
55    super.updated(changedProperties);
56 
57    if (changedProperties.has("anchor")) {
58      await this.handleAnchorChange();
59    }
60 
61    if (changedProperties.has("active")) {
62      if (this.active) {
63        this.start();
64      } else {
65        this.stop();
66      }
67    }
68 
69    if (this.active) {
70      await this.updateComplete;
71      this.reposition();
72    }
73  }
74 
75  private async handleAnchorChange() {
76    await this.stop();
77 
78    if (this.anchor && typeof this.anchor === "string") {
79      const root = this.getRootNode() as Document | ShadowRoot;
80      this.anchorEl = root.getElementById(this.anchor);
81    } else if (this.anchor instanceof Element) {
82      this.anchorEl = this.anchor;
83    } else if (
84      this.anchor &&
85      typeof this.anchor === "object" &&
86      "getBoundingClientRect" in this.anchor
87    ) {
88      this.anchorEl = this.anchor;
89    } else {
90      const slot = this.renderRoot.querySelector<HTMLSlotElement>(
91        'slot[name="anchor"]',
92      );
93// … truncated