maz-ui

import { HTMLAttributes } from 'vue'; import { MazColor } from './types'; type __VLS_Props = MazPopoverProps; export type MazPopoverPosition = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'auto'; export type MazPopoverPreferPosition = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'; export type MazPopoverFallbackPosition = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'; export type MazPopoverTrigger = 'click' | 'hover' | 'manual' | 'adaptive'; export type MazPopoverRole = 'dialog' | 'tooltip' | 'menu'; export interface MazPopoverProps { /** * Controls the popover open state * @model * @type {boolean} * @default false */ modelValue?: boolean; /** * Position of the popover relative to trigger * @values auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end * @default auto * @description Position of the popover relative to trigger */ position?: MazPopoverPosition; /** * Preferred position of the popover relative to trigger when auto position is used * @values auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end * @default 'bottom-start' * @description Preferred position of the popover relative to trigger */ preferPosition?: MazPopoverPreferPosition; /** * Fallback position of the popover relative to trigger when prefer position is not visible * @values auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end * @default auto * @description Fallback position of the popover relative to trigger */ fallbackPosition?: MazPopoverFallbackPosition; /** * How the popover is triggered * @values click, hover, manual, adaptive * @default click * @description How the popover is triggered. 'adaptive' uses hover on desktop and click on mobile */ trigger?: MazPopoverTrigger; /** * ARIA role for accessibility * @values dialog, tooltip * @default dialog * @description ARIA role for accessibility */ role?: MazPopoverRole; /** * ARIA label for the popover * @default undefined */ ariaLabel?: string; /** * Announce content changes to screen readers * @default false */ announceChanges?: boolean; /** * Disables the popover * @default false * @description Disables the popover */ disabled?: boolean; /** * Distance between trigger and popover in pixels * @default 8 */ offset?: number; /** * Delay before showing/hiding in milliseconds * @default 0 */ delay?: number; /** * Delay before closing on hover in milliseconds * @default 150 */ hoverDelay?: number; /** * CSS transition name for animations * @default popover */ transition?: 'scale-pop' | 'scale-fade' | string; /** * Teleport target selector * @default body */ teleportTo?: string; /** * Additional CSS classes for the overlay wrapper * @default undefined */ overlayClass?: HTMLAttributes['class']; /** * Additional CSS classes for the popover panel * @default undefined */ panelClass?: HTMLAttributes['class']; /** * Inline styles for the popover panel * @default undefined */ panelStyle?: HTMLAttributes['style']; /** * Close popover when clicking outside * @default true */ closeOnClickOutside?: boolean; /** * Close popover when pressing Escape key * @default true */ closeOnEscape?: boolean; /** * Prevent auto-close (ignores click outside and escape key) * @default false */ persistent?: boolean; /** * Custom ID for the popover element * @default undefined */ id?: string; /** * ARIA labelledby attribute for accessibility * @default undefined */ ariaLabelledby?: string; /** * ARIA describedby attribute for accessibility * @default undefined */ ariaDescribedby?: string; /** * Color variant of the popover * @values primary, secondary, accent, info, success, warning, destructive, contrast, background * @default background */ color?: MazColor | 'background'; /** * Trap focus inside the popover * @default true */ trapFocus?: boolean; /** * Keep popover open when hovering over the panel * @default false */ keepOpenOnHover?: boolean; /** * The popover will be full width of the trigger * @default false */ block?: boolean; /** * CSS selector or element reference to use for positioning calculations * @description When provided, the popover will position relative to this element instead of the trigger * Useful for components with labels where you want to position relative to the actual input * @type {string | HTMLElement} * @default undefined * @example "input" or "#my-input" or HTMLElement */ positionReference?: string | HTMLElement; } declare function open(): void; declare function close(): void; declare function toggle(): void; declare const __VLS_defaults: { modelValue: boolean; }; type __VLS_PublicProps = { modelValue?: typeof __VLS_defaults['modelValue']; } & __VLS_Props; declare function __VLS_template(): { attrs: Partial<{}>; slots: { trigger?(_: { open: typeof open; close: typeof close; toggle: typeof toggle; isOpen: boolean; trigger: "click" | "hover" | "manual"; }): any; default?(_: { open: typeof open; close: typeof close; toggle: typeof toggle; isOpen: true; }): any; }; refs: { trigger: HTMLDivElement; panel: HTMLDivElement; }; rootEl: any; }; type __VLS_TemplateResult = ReturnType<typeof __VLS_template>; declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, { /** * Open the popover * @description Programmatically open the popover * @usage `mazPopoverInstance.value?.open()` */ open: typeof open; /** * Close the popover * @description Programmatically close the popover * @usage `mazPopoverInstance.value?.close()` */ close: typeof close; /** * Toggle the popover * @description Programmatically toggle the popover open/close state * @usage `mazPopoverInstance.value?.toggle()` */ toggle: typeof toggle; /** * Check if the popover is open * @type {ModelRef<boolean>} * @description Reactive reference to the popover open state * @usage `const isPopoverOpen = mazPopoverInstance.value?.isOpen` */ isOpen: import('vue').ModelRef<boolean, string, boolean, boolean>; /** * Update the popover position * @description Manually recalculate and update the popover position * @usage `mazPopoverInstance.value?.updatePosition()` */ updatePosition: () => void; /** * Panel reference * @type {Ref<HTMLElement>} * @description Reference to the popover panel element * @usage `mazPopoverInstance.value?.panelRef` */ panelRef: Readonly<import('vue').ShallowRef<HTMLElement | null>>; }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { close: () => any; toggle: (value: boolean) => any; open: () => any; "update:model-value": (value: boolean) => any; "update:modelValue": (value: boolean) => any; "after-close-animation": () => any; }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{ onClose?: (() => any) | undefined; onToggle?: ((value: boolean) => any) | undefined; onOpen?: (() => any) | undefined; "onUpdate:model-value"?: ((value: boolean) => any) | undefined; "onUpdate:modelValue"?: ((value: boolean) => any) | undefined; "onAfter-close-animation"?: (() => any) | undefined; }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, { trigger: HTMLDivElement; panel: HTMLDivElement; }, any>; declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>; export default _default; type __VLS_WithTemplateSlots<T, S> = T & { new (): { $slots: S; }; };