/** * * ScrollArea is a cross browser, lightweight and themable alternative to native browser scrollbar with customizable variants and edge masking. * * [Live Demo](https://www.primevue.dev/scrollarea/) * * @module scrollarea * */ import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core'; import type { ComponentHooks } from '@primevue/core/basecomponent'; import type { PassThroughOptions } from 'primevue/passthrough'; import { Component, VNode } from 'vue'; /** * Custom passthrough(pt) option value type used across ScrollArea passthrough slots. */ export declare type ScrollAreaPassThroughOptionType = ScrollAreaPassThroughAttributes | ((options: ScrollAreaPassThroughMethodOptions) => ScrollAreaPassThroughAttributes | string) | string | null | undefined; /** * Visibility behaviour of the scrollbars. */ export type ScrollAreaVariant = 'auto' | 'hover' | 'scroll' | 'always' | 'hidden'; /** * Custom passthrough(pt) option method. */ export interface ScrollAreaPassThroughMethodOptions { /** * Defines instance. */ instance: any; /** * Defines valid properties. */ props: ScrollAreaProps; /** * Defines current inline state. */ state: ScrollAreaState; /** * 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 ScrollAreaProps.pt} */ export interface ScrollAreaPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ root?: ScrollAreaPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} */ hooks?: ComponentHooks; } /** * Custom passthrough attributes for each DOM elements. */ export interface ScrollAreaPassThroughAttributes { [key: string]: any; } /** * Defines current inline state in ScrollArea component. */ export interface ScrollAreaState { /** * Captured reference to the viewport element registered by `ScrollAreaViewport`. */ viewportEl: Element | null; /** * Captured reference to the vertical scrollbar element registered by `ScrollAreaScrollbar`. */ scrollbarYEl: Element | null; /** * Captured reference to the horizontal scrollbar element registered by `ScrollAreaScrollbar`. */ scrollbarXEl: Element | null; /** * Whether the pointer is hovering over the root. */ hovering: boolean; /** * Whether the viewport is currently scrolling horizontally. */ scrollingX: boolean; /** * Whether the viewport is currently scrolling vertically. */ scrollingY: boolean; /** * Aggregated scroll metadata (overflow flags, edge flags, corner dimensions). */ scrollMeta: { /** * Whether the horizontal axis has no overflow. */ hiddenX: boolean; /** * Whether the vertical axis has no overflow. */ hiddenY: boolean; /** * Width of the corner gap in pixels. */ cornerWidth: number; /** * Height of the corner gap in pixels. */ cornerHeight: number; /** * Whether content is scrolled away from the inline-start edge. */ xBefore: boolean; /** * Whether content extends past the inline-end edge. */ xAfter: boolean; /** * Whether content is scrolled away from the top edge. */ yBefore: boolean; /** * Whether content extends past the bottom edge. */ yAfter: boolean; }; } /** * Defines valid properties in ScrollArea component. */ export interface ScrollAreaProps { /** * Visibility behaviour of the scrollbars. * @defaultValue 'auto' */ variant?: ScrollAreaVariant | undefined; /** * When enabled, applies a fade mask to the scrollable content edges. * @defaultValue false */ mask?: boolean | undefined; /** * The element or component used to render the root. * @defaultValue 'DIV' */ as?: string | Component | undefined; /** * When enabled, root element renders without its own DOM; consumer renders via slot using `a11yAttrs`. * @defaultValue false */ asChild?: boolean | undefined; /** * Tab index applied to the viewport when content overflows. The viewport is omitted from the tab order when content fits. * @defaultValue 0 */ tabIndex?: number | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ dt?: DesignToken; /** * Used to pass attributes to DOM elements inside the component. * @type {ScrollAreaPassThroughOptions} */ 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 ScrollArea component. */ export interface ScrollAreaSlots { /** * Custom content slot. * @param {Object} scope - default slot props. */ default: (scope: { /** * Accessibility attributes that should be spread onto the consumer-rendered root when `asChild` is enabled. */ a11yAttrs: Record; /** * Root element class produced by the component's `cx('root')` helper. */ class: any; }) => VNode[]; } /** * Defines valid emits in ScrollArea component. */ export interface ScrollAreaEmitsOptions {} /** * Defines the emit function type for ScrollArea. */ export declare type ScrollAreaEmits = EmitFn; /** * **PrimeVue - ScrollArea** * * _Compound scroll area root that orchestrates Viewport, Content, Scrollbar, Thumb and Corner subcomponents._ * * [Live Demo](https://www.primevue.dev/scrollarea/) * * @group Component */ declare const ScrollArea: DefineComponent; declare module 'vue' { export interface GlobalComponents { ScrollArea: DefineComponent; } } export default ScrollArea;