vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3918 - For Image

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-05-04 10:45:01 +03:00
parent 9d568f5ab4
commit 684134a310
4 changed files with 154 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

38
components/lib/image/Image.vue
View file

@ -1,50 +1,50 @@
<template>
<span :class="containerClass" :style="style">
<span :class="containerClass" :style="style" v-bind="ptm('root')">
<slot name="image" :class="imageClass" :style="imageStyle" :onError="onError">
<img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
<img :style="imageStyle" :class="imageClass" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
</slot>
<button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="previewButtonProps">
<button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
<slot name="indicatoricon">
<component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" />
<component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" v-bind="ptm('icon')" />
</slot>
</button>
<Portal>
<div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="maskClass" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown">
<div class="p-image-toolbar">
<button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel">
<div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="maskClass" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown" v-bind="ptm('mask')">
<div class="p-image-toolbar" v-bind="ptm('toolbar')">
<button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel" v-bind="ptm('rotateRightButton')">
<slot name="refresh">
<RefreshIcon />
<RefreshIcon v-bind="ptm('rotateRightIcon')" />
</slot>
</button>
<button class="p-image-action p-link" @click="rotateLeft" type="button" :aria-label="leftAriaLabel">
<button class="p-image-action p-link" @click="rotateLeft" type="button" :aria-label="leftAriaLabel" v-bind="ptm('rotateLeftButton')">
<slot name="undo">
<UndoIcon />
<UndoIcon v-bind="ptm('rotateLeftIcon')" />
</slot>
</button>
<button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="zoomDisabled" :aria-label="zoomOutAriaLabel">
<button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="zoomDisabled" :aria-label="zoomOutAriaLabel" v-bind="ptm('zoomOutButton')">
<slot name="zoomout">
<SearchMinusIcon />
<SearchMinusIcon v-bind="ptm('zoomOutIcon')" />
</slot>
</button>
<button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="zoomDisabled" :aria-label="zoomInAriaLabel">
<button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="zoomDisabled" :aria-label="zoomInAriaLabel" v-bind="ptm('zoomInButton')">
<slot name="zoomin">
<SearchPlusIcon />
<SearchPlusIcon v-bind="ptm('zoomInIcon')" />
</slot>
</button>
<button class="p-image-action p-link" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus>
<button class="p-image-action p-link" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus v-bind="ptm('closeButton')">
<slot name="close">
<TimesIcon />
<TimesIcon v-bind="ptm('closeIcon')" />
</slot>
</button>
</div>
<transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
<div v-if="previewVisible">
<div v-if="previewVisible" v-bind="ptm('previewContainer')">
<slot name="preview" class="p-image-preview" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
<img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" />
<img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
</slot>
</div>
</transition>
@ -54,6 +54,7 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import FocusTrap from 'primevue/focustrap';
import EyeIcon from 'primevue/icons/eye';
import RefreshIcon from 'primevue/icons/refresh';
@ -66,6 +67,7 @@ import { DomHandler, ZIndexUtils } from 'primevue/utils';
export default {
name: 'Image',
extends: BaseComponent,
inheritAttrs: false,
emits: ['show', 'hide', 'error'],
props: {