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

Refactor #5592 - For Media section components

Browse source
This commit is contained in:
tugcekucukoglu 2024-04-30 12:39:18 +03:00
parent 527bae0beb
commit 2c45303235
12 changed files with 82 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/lib/image/Image.d.ts vendored
View file

@ -60,13 +60,13 @@ export interface ImagePassThroughOptions {
*/
image?: ImagePassThroughOptionType;
/**
* Used to pass attributes to the button's DOM element.
* Used to pass attributes to the preview mask's DOM element.
*/
button?: ImagePassThroughOptionType;
previewMask?: ImagePassThroughOptionType;
/**
* Used to pass attributes to the icon's DOM element.
* Used to pass attributes to the preview icon's DOM element.
*/
icon?: ImagePassThroughOptionType;
previewIcon?: ImagePassThroughOptionType;
/**
* Used to pass attributes to the mask's DOM element.
*/
@ -116,13 +116,13 @@ export interface ImagePassThroughOptions {
*/
closeIcon?: ImagePassThroughOptionType;
/**
* Used to pass attributes to the preview container's DOM element.
* Used to pass attributes to the original container's DOM element.
*/
previewContainer?: ImagePassThroughOptionType;
originalContainer?: ImagePassThroughOptionType;
/**
* Used to pass attributes to the preview's DOM element.
* Used to pass attributes to the original's DOM element.
*/
preview?: ImagePassThroughOptionType;
original?: ImagePassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -1,11 +1,11 @@
<template>
<span :class="containerClass" :style="style" v-bind="ptmi('root')">
<slot name="image" :onError="onError" :errorCallback="onError">
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
<img :style="imageStyle" :class="imageClass" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
</slot>
<button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
<button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('previewMask')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('previewMask') }">
<slot name="indicatoricon">
<component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('icon')" v-bind="ptm('icon')" />
<component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('previewIcon')" v-bind="ptm('previewIcon')" />
</slot>
</button>
<Portal>
@ -42,9 +42,9 @@
</button>
</div>
<transition name="p-image-original" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="previewVisible" v-bind="ptm('previewContainer')">
<slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
<img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
<div v-if="previewVisible" v-bind="ptm('originalContainer')">
<slot name="preview" :class="cx('original')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
<img :src="$attrs.src" :class="cx('original')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('original')" />
</slot>
</div>
</transition>

7
components/lib/image/style/ImageStyle.js
View file

@ -7,9 +7,8 @@ const classes = {
'p-image-preview': props.preview
}
],
image: ({ props }) => props.image,
button: 'p-image-preview-mask',
icon: 'p-image-preview-icon',
previewMask: 'p-image-preview-mask',
previewIcon: 'p-image-preview-icon',
mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
toolbar: 'p-image-toolbar',
rotateRightButton: 'p-image-action p-image-rotate-right-button',
@ -27,7 +26,7 @@ const classes = {
}
],
closeButton: 'p-image-action p-image-close-button',
preview: 'p-image-original'
original: 'p-image-original'
};
export default BaseStyle.extend({