Refactor #3918 - For Galleria
parent
8a3c948f5b
commit
c8e8a6ca30
|
@ -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.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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'],
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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: {
|
||||
|
|
Loading…
Reference in New Issue