@bagelink/vue 0.0.893 → 0.0.899

package/dist/components/Carousel.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.vue.d.ts","sourceRoot":"","sources":["../../src/components/Carousel.vue"],"names":[],"mappings":"AAyYA,iBAAS,IAAI,SAIZ;AAED,iBAAS,IAAI,SAIZ;AAwCD,iBAAS,cAAc;;yBAsEM,GAAG;;;;YACN,GAAG;;;;YACH,GAAG;;;;;WAUf,OAAO,IAA6B;EAEjD;AA6BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgBnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Carousel.vue.d.ts","sourceRoot":"","sources":["../../src/components/Carousel.vue"],"names":[],"mappings":"AA2ZA,iBAAS,IAAI,SAIZ;AAED,iBAAS,IAAI,SAIZ;AAwCD,iBAAS,cAAc;;yBAsEM,GAAG;;;;YACN,GAAG;;;;YACH,GAAG;;;;;WAUf,OAAO,IAA6B;EAEjD;AA6BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgBnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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":"AAwkBA,OAAO,EAAmC,KAAK,WAAW,EAAkB,MAAM,eAAe,CAAA;AAKjG,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AAuJzC,iBAAS,MAAM,SAiBd;AA6BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA3KZ,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YAglBS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;0BAnlBpB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YAilBe,GAAG;;;WASvB,OAAO,IAA6B;EAEjD;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YA9oBZ,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;YACN,UAAU,GAAG,OAAO;aACnB,MAAM;;;;;YAXP,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;YACN,UAAU,GAAG,OAAO;aACnB,MAAM;;;;kFA0oBd,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAykBA,OAAO,EAAmC,KAAK,WAAW,EAAkB,MAAM,eAAe,CAAA;AAKjG,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AAuJzC,iBAAS,MAAM,SAiBd;AA6BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA3KZ,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YAilBS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;0BAplBpB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YAklBe,GAAG;;;WASvB,OAAO,IAA6B;EAEjD;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YA/oBZ,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;YACN,UAAU,GAAG,OAAO;aACnB,MAAM;;;;;YAXP,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;YACN,UAAU,GAAG,OAAO;aACnB,MAAM;;;;kFA2oBd,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/lightbox/Lightbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.vue"],"names":[],"mappings":"AA4PA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AASpD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAO5D;AAED,iBAAS,KAAK,SAGb;;;;;AA8bD,wBAMG"}
+{"version":3,"file":"Lightbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.vue"],"names":[],"mappings":"AAoQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAYpD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAO5D;AAED,iBAAS,KAAK,SAGb;;;;;AAidD,wBAMG"}

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;;iBAkF7C,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;;iBAyF7C,GAAG;;AADjB,wBAIC"}

package/dist/index.cjs

@@ -597,13 +597,21 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
         child.addEventListener("click", preventDefaultClick);
       });
     }
-    function updateHeight() {
-      if (!props2.autoHeight || !bglSlider.value) return;
-      setTimeout(() => {
-        const children2 = Array.from(bglSlider.value.children[activeSlideIndex.value].children);
+    function calcHeight() {
+      if (!bglSlider.value) return;
+      try {
+        const slide = bglSlider.value.children[activeSlideIndex.value];
+        if (!slide) return;
+        const children2 = Array.from(slide.children);
         const totalHeight = children2.reduce((sum, el) => sum + el.clientHeight, 0);
         yHeight.value = `${totalHeight}px`;
-      }, 200);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    function updateHeight() {
+      if (!props2.autoHeight) return;
+      setTimeout(calcHeight, 200);
     }
     function easeScroll(target, duration = 500) {
       if (!bglSlider.value || isPressed.value) return;
@@ -739,7 +747,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-ca63f224"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-98e36ac5"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -18653,8 +18661,8 @@ const _hoisted_11$1 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_12 = ["src"];
-const _hoisted_13 = { class: "position-start m-05 flex opacity-7" };
+const _hoisted_12$1 = ["src"];
+const _hoisted_13$1 = { class: "position-start m-05 flex opacity-7" };
 const _hoisted_14 = {
   key: 0,
   class: "progress"
@@ -18879,18 +18887,16 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
           }, () => [
             _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$c, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
-                return vue.openBlock(), vue.createElementBlock("div", {
+                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   key: file.id,
                   class: "multi-image-item-preview"
                 }, [
-                  isImage(file.extension || file.url) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
+                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("img", {
                     key: 0,
                     class: "multi-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_5$a)), [
-                    [_directive_lightbox]
-                  ]) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+                  }, null, 8, _hoisted_5$a)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
@@ -18903,6 +18909,8 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                     color: "red",
                     onClick: vue.withModifiers(($event) => removeFile(file), ["stop"])
                   }, null, 8, ["onClick"])
+                ])), [
+                  [_directive_lightbox, { src: file.url, download: true }]
                 ]);
               }), 128)),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fileQueue.value, (fileQ) => {
@@ -18948,10 +18956,10 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                       class: "single-preview",
                       src: file.url,
                       alt: ""
-                    }, null, 8, _hoisted_12), [
-                      [_directive_lightbox]
+                    }, null, 8, _hoisted_12$1), [
+                      [_directive_lightbox, { src: file.url, download: true }]
                     ]),
-                    vue.createElementVNode("div", _hoisted_13, [
+                    vue.createElementVNode("div", _hoisted_13$1, [
                       vue.withDirectives(vue.createVNode(vue.unref(Btn), {
                         color: "gray",
                         thin: "",
@@ -18981,13 +18989,15 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                         [_directive_tooltip, "Download"]
                       ])
                     ])
-                  ])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+                  ])) : vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                     key: 1,
                     size: 4,
                     weight: "2",
                     icon: "draft",
                     class: "color-primary w-100"
-                  }))
+                  }, null, 512)), [
+                    [_directive_lightbox, { src: file.url, download: true }]
+                  ])
                 ], 2);
               }), 128)),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fileQueue.value, (fileQ) => {
@@ -19031,7 +19041,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-963c1a6d"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-c2732102"]]);
 const _hoisted_1$u = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
@@ -55223,7 +55233,7 @@ const _hoisted_1 = {
   key: 0,
   class: "navigation flex space-between px-3 w-100 absolute"
 };
-const _hoisted_2 = { class: "flex start fixed top-1 w-100 space-between start-1" };
+const _hoisted_2 = { class: "flex start fixed top-1 w-100 space-between px-1" };
 const _hoisted_3 = {
   key: 0,
   class: "center"
@@ -55234,14 +55244,16 @@ const _hoisted_6 = ["src"];
 const _hoisted_7 = ["src", "title"];
 const _hoisted_8 = {
   key: 3,
-  class: "file-info txt-white"
+  class: "file-info txt-white flex align-items-start gap-1"
 };
-const _hoisted_9 = ["href"];
-const _hoisted_10 = {
+const _hoisted_9 = { class: "txt-start" };
+const _hoisted_10 = { class: "m-0" };
+const _hoisted_11 = { class: "m-0" };
+const _hoisted_12 = {
   key: 0,
   class: "flex justify-content-center mt-2 overflow p-1 fixed bottom start end gap-1 m_justify-content-start"
 };
-const _hoisted_11 = ["src", "onClick"];
+const _hoisted_13 = ["src", "onClick"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "Lightbox",
   setup(__props, { expose: __expose }) {
@@ -55308,7 +55320,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           return [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: "bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-999 inset mx-auto",
+              class: "bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-9999 inset mx-auto",
               onKeydown: [
                 vue.withKeys(close2, ["esc"]),
                 vue.withKeys(prev, ["left"]),
@@ -55422,15 +55434,26 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     title: (_o = vue.unref(currentItem)) == null ? void 0 : _o.name,
                     class: "vw90"
                   }, null, 8, _hoisted_7)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-                    vue.createElementVNode("p", null, "File: " + vue.toDisplayString((_p = vue.unref(currentItem)) == null ? void 0 : _p.name), 1),
-                    vue.createElementVNode("p", null, "Type: " + vue.toDisplayString((_q = vue.unref(currentItem)) == null ? void 0 : _q.type), 1),
-                    vue.createElementVNode("a", {
-                      href: (_r2 = vue.unref(currentItem)) == null ? void 0 : _r2.src,
-                      target: "_blank"
-                    }, "Open file", 8, _hoisted_9)
+                    vue.createVNode(vue.unref(_sfc_main$c), {
+                      class: "m-0",
+                      icon: "draft",
+                      size: 3
+                    }),
+                    vue.createElementVNode("div", _hoisted_9, [
+                      vue.createElementVNode("p", _hoisted_10, " File: " + vue.toDisplayString((_p = vue.unref(currentItem)) == null ? void 0 : _p.name), 1),
+                      vue.createElementVNode("p", _hoisted_11, " Type: " + vue.toDisplayString((_q = vue.unref(currentItem)) == null ? void 0 : _q.type), 1),
+                      vue.createVNode(vue.unref(Btn), {
+                        href: (_r2 = vue.unref(currentItem)) == null ? void 0 : _r2.src,
+                        target: "_blank",
+                        round: "",
+                        thin: "",
+                        class: "mt-1",
+                        value: "Open file"
+                      }, null, 8, ["href"])
+                    ])
                   ]))
                 ]),
-                vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+                vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(group), (item, index2) => {
                     return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
                       item.type === "image" ? (vue.openBlock(), vue.createElementBlock("img", {
@@ -55439,7 +55462,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         src: item.src,
                         alt: "",
                         onClick: ($event) => selectItem(index2)
-                      }, null, 10, _hoisted_11)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+                      }, null, 10, _hoisted_13)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                         key: 1,
                         class: vue.normalizeClass(["thumbnail object-fit-cover hover opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: vue.unref(currentIndex) === index2 }]),
                         icon: "description",
@@ -55457,7 +55480,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f5f9581d"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6ceb84fe"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {
@@ -55503,17 +55526,23 @@ function bindingToItem(binding, el) {
   let { group, src, type: type3, name, thumbnail, enableZoom, openFile, download } = binding.value || {};
   src = src || binding.value || el.getAttribute("src") || "";
   type3 = type3 || determineFileType(src);
+  name = name || urlToName(src) || el.getAttribute("alt") || "";
   return { src, type: type3, name, thumbnail, group, enableZoom, openFile, download };
 }
 const youtubeRegex = /youtube\.com|youtu\.be/;
 const vimeoRegex = /vimeo\.com/;
+function urlToName(url) {
+  if (!url) return "";
+  const name = url.split("/").pop() || "";
+  return name.replace(/\.[^/.]+$/, "");
+}
 function determineFileType(url) {
   if (!url) return "unknown";
   const extension = (url.split(".").pop() || "").toLowerCase();
   if (IMAGE_FORMATS_REGEXP.test(extension)) return "image";
   if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) return "video";
   if (["pdf"].includes(extension)) return "pdf";
-  return "unknown";
+  return extension ?? "unknown";
 }
 let lightboxInstance;
 function getLightboxInstance() {

package/dist/index.mjs

@@ -595,13 +595,21 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         child.addEventListener("click", preventDefaultClick);
       });
     }
-    function updateHeight() {
-      if (!props2.autoHeight || !bglSlider.value) return;
-      setTimeout(() => {
-        const children2 = Array.from(bglSlider.value.children[activeSlideIndex.value].children);
+    function calcHeight() {
+      if (!bglSlider.value) return;
+      try {
+        const slide = bglSlider.value.children[activeSlideIndex.value];
+        if (!slide) return;
+        const children2 = Array.from(slide.children);
         const totalHeight = children2.reduce((sum, el) => sum + el.clientHeight, 0);
         yHeight.value = `${totalHeight}px`;
-      }, 200);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    function updateHeight() {
+      if (!props2.autoHeight) return;
+      setTimeout(calcHeight, 200);
     }
     function easeScroll(target, duration = 500) {
       if (!bglSlider.value || isPressed.value) return;
@@ -737,7 +745,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-ca63f224"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-98e36ac5"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -18651,8 +18659,8 @@ const _hoisted_11$1 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_12 = ["src"];
-const _hoisted_13 = { class: "position-start m-05 flex opacity-7" };
+const _hoisted_12$1 = ["src"];
+const _hoisted_13$1 = { class: "position-start m-05 flex opacity-7" };
 const _hoisted_14 = {
   key: 0,
   class: "progress"
@@ -18877,18 +18885,16 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           }, () => [
             _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(storageFiles.value, (file) => {
-                return openBlock(), createElementBlock("div", {
+                return withDirectives((openBlock(), createElementBlock("div", {
                   key: file.id,
                   class: "multi-image-item-preview"
                 }, [
-                  isImage(file.extension || file.url) ? withDirectives((openBlock(), createElementBlock("img", {
+                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("img", {
                     key: 0,
                     class: "multi-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_5$a)), [
-                    [_directive_lightbox]
-                  ]) : (openBlock(), createBlock(unref(_sfc_main$c), {
+                  }, null, 8, _hoisted_5$a)) : (openBlock(), createBlock(unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
@@ -18901,6 +18907,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     color: "red",
                     onClick: withModifiers(($event) => removeFile(file), ["stop"])
                   }, null, 8, ["onClick"])
+                ])), [
+                  [_directive_lightbox, { src: file.url, download: true }]
                 ]);
               }), 128)),
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(fileQueue.value, (fileQ) => {
@@ -18946,10 +18954,10 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                       class: "single-preview",
                       src: file.url,
                       alt: ""
-                    }, null, 8, _hoisted_12), [
-                      [_directive_lightbox]
+                    }, null, 8, _hoisted_12$1), [
+                      [_directive_lightbox, { src: file.url, download: true }]
                     ]),
-                    createElementVNode("div", _hoisted_13, [
+                    createElementVNode("div", _hoisted_13$1, [
                       withDirectives(createVNode(unref(Btn), {
                         color: "gray",
                         thin: "",
@@ -18979,13 +18987,15 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                         [_directive_tooltip, "Download"]
                       ])
                     ])
-                  ])) : (openBlock(), createBlock(unref(_sfc_main$c), {
+                  ])) : withDirectives((openBlock(), createBlock(unref(_sfc_main$c), {
                     key: 1,
                     size: 4,
                     weight: "2",
                     icon: "draft",
                     class: "color-primary w-100"
-                  }))
+                  }, null, 512)), [
+                    [_directive_lightbox, { src: file.url, download: true }]
+                  ])
                 ], 2);
               }), 128)),
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(fileQueue.value, (fileQ) => {
@@ -19029,7 +19039,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-963c1a6d"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-c2732102"]]);
 const _hoisted_1$u = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
@@ -55221,7 +55231,7 @@ const _hoisted_1 = {
   key: 0,
   class: "navigation flex space-between px-3 w-100 absolute"
 };
-const _hoisted_2 = { class: "flex start fixed top-1 w-100 space-between start-1" };
+const _hoisted_2 = { class: "flex start fixed top-1 w-100 space-between px-1" };
 const _hoisted_3 = {
   key: 0,
   class: "center"
@@ -55232,14 +55242,16 @@ const _hoisted_6 = ["src"];
 const _hoisted_7 = ["src", "title"];
 const _hoisted_8 = {
   key: 3,
-  class: "file-info txt-white"
+  class: "file-info txt-white flex align-items-start gap-1"
 };
-const _hoisted_9 = ["href"];
-const _hoisted_10 = {
+const _hoisted_9 = { class: "txt-start" };
+const _hoisted_10 = { class: "m-0" };
+const _hoisted_11 = { class: "m-0" };
+const _hoisted_12 = {
   key: 0,
   class: "flex justify-content-center mt-2 overflow p-1 fixed bottom start end gap-1 m_justify-content-start"
 };
-const _hoisted_11 = ["src", "onClick"];
+const _hoisted_13 = ["src", "onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Lightbox",
   setup(__props, { expose: __expose }) {
@@ -55306,7 +55318,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return [
             unref(isOpen) ? (openBlock(), createElementBlock("div", {
               key: 0,
-              class: "bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-999 inset mx-auto",
+              class: "bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-9999 inset mx-auto",
               onKeydown: [
                 withKeys(close2, ["esc"]),
                 withKeys(prev, ["left"]),
@@ -55420,15 +55432,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     title: (_o = unref(currentItem)) == null ? void 0 : _o.name,
                     class: "vw90"
                   }, null, 8, _hoisted_7)) : (openBlock(), createElementBlock("div", _hoisted_8, [
-                    createElementVNode("p", null, "File: " + toDisplayString((_p = unref(currentItem)) == null ? void 0 : _p.name), 1),
-                    createElementVNode("p", null, "Type: " + toDisplayString((_q = unref(currentItem)) == null ? void 0 : _q.type), 1),
-                    createElementVNode("a", {
-                      href: (_r2 = unref(currentItem)) == null ? void 0 : _r2.src,
-                      target: "_blank"
-                    }, "Open file", 8, _hoisted_9)
+                    createVNode(unref(_sfc_main$c), {
+                      class: "m-0",
+                      icon: "draft",
+                      size: 3
+                    }),
+                    createElementVNode("div", _hoisted_9, [
+                      createElementVNode("p", _hoisted_10, " File: " + toDisplayString((_p = unref(currentItem)) == null ? void 0 : _p.name), 1),
+                      createElementVNode("p", _hoisted_11, " Type: " + toDisplayString((_q = unref(currentItem)) == null ? void 0 : _q.type), 1),
+                      createVNode(unref(Btn), {
+                        href: (_r2 = unref(currentItem)) == null ? void 0 : _r2.src,
+                        target: "_blank",
+                        round: "",
+                        thin: "",
+                        class: "mt-1",
+                        value: "Open file"
+                      }, null, 8, ["href"])
+                    ])
                   ]))
                 ]),
-                unref(group) && unref(group).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                unref(group) && unref(group).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_12, [
                   (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(group), (item, index2) => {
                     return openBlock(), createElementBlock(Fragment$1, { key: index2 }, [
                       item.type === "image" ? (openBlock(), createElementBlock("img", {
@@ -55437,7 +55460,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         src: item.src,
                         alt: "",
                         onClick: ($event) => selectItem(index2)
-                      }, null, 10, _hoisted_11)) : (openBlock(), createBlock(unref(_sfc_main$c), {
+                      }, null, 10, _hoisted_13)) : (openBlock(), createBlock(unref(_sfc_main$c), {
                         key: 1,
                         class: normalizeClass(["thumbnail object-fit-cover hover opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: unref(currentIndex) === index2 }]),
                         icon: "description",
@@ -55455,7 +55478,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f5f9581d"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6ceb84fe"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {
@@ -55501,17 +55524,23 @@ function bindingToItem(binding, el) {
   let { group, src, type: type3, name, thumbnail, enableZoom, openFile, download } = binding.value || {};
   src = src || binding.value || el.getAttribute("src") || "";
   type3 = type3 || determineFileType(src);
+  name = name || urlToName(src) || el.getAttribute("alt") || "";
   return { src, type: type3, name, thumbnail, group, enableZoom, openFile, download };
 }
 const youtubeRegex = /youtube\.com|youtu\.be/;
 const vimeoRegex = /vimeo\.com/;
+function urlToName(url) {
+  if (!url) return "";
+  const name = url.split("/").pop() || "";
+  return name.replace(/\.[^/.]+$/, "");
+}
 function determineFileType(url) {
   if (!url) return "unknown";
   const extension = (url.split(".").pop() || "").toLowerCase();
   if (IMAGE_FORMATS_REGEXP.test(extension)) return "image";
   if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) return "video";
   if (["pdf"].includes(extension)) return "pdf";
-  return "unknown";
+  return extension ?? "unknown";
 }
 let lightboxInstance;
 function getLightboxInstance() {

package/dist/style.css

@@ -350,7 +350,7 @@ display: block;
 	padding: 0;
 }
 
-.blocker[data-v-ca63f224] {
+.blocker[data-v-98e36ac5] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -358,7 +358,7 @@ display: block;
 	height: 100%;
 	z-index: 100;
 }
-.bgl-slider[data-v-ca63f224] {
+.bgl-slider[data-v-98e36ac5] {
 	display: grid;
 	position: relative;
 	/* scroll-behavior: smooth; */
@@ -367,43 +367,43 @@ display: block;
 	/* scroll-snap-type: x mandatory; */
 	overflow-x: hidden;
 }
-.autoHeight[data-v-ca63f224] {
+.autoHeight[data-v-98e36ac5] {
 	transition: height ease 0.7s;
 }
-.bgl-slider.allowScroll[data-v-ca63f224] {
+.bgl-slider.allowScroll[data-v-98e36ac5] {
 	overflow-x: scroll;
 }
-.bgl-slider[data-v-ca63f224] {
+.bgl-slider[data-v-98e36ac5] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 1) * 1%);
 	gap: 1%;
 }
-.bgl-slider.odd[data-v-ca63f224] {
+.bgl-slider.odd[data-v-98e36ac5] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 2) * 1%);
 }
-.bgl-slider.slides-1[data-v-ca63f224] {
+.bgl-slider.slides-1[data-v-98e36ac5] {
 	grid-auto-columns: 100%;
 	gap: 0;
 }
-.bgl-slider[data-v-ca63f224]::-webkit-scrollbar {
+.bgl-slider[data-v-98e36ac5]::-webkit-scrollbar {
 	display: none;
 }
-.bgl-slider[data-v-ca63f224] * {
+.bgl-slider[data-v-98e36ac5] * {
 	scroll-snap-align: start;
 }
-.dragging.bgl-slider[data-v-ca63f224] {
+.dragging.bgl-slider[data-v-98e36ac5] {
 	cursor: grabbing;
 	cursor: -webkit-grabbing;
 	scroll-snap-type: unset;
 }
-.clicking.bgl-slider[data-v-ca63f224] {
+.clicking.bgl-slider[data-v-98e36ac5] {
 	scroll-behavior: unset;
 }
-.dragging.bgl-slider[data-v-ca63f224] * {
+.dragging.bgl-slider[data-v-98e36ac5] * {
 	scroll-snap-align: unset;
 	user-select: none;
 }
 @media screen and (max-width: 600px) {
-.bgl-slider.slides-1[data-v-ca63f224]> * {
+.bgl-slider.slides-1[data-v-98e36ac5]> * {
 		margin-inline-start: 0%;
 }
 }
@@ -706,7 +706,7 @@ data[data-v-6c27f163] {
 }
 }
 
-.fileUploadWrap[data-v-963c1a6d] {
+.fileUploadWrap[data-v-c2732102] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -718,7 +718,7 @@ data[data-v-6c27f163] {
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-963c1a6d] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-c2732102] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -726,14 +726,14 @@ data[data-v-6c27f163] {
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-963c1a6d],
-.fileUploadWrap[data-v-963c1a6d]:hover {
+.fileUploadWrap.dragover[data-v-c2732102],
+.fileUploadWrap[data-v-c2732102]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-963c1a6d] {
+.fileUploadWrap[style*="height: auto;"][data-v-c2732102] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-963c1a6d] {
+.multi-image-item-preview[data-v-c2732102] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -747,12 +747,12 @@ data[data-v-6c27f163] {
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-963c1a6d] {
+.multi-image-item-preview p[data-v-c2732102] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-963c1a6d]{
+.multi-preview[data-v-c2732102]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -763,17 +763,17 @@ data[data-v-6c27f163] {
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-963c1a6d]{
+.bgl-single-preview[data-v-c2732102]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-963c1a6d]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-c2732102]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-963c1a6d] {
+.single-image-item-preview[data-v-c2732102] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -781,13 +781,13 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-963c1a6d] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-c2732102] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-963c1a6d] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-c2732102] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-963c1a6d]{
+.single-preview[data-v-c2732102]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -796,7 +796,7 @@ data[data-v-6c27f163] {
 	object-fit: cover;
 	background: var(--bgl-gray-light);
 }
-.single-image-item-preview[data-v-963c1a6d]:hover::after{
+.single-image-item-preview[data-v-c2732102]:hover::after{
 	content: "zoom_in";
 	font-size: 32px;
 	font-family: "Material Symbols Outlined", serif;
@@ -806,20 +806,20 @@ data[data-v-6c27f163] {
 	z-index: 9;
 	pointer-events: none;
 }
-.single-image-item-preview:hover img[data-v-963c1a6d]{
+.single-image-item-preview:hover img[data-v-c2732102]{
 	filter: brightness(70%);
 }
-.bgl_fill-image.single-image-item-preview[data-v-963c1a6d] {
+.bgl_fill-image.single-image-item-preview[data-v-c2732102] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-963c1a6d]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-c2732102]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-963c1a6d] {
+.single-image-item-preview .pie[data-v-c2732102] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -833,31 +833,31 @@ data[data-v-6c27f163] {
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-963c1a6d] {
+.bgl_oval-upload[data-v-c2732102] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-963c1a6d] {
+.bgl_oval-upload p[data-v-c2732102] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-963c1a6d]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-c2732102]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-963c1a6d] {
+.bgl_oval-upload .pie[data-v-c2732102] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-963c1a6d] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-c2732102] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-963c1a6d]{
+.bgl_oval-upload .single-image-item-preview[data-v-c2732102]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-963c1a6d] {
+.bgl_oval-upload .single-preview[data-v-c2732102] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-963c1a6d] {
+.pie[data-v-c2732102] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -865,7 +865,7 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-963c1a6d]:before {
+.pie[data-v-c2732102]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -883,26 +883,26 @@ data[data-v-6c27f163] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-963c1a6d] {
+.pie .success[data-v-c2732102] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-963c1a6d] {
+.pie .progress[data-v-c2732102] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-963c1a6d] {
+.pie.complete .progress[data-v-c2732102] {
 	display: none;
 }
-.pie.complete .success[data-v-963c1a6d] {
+.pie.complete .success[data-v-c2732102] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-963c1a6d]:before {
+.pie.complete[data-v-c2732102]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-963c1a6d] {
+.pie.complete[data-v-c2732102] {
 	color: var(--bgl-green);
 }
 
@@ -3488,19 +3488,19 @@ tbody tr[data-v-d8ca38b1]:hover {
   -moz-user-drag: none;
 }
 
-.lightbox-image[data-v-f5f9581d]{
+.lightbox-image[data-v-6ceb84fe]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-f5f9581d] {
+.bgl-lightbox-overlay[data-v-6ceb84fe] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-f5f9581d] {
+.bgl-lightbox[data-v-6ceb84fe] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-f5f9581d]{
-	animation: 500ms ease bgl-lightbox-load-f5f9581d;
+.bgl-lightbox-item[data-v-6ceb84fe]{
+	animation: 500ms ease bgl-lightbox-load-6ceb84fe;
 }
-@keyframes bgl-lightbox-load-f5f9581d {
+@keyframes bgl-lightbox-load-6ceb84fe {
 from {
     scale:0.7;
 }
@@ -3508,35 +3508,38 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-f5f9581d] * {
+.bgl-lightbox-item[data-v-6ceb84fe] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-f5f9581d;
+	animation: 200ms ease bgl-lightbox-load-6ceb84fe;
 }
-.navigation[data-v-f5f9581d] {
+.navigation[data-v-6ceb84fe] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-f5f9581d] {
+.navigation-btn[data-v-6ceb84fe] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-f5f9581d] {
+.thumbnail[data-v-6ceb84fe] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-f5f9581d]:hover {
+.thumbnail[data-v-6ceb84fe]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-f5f9581d]:active {
+.thumbnail[data-v-6ceb84fe]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-f5f9581d] {
+.thumbnail.active[data-v-6ceb84fe] {
 	opacity: 1;
 	outline: 2px solid white;
 }
+.file-info[data-v-6ceb84fe]{
+	min-width: 180px
+}
 
 
 .grid {

package/package.json

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

package/src/components/Carousel.vue

@@ -38,13 +38,22 @@ function disableDrag() {
 	})
 }
 
-function updateHeight() {
-	if (!props.autoHeight || !bglSlider) return
-	setTimeout(() => {
-		const children = Array.from(bglSlider.children[activeSlideIndex].children)
+function calcHeight() {
+	if (!bglSlider) return
+	try {
+		const slide = bglSlider.children[activeSlideIndex]
+		if (!slide) return
+		const children = Array.from(slide.children)
 		const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
 		yHeight = `${totalHeight}px`
-	}, 200)
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+function updateHeight() {
+	if (!props.autoHeight) return
+	setTimeout(calcHeight, 200)
 }
 
 function easeScroll(target: number, duration = 500) {

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

@@ -249,9 +249,10 @@ function drop(e: DragEvent) {
 					<div
 						v-for="file in storageFiles"
 						:key="file.id"
+						v-lightbox="{ src: file.url, download: true }"
 						class="multi-image-item-preview"
 					>
-						<img v-if="isImage(file.extension || file.url)" v-lightbox class="multi-preview" :src="file.url" alt="">
+						<img v-if="isImage(file.extension || file.url)" class="multi-preview" :src="file.url" alt="">
 						<Icon v-else icon="draft" class="multi-preview" />
 						<p class="m-0">
 							{{ file.name }}
@@ -306,7 +307,7 @@ function drop(e: DragEvent) {
 						:class="{ 'bgl_fill-image': fill }"
 					>
 						<div v-if="isImage(file.extension || file.url)" class="h-100">
-							<img v-lightbox class="single-preview" :src="file.url" alt="">
+							<img v-lightbox="{ src: file.url, download: true }" class="single-preview" :src="file.url" alt="">
 							<div class="position-start m-05 flex opacity-7">
 								<Btn v-tooltip="'Delete'" color="gray" thin icon="delete" @click.stop="removeFile(file)" />
 								<Btn
@@ -322,7 +323,7 @@ function drop(e: DragEvent) {
 								/>
 							</div>
 						</div>
-						<Icon v-else :size="4" weight="2" icon="draft" class="color-primary w-100" />
+						<Icon v-else v-lightbox="{ src: file.url, download: true }" :size="4" weight="2" icon="draft" class="color-primary w-100" />
 					</div>
 
 					<div

package/src/components/lightbox/Lightbox.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { LightboxItem } from './lightbox.types'
 import { BglVideo, Btn, Icon, Zoomer } from '@bagelink/vue'
-import { watch } from 'vue'
 
-import type { LightboxItem } from './lightbox.types'
+import { watch } from 'vue'
 
 let isOpen = $ref(false)
 let currentItem = $ref<LightboxItem>()
@@ -78,7 +78,7 @@ defineExpose({ open, close })
 	<transition name="fade">
 		<div
 			v-if="isOpen"
-			class="bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-999 inset mx-auto"
+			class="bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-9999 inset mx-auto"
 			@keydown.esc="close"
 			@keydown.left="prev"
 			@keydown.right="next"
@@ -98,7 +98,7 @@ defineExpose({ open, close })
 				/>
 			</div>
 			<div class="bgl-lightbox relative txt-center" @click.stop>
-				<div class="flex start fixed top-1 w-100 space-between start-1">
+				<div class="flex start fixed top-1 w-100 space-between px-1">
 					<Btn flat class="color-white" icon="close" @click="close" />
 					<div v-if="currentItem?.enableZoom && currentItem?.type === 'image'" class="center">
 						<Btn flat class="color-white" icon="remove" :disabled="zoom === 1" @click="zoom--" />
@@ -144,10 +144,18 @@ defineExpose({ open, close })
 						>
 					</template>
 					<template v-else>
-						<div class="file-info txt-white">
-							<p>File: {{ currentItem?.name }}</p>
-							<p>Type: {{ currentItem?.type }}</p>
-							<a :href="currentItem?.src" target="_blank">Open file</a>
+						<div class="file-info txt-white flex align-items-start gap-1">
+							<Icon class="m-0" icon="draft" :size="3" />
+							<div class="txt-start">
+								<p class="m-0">
+									File: {{ currentItem?.name }}
+								</p>
+								<p class="m-0">
+									Type: {{ currentItem?.type }}
+								</p>
+								<Btn :href="currentItem?.src" target="_blank" round thin class="mt-1" value="Open file" />
+								<!-- <a :href="currentItem?.src" target="_blank">Open file</a> -->
+							</div>
 						</div>
 					</template>
 				</div>
@@ -244,4 +252,7 @@ defineExpose({ open, close })
 	opacity: 1;
 	outline: 2px solid white;
 }
+.file-info{
+	min-width: 180px
+}
 </style>

package/src/components/lightbox/index.ts

@@ -52,19 +52,26 @@ function bindingToItem(binding: DirectiveBinding, el: HTMLElement): LightboxItem
 	let { group, src, type, name, thumbnail, enableZoom, openFile, download } = binding.value || {}
 	src = src || binding.value || el.getAttribute('src') || ''
 	type = type || determineFileType(src)
+	name = name || urlToName(src) || el.getAttribute('alt') || ''
 	return { src, type, name, thumbnail, group, enableZoom,	openFile, download }
 }
 
 const youtubeRegex = /youtube\.com|youtu\.be/
 const vimeoRegex = /vimeo\.com/
 
+function urlToName(url: string): string {
+	if (!url) return ''
+	const name = url.split('/').pop() || ''
+	return name.replace(/\.[^/.]+$/, '')
+}
+
 function determineFileType(url: string): string {
 	if (!url) return 'unknown'
 	const extension = (url.split('.').pop() || '').toLowerCase()
 	if (IMAGE_FORMATS_REGEXP.test(extension)) return 'image'
 	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) return 'video'
 	if (['pdf'].includes(extension)) return 'pdf'
-	return 'unknown'
+	return extension ?? 'unknown'
 }
 
 let lightboxInstance: InstanceType<typeof Lightbox> | undefined