@chromvoid/uikit 0.1.0 → 0.2.0

package/dist/components/cv-popover-positioning.js

@@ -0,0 +1,112 @@
+const mirrorSideMap = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+const orthogonalSidesMap = {
+    top: ['right', 'left'],
+    right: ['bottom', 'top'],
+    bottom: ['right', 'left'],
+    left: ['bottom', 'top'],
+};
+function parsePlacement(placement) {
+    const [side, align = 'center'] = placement.split('-');
+    return { side, align };
+}
+function formatPlacement(side, align) {
+    if (align === 'center') {
+        return side;
+    }
+    return `${side}-${align}`;
+}
+function computeCoords(anchorRect, panelRect, placement, offset) {
+    const { side, align } = parsePlacement(placement);
+    let left = 0;
+    let top = 0;
+    if (side === 'top' || side === 'bottom') {
+        if (align === 'start') {
+            left = anchorRect.left;
+        }
+        else if (align === 'end') {
+            left = anchorRect.right - panelRect.width;
+        }
+        else {
+            left = anchorRect.left + (anchorRect.width - panelRect.width) / 2;
+        }
+        top = side === 'top' ? anchorRect.top - panelRect.height - offset : anchorRect.bottom + offset;
+    }
+    else {
+        if (align === 'start') {
+            top = anchorRect.top;
+        }
+        else if (align === 'end') {
+            top = anchorRect.bottom - panelRect.height;
+        }
+        else {
+            top = anchorRect.top + (anchorRect.height - panelRect.height) / 2;
+        }
+        left = side === 'left' ? anchorRect.left - panelRect.width - offset : anchorRect.right + offset;
+    }
+    return {
+        left: Math.round(left),
+        top: Math.round(top),
+        placement,
+    };
+}
+function fitsViewport(position, panelRect, viewport) {
+    return (position.left >= viewport.padding &&
+        position.top >= viewport.padding &&
+        position.left + panelRect.width <= viewport.width - viewport.padding &&
+        position.top + panelRect.height <= viewport.height - viewport.padding);
+}
+function clampToViewport(position, panelRect, viewport) {
+    const maxLeft = Math.max(viewport.padding, viewport.width - panelRect.width - viewport.padding);
+    const maxTop = Math.max(viewport.padding, viewport.height - panelRect.height - viewport.padding);
+    return {
+        left: Math.min(Math.max(position.left, viewport.padding), maxLeft),
+        top: Math.min(Math.max(position.top, viewport.padding), maxTop),
+        placement: position.placement,
+    };
+}
+export function getPlacementFallbacks(placement) {
+    const { side, align } = parsePlacement(placement);
+    const candidates = [
+        placement,
+        formatPlacement(mirrorSideMap[side], align),
+        ...orthogonalSidesMap[side].map((nextSide) => formatPlacement(nextSide, align)),
+    ];
+    return Array.from(new Set(candidates));
+}
+export function getPositionAreaForPlacement(placement) {
+    const { side, align } = parsePlacement(placement);
+    const row = side === 'top'
+        ? 'top'
+        : side === 'bottom'
+            ? 'bottom'
+            : align === 'start'
+                ? 'top'
+                : align === 'end'
+                    ? 'bottom'
+                    : 'center';
+    const column = side === 'left'
+        ? 'left'
+        : side === 'right'
+            ? 'right'
+            : align === 'start'
+                ? 'left'
+                : align === 'end'
+                    ? 'right'
+                    : 'center';
+    return `${row} ${column}`;
+}
+export function resolvePopoverPosition(anchorRect, panelRect, placement, offset, viewport) {
+    const candidates = getPlacementFallbacks(placement);
+    for (const candidate of candidates) {
+        const position = computeCoords(anchorRect, panelRect, candidate, offset);
+        if (fitsViewport(position, panelRect, viewport)) {
+            return position;
+        }
+    }
+    return clampToViewport(computeCoords(anchorRect, panelRect, placement, offset), panelRect, viewport);
+}

package/dist/components/cv-popover.d.ts

@@ -1,7 +1,19 @@
+import { type PopoverDismissIntent, type PopoverOpenSource } from '@chromvoid/headless-ui/popover';
 import type { PropertyValues } from 'lit';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
-type CVPopoverPlacement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
-type CVPopoverAnchor = 'trigger' | 'host';
+import { type CVPopoverPlacement } from './cv-popover-positioning.js';
+export interface CVPopoverEventDetail {
+    open: boolean;
+    openedBy: string | null;
+    dismissIntent: string | null;
+}
+export type { CVPopoverPlacement } from './cv-popover-positioning.js';
+export type CVPopoverAnchor = 'trigger' | 'host';
+export type CVPopoverTriggerMode = 'internal' | 'external';
+export interface CVPopoverShowOptions {
+    source?: HTMLElement;
+    openedBy?: PopoverOpenSource;
+}
 export declare class CVPopover extends ReatomLitElement {
     static elementName: string;
     static get properties(): {
@@ -40,6 +52,11 @@ export declare class CVPopover extends ReatomLitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        triggerMode: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
         offset: {
             type: NumberConstructor;
             reflect: boolean;
@@ -57,11 +74,19 @@ export declare class CVPopover extends ReatomLitElement {
     closeOnOutsideFocus: boolean;
     placement: CVPopoverPlacement;
     anchor: CVPopoverAnchor;
+    triggerMode: CVPopoverTriggerMode;
     offset: number;
     arrow: boolean;
     private readonly idBase;
     private model;
     private previousOpen;
+    private hasLayoutListeners;
+    private layoutFrame;
+    private focusContentOnNextUpdate;
+    private restoreFocusTarget;
+    private _sourceEl;
+    get sourceEl(): HTMLElement | null;
+    set sourceEl(value: HTMLElement | null);
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
@@ -69,19 +94,31 @@ export declare class CVPopover extends ReatomLitElement {
     disconnectedCallback(): void;
     willUpdate(changedProperties: PropertyValues): void;
     updated(changedProperties: PropertyValues): void;
+    show(options?: CVPopoverShowOptions): void;
+    hide(intent?: PopoverDismissIntent): void;
+    toggle(options?: CVPopoverShowOptions): void;
     private createModel;
+    private getContentElement;
+    private getTriggerElement;
+    private resolveAnchorElement;
+    private prepareAnchorForOpen;
     private buildEventDetail;
-    /**
-     * Dispatches beforetoggle and toggle events and syncs open state from headless.
-     * If beforetoggle is canceled on open, reverts headless state.
-     */
     private emitToggleEvents;
+    private restoreFocus;
     private syncOutsideListeners;
     private handleDocumentPointerDown;
     private handleDocumentFocusIn;
     private handleTriggerClick;
     private handleTriggerKeyDown;
     private handleContentKeyDown;
-    protected render(): import("lit").TemplateResult<1>;
+    private handleNativeToggle;
+    private clearInlineLayout;
+    private applyDirectionalOffset;
+    private syncNativePopover;
+    private syncPopoverLayout;
+    private cancelLayoutFrame;
+    private scheduleLayout;
+    private toggleLayoutListeners;
+    private handleViewportChange;
+    protected render(): import("lit-html").TemplateResult;
 }
-export {};