Refactor #3965 - For Galleria

components/lib/galleria/BaseGalleria.vue

@@ -0,0 +1,406 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-galleria-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.p-galleria-item-wrapper {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.p-galleria-item-container {
+    position: relative;
+    display: flex;
+    height: 100%;
+}
+
+.p-galleria-item-nav {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.p-galleria-item-prev {
+    left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-galleria-item-next {
+    right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-galleria-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.p-galleria-item-nav-onhover .p-galleria-item-nav {
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+}
+
+.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
+    pointer-events: all;
+    opacity: 1;
+}
+
+.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
+    pointer-events: none;
+}
+
+.p-galleria-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+/* Thumbnails */
+.p-galleria-thumbnail-wrapper {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    flex-shrink: 0;
+}
+
+.p-galleria-thumbnail-prev,
+.p-galleria-thumbnail-next {
+    align-self: center;
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-galleria-thumbnail-prev span,
+.p-galleria-thumbnail-next span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-galleria-thumbnail-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.p-galleria-thumbnail-items-container {
+    overflow: hidden;
+    width: 100%;
+}
+
+.p-galleria-thumbnail-items {
+    display: flex;
+}
+
+.p-galleria-thumbnail-item {
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0.5;
+}
+
+.p-galleria-thumbnail-item:hover {
+    opacity: 1;
+    transition: opacity 0.3s;
+}
+
+.p-galleria-thumbnail-item-current {
+    opacity: 1;
+}
+
+/* Positions */
+/* Thumbnails */
+.p-galleria-thumbnails-left .p-galleria-content,
+.p-galleria-thumbnails-right .p-galleria-content {
+    flex-direction: row;
+}
+
+.p-galleria-thumbnails-left .p-galleria-item-wrapper,
+.p-galleria-thumbnails-right .p-galleria-item-wrapper {
+    flex-direction: row;
+}
+
+.p-galleria-thumbnails-left .p-galleria-item-wrapper,
+.p-galleria-thumbnails-top .p-galleria-item-wrapper {
+    order: 2;
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
+.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
+    order: 1;
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
+.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
+.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
+    flex-direction: column;
+    height: 100%;
+}
+
+/* Indicators */
+.p-galleria-indicators {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-galleria-indicator > button {
+    display: inline-flex;
+    align-items: center;
+}
+
+.p-galleria-indicators-left .p-galleria-item-wrapper,
+.p-galleria-indicators-right .p-galleria-item-wrapper {
+    flex-direction: row;
+    align-items: center;
+}
+
+.p-galleria-indicators-left .p-galleria-item-container,
+.p-galleria-indicators-top .p-galleria-item-container {
+    order: 2;
+}
+
+.p-galleria-indicators-left .p-galleria-indicators,
+.p-galleria-indicators-top .p-galleria-indicators {
+    order: 1;
+}
+
+.p-galleria-indicators-left .p-galleria-indicators,
+.p-galleria-indicators-right .p-galleria-indicators {
+    flex-direction: column;
+}
+
+.p-galleria-indicator-onitem .p-galleria-indicators {
+    position: absolute;
+    display: flex;
+}
+
+.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
+    top: 0;
+    left: 0;
+    width: 100%;
+    align-items: flex-start;
+}
+
+.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
+    right: 0;
+    top: 0;
+    height: 100%;
+    align-items: flex-end;
+}
+
+.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    align-items: flex-end;
+}
+
+.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
+    left: 0;
+    top: 0;
+    height: 100%;
+    align-items: flex-start;
+}
+
+/* FullScreen */
+.p-galleria-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-galleria-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.p-galleria-mask .p-galleria-item-nav {
+    position: fixed;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+/* Animation */
+.p-galleria-enter-active {
+    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-galleria-leave-active {
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.p-galleria-enter-from,
+.p-galleria-leave-to {
+    opacity: 0;
+    transform: scale(0.7);
+}
+
+.p-galleria-enter-active .p-galleria-item-nav {
+    opacity: 0;
+}
+
+/* Keyboard Support */
+.p-items-hidden .p-galleria-thumbnail-item {
+    visibility: hidden;
+}
+
+.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
+    visibility: visible;
+}
+`;
+
+const classes = {
+    mask: ({ props, instance }) => [
+        'p-galleria-mask p-component-overlay p-component-overlay-enter',
+        props.maskClass,
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    root: ({ instance }) => instance.galleriaClass,
+    closeButton: 'p-galleria-close p-link',
+    closeIcon: 'p-galleria-close-icon',
+    header: 'p-galleria-header',
+    content: 'p-galleria-content',
+    footer: 'p-galleria-footer',
+    itemWrapper: 'p-galleria-item-wrapper',
+    itemContainer: 'p-galleria-item-container',
+    previousItemButton: ({ instance }) => [
+        'p-galleria-item-prev p-galleria-item-nav p-link',
+        {
+            'p-disabled': instance.isNavBackwardDisabled()
+        }
+    ],
+    previousItemIcon: 'p-galleria-item-prev-icon',
+    item: 'p-galleria-item',
+    nextItemButton: ({ instance }) => [
+        'p-galleria-item-next p-galleria-item-nav p-link',
+        {
+            'p-disabled': instance.isNavForwardDisabled()
+        }
+    ],
+    nextItemIcon: 'p-galleria-item-next-icon',
+    caption: 'p-galleria-caption',
+    indicators: 'p-galleria-indicators p-reset',
+    indicator: ({ instance, context }) => [
+        'p-galleria-indicator',
+        {
+            'p-highlight': instance.isIndicatorItemActive(context.index)
+        }
+    ],
+    indicatorButton: 'p-link',
+    thumbnailWrapper: 'p-galleria-thumbnail-wrapper',
+    thumbnailContainer: 'p-galleria-thumbnail-container',
+    previousThumbnailButton: ({ instance }) => [
+        'p-galleria-thumbnail-prev p-link',
+        {
+            'p-disabled': instance.isNavBackwardDisabled()
+        }
+    ],
+    previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
+    thumbnailItemsContainer: 'p-galleria-thumbnail-items-container',
+    thumbnailItems: 'p-galleria-thumbnail-items',
+    thumbnailItem: ({ instance, context }) => [
+        'p-galleria-thumbnail-item',
+        {
+            'p-galleria-thumbnail-item-current': context.activeIndex === context.index,
+            'p-galleria-thumbnail-item-active': instance.isItemActive(context.index),
+            'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === context.index,
+            'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === context.index
+        }
+    ],
+    thumbnailItemContent: 'p-galleria-thumbnail-item-content',
+    nextThumbnailButton: ({ instance }) => [
+        'p-galleria-thumbnail-next p-link',
+        {
+            'p-disabled': instance.isNavForwardDisabled()
+        }
+    ],
+    nextThumbnailIcon: 'p-galleria-thumbnail-next-icon'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_galleria_style', manual: true });
+
+export default {
+    name: 'BaseGalleria',
+    extends: BaseComponent,
+    props: {
+        label: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+        image: {
+            type: String,
+            default: null
+        },
+        size: {
+            type: String,
+            default: 'normal'
+        },
+        shape: {
+            type: String,
+            default: 'square'
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/galleria/Galleria.d.ts

@@ -348,6 +348,11 @@ export interface GalleriaProps {
      * @type {GalleriaPassThroughOptions}
      */
     pt?: GalleriaPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 /**
  * Defines valid slots in Galleria slots.

components/lib/galleria/Galleria.vue

@@ -1,16 +1,16 @@
 <template>
     <Portal v-if="fullScreen">
-        <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :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" :pt="pt" v-bind="$props" />
+                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" :unstyled="unstyled" v-bind="$props" />
             </transition>
         </div>
     </Portal>
-    <GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
+    <GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" :unstyled="unstyled" v-bind="$props" />
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseGalleria from './BaseGalleria.vue';
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
@@ -18,7 +18,7 @@ import GalleriaContent from './GalleriaContent.vue';
 
 export default {
     name: 'Galleria',
-    extends: BaseComponent,
+    extends: BaseGalleria,
     inheritAttrs: false,
     emits: ['update:activeIndex', 'update:visible'],
     props: {
@@ -194,18 +194,6 @@ export default {
             }
         }
     },
-    computed: {
-        maskContentClass() {
-            return [
-                'p-galleria-mask p-component-overlay p-component-overlay-enter',
-                this.maskClass,
-                {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
-            ];
-        }
-    },
     components: {
         GalleriaContent: GalleriaContent,
         Portal: Portal
@@ -215,288 +203,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-galleria-content {
-    display: flex;
-    flex-direction: column;
-}
-
-.p-galleria-item-wrapper {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-
-.p-galleria-item-container {
-    position: relative;
-    display: flex;
-    height: 100%;
-}
-
-.p-galleria-item-nav {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-.p-galleria-item-prev {
-    left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-galleria-item-next {
-    right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-galleria-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-
-.p-galleria-item-nav-onhover .p-galleria-item-nav {
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-}
-
-.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
-    pointer-events: all;
-    opacity: 1;
-}
-
-.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
-    pointer-events: none;
-}
-
-.p-galleria-caption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-}
-
-/* Thumbnails */
-.p-galleria-thumbnail-wrapper {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    flex-shrink: 0;
-}
-
-.p-galleria-thumbnail-prev,
-.p-galleria-thumbnail-next {
-    align-self: center;
-    flex: 0 0 auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-galleria-thumbnail-prev span,
-.p-galleria-thumbnail-next span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-galleria-thumbnail-container {
-    display: flex;
-    flex-direction: row;
-}
-
-.p-galleria-thumbnail-items-container {
-    overflow: hidden;
-    width: 100%;
-}
-
-.p-galleria-thumbnail-items {
-    display: flex;
-}
-
-.p-galleria-thumbnail-item {
-    overflow: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    opacity: 0.5;
-}
-
-.p-galleria-thumbnail-item:hover {
-    opacity: 1;
-    transition: opacity 0.3s;
-}
-
-.p-galleria-thumbnail-item-current {
-    opacity: 1;
-}
-
-/* Positions */
-/* Thumbnails */
-.p-galleria-thumbnails-left .p-galleria-content,
-.p-galleria-thumbnails-right .p-galleria-content {
-    flex-direction: row;
-}
-
-.p-galleria-thumbnails-left .p-galleria-item-wrapper,
-.p-galleria-thumbnails-right .p-galleria-item-wrapper {
-    flex-direction: row;
-}
-
-.p-galleria-thumbnails-left .p-galleria-item-wrapper,
-.p-galleria-thumbnails-top .p-galleria-item-wrapper {
-    order: 2;
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
-.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
-    order: 1;
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
-.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
-    flex-direction: column;
-    flex-grow: 1;
-}
-
-.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
-.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
-    flex-direction: column;
-    height: 100%;
-}
-
-/* Indicators */
-.p-galleria-indicators {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-galleria-indicator > button {
-    display: inline-flex;
-    align-items: center;
-}
-
-.p-galleria-indicators-left .p-galleria-item-wrapper,
-.p-galleria-indicators-right .p-galleria-item-wrapper {
-    flex-direction: row;
-    align-items: center;
-}
-
-.p-galleria-indicators-left .p-galleria-item-container,
-.p-galleria-indicators-top .p-galleria-item-container {
-    order: 2;
-}
-
-.p-galleria-indicators-left .p-galleria-indicators,
-.p-galleria-indicators-top .p-galleria-indicators {
-    order: 1;
-}
-
-.p-galleria-indicators-left .p-galleria-indicators,
-.p-galleria-indicators-right .p-galleria-indicators {
-    flex-direction: column;
-}
-
-.p-galleria-indicator-onitem .p-galleria-indicators {
-    position: absolute;
-    display: flex;
-}
-
-.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
-    top: 0;
-    left: 0;
-    width: 100%;
-    align-items: flex-start;
-}
-
-.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
-    right: 0;
-    top: 0;
-    height: 100%;
-    align-items: flex-end;
-}
-
-.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    align-items: flex-end;
-}
-
-.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
-    left: 0;
-    top: 0;
-    height: 100%;
-    align-items: flex-start;
-}
-
-/* FullScreen */
-.p-galleria-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-galleria-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-.p-galleria-mask .p-galleria-item-nav {
-    position: fixed;
-    top: 50%;
-    margin-top: -0.5rem;
-}
-
-/* Animation */
-.p-galleria-enter-active {
-    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-galleria-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.p-galleria-enter-from,
-.p-galleria-leave-to {
-    opacity: 0;
-    transform: scale(0.7);
-}
-
-.p-galleria-enter-active .p-galleria-item-nav {
-    opacity: 0;
-}
-
-/* Keyboard Support */
-.p-items-hidden .p-galleria-thumbnail-item {
-    visibility: hidden;
-}
-
-.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
-    visibility: visible;
-}
-</style>

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, ...ptm('root') }">
+    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="cx('root')" :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')" v-bind="ptm('closeButton')">
+        <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="p-galleria-close-icon" v-bind="ptm('closeIcon')" />
+            <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="ptm('closeIcon')" />
         </button>
-        <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header" v-bind="ptm('header')">
+        <div v-if="$attrs.templates && $attrs.templates['header']" :class="cx('header')" v-bind="ptm('header')">
             <component :is="$attrs.templates['header']" />
         </div>
-        <div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="ptm('content')">
+        <div :class="cx('content')" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="ptm('content')">
             <GalleriaItem
                 :id="id"
                 v-model:activeIndex="activeIndex"
@@ -21,6 +21,7 @@
                 @start-slideshow="startSlideShow"
                 @stop-slideshow="stopSlideShow"
                 :pt="pt"
+                :unstyled="unstyled"
             />
 
             <GalleriaThumbnails
@@ -40,9 +41,10 @@
                 :nextButtonProps="$attrs.nextButtonProps"
                 @stop-slideshow="stopSlideShow"
                 :pt="pt"
+                :unstyled="unstyled"
             />
         </div>
-        <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer" v-bind="ptm('footer')">
+        <div v-if="$attrs.templates && $attrs.templates['footer']" :class="cx('footer')" v-bind="ptm('footer')">
             <component :is="$attrs.templates['footer']" />
         </div>
     </div>

components/lib/galleria/GalleriaItem.vue

@@ -1,24 +1,24 @@
 <template>
-    <div class="p-galleria-item-wrapper" v-bind="ptm('itemWrapper')">
+    <div :class="cx('itemWrapper')" v-bind="ptm('itemWrapper')">
-        <div class="p-galleria-item-container" v-bind="ptm('itemContainer')">
+        <div :class="cx('itemContainer')" v-bind="ptm('itemContainer')">
-            <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')">
-                <component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" v-bind="ptm('previousItemIcon')" />
+                <component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('previousItemIcon')" v-bind="ptm('previousItemIcon')" />
             </button>
-            <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
+            <div :id="id + '_item_' + activeIndex" :class="cx('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()" v-bind="ptm('nextItemButton')">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextItemButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')">
-                <component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" v-bind="ptm('nextItemIcon')" />
+                <component :is="templates.nextitemicon || 'ChevronRightIcon'" :class="cx('nextItemIcon')" v-bind="ptm('nextItemIcon')" />
             </button>
-            <div v-if="templates['caption']" class="p-galleria-caption" v-bind="ptm('caption')">
+            <div v-if="templates['caption']" :class="cx('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" v-bind="ptm('indicators')">
+        <ul v-if="showIndicators" :class="cx('indicators')" v-bind="ptm('indicators')">
             <li
                 v-for="(item, index) of value"
                 :key="`p-galleria-indicator-${index}`"
-                :class="['p-galleria-indicator', { 'p-highlight': isIndicatorItemActive(index) }]"
+                :class="cx('indicator', { context: { index: index } })"
                 tabindex="0"
                 :aria-label="ariaPageLabel(index + 1)"
                 :aria-selected="activeIndex === index"
@@ -28,7 +28,7 @@
                 @keydown="onIndicatorKeyDown($event, index)"
                 v-bind="ptm('indicator')"
             >
-                <button v-if="!templates['indicator']" type="button" tabindex="-1" class="p-link"></button>
+                <button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')"></button>
                 <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
             </li>
         </ul>
@@ -176,22 +176,7 @@ export default {
         activeItem() {
             return this.value[this.activeIndex];
         },
-        navBackwardClass() {
+
-            return [
-                'p-galleria-item-prev p-galleria-item-nav p-link',
-                {
-                    'p-disabled': this.isNavBackwardDisabled()
-                }
-            ];
-        },
-        navForwardClass() {
-            return [
-                'p-galleria-item-next p-galleria-item-nav p-link',
-                {
-                    'p-disabled': this.isNavForwardDisabled()
-                }
-            ];
-        },
         ariaSlideLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;
         }

components/lib/galleria/GalleriaThumbnails.vue

@@ -1,41 +1,31 @@
 <template>
-    <div class="p-galleria-thumbnail-wrapper" v-bind="ptm('thumbnailWrapper')">
+    <div :class="cx('thumbnailWrapper')" v-bind="ptm('thumbnailWrapper')">
-        <div class="p-galleria-thumbnail-container" v-bind="ptm('thumbnailContainer')">
+        <div :class="cx('thumbnailContainer')" v-bind="ptm('thumbnailContainer')">
             <button
                 v-if="showThumbnailNavigators"
                 v-ripple
-                :class="navBackwardClass"
+                :class="cx('previousThumbnailButton')"
                 :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')" />
+                <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
             </button>
-            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
+            <div :class="cx('thumbnailItemsContainer')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
-                <div
+                <div ref="itemsContainer" :class="cx('thumbnailItems')" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)" v-bind="ptm('thumbnailItems')">
-                    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}`"
-                        :class="[
+                        :class="
-                            'p-galleria-thumbnail-item',
+                            cx('thumbnailItem', {
-                            {
+                                context: {
-                                'p-galleria-thumbnail-item-current': activeIndex === index,
+                                    index,
-                                'p-galleria-thumbnail-item-active': isItemActive(index),
+                                    activeIndex
-                                'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
-                                'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
                                 }
-                        ]"
+                            })
+                        "
                         role="tab"
                         :aria-selected="activeIndex === index"
                         :aria-controls="containerId + '_item_' + index"
@@ -43,7 +33,7 @@
                         v-bind="ptm('thumbnailItem')"
                     >
                         <div
-                            class="p-galleria-thumbnail-item-content"
+                            :class="cx('thumbnailItemContent')"
                             :tabindex="activeIndex === index ? '0' : '-1'"
                             :aria-label="ariaPageLabel(index + 1)"
                             :aria-current="activeIndex === index ? 'page' : undefined"
@@ -58,14 +48,14 @@
             <button
                 v-if="showThumbnailNavigators"
                 v-ripple
-                :class="navForwardClass"
+                :class="cx('nextThumbnailButton')"
                 :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')" />
+                <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" :class="cx('nextThumbnailIcon')" v-bind="ptm('nextThumbnailIcon')" />
             </button>
         </div>
     </div>
@@ -526,22 +516,6 @@ export default {
         }
     },
     computed: {
-        navBackwardClass() {
-            return [
-                'p-galleria-thumbnail-prev p-link',
-                {
-                    'p-disabled': this.isNavBackwardDisabled()
-                }
-            ];
-        },
-        navForwardClass() {
-            return [
-                'p-galleria-thumbnail-next p-link',
-                {
-                    'p-disabled': this.isNavForwardDisabled()
-                }
-            ];
-        },
         ariaPrevButtonLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.prevPageLabel : undefined;
         },