Refactor #3918 - For Galleria

pull/3925/head
Tuğçe Küçükoğlu 2023-05-04 11:29:52 +03:00
parent 8a3c948f5b
commit c8e8a6ca30
7 changed files with 228 additions and 27 deletions

View File

@ -142,6 +142,12 @@ const GalleriaProps = [
type: 'any',
default: 'null',
description: "Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used."
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

View File

@ -19,6 +19,7 @@ import { DividerPassThroughOptions } from '../divider';
import { DockPassThroughOptions } from '../dock';
import { FieldsetPassThroughOptions } from '../fieldset';
import { FileUploadPassThroughOptions } from '../fileupload';
import { GalleriaPassThroughOptions } from '../galleria';
import { ImagePassThroughOptions } from '../image';
import { InlineMessagePassThroughOptions } from '../inlinemessage';
import { InplacePassThroughOptions } from '../inplace';
@ -85,6 +86,7 @@ interface PrimeVuePTOptions {
dynamicdialog?: DialogPassThroughOptions;
fieldset?: FieldsetPassThroughOptions;
fileupload?: FileUploadPassThroughOptions;
galleria?: GalleriaPassThroughOptions;
image?: ImagePassThroughOptions;
inlinemessage?: InlineMessagePassThroughOptions;
inplace?: InplacePassThroughOptions;

View File

@ -9,6 +9,15 @@
*/
import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type GalleriaPassThroughOptionType = GalleriaPassThroughAttributes | ((options: GalleriaPassThroughMethodOptions) => GalleriaPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface GalleriaPassThroughMethodOptions {
props: GalleriaProps;
state: GalleriaState;
}
export interface GalleriaResponsiveOptions {
/**
@ -21,6 +30,139 @@ export interface GalleriaResponsiveOptions {
numVisible: number;
}
/**
* Custom passthrough(pt) options.
* @see {@link GalleriaProps.pt}
*/
export interface GalleriaPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the close button's DOM element.
*/
closeButton?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the close icon's DOM element.
*/
closeIcon?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the footer's DOM element.
*/
footer?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the item wrapper's DOM element.
*/
itemWrapper?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the item container's DOM element.
*/
itemContainer?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the previous item button's DOM element.
*/
previousItemButton?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the previous item icon's DOM element.
*/
previousItemIcon?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the item's DOM element.
*/
item?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the next item button's DOM element.
*/
nextItemButton?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the next item icon's DOM element.
*/
nextItemIcon?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the caption's DOM element.
*/
caption?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the indicators's DOM element.
*/
indicators?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the indicator's DOM element.
*/
indicator?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the thumbnail wrapper's DOM element.
*/
thumbnailWrapper?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the thumbnail container's DOM element.
*/
thumbnailContainer?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the previous thumbnail button's DOM element.
*/
previousThumbnailButton?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the previous thumbnail icon's DOM element.
*/
previousThumbnailIcon?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the thumbnail items container's DOM element.
*/
thumbnailItemsContainer?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the thumbnail items' DOM element.
*/
thumbnailItems?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the thumbnail item's DOM element.
*/
thumbnailItem?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the thumbnail item content's DOM element.
*/
thumbnailItemContent?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the next thumbnail button's DOM element.
*/
nextThumbnailButton?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the next thumbnail icon's DOM element.
*/
nextThumbnailIcon?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the mask's DOM element.
*/
mask?: GalleriaPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface GalleriaPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Galleria component.
*/
export interface GalleriaState {
/**
* Current collapsed state as a boolean.
* @defaultValue false
*/
d_collapsed: boolean;
}
/**
* Defines valid properties in Galleria component.
*/
@ -152,6 +294,11 @@ export interface GalleriaProps {
* Uses to pass all properties of the HTMLButtonElement to the next navigation button.
*/
nextButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {GalleriaPassThroughOptions}
*/
pt?: GalleriaPassThroughOptions;
}
/**
* Defines valid slots in Galleria slots.

View File

@ -1,15 +1,16 @@
<template>
<Portal v-if="fullScreen">
<div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined">
<div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
<transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
<GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
<GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
</transition>
</div>
</Portal>
<GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
<GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import FocusTrap from 'primevue/focustrap';
import Portal from 'primevue/portal';
import { DomHandler, ZIndexUtils } from 'primevue/utils';
@ -17,6 +18,7 @@ import GalleriaContent from './GalleriaContent.vue';
export default {
name: 'Galleria',
extends: BaseComponent,
inheritAttrs: false,
emits: ['update:activeIndex', 'update:visible'],
props: {

View File

@ -1,12 +1,12 @@
<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')">
<component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" />
<div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...ptm('root') }">
<button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="ptm('closeButton')">
<component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" v-bind="ptm('closeIcon')" />
</button>
<div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
<div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header" v-bind="ptm('header')">
<component :is="$attrs.templates['header']" />
</div>
<div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'">
<div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="ptm('content')">
<GalleriaItem
:id="id"
v-model:activeIndex="activeIndex"
@ -20,6 +20,7 @@
:autoPlay="$attrs.autoPlay"
@start-slideshow="startSlideShow"
@stop-slideshow="stopSlideShow"
:pt="pt"
/>
<GalleriaThumbnails
@ -38,15 +39,17 @@
:prevButtonProps="$attrs.prevButtonProps"
:nextButtonProps="$attrs.nextButtonProps"
@stop-slideshow="stopSlideShow"
:pt="pt"
/>
</div>
<div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
<div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer" v-bind="ptm('footer')">
<component :is="$attrs.templates['footer']" />
</div>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import TimesIcon from 'primevue/icons/times';
import Ripple from 'primevue/ripple';
import { UniqueComponentId } from 'primevue/utils';
@ -55,6 +58,7 @@ import GalleriaThumbnails from './GalleriaThumbnails.vue';
export default {
name: 'GalleriaContent',
extends: BaseComponent,
inheritAttrs: false,
interval: null,
emits: ['activeitem-change', 'mask-hide'],

View File

@ -1,20 +1,20 @@
<template>
<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()">
<component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
<div class="p-galleria-item-wrapper" v-bind="ptm('itemWrapper')">
<div class="p-galleria-item-container" v-bind="ptm('itemContainer')">
<button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')">
<component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" v-bind="ptm('previousItemIcon')" />
</button>
<div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel">
<div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('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()">
<component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
<button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')">
<component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" v-bind="ptm('nextItemIcon')" />
</button>
<div v-if="templates['caption']" class="p-galleria-caption">
<div v-if="templates['caption']" class="p-galleria-caption" v-bind="ptm('caption')">
<component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
</div>
</div>
<ul v-if="showIndicators" class="p-galleria-indicators p-reset">
<ul v-if="showIndicators" class="p-galleria-indicators p-reset" v-bind="ptm('indicators')">
<li
v-for="(item, index) of value"
:key="`p-galleria-indicator-${index}`"
@ -26,6 +26,7 @@
@click="onIndicatorClick(index)"
@mouseenter="onIndicatorMouseEnter(index)"
@keydown="onIndicatorKeyDown($event, index)"
v-bind="ptm('indicator')"
>
<button v-if="!templates['indicator']" type="button" tabindex="-1" class="p-link"></button>
<component v-if="templates.indicator" :is="templates.indicator" :index="index" />
@ -35,12 +36,14 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
export default {
name: 'GalleriaItem',
extends: BaseComponent,
emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],
props: {
circular: {

View File

@ -1,11 +1,29 @@
<template>
<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">
<component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
<div class="p-galleria-thumbnail-wrapper" v-bind="ptm('thumbnailWrapper')">
<div class="p-galleria-thumbnail-container" v-bind="ptm('thumbnailContainer')">
<button
v-if="showThumbnailNavigators"
v-ripple
:class="navBackwardClass"
:disabled="isNavBackwardDisabled()"
type="button"
:aria-label="ariaPrevButtonLabel"
@click="navBackward($event)"
v-bind="{ ...prevButtonProps, ...ptm('previousThumbnailButton') }"
>
<component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" v-bind="ptm('previousThumbnailIcon')" />
</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)">
<div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
<div
ref="itemsContainer"
class="p-galleria-thumbnail-items"
role="tablist"
@transitionend="onTransitionEnd"
@touchstart="onTouchStart($event)"
@touchmove="onTouchMove($event)"
@touchend="onTouchEnd($event)"
v-bind="ptm('thumbnailItems')"
>
<div
v-for="(item, index) of value"
:key="`p-galleria-thumbnail-item-${index}`"
@ -22,21 +40,39 @@
:aria-selected="activeIndex === index"
:aria-controls="containerId + '_item_' + index"
@keydown="onThumbnailKeydown($event, index)"
v-bind="ptm('thumbnailItem')"
>
<div class="p-galleria-thumbnail-item-content" :tabindex="activeIndex === index ? '0' : '-1'" :aria-label="ariaPageLabel(index + 1)" :aria-current="activeIndex === index ? 'page' : undefined" @click="onItemClick(index)">
<div
class="p-galleria-thumbnail-item-content"
:tabindex="activeIndex === index ? '0' : '-1'"
:aria-label="ariaPageLabel(index + 1)"
:aria-current="activeIndex === index ? 'page' : undefined"
@click="onItemClick(index)"
v-bind="ptm('thumbnailItemContent')"
>
<component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
</div>
</div>
</div>
</div>
<button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" :disabled="isNavForwardDisabled()" type="button" :aria-label="ariaNextButtonLabel" @click="navForward($event)" v-bind="nextButtonProps">
<component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-prev-icon" />
<button
v-if="showThumbnailNavigators"
v-ripple
:class="navForwardClass"
:disabled="isNavForwardDisabled()"
type="button"
:aria-label="ariaNextButtonLabel"
@click="navForward($event)"
v-bind="{ ...nextButtonProps, ...ptm('nextThumbnailButton') }"
>
<component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-next-icon" v-bind="ptm('nextThumbnailIcon')" />
</button>
</div>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright';
@ -46,6 +82,7 @@ import { DomHandler } from 'primevue/utils';
export default {
name: 'GalleriaThumbnails',
extends: BaseComponent,
emits: ['stop-slideshow', 'update:activeIndex'],
props: {
containerId: {