Refactor #3965 - Update for Image
parent
61cd94c2e5
commit
9abaad7612
|
@ -71,7 +71,6 @@ const styles = `
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-image p-component',
|
'p-image p-component',
|
||||||
props.class,
|
|
||||||
{
|
{
|
||||||
'p-image-preview-container': props.preview
|
'p-image-preview-container': props.preview
|
||||||
}
|
}
|
||||||
|
@ -82,8 +81,18 @@ const classes = {
|
||||||
mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
|
mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
|
||||||
rotateRightButton: 'p-image-action p-link',
|
rotateRightButton: 'p-image-action p-link',
|
||||||
rotateLeftButton: 'p-image-action p-link',
|
rotateLeftButton: 'p-image-action p-link',
|
||||||
zoomOutButton: ({ instance }) => ['p-image-action p-link', { 'p-disabled': instance.isZoomOutDisabled }],
|
zoomOutButton: ({ instance }) => [
|
||||||
zoomInButton: ({ instance }) => ['p-image-action p-link', { 'p-disabled': instance.isZoomInDisabled }],
|
'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',
|
closeButton: 'p-image-action p-link',
|
||||||
preview: 'p-image-preview'
|
preview: 'p-image-preview'
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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">
|
<slot name="image" :onError="onError">
|
||||||
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
|
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
|
||||||
</slot>
|
</slot>
|
||||||
|
@ -54,7 +54,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseImage from './BaseImage.vue';
|
|
||||||
import FocusTrap from 'primevue/focustrap';
|
import FocusTrap from 'primevue/focustrap';
|
||||||
import EyeIcon from 'primevue/icons/eye';
|
import EyeIcon from 'primevue/icons/eye';
|
||||||
import RefreshIcon from 'primevue/icons/refresh';
|
import RefreshIcon from 'primevue/icons/refresh';
|
||||||
|
@ -64,6 +63,7 @@ import TimesIcon from 'primevue/icons/times';
|
||||||
import UndoIcon from 'primevue/icons/undo';
|
import UndoIcon from 'primevue/icons/undo';
|
||||||
import Portal from 'primevue/portal';
|
import Portal from 'primevue/portal';
|
||||||
import { DomHandler, ZIndexUtils } from 'primevue/utils';
|
import { DomHandler, ZIndexUtils } from 'primevue/utils';
|
||||||
|
import BaseImage from './BaseImage.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Image',
|
name: 'Image',
|
||||||
|
@ -183,7 +183,7 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
containerClass() {
|
containerClass() {
|
||||||
return this.class;
|
return [this.cx('root'), this.class];
|
||||||
},
|
},
|
||||||
rotateClass() {
|
rotateClass() {
|
||||||
return 'p-image-preview-rotate-' + this.rotate;
|
return 'p-image-preview-rotate-' + this.rotate;
|
||||||
|
|
Loading…
Reference in New Issue