ranui/dist/components/popover/index.d.ts

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { RanElement } from '../../utils';
import '@/components/popover/content';
import '@/components/dropdown';
import { EventManager } from '../../utils/builder';
import { FloatingController } from '../../utils/floating';
import type { Placement } from '../../utils/placement';
export declare enum PLACEMENT_TYPE {
    TOP = "top",
    BOTTOM = "bottom",
    LEFT = "left",
    RIGHT = "right"
}
/**
 * @fires show - The panel is about to appear.
 * @fires after-show - The panel has appeared and any entrance animation has finished.
 * @fires hide - The panel is about to close.
 * @fires after-hide - The panel has closed and any exit animation has finished.
 */
export declare class Popover extends RanElement {
    _events: EventManager;
    _slot: HTMLSlotElement;
    popoverBlock: HTMLDivElement;
    popoverContent?: HTMLElement;
    popoverInner?: HTMLDivElement;
    popoverInnerBlock?: HTMLDivElement;
    _shadowDom: ShadowRoot;
    removeTimeId?: NodeJS.Timeout;
    _repositionBound: boolean;
    /**
     * Positioning, portalling, scroll-following, the enter/exit animation and the
     * show/hide events are the shared controller's — r-select drives the same one.
     * What stays here is what only a popover knows: which child is the trigger,
     * and where its arrow has to point afterwards.
     */
    _floating: FloatingController;
    static get observedAttributes(): string[];
    readonly closePopover: () => void;
    constructor();
    /**
     * Which side of the trigger the panel sits on, with an optional alignment.
     *
     * `bottom`, `bottom-end`, `right-center`, … — the suffix lines the panel up
     * with the trigger's leading edge, centre or trailing edge along the cross
     * axis. A bare side means `-start`, which is how this attribute has always
     * behaved.
     */
    get placement(): Placement;
    set placement(value: Placement);
    /**
     * The side alone. Everything that keys off a four-entry table -- the transit
     * animation, the arrow direction, the custom-container coordinate branch --
     * reads this rather than `placement`, which may carry an alignment suffix
     * those tables have no entry for.
     */
    private get placementSide();
    /**
     * Whether the panel is showing.
     *
     * The state itself, reflected the way `<details open>` and `<dialog open>` do
     * it — not inferred from the panel's `style.display`, which trails the state
     * by the length of the exit animation and answers about the frame rather than
     * the intent. Reflecting it also puts it where a consumer can reach it:
     * `:host([open])` in CSS, `popover.open = true` from script, an attribute to
     * assert in a test instead of a poll.
     */
    get open(): boolean;
    set open(value: boolean);
    /** Drive the panel from `open`. Everything below it is the controller's. */
    _applyOpen: () => void;
    /** Show the panel. */
    show: () => void;
    /** Hide the panel. */
    hide: () => void;
    /** Flip the panel between shown and hidden. */
    toggle: () => void;
    get trigger(): string;
    set trigger(value: string);
    get getPopupContainerId(): string;
    set getPopupContainerId(value: string);
    get sheet(): string;
    set sheet(value: string);
    handlerExternalCss: () => void;
    initAria: () => void;
    updateAriaExpanded: (isExpanded: boolean) => void;
    stopPropagation: (e: Event) => void;
    /**
     * @description: 创建下拉框
     * @param {HTMLCollection} content
     * @return {*}
     */
    createContent: (content: HTMLCollection) => void;
    /**
     * @description: 观察内容变化
     * @param {Event} e
     * @return {*}
     */
    watchContent: (e: Event) => void;
    /**
     * @description: 焦点移除的情况，需要移除下拉框
     * @return {*}
     */
    blur: import("ranuts/utils").Debounced<() => void>;
    /**
     * @description: 移除下拉框
     * @return {*}
     */
    removeDropDownTimeId: import("ranuts/utils").Debounced<() => void>;
    /**
     * @description: 添加 dropdown
     * @return {*}
     */
    setDropdownDisplayBlock: import("ranuts/utils").Debounced<() => void>;
    /**
     * @description: 移除 select dropdown
     * @return {*}
     */
    setDropdownDisplayNone: import("ranuts/utils").Debounced<() => void>;
    /**
     * Position the panel against the trigger.
     *
     * Kept on the element because it is part of its surface, but the work — flip,
     * shift, alignment, the custom-container branch, and staying with the trigger
     * as the page scrolls — is the shared controller's.
     */
    placementPosition: () => void;
    /**
     * @description: 鼠标移入
     * @param {Event} e
     * @return {*}
     */
    hoverPopover: (e: Event) => void;
    clickContent: (e: Event) => void;
    clickPopover: (e: Event) => void;
    keydownPopover: (e: KeyboardEvent) => void;
    clickRemovePopover: (e: Event) => void;
    popoverTrigger: () => void;
    hoverRemovePopover: (e: Event) => void;
    changePlacement: import("ranuts/utils").Debounced<() => void>;
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(n: string, o: string, v: string): void;
}
export default Popover;