Refactor #3965 - Update for Image

components/lib/image/BaseImage.vue

@@ -71,7 +71,6 @@ const styles = `
 const classes = {
     root: ({ props }) => [
         'p-image p-component',
-        props.class,
         {
             'p-image-preview-container': props.preview
         }
@@ -82,8 +81,18 @@ const classes = {
     mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
     rotateRightButton: 'p-image-action p-link',
     rotateLeftButton: 'p-image-action p-link',
-    zoomOutButton: ({ instance }) => ['p-image-action p-link', { 'p-disabled': instance.isZoomOutDisabled }],
-    zoomInButton: ({ instance }) => ['p-image-action p-link', { 'p-disabled': instance.isZoomInDisabled }],
+    zoomOutButton: ({ instance }) => [
+        'p-image-action p-link',
+        {
+            'p-disabled': instance.isZoomOutDisabled
+        }
+    ],
+    zoomInButton: ({ instance }) => [
+        'p-image-action p-link',
+        {
+            'p-disabled': instance.isZoomInDisabled
+        }
+    ],
     closeButton: 'p-image-action p-link',
     preview: 'p-image-preview'
 };

components/lib/image/Image.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="[cx('root'), containerClass]" :style="style" v-bind="ptm('root')">
+    <span :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="image">
         <slot name="image" :onError="onError">
             <img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>
@@ -54,7 +54,6 @@
 </template>
 
 <script>
-import BaseImage from './BaseImage.vue';
 import FocusTrap from 'primevue/focustrap';
 import EyeIcon from 'primevue/icons/eye';
 import RefreshIcon from 'primevue/icons/refresh';
@@ -64,6 +63,7 @@ import TimesIcon from 'primevue/icons/times';
 import UndoIcon from 'primevue/icons/undo';
 import Portal from 'primevue/portal';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
+import BaseImage from './BaseImage.vue';
 
 export default {
     name: 'Image',
@@ -183,7 +183,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return this.class;
+            return [this.cx('root'), this.class];
         },
         rotateClass() {
             return 'p-image-preview-rotate-' + this.rotate;