vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3832 - For Image

pull/3853/head
Tuğçe Küçükoğlu 2023-04-06 11:21:43 +03:00
parent 08383819df
commit af30bdb0fd
1 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/lib/image/Image.vue
View File

@ -3,7 +3,7 @@
<img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" /> <img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
<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">
<slot name="indicator"> <slot name="indicator">
<i :class="['p-image-preview-icon', indicatorIcon]"></i> <component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" />
</slot> </slot>
</button> </button>
<Portal> <Portal>
@ -11,31 +11,31 @@
<div class="p-image-toolbar"> <div class="p-image-toolbar">
<button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel"> <button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel">
<slot name="refresh"> <slot name="refresh">
<i class="pi pi-refresh"></i> <RefreshIcon />
</slot> </slot>
</button> </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">
<slot name="undo"> <slot name="undo">
<i class="pi pi-undo"></i> <UndoIcon />
</slot> </slot>
</button> </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">
<slot name="zoomout"> <slot name="zoomout">
<i class="pi pi-search-minus"></i> <SearchMinusIcon />
</slot> </slot>
</button> </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">
<slot name="zoomin"> <slot name="zoomin">
<i class="pi pi-search-plus"></i> <SearchPlusIcon />
</slot> </slot>
</button> </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>
<slot name="close"> <slot name="close">
<i class="pi pi-times"></i> <TimesIcon />
</slot> </slot>
</button> </button>
</div> </div>
@ -51,6 +51,12 @@
<script> <script>
import FocusTrap from 'primevue/focustrap'; import FocusTrap from 'primevue/focustrap';
import EyeIcon from 'primevue/icon/eye';
import RefreshIcon from 'primevue/icon/refresh';
import SearchMinusIcon from 'primevue/icon/searchminus';
import SearchPlusIcon from 'primevue/icon/searchplus';
import TimesIcon from 'primevue/icon/times';
import UndoIcon from 'primevue/icon/undo';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import { DomHandler, ZIndexUtils } from 'primevue/utils'; import { DomHandler, ZIndexUtils } from 'primevue/utils';
@ -85,7 +91,7 @@ export default {
}, },
indicatorIcon: { indicatorIcon: {
type: String, type: String,
default: 'pi pi-eye' default: undefined
} }
}, },
mask: null, mask: null,
@ -227,7 +233,13 @@ export default {
} }
}, },
components: { components: {
Portal: Portal Portal: Portal,
EyeIcon: EyeIcon,
RefreshIcon: RefreshIcon,
UndoIcon: UndoIcon,
SearchMinusIcon: SearchMinusIcon,
SearchPlusIcon: SearchPlusIcon,
TimesIcon: TimesIcon
}, },
directives: { directives: {
focustrap: FocusTrap focustrap: FocusTrap