/** * * Sidebar - root component of the headless, compound Sidebar component family. Provides $pcSidebar via provide/inject so subcomponents can read state, attrs and methods. * * @module sidebar * */ import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core'; import type { ComponentHooks } from '@primevue/core/basecomponent'; import type { PassThroughOptions } from 'primevue/passthrough'; import { VNode } from 'vue'; export declare type SidebarPassThroughOptionType = SidebarPassThroughAttributes | ((options: SidebarPassThroughMethodOptions) => SidebarPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ export interface SidebarPassThroughMethodOptions { /** * Defines instance. */ instance: any; /** * Defines valid properties. */ props: SidebarProps; /** * Defines current inline state. */ state: SidebarState; /** * Defines valid attributes. */ attrs: any; /** * Defines parent options. */ parent: any; /** * Defines passthrough(pt) options in global config. */ global: object | undefined; } /** * Custom passthrough(pt) options. * @see {@link SidebarProps.pt} */ export interface SidebarPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ root?: SidebarPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} */ hooks?: ComponentHooks; } /** * Custom passthrough attributes for each DOM elements. */ export interface SidebarPassThroughAttributes { [key: string]: any; } /** * Defines current inline state in Sidebar component. */ export interface SidebarState { /** * Current open state as a boolean. */ d_open: boolean; } /** * Defines valid properties in Sidebar component. */ export interface SidebarProps { /** * Unique identifier; required when nested in a SidebarLayout to participate in registry. */ id?: string; /** * Side of the viewport on which the sidebar is anchored. * @defaultValue 'left' */ side?: 'left' | 'right'; /** * Visual variant. * @defaultValue 'sidebar' */ variant?: 'sidebar' | 'floating' | 'inset'; /** * Collapse behavior. * @defaultValue 'icon' */ collapsible?: 'offcanvas' | 'icon' | 'none'; /** * Whether the panel renders as a floating overlay. * @defaultValue false */ overlay?: boolean; /** * Controlled open state. Use with `v-model:open` or `@update:open`. */ open?: boolean; /** * When true, hovering the panel triggers expand/collapse. * @defaultValue false */ openOnHover?: boolean; /** * Delay before expanding on hover, in ms. * @defaultValue 50 */ hoverOpenDelay?: number; /** * Delay before collapsing after pointer leave, in ms. * @defaultValue 100 */ hoverCloseDelay?: number; /** * Whether clicking the backdrop dismisses the sidebar. * @defaultValue true */ dismissable?: boolean; /** * When overlay is active, clicking inside the SidebarMain area collapses the sidebar. Clicks originating from a SidebarTrigger are excluded so opening via the trigger is not immediately undone. * @defaultValue true */ hideOnOutsideClick?: boolean; /** * Width of the expanded panel as a CSS length. * @defaultValue '16rem' */ width?: string; /** * Width of the panel when collapsed in icon mode. * @defaultValue '3rem' */ iconWidth?: string; /** * The element or component to render. Defaults to a sensible HTML element. */ as?: string | object; /** * When true, renders the slot content as the root element with merged props. * @defaultValue false */ asChild?: boolean; /** * It generates scoped CSS variables using design tokens for the component. */ dt?: DesignToken; /** * Used to pass attributes to DOM elements inside the component. * @type {SidebarPassThroughOptions} */ pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. * @type {PassThroughOptions} */ ptOptions?: PassThroughOptions; /** * When enabled, it removes component related styles in the core. * @defaultValue false */ unstyled?: boolean; } /** * Defines valid slots in Sidebar component. */ export interface SidebarSlots { /** * Default slot. * * The `scope` argument is only provided when `asChild` is `true`. In that mode the * consumer must spread `a11yAttrs` and apply `class` on the rendered root element. * @param {Object} scope - default slot's params. */ default(scope?: { /** * Class name of the root element. */ class: string; /** * Accessibility data attributes, CSS custom properties and pointer event handlers to spread on the rendered root in asChild mode. */ a11yAttrs: Record; }): VNode[]; } /** * Defines valid emits in Sidebar component. */ export interface SidebarEmitsOptions { /** * Emitted when the open state changes. * @param {boolean} value - New open state. */ 'update:open': (value: boolean) => void; } export declare type SidebarEmits = EmitFn; /** * **PrimeVue - Sidebar** * * _Sidebar - root component of the headless, compound Sidebar component family. Provides $pcSidebar via provide/inject so subcomponents can read state, attrs and methods._ * * @group Component * */ declare const Sidebar: DefineComponent; declare module 'vue' { export interface GlobalComponents { Sidebar: DefineComponent; } } export default Sidebar;