primevue 3.29.2 → 3.30.0

package/galleria/Galleria.vue

@@ -1,136 +1,26 @@
 <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'), maskClass]" :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 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 {
     name: 'Galleria',
-    extends: BaseComponent,
+    extends: BaseGalleria,
     inheritAttrs: false,
     emits: ['update:activeIndex', 'update:visible'],
-    props: {
-        id: {
-            type: String,
-            default: null
-        },
-        value: {
-            type: Array,
-            default: null
-        },
-        activeIndex: {
-            type: Number,
-            default: 0
-        },
-        fullScreen: {
-            type: Boolean,
-            default: false
-        },
-        visible: {
-            type: Boolean,
-            default: false
-        },
-        numVisible: {
-            type: Number,
-            default: 3
-        },
-        responsiveOptions: {
-            type: Array,
-            default: null
-        },
-        showItemNavigators: {
-            type: Boolean,
-            default: false
-        },
-        showThumbnailNavigators: {
-            type: Boolean,
-            default: true
-        },
-        showItemNavigatorsOnHover: {
-            type: Boolean,
-            default: false
-        },
-        changeItemOnIndicatorHover: {
-            type: Boolean,
-            default: false
-        },
-        circular: {
-            type: Boolean,
-            default: false
-        },
-        autoPlay: {
-            type: Boolean,
-            default: false
-        },
-        transitionInterval: {
-            type: Number,
-            default: 4000
-        },
-        showThumbnails: {
-            type: Boolean,
-            default: true
-        },
-        thumbnailsPosition: {
-            type: String,
-            default: 'bottom'
-        },
-        verticalThumbnailViewPortHeight: {
-            type: String,
-            default: '300px'
-        },
-        showIndicators: {
-            type: Boolean,
-            default: false
-        },
-        showIndicatorsOnItem: {
-            type: Boolean,
-            default: false
-        },
-        indicatorsPosition: {
-            type: String,
-            default: 'bottom'
-        },
-        baseZIndex: {
-            type: Number,
-            default: 0
-        },
-        maskClass: {
-            type: String,
-            default: null
-        },
-        containerStyle: {
-            type: null,
-            default: null
-        },
-        containerClass: {
-            type: null,
-            default: null
-        },
-        containerProps: {
-            type: null,
-            default: null
-        },
-        prevButtonProps: {
-            type: null,
-            default: null
-        },
-        nextButtonProps: {
-            type: null,
-            default: null
-        }
-    },
     container: null,
     mask: null,
     data() {
@@ -165,7 +55,7 @@ export default {
             this.focus();
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+            !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
         },
         onAfterLeave(el) {
             ZIndexUtils.clear(el);
@@ -194,18 +84,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 +93,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>

package/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') }">
-        <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" v-bind="ptm('closeIcon')" />
+    <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>
-        <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>
@@ -125,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;
         }

package/galleria/GalleriaItem.vue

@@ -1,24 +1,24 @@
 <template>
-    <div class="p-galleria-item-wrapper" v-bind="ptm('itemWrapper')">
-        <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()" v-bind="ptm('previousItemButton')">
-                <component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" v-bind="ptm('previousItemIcon')" />
+    <div :class="cx('itemWrapper')" v-bind="ptm('itemWrapper')">
+        <div :class="cx('itemContainer')" v-bind="ptm('itemContainer')">
+            <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="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')">
-                <component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" v-bind="ptm('nextItemIcon')" />
+            <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="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', { index })"
                 tabindex="0"
                 :aria-label="ariaPageLabel(index + 1)"
                 :aria-selected="activeIndex === index"
@@ -27,8 +27,9 @@
                 @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="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 +177,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;
         }