@bagelink/vue 0.0.728 → 0.0.734

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;;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"}
+{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAmgBA,OAAO,EAAmC,KAAK,WAAW,EAAY,MAAM,eAAe,CAAA;AA8B3F,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AAmHzC,iBAAS,MAAM,SAgBd;AA8BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;sBAzKZ,MAAM;wBACJ,OAAO;mBACZ,MAAM;uBACF,OAAO;;QA8cQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;sBAjdnB,MAAM;wBACJ,OAAO;mBACZ,MAAM;uBACF,OAAO;;;QA+ce,GAAG;EA2BpC;AACD,QAAA,MAAM,eAAe;YAjgBZ,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+fb,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,EAA+B,MAAM,KAAK,CAAA;;iBAoD7C,GAAG;;AADjB,wBAIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAA+B,MAAM,KAAK,CAAA;;iBA2E7C,GAAG;;AADjB,wBAIC"}

package/dist/components/lightbox/lightbox.types.d.ts

@@ -3,5 +3,6 @@ export interface LightboxItem {
     type: string;
     name: string;
     thumbnail?: string;
+    group?: string;
 }
 //# sourceMappingURL=lightbox.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lightbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/lightbox.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB"}
+{"version":3,"file":"lightbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/lightbox.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd"}

package/dist/index.cjs

@@ -5270,7 +5270,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
                     }, "Open file", 8, _hoisted_5$g)
                   ]))
                 ]),
-                vue.unref(group).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$b, [
+                vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$b, [
                   vue.createVNode(vue.unref(Btn), {
                     class: "navigation-btn oval user-select-none",
                     icon: "arrow_back",
@@ -5316,30 +5316,55 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-b3a3d091"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-c3c26420"]]);
 const groups = {};
 const lightboxDirective = {
   mounted(el, binding) {
     el.classList.add("hover");
-    let { group, src, type: type3, name, thumbnail } = binding.value || {};
-    src = src || binding.value || el.getAttribute("src") || "";
-    type3 = type3 || determineFileType(src);
-    const item = { src, type: type3, name, thumbnail };
-    if (group) {
-      if (!groups[group]) groups[group] = [];
-      groups[group].push(item);
-    }
+    const item = bindingToItem(binding, el);
+    groupHandler(item);
     el.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const lightboxInstance = createLightboxInstance();
-      if (!lightboxInstance || !lightboxInstance.open) return;
-      const open = lightboxInstance.open;
-      open(item, groups[group]);
+      openClickHandler(e, el, binding);
+    });
+  },
+  updated(el, binding) {
+    const item = bindingToItem(binding, el);
+    groupHandler(item);
+    el.removeEventListener("click", (e) => {
+      openClickHandler(e, el, binding);
+    });
+    el.addEventListener("click", (e) => {
+      openClickHandler(e, el, binding);
     });
   },
   unmounted(el, binding) {
+    el.removeEventListener("click", (e) => {
+      openClickHandler(e, el, binding);
+    });
   }
 };
+function groupHandler(item) {
+  if (item.group) {
+    if (!groups[item.group]) groups[item.group] = [];
+    const currentIndex = groups[item.group].findIndex((i2) => i2.src === item.src);
+    if (currentIndex === -1) groups[item.group].push(item);
+  }
+}
+function openClickHandler(e, el, binding) {
+  e.stopPropagation();
+  const item = bindingToItem(binding, el);
+  const lightboxInstance2 = getLightboxInstance();
+  if (!lightboxInstance2 || !lightboxInstance2.open) return;
+  const open = lightboxInstance2.open;
+  const group = item && item.group ? groups[item.group] : void 0;
+  open(item, group);
+}
+function bindingToItem(binding, el) {
+  let { group, src, type: type3, name, thumbnail } = binding.value || {};
+  src = src || binding.value || el.getAttribute("src") || "";
+  type3 = type3 || determineFileType(src);
+  return { src, type: type3, name, thumbnail, group };
+}
 const youtubeRegex = /youtube\.com|youtu\.be/;
 const vimeoRegex = /vimeo\.com/;
 function determineFileType(url) {
@@ -5350,11 +5375,15 @@ function determineFileType(url) {
   if (["pdf"].includes(extension)) return "pdf";
   return "unknown";
 }
-function createLightboxInstance() {
-  const lightboxEl = document.createElement("div");
-  document.body.prepend(lightboxEl);
-  const app = vue.createApp(Lightbox$1);
-  return app.mount(lightboxEl);
+let lightboxInstance = null;
+function getLightboxInstance() {
+  if (!lightboxInstance) {
+    const lightboxEl = document.createElement("div");
+    document.body.prepend(lightboxEl);
+    const app = vue.createApp(Lightbox$1);
+    lightboxInstance = app.mount(lightboxEl);
+  }
+  return lightboxInstance;
 }
 const Lightbox = {
   install(app) {
@@ -19848,6 +19877,19 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       },
       { immediate: true }
     );
+    vue.watch(() => props2.modelValue, () => {
+      const newModelValue = props2.modelValue || [];
+      const currentValue = [file_bindkeys.value].flat();
+      const newValue = [newModelValue].flat();
+      const isSame = currentValue.every((id) => newValue.includes(id)) && newValue.every((id) => currentValue.includes(id)) && currentValue.length === newValue.length;
+      if (!isSame) {
+        file_bindkeys.value = newModelValue;
+        for (const fle of storageFiles.value) {
+          const index2 = [file_bindkeys.value].flat().findIndex((key) => fle[bindKey2] === key);
+          if (index2 === -1) storageFiles.value.splice(index2, 1);
+        }
+      }
+    });
     function updateModelValue() {
       let idValue;
       if (props2.multiple) {
@@ -20068,7 +20110,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-d4a17ec6"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-a0ae528d"]]);
 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

@@ -5268,7 +5268,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                     }, "Open file", 8, _hoisted_5$g)
                   ]))
                 ]),
-                unref(group).length ? (openBlock(), createElementBlock("div", _hoisted_6$b, [
+                unref(group) && unref(group).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_6$b, [
                   createVNode(unref(Btn), {
                     class: "navigation-btn oval user-select-none",
                     icon: "arrow_back",
@@ -5314,30 +5314,55 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-b3a3d091"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-c3c26420"]]);
 const groups = {};
 const lightboxDirective = {
   mounted(el, binding) {
     el.classList.add("hover");
-    let { group, src, type: type3, name, thumbnail } = binding.value || {};
-    src = src || binding.value || el.getAttribute("src") || "";
-    type3 = type3 || determineFileType(src);
-    const item = { src, type: type3, name, thumbnail };
-    if (group) {
-      if (!groups[group]) groups[group] = [];
-      groups[group].push(item);
-    }
+    const item = bindingToItem(binding, el);
+    groupHandler(item);
     el.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const lightboxInstance = createLightboxInstance();
-      if (!lightboxInstance || !lightboxInstance.open) return;
-      const open = lightboxInstance.open;
-      open(item, groups[group]);
+      openClickHandler(e, el, binding);
+    });
+  },
+  updated(el, binding) {
+    const item = bindingToItem(binding, el);
+    groupHandler(item);
+    el.removeEventListener("click", (e) => {
+      openClickHandler(e, el, binding);
+    });
+    el.addEventListener("click", (e) => {
+      openClickHandler(e, el, binding);
     });
   },
   unmounted(el, binding) {
+    el.removeEventListener("click", (e) => {
+      openClickHandler(e, el, binding);
+    });
   }
 };
+function groupHandler(item) {
+  if (item.group) {
+    if (!groups[item.group]) groups[item.group] = [];
+    const currentIndex = groups[item.group].findIndex((i2) => i2.src === item.src);
+    if (currentIndex === -1) groups[item.group].push(item);
+  }
+}
+function openClickHandler(e, el, binding) {
+  e.stopPropagation();
+  const item = bindingToItem(binding, el);
+  const lightboxInstance2 = getLightboxInstance();
+  if (!lightboxInstance2 || !lightboxInstance2.open) return;
+  const open = lightboxInstance2.open;
+  const group = item && item.group ? groups[item.group] : void 0;
+  open(item, group);
+}
+function bindingToItem(binding, el) {
+  let { group, src, type: type3, name, thumbnail } = binding.value || {};
+  src = src || binding.value || el.getAttribute("src") || "";
+  type3 = type3 || determineFileType(src);
+  return { src, type: type3, name, thumbnail, group };
+}
 const youtubeRegex = /youtube\.com|youtu\.be/;
 const vimeoRegex = /vimeo\.com/;
 function determineFileType(url) {
@@ -5348,11 +5373,15 @@ function determineFileType(url) {
   if (["pdf"].includes(extension)) return "pdf";
   return "unknown";
 }
-function createLightboxInstance() {
-  const lightboxEl = document.createElement("div");
-  document.body.prepend(lightboxEl);
-  const app = createApp(Lightbox$1);
-  return app.mount(lightboxEl);
+let lightboxInstance = null;
+function getLightboxInstance() {
+  if (!lightboxInstance) {
+    const lightboxEl = document.createElement("div");
+    document.body.prepend(lightboxEl);
+    const app = createApp(Lightbox$1);
+    lightboxInstance = app.mount(lightboxEl);
+  }
+  return lightboxInstance;
 }
 const Lightbox = {
   install(app) {
@@ -19846,6 +19875,19 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
+    watch(() => props2.modelValue, () => {
+      const newModelValue = props2.modelValue || [];
+      const currentValue = [file_bindkeys.value].flat();
+      const newValue = [newModelValue].flat();
+      const isSame = currentValue.every((id) => newValue.includes(id)) && newValue.every((id) => currentValue.includes(id)) && currentValue.length === newValue.length;
+      if (!isSame) {
+        file_bindkeys.value = newModelValue;
+        for (const fle of storageFiles.value) {
+          const index2 = [file_bindkeys.value].flat().findIndex((key) => fle[bindKey2] === key);
+          if (index2 === -1) storageFiles.value.splice(index2, 1);
+        }
+      }
+    });
     function updateModelValue() {
       let idValue;
       if (props2.multiple) {
@@ -20066,7 +20108,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-d4a17ec6"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-a0ae528d"]]);
 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

@@ -1,14 +1,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
-.bgl-lightbox-overlay[data-v-b3a3d091] {
+.bgl-lightbox-overlay[data-v-c3c26420] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-b3a3d091] {
+.bgl-lightbox[data-v-c3c26420] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-b3a3d091]{
-	animation: 500ms ease bgl-lightbox-load-b3a3d091;
+.bgl-lightbox-item[data-v-c3c26420]{
+	animation: 500ms ease bgl-lightbox-load-c3c26420;
 }
-@keyframes bgl-lightbox-load-b3a3d091 {
+@keyframes bgl-lightbox-load-c3c26420 {
 from {
     scale:0.7;
 }
@@ -16,32 +16,32 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-b3a3d091] * {
+.bgl-lightbox-item[data-v-c3c26420] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-b3a3d091;
+	animation: 200ms ease bgl-lightbox-load-c3c26420;
 }
-.navigation[data-v-b3a3d091] {
+.navigation[data-v-c3c26420] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-b3a3d091] {
+.navigation-btn[data-v-c3c26420] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-b3a3d091] {
+.thumbnail[data-v-c3c26420] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-b3a3d091]:hover {
+.thumbnail[data-v-c3c26420]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-b3a3d091]:active {
+.thumbnail[data-v-c3c26420]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-b3a3d091] {
+.thumbnail.active[data-v-c3c26420] {
 	opacity: 1;
 	outline: 2px solid white;
 }
@@ -1801,7 +1801,7 @@ display: block;
 	color: var(--bgl-white);
 }
 
-.fileUploadWrap[data-v-d4a17ec6] {
+.fileUploadWrap[data-v-a0ae528d] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1813,7 +1813,7 @@ display: block;
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-d4a17ec6] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-a0ae528d] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -1821,14 +1821,14 @@ display: block;
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-d4a17ec6],
-.fileUploadWrap[data-v-d4a17ec6]:hover {
+.fileUploadWrap.dragover[data-v-a0ae528d],
+.fileUploadWrap[data-v-a0ae528d]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-d4a17ec6] {
+.fileUploadWrap[style*="height: auto;"][data-v-a0ae528d] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-d4a17ec6] {
+.multi-image-item-preview[data-v-a0ae528d] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -1842,12 +1842,12 @@ display: block;
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-d4a17ec6] {
+.multi-image-item-preview p[data-v-a0ae528d] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-d4a17ec6]{
+.multi-preview[data-v-a0ae528d]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -1858,17 +1858,17 @@ display: block;
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-d4a17ec6]{
+.bgl-single-preview[data-v-a0ae528d]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-d4a17ec6]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-a0ae528d]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-d4a17ec6] {
+.single-image-item-preview[data-v-a0ae528d] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -1876,13 +1876,13 @@ display: block;
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-d4a17ec6] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-a0ae528d] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-d4a17ec6] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-a0ae528d] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-d4a17ec6]{
+.single-preview[data-v-a0ae528d]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -1892,17 +1892,17 @@ display: block;
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
 }
-.bgl_fill-image.single-image-item-preview[data-v-d4a17ec6] {
+.bgl_fill-image.single-image-item-preview[data-v-a0ae528d] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-d4a17ec6]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-a0ae528d]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-d4a17ec6] {
+.single-image-item-preview .pie[data-v-a0ae528d] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -1916,31 +1916,31 @@ display: block;
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-d4a17ec6] {
+.bgl_oval-upload[data-v-a0ae528d] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-d4a17ec6] {
+.bgl_oval-upload p[data-v-a0ae528d] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-d4a17ec6]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-a0ae528d]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-d4a17ec6] {
+.bgl_oval-upload .pie[data-v-a0ae528d] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-d4a17ec6] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-a0ae528d] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-d4a17ec6]{
+.bgl_oval-upload .single-image-item-preview[data-v-a0ae528d]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-d4a17ec6] {
+.bgl_oval-upload .single-preview[data-v-a0ae528d] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-d4a17ec6] {
+.pie[data-v-a0ae528d] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1948,7 +1948,7 @@ display: block;
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-d4a17ec6]:before {
+.pie[data-v-a0ae528d]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1966,26 +1966,26 @@ display: block;
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-d4a17ec6] {
+.pie .success[data-v-a0ae528d] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-d4a17ec6] {
+.pie .progress[data-v-a0ae528d] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-d4a17ec6] {
+.pie.complete .progress[data-v-a0ae528d] {
 	display: none;
 }
-.pie.complete .success[data-v-d4a17ec6] {
+.pie.complete .success[data-v-a0ae528d] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-d4a17ec6]:before {
+.pie.complete[data-v-a0ae528d]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-d4a17ec6] {
+.pie.complete[data-v-a0ae528d] {
 	color: var(--bgl-green);
 }
 

package/package.json

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

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue'
-import { Btn, IMAGE_FORMATS, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel } from '@bagelink/vue'
+import { Btn, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel } from '@bagelink/vue'
 
 const props = defineProps<{
 	label?: string
@@ -83,6 +83,20 @@ watch(
 	{ immediate: true }
 )
 
+watch(() => props.modelValue, () => {
+	const newModelValue: FSValue = props.modelValue || []
+	const currentValue = [file_bindkeys].flat()
+	const newValue = [newModelValue].flat()
+	const isSame = currentValue.every(id => newValue.includes(id)) && newValue.every(id => currentValue.includes(id)) && currentValue.length === newValue.length
+	if (!isSame) {
+		file_bindkeys = newModelValue
+		for (const fle of storageFiles) {
+			const index = [file_bindkeys].flat().findIndex(key => fle[bindKey] === key)
+			if (index === -1) storageFiles.splice(index, 1)
+		}
+	}
+})
+
 function updateModelValue() {
 	let idValue: FSValue
 	if (props.multiple) {

package/src/components/lightbox/Lightbox.vue

@@ -105,7 +105,7 @@ defineExpose({ open, close })
 						</div>
 					</template>
 				</div>
-				<div v-if="group.length" class="navigation flex space-between w-100 absolute">
+				<div v-if="group && group.length > 1" class="navigation flex space-between w-100 absolute">
 					<Btn
 						class="navigation-btn oval user-select-none"
 						icon="arrow_back"

package/src/components/lightbox/index.ts

@@ -9,27 +9,46 @@ const groups: Record<string, LightboxItem[]> = {}
 const lightboxDirective: Directive = {
 	mounted(el: HTMLElement, binding) {
 		el.classList.add('hover')
-		let { group, src, type, name, thumbnail } = binding.value || {}
-		src = src || binding.value || el.getAttribute('src') || ''
-		type = type || determineFileType(src)
-		const item: LightboxItem = { src, type,	name, thumbnail }
-		if (group) {
-			if (!groups[group]) groups[group] = []
-			groups[group].push(item)
-		}
-		el.addEventListener('click', (e) => {
-			e.stopPropagation()
-			const lightboxInstance = createLightboxInstance()
-			if (!lightboxInstance || !lightboxInstance.open) return
-			const open = lightboxInstance.open as OpenFunction
-			open(item, groups[group])
-		})
+		const item = bindingToItem(binding, el)
+		groupHandler(item)
+		el.addEventListener('click', (e) => { openClickHandler(e, el, binding) })
+	},
+	updated(el: HTMLElement, binding) {
+		const item = bindingToItem(binding, el)
+		groupHandler(item)
+		el.removeEventListener('click', (e) => { openClickHandler(e, el, binding) })
+		el.addEventListener('click', (e) => { openClickHandler(e, el, binding) })
 	},
 	unmounted(el: HTMLElement, binding) {
-		// TODO: remove click event handler
+		el.removeEventListener('click', (e) => { openClickHandler(e, el, binding) })
 	}
 }
 
+function groupHandler(item: LightboxItem) {
+	if (item.group) {
+		if (!groups[item.group]) groups[item.group] = []
+		const currentIndex = groups[item.group].findIndex(i => i.src === item.src)
+		if (currentIndex === -1) groups[item.group].push(item)
+	}
+}
+
+function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBinding) {
+	e.stopPropagation()
+	const item = bindingToItem(binding, el)
+	const lightboxInstance = getLightboxInstance()
+	if (!lightboxInstance || !lightboxInstance.open) return
+	const open = lightboxInstance.open as OpenFunction
+	const group = item && item.group ? groups[item.group] : undefined
+	open(item, group)
+}
+
+function bindingToItem(binding: DirectiveBinding, el: HTMLElement): LightboxItem {
+	let { group, src, type, name, thumbnail } = binding.value || {}
+	src = src || binding.value || el.getAttribute('src') || ''
+	type = type || determineFileType(src)
+	return { src, type, name, thumbnail, group }
+}
+
 const youtubeRegex = /youtube\.com|youtu\.be/
 const vimeoRegex = /vimeo\.com/
 
@@ -41,12 +60,16 @@ function determineFileType(url: string): string {
 	return 'unknown'
 }
 
-function createLightboxInstance(): InstanceType<typeof Lightbox> | null {
-	const lightboxEl = document.createElement('div')
-	document.body.prepend(lightboxEl)
+let lightboxInstance: InstanceType<typeof Lightbox> | null = null
 
-	const app = createApp(Lightbox)
-	return app.mount(lightboxEl) as InstanceType<typeof Lightbox>
+function getLightboxInstance(): InstanceType<typeof Lightbox> {
+	if (!lightboxInstance) {
+		const lightboxEl = document.createElement('div')
+		document.body.prepend(lightboxEl)
+		const app = createApp(Lightbox)
+		lightboxInstance = app.mount(lightboxEl) as InstanceType<typeof Lightbox>
+	}
+	return lightboxInstance
 }
 
 export default {

package/src/components/lightbox/lightbox.types.ts

@@ -3,4 +3,5 @@ export interface LightboxItem {
 	type: string
 	name: string
 	thumbnail?: string
+	group?: string
 }