Merge pull request #3788 from sezisfurkan/issue-3771

Image: Add Additional Toolbar Buttons
pull/3798/head
Tuğçe Küçükoğlu 2023-03-24 16:39:14 +03:00 committed by GitHub
commit 9d5c12cf22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 6 deletions

View File

@ -25,7 +25,27 @@ const ImageEvents = [
const ImageSlots = [
{
name: 'indicator',
description: 'Custom content for the preview indicator'
description: 'Custom content for the preview indicator.'
},
{
name: 'refresh',
description: 'Custom content for the component refresh.'
},
{
name: 'undo',
description: 'Custom content for the component undo.'
},
{
name: 'zoomout',
description: 'Custom content for the component zoomout.'
},
{
name: 'zoomin',
description: 'Custom content for the component zoomin.'
},
{
name: 'close',
description: 'Custom content for the component close.'
}
];

View File

@ -37,6 +37,26 @@ export interface ImageSlots {
* Custom indicator template.
*/
indicator(): VNode[];
/**
* Custom refresh template.
*/
refresh(): VNode[];
/**
* Custom undo template.
*/
undo(): VNode[];
/**
* Custom zoomout template.
*/
zoomout(): VNode[];
/**
* Custom zoomin template.
*/
zoomin(): VNode[];
/**
* Custom close template.
*/
close(): VNode[];
}
export interface ImageEmits {}

View File

@ -10,19 +10,33 @@
<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">
<slot name="refresh">
<i class="pi pi-refresh"></i>
</slot>
</button>
<button class="p-image-action p-link" @click="rotateLeft" type="button" :aria-label="leftAriaLabel">
<slot name="undo">
<i class="pi pi-undo"></i>
</slot>
</button>
<button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="zoomDisabled" :aria-label="zoomOutAriaLabel">
<slot name="zoomout">
<i class="pi pi-search-minus"></i>
</slot>
</button>
<button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="zoomDisabled" :aria-label="zoomInAriaLabel">
<slot name="zoomin">
<i class="pi pi-search-plus"></i>
</slot>
</button>
<button class="p-image-action p-link" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus>
<slot name="close">
<i class="pi pi-times"></i>
</slot>
</button>
</div>
<transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">