Refactor #3832 Refactor #3833 - For Galleria

api-generator/components/galleria.js

@@ -148,27 +148,47 @@ const GalleriaProps = [
 const GalleriaSlots = [
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'footer',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's footer."
     },
     {
         name: 'item',
-        description: 'Custom content for the item'
+        description: 'Custom content for the item.'
     },
     {
         name: 'caption',
-        description: 'Custom caption content'
+        description: 'Custom caption content.'
     },
     {
         name: 'thumbnail',
-        description: 'Custom thumbnail content'
+        description: 'Custom thumbnail content.'
     },
     {
         name: 'indicator',
-        description: 'Custom indicator content'
+        description: 'Custom indicator content.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'previtemicon',
+        description: 'Custom navigator previous item icon template.'
+    },
+    {
+        name: 'nextitemicon',
+        description: 'Custom navigator next item icon template.'
+    },
+    {
+        name: 'prevthumbnailicon',
+        description: 'Custom thumbnail previous icon template.'
+    },
+    {
+        name: 'nextthumbnailicon',
+        description: 'Custom thumbnail next icon template.'
     }
 ];
 

components/lib/galleria/Galleria.d.ts

@@ -205,6 +205,26 @@ export interface GalleriaSlots {
          */
         item: any;
     }): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
+    /**
+     * Custom navigator previous item icon template.
+     */
+    previtemicon(): VNode[];
+    /**
+     * Custom navigator next item icon template.
+     */
+    nextitemicon(): VNode[];
+    /**
+     * Custom thumbnail previous icon template.
+     */
+    prevthumbnailicon(): VNode[];
+    /**
+     * Custom thumbnail next item template.
+     */
+    nextthumbnailicon(): VNode[];
 }
 
 /**

components/lib/galleria/Galleria.vue

@@ -2,11 +2,11 @@
     <Portal v-if="fullScreen">
         <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
-                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
+                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
             </transition>
         </div>
     </Portal>
-    <GalleriaContent v-else v-bind="$props" :templates="$slots" @activeitem-change="onActiveItemChange" />
+    <GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
 </template>
 
 <script>

components/lib/galleria/GalleriaContent.vue

@@ -1,7 +1,9 @@
 <template>
     <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="$attrs.containerProps">
         <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')">
-            <span class="p-galleria-close-icon pi pi-times"></span>
+            <slot name="closeicon">
+                <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" />
+            </slot>
         </button>
         <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
             <component :is="$attrs.templates['header']" />
@@ -47,6 +49,7 @@
 </template>
 
 <script>
+import TimesIcon from 'primevue/icon/times';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 import GalleriaItem from './GalleriaItem.vue';
@@ -142,7 +145,8 @@ export default {
     },
     components: {
         GalleriaItem: GalleriaItem,
-        GalleriaThumbnails: GalleriaThumbnails
+        GalleriaThumbnails: GalleriaThumbnails,
+        TimesIcon: TimesIcon
     },
     directives: {
         ripple: Ripple

components/lib/galleria/GalleriaItem.vue

@@ -2,13 +2,17 @@
     <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>
+                <slot name="itemprevicon">
+                    <component :is="templates.itemprevicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
+                </slot>
             </button>
             <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel">
                 <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>
+                <slot name="itemnexticon">
+                    <component :is="templates.itemnexticon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
+                </slot>
             </button>
             <div v-if="templates['caption']" class="p-galleria-caption">
                 <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
@@ -35,6 +39,8 @@
 </template>
 
 <script>
+import ChevronLeftIcon from 'primevue/icon/chevronleft';
+import ChevronRightIcon from 'primevue/icon/chevronright';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -191,6 +197,10 @@ export default {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;
         }
     },
+    components: {
+        ChevronLeftIcon: ChevronLeftIcon,
+        ChevronRightIcon: ChevronRightIcon
+    },
     directives: {
         ripple: Ripple
     }

components/lib/galleria/GalleriaThumbnails.vue

@@ -2,7 +2,9 @@
     <div class="p-galleria-thumbnail-wrapper">
         <div class="p-galleria-thumbnail-container">
             <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" :disabled="isNavBackwardDisabled()" type="button" :aria-label="ariaPrevButtonLabel" @click="navBackward($event)" v-bind="prevButtonProps">
-                <span :class="navBackwardIconClass"></span>
+                <slot name="prevthumbnailicon">
+                    <component :is="templates.prevthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
+                </slot>
             </button>
             <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
                 <div ref="itemsContainer" class="p-galleria-thumbnail-items" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
@@ -30,13 +32,19 @@
                 </div>
             </div>
             <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" :disabled="isNavForwardDisabled()" type="button" :aria-label="ariaNextButtonLabel" @click="navForward($event)" v-bind="nextButtonProps">
-                <span :class="navForwardIconClass"></span>
+                <slot name="nextthumbnailicon">
+                    <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-prev-icon" />
+                </slot>
             </button>
         </div>
     </div>
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronLeftIcon from 'primevue/icon/chevronleft';
+import ChevronRightIcon from 'primevue/icon/chevronright';
+import ChevronUpIcon from 'primevue/icon/chevronup';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
 
@@ -501,24 +509,6 @@ export default {
                 }
             ];
         },
-        navBackwardIconClass() {
-            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
-                }
-            ];
-        },
         ariaPrevButtonLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.prevPageLabel : undefined;
         },
@@ -526,6 +516,12 @@ export default {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined;
         }
     },
+    components: {
+        ChevronLeftIcon: ChevronLeftIcon,
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronUpIcon: ChevronUpIcon,
+        ChevronDownIcon: ChevronDownIcon
+    },
     directives: {
         ripple: Ripple
     }