Refactor #3965 - Update for Galleria

components/lib/galleria/BaseGalleria.vue

@@ -295,7 +295,21 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    root: ({ instance }) => instance.galleriaClass,
+    root: ({ instance }) => {
+        const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);
+        const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);
+
+        return [
+            'p-galleria p-component',
+            {
+                'p-galleria-fullscreen': instance.$attrs.fullScreen,
+                'p-galleria-indicator-onitem': instance.$attrs.showIndicatorsOnItem,
+                'p-galleria-item-nav-onhover': instance.$attrs.showItemNavigatorsOnHover && !instance.$attrs.fullScreen
+            },
+            thumbnailsPosClass,
+            indicatorPosClass
+        ];
+    },
     closeButton: 'p-galleria-close p-link',
     closeIcon: 'p-galleria-close-icon',
     header: 'p-galleria-header',
@@ -320,10 +334,10 @@ const classes = {
     nextItemIcon: 'p-galleria-item-next-icon',
     caption: 'p-galleria-caption',
     indicators: 'p-galleria-indicators p-reset',
-    indicator: ({ instance, context }) => [
+    indicator: ({ instance, index }) => [
         'p-galleria-indicator',
         {
-            'p-highlight': instance.isIndicatorItemActive(context.index)
+            'p-highlight': instance.isIndicatorItemActive(index)
         }
     ],
     indicatorButton: 'p-link',
@@ -338,13 +352,13 @@ const classes = {
     previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
     thumbnailItemsContainer: 'p-galleria-thumbnail-items-container',
     thumbnailItems: 'p-galleria-thumbnail-items',
-    thumbnailItem: ({ instance, context }) => [
+    thumbnailItem: ({ instance, index, activeIndex }) => [
         'p-galleria-thumbnail-item',
         {
-            'p-galleria-thumbnail-item-current': context.activeIndex === context.index,
+            'p-galleria-thumbnail-item-current': activeIndex === index,
-            'p-galleria-thumbnail-item-active': instance.isItemActive(context.index),
+            'p-galleria-thumbnail-item-active': instance.isItemActive(index),
-            'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === context.index,
+            'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === index,
-            'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === context.index
+            'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
         }
     ],
     thumbnailItemContent: 'p-galleria-thumbnail-item-content',

components/lib/galleria/Galleria.vue

@@ -10,10 +10,10 @@
 </template>
 
 <script>
-import BaseGalleria from './BaseGalleria.vue';
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
+import BaseGalleria from './BaseGalleria.vue';
 import GalleriaContent from './GalleriaContent.vue';
 
 export default {

components/lib/galleria/GalleriaContent.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="cx('root')" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...ptm('root') }">
+    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="[cx('root'), $attrs.containerClass]" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...ptm('root') }" data-pc-name="galleria">
         <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="ptm('closeButton')">
             <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="ptm('closeIcon')" />
         </button>
@@ -127,22 +127,6 @@ export default {
         }
     },
     computed: {
-        galleriaClass() {
-            const thumbnailsPosClass = this.$attrs.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.$attrs.thumbnailsPosition);
-            const indicatorPosClass = this.$attrs.showIndicators && this.getPositionClass('p-galleria-indicators', this.$attrs.indicatorsPosition);
-
-            return [
-                'p-galleria p-component',
-                {
-                    'p-galleria-fullscreen': this.$attrs.fullScreen,
-                    'p-galleria-indicator-onitem': this.$attrs.showIndicatorsOnItem,
-                    'p-galleria-item-nav-onhover': this.$attrs.showItemNavigatorsOnHover && !this.$attrs.fullScreen
-                },
-                thumbnailsPosClass,
-                indicatorPosClass,
-                this.$attrs.containerClass
-            ];
-        },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }

components/lib/galleria/GalleriaItem.vue

@@ -18,7 +18,7 @@
             <li
                 v-for="(item, index) of value"
                 :key="`p-galleria-indicator-${index}`"
-                :class="cx('indicator', { context: { index: index } })"
+                :class="cx('indicator', { index })"
                 tabindex="0"
                 :aria-label="ariaPageLabel(index + 1)"
                 :aria-selected="activeIndex === index"
@@ -27,6 +27,7 @@
                 @mouseenter="onIndicatorMouseEnter(index)"
                 @keydown="onIndicatorKeyDown($event, index)"
                 v-bind="ptm('indicator')"
+                :data-p-highlight="isIndicatorItemActive(index)"
             >
                 <button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')"></button>
                 <component v-if="templates.indicator" :is="templates.indicator" :index="index" />

components/lib/galleria/GalleriaThumbnails.vue

@@ -18,20 +18,17 @@
                     <div
                         v-for="(item, index) of value"
                         :key="`p-galleria-thumbnail-item-${index}`"
-                        :class="
+                        :class="cx('thumbnailItem', { index, activeIndex })"
-                            cx('thumbnailItem', {
-                                context: {
-                                    index,
-                                    activeIndex
-                                }
-                            })
-                        "
                         role="tab"
                         :data-p-active="activeIndex === index"
                         :aria-selected="activeIndex === index"
                         :aria-controls="containerId + '_item_' + index"
                         @keydown="onThumbnailKeydown($event, index)"
                         v-bind="ptm('thumbnailItem')"
+                        :data-p-galleria-thumbnail-item-current="activeIndex === index"
+                        :data-p-galleria-thumbnail-item-active="isItemActive(index)"
+                        :data-p-galleria-thumbnail-item-start="firstItemAciveIndex() === index"
+                        :data-p-galleria-thumbnail-item-end="lastItemActiveIndex() === index"
                     >
                         <div
                             :class="cx('thumbnailItemContent')"
@@ -427,7 +424,7 @@ export default {
             }
 
             let innerHTML = `
-                #${this.containerId} .p-galleria-thumbnail-item {
+                #${this.containerId} [data-pc-section="thumbnailitem"] {
                     flex: 1 0 ${100 / this.d_numVisible}%
                 }
             `;