@wikimedia/codex/dist/types/components/popover/Popover.vue.d.ts

Codex Design System for Wikimedia

import { PropType, ComponentPublicInstance } from 'vue';
import { Placement } from '@floating-ui/vue';
import { Icon } from '@wikimedia/codex-icons';
import { PrimaryModalAction, ModalAction } from '../../types';
/**
 * A Popover is a localized, non-disruptive container that is overlaid on a web page or app,
 * near its trigger, in order to present necessary information and tasks.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * The triggering element that opens and closes the popover. This should be a template ref,
     * which can be either an HTML element or a Vue component.
     *
     * This must be provided so the popover can be positioned relative to the triggering
     * element.
     */
    anchor: {
        type: PropType<HTMLElement | ComponentPublicInstance | null>;
        default: null;
    };
    /**
     * Whether the popover is visible.
     * Should be provided via a v-model:open binding in the parent scope.
     */
    open: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Title text at the top of the popover.
     */
    title: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Icon displayed at the start of the popover.
     */
    icon: {
        type: PropType<Icon>;
        default: string;
    };
    /**
     * Add an icon-only close button to the popover header.
     */
    useCloseButton: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Visually-hidden label text for the icon-only close button in the header.
     *
     * Omit this prop to use the default value, "Close".
     */
    closeButtonLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Primary user action. This will display a primary button with the specified action
     * (progressive or destructive).
     */
    primaryAction: {
        type: PropType<PrimaryModalAction>;
        default: null;
    };
    /**
     * Default user action. This will display a normal button.
     */
    defaultAction: {
        type: PropType<ModalAction>;
        default: null;
    };
    /**
     * Whether action buttons should be vertically stacked and 100% width.
     */
    stackedActions: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether to disable the use of teleport and render the Popover in its
     * original location in the document.
     */
    renderInPlace: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Positioning options for the Popover.
     */
    placement: {
        type: PropType<Placement>;
        default: string;
    };
}>, {
    computedTarget: import("vue").ComputedRef<string | HTMLElement>;
    translatedCloseButtonLabel: import("vue").ComputedRef<string>;
    showHeader: import("vue").ComputedRef<boolean>;
    showFooter: import("vue").ComputedRef<boolean>;
    footerActionsClasses: import("vue").ComputedRef<{
        'cdx-popover__footer__actions--vertical': boolean;
    }>;
    close: () => void;
    cdxIconClose: string;
    floating: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
    floatingStyles: Readonly<import("vue").Ref<{
        position: import("@floating-ui/utils").Strategy;
        top: string;
        left: string;
        transform?: string;
        willChange?: string;
    }, {
        position: import("@floating-ui/utils").Strategy;
        top: string;
        left: string;
        transform?: string;
        willChange?: string;
    }>>;
    arrowRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
    arrowStyles: {
        top: string;
        right: string;
        bottom: string;
        left: string;
        transform: string;
    };
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("default" | "primary" | "update:open")[], "default" | "primary" | "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * The triggering element that opens and closes the popover. This should be a template ref,
     * which can be either an HTML element or a Vue component.
     *
     * This must be provided so the popover can be positioned relative to the triggering
     * element.
     */
    anchor: {
        type: PropType<HTMLElement | ComponentPublicInstance | null>;
        default: null;
    };
    /**
     * Whether the popover is visible.
     * Should be provided via a v-model:open binding in the parent scope.
     */
    open: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Title text at the top of the popover.
     */
    title: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Icon displayed at the start of the popover.
     */
    icon: {
        type: PropType<Icon>;
        default: string;
    };
    /**
     * Add an icon-only close button to the popover header.
     */
    useCloseButton: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Visually-hidden label text for the icon-only close button in the header.
     *
     * Omit this prop to use the default value, "Close".
     */
    closeButtonLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Primary user action. This will display a primary button with the specified action
     * (progressive or destructive).
     */
    primaryAction: {
        type: PropType<PrimaryModalAction>;
        default: null;
    };
    /**
     * Default user action. This will display a normal button.
     */
    defaultAction: {
        type: PropType<ModalAction>;
        default: null;
    };
    /**
     * Whether action buttons should be vertically stacked and 100% width.
     */
    stackedActions: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether to disable the use of teleport and render the Popover in its
     * original location in the document.
     */
    renderInPlace: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Positioning options for the Popover.
     */
    placement: {
        type: PropType<Placement>;
        default: string;
    };
}>> & Readonly<{
    onDefault?: ((...args: any[]) => any) | undefined;
    onPrimary?: ((...args: any[]) => any) | undefined;
    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
}>, {
    icon: Icon;
    title: string;
    anchor: HTMLElement | ComponentPublicInstance | null;
    open: boolean;
    placement: Placement;
    renderInPlace: boolean;
    useCloseButton: boolean;
    closeButtonLabel: string;
    primaryAction: PrimaryModalAction;
    defaultAction: ModalAction;
    stackedActions: boolean;
}, {}, {
    CdxButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        action: {
            type: PropType<import("../../types").ButtonAction>;
            default: string;
            validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
        };
        weight: {
            type: PropType<import("../../types").ButtonWeight>;
            default: string;
            validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
        };
        size: {
            type: PropType<import("../../types").ButtonSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
        };
    }>, {
        button: import("vue").Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
        rootClasses: import("vue").ComputedRef<{
            [x: string]: boolean;
            'cdx-button--framed': boolean;
            'cdx-button--icon-only': boolean;
            'cdx-button--is-active': boolean;
        }>;
        onClick: (event: Event) => void;
        onKeyDown: () => void;
        onKeyUp: () => void;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        action: {
            type: PropType<import("../../types").ButtonAction>;
            default: string;
            validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
        };
        weight: {
            type: PropType<import("../../types").ButtonWeight>;
            default: string;
            validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
        };
        size: {
            type: PropType<import("../../types").ButtonSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
        };
    }>> & Readonly<{
        onClick?: ((...args: any[]) => any) | undefined;
    }>, {
        size: "medium" | "large" | "small";
        action: "default" | "progressive" | "destructive";
        weight: "normal" | "primary" | "quiet";
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: PropType<string | null>;
            default: null;
        };
        dir: {
            type: PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>, {
        rootElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
        rootClasses: import("vue").ComputedRef<{
            [x: string]: boolean;
            'cdx-icon--flipped': boolean;
        }>;
        iconSvg: import("vue").ComputedRef<string>;
        iconPath: import("vue").ComputedRef<string>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: PropType<string | null>;
            default: null;
        };
        dir: {
            type: PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>> & Readonly<{}>, {
        lang: string | null;
        iconLabel: string;
        dir: import("../../types").HTMLDirection | null;
        size: "medium" | "small" | "x-small";
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;