Fixed #1836 - For Carousel

pull/1846/head
mertsincan 2021-12-01 15:31:14 +03:00
parent 14753c1c64
commit a0fd835d52
1 changed files with 121 additions and 24 deletions

View File

@ -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 {
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;
}
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[];
}
declare class Carousel {
$props: CarouselProps;
$emit(eventName: 'update:page', value: number): this;
$slots: {
item: CarouselItemSlotInterface;
header: VNode[];
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<CarouselProps, CarouselSlots, CarouselEmits> { }
declare module '@vue/runtime-core' {
interface GlobalComponents {
Carousel: GlobalComponentConstructor<Carousel>
}
}
/**
*
* Carousel is a content slider featuring various customization options.
*
* Demos:
*
* - [Carousel](https://www.primefaces.org/primevue/showcase/#/carousel)
*
*/
export default Carousel;