primevue 3.26.0 → 3.26.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/api/Api.d.ts +292 -284
  2. package/badge/Badge.d.ts +1 -1
  3. package/button/Button.d.ts +1 -1
  4. package/calendar/Calendar.vue +1 -1
  5. package/calendar/calendar.cjs.js +1 -1
  6. package/calendar/calendar.cjs.min.js +1 -1
  7. package/calendar/calendar.esm.js +1 -1
  8. package/calendar/calendar.esm.min.js +1 -1
  9. package/calendar/calendar.js +1 -1
  10. package/calendar/calendar.min.js +1 -1
  11. package/config/config.cjs.js +1 -1
  12. package/config/config.cjs.min.js +1 -1
  13. package/config/config.esm.js +1 -1
  14. package/config/config.esm.min.js +1 -1
  15. package/config/config.js +1 -1
  16. package/config/config.min.js +1 -1
  17. package/core/core.js +5 -4
  18. package/core/core.min.js +3 -3
  19. package/datatable/DataTable.d.ts +2 -2
  20. package/datatable/DataTable.vue +3 -1
  21. package/datatable/TableBody.vue +17 -5
  22. package/datatable/datatable.cjs.js +18 -15
  23. package/datatable/datatable.cjs.min.js +1 -1
  24. package/datatable/datatable.esm.js +18 -15
  25. package/datatable/datatable.esm.min.js +1 -1
  26. package/datatable/datatable.js +18 -15
  27. package/datatable/datatable.min.js +1 -1
  28. package/dropdown/Dropdown.d.ts +1 -1
  29. package/dropdown/Dropdown.vue +3 -2
  30. package/dropdown/dropdown.cjs.js +3 -2
  31. package/dropdown/dropdown.cjs.min.js +1 -1
  32. package/dropdown/dropdown.esm.js +3 -2
  33. package/dropdown/dropdown.esm.min.js +1 -1
  34. package/dropdown/dropdown.js +3 -2
  35. package/dropdown/dropdown.min.js +1 -1
  36. package/image/Image.d.ts +25 -0
  37. package/image/Image.vue +24 -6
  38. package/image/image.cjs.js +51 -41
  39. package/image/image.cjs.min.js +1 -1
  40. package/image/image.esm.js +51 -41
  41. package/image/image.esm.min.js +1 -1
  42. package/image/image.js +51 -41
  43. package/image/image.min.js +1 -1
  44. package/inlinemessage/InlineMessage.d.ts +1 -1
  45. package/listbox/Listbox.d.ts +1 -1
  46. package/message/Message.d.ts +1 -1
  47. package/multiselect/MultiSelect.d.ts +1 -1
  48. package/multiselect/MultiSelect.vue +3 -2
  49. package/multiselect/multiselect.cjs.js +3 -2
  50. package/multiselect/multiselect.cjs.min.js +1 -1
  51. package/multiselect/multiselect.esm.js +3 -2
  52. package/multiselect/multiselect.esm.min.js +1 -1
  53. package/multiselect/multiselect.js +3 -2
  54. package/multiselect/multiselect.min.js +1 -1
  55. package/package.json +1 -1
  56. package/splitbutton/SplitButton.d.ts +1 -1
  57. package/splitbutton/splitbutton.cjs.js +2 -2
  58. package/splitbutton/splitbutton.cjs.min.js +1 -1
  59. package/splitbutton/splitbutton.esm.js +2 -2
  60. package/splitbutton/splitbutton.esm.min.js +1 -1
  61. package/splitbutton/splitbutton.js +2 -2
  62. package/splitbutton/splitbutton.min.js +1 -1
  63. package/splitter/Splitter.vue +2 -11
  64. package/splitter/splitter.cjs.js +1 -2
  65. package/splitter/splitter.cjs.min.js +1 -1
  66. package/splitter/splitter.esm.js +1 -2
  67. package/splitter/splitter.esm.min.js +1 -1
  68. package/splitter/splitter.js +1 -2
  69. package/splitter/splitter.min.js +1 -1
  70. package/tag/Tag.d.ts +1 -1
  71. package/toast/Toast.d.ts +1 -1
  72. package/treetable/TreeTable.d.ts +2 -2
  73. package/vetur-attributes.json +4 -0
  74. package/vetur-tags.json +2 -1
  75. package/virtualscroller/VirtualScroller.vue +1 -1
  76. package/virtualscroller/virtualscroller.cjs.js +1 -1
  77. package/virtualscroller/virtualscroller.cjs.min.js +1 -1
  78. package/virtualscroller/virtualscroller.esm.js +1 -1
  79. package/virtualscroller/virtualscroller.esm.min.js +1 -1
  80. package/virtualscroller/virtualscroller.js +1 -1
  81. package/virtualscroller/virtualscroller.min.js +1 -1
  82. package/web-types.json +37 -2
@@ -38,6 +38,10 @@ var script = {
38
38
  previewButtonProps: {
39
39
  type: null,
40
40
  default: null
41
+ },
42
+ indicatorIcon: {
43
+ type: String,
44
+ default: 'pi pi-eye'
41
45
  }
42
46
  },
43
47
  mask: null,
@@ -183,36 +187,20 @@ var script = {
183
187
  }
184
188
  };
185
189
 
186
- const _hoisted_1 = /*#__PURE__*/vue.createElementVNode("i", { class: "p-image-preview-icon pi pi-eye" }, null, -1);
187
- const _hoisted_2 = ["aria-modal"];
188
- const _hoisted_3 = { class: "p-image-toolbar" };
189
- const _hoisted_4 = ["aria-label"];
190
- const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
191
- const _hoisted_6 = [
192
- _hoisted_5
193
- ];
194
- const _hoisted_7 = ["aria-label"];
195
- const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-undo" }, null, -1);
196
- const _hoisted_9 = [
197
- _hoisted_8
198
- ];
199
- const _hoisted_10 = ["disabled", "aria-label"];
200
- const _hoisted_11 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
201
- const _hoisted_12 = [
202
- _hoisted_11
203
- ];
204
- const _hoisted_13 = ["disabled", "aria-label"];
205
- const _hoisted_14 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
206
- const _hoisted_15 = [
207
- _hoisted_14
208
- ];
209
- const _hoisted_16 = ["aria-label"];
210
- const _hoisted_17 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-times" }, null, -1);
211
- const _hoisted_18 = [
212
- _hoisted_17
213
- ];
214
- const _hoisted_19 = { key: 0 };
215
- const _hoisted_20 = ["src"];
190
+ const _hoisted_1 = ["aria-modal"];
191
+ const _hoisted_2 = { class: "p-image-toolbar" };
192
+ const _hoisted_3 = ["aria-label"];
193
+ const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
194
+ const _hoisted_5 = ["aria-label"];
195
+ const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-undo" }, null, -1);
196
+ const _hoisted_7 = ["disabled", "aria-label"];
197
+ const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
198
+ const _hoisted_9 = ["disabled", "aria-label"];
199
+ const _hoisted_10 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
200
+ const _hoisted_11 = ["aria-label"];
201
+ const _hoisted_12 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-times" }, null, -1);
202
+ const _hoisted_13 = { key: 0 };
203
+ const _hoisted_14 = ["src"];
216
204
 
217
205
  function render(_ctx, _cache, $props, $setup, $data, $options) {
218
206
  const _component_Portal = vue.resolveComponent("Portal");
@@ -235,7 +223,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
235
223
  onClick: _cache[1] || (_cache[1] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
236
224
  }, $props.previewButtonProps), [
237
225
  vue.renderSlot(_ctx.$slots, "indicator", {}, () => [
238
- _hoisted_1
226
+ vue.createElementVNode("i", {
227
+ class: vue.normalizeClass(['p-image-preview-icon', $props.indicatorIcon])
228
+ }, null, 2)
239
229
  ])
240
230
  ], 16))
241
231
  : vue.createCommentVNode("", true),
@@ -251,40 +241,60 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
251
241
  onClick: _cache[8] || (_cache[8] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args))),
252
242
  onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onMaskKeydown && $options.onMaskKeydown(...args)))
253
243
  }, [
254
- vue.createElementVNode("div", _hoisted_3, [
244
+ vue.createElementVNode("div", _hoisted_2, [
255
245
  vue.createElementVNode("button", {
256
246
  class: "p-image-action p-link",
257
247
  onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
258
248
  type: "button",
259
249
  "aria-label": $options.rightAriaLabel
260
- }, _hoisted_6, 8, _hoisted_4),
250
+ }, [
251
+ vue.renderSlot(_ctx.$slots, "refresh", {}, () => [
252
+ _hoisted_4
253
+ ])
254
+ ], 8, _hoisted_3),
261
255
  vue.createElementVNode("button", {
262
256
  class: "p-image-action p-link",
263
257
  onClick: _cache[3] || (_cache[3] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
264
258
  type: "button",
265
259
  "aria-label": $options.leftAriaLabel
266
- }, _hoisted_9, 8, _hoisted_7),
260
+ }, [
261
+ vue.renderSlot(_ctx.$slots, "undo", {}, () => [
262
+ _hoisted_6
263
+ ])
264
+ ], 8, _hoisted_5),
267
265
  vue.createElementVNode("button", {
268
266
  class: "p-image-action p-link",
269
267
  onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
270
268
  type: "button",
271
269
  disabled: $options.zoomDisabled,
272
270
  "aria-label": $options.zoomOutAriaLabel
273
- }, _hoisted_12, 8, _hoisted_10),
271
+ }, [
272
+ vue.renderSlot(_ctx.$slots, "zoomout", {}, () => [
273
+ _hoisted_8
274
+ ])
275
+ ], 8, _hoisted_7),
274
276
  vue.createElementVNode("button", {
275
277
  class: "p-image-action p-link",
276
278
  onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
277
279
  type: "button",
278
280
  disabled: $options.zoomDisabled,
279
281
  "aria-label": $options.zoomInAriaLabel
280
- }, _hoisted_15, 8, _hoisted_13),
282
+ }, [
283
+ vue.renderSlot(_ctx.$slots, "zoomin", {}, () => [
284
+ _hoisted_10
285
+ ])
286
+ ], 8, _hoisted_9),
281
287
  vue.createElementVNode("button", {
282
288
  class: "p-image-action p-link",
283
289
  type: "button",
284
290
  onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args))),
285
291
  "aria-label": $options.closeAriaLabel,
286
292
  autofocus: ""
287
- }, _hoisted_18, 8, _hoisted_16)
293
+ }, [
294
+ vue.renderSlot(_ctx.$slots, "close", {}, () => [
295
+ _hoisted_12
296
+ ])
297
+ ], 8, _hoisted_11)
288
298
  ]),
289
299
  vue.createVNode(vue.Transition, {
290
300
  name: "p-image-preview",
@@ -296,24 +306,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
296
306
  }, {
297
307
  default: vue.withCtx(() => [
298
308
  ($data.previewVisible)
299
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19, [
309
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
300
310
  vue.createElementVNode("img", {
301
311
  src: _ctx.$attrs.src,
302
312
  class: "p-image-preview",
303
313
  style: vue.normalizeStyle($options.imagePreviewStyle),
304
314
  onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
305
- }, null, 12, _hoisted_20)
315
+ }, null, 12, _hoisted_14)
306
316
  ]))
307
317
  : vue.createCommentVNode("", true)
308
318
  ]),
309
319
  _: 1
310
320
  }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
311
- ], 42, _hoisted_2)), [
321
+ ], 42, _hoisted_1)), [
312
322
  [_directive_focustrap]
313
323
  ])
314
324
  : vue.createCommentVNode("", true)
315
325
  ]),
316
- _: 1
326
+ _: 3
317
327
  })
318
328
  ], 6))
319
329
  }
@@ -1 +1 @@
1
- "use strict";var e=require("primevue/focustrap"),i=require("primevue/portal"),t=require("primevue/utils"),a=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),r={name:"Image",inheritAttrs:!1,emits:["show","hide","error"],props:{preview:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},imageStyle:{type:null,default:null},imageClass:{type:null,default:null},previewButtonProps:{type:null,default:null}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&t.ZIndexUtils.clear(this.container)},methods:{maskRef(e){this.mask=e},toolbarRef(e){this.toolbarRef=e},onImageClick(){this.preview&&(this.maskVisible=!0,setTimeout((()=>{this.previewVisible=!0}),25))},onPreviewImageClick(){this.previewClick=!0},onMaskClick(){this.previewClick||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1},onMaskKeydown(e){if("Escape"===e.code)this.onMaskClick(),setTimeout((()=>{t.DomHandler.focus(this.$refs.previewButton)}),25),e.preventDefault()},onError(){this.$emit("error")},rotateRight(){this.rotate+=90,this.previewClick=!0},rotateLeft(){this.rotate-=90,this.previewClick=!0},zoomIn(){this.scale=this.scale+.1,this.previewClick=!0},zoomOut(){this.scale=this.scale-.1,this.previewClick=!0},onBeforeEnter(){t.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){t.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){t.ZIndexUtils.clear(e),this.maskVisible=!1},focus(){let e=this.mask.querySelector("[autofocus]");e&&e.focus()}},computed:{containerClass(){return["p-image p-component",this.class,{"p-image-preview-container":this.preview}]},maskClass:()=>["p-image-mask p-component-overlay p-component-overlay-enter"],rotateClass(){return"p-image-preview-rotate-"+this.rotate},imagePreviewStyle(){return{transform:"rotate("+this.rotate+"deg) scale("+this.scale+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5},rightAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateRight:void 0},leftAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateLeft:void 0},zoomInAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomIn:void 0},zoomOutAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomOut:void 0},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{Portal:n(i).default},directives:{focustrap:o.default}};const l=a.createElementVNode("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),s=["aria-modal"],c={class:"p-image-toolbar"},m=["aria-label"],p=[a.createElementVNode("i",{class:"pi pi-refresh"},null,-1)],u=["aria-label"],d=[a.createElementVNode("i",{class:"pi pi-undo"},null,-1)],v=["disabled","aria-label"],h=[a.createElementVNode("i",{class:"pi pi-search-minus"},null,-1)],f=["disabled","aria-label"],g=[a.createElementVNode("i",{class:"pi pi-search-plus"},null,-1)],k=["aria-label"],b=[a.createElementVNode("i",{class:"pi pi-times"},null,-1)],w={key:0},y=["src"];!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-image-preview-container {\n position: relative;\n display: inline-block;\n}\n.p-image-preview-indicator {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.3s;\n}\n.p-image-preview-icon {\n font-size: 1.5rem;\n}\n.p-image-preview-container:hover > .p-image-preview-indicator {\n opacity: 1;\n cursor: pointer;\n}\n.p-image-preview-container > img {\n cursor: pointer;\n}\n.p-image-toolbar {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n}\n.p-image-action.p-link {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.p-image-preview {\n transition: transform 0.15s;\n max-width: 100vw;\n max-height: 100vh;\n}\n.p-image-preview-enter-active {\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n opacity: 0;\n transform: scale(0.7);\n}\n"),r.render=function(e,i,t,n,o,r){const C=a.resolveComponent("Portal"),E=a.resolveDirective("focustrap");return a.openBlock(),a.createElementBlock("span",{class:a.normalizeClass(r.containerClass),style:a.normalizeStyle(t.style)},[a.createElementVNode("img",a.mergeProps(e.$attrs,{style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>r.onError&&r.onError(...e))}),null,16),t.preview?(a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>r.onImageClick&&r.onImageClick(...e))},t.previewButtonProps),[a.renderSlot(e.$slots,"indicator",{},(()=>[l]))],16)):a.createCommentVNode("",!0),a.createVNode(C,null,{default:a.withCtx((()=>[o.maskVisible?a.withDirectives((a.openBlock(),a.createElementBlock("div",{key:0,ref:r.maskRef,role:"dialog",class:a.normalizeClass(r.maskClass),"aria-modal":o.maskVisible,onClick:i[8]||(i[8]=(...e)=>r.onMaskClick&&r.onMaskClick(...e)),onKeydown:i[9]||(i[9]=(...e)=>r.onMaskKeydown&&r.onMaskKeydown(...e))},[a.createElementVNode("div",c,[a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>r.rotateRight&&r.rotateRight(...e)),type:"button","aria-label":r.rightAriaLabel},p,8,m),a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>r.rotateLeft&&r.rotateLeft(...e)),type:"button","aria-label":r.leftAriaLabel},d,8,u),a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>r.zoomOut&&r.zoomOut(...e)),type:"button",disabled:r.zoomDisabled,"aria-label":r.zoomOutAriaLabel},h,8,v),a.createElementVNode("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>r.zoomIn&&r.zoomIn(...e)),type:"button",disabled:r.zoomDisabled,"aria-label":r.zoomInAriaLabel},g,8,f),a.createElementVNode("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i)),"aria-label":r.closeAriaLabel,autofocus:""},b,8,k)]),a.createVNode(a.Transition,{name:"p-image-preview",onBeforeEnter:r.onBeforeEnter,onEnter:r.onEnter,onLeave:r.onLeave,onBeforeLeave:r.onBeforeLeave,onAfterLeave:r.onAfterLeave},{default:a.withCtx((()=>[o.previewVisible?(a.openBlock(),a.createElementBlock("div",w,[a.createElementVNode("img",{src:e.$attrs.src,class:"p-image-preview",style:a.normalizeStyle(r.imagePreviewStyle),onClick:i[7]||(i[7]=(...e)=>r.onPreviewImageClick&&r.onPreviewImageClick(...e))},null,12,y)])):a.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,s)),[[E]]):a.createCommentVNode("",!0)])),_:1})],6)},module.exports=r;
1
+ "use strict";var e=require("primevue/focustrap"),t=require("primevue/portal"),i=require("primevue/utils"),a=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(e),r={name:"Image",inheritAttrs:!1,emits:["show","hide","error"],props:{preview:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},imageStyle:{type:null,default:null},imageClass:{type:null,default:null},previewButtonProps:{type:null,default:null},indicatorIcon:{type:String,default:"pi pi-eye"}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&i.ZIndexUtils.clear(this.container)},methods:{maskRef(e){this.mask=e},toolbarRef(e){this.toolbarRef=e},onImageClick(){this.preview&&(this.maskVisible=!0,setTimeout((()=>{this.previewVisible=!0}),25))},onPreviewImageClick(){this.previewClick=!0},onMaskClick(){this.previewClick||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1},onMaskKeydown(e){if("Escape"===e.code)this.onMaskClick(),setTimeout((()=>{i.DomHandler.focus(this.$refs.previewButton)}),25),e.preventDefault()},onError(){this.$emit("error")},rotateRight(){this.rotate+=90,this.previewClick=!0},rotateLeft(){this.rotate-=90,this.previewClick=!0},zoomIn(){this.scale=this.scale+.1,this.previewClick=!0},zoomOut(){this.scale=this.scale-.1,this.previewClick=!0},onBeforeEnter(){i.ZIndexUtils.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){i.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){i.ZIndexUtils.clear(e),this.maskVisible=!1},focus(){let e=this.mask.querySelector("[autofocus]");e&&e.focus()}},computed:{containerClass(){return["p-image p-component",this.class,{"p-image-preview-container":this.preview}]},maskClass:()=>["p-image-mask p-component-overlay p-component-overlay-enter"],rotateClass(){return"p-image-preview-rotate-"+this.rotate},imagePreviewStyle(){return{transform:"rotate("+this.rotate+"deg) scale("+this.scale+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5},rightAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateRight:void 0},leftAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateLeft:void 0},zoomInAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomIn:void 0},zoomOutAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomOut:void 0},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{Portal:o(t).default},directives:{focustrap:n.default}};const l=["aria-modal"],s={class:"p-image-toolbar"},c=["aria-label"],m=a.createElementVNode("i",{class:"pi pi-refresh"},null,-1),p=["aria-label"],u=a.createElementVNode("i",{class:"pi pi-undo"},null,-1),d=["disabled","aria-label"],v=a.createElementVNode("i",{class:"pi pi-search-minus"},null,-1),h=["disabled","aria-label"],f=a.createElementVNode("i",{class:"pi pi-search-plus"},null,-1),g=["aria-label"],k=a.createElementVNode("i",{class:"pi pi-times"},null,-1),b={key:0},w=["src"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-image-preview-container {\n position: relative;\n display: inline-block;\n}\n.p-image-preview-indicator {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.3s;\n}\n.p-image-preview-icon {\n font-size: 1.5rem;\n}\n.p-image-preview-container:hover > .p-image-preview-indicator {\n opacity: 1;\n cursor: pointer;\n}\n.p-image-preview-container > img {\n cursor: pointer;\n}\n.p-image-toolbar {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n}\n.p-image-action.p-link {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.p-image-preview {\n transition: transform 0.15s;\n max-width: 100vw;\n max-height: 100vh;\n}\n.p-image-preview-enter-active {\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n opacity: 0;\n transform: scale(0.7);\n}\n"),r.render=function(e,t,i,o,n,r){const y=a.resolveComponent("Portal"),C=a.resolveDirective("focustrap");return a.openBlock(),a.createElementBlock("span",{class:a.normalizeClass(r.containerClass),style:a.normalizeStyle(i.style)},[a.createElementVNode("img",a.mergeProps(e.$attrs,{style:i.imageStyle,class:i.imageClass,onError:t[0]||(t[0]=(...e)=>r.onError&&r.onError(...e))}),null,16),i.preview?(a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:t[1]||(t[1]=(...e)=>r.onImageClick&&r.onImageClick(...e))},i.previewButtonProps),[a.renderSlot(e.$slots,"indicator",{},(()=>[a.createElementVNode("i",{class:a.normalizeClass(["p-image-preview-icon",i.indicatorIcon])},null,2)]))],16)):a.createCommentVNode("",!0),a.createVNode(y,null,{default:a.withCtx((()=>[n.maskVisible?a.withDirectives((a.openBlock(),a.createElementBlock("div",{key:0,ref:r.maskRef,role:"dialog",class:a.normalizeClass(r.maskClass),"aria-modal":n.maskVisible,onClick:t[8]||(t[8]=(...e)=>r.onMaskClick&&r.onMaskClick(...e)),onKeydown:t[9]||(t[9]=(...e)=>r.onMaskKeydown&&r.onMaskKeydown(...e))},[a.createElementVNode("div",s,[a.createElementVNode("button",{class:"p-image-action p-link",onClick:t[2]||(t[2]=(...e)=>r.rotateRight&&r.rotateRight(...e)),type:"button","aria-label":r.rightAriaLabel},[a.renderSlot(e.$slots,"refresh",{},(()=>[m]))],8,c),a.createElementVNode("button",{class:"p-image-action p-link",onClick:t[3]||(t[3]=(...e)=>r.rotateLeft&&r.rotateLeft(...e)),type:"button","aria-label":r.leftAriaLabel},[a.renderSlot(e.$slots,"undo",{},(()=>[u]))],8,p),a.createElementVNode("button",{class:"p-image-action p-link",onClick:t[4]||(t[4]=(...e)=>r.zoomOut&&r.zoomOut(...e)),type:"button",disabled:r.zoomDisabled,"aria-label":r.zoomOutAriaLabel},[a.renderSlot(e.$slots,"zoomout",{},(()=>[v]))],8,d),a.createElementVNode("button",{class:"p-image-action p-link",onClick:t[5]||(t[5]=(...e)=>r.zoomIn&&r.zoomIn(...e)),type:"button",disabled:r.zoomDisabled,"aria-label":r.zoomInAriaLabel},[a.renderSlot(e.$slots,"zoomin",{},(()=>[f]))],8,h),a.createElementVNode("button",{class:"p-image-action p-link",type:"button",onClick:t[6]||(t[6]=(...t)=>e.hidePreview&&e.hidePreview(...t)),"aria-label":r.closeAriaLabel,autofocus:""},[a.renderSlot(e.$slots,"close",{},(()=>[k]))],8,g)]),a.createVNode(a.Transition,{name:"p-image-preview",onBeforeEnter:r.onBeforeEnter,onEnter:r.onEnter,onLeave:r.onLeave,onBeforeLeave:r.onBeforeLeave,onAfterLeave:r.onAfterLeave},{default:a.withCtx((()=>[n.previewVisible?(a.openBlock(),a.createElementBlock("div",b,[a.createElementVNode("img",{src:e.$attrs.src,class:"p-image-preview",style:a.normalizeStyle(r.imagePreviewStyle),onClick:t[7]||(t[7]=(...e)=>r.onPreviewImageClick&&r.onPreviewImageClick(...e))},null,12,w)])):a.createCommentVNode("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,l)),[[C]]):a.createCommentVNode("",!0)])),_:3})],6)},module.exports=r;
@@ -31,6 +31,10 @@ var script = {
31
31
  previewButtonProps: {
32
32
  type: null,
33
33
  default: null
34
+ },
35
+ indicatorIcon: {
36
+ type: String,
37
+ default: 'pi pi-eye'
34
38
  }
35
39
  },
36
40
  mask: null,
@@ -176,36 +180,20 @@ var script = {
176
180
  }
177
181
  };
178
182
 
179
- const _hoisted_1 = /*#__PURE__*/createElementVNode("i", { class: "p-image-preview-icon pi pi-eye" }, null, -1);
180
- const _hoisted_2 = ["aria-modal"];
181
- const _hoisted_3 = { class: "p-image-toolbar" };
182
- const _hoisted_4 = ["aria-label"];
183
- const _hoisted_5 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
184
- const _hoisted_6 = [
185
- _hoisted_5
186
- ];
187
- const _hoisted_7 = ["aria-label"];
188
- const _hoisted_8 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-undo" }, null, -1);
189
- const _hoisted_9 = [
190
- _hoisted_8
191
- ];
192
- const _hoisted_10 = ["disabled", "aria-label"];
193
- const _hoisted_11 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
194
- const _hoisted_12 = [
195
- _hoisted_11
196
- ];
197
- const _hoisted_13 = ["disabled", "aria-label"];
198
- const _hoisted_14 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
199
- const _hoisted_15 = [
200
- _hoisted_14
201
- ];
202
- const _hoisted_16 = ["aria-label"];
203
- const _hoisted_17 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-times" }, null, -1);
204
- const _hoisted_18 = [
205
- _hoisted_17
206
- ];
207
- const _hoisted_19 = { key: 0 };
208
- const _hoisted_20 = ["src"];
183
+ const _hoisted_1 = ["aria-modal"];
184
+ const _hoisted_2 = { class: "p-image-toolbar" };
185
+ const _hoisted_3 = ["aria-label"];
186
+ const _hoisted_4 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
187
+ const _hoisted_5 = ["aria-label"];
188
+ const _hoisted_6 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-undo" }, null, -1);
189
+ const _hoisted_7 = ["disabled", "aria-label"];
190
+ const _hoisted_8 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
191
+ const _hoisted_9 = ["disabled", "aria-label"];
192
+ const _hoisted_10 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
193
+ const _hoisted_11 = ["aria-label"];
194
+ const _hoisted_12 = /*#__PURE__*/createElementVNode("i", { class: "pi pi-times" }, null, -1);
195
+ const _hoisted_13 = { key: 0 };
196
+ const _hoisted_14 = ["src"];
209
197
 
210
198
  function render(_ctx, _cache, $props, $setup, $data, $options) {
211
199
  const _component_Portal = resolveComponent("Portal");
@@ -228,7 +216,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
228
216
  onClick: _cache[1] || (_cache[1] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
229
217
  }, $props.previewButtonProps), [
230
218
  renderSlot(_ctx.$slots, "indicator", {}, () => [
231
- _hoisted_1
219
+ createElementVNode("i", {
220
+ class: normalizeClass(['p-image-preview-icon', $props.indicatorIcon])
221
+ }, null, 2)
232
222
  ])
233
223
  ], 16))
234
224
  : createCommentVNode("", true),
@@ -244,40 +234,60 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
244
234
  onClick: _cache[8] || (_cache[8] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args))),
245
235
  onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onMaskKeydown && $options.onMaskKeydown(...args)))
246
236
  }, [
247
- createElementVNode("div", _hoisted_3, [
237
+ createElementVNode("div", _hoisted_2, [
248
238
  createElementVNode("button", {
249
239
  class: "p-image-action p-link",
250
240
  onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
251
241
  type: "button",
252
242
  "aria-label": $options.rightAriaLabel
253
- }, _hoisted_6, 8, _hoisted_4),
243
+ }, [
244
+ renderSlot(_ctx.$slots, "refresh", {}, () => [
245
+ _hoisted_4
246
+ ])
247
+ ], 8, _hoisted_3),
254
248
  createElementVNode("button", {
255
249
  class: "p-image-action p-link",
256
250
  onClick: _cache[3] || (_cache[3] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
257
251
  type: "button",
258
252
  "aria-label": $options.leftAriaLabel
259
- }, _hoisted_9, 8, _hoisted_7),
253
+ }, [
254
+ renderSlot(_ctx.$slots, "undo", {}, () => [
255
+ _hoisted_6
256
+ ])
257
+ ], 8, _hoisted_5),
260
258
  createElementVNode("button", {
261
259
  class: "p-image-action p-link",
262
260
  onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
263
261
  type: "button",
264
262
  disabled: $options.zoomDisabled,
265
263
  "aria-label": $options.zoomOutAriaLabel
266
- }, _hoisted_12, 8, _hoisted_10),
264
+ }, [
265
+ renderSlot(_ctx.$slots, "zoomout", {}, () => [
266
+ _hoisted_8
267
+ ])
268
+ ], 8, _hoisted_7),
267
269
  createElementVNode("button", {
268
270
  class: "p-image-action p-link",
269
271
  onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
270
272
  type: "button",
271
273
  disabled: $options.zoomDisabled,
272
274
  "aria-label": $options.zoomInAriaLabel
273
- }, _hoisted_15, 8, _hoisted_13),
275
+ }, [
276
+ renderSlot(_ctx.$slots, "zoomin", {}, () => [
277
+ _hoisted_10
278
+ ])
279
+ ], 8, _hoisted_9),
274
280
  createElementVNode("button", {
275
281
  class: "p-image-action p-link",
276
282
  type: "button",
277
283
  onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args))),
278
284
  "aria-label": $options.closeAriaLabel,
279
285
  autofocus: ""
280
- }, _hoisted_18, 8, _hoisted_16)
286
+ }, [
287
+ renderSlot(_ctx.$slots, "close", {}, () => [
288
+ _hoisted_12
289
+ ])
290
+ ], 8, _hoisted_11)
281
291
  ]),
282
292
  createVNode(Transition, {
283
293
  name: "p-image-preview",
@@ -289,24 +299,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
289
299
  }, {
290
300
  default: withCtx(() => [
291
301
  ($data.previewVisible)
292
- ? (openBlock(), createElementBlock("div", _hoisted_19, [
302
+ ? (openBlock(), createElementBlock("div", _hoisted_13, [
293
303
  createElementVNode("img", {
294
304
  src: _ctx.$attrs.src,
295
305
  class: "p-image-preview",
296
306
  style: normalizeStyle($options.imagePreviewStyle),
297
307
  onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
298
- }, null, 12, _hoisted_20)
308
+ }, null, 12, _hoisted_14)
299
309
  ]))
300
310
  : createCommentVNode("", true)
301
311
  ]),
302
312
  _: 1
303
313
  }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
304
- ], 42, _hoisted_2)), [
314
+ ], 42, _hoisted_1)), [
305
315
  [_directive_focustrap]
306
316
  ])
307
317
  : createCommentVNode("", true)
308
318
  ]),
309
- _: 1
319
+ _: 3
310
320
  })
311
321
  ], 6))
312
322
  }
@@ -1 +1 @@
1
- import e from"primevue/focustrap";import i from"primevue/portal";import{ZIndexUtils as t,DomHandler as a}from"primevue/utils";import{resolveComponent as n,resolveDirective as o,openBlock as r,createElementBlock as l,normalizeClass as s,normalizeStyle as c,createElementVNode as p,mergeProps as m,renderSlot as u,createCommentVNode as v,createVNode as h,withCtx as f,withDirectives as d,Transition as g}from"vue";var b={name:"Image",inheritAttrs:!1,emits:["show","hide","error"],props:{preview:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},imageStyle:{type:null,default:null},imageClass:{type:null,default:null},previewButtonProps:{type:null,default:null}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&t.clear(this.container)},methods:{maskRef(e){this.mask=e},toolbarRef(e){this.toolbarRef=e},onImageClick(){this.preview&&(this.maskVisible=!0,setTimeout((()=>{this.previewVisible=!0}),25))},onPreviewImageClick(){this.previewClick=!0},onMaskClick(){this.previewClick||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1},onMaskKeydown(e){if("Escape"===e.code)this.onMaskClick(),setTimeout((()=>{a.focus(this.$refs.previewButton)}),25),e.preventDefault()},onError(){this.$emit("error")},rotateRight(){this.rotate+=90,this.previewClick=!0},rotateLeft(){this.rotate-=90,this.previewClick=!0},zoomIn(){this.scale=this.scale+.1,this.previewClick=!0},zoomOut(){this.scale=this.scale-.1,this.previewClick=!0},onBeforeEnter(){t.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){a.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){t.clear(e),this.maskVisible=!1},focus(){let e=this.mask.querySelector("[autofocus]");e&&e.focus()}},computed:{containerClass(){return["p-image p-component",this.class,{"p-image-preview-container":this.preview}]},maskClass:()=>["p-image-mask p-component-overlay p-component-overlay-enter"],rotateClass(){return"p-image-preview-rotate-"+this.rotate},imagePreviewStyle(){return{transform:"rotate("+this.rotate+"deg) scale("+this.scale+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5},rightAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateRight:void 0},leftAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateLeft:void 0},zoomInAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomIn:void 0},zoomOutAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomOut:void 0},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{Portal:i},directives:{focustrap:e}};const k=p("i",{class:"p-image-preview-icon pi pi-eye"},null,-1),w=["aria-modal"],y={class:"p-image-toolbar"},C=["aria-label"],L=[p("i",{class:"pi pi-refresh"},null,-1)],z=["aria-label"],$=[p("i",{class:"pi pi-undo"},null,-1)],A=["disabled","aria-label"],B=[p("i",{class:"pi pi-search-minus"},null,-1)],E=["disabled","aria-label"],I=[p("i",{class:"pi pi-search-plus"},null,-1)],x=["aria-label"],P=[p("i",{class:"pi pi-times"},null,-1)],V={key:0},R=["src"];!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-image-preview-container {\n position: relative;\n display: inline-block;\n}\n.p-image-preview-indicator {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.3s;\n}\n.p-image-preview-icon {\n font-size: 1.5rem;\n}\n.p-image-preview-container:hover > .p-image-preview-indicator {\n opacity: 1;\n cursor: pointer;\n}\n.p-image-preview-container > img {\n cursor: pointer;\n}\n.p-image-toolbar {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n}\n.p-image-action.p-link {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.p-image-preview {\n transition: transform 0.15s;\n max-width: 100vw;\n max-height: 100vh;\n}\n.p-image-preview-enter-active {\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n opacity: 0;\n transform: scale(0.7);\n}\n"),b.render=function(e,i,t,a,b,M){const S=n("Portal"),O=o("focustrap");return r(),l("span",{class:s(M.containerClass),style:c(t.style)},[p("img",m(e.$attrs,{style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>M.onError&&M.onError(...e))}),null,16),t.preview?(r(),l("button",m({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>M.onImageClick&&M.onImageClick(...e))},t.previewButtonProps),[u(e.$slots,"indicator",{},(()=>[k]))],16)):v("",!0),h(S,null,{default:f((()=>[b.maskVisible?d((r(),l("div",{key:0,ref:M.maskRef,role:"dialog",class:s(M.maskClass),"aria-modal":b.maskVisible,onClick:i[8]||(i[8]=(...e)=>M.onMaskClick&&M.onMaskClick(...e)),onKeydown:i[9]||(i[9]=(...e)=>M.onMaskKeydown&&M.onMaskKeydown(...e))},[p("div",y,[p("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>M.rotateRight&&M.rotateRight(...e)),type:"button","aria-label":M.rightAriaLabel},L,8,C),p("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>M.rotateLeft&&M.rotateLeft(...e)),type:"button","aria-label":M.leftAriaLabel},$,8,z),p("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>M.zoomOut&&M.zoomOut(...e)),type:"button",disabled:M.zoomDisabled,"aria-label":M.zoomOutAriaLabel},B,8,A),p("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>M.zoomIn&&M.zoomIn(...e)),type:"button",disabled:M.zoomDisabled,"aria-label":M.zoomInAriaLabel},I,8,E),p("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i)),"aria-label":M.closeAriaLabel,autofocus:""},P,8,x)]),h(g,{name:"p-image-preview",onBeforeEnter:M.onBeforeEnter,onEnter:M.onEnter,onLeave:M.onLeave,onBeforeLeave:M.onBeforeLeave,onAfterLeave:M.onAfterLeave},{default:f((()=>[b.previewVisible?(r(),l("div",V,[p("img",{src:e.$attrs.src,class:"p-image-preview",style:c(M.imagePreviewStyle),onClick:i[7]||(i[7]=(...e)=>M.onPreviewImageClick&&M.onPreviewImageClick(...e))},null,12,R)])):v("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,w)),[[O]]):v("",!0)])),_:1})],6)};export{b as default};
1
+ import e from"primevue/focustrap";import i from"primevue/portal";import{ZIndexUtils as t,DomHandler as a}from"primevue/utils";import{resolveComponent as o,resolveDirective as n,openBlock as r,createElementBlock as l,normalizeClass as s,normalizeStyle as c,createElementVNode as p,mergeProps as m,renderSlot as u,createCommentVNode as v,createVNode as h,withCtx as f,withDirectives as d,Transition as g}from"vue";var b={name:"Image",inheritAttrs:!1,emits:["show","hide","error"],props:{preview:{type:Boolean,default:!1},class:{type:null,default:null},style:{type:null,default:null},imageStyle:{type:null,default:null},imageClass:{type:null,default:null},previewButtonProps:{type:null,default:null},indicatorIcon:{type:String,default:"pi pi-eye"}},mask:null,data:()=>({maskVisible:!1,previewVisible:!1,rotate:0,scale:1}),beforeUnmount(){this.mask&&t.clear(this.container)},methods:{maskRef(e){this.mask=e},toolbarRef(e){this.toolbarRef=e},onImageClick(){this.preview&&(this.maskVisible=!0,setTimeout((()=>{this.previewVisible=!0}),25))},onPreviewImageClick(){this.previewClick=!0},onMaskClick(){this.previewClick||(this.previewVisible=!1,this.rotate=0,this.scale=1),this.previewClick=!1},onMaskKeydown(e){if("Escape"===e.code)this.onMaskClick(),setTimeout((()=>{a.focus(this.$refs.previewButton)}),25),e.preventDefault()},onError(){this.$emit("error")},rotateRight(){this.rotate+=90,this.previewClick=!0},rotateLeft(){this.rotate-=90,this.previewClick=!0},zoomIn(){this.scale=this.scale+.1,this.previewClick=!0},zoomOut(){this.scale=this.scale-.1,this.previewClick=!0},onBeforeEnter(){t.set("modal",this.mask,this.$primevue.config.zIndex.modal)},onEnter(){this.focus(),this.$emit("show")},onBeforeLeave(){a.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(e){t.clear(e),this.maskVisible=!1},focus(){let e=this.mask.querySelector("[autofocus]");e&&e.focus()}},computed:{containerClass(){return["p-image p-component",this.class,{"p-image-preview-container":this.preview}]},maskClass:()=>["p-image-mask p-component-overlay p-component-overlay-enter"],rotateClass(){return"p-image-preview-rotate-"+this.rotate},imagePreviewStyle(){return{transform:"rotate("+this.rotate+"deg) scale("+this.scale+")"}},zoomDisabled(){return this.scale<=.5||this.scale>=1.5},rightAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateRight:void 0},leftAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.rotateLeft:void 0},zoomInAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomIn:void 0},zoomOutAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.zoomOut:void 0},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{Portal:i},directives:{focustrap:e}};const k=["aria-modal"],w={class:"p-image-toolbar"},y=["aria-label"],C=p("i",{class:"pi pi-refresh"},null,-1),L=["aria-label"],$=p("i",{class:"pi pi-undo"},null,-1),z=["disabled","aria-label"],A=p("i",{class:"pi pi-search-minus"},null,-1),I=["disabled","aria-label"],B=p("i",{class:"pi pi-search-plus"},null,-1),E=["aria-label"],x=p("i",{class:"pi pi-times"},null,-1),P={key:0},V=["src"];!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-image-mask {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-image-preview-container {\n position: relative;\n display: inline-block;\n}\n.p-image-preview-indicator {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.3s;\n}\n.p-image-preview-icon {\n font-size: 1.5rem;\n}\n.p-image-preview-container:hover > .p-image-preview-indicator {\n opacity: 1;\n cursor: pointer;\n}\n.p-image-preview-container > img {\n cursor: pointer;\n}\n.p-image-toolbar {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n}\n.p-image-action.p-link {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.p-image-preview {\n transition: transform 0.15s;\n max-width: 100vw;\n max-height: 100vh;\n}\n.p-image-preview-enter-active {\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-image-preview-leave-active {\n transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-image-preview-enter-from,\n.p-image-preview-leave-to {\n opacity: 0;\n transform: scale(0.7);\n}\n"),b.render=function(e,i,t,a,b,R){const S=o("Portal"),M=n("focustrap");return r(),l("span",{class:s(R.containerClass),style:c(t.style)},[p("img",m(e.$attrs,{style:t.imageStyle,class:t.imageClass,onError:i[0]||(i[0]=(...e)=>R.onError&&R.onError(...e))}),null,16),t.preview?(r(),l("button",m({key:0,ref:"previewButton",class:"p-image-preview-indicator",onClick:i[1]||(i[1]=(...e)=>R.onImageClick&&R.onImageClick(...e))},t.previewButtonProps),[u(e.$slots,"indicator",{},(()=>[p("i",{class:s(["p-image-preview-icon",t.indicatorIcon])},null,2)]))],16)):v("",!0),h(S,null,{default:f((()=>[b.maskVisible?d((r(),l("div",{key:0,ref:R.maskRef,role:"dialog",class:s(R.maskClass),"aria-modal":b.maskVisible,onClick:i[8]||(i[8]=(...e)=>R.onMaskClick&&R.onMaskClick(...e)),onKeydown:i[9]||(i[9]=(...e)=>R.onMaskKeydown&&R.onMaskKeydown(...e))},[p("div",w,[p("button",{class:"p-image-action p-link",onClick:i[2]||(i[2]=(...e)=>R.rotateRight&&R.rotateRight(...e)),type:"button","aria-label":R.rightAriaLabel},[u(e.$slots,"refresh",{},(()=>[C]))],8,y),p("button",{class:"p-image-action p-link",onClick:i[3]||(i[3]=(...e)=>R.rotateLeft&&R.rotateLeft(...e)),type:"button","aria-label":R.leftAriaLabel},[u(e.$slots,"undo",{},(()=>[$]))],8,L),p("button",{class:"p-image-action p-link",onClick:i[4]||(i[4]=(...e)=>R.zoomOut&&R.zoomOut(...e)),type:"button",disabled:R.zoomDisabled,"aria-label":R.zoomOutAriaLabel},[u(e.$slots,"zoomout",{},(()=>[A]))],8,z),p("button",{class:"p-image-action p-link",onClick:i[5]||(i[5]=(...e)=>R.zoomIn&&R.zoomIn(...e)),type:"button",disabled:R.zoomDisabled,"aria-label":R.zoomInAriaLabel},[u(e.$slots,"zoomin",{},(()=>[B]))],8,I),p("button",{class:"p-image-action p-link",type:"button",onClick:i[6]||(i[6]=(...i)=>e.hidePreview&&e.hidePreview(...i)),"aria-label":R.closeAriaLabel,autofocus:""},[u(e.$slots,"close",{},(()=>[x]))],8,E)]),h(g,{name:"p-image-preview",onBeforeEnter:R.onBeforeEnter,onEnter:R.onEnter,onLeave:R.onLeave,onBeforeLeave:R.onBeforeLeave,onAfterLeave:R.onAfterLeave},{default:f((()=>[b.previewVisible?(r(),l("div",P,[p("img",{src:e.$attrs.src,class:"p-image-preview",style:c(R.imagePreviewStyle),onClick:i[7]||(i[7]=(...e)=>R.onPreviewImageClick&&R.onPreviewImageClick(...e))},null,12,V)])):v("",!0)])),_:1},8,["onBeforeEnter","onEnter","onLeave","onBeforeLeave","onAfterLeave"])],42,k)),[[M]]):v("",!0)])),_:3})],6)};export{b as default};
package/image/image.js CHANGED
@@ -35,6 +35,10 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
35
35
  previewButtonProps: {
36
36
  type: null,
37
37
  default: null
38
+ },
39
+ indicatorIcon: {
40
+ type: String,
41
+ default: 'pi pi-eye'
38
42
  }
39
43
  },
40
44
  mask: null,
@@ -180,36 +184,20 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
180
184
  }
181
185
  };
182
186
 
183
- const _hoisted_1 = /*#__PURE__*/vue.createElementVNode("i", { class: "p-image-preview-icon pi pi-eye" }, null, -1);
184
- const _hoisted_2 = ["aria-modal"];
185
- const _hoisted_3 = { class: "p-image-toolbar" };
186
- const _hoisted_4 = ["aria-label"];
187
- const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
188
- const _hoisted_6 = [
189
- _hoisted_5
190
- ];
191
- const _hoisted_7 = ["aria-label"];
192
- const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-undo" }, null, -1);
193
- const _hoisted_9 = [
194
- _hoisted_8
195
- ];
196
- const _hoisted_10 = ["disabled", "aria-label"];
197
- const _hoisted_11 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
198
- const _hoisted_12 = [
199
- _hoisted_11
200
- ];
201
- const _hoisted_13 = ["disabled", "aria-label"];
202
- const _hoisted_14 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
203
- const _hoisted_15 = [
204
- _hoisted_14
205
- ];
206
- const _hoisted_16 = ["aria-label"];
207
- const _hoisted_17 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-times" }, null, -1);
208
- const _hoisted_18 = [
209
- _hoisted_17
210
- ];
211
- const _hoisted_19 = { key: 0 };
212
- const _hoisted_20 = ["src"];
187
+ const _hoisted_1 = ["aria-modal"];
188
+ const _hoisted_2 = { class: "p-image-toolbar" };
189
+ const _hoisted_3 = ["aria-label"];
190
+ const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-refresh" }, null, -1);
191
+ const _hoisted_5 = ["aria-label"];
192
+ const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-undo" }, null, -1);
193
+ const _hoisted_7 = ["disabled", "aria-label"];
194
+ const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-minus" }, null, -1);
195
+ const _hoisted_9 = ["disabled", "aria-label"];
196
+ const _hoisted_10 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-search-plus" }, null, -1);
197
+ const _hoisted_11 = ["aria-label"];
198
+ const _hoisted_12 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-times" }, null, -1);
199
+ const _hoisted_13 = { key: 0 };
200
+ const _hoisted_14 = ["src"];
213
201
 
214
202
  function render(_ctx, _cache, $props, $setup, $data, $options) {
215
203
  const _component_Portal = vue.resolveComponent("Portal");
@@ -232,7 +220,9 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
232
220
  onClick: _cache[1] || (_cache[1] = (...args) => ($options.onImageClick && $options.onImageClick(...args)))
233
221
  }, $props.previewButtonProps), [
234
222
  vue.renderSlot(_ctx.$slots, "indicator", {}, () => [
235
- _hoisted_1
223
+ vue.createElementVNode("i", {
224
+ class: vue.normalizeClass(['p-image-preview-icon', $props.indicatorIcon])
225
+ }, null, 2)
236
226
  ])
237
227
  ], 16))
238
228
  : vue.createCommentVNode("", true),
@@ -248,40 +238,60 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
248
238
  onClick: _cache[8] || (_cache[8] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args))),
249
239
  onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onMaskKeydown && $options.onMaskKeydown(...args)))
250
240
  }, [
251
- vue.createElementVNode("div", _hoisted_3, [
241
+ vue.createElementVNode("div", _hoisted_2, [
252
242
  vue.createElementVNode("button", {
253
243
  class: "p-image-action p-link",
254
244
  onClick: _cache[2] || (_cache[2] = (...args) => ($options.rotateRight && $options.rotateRight(...args))),
255
245
  type: "button",
256
246
  "aria-label": $options.rightAriaLabel
257
- }, _hoisted_6, 8, _hoisted_4),
247
+ }, [
248
+ vue.renderSlot(_ctx.$slots, "refresh", {}, () => [
249
+ _hoisted_4
250
+ ])
251
+ ], 8, _hoisted_3),
258
252
  vue.createElementVNode("button", {
259
253
  class: "p-image-action p-link",
260
254
  onClick: _cache[3] || (_cache[3] = (...args) => ($options.rotateLeft && $options.rotateLeft(...args))),
261
255
  type: "button",
262
256
  "aria-label": $options.leftAriaLabel
263
- }, _hoisted_9, 8, _hoisted_7),
257
+ }, [
258
+ vue.renderSlot(_ctx.$slots, "undo", {}, () => [
259
+ _hoisted_6
260
+ ])
261
+ ], 8, _hoisted_5),
264
262
  vue.createElementVNode("button", {
265
263
  class: "p-image-action p-link",
266
264
  onClick: _cache[4] || (_cache[4] = (...args) => ($options.zoomOut && $options.zoomOut(...args))),
267
265
  type: "button",
268
266
  disabled: $options.zoomDisabled,
269
267
  "aria-label": $options.zoomOutAriaLabel
270
- }, _hoisted_12, 8, _hoisted_10),
268
+ }, [
269
+ vue.renderSlot(_ctx.$slots, "zoomout", {}, () => [
270
+ _hoisted_8
271
+ ])
272
+ ], 8, _hoisted_7),
271
273
  vue.createElementVNode("button", {
272
274
  class: "p-image-action p-link",
273
275
  onClick: _cache[5] || (_cache[5] = (...args) => ($options.zoomIn && $options.zoomIn(...args))),
274
276
  type: "button",
275
277
  disabled: $options.zoomDisabled,
276
278
  "aria-label": $options.zoomInAriaLabel
277
- }, _hoisted_15, 8, _hoisted_13),
279
+ }, [
280
+ vue.renderSlot(_ctx.$slots, "zoomin", {}, () => [
281
+ _hoisted_10
282
+ ])
283
+ ], 8, _hoisted_9),
278
284
  vue.createElementVNode("button", {
279
285
  class: "p-image-action p-link",
280
286
  type: "button",
281
287
  onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.hidePreview && _ctx.hidePreview(...args))),
282
288
  "aria-label": $options.closeAriaLabel,
283
289
  autofocus: ""
284
- }, _hoisted_18, 8, _hoisted_16)
290
+ }, [
291
+ vue.renderSlot(_ctx.$slots, "close", {}, () => [
292
+ _hoisted_12
293
+ ])
294
+ ], 8, _hoisted_11)
285
295
  ]),
286
296
  vue.createVNode(vue.Transition, {
287
297
  name: "p-image-preview",
@@ -293,24 +303,24 @@ this.primevue.image = (function (FocusTrap, Portal, utils, vue) {
293
303
  }, {
294
304
  default: vue.withCtx(() => [
295
305
  ($data.previewVisible)
296
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19, [
306
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
297
307
  vue.createElementVNode("img", {
298
308
  src: _ctx.$attrs.src,
299
309
  class: "p-image-preview",
300
310
  style: vue.normalizeStyle($options.imagePreviewStyle),
301
311
  onClick: _cache[7] || (_cache[7] = (...args) => ($options.onPreviewImageClick && $options.onPreviewImageClick(...args)))
302
- }, null, 12, _hoisted_20)
312
+ }, null, 12, _hoisted_14)
303
313
  ]))
304
314
  : vue.createCommentVNode("", true)
305
315
  ]),
306
316
  _: 1
307
317
  }, 8, ["onBeforeEnter", "onEnter", "onLeave", "onBeforeLeave", "onAfterLeave"])
308
- ], 42, _hoisted_2)), [
318
+ ], 42, _hoisted_1)), [
309
319
  [_directive_focustrap]
310
320
  ])
311
321
  : vue.createCommentVNode("", true)
312
322
  ]),
313
- _: 1
323
+ _: 3
314
324
  })
315
325
  ], 6))
316
326
  }