Fixed #1836 - For Carousel
parent
14753c1c64
commit
a0fd835d52
|
@ -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 {
|
||||||
|
/**
|
||||||
|
* 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;
|
data: any;
|
||||||
|
/**
|
||||||
|
* Index of the item
|
||||||
|
*/
|
||||||
index: number;
|
index: number;
|
||||||
|
}) => VNode[];
|
||||||
|
/**
|
||||||
|
* Custom header template.
|
||||||
|
*/
|
||||||
|
header: () => VNode[];
|
||||||
|
/**
|
||||||
|
* Custom footer template.
|
||||||
|
*/
|
||||||
|
footer: () => VNode[];
|
||||||
}
|
}
|
||||||
|
|
||||||
declare class Carousel {
|
export declare type CarouselEmits = {
|
||||||
$props: CarouselProps;
|
/**
|
||||||
$emit(eventName: 'update:page', value: number): this;
|
* Emitted when the page changes.
|
||||||
$slots: {
|
* @param {number} value - New page value.
|
||||||
item: CarouselItemSlotInterface;
|
*/
|
||||||
header: VNode[];
|
'update:page': (value: number) => void;
|
||||||
footer: VNode[];
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
Loading…
Reference in New Issue