From 3ec876d1e1c0758e7a4a7a8b198e76597858fc15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Thu, 4 May 2023 10:46:18 +0300 Subject: [PATCH] Refactor #3918 - For Carousel --- api-generator/components/carousel.js | 6 + components/lib/carousel/Carousel.d.ts | 154 ++++++++++++++++++++++++++ components/lib/carousel/Carousel.vue | 41 ++++--- components/lib/config/PrimeVue.d.ts | 2 + 4 files changed, 189 insertions(+), 14 deletions(-) diff --git a/api-generator/components/carousel.js b/api-generator/components/carousel.js index ddcce2e23..4fe24167a 100644 --- a/api-generator/components/carousel.js +++ b/api-generator/components/carousel.js @@ -82,6 +82,12 @@ const CarouselProps = [ type: 'boolean', default: 'true', description: 'Whether to display indicator container.' + }, + { + name: 'pt', + type: 'any', + default: 'null', + description: 'Uses to pass attributes to DOM elements inside the component.' } ]; diff --git a/components/lib/carousel/Carousel.d.ts b/components/lib/carousel/Carousel.d.ts index 5ba3e4dd8..e53fa2335 100755 --- a/components/lib/carousel/Carousel.d.ts +++ b/components/lib/carousel/Carousel.d.ts @@ -10,6 +10,154 @@ import { ButtonHTMLAttributes, VNode } from 'vue'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type CarouselPassThroughOptionType = CarouselPassThroughAttributes | ((options: CarouselPassThroughMethodOptions) => CarouselPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface CarouselPassThroughMethodOptions { + props: CarouselProps; + state: CarouselState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link CarouselProps.pt} + */ +export interface CarouselPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the header's DOM element. + */ + header?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the content's DOM element. + */ + content?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the container's DOM element. + */ + container?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the previous button's DOM element. + */ + previousButton?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the previous button icon's DOM element. + */ + previousButtonIcon?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the items content's DOM element. + */ + itemsContent?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the items container's DOM element. + */ + itemsContainer?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the item cloned's DOM element. + */ + itemCloned?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the item's DOM element. + */ + item?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the next button's DOM element. + */ + nextButton?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the next button icon's DOM element. + */ + nextButtonIcon?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the indicators's DOM element. + */ + indicators?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the indicator's DOM element. + */ + indicator?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the indicator button's DOM element. + */ + indicatorButton?: CarouselPassThroughOptionType; + /** + * Uses to pass attributes to the footer's DOM element. + */ + footer?: CarouselPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface CarouselPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in Carousel component. + */ +export interface CarouselState { + /** + * Remaining items' count as a number. + * @defaultValue 0 + */ + remainingItems: number; + /** + * Number of items per page as a number. + * @defaultValue 1 + */ + d_numVisible: number; + /** + * Number of items to scroll as a number. + * @defaultValue 1 + */ + d_numScroll: number; + /** + * Old number of items to scroll as a number. + * @defaultValue 0 + */ + d_oldNumScroll: number; + /** + * Old number of items per page as a number. + * @defaultValue 0 + */ + d_oldNumVisible: number; + /** + * Old array of objects to display. + */ + d_oldValue: number; + /** + * Index of the first item. + * @defaultValue 0 + */ + d_page: number; + /** + * Total shifted items' count as a number. + * @defaultValue 0 + */ + totalShiftedItems: number; + /** + * Allow autoplay as a boolean. + * @defaultValue false + */ + allowAutoplay: boolean; + /** + * Defines if scrolling would be infinite as a boolean. + * @defaultValue false + */ + d_circular: boolean; + /** + * Swipe threshold count as a number. + * @defaultValue 20 + */ + swipeThreshold: number; +} + export interface CarouselResponsiveOptions { /** * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...} @@ -24,6 +172,7 @@ export interface CarouselResponsiveOptions { */ numScroll: number; } + /** * Defines valid properties in Carousel component. */ @@ -102,6 +251,11 @@ export interface CarouselProps { * Uses to pass all properties of the HTMLButtonElement to the next navigation button. */ nextButtonProps?: ButtonHTMLAttributes | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {CarouselPassThroughOptions} + */ + pt?: CarouselPassThroughOptions; } /** diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue index e67bd5118..b24e3b84c 100755 --- a/components/lib/carousel/Carousel.vue +++ b/components/lib/carousel/Carousel.vue @@ -1,10 +1,10 @@