Refactor #3965 - Refactor on Media components

components/lib/galleria/BaseGalleria.vue

@@ -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: {
+        containerStyle: {
-            type: String,
+            type: null,
             default: null
         },
-        size: {
+        containerClass: {
-            type: String,
+            type: null,
-            default: 'normal'
-        },
-        shape: {
-            type: String,
-            default: 'square'
-        },
-        'aria-labelledby': {
-            type: String,
             default: null
         },
-        'aria-label': {
+        containerProps: {
-            type: String,
+            type: null,
+            default: null
+        },
+        prevButtonProps: {
+            type: null,
+            default: null
+        },
+        nextButtonProps: {
+            type: null,
             default: null
         }
     },

components/lib/galleria/Galleria.vue

@@ -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() {

components/lib/image/Image.vue

@@ -1,7 +1,7 @@
 <template>
-    <span :class="cx('root')" :style="style" v-bind="ptm('root')">
+    <span :class="[cx('root'), containerClass]" :style="style" v-bind="ptm('root')">
-        <slot name="image" :class="imageClass" :style="imageStyle" :onError="onError">
+        <slot name="image" :onError="onError">
-            <img :style="imageStyle" :class="cx('image')" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
+            <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 [
+            return this.class;
-                'p-image p-component',
-                this.class,
-                {
-                    'p-image-preview-container': this.preview
-                }
-            ];
         },
         rotateClass() {
             return 'p-image-preview-rotate-' + this.rotate;