Fixed #1523 - Thumbnails are not displayed correctly on Galleria if n…

…umVisible is greater than the length of value
primefaces · Sep 8, 2021 · e274666 · e274666
1 parent f5226f6
commit e274666
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
@@ -286,6 +286,7 @@ export default {
 
 .p-galleria-thumbnail-items-container {
     overflow: hidden;
+    width: 100%;
 }
 
 .p-galleria-thumbnail-items {

diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
@@ -13,7 +13,7 @@
                 @start-slideshow="startSlideShow" @stop-slideshow="stopSlideShow" />
 
             <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" v-model:activeIndex="activeIndex" :templates="$attrs.templates"
-                :numVisible="$attrs.numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
+                :numVisible="numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
                 :isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavigators="$attrs.showThumbnailNavigators"
                 v-model:slideShowActive="slideShowActive" @stop-slideshow="stopSlideShow" />
         </div>
@@ -39,12 +39,21 @@ export default {
         return {
             id: this.$attrs.id || UniqueComponentId(),
             activeIndex: this.$attrs.activeIndex,
+            numVisible: this.$attrs.numVisible,
             slideShowActive: false
         }
     },
     watch: {
+        '$attrs.value': function(newVal) {
+            if (newVal && newVal.length < this.numVisible) {
+                this.numVisible = newVal.length;
+            }
+        },
         '$attrs.activeIndex': function(newVal) {
             this.activeIndex = newVal;
+        },
+        '$attrs.numVisible': function(newVal) {
+            this.numVisible = newVal;
         }
     },
     updated() {