Merge branch 'prod'

assets/styles/layout/_responsive.scss

@@ -12,7 +12,7 @@
 
 }
 
-@media screen and (max-width: 991px) {
+@media screen and (max-width: 1199px) {
     .layout-topbar-inner {   
         padding-left: 2rem;
         padding-right: 2rem;

doc/carousel/BasicDoc.vue

@@ -40,17 +40,17 @@ export default {
                     numScroll: 1
                 },
                 {
-                    breakpoint: '1200px',
+                    breakpoint: '1199px',
-                    numVisible: 1,
+                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
-                    numVisible: 2,
                     numScroll: 1
                 },
                 {
                     breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
                     numVisible: 1,
                     numScroll: 1
                 }
@@ -108,23 +108,23 @@ export default {
         return {
             products: null,
             responsiveOptions: [
-            {
+                {
                     breakpoint: '1400px',
                     numVisible: 2,
                     numScroll: 1
                 },
                 {
-                    breakpoint: '1200px',
+                    breakpoint: '1199px',
-                    numVisible: 1,
+                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
-                    numVisible: 2,
                     numScroll: 1
                 },
                 {
                     breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
                     numVisible: 1,
                     numScroll: 1
                 }
@@ -194,17 +194,17 @@ const responsiveOptions = ref([
         numScroll: 1
     },
     {
-        breakpoint: '1200px',
+        breakpoint: '1199px',
-        numVisible: 1,
+        numVisible: 3,
-        numScroll: 1
-    },
-    {
-        breakpoint: '991px',
-        numVisible: 2,
         numScroll: 1
     },
     {
         breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '575px',
         numVisible: 1,
         numScroll: 1
     }

doc/carousel/CircularDoc.vue

@@ -40,17 +40,17 @@ export default {
                     numScroll: 1
                 },
                 {
-                    breakpoint: '1200px',
+                    breakpoint: '1199px',
-                    numVisible: 1,
+                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
-                    numVisible: 2,
                     numScroll: 1
                 },
                 {
                     breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
                     numVisible: 1,
                     numScroll: 1
                 }
@@ -114,17 +114,17 @@ export default {
                     numScroll: 1
                 },
                 {
-                    breakpoint: '1200px',
+                    breakpoint: '1199px',
-                    numVisible: 1,
+                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
-                    numVisible: 2,
                     numScroll: 1
                 },
                 {
                     breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
                     numVisible: 1,
                     numScroll: 1
                 }
@@ -194,17 +194,17 @@ const responsiveOptions = ref([
         numScroll: 1
     },
     {
-        breakpoint: '1200px',
+        breakpoint: '1199px',
-        numVisible: 1,
+        numVisible: 3,
-        numScroll: 1
-    },
-    {
-        breakpoint: '991px',
-        numVisible: 2,
         numScroll: 1
     },
     {
         breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '575px',
         numVisible: 1,
         numScroll: 1
     }

doc/carousel/ResponsiveDoc.vue

@@ -43,17 +43,17 @@ export default {
                     numScroll: 1
                 },
                 {
-                    breakpoint: '1200px',
+                    breakpoint: '1199px',
-                    numVisible: 1,
+                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
-                    numVisible: 2,
                     numScroll: 1
                 },
                 {
                     breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
                     numVisible: 1,
                     numScroll: 1
                 }
@@ -117,17 +117,17 @@ export default {
                     numScroll: 1
                 },
                 {
-                    breakpoint: '1200px',
+                    breakpoint: '1199px',
-                    numVisible: 1,
+                    numVisible: 3,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
-                    numVisible: 2,
                     numScroll: 1
                 },
                 {
                     breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
                     numVisible: 1,
                     numScroll: 1
                 }
@@ -198,17 +198,17 @@ const responsiveOptions = ref([
         numScroll: 1
     },
     {
-        breakpoint: '1200px',
+        breakpoint: '1199px',
-        numVisible: 1,
+        numVisible: 3,
-        numScroll: 1
-    },
-    {
-        breakpoint: '991px',
-        numVisible: 2,
         numScroll: 1
     },
     {
         breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '575px',
         numVisible: 1,
         numScroll: 1
     }

doc/carousel/pt/PTDoc.vue

@@ -19,9 +19,9 @@
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -40,17 +40,22 @@ export default {
             products: null,
             responsiveOptions: [
                 {
-                    breakpoint: '1199px',
+                    breakpoint: '1400px',
-                    numVisible: 1,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
                     numVisible: 2,
                     numScroll: 1
                 },
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
                 {
                     breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
                     numVisible: 1,
                     numScroll: 1
                 }
@@ -75,9 +80,9 @@ export default {
                 <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5">
+                <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                    <Button icon="pi pi-search" rounded class="mr-2" />
+                    <Button icon="pi pi-search" rounded />
-                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
                 </div>
             </div>
         </div>
@@ -105,9 +110,9 @@ export default {
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -125,17 +130,22 @@ export default {
             products: null,
             responsiveOptions: [
                 {
-                    breakpoint: '1199px',
+                    breakpoint: '1400px',
-                    numVisible: 1,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
                     numVisible: 2,
                     numScroll: 1
                 },
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
                 {
                     breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
                     numVisible: 1,
                     numScroll: 1
                 }
@@ -186,9 +196,9 @@ export default {
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -208,17 +218,22 @@ onMounted(() => {
 const products = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '1199px',
+        breakpoint: '1400px',
-        numVisible: 1,
-        numScroll: 1
-    },
-    {
-        breakpoint: '991px',
         numVisible: 2,
         numScroll: 1
     },
+    {
+        breakpoint: '1199px',
+        numVisible: 3,
+        numScroll: 1
+    },
     {
         breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '575px',
         numVisible: 1,
         numScroll: 1
     }

doc/galleria/AdvancedDoc.vue

@@ -15,6 +15,7 @@
             :circular="true"
             :autoPlay="isAutoPlay"
             :transitionInterval="3000"
+            :responsiveOptions="responsiveOptions"
             :pt="{
                 root: {
                     class: [{ 'flex flex-column': fullScreen }]
@@ -22,7 +23,6 @@
                 content: {
                     class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
                 },
-
                 thumbnailwrapper: 'absolute w-full left-0 bottom-0'
             }"
         >
@@ -63,6 +63,16 @@ export default {
             isAutoPlayActive: true,
             fullScreen: false,
             isAutoPlay: true,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
             code: {
                 basic: `
 <Galleria
@@ -77,6 +87,7 @@ export default {
     :circular="true"
     :autoPlay="isAutoPlay"
     :transitionInterval="3000"
+    :responsiveOptions="responsiveOptions"
     :pt="{
         root: {
             class: [{ 'flex flex-column': fullScreen }]
@@ -125,6 +136,7 @@ export default {
             :circular="true"
             :autoPlay="isAutoPlay"
             :transitionInterval="3000"
+            :responsiveOptions="responsiveOptions"
             :pt="{
                 root: {
                     class: [{ 'flex flex-column': fullScreen }]
@@ -171,6 +183,16 @@ export default {
             showThumbnails: false,
             fullScreen: false,
             isAutoPlay: true,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
         };
     },
     mounted() {
@@ -260,6 +282,7 @@ export default {
             :circular="true"
             :autoPlay="isAutoPlay"
             :transitionInterval="3000"
+            :responsiveOptions="responsiveOptions"
             :pt="{
                 root: {
                     class: [{ 'flex flex-column': fullScreen }]
@@ -317,6 +340,18 @@ const toggleAutoSlide = () => {
 const onThumbnailButtonClick = () => {
     showThumbnails.value  = !showThumbnails.value ;
 };
+
+const responsiveOptions = ref([
+    {
+        breakpoint: '1300px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+
 const toggleFullScreen = () => {
     if (fullScreen.value ) {
         closeFullScreen();

doc/galleria/AutoPlayDoc.vue

@@ -24,13 +24,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -72,13 +68,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -118,13 +110,9 @@ onMounted(() => {
 const images = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '991px',
+        breakpoint: '1300px',
         numVisible: 4
     },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
     {
         breakpoint: '575px',
         numVisible: 1

doc/galleria/BasicDoc.vue

@@ -24,13 +24,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -70,13 +66,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -115,13 +107,9 @@ onMounted(() => {
 const images = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '991px',
+        breakpoint: '1300px',
         numVisible: 4
     },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
     {
         breakpoint: '575px',
         numVisible: 1

doc/galleria/CaptionDoc.vue

@@ -28,13 +28,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -82,13 +78,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -131,13 +123,9 @@ onMounted(() => {
 const images = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '991px',
+        breakpoint: '1300px',
         numVisible: 4
     },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
     {
         breakpoint: '575px',
         numVisible: 1

doc/galleria/ControlledDoc.vue

@@ -30,13 +30,9 @@ export default {
             activeIndex: 2,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -87,13 +83,9 @@ export default {
             activeIndex: 2,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -146,13 +138,9 @@ const images = ref();
 const activeIndex = ref(2);
 const responsiveOptions = ref([
     {
-        breakpoint: '991px',
+        breakpoint: '1300px',
         numVisible: 4
     },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
     {
         breakpoint: '575px',
         numVisible: 1

doc/galleria/ResponsiveDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Galleria responsiveness is defined with the <i>responsiveOptions</i> property.</p>
+        <p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p>
     </DocSectionText>
     <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
@@ -26,13 +26,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -76,13 +72,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -123,13 +115,9 @@ onMounted(() => {
 const images = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '991px',
+        breakpoint: '1300px',
         numVisible: 4
     },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
     {
         breakpoint: '575px',
         numVisible: 1

doc/galleria/ThumbnailDoc.vue

@@ -9,7 +9,7 @@
                 <label :for="option.label" class="ml-2"> {{ option.label }} </label>
             </div>
         </div>
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
@@ -51,13 +51,9 @@ export default {
             ],
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -65,7 +61,7 @@ export default {
             ],
             code: {
                 basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -85,7 +81,7 @@ export default {
                 <label :for="option.label" class="ml-2"> {{ option.label }} </label>
             </div>
         </div>
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
@@ -126,13 +122,9 @@ export default {
             ],
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -194,13 +186,9 @@ const positionOptions = ref([
 ]);
 const responsiveOptions = ref([
     {
-        breakpoint: '991px',
+        breakpoint: '1300px',
         numVisible: 4
     },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
     {
         breakpoint: '575px',
         numVisible: 1

doc/galleria/indicator/ClickEventDoc.vue

@@ -3,7 +3,7 @@
         <p>Indicators are displayed at the bottom by enabling <i>showIndicators</i> property and interacted with the click event by default.</p>
     </DocSectionText>
     <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
@@ -19,23 +19,9 @@ export default {
     data() {
         return {
             images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '991px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
             code: {
                 basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
     :showThumbnails="false" :showIndicators="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -45,7 +31,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -60,21 +46,7 @@ import { PhotoService } from '@/service/PhotoService';
 export default {
     data() {
         return {
-            images: null,
+            images: null
-            responsiveOptions: [
-                {
-                    breakpoint: '991px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
         };
     },
     mounted() {
@@ -86,7 +58,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -104,20 +76,6 @@ onMounted(() => {
 });
 
 const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '991px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
 <\/script>
 `,
                 data: `

doc/galleria/indicator/HoverEventDoc.vue

@@ -3,7 +3,7 @@
         <p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
     </DocSectionText>
     <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
@@ -19,23 +19,9 @@ export default {
     data() {
         return {
             images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '991px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
             code: {
                 basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
     :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -45,7 +31,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -60,21 +46,7 @@ import { PhotoService } from '@/service/PhotoService';
 export default {
     data() {
         return {
-            images: null,
+            images: null
-            responsiveOptions: [
-                {
-                    breakpoint: '991px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ]
         };
     },
     mounted() {
@@ -86,7 +58,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+        <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -104,20 +76,6 @@ onMounted(() => {
 });
 
 const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '991px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
 <\/script>
 `,
                 data: `

doc/galleria/indicator/TemplateDoc.vue

@@ -22,20 +22,6 @@ export default {
     data() {
         return {
             images: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '991px',
-                    numVisible: 4
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
-                {
-                    breakpoint: '575px',
-                    numVisible: 1
-                }
-            ],
             code: {
                 basic: `
 <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"

doc/galleria/navigator/HoverDoc.vue

@@ -24,13 +24,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -70,13 +66,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -115,13 +107,9 @@ onMounted(() => {
 const images = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '991px',
+        breakpoint: '1300px',
         numVisible: 4
     },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
     {
         breakpoint: '575px',
         numVisible: 1

doc/galleria/navigator/ItemThumbnailsDoc.vue

@@ -24,13 +24,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -72,13 +68,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -118,13 +110,9 @@ onMounted(() => {
 const images = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '991px',
+        breakpoint: '1300px',
         numVisible: 4
     },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
     {
         breakpoint: '575px',
         numVisible: 1

doc/galleria/pt/PTDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria
             :value="images"
             :responsiveOptions="responsiveOptions"
@@ -29,13 +29,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -89,13 +85,9 @@ export default {
             images: null,
             responsiveOptions: [
                 {
-                    breakpoint: '991px',
+                    breakpoint: '1300px',
                     numVisible: 4
                 },
-                {
-                    breakpoint: '767px',
-                    numVisible: 3
-                },
                 {
                     breakpoint: '575px',
                     numVisible: 1
@@ -141,13 +133,9 @@ onMounted(() => {
 const images = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '991px',
+        breakpoint: '1300px',
         numVisible: 4
     },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
     {
         breakpoint: '575px',
         numVisible: 1