/** * * GalleryThumbnail wraps the thumbnail strip for the Gallery. By default it renders as `Carousel` so it inherits * scroll-snap, loop, alignment and auto-size behavior. Gallery passes the current `activeIndex` down via the * `slide` prop so the carousel scrolls to the active thumbnail automatically. * * [Live Demo](https://www.primevue.dev/gallery/) * * @module gallerythumbnail * */ import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core'; import type { ComponentHooks } from '@primevue/core/basecomponent'; import type { PassThroughOptions } from 'primevue/passthrough'; import type { Component, HTMLAttributes, VNode } from 'vue'; export declare type GalleryThumbnailPassThroughOptionType = GalleryThumbnailPassThroughAttributes | ((options: GalleryThumbnailPassThroughMethodOptions) => GalleryThumbnailPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ export interface GalleryThumbnailPassThroughMethodOptions { /** * Defines instance. */ instance: any; /** * Defines valid properties. */ props: GalleryThumbnailProps; /** * 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 GalleryThumbnailProps.pt} */ export interface GalleryThumbnailPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ root?: GalleryThumbnailPassThroughOptionType; /** * Used to manage all lifecycle hooks. */ hooks?: ComponentHooks; } /** * Custom passthrough attributes for each DOM elements. */ export interface GalleryThumbnailPassThroughAttributes { [key: string]: any; } /** * Defines valid properties in GalleryThumbnail component. */ export interface GalleryThumbnailProps { /** * Use to change the rendered element. Defaults to `Carousel` to wire the thumbnail strip into the * scroll-snap carousel infrastructure. * @defaultValue Carousel */ as?: string | Component | undefined; /** * When enabled, it changes the default rendered element for the one passed as a child element. * @defaultValue false */ asChild?: boolean | undefined; /** * Forwarded to the underlying carousel. Each item sizes itself to its intrinsic content rather than a * fixed slide width. * @defaultValue true */ autoSize?: boolean | undefined; /** * Forwarded to the underlying carousel. Whether scrolling wraps around at the ends. * @defaultValue true */ loop?: boolean | undefined; /** * Forwarded to the underlying carousel. Snap alignment for each item. * @defaultValue 'center' */ align?: 'start' | 'center' | 'end' | undefined; /** * Forwarded to the underlying carousel. Spacing in pixels between items. * @defaultValue 8 */ spacing?: 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. */ pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. */ ptOptions?: PassThroughOptions; /** * When enabled, it removes component related styles in the core. * @defaultValue false */ unstyled?: boolean; } /** * Root element attributes forwarded to the consumer when `asChild` is enabled. * Includes the Carousel configuration props (`autoSize`, `loop`, `align`, `spacing`, `slide`) * so the consumer's element – typically `Carousel` – wires up correctly. */ export interface GalleryThumbnailA11yAttrs extends HTMLAttributes { /** * PrimeVue component identifier. */ 'data-pc-name': 'gallerythumbnail'; /** * PrimeVue section identifier within the component. */ 'data-pc-section': 'root'; /** * Forwarded to the underlying carousel. */ autoSize?: boolean; /** * Forwarded to the underlying carousel. */ loop?: boolean; /** * Forwarded to the underlying carousel. */ align?: 'start' | 'center' | 'end'; /** * Forwarded to the underlying carousel. */ spacing?: number; /** * Current active slide index forwarded to the underlying carousel so it scrolls * to the active thumbnail automatically. */ slide?: number; } /** * Defines valid slots in GalleryThumbnail component. */ export interface GalleryThumbnailSlots { /** * Container for `GalleryThumbnailContent` and its `GalleryThumbnailItem` children. * Receives consumer-targeted props when `asChild` is enabled. * @param {Object} scope - default slot's params. */ default(scope: { /** * Computed class name for the thumbnail root (only emitted when `asChild` is enabled). */ class?: string | object | Array; /** * Attributes to spread on the consumer's root element (typically a `Carousel`) so * the thumbnail strip inherits carousel config plus `data-pc-*` identifiers * (only emitted when `asChild` is enabled). */ a11yAttrs?: GalleryThumbnailA11yAttrs; }): VNode[]; } /** * Defines valid emits in GalleryThumbnail component. */ export interface GalleryThumbnailEmitsOptions {} export declare type GalleryThumbnailEmits = EmitFn; /** * **PrimeVue - GalleryThumbnail** * * _GalleryThumbnail is a helper component for Gallery component._ * * [Live Demo](https://www.primevue.dev/gallery/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ declare const GalleryThumbnail: DefineComponent; declare module 'vue' { export interface GlobalComponents { GalleryThumbnail: DefineComponent; } } export default GalleryThumbnail;