Refactor #3918 - For Galleria

api-generator/components/galleria.js

@@ -142,6 +142,12 @@ const GalleriaProps = [
         type: 'any',
         default: 'null',
         description: "Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -19,6 +19,7 @@ import { DividerPassThroughOptions } from '../divider';
 import { DockPassThroughOptions } from '../dock';
 import { FieldsetPassThroughOptions } from '../fieldset';
 import { FileUploadPassThroughOptions } from '../fileupload';
+import { GalleriaPassThroughOptions } from '../galleria';
 import { ImagePassThroughOptions } from '../image';
 import { InlineMessagePassThroughOptions } from '../inlinemessage';
 import { InplacePassThroughOptions } from '../inplace';
@@ -85,6 +86,7 @@ interface PrimeVuePTOptions {
     dynamicdialog?: DialogPassThroughOptions;
     fieldset?: FieldsetPassThroughOptions;
     fileupload?: FileUploadPassThroughOptions;
+    galleria?: GalleriaPassThroughOptions;
     image?: ImagePassThroughOptions;
     inlinemessage?: InlineMessagePassThroughOptions;
     inplace?: InplacePassThroughOptions;

components/lib/galleria/Galleria.d.ts

@@ -9,6 +9,15 @@
  */
 import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+export declare type GalleriaPassThroughOptionType = GalleriaPassThroughAttributes | ((options: GalleriaPassThroughMethodOptions) => GalleriaPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface GalleriaPassThroughMethodOptions {
+    props: GalleriaProps;
+    state: GalleriaState;
+}
 
 export interface GalleriaResponsiveOptions {
     /**
@@ -21,6 +30,139 @@ export interface GalleriaResponsiveOptions {
     numVisible: number;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link GalleriaProps.pt}
+ */
+export interface GalleriaPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item wrapper's DOM element.
+     */
+    itemWrapper?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item container's DOM element.
+     */
+    itemContainer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous item button's DOM element.
+     */
+    previousItemButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous item icon's DOM element.
+     */
+    previousItemIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next item button's DOM element.
+     */
+    nextItemButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next item icon's DOM element.
+     */
+    nextItemIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the caption's DOM element.
+     */
+    caption?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the indicators's DOM element.
+     */
+    indicators?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the indicator's DOM element.
+     */
+    indicator?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail wrapper's DOM element.
+     */
+    thumbnailWrapper?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail container's DOM element.
+     */
+    thumbnailContainer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous thumbnail button's DOM element.
+     */
+    previousThumbnailButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous thumbnail icon's DOM element.
+     */
+    previousThumbnailIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail items container's DOM element.
+     */
+    thumbnailItemsContainer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail items' DOM element.
+     */
+    thumbnailItems?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail item's DOM element.
+     */
+    thumbnailItem?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail item content's DOM element.
+     */
+    thumbnailItemContent?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next thumbnail button's DOM element.
+     */
+    nextThumbnailButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next thumbnail icon's DOM element.
+     */
+    nextThumbnailIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: GalleriaPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface GalleriaPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Galleria component.
+ */
+export interface GalleriaState {
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    d_collapsed: boolean;
+}
+
 /**
  * Defines valid properties in Galleria component.
  */
@@ -152,6 +294,11 @@ export interface GalleriaProps {
      * 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 {GalleriaPassThroughOptions}
+     */
+    pt?: GalleriaPassThroughOptions;
 }
 /**
  * Defines valid slots in Galleria slots.

components/lib/galleria/Galleria.vue

@@ -1,15 +1,16 @@
 <template>
     <Portal v-if="fullScreen">
-        <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
-                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
+                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
             </transition>
         </div>
     </Portal>
-    <GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
+    <GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
@@ -17,6 +18,7 @@ import GalleriaContent from './GalleriaContent.vue';
 
 export default {
     name: 'Galleria',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['update:activeIndex', 'update:visible'],
     props: {

components/lib/galleria/GalleriaContent.vue

@@ -1,12 +1,12 @@
 <template>
-    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="$attrs.containerProps">
+    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...ptm('root') }">
-        <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')">
+        <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="ptm('closeButton')">
-            <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" />
+            <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" v-bind="ptm('closeIcon')" />
         </button>
-        <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
+        <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header" v-bind="ptm('header')">
             <component :is="$attrs.templates['header']" />
         </div>
-        <div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'">
+        <div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="ptm('content')">
             <GalleriaItem
                 :id="id"
                 v-model:activeIndex="activeIndex"
@@ -20,6 +20,7 @@
                 :autoPlay="$attrs.autoPlay"
                 @start-slideshow="startSlideShow"
                 @stop-slideshow="stopSlideShow"
+                :pt="pt"
             />
 
             <GalleriaThumbnails
@@ -38,15 +39,17 @@
                 :prevButtonProps="$attrs.prevButtonProps"
                 :nextButtonProps="$attrs.nextButtonProps"
                 @stop-slideshow="stopSlideShow"
+                :pt="pt"
             />
         </div>
-        <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
+        <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer" v-bind="ptm('footer')">
             <component :is="$attrs.templates['footer']" />
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import TimesIcon from 'primevue/icons/times';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
@@ -55,6 +58,7 @@ import GalleriaThumbnails from './GalleriaThumbnails.vue';
 
 export default {
     name: 'GalleriaContent',
+    extends: BaseComponent,
     inheritAttrs: false,
     interval: null,
     emits: ['activeitem-change', 'mask-hide'],

components/lib/galleria/GalleriaItem.vue

@@ -1,20 +1,20 @@
 <template>
-    <div class="p-galleria-item-wrapper">
+    <div class="p-galleria-item-wrapper" v-bind="ptm('itemWrapper')">
-        <div class="p-galleria-item-container">
+        <div class="p-galleria-item-container" v-bind="ptm('itemContainer')">
-            <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')">
-                <component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
+                <component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" v-bind="ptm('previousItemIcon')" />
             </button>
-            <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel">
+            <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
                 <component v-if="templates.item" :is="templates.item" :item="activeItem" />
             </div>
-            <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')">
-                <component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
+                <component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" v-bind="ptm('nextItemIcon')" />
             </button>
-            <div v-if="templates['caption']" class="p-galleria-caption">
+            <div v-if="templates['caption']" class="p-galleria-caption" v-bind="ptm('caption')">
                 <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
             </div>
         </div>
-        <ul v-if="showIndicators" class="p-galleria-indicators p-reset">
+        <ul v-if="showIndicators" class="p-galleria-indicators p-reset" v-bind="ptm('indicators')">
             <li
                 v-for="(item, index) of value"
                 :key="`p-galleria-indicator-${index}`"
@@ -26,6 +26,7 @@
                 @click="onIndicatorClick(index)"
                 @mouseenter="onIndicatorMouseEnter(index)"
                 @keydown="onIndicatorKeyDown($event, index)"
+                v-bind="ptm('indicator')"
             >
                 <button v-if="!templates['indicator']" type="button" tabindex="-1" class="p-link"></button>
                 <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
@@ -35,12 +36,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'GalleriaItem',
+    extends: BaseComponent,
     emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],
     props: {
         circular: {

components/lib/galleria/GalleriaThumbnails.vue

@@ -1,11 +1,29 @@
 <template>
-    <div class="p-galleria-thumbnail-wrapper">
+    <div class="p-galleria-thumbnail-wrapper" v-bind="ptm('thumbnailWrapper')">
-        <div class="p-galleria-thumbnail-container">
+        <div class="p-galleria-thumbnail-container" v-bind="ptm('thumbnailContainer')">
-            <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" :disabled="isNavBackwardDisabled()" type="button" :aria-label="ariaPrevButtonLabel" @click="navBackward($event)" v-bind="prevButtonProps">
+            <button
-                <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
+                v-if="showThumbnailNavigators"
+                v-ripple
+                :class="navBackwardClass"
+                :disabled="isNavBackwardDisabled()"
+                type="button"
+                :aria-label="ariaPrevButtonLabel"
+                @click="navBackward($event)"
+                v-bind="{ ...prevButtonProps, ...ptm('previousThumbnailButton') }"
+            >
+                <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" v-bind="ptm('previousThumbnailIcon')" />
             </button>
-            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
+            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
-                <div ref="itemsContainer" class="p-galleria-thumbnail-items" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
+                <div
+                    ref="itemsContainer"
+                    class="p-galleria-thumbnail-items"
+                    role="tablist"
+                    @transitionend="onTransitionEnd"
+                    @touchstart="onTouchStart($event)"
+                    @touchmove="onTouchMove($event)"
+                    @touchend="onTouchEnd($event)"
+                    v-bind="ptm('thumbnailItems')"
+                >
                     <div
                         v-for="(item, index) of value"
                         :key="`p-galleria-thumbnail-item-${index}`"
@@ -22,21 +40,39 @@
                         :aria-selected="activeIndex === index"
                         :aria-controls="containerId + '_item_' + index"
                         @keydown="onThumbnailKeydown($event, index)"
+                        v-bind="ptm('thumbnailItem')"
                     >
-                        <div class="p-galleria-thumbnail-item-content" :tabindex="activeIndex === index ? '0' : '-1'" :aria-label="ariaPageLabel(index + 1)" :aria-current="activeIndex === index ? 'page' : undefined" @click="onItemClick(index)">
+                        <div
+                            class="p-galleria-thumbnail-item-content"
+                            :tabindex="activeIndex === index ? '0' : '-1'"
+                            :aria-label="ariaPageLabel(index + 1)"
+                            :aria-current="activeIndex === index ? 'page' : undefined"
+                            @click="onItemClick(index)"
+                            v-bind="ptm('thumbnailItemContent')"
+                        >
                             <component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
                         </div>
                     </div>
                 </div>
             </div>
-            <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" :disabled="isNavForwardDisabled()" type="button" :aria-label="ariaNextButtonLabel" @click="navForward($event)" v-bind="nextButtonProps">
+            <button
-                <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-prev-icon" />
+                v-if="showThumbnailNavigators"
+                v-ripple
+                :class="navForwardClass"
+                :disabled="isNavForwardDisabled()"
+                type="button"
+                :aria-label="ariaNextButtonLabel"
+                @click="navForward($event)"
+                v-bind="{ ...nextButtonProps, ...ptm('nextThumbnailButton') }"
+            >
+                <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-next-icon" v-bind="ptm('nextThumbnailIcon')" />
             </button>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
@@ -46,6 +82,7 @@ import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'GalleriaThumbnails',
+    extends: BaseComponent,
     emits: ['stop-slideshow', 'update:activeIndex'],
     props: {
         containerId: {