Refactor #3965 - Refactor on Media components
Bahadır Sofuoğlu
parent
1774b2b8e4
commit
0a1b7e3b15
|
|
@ -288,9 +288,8 @@ const styles = `
|
|||
`;
|
||||
|
||||
const classes = {
|
||||
mask: ({ props, instance }) => [
|
||||
mask: ({ 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
|
||||
|
|
@ -364,32 +363,112 @@ export default {
|
|||
name: 'BaseGalleria',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
label: {
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
fullScreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
numVisible: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
responsiveOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
showItemNavigators: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showThumbnailNavigators: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showItemNavigatorsOnHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
changeItemOnIndicatorHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
circular: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoPlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transitionInterval: {
|
||||
type: Number,
|
||||
default: 4000
|
||||
},
|
||||
showThumbnails: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
thumbnailsPosition: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
verticalThumbnailViewPortHeight: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
showIndicators: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showIndicatorsOnItem: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
indicatorsPosition: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
maskClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
containerStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'square'
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
containerClass: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
containerProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
prevButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
nextButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<Portal v-if="fullScreen">
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="[cx('mask'), maskClass]" :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" :unstyled="unstyled" v-bind="$props" />
|
||||
</transition>
|
||||
|
|
@ -21,116 +21,6 @@ export default {
|
|||
extends: BaseGalleria,
|
||||
inheritAttrs: false,
|
||||
emits: ['update:activeIndex', 'update:visible'],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
fullScreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
numVisible: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
responsiveOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
showItemNavigators: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showThumbnailNavigators: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showItemNavigatorsOnHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
changeItemOnIndicatorHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
circular: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoPlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transitionInterval: {
|
||||
type: Number,
|
||||
default: 4000
|
||||
},
|
||||
showThumbnails: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
thumbnailsPosition: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
verticalThumbnailViewPortHeight: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
showIndicators: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showIndicatorsOnItem: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
indicatorsPosition: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
maskClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
containerStyle: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
containerClass: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
containerProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
prevButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
nextButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
container: null,
|
||||
mask: null,
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<span :class="cx('root')" :style="style" v-bind="ptm('root')">
|
||||
<slot name="image" :class="imageClass" :style="imageStyle" :onError="onError">
|
||||
<img :style="imageStyle" :class="cx('image')" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
|
||||
<span :class="[cx('root'), containerClass]" :style="style" v-bind="ptm('root')">
|
||||
<slot name="image" :onError="onError">
|
||||
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
|
||||
</slot>
|
||||
<button v-if="preview" ref="previewButton" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
|
||||
<slot name="indicatoricon">
|
||||
|
|
@ -183,13 +183,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
'p-image p-component',
|
||||
this.class,
|
||||
{
|
||||
'p-image-preview-container': this.preview
|
||||
}
|
||||
];
|
||||
return this.class;
|
||||
},
|
||||
rotateClass() {
|
||||
return 'p-image-preview-rotate-' + this.rotate;
|
||||
|
|
|
|||
Loading…
Reference in New Issue