vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3832 Refactor #3833 - For Galleria

pull/3853/head
Tuğçe Küçükoğlu 2023-04-06 11:21:23 +03:00
parent 97e4ebd09d
commit 08383819df
6 changed files with 82 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
api-generator/components/galleria.js
View File

@ -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.'
}
];

20
components/lib/galleria/Galleria.d.ts vendored
View File

@ -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[];
}
/**

4
components/lib/galleria/Galleria.vue
View File

@ -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>

8
components/lib/galleria/GalleriaContent.vue
View File

@ -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

14
components/lib/galleria/GalleriaItem.vue
View File

@ -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
}

36
components/lib/galleria/GalleriaThumbnails.vue
View File

@ -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
}