primevue 3.16.2 → 3.17.0

package/galleria/Galleria.vue

@@ -2,7 +2,7 @@
     <Portal v-if="fullScreen">
         <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
-                <GalleriaContent :ref="containerRef" v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
+                <GalleriaContent v-if="visible" :ref="containerRef" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
             </transition>
         </div>
     </Portal>
@@ -11,7 +11,7 @@
 
 <script>
 import GalleriaContent from './GalleriaContent.vue';
-import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
 import Portal from 'primevue/portal';
 
 export default {
@@ -23,7 +23,7 @@ export default {
             type: String,
             default: null
         },
-		value: {
+        value: {
             type: Array,
             default: null
         },
@@ -40,9 +40,9 @@ export default {
             default: false
         },
         numVisible: {
-			type: Number,
-			default: 3
-		},
+            type: Number,
+            default: 3
+        },
         responsiveOptions: {
             type: Array,
             default: null
@@ -72,21 +72,21 @@ export default {
             default: false
         },
         transitionInterval: {
-			type: Number,
-			default: 4000
-		},
+            type: Number,
+            default: 4000
+        },
         showThumbnails: {
             type: Boolean,
             default: true
         },
         thumbnailsPosition: {
-			type: String,
-			default: "bottom"
-		},
+            type: String,
+            default: 'bottom'
+        },
         verticalThumbnailViewPortHeight: {
-			type: String,
-			default: "300px"
-		},
+            type: String,
+            default: '300px'
+        },
         showIndicators: {
             type: Boolean,
             default: false
@@ -96,12 +96,12 @@ export default {
             default: false
         },
         indicatorsPosition: {
-			type: String,
-			default: "bottom"
-		},
+            type: String,
+            default: 'bottom'
+        },
         baseZIndex: {
-			type: Number,
-			default: 0
+            type: Number,
+            default: 0
         },
         maskClass: {
             type: String,
@@ -115,7 +115,7 @@ export default {
     data() {
         return {
             containerVisible: this.visible
-        }
+        };
     },
     updated() {
         if (this.fullScreen && this.visible) {
@@ -128,6 +128,7 @@ export default {
         }
 
         this.mask = null;
+
         if (this.container) {
             ZIndexUtils.clear(this.container);
             this.container = null;
@@ -166,17 +167,21 @@ 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
-            }];
+            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
+        GalleriaContent: GalleriaContent,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>
@@ -200,7 +205,7 @@ export default {
 .p-galleria-item-nav {
     position: absolute;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -230,7 +235,7 @@ export default {
 .p-galleria-item-nav-onhover .p-galleria-item-nav {
     pointer-events: none;
     opacity: 0;
-    transition: opacity .2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
 }
 
 .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
@@ -295,12 +300,12 @@ export default {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    opacity: .5;
+    opacity: 0.5;
 }
 
 .p-galleria-thumbnail-item:hover {
     opacity: 1;
-    transition: opacity .3s;
+    transition: opacity 0.3s;
 }
 
 .p-galleria-thumbnail-item-current {
@@ -432,7 +437,7 @@ export default {
 .p-galleria-mask .p-galleria-item-nav {
     position: fixed;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
 }
 
 /* Animation */
@@ -441,7 +446,7 @@ export default {
 }
 
 .p-galleria-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .p-galleria-enter-from,

package/galleria/GalleriaContent.vue

@@ -1,21 +1,41 @@
 <template>
-    <div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.containerStyle">
-        <button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('mask-hide')" v-ripple>
+    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle">
+        <button v-if="$attrs.fullScreen" v-ripple type="button" class="p-galleria-close p-link" @click="$emit('mask-hide')">
             <span class="p-galleria-close-icon pi pi-times"></span>
         </button>
         <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
             <component :is="$attrs.templates['header']" />
         </div>
         <div class="p-galleria-content">
-            <GalleriaItem :value="$attrs.value" v-model:activeIndex="activeIndex" :circular="$attrs.circular" :templates="$attrs.templates"
-                :showIndicators="$attrs.showIndicators" :changeItemOnIndicatorHover="$attrs.changeItemOnIndicatorHover"
-                :showItemNavigators="$attrs.showItemNavigators" :autoPlay="$attrs.autoPlay" v-model:slideShowActive="slideShowActive"
-                @start-slideshow="startSlideShow" @stop-slideshow="stopSlideShow" />
+            <GalleriaItem
+                v-model:activeIndex="activeIndex"
+                v-model:slideShowActive="slideShowActive"
+                :value="$attrs.value"
+                :circular="$attrs.circular"
+                :templates="$attrs.templates"
+                :showIndicators="$attrs.showIndicators"
+                :changeItemOnIndicatorHover="$attrs.changeItemOnIndicatorHover"
+                :showItemNavigators="$attrs.showItemNavigators"
+                :autoPlay="$attrs.autoPlay"
+                @start-slideshow="startSlideShow"
+                @stop-slideshow="stopSlideShow"
+            />
 
-            <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" v-model:activeIndex="activeIndex" :templates="$attrs.templates"
-                :numVisible="numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
-                :isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavigators="$attrs.showThumbnailNavigators"
-                v-model:slideShowActive="slideShowActive" @stop-slideshow="stopSlideShow" />
+            <GalleriaThumbnails
+                v-if="$attrs.showThumbnails"
+                v-model:activeIndex="activeIndex"
+                v-model:slideShowActive="slideShowActive"
+                :containerId="id"
+                :value="$attrs.value"
+                :templates="$attrs.templates"
+                :numVisible="numVisible"
+                :responsiveOptions="$attrs.responsiveOptions"
+                :circular="$attrs.circular"
+                :isVertical="isVertical()"
+                :contentHeight="$attrs.verticalThumbnailViewPortHeight"
+                :showThumbnailNavigators="$attrs.showThumbnailNavigators"
+                @stop-slideshow="stopSlideShow"
+            />
         </div>
         <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
             <component :is="$attrs.templates['footer']" />
@@ -24,7 +44,7 @@
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 import GalleriaItem from './GalleriaItem.vue';
 import GalleriaThumbnails from './GalleriaThumbnails.vue';
 import GalleriaItemSlot from './GalleriaItemSlot.vue';
@@ -41,18 +61,18 @@ export default {
             activeIndex: this.$attrs.activeIndex,
             numVisible: this.$attrs.numVisible,
             slideShowActive: false
-        }
+        };
     },
     watch: {
-        '$attrs.value': function(newVal) {
+        '$attrs.value': function (newVal) {
             if (newVal && newVal.length < this.numVisible) {
                 this.numVisible = newVal.length;
             }
         },
-        '$attrs.activeIndex': function(newVal) {
+        '$attrs.activeIndex': function (newVal) {
             this.activeIndex = newVal;
         },
-        '$attrs.numVisible': function(newVal) {
+        '$attrs.numVisible': function (newVal) {
             this.numVisible = newVal;
         }
     },
@@ -60,17 +80,18 @@ export default {
         this.$emit('activeitem-change', this.activeIndex);
     },
     beforeUnmount() {
-		if (this.slideShowActive) {
-			this.stopSlideShow();
-		}
-	},
+        if (this.slideShowActive) {
+            this.stopSlideShow();
+        }
+    },
     methods: {
         isAutoPlayActive() {
             return this.slideShowActive;
         },
         startSlideShow() {
             this.interval = setInterval(() => {
-                let activeIndex = (this.$attrs.circular && (this.$attrs.value.length - 1) === this.activeIndex) ? 0 : (this.activeIndex + 1);
+                let activeIndex = this.$attrs.circular && this.$attrs.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
+
                 this.activeIndex = activeIndex;
             }, this.$attrs.transitionInterval);
 
@@ -85,7 +106,7 @@ export default {
         },
         getPositionClass(preClassName, position) {
             const positions = ['top', 'left', 'bottom', 'right'];
-            const pos = positions.find(item => item === position);
+            const pos = positions.find((item) => item === position);
 
             return pos ? `${preClassName}-${pos}` : '';
         },
@@ -98,20 +119,26 @@ export default {
             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]
+            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
+            ];
         }
     },
     components: {
-        'GalleriaItem': GalleriaItem,
-        'GalleriaThumbnails': GalleriaThumbnails,
-        'GalleriaItemSlot': GalleriaItemSlot
+        GalleriaItem: GalleriaItem,
+        GalleriaThumbnails: GalleriaThumbnails,
+        GalleriaItemSlot: GalleriaItemSlot
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>

package/galleria/GalleriaItem.vue

@@ -1,28 +1,34 @@
 <template>
-  <div class="p-galleria-item-wrapper">
-    <div class="p-galleria-item-container">
-        <button v-if="showItemNavigators" type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-ripple>
-            <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
-        </button>
-        <div class="p-galleria-item">
-            <component :is="templates.item" :item="activeItem" v-if="templates.item" />
-        </div>
-        <button v-if="showItemNavigators" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-ripple>
-            <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
-        </button>
-        <div class="p-galleria-caption" v-if="templates['caption']">
-            <component :is="templates.caption" :item="activeItem" v-if="templates.caption" />
+    <div class="p-galleria-item-wrapper">
+        <div class="p-galleria-item-container">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
+                <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
+            </button>
+            <div class="p-galleria-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()">
+                <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
+            </button>
+            <div v-if="templates['caption']" class="p-galleria-caption">
+                <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
+            </div>
         </div>
+        <ul v-if="showIndicators" class="p-galleria-indicators p-reset">
+            <li
+                v-for="(item, index) of value"
+                :key="`p-galleria-indicator-${index}`"
+                tabindex="0"
+                @click="onIndicatorClick(index)"
+                @mouseenter="onIndicatorMouseEnter(index)"
+                @keydown.enter="onIndicatorKeyDown(index)"
+                :class="['p-galleria-indicator', { 'p-highlight': isIndicatorItemActive(index) }]"
+            >
+                <button v-if="!templates['indicator']" type="button" tabindex="-1" class="p-link"></button>
+                <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
+            </li>
+        </ul>
     </div>
-    <ul v-if="showIndicators" class="p-galleria-indicators p-reset">
-        <li v-for="(item, index) of value" :key="`p-galleria-indicator-${index}`" tabindex="0"
-            @click="onIndicatorClick(index)" @mouseenter="onIndicatorMouseEnter(index)" @keydown.enter="onIndicatorKeyDown(index)"
-            :class="['p-galleria-indicator', {'p-highlight': isIndicatorItemActive(index)}]">
-            <button type="button" tabindex="-1" class="p-link" v-if="!templates['indicator']"></button>
-            <component :is="templates.indicator" :index="index" v-if="templates.indicator" />
-        </li>
-    </ul>
-  </div>
 </template>
 
 <script>
@@ -77,17 +83,13 @@ export default {
     methods: {
         next() {
             let nextItemIndex = this.activeIndex + 1;
-            let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
-                        ? 0
-                        : nextItemIndex;
+            let activeIndex = this.circular && this.value.length - 1 === this.activeIndex ? 0 : nextItemIndex;
 
             this.$emit('update:activeIndex', activeIndex);
         },
         prev() {
             let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
-            let activeIndex = this.circular && this.activeIndex === 0
-                    ? this.value.length - 1
-                    : prevItemIndex
+            let activeIndex = this.circular && this.activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
 
             this.$emit('update:activeIndex', activeIndex);
         },
@@ -135,7 +137,7 @@ export default {
             return !this.circular && this.activeIndex === 0;
         },
         isNavForwardDisabled() {
-            return !this.circular && this.activeIndex === (this.value.length - 1);
+            return !this.circular && this.activeIndex === this.value.length - 1;
         }
     },
     computed: {
@@ -143,18 +145,24 @@ export default {
             return this.value[this.activeIndex];
         },
         navBackwardClass() {
-            return ['p-galleria-item-prev p-galleria-item-nav p-link', {
-                'p-disabled': this.isNavBackwardDisabled()
-            }];
+            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()
-            }];
+            return [
+                'p-galleria-item-next p-galleria-item-nav p-link',
+                {
+                    'p-disabled': this.isNavForwardDisabled()
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
 };
 </script>

package/galleria/GalleriaItemSlot.vue

@@ -25,6 +25,7 @@ export default {
 
         if (template) {
             let content;
+
             switch (type) {
                 case 'item':
                 case 'caption':
@@ -48,5 +49,5 @@ export default {
 
         return null;
     }
-}
+};
 </script>