diff --git a/src/components/carousel/Carousel.d.ts b/src/components/carousel/Carousel.d.ts index fb844bcce..5a05a9070 100755 --- a/src/components/carousel/Carousel.d.ts +++ b/src/components/carousel/Carousel.d.ts @@ -1,33 +1,130 @@ import { VNode } from 'vue'; +import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; -interface CarouselProps { - value?: any; - page?: number; - numVisible?: number; - numScroll?: number; - responsiveOptions?: any[]; - orientation?: string; - verticalViewPortHeight?: string; - containerClass?: string; - contentClass?: string; - indicatorsContentClass?: string; - circular?: boolean; - autoplayInterval?: number; +type CarouselOrientationType = 'horizontal' | 'vertical'; + +export interface CarouselResponsiveOptions { + /** + * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...} + */ + breakpoint: string; + /** + * The number of visible items on breakpoint. + */ + numVisible: number; + /** + * The number of scrolled items on breakpoint. + */ + numScroll: number; } -interface CarouselItemSlotInterface { - data: any; - index: number; +export interface CarouselProps { + /** + * An array of objects to display. + */ + value?: any | undefined; + /** + * Index of the first item. + * Default value is 0. + */ + page?: number | undefined; + /** + * Number of items per page. + * Default value is 1. + */ + numVisible?: number | undefined; + /** + * Number of items to scroll. + * Default value is 1. + */ + numScroll?: number | undefined; + /** + * An array of options for responsive design. + * @see CarouselResponsiveOptions + */ + responsiveOptions?: CarouselResponsiveOptions[] | undefined; + /** + * Specifies the layout of the component, valid values are "horizontal" and "vertical". + * @see CarouselOrientationType + * Default value is 'horizontal'. + */ + orientation?: CarouselOrientationType; + /** + * Height of the viewport in vertical layout. + * Default value is '300px'. + */ + verticalViewPortHeight?: string | undefined; + /** + * Style class of the viewport container. + */ + containerClass?: string | undefined; + /** + * Style class of main content. + */ + contentClass?: string | undefined; + /** + * Style class of the indicator items. + */ + indicatorsContentClass?: string | undefined; + /** + * Defines if scrolling would be infinite. + */ + circular?: boolean | undefined; + /** + * Time in milliseconds to scroll items automatically. + * Default value is 0. + */ + autoplayInterval?: number | undefined; } -declare class Carousel { - $props: CarouselProps; - $emit(eventName: 'update:page', value: number): this; - $slots: { - item: CarouselItemSlotInterface; - header: VNode[]; - footer: VNode[]; - } +export interface CarouselSlots { + /** + * Custom content for each item. + * @param {Object} scope - item slot's params. + */ + item: (scope: { + /** + * Data of the component + */ + data: any; + /** + * Index of the item + */ + index: number; + }) => VNode[]; + /** + * Custom header template. + */ + header: () => VNode[]; + /** + * Custom footer template. + */ + footer: () => VNode[]; } +export declare type CarouselEmits = { + /** + * Emitted when the page changes. + * @param {number} value - New page value. + */ + 'update:page': (value: number) => void; +} + +declare class Carousel extends ClassComponent { } + +declare module '@vue/runtime-core' { + interface GlobalComponents { + Carousel: GlobalComponentConstructor + } +} + +/** + * + * Carousel is a content slider featuring various customization options. + * + * Demos: + * + * - [Carousel](https://www.primefaces.org/primevue/showcase/#/carousel) + * + */ export default Carousel;