primevue 3.16.2 → 3.18.0

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>

package/galleria/GalleriaThumbnails.vue

@@ -1,24 +1,31 @@
 <template>
     <div class="p-galleria-thumbnail-wrapper">
         <div class="p-galleria-thumbnail-container">
-            <button v-if="showThumbnailNavigators" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" type="button" v-ripple>
+            <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" type="button">
                 <span :class="navBackwardIconClass"></span>
             </button>
-            <div class="p-galleria-thumbnail-items-container" :style="{'height': isVertical ? contentHeight : ''}">
-                <div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd"
-                    @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
-                    <div v-for="(item, index) of value" :key="`p-galleria-thumbnail-item-${index}`" :class="['p-galleria-thumbnail-item', {
-                        'p-galleria-thumbnail-item-current': activeIndex === index,
-                        'p-galleria-thumbnail-item-active': isItemActive(index),
-                        'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
-                        'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
+            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
+                <div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
+                    <div
+                        v-for="(item, index) of value"
+                        :key="`p-galleria-thumbnail-item-${index}`"
+                        :class="[
+                            'p-galleria-thumbnail-item',
+                            {
+                                'p-galleria-thumbnail-item-current': activeIndex === index,
+                                'p-galleria-thumbnail-item-active': isItemActive(index),
+                                'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
+                                'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
+                            }
+                        ]"
+                    >
                         <div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)">
-                             <component :is="templates.thumbnail" :item="item" v-if="templates.thumbnail" />
+                            <component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
                         </div>
                     </div>
                 </div>
             </div>
-            <button v-if="showThumbnailNavigators" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" type="button" v-ripple>
+            <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" type="button">
                 <span :class="navForwardIconClass"></span>
             </button>
         </div>
@@ -26,8 +33,8 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
+import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'GalleriaThumbnails',
@@ -35,7 +42,7 @@ export default {
     props: {
         containerId: {
             type: String,
-            default: null,
+            default: null
         },
         value: {
             type: Array,
@@ -67,7 +74,7 @@ export default {
         },
         contentHeight: {
             type: String,
-            default: "300px"
+            default: '300px'
         },
         showThumbnailNavigators: {
             type: Boolean,
@@ -89,25 +96,25 @@ export default {
             d_oldActiveItemIndex: this.activeIndex,
             totalShiftedItems: 0,
             page: 0
-        }
+        };
     },
     watch: {
         numVisible(newValue, oldValue) {
-			this.d_numVisible = newValue;
-			this.d_oldNumVisible = oldValue;
+            this.d_numVisible = newValue;
+            this.d_oldNumVisible = oldValue;
         },
         activeIndex(newValue, oldValue) {
-			this.d_activeIndex = newValue;
-			this.d_oldActiveItemIndex = oldValue;
+            this.d_activeIndex = newValue;
+            this.d_oldActiveItemIndex = oldValue;
         }
     },
     mounted() {
-		this.createStyle();
-		this.calculatePosition();
+        this.createStyle();
+        this.calculatePosition();
 
-		if (this.responsiveOptions) {
-			this.bindDocumentListeners();
-		}
+        if (this.responsiveOptions) {
+            this.bindDocumentListeners();
+        }
     },
     updated() {
         let totalShiftedItems = this.totalShiftedItems;
@@ -115,22 +122,19 @@ export default {
         if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeIndex) {
             if (this.d_activeIndex <= this.getMedianItemIndex()) {
                 totalShiftedItems = 0;
-            }
-            else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {
+            } else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {
                 totalShiftedItems = this.d_numVisible - this.value.length;
-            }
-            else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
-                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex() + 1;
-            }
-            else {
-                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex();
+            } else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
+                totalShiftedItems = this.d_activeIndex * -1 + this.getMedianItemIndex() + 1;
+            } else {
+                totalShiftedItems = this.d_activeIndex * -1 + this.getMedianItemIndex();
             }
 
             if (totalShiftedItems !== this.totalShiftedItems) {
                 this.totalShiftedItems = totalShiftedItems;
             }
 
-            this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
+            this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
 
             if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
                 DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
@@ -142,37 +146,35 @@ export default {
         }
     },
     beforeUnmount() {
-		if (this.responsiveOptions) {
-			this.unbindDocumentListeners();
+        if (this.responsiveOptions) {
+            this.unbindDocumentListeners();
         }
 
         if (this.thumbnailsStyle) {
             this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);
         }
-	},
+    },
     methods: {
         step(dir) {
             let totalShiftedItems = this.totalShiftedItems + dir;
 
-            if (dir < 0 && (-1 * totalShiftedItems) + this.d_numVisible > (this.value.length - 1)) {
+            if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value.length - 1) {
                 totalShiftedItems = this.d_numVisible - this.value.length;
-            }
-            else if (dir > 0 && totalShiftedItems > 0) {
+            } else if (dir > 0 && totalShiftedItems > 0) {
                 totalShiftedItems = 0;
             }
 
             if (this.circular) {
                 if (dir < 0 && this.value.length - 1 === this.d_activeIndex) {
                     totalShiftedItems = 0;
-                }
-                else if (dir > 0 && this.d_activeIndex === 0) {
+                } else if (dir > 0 && this.d_activeIndex === 0) {
                     totalShiftedItems = this.d_numVisible - this.value.length;
                 }
             }
 
             if (this.$refs.itemsContainer) {
                 DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
-                this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
+                this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
                 this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
             }
 
@@ -186,18 +188,20 @@ export default {
         getMedianItemIndex() {
             let index = Math.floor(this.d_numVisible / 2);
 
-            return (this.d_numVisible % 2) ? index : index - 1;
+            return this.d_numVisible % 2 ? index : index - 1;
         },
         navBackward(e) {
             this.stopSlideShow();
 
             let prevItemIndex = this.d_activeIndex !== 0 ? this.d_activeIndex - 1 : 0;
             let diff = prevItemIndex + this.totalShiftedItems;
-            if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
+
+            if (this.d_numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.totalShiftedItems !== 0 || this.circular)) {
                 this.step(1);
             }
 
             let activeIndex = this.circular && this.d_activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
+
             this.$emit('update:activeIndex', activeIndex);
 
             if (e.cancelable) {
@@ -207,12 +211,14 @@ export default {
         navForward(e) {
             this.stopSlideShow();
 
-            let nextItemIndex = this.d_activeIndex + 1;
-            if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
+            let nextItemIndex = this.d_activeIndex === this.value.length - 1 ? this.value.length - 1 : this.d_activeIndex + 1;
+
+            if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.totalShiftedItems < this.getTotalPageNumber() - 1 || this.circular)) {
                 this.step(-1);
             }
 
-            let activeIndex = this.circular && (this.value.length - 1) === this.d_activeIndex ? 0 : nextItemIndex;
+            let activeIndex = this.circular && this.value.length - 1 === this.d_activeIndex ? 0 : nextItemIndex;
+
             this.$emit('update:activeIndex', activeIndex);
 
             if (e.cancelable) {
@@ -223,18 +229,21 @@ export default {
             this.stopSlideShow();
 
             let selectedItemIndex = index;
+
             if (selectedItemIndex !== this.d_activeIndex) {
                 const diff = selectedItemIndex + this.totalShiftedItems;
                 let dir = 0;
+
                 if (selectedItemIndex < this.d_activeIndex) {
-                    dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
-                    if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
+                    dir = this.d_numVisible - diff - 1 - this.getMedianItemIndex();
+
+                    if (dir > 0 && -1 * this.totalShiftedItems !== 0) {
                         this.step(dir);
                     }
-                }
-                else {
+                } else {
                     dir = this.getMedianItemIndex() - diff;
-                    if (dir < 0 && (-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1) {
+
+                    if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) {
                         this.step(dir);
                     }
                 }
@@ -265,22 +274,22 @@ export default {
             let touchobj = e.changedTouches[0];
 
             if (this.isVertical) {
-                this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
-            }
-            else {
-                this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
+                this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
+            } else {
+                this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
             }
         },
         changePageOnTouch(e, diff) {
-            if (diff < 0) {           // left
+            if (diff < 0) {
+                // left
                 this.navForward(e);
-            }
-            else {                    // right
+            } else {
+                // right
                 this.navBackward(e);
             }
         },
         getTotalPageNumber() {
-            return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
+            return this.value.length > this.d_numVisible ? this.value.length - this.d_numVisible + 1 : 0;
         },
         createStyle() {
             if (!this.thumbnailsStyle) {
@@ -291,7 +300,7 @@ export default {
 
             let innerHTML = `
                 #${this.containerId} .p-galleria-thumbnail-item {
-                    flex: 1 0 ${ (100/ this.d_numVisible) }%
+                    flex: 1 0 ${100 / this.d_numVisible}%
                 }
             `;
 
@@ -302,16 +311,11 @@ export default {
                     const value2 = data2.breakpoint;
                     let result = null;
 
-                    if (value1 == null && value2 != null)
-                        result = -1;
-                    else if (value1 != null && value2 == null)
-                        result = 1;
-                    else if (value1 == null && value2 == null)
-                        result = 0;
-                    else if (typeof value1 === 'string' && typeof value2 === 'string')
-                        result = value1.localeCompare(value2, undefined, { numeric: true });
-                    else
-                        result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+                    if (value1 == null && value2 != null) result = -1;
+                    else if (value1 != null && value2 == null) result = 1;
+                    else if (value1 == null && value2 == null) result = 0;
+                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                    else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
                     return -1 * result;
                 });
@@ -322,10 +326,10 @@ export default {
                     innerHTML += `
                         @media screen and (max-width: ${res.breakpoint}) {
                             #${this.containerId} .p-galleria-thumbnail-item {
-                                flex: 1 0 ${ (100/ res.numVisible) }%
+                                flex: 1 0 ${100 / res.numVisible}%
                             }
                         }
-                    `
+                    `;
                 }
             }
 
@@ -361,16 +365,16 @@ export default {
             }
         },
         unbindDocumentListeners() {
-            if(this.documentResizeListener) {
+            if (this.documentResizeListener) {
                 window.removeEventListener('resize', this.documentResizeListener);
                 this.documentResizeListener = null;
             }
         },
         isNavBackwardDisabled() {
-            return (!this.circular && this.d_activeIndex === 0) || (this.value.length <= this.d_numVisible);
+            return (!this.circular && this.d_activeIndex === 0) || this.value.length <= this.d_numVisible;
         },
         isNavForwardDisabled() {
-            return (!this.circular && this.d_activeIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
+            return (!this.circular && this.d_activeIndex === this.value.length - 1) || this.value.length <= this.d_numVisible;
         },
         firstItemAciveIndex() {
             return this.totalShiftedItems * -1;
@@ -384,30 +388,42 @@ export default {
     },
     computed: {
         navBackwardClass() {
-            return ['p-galleria-thumbnail-prev p-link', {
-                'p-disabled': this.isNavBackwardDisabled()
-            }];
+            return [
+                'p-galleria-thumbnail-prev p-link',
+                {
+                    'p-disabled': this.isNavBackwardDisabled()
+                }
+            ];
         },
         navForwardClass() {
-            return ['p-galleria-thumbnail-next p-link', {
-                'p-disabled': this.isNavForwardDisabled()
-            }];
+            return [
+                'p-galleria-thumbnail-next p-link',
+                {
+                    'p-disabled': this.isNavForwardDisabled()
+                }
+            ];
         },
         navBackwardIconClass() {
-            return ['p-galleria-thumbnail-prev-icon pi', {
-                'pi-chevron-left': !this.isVertical,
-                'pi-chevron-up': this.isVertical
-            }];
+            return [
+                'p-galleria-thumbnail-prev-icon pi',
+                {
+                    'pi-chevron-left': !this.isVertical,
+                    'pi-chevron-up': this.isVertical
+                }
+            ];
         },
         navForwardIconClass() {
-            return ['p-galleria-thumbnail-next-icon pi', {
-                'pi-chevron-right': !this.isVertical,
-                'pi-chevron-down': this.isVertical
-            }];
+            return [
+                'p-galleria-thumbnail-next-icon pi',
+                {
+                    'pi-chevron-right': !this.isVertical,
+                    'pi-chevron-down': this.isVertical
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>