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 { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
interface CarouselProps { type CarouselOrientationType = 'horizontal' | 'vertical';
value?: any;
page?: number; export interface CarouselResponsiveOptions {
numVisible?: number; /**
numScroll?: number; * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...}
responsiveOptions?: any[]; */
orientation?: string; breakpoint: string;
verticalViewPortHeight?: string; /**
containerClass?: string; * The number of visible items on breakpoint.
contentClass?: string; */
indicatorsContentClass?: string; numVisible: number;
circular?: boolean; /**
autoplayInterval?: number; * The number of scrolled items on breakpoint.
*/
numScroll: number;
} }
interface CarouselItemSlotInterface { export interface CarouselProps {
data: any; /**
index: number; * 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 { export interface CarouselSlots {
$props: CarouselProps; /**
$emit(eventName: 'update:page', value: number): this; * Custom content for each item.
$slots: { * @param {Object} scope - item slot's params.
item: CarouselItemSlotInterface; */
header: VNode[]; item: (scope: {
footer: VNode[]; /**
} * 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<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; export default Carousel;