Refactor #3965 - For Galleria
Bahadır Sofuoğlu
parent
68b96b3bba
commit
e287dfb085
|
|
@ -0,0 +1,406 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-galleria-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-galleria-item-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-galleria-item-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-galleria-item-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-galleria-item-prev {
|
||||
left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-galleria-item-next {
|
||||
right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-galleria-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-galleria-item-nav-onhover .p-galleria-item-nav {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.p-galleria-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Thumbnails */
|
||||
.p-galleria-thumbnail-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-prev,
|
||||
.p-galleria-thumbnail-next {
|
||||
align-self: center;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-prev span,
|
||||
.p-galleria-thumbnail-next span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-items-container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-items {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-item {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-item:hover {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-item-current {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Positions */
|
||||
/* Thumbnails */
|
||||
.p-galleria-thumbnails-left .p-galleria-content,
|
||||
.p-galleria-thumbnails-right .p-galleria-content {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
|
||||
.p-galleria-thumbnails-right .p-galleria-item-wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
|
||||
.p-galleria-thumbnails-top .p-galleria-item-wrapper {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
|
||||
.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
|
||||
.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
|
||||
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Indicators */
|
||||
.p-galleria-indicators {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-galleria-indicator > button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-item-wrapper,
|
||||
.p-galleria-indicators-right .p-galleria-item-wrapper {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-item-container,
|
||||
.p-galleria-indicators-top .p-galleria-item-container {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-indicators,
|
||||
.p-galleria-indicators-top .p-galleria-indicators {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-indicators,
|
||||
.p-galleria-indicators-right .p-galleria-indicators {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem .p-galleria-indicators {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* FullScreen */
|
||||
.p-galleria-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-galleria-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-galleria-mask .p-galleria-item-nav {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.p-galleria-enter-active {
|
||||
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-galleria-leave-active {
|
||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-galleria-enter-from,
|
||||
.p-galleria-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.p-galleria-enter-active .p-galleria-item-nav {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Keyboard Support */
|
||||
.p-items-hidden .p-galleria-thumbnail-item {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
|
||||
visibility: visible;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
mask: ({ props, instance }) => [
|
||||
'p-galleria-mask p-component-overlay p-component-overlay-enter',
|
||||
props.maskClass,
|
||||
{
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
root: ({ instance }) => instance.galleriaClass,
|
||||
closeButton: 'p-galleria-close p-link',
|
||||
closeIcon: 'p-galleria-close-icon',
|
||||
header: 'p-galleria-header',
|
||||
content: 'p-galleria-content',
|
||||
footer: 'p-galleria-footer',
|
||||
itemWrapper: 'p-galleria-item-wrapper',
|
||||
itemContainer: 'p-galleria-item-container',
|
||||
previousItemButton: ({ instance }) => [
|
||||
'p-galleria-item-prev p-galleria-item-nav p-link',
|
||||
{
|
||||
'p-disabled': instance.isNavBackwardDisabled()
|
||||
}
|
||||
],
|
||||
previousItemIcon: 'p-galleria-item-prev-icon',
|
||||
item: 'p-galleria-item',
|
||||
nextItemButton: ({ instance }) => [
|
||||
'p-galleria-item-next p-galleria-item-nav p-link',
|
||||
{
|
||||
'p-disabled': instance.isNavForwardDisabled()
|
||||
}
|
||||
],
|
||||
nextItemIcon: 'p-galleria-item-next-icon',
|
||||
caption: 'p-galleria-caption',
|
||||
indicators: 'p-galleria-indicators p-reset',
|
||||
indicator: ({ instance, context }) => [
|
||||
'p-galleria-indicator',
|
||||
{
|
||||
'p-highlight': instance.isIndicatorItemActive(context.index)
|
||||
}
|
||||
],
|
||||
indicatorButton: 'p-link',
|
||||
thumbnailWrapper: 'p-galleria-thumbnail-wrapper',
|
||||
thumbnailContainer: 'p-galleria-thumbnail-container',
|
||||
previousThumbnailButton: ({ instance }) => [
|
||||
'p-galleria-thumbnail-prev p-link',
|
||||
{
|
||||
'p-disabled': instance.isNavBackwardDisabled()
|
||||
}
|
||||
],
|
||||
previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
|
||||
thumbnailItemsContainer: 'p-galleria-thumbnail-items-container',
|
||||
thumbnailItems: 'p-galleria-thumbnail-items',
|
||||
thumbnailItem: ({ instance, context }) => [
|
||||
'p-galleria-thumbnail-item',
|
||||
{
|
||||
'p-galleria-thumbnail-item-current': context.activeIndex === context.index,
|
||||
'p-galleria-thumbnail-item-active': instance.isItemActive(context.index),
|
||||
'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === context.index,
|
||||
'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === context.index
|
||||
}
|
||||
],
|
||||
thumbnailItemContent: 'p-galleria-thumbnail-item-content',
|
||||
nextThumbnailButton: ({ instance }) => [
|
||||
'p-galleria-thumbnail-next p-link',
|
||||
{
|
||||
'p-disabled': instance.isNavForwardDisabled()
|
||||
}
|
||||
],
|
||||
nextThumbnailIcon: 'p-galleria-thumbnail-next-icon'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { id: 'primevue_galleria_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseGalleria',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'square'
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -348,6 +348,11 @@ export interface GalleriaProps {
|
|||
* @type {GalleriaPassThroughOptions}
|
||||
*/
|
||||
pt?: GalleriaPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
/**
|
||||
* Defines valid slots in Galleria slots.
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<Portal v-if="fullScreen">
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :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" :pt="pt" v-bind="$props" />
|
||||
<GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" :unstyled="unstyled" v-bind="$props" />
|
||||
</transition>
|
||||
</div>
|
||||
</Portal>
|
||||
<GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
|
||||
<GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" :unstyled="unstyled" v-bind="$props" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import BaseGalleria from './BaseGalleria.vue';
|
||||
import FocusTrap from 'primevue/focustrap';
|
||||
import Portal from 'primevue/portal';
|
||||
import { DomHandler, ZIndexUtils } from 'primevue/utils';
|
||||
|
|
@ -18,7 +18,7 @@ import GalleriaContent from './GalleriaContent.vue';
|
|||
|
||||
export default {
|
||||
name: 'Galleria',
|
||||
extends: BaseComponent,
|
||||
extends: BaseGalleria,
|
||||
inheritAttrs: false,
|
||||
emits: ['update:activeIndex', 'update:visible'],
|
||||
props: {
|
||||
|
|
@ -194,18 +194,6 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maskContentClass() {
|
||||
return [
|
||||
'p-galleria-mask p-component-overlay p-component-overlay-enter',
|
||||
this.maskClass,
|
||||
{
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
GalleriaContent: GalleriaContent,
|
||||
Portal: Portal
|
||||
|
|
@ -215,288 +203,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-galleria-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-galleria-item-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-galleria-item-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-galleria-item-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-galleria-item-prev {
|
||||
left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-galleria-item-next {
|
||||
right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-galleria-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-galleria-item-nav-onhover .p-galleria-item-nav {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.p-galleria-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Thumbnails */
|
||||
.p-galleria-thumbnail-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-prev,
|
||||
.p-galleria-thumbnail-next {
|
||||
align-self: center;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-prev span,
|
||||
.p-galleria-thumbnail-next span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-items-container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-items {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-item {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-item:hover {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnail-item-current {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Positions */
|
||||
/* Thumbnails */
|
||||
.p-galleria-thumbnails-left .p-galleria-content,
|
||||
.p-galleria-thumbnails-right .p-galleria-content {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
|
||||
.p-galleria-thumbnails-right .p-galleria-item-wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
|
||||
.p-galleria-thumbnails-top .p-galleria-item-wrapper {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
|
||||
.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
|
||||
.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
|
||||
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Indicators */
|
||||
.p-galleria-indicators {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-galleria-indicator > button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-item-wrapper,
|
||||
.p-galleria-indicators-right .p-galleria-item-wrapper {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-item-container,
|
||||
.p-galleria-indicators-top .p-galleria-item-container {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-indicators,
|
||||
.p-galleria-indicators-top .p-galleria-indicators {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.p-galleria-indicators-left .p-galleria-indicators,
|
||||
.p-galleria-indicators-right .p-galleria-indicators {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem .p-galleria-indicators {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* FullScreen */
|
||||
.p-galleria-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-galleria-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-galleria-mask .p-galleria-item-nav {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.p-galleria-enter-active {
|
||||
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-galleria-leave-active {
|
||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-galleria-enter-from,
|
||||
.p-galleria-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.p-galleria-enter-active .p-galleria-item-nav {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Keyboard Support */
|
||||
.p-items-hidden .p-galleria-thumbnail-item {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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, ...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')" />
|
||||
<div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="cx('root')" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...ptm('root') }">
|
||||
<button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="ptm('closeButton')">
|
||||
<component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="ptm('closeIcon')" />
|
||||
</button>
|
||||
<div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header" v-bind="ptm('header')">
|
||||
<div v-if="$attrs.templates && $attrs.templates['header']" :class="cx('header')" v-bind="ptm('header')">
|
||||
<component :is="$attrs.templates['header']" />
|
||||
</div>
|
||||
<div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="ptm('content')">
|
||||
<div :class="cx('content')" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="ptm('content')">
|
||||
<GalleriaItem
|
||||
:id="id"
|
||||
v-model:activeIndex="activeIndex"
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
@start-slideshow="startSlideShow"
|
||||
@stop-slideshow="stopSlideShow"
|
||||
:pt="pt"
|
||||
:unstyled="unstyled"
|
||||
/>
|
||||
|
||||
<GalleriaThumbnails
|
||||
|
|
@ -40,9 +41,10 @@
|
|||
:nextButtonProps="$attrs.nextButtonProps"
|
||||
@stop-slideshow="stopSlideShow"
|
||||
:pt="pt"
|
||||
:unstyled="unstyled"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer" v-bind="ptm('footer')">
|
||||
<div v-if="$attrs.templates && $attrs.templates['footer']" :class="cx('footer')" v-bind="ptm('footer')">
|
||||
<component :is="$attrs.templates['footer']" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
<template>
|
||||
<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')" />
|
||||
<div :class="cx('itemWrapper')" v-bind="ptm('itemWrapper')">
|
||||
<div :class="cx('itemContainer')" v-bind="ptm('itemContainer')">
|
||||
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')">
|
||||
<component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('previousItemIcon')" v-bind="ptm('previousItemIcon')" />
|
||||
</button>
|
||||
<div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
|
||||
<div :id="id + '_item_' + activeIndex" :class="cx('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()" v-bind="ptm('nextItemButton')">
|
||||
<component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" v-bind="ptm('nextItemIcon')" />
|
||||
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextItemButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')">
|
||||
<component :is="templates.nextitemicon || 'ChevronRightIcon'" :class="cx('nextItemIcon')" v-bind="ptm('nextItemIcon')" />
|
||||
</button>
|
||||
<div v-if="templates['caption']" class="p-galleria-caption" v-bind="ptm('caption')">
|
||||
<div v-if="templates['caption']" :class="cx('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" v-bind="ptm('indicators')">
|
||||
<ul v-if="showIndicators" :class="cx('indicators')" v-bind="ptm('indicators')">
|
||||
<li
|
||||
v-for="(item, index) of value"
|
||||
:key="`p-galleria-indicator-${index}`"
|
||||
:class="['p-galleria-indicator', { 'p-highlight': isIndicatorItemActive(index) }]"
|
||||
:class="cx('indicator', { context: { index: index } })"
|
||||
tabindex="0"
|
||||
:aria-label="ariaPageLabel(index + 1)"
|
||||
:aria-selected="activeIndex === index"
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
@keydown="onIndicatorKeyDown($event, index)"
|
||||
v-bind="ptm('indicator')"
|
||||
>
|
||||
<button v-if="!templates['indicator']" type="button" tabindex="-1" class="p-link"></button>
|
||||
<button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')"></button>
|
||||
<component v-if="templates.indicator" :is="templates.indicator" :index="index" />
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -176,22 +176,7 @@ export default {
|
|||
activeItem() {
|
||||
return this.value[this.activeIndex];
|
||||
},
|
||||
navBackwardClass() {
|
||||
return [
|
||||
'p-galleria-item-prev p-galleria-item-nav p-link',
|
||||
{
|
||||
'p-disabled': this.isNavBackwardDisabled()
|
||||
}
|
||||
];
|
||||
},
|
||||
navForwardClass() {
|
||||
return [
|
||||
'p-galleria-item-next p-galleria-item-nav p-link',
|
||||
{
|
||||
'p-disabled': this.isNavForwardDisabled()
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
ariaSlideLabel() {
|
||||
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,31 @@
|
|||
<template>
|
||||
<div class="p-galleria-thumbnail-wrapper" v-bind="ptm('thumbnailWrapper')">
|
||||
<div class="p-galleria-thumbnail-container" v-bind="ptm('thumbnailContainer')">
|
||||
<div :class="cx('thumbnailWrapper')" v-bind="ptm('thumbnailWrapper')">
|
||||
<div :class="cx('thumbnailContainer')" v-bind="ptm('thumbnailContainer')">
|
||||
<button
|
||||
v-if="showThumbnailNavigators"
|
||||
v-ripple
|
||||
:class="navBackwardClass"
|
||||
:class="cx('previousThumbnailButton')"
|
||||
: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')" />
|
||||
<component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
|
||||
</button>
|
||||
<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 :class="cx('thumbnailItemsContainer')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
|
||||
<div ref="itemsContainer" :class="cx('thumbnailItems')" 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}`"
|
||||
:class="[
|
||||
'p-galleria-thumbnail-item',
|
||||
{
|
||||
'p-galleria-thumbnail-item-current': activeIndex === index,
|
||||
'p-galleria-thumbnail-item-active': isItemActive(index),
|
||||
'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
|
||||
'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
|
||||
}
|
||||
]"
|
||||
:class="
|
||||
cx('thumbnailItem', {
|
||||
context: {
|
||||
index,
|
||||
activeIndex
|
||||
}
|
||||
})
|
||||
"
|
||||
role="tab"
|
||||
:aria-selected="activeIndex === index"
|
||||
:aria-controls="containerId + '_item_' + index"
|
||||
|
|
@ -43,7 +33,7 @@
|
|||
v-bind="ptm('thumbnailItem')"
|
||||
>
|
||||
<div
|
||||
class="p-galleria-thumbnail-item-content"
|
||||
:class="cx('thumbnailItemContent')"
|
||||
:tabindex="activeIndex === index ? '0' : '-1'"
|
||||
:aria-label="ariaPageLabel(index + 1)"
|
||||
:aria-current="activeIndex === index ? 'page' : undefined"
|
||||
|
|
@ -58,14 +48,14 @@
|
|||
<button
|
||||
v-if="showThumbnailNavigators"
|
||||
v-ripple
|
||||
:class="navForwardClass"
|
||||
:class="cx('nextThumbnailButton')"
|
||||
: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')" />
|
||||
<component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" :class="cx('nextThumbnailIcon')" v-bind="ptm('nextThumbnailIcon')" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -526,22 +516,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
navBackwardClass() {
|
||||
return [
|
||||
'p-galleria-thumbnail-prev p-link',
|
||||
{
|
||||
'p-disabled': this.isNavBackwardDisabled()
|
||||
}
|
||||
];
|
||||
},
|
||||
navForwardClass() {
|
||||
return [
|
||||
'p-galleria-thumbnail-next p-link',
|
||||
{
|
||||
'p-disabled': this.isNavForwardDisabled()
|
||||
}
|
||||
];
|
||||
},
|
||||
ariaPrevButtonLabel() {
|
||||
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.prevPageLabel : undefined;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue