@bagelink/vue 0.0.724 → 0.0.726

package/dist/components/form/inputs/FileUpload.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAqfA,OAAO,EAAkD,KAAK,WAAW,EAAY,MAAM,eAAe,CAAA;AA8B1G,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AAqGzC,iBAAS,MAAM,SAgBd;AA8BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;sBA3JZ,MAAM;wBACJ,OAAO;mBACZ,MAAM;uBACF,OAAO;;QA8bQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;sBAjcnB,MAAM;wBACJ,OAAO;mBACZ,MAAM;uBACF,OAAO;;;QA+be,GAAG;EA2BpC;AACD,QAAA,MAAM,eAAe;YAjfZ,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;;YATN,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;UA+eb,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAqfA,OAAO,EAAkD,KAAK,WAAW,EAAY,MAAM,eAAe,CAAA;AA8B1G,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AAqGzC,iBAAS,MAAM,SAgBd;AA8BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;sBA3JZ,MAAM;wBACJ,OAAO;mBACZ,MAAM;uBACF,OAAO;;QAgcQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;sBAncnB,MAAM;wBACJ,OAAO;mBACZ,MAAM;uBACF,OAAO;;;QAice,GAAG;EA2BpC;AACD,QAAA,MAAM,eAAe;YAnfZ,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;;YATN,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;UAifb,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

package/dist/components/lightbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAoB,MAAM,KAAK,CAAA;;iBAyDlC,GAAG;;AADjB,wBAIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAoB,MAAM,KAAK,CAAA;;iBA2DlC,GAAG;;AADjB,wBAIC"}

package/dist/index.cjs

@@ -5328,13 +5328,15 @@ const lightboxDirective = {
     if (!lightboxInstance || !lightboxInstance.open) return;
     if (binding.value.group) {
       if (!groups[binding.value.group]) groups[binding.value.group] = [];
+      const src = binding.value.src || binding.value || el.getAttribute("src") || "";
       groups[binding.value.group].push({
-        src: binding.value.src || binding.value,
-        type: binding.value.type || determineFileType(binding.value.src || binding.value),
+        src,
+        type: binding.value.type || determineFileType(src),
         name: binding.value.name || ""
       });
     }
-    el.addEventListener("click", () => {
+    el.addEventListener("click", (e) => {
+      e.stopPropagation();
       const group = binding.value.group || null;
       const item = {
         src: binding.value.src || binding.value,
@@ -19934,6 +19936,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       flushQueue();
     }
     return (_ctx, _cache) => {
+      const _directive_lightbox = vue.resolveDirective("lightbox");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", {
@@ -19958,12 +19961,14 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
                   key: file.id,
                   class: "multi-image-item-preview"
                 }, [
-                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("img", {
+                  isImage(file.extension || file.url) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
                     key: 0,
                     class: "multi-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_3$b)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
+                  }, null, 8, _hoisted_3$b)), [
+                    [_directive_lightbox]
+                  ]) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
@@ -20016,12 +20021,14 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
                   key: file.id,
                   class: vue.normalizeClass(["single-image-item-preview", { "bgl_fill-image": _ctx.fill }])
                 }, [
-                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("img", {
+                  isImage(file.extension || file.url) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
                     key: 0,
                     class: "single-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_9)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
+                  }, null, 8, _hoisted_9)), [
+                    [_directive_lightbox]
+                  ]) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
                     key: 1,
                     size: 4,
                     weight: "2",
@@ -20071,7 +20078,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-5911e10d"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-d4a17ec6"]]);
 const _withScopeId$1 = (n2) => (vue.pushScopeId("data-v-06b95183"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$j = ["title"];
 const _hoisted_2$e = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));

package/dist/index.mjs

@@ -1,7 +1,7 @@
 var __defProp2 = Object.defineProperty;
 var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeStyle, withKeys, createElementVNode, Fragment as Fragment$1, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h as h$2, toDisplayString, watch, unref, withModifiers, renderList, markRaw, reactive, computed, inject, resolveDynamicComponent, useCssVars, useSlots, createTextVNode, onMounted, onUnmounted, mergeModels, useModel, createSlots, Transition, getCurrentScope, onScopeDispose, getCurrentInstance, shallowRef, withDirectives, isRef, vModelCheckbox, provide, toRef, Teleport, render as render$f, onBeforeUpdate, vShow, TransitionGroup, vModelDynamic, vModelText, vModelRadio, onBeforeUnmount, watchEffect, customRef, resolveDirective } from "vue";
+import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeStyle, withKeys, createElementVNode, Fragment as Fragment$1, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h as h$2, toDisplayString, watch, unref, withModifiers, renderList, markRaw, reactive, computed, inject, resolveDynamicComponent, useCssVars, useSlots, createTextVNode, onMounted, onUnmounted, mergeModels, useModel, createSlots, Transition, getCurrentScope, onScopeDispose, getCurrentInstance, shallowRef, withDirectives, isRef, vModelCheckbox, provide, toRef, Teleport, render as render$f, onBeforeUpdate, vShow, TransitionGroup, vModelDynamic, vModelText, vModelRadio, resolveDirective, onBeforeUnmount, watchEffect, customRef } from "vue";
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements$1 = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -5326,13 +5326,15 @@ const lightboxDirective = {
     if (!lightboxInstance || !lightboxInstance.open) return;
     if (binding.value.group) {
       if (!groups[binding.value.group]) groups[binding.value.group] = [];
+      const src = binding.value.src || binding.value || el.getAttribute("src") || "";
       groups[binding.value.group].push({
-        src: binding.value.src || binding.value,
-        type: binding.value.type || determineFileType(binding.value.src || binding.value),
+        src,
+        type: binding.value.type || determineFileType(src),
         name: binding.value.name || ""
       });
     }
-    el.addEventListener("click", () => {
+    el.addEventListener("click", (e) => {
+      e.stopPropagation();
       const group = binding.value.group || null;
       const item = {
         src: binding.value.src || binding.value,
@@ -19932,6 +19934,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       flushQueue();
     }
     return (_ctx, _cache) => {
+      const _directive_lightbox = resolveDirective("lightbox");
       return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createElementVNode("label", null, toDisplayString(_ctx.label), 1),
         createElementVNode("div", {
@@ -19956,12 +19959,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   key: file.id,
                   class: "multi-image-item-preview"
                 }, [
-                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("img", {
+                  isImage(file.extension || file.url) ? withDirectives((openBlock(), createElementBlock("img", {
                     key: 0,
                     class: "multi-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_3$b)) : (openBlock(), createBlock(unref(_sfc_main$Q), {
+                  }, null, 8, _hoisted_3$b)), [
+                    [_directive_lightbox]
+                  ]) : (openBlock(), createBlock(unref(_sfc_main$Q), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
@@ -20014,12 +20019,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   key: file.id,
                   class: normalizeClass(["single-image-item-preview", { "bgl_fill-image": _ctx.fill }])
                 }, [
-                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("img", {
+                  isImage(file.extension || file.url) ? withDirectives((openBlock(), createElementBlock("img", {
                     key: 0,
                     class: "single-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_9)) : (openBlock(), createBlock(unref(_sfc_main$Q), {
+                  }, null, 8, _hoisted_9)), [
+                    [_directive_lightbox]
+                  ]) : (openBlock(), createBlock(unref(_sfc_main$Q), {
                     key: 1,
                     size: 4,
                     weight: "2",
@@ -20069,7 +20076,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-5911e10d"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-d4a17ec6"]]);
 const _withScopeId$1 = (n2) => (pushScopeId("data-v-06b95183"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$j = ["title"];
 const _hoisted_2$e = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "slider round" }, null, -1));

package/dist/style.css

@@ -1813,7 +1813,7 @@ display: block;
 	color: var(--bgl-white);
 }
 
-.fileUploadWrap[data-v-5911e10d] {
+.fileUploadWrap[data-v-d4a17ec6] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1825,7 +1825,7 @@ display: block;
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-5911e10d] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-d4a17ec6] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -1833,14 +1833,14 @@ display: block;
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-5911e10d],
-.fileUploadWrap[data-v-5911e10d]:hover {
+.fileUploadWrap.dragover[data-v-d4a17ec6],
+.fileUploadWrap[data-v-d4a17ec6]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-5911e10d] {
+.fileUploadWrap[style*="height: auto;"][data-v-d4a17ec6] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-5911e10d] {
+.multi-image-item-preview[data-v-d4a17ec6] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -1854,12 +1854,12 @@ display: block;
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-5911e10d] {
+.multi-image-item-preview p[data-v-d4a17ec6] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-5911e10d]{
+.multi-preview[data-v-d4a17ec6]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -1870,17 +1870,17 @@ display: block;
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-5911e10d]{
+.bgl-single-preview[data-v-d4a17ec6]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-5911e10d]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-d4a17ec6]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-5911e10d] {
+.single-image-item-preview[data-v-d4a17ec6] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -1888,13 +1888,13 @@ display: block;
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-5911e10d] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-d4a17ec6] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-5911e10d] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-d4a17ec6] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-5911e10d]{
+.single-preview[data-v-d4a17ec6]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -1904,17 +1904,17 @@ display: block;
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
 }
-.bgl_fill-image.single-image-item-preview[data-v-5911e10d] {
+.bgl_fill-image.single-image-item-preview[data-v-d4a17ec6] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-5911e10d]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-d4a17ec6]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-5911e10d] {
+.single-image-item-preview .pie[data-v-d4a17ec6] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -1928,31 +1928,31 @@ display: block;
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-5911e10d] {
+.bgl_oval-upload[data-v-d4a17ec6] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-5911e10d] {
+.bgl_oval-upload p[data-v-d4a17ec6] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-5911e10d]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-d4a17ec6]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-5911e10d] {
+.bgl_oval-upload .pie[data-v-d4a17ec6] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-5911e10d] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-d4a17ec6] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-5911e10d]{
+.bgl_oval-upload .single-image-item-preview[data-v-d4a17ec6]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-5911e10d] {
+.bgl_oval-upload .single-preview[data-v-d4a17ec6] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-5911e10d] {
+.pie[data-v-d4a17ec6] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1960,7 +1960,7 @@ display: block;
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-5911e10d]:before {
+.pie[data-v-d4a17ec6]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1978,26 +1978,26 @@ display: block;
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-5911e10d] {
+.pie .success[data-v-d4a17ec6] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-5911e10d] {
+.pie .progress[data-v-d4a17ec6] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-5911e10d] {
+.pie.complete .progress[data-v-d4a17ec6] {
 	display: none;
 }
-.pie.complete .success[data-v-5911e10d] {
+.pie.complete .success[data-v-d4a17ec6] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-5911e10d]:before {
+.pie.complete[data-v-d4a17ec6]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-5911e10d] {
+.pie.complete[data-v-d4a17ec6] {
 	color: var(--bgl-green);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.724",
+  "version": "0.0.726",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/inputs/FileUpload.vue

@@ -196,7 +196,7 @@ function drop(e: DragEvent) {
 						:key="file.id"
 						class="multi-image-item-preview"
 					>
-						<img v-if="isImage(file.extension || file.url)" class="multi-preview" :src="file.url" alt="">
+						<img v-if="isImage(file.extension || file.url)" v-lightbox class="multi-preview" :src="file.url" alt="">
 						<Icon v-else icon="draft" class="multi-preview" />
 						<p class="m-0">
 							{{ file.name }}
@@ -250,7 +250,7 @@ function drop(e: DragEvent) {
 						class="single-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
-						<img v-if="isImage(file.extension || file.url)" class="single-preview" :src="file.url" alt="">
+						<img v-if="isImage(file.extension || file.url)" v-lightbox class="single-preview" :src="file.url" alt="">
 						<Icon v-else :size="4" weight="2" icon="draft" class="color-primary w-100" />
 					</div>
 

package/src/components/lightbox/index.ts

@@ -12,13 +12,15 @@ const lightboxDirective = {
 		if (!lightboxInstance || !lightboxInstance.open) return
 		if (binding.value.group) {
 			if (!groups[binding.value.group]) groups[binding.value.group] = []
+			const src = binding.value.src || binding.value || el.getAttribute('src') || ''
 			groups[binding.value.group].push({
-				src: binding.value.src || binding.value,
-				type: binding.value.type || determineFileType(binding.value.src || binding.value),
+				src,
+				type: binding.value.type || determineFileType(src),
 				name: binding.value.name || ''
 			})
 		}
-		el.addEventListener('click', () => {
+		el.addEventListener('click', (e) => {
+			e.stopPropagation()
 			const group = binding.value.group || null
 			const item: LightboxItem = {
 				src: binding.value.src || binding.value,