@bagelink/vue 0.0.1232 → 0.0.1234

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

@@ -1 +1 @@
-{"version":3,"file":"Image.vue.d.ts","sourceRoot":"","sources":["../../src/components/Image.vue"],"names":[],"mappings":"AA+JA,UAAU,UAAU;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,QAAQ,EAAE,GAAG,CAAA;KACb;CACD;;AAkMD,wBAMG"}
+{"version":3,"file":"Image.vue.d.ts","sourceRoot":"","sources":["../../src/components/Image.vue"],"names":[],"mappings":"AA0JA,UAAU,UAAU;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,QAAQ,EAAE,GAAG,CAAA;KACb;CACD;;AA6LD,wBAMG"}

package/dist/components/form/inputs/Upload/UploadInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInput.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/Upload/UploadInput.vue"],"names":[],"mappings":"AAmYA,KAAK,WAAW,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAA;CAEvB,CAAC;AAmEF,iBAAS,MAAM,SAYd;AA0CD,iBAAS,cAAc;WA6gBT,OAAO,IAA6B;;;;;;;;;;;;;;;;;;;;;;YAXtB,GAAG;;;;;;;;;;;;;;;;;;;;;;YACI,GAAG;;;;EAerC;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;YAjrBX,MAAM,GAAG,MAAM;WAIhB,UAAU,GAAG,OAAO;YACnB,MAAM;wFAqrBd,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"UploadInput.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/Upload/UploadInput.vue"],"names":[],"mappings":"AAiYA,KAAK,WAAW,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAA;CAEvB,CAAC;AAiEF,iBAAS,MAAM,SAYd;AA0CD,iBAAS,cAAc;WA6gBT,OAAO,IAA6B;;;;;;;;;;;;;;;;;;;;;;YAXtB,GAAG;;;;;;;;;;;;;;;;;;;;;;YACI,GAAG;;;;EAerC;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;YA/qBX,MAAM,GAAG,MAAM;WAIhB,UAAU,GAAG,OAAO;YACnB,MAAM;wFAmrBd,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,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":"AAgRA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAUpD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAK5D;AAED,iBAAS,KAAK,SAGb;;;;;AAsjBD,wBAOG"}
+{"version":3,"file":"Lightbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.vue"],"names":[],"mappings":"AAgRA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAUpD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAK5D;AAED,iBAAS,KAAK,SAGb;;;;;AAojBD,wBAOG"}

package/dist/index.cjs

@@ -35949,8 +35949,6 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     const bagel = useBagel();
     files.setBaseUrl(bagel.host);
-    const fileBaseUrl = vue.computed(() => (props2.baseURL || bagel.fileBaseUrl || "https://files.bagel.design").replace(/\/$/, ""));
-    const pathToUrl = (path_key) => `${fileBaseUrl.value}/${path_key}`;
     const fileQueue = vue.ref([]);
     let storageFiles = vue.ref([]);
     const pk = vue.ref([props2.modelValue].flat().filter(Boolean));
@@ -36079,7 +36077,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                     icon: "download",
                     flat: "",
                     thin: "",
-                    href: pathToUrl(path_key),
+                    href: vue.unref(pathKeyToURL)(path_key),
                     download: path_key.split("/").pop()
                   }, null, 8, ["href", "download"]),
                   vue.createElementVNode("div", _hoisted_5$4, [
@@ -36090,7 +36088,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                     vue.withDirectives((vue.openBlock(), vue.createElementBlock("p", _hoisted_6$4, [
                       vue.createTextVNode(vue.toDisplayString(path_key.split("/").pop()), 1)
                     ])), [
-                      [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                      [_directive_lightbox, { src: vue.unref(pathKeyToURL)(path_key), download: true }]
                     ])
                   ])
                 ])
@@ -36140,7 +36138,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                     onClick: ($event) => removeFile(path_key)
                   }, null, 8, ["onClick"])
                 ], 2)), [
-                  [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                  [_directive_lightbox, { src: vue.unref(pathKeyToURL)(path_key), download: true }]
                 ]);
               }), 128)),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fileQueue.value, (file) => {
@@ -36198,7 +36196,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                       color: "gray",
                       thin: "",
                       icon: "download",
-                      href: pathToUrl(path_key),
+                      href: vue.unref(pathKeyToURL)(path_key),
                       download: path_key.split("/").pop()
                     }, null, 8, ["href", "download"]), [
                       [_directive_tooltip, "Download"]
@@ -36210,7 +36208,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                       pathKey: path_key,
                       alt: ""
                     }, null, 8, ["pathKey"]), [
-                      [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                      [_directive_lightbox, { src: vue.unref(pathKeyToURL)(path_key), download: true }]
                     ])
                   ])) : vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$r), {
                     key: 1,
@@ -36219,7 +36217,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                     icon: "description",
                     class: "color-primary w-100"
                   }, null, 512)), [
-                    [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                    [_directive_lightbox, { src: vue.unref(pathKeyToURL)(path_key), download: true }]
                   ])
                 ], 2);
               }), 128)),
@@ -36266,7 +36264,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-d65d0a87"]]);
+const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-fcdea419"]]);
 const FONT_AWESOME_ICONS = [
   "trash-can",
   "message",
@@ -40804,15 +40802,10 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     const props2 = __props;
     let imageSrc = vue.ref(null);
     let loadingError = vue.ref(false);
-    const fileBaseUrl = vue.computed(() => "https://files.bagel.design");
     function getImageUrl() {
-      var _a2;
       if (!props2.src && !props2.pathKey) return null;
       if (props2.src) return props2.src;
-      if ((_a2 = props2.pathKey) == null ? void 0 : _a2.startsWith("static/")) {
-        return `${void 0}/${props2.pathKey}`;
-      }
-      return `${fileBaseUrl.value}/${props2.pathKey}`;
+      return pathKeyToURL(props2.pathKey);
     }
     async function getCachedImage(url) {
       if (!("caches" in window)) return null;
@@ -40911,7 +40904,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-6f277b5b"]]);
+const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-1cec7fb3"]]);
 const _hoisted_1$i = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
@@ -43549,14 +43542,14 @@ class BagelAuth {
   }
 }
 class Bagel {
-  constructor({ host, fileBaseUrl, onError }) {
+  constructor({ host, fileBaseUrl: fileBaseUrl2, onError }) {
     __publicField(this, "host");
     __publicField(this, "fileBaseUrl");
     __publicField(this, "onError");
     __publicField(this, "read_table");
     __publicField(this, "auth", new BagelAuth(this));
     this.host = host == null ? void 0 : host.replace(/\/$/, "");
-    this.fileBaseUrl = fileBaseUrl == null ? void 0 : fileBaseUrl.replace(/\/$/, "");
+    this.fileBaseUrl = fileBaseUrl2 == null ? void 0 : fileBaseUrl2.replace(/\/$/, "");
     if (!this.host) {
       return this;
     }
@@ -43835,10 +43828,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                             vue.createVNode(vue.unref(Image$1), {
                               draggable: false,
                               src: item == null ? void 0 : item.src,
-                              pathKey: item == null ? void 0 : item.pathKey,
                               alt: "Preview",
                               class: "vw90 lightbox-image"
-                            }, null, 8, ["src", "pathKey"])
+                            }, null, 8, ["src"])
                           ]),
                           _: 2
                         }, 1032, ["zoom", "disabled"])) : (item == null ? void 0 : item.type) === "video" && (item == null ? void 0 : item.src) ? (vue.openBlock(), vue.createBlock(vue.unref(BglVideo), {
@@ -43919,7 +43911,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-194584ac"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a5e1d29b"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {
@@ -43961,8 +43953,8 @@ function openClickHandler(e, el, binding) {
   open(item, group);
 }
 function bindingToItem(binding, el) {
-  let { group, src, type: type3, name, thumbnail, enableZoom, openFile, download } = binding.value || {};
-  src = src || binding.value || el.getAttribute("src") || "";
+  let { group, src, type: type3, name, thumbnail, enableZoom, openFile, download, pathKey } = binding.value || {};
+  src = src || pathKeyToURL(pathKey) || 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 };
@@ -44509,6 +44501,14 @@ function normalizeDimension(value, defaultMetric = "px") {
   if (typeof value === "number") return `${value}${defaultMetric}`;
   return value;
 }
+const fileBaseUrl = "https://files.bagel.design".replace(/\/$/, "");
+const bagelBaseUrl = void 0;
+function pathKeyToURL(pathKey) {
+  if (pathKey.startsWith("static/")) {
+    return `${bagelBaseUrl}/${pathKey}`;
+  }
+  return `${fileBaseUrl}/${pathKey}`;
+}
 const clickOutside = {
   beforeMount(el, binding) {
     el.clickOutsideEvent = (event) => {
@@ -45135,6 +45135,7 @@ exports.keyToLabel = keyToLabel;
 exports.localRef = localRef;
 exports.normalizeDimension = normalizeDimension;
 exports.normalizeURL = normalizeURL;
+exports.pathKeyToURL = pathKeyToURL;
 exports.provideBagelFormState = provideBagelFormState;
 exports.sleep = sleep;
 exports.slugify = slugify;

package/dist/index.mjs

@@ -35947,8 +35947,6 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const bagel = useBagel();
     files.setBaseUrl(bagel.host);
-    const fileBaseUrl = computed(() => (props2.baseURL || bagel.fileBaseUrl || "https://files.bagel.design").replace(/\/$/, ""));
-    const pathToUrl = (path_key) => `${fileBaseUrl.value}/${path_key}`;
     const fileQueue = ref([]);
     let storageFiles = ref([]);
     const pk = ref([props2.modelValue].flat().filter(Boolean));
@@ -36077,7 +36075,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                     icon: "download",
                     flat: "",
                     thin: "",
-                    href: pathToUrl(path_key),
+                    href: unref(pathKeyToURL)(path_key),
                     download: path_key.split("/").pop()
                   }, null, 8, ["href", "download"]),
                   createElementVNode("div", _hoisted_5$4, [
@@ -36088,7 +36086,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                     withDirectives((openBlock(), createElementBlock("p", _hoisted_6$4, [
                       createTextVNode(toDisplayString(path_key.split("/").pop()), 1)
                     ])), [
-                      [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                      [_directive_lightbox, { src: unref(pathKeyToURL)(path_key), download: true }]
                     ])
                   ])
                 ])
@@ -36138,7 +36136,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                     onClick: ($event) => removeFile(path_key)
                   }, null, 8, ["onClick"])
                 ], 2)), [
-                  [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                  [_directive_lightbox, { src: unref(pathKeyToURL)(path_key), download: true }]
                 ]);
               }), 128)),
               (openBlock(true), createElementBlock(Fragment, null, renderList(fileQueue.value, (file) => {
@@ -36196,7 +36194,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                       color: "gray",
                       thin: "",
                       icon: "download",
-                      href: pathToUrl(path_key),
+                      href: unref(pathKeyToURL)(path_key),
                       download: path_key.split("/").pop()
                     }, null, 8, ["href", "download"]), [
                       [_directive_tooltip, "Download"]
@@ -36208,7 +36206,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                       pathKey: path_key,
                       alt: ""
                     }, null, 8, ["pathKey"]), [
-                      [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                      [_directive_lightbox, { src: unref(pathKeyToURL)(path_key), download: true }]
                     ])
                   ])) : withDirectives((openBlock(), createBlock(unref(_sfc_main$r), {
                     key: 1,
@@ -36217,7 +36215,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                     icon: "description",
                     class: "color-primary w-100"
                   }, null, 512)), [
-                    [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                    [_directive_lightbox, { src: unref(pathKeyToURL)(path_key), download: true }]
                   ])
                 ], 2);
               }), 128)),
@@ -36264,7 +36262,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-d65d0a87"]]);
+const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-fcdea419"]]);
 const FONT_AWESOME_ICONS = [
   "trash-can",
   "message",
@@ -40802,15 +40800,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const props2 = __props;
     let imageSrc = ref(null);
     let loadingError = ref(false);
-    const fileBaseUrl = computed(() => "https://files.bagel.design");
     function getImageUrl() {
-      var _a2;
       if (!props2.src && !props2.pathKey) return null;
       if (props2.src) return props2.src;
-      if ((_a2 = props2.pathKey) == null ? void 0 : _a2.startsWith("static/")) {
-        return `${void 0}/${props2.pathKey}`;
-      }
-      return `${fileBaseUrl.value}/${props2.pathKey}`;
+      return pathKeyToURL(props2.pathKey);
     }
     async function getCachedImage(url) {
       if (!("caches" in window)) return null;
@@ -40909,7 +40902,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-6f277b5b"]]);
+const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-1cec7fb3"]]);
 const _hoisted_1$i = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "BottomMenu",
@@ -43547,14 +43540,14 @@ class BagelAuth {
   }
 }
 class Bagel {
-  constructor({ host, fileBaseUrl, onError }) {
+  constructor({ host, fileBaseUrl: fileBaseUrl2, onError }) {
     __publicField(this, "host");
     __publicField(this, "fileBaseUrl");
     __publicField(this, "onError");
     __publicField(this, "read_table");
     __publicField(this, "auth", new BagelAuth(this));
     this.host = host == null ? void 0 : host.replace(/\/$/, "");
-    this.fileBaseUrl = fileBaseUrl == null ? void 0 : fileBaseUrl.replace(/\/$/, "");
+    this.fileBaseUrl = fileBaseUrl2 == null ? void 0 : fileBaseUrl2.replace(/\/$/, "");
     if (!this.host) {
       return this;
     }
@@ -43833,10 +43826,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             createVNode(unref(Image$1), {
                               draggable: false,
                               src: item == null ? void 0 : item.src,
-                              pathKey: item == null ? void 0 : item.pathKey,
                               alt: "Preview",
                               class: "vw90 lightbox-image"
-                            }, null, 8, ["src", "pathKey"])
+                            }, null, 8, ["src"])
                           ]),
                           _: 2
                         }, 1032, ["zoom", "disabled"])) : (item == null ? void 0 : item.type) === "video" && (item == null ? void 0 : item.src) ? (openBlock(), createBlock(unref(BglVideo), {
@@ -43917,7 +43909,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-194584ac"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a5e1d29b"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {
@@ -43959,8 +43951,8 @@ function openClickHandler(e, el, binding) {
   open(item, group);
 }
 function bindingToItem(binding, el) {
-  let { group, src, type: type3, name, thumbnail, enableZoom, openFile, download } = binding.value || {};
-  src = src || binding.value || el.getAttribute("src") || "";
+  let { group, src, type: type3, name, thumbnail, enableZoom, openFile, download, pathKey } = binding.value || {};
+  src = src || pathKeyToURL(pathKey) || 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 };
@@ -44507,6 +44499,14 @@ function normalizeDimension(value, defaultMetric = "px") {
   if (typeof value === "number") return `${value}${defaultMetric}`;
   return value;
 }
+const fileBaseUrl = "https://files.bagel.design".replace(/\/$/, "");
+const bagelBaseUrl = void 0;
+function pathKeyToURL(pathKey) {
+  if (pathKey.startsWith("static/")) {
+    return `${bagelBaseUrl}/${pathKey}`;
+  }
+  return `${fileBaseUrl}/${pathKey}`;
+}
 const clickOutside = {
   beforeMount(el, binding) {
     el.clickOutsideEvent = (event) => {
@@ -45134,6 +45134,7 @@ export {
   localRef,
   normalizeDimension,
   normalizeURL,
+  pathKeyToURL,
   provideBagelFormState,
   sleep,
   slugify,

package/dist/style.css

@@ -2454,7 +2454,7 @@ line-height: 1.65;
 .bgl-toggle input:checked + label[data-v-ebe691ee] {
     color: var(--bgl-primary) !important;
 }
-.fileUploadWrap[data-v-d65d0a87] {
+.fileUploadWrap[data-v-fcdea419] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -2466,7 +2466,7 @@ line-height: 1.65;
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-d65d0a87] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-fcdea419] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -2474,14 +2474,14 @@ line-height: 1.65;
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-d65d0a87],
-.fileUploadWrap[data-v-d65d0a87]:hover {
+.fileUploadWrap.dragover[data-v-fcdea419],
+.fileUploadWrap[data-v-fcdea419]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*='height: auto;'][data-v-d65d0a87] {
+.fileUploadWrap[style*='height: auto;'][data-v-fcdea419] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-d65d0a87] {
+.multi-image-item-preview[data-v-fcdea419] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -2495,12 +2495,12 @@ line-height: 1.65;
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-d65d0a87] {
+.multi-image-item-preview p[data-v-fcdea419] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-d65d0a87] {
+.multi-preview[data-v-fcdea419] {
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -2511,17 +2511,17 @@ line-height: 1.65;
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-d65d0a87] {
+.bgl-single-preview[data-v-fcdea419] {
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-d65d0a87] {
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-fcdea419] {
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-d65d0a87] {
+.single-image-item-preview[data-v-fcdea419] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -2529,13 +2529,13 @@ line-height: 1.65;
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-d65d0a87] {
+.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-fcdea419] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*='height: auto'] .single-preview[data-v-d65d0a87] {
+.fileUploadWrap[style*='height: auto'] .single-preview[data-v-fcdea419] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-d65d0a87] {
+.single-preview[data-v-fcdea419] {
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -2545,7 +2545,7 @@ line-height: 1.65;
 	background: var(--bgl-gray-light);
 	width: 90%;
 }
-.single-image-item-preview[data-v-d65d0a87]:hover::after {
+.single-image-item-preview[data-v-fcdea419]:hover::after {
 	content: 'zoom_in';
 	font-size: 32px;
 	font-family: 'Material Symbols Outlined', serif;
@@ -2555,20 +2555,20 @@ line-height: 1.65;
 	z-index: 9;
 	pointer-events: none;
 }
-.single-image-item-preview:hover img[data-v-d65d0a87] {
+.single-image-item-preview:hover img[data-v-fcdea419] {
 	filter: brightness(70%);
 }
-.bgl_fill-image.single-image-item-preview[data-v-d65d0a87] {
+.bgl_fill-image.single-image-item-preview[data-v-fcdea419] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-d65d0a87] {
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-fcdea419] {
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-d65d0a87] {
+.single-image-item-preview .pie[data-v-fcdea419] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -2582,31 +2582,31 @@ line-height: 1.65;
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-d65d0a87] {
+.bgl_oval-upload[data-v-fcdea419] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-d65d0a87] {
+.bgl_oval-upload p[data-v-fcdea419] {
 	padding: 0.75rem !important;
 	font-size: 12px;
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-d65d0a87] {
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-fcdea419] {
 	top: 0;
 }
-.bgl_oval-upload .pie[data-v-d65d0a87] {
+.bgl_oval-upload .pie[data-v-fcdea419] {
 	transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-d65d0a87] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-fcdea419] {
 	transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-d65d0a87] {
+.bgl_oval-upload .single-image-item-preview[data-v-fcdea419] {
 	height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-d65d0a87] {
+.bgl_oval-upload .single-preview[data-v-fcdea419] {
 	margin: 0;
 	height: 100% !important;
 }
-.pie[data-v-d65d0a87] {
+.pie[data-v-fcdea419] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -2614,7 +2614,7 @@ line-height: 1.65;
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-d65d0a87]:before {
+.pie[data-v-fcdea419]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -2632,26 +2632,26 @@ line-height: 1.65;
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-d65d0a87] {
+.pie .success[data-v-fcdea419] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-d65d0a87] {
+.pie .progress[data-v-fcdea419] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-d65d0a87] {
+.pie.complete .progress[data-v-fcdea419] {
 	display: none;
 }
-.pie.complete .success[data-v-d65d0a87] {
+.pie.complete .success[data-v-fcdea419] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-d65d0a87]:before {
+.pie.complete[data-v-fcdea419]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-d65d0a87] {
+.pie.complete[data-v-fcdea419] {
 	color: var(--bgl-green);
 }
 
@@ -2663,13 +2663,13 @@ line-height: 1.65;
 	transform: rotateY(180deg) !important;
 }
 
-.img-web-kit[data-v-6f277b5b] {
+.img-web-kit[data-v-1cec7fb3] {
 	max-width: 100%;
 	vertical-align: middle;
 	border: 0;
 	width: 100%;
 }
-.error-image[data-v-6f277b5b] {
+.error-image[data-v-1cec7fb3] {
 	background-color: var(--skeleton-bg);
 }
 
@@ -4430,19 +4430,19 @@ body:has(.bg-dark.is-active) {
   -moz-user-drag: none;
 }
 
-.lightbox-image[data-v-194584ac]{
+.lightbox-image[data-v-a5e1d29b]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-194584ac] {
+.bgl-lightbox-overlay[data-v-a5e1d29b] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-194584ac] {
+.bgl-lightbox[data-v-a5e1d29b] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-194584ac]{
-	animation: 500ms ease bgl-lightbox-load-194584ac;
+.bgl-lightbox-item[data-v-a5e1d29b]{
+	animation: 500ms ease bgl-lightbox-load-a5e1d29b;
 }
-@keyframes bgl-lightbox-load-194584ac {
+@keyframes bgl-lightbox-load-a5e1d29b {
 from {
     scale:0.7;
 }
@@ -4450,44 +4450,44 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-194584ac] * {
+.bgl-lightbox-item[data-v-a5e1d29b] * {
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-194584ac;
+	animation: 200ms ease bgl-lightbox-load-a5e1d29b;
 	transition: max-height 200ms ease;
 }
-.bgl-lightbox-item.zoomed[data-v-194584ac] * {
+.bgl-lightbox-item.zoomed[data-v-a5e1d29b] * {
 	max-height: calc(100vh - 90px);
 	height: calc(100vh - 90px);
 }
-.navigation[data-v-194584ac] {
+.navigation[data-v-a5e1d29b] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.thumbnail[data-v-194584ac] {
+.thumbnail[data-v-a5e1d29b] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-194584ac]:hover {
+.thumbnail[data-v-a5e1d29b]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-194584ac]:active {
+.thumbnail[data-v-a5e1d29b]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-194584ac] {
+.thumbnail.active[data-v-a5e1d29b] {
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info[data-v-194584ac]{
+.file-info[data-v-a5e1d29b]{
 	max-width: 420px
 }
 @media screen and (max-width: 910px) {
-.file-info[data-v-194584ac]{
+.file-info[data-v-a5e1d29b]{
 	max-width: 220px;
 	text-align: center !important;
 }
-.file-info[data-v-194584ac] *{
+.file-info[data-v-a5e1d29b] *{
 	text-align: center !important;
 	margin-inline: 0 !important;;
 	max-width: 100% !important;

package/dist/utils/index.d.ts

@@ -26,4 +26,5 @@ export * as bagelFormUtils from './BagelFormUtils';
 export { useLang } from './lang';
 export { formatString } from './strings';
 export { useDebounceFn } from '@vueuse/core';
+export declare function pathKeyToURL(pathKey: string): string;
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,UAK3C"}

package/package.json

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

package/src/components/Image.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Skeleton, normalizeDimension, appendScript, normalizeURL, Icon } from '@bagelink/vue'
-import { watch, computed } from 'vue'
+import { Skeleton, normalizeDimension, appendScript, normalizeURL, Icon, pathKeyToURL } from '@bagelink/vue'
+import { watch } from 'vue'
 
 interface ImageProps {
 	src?: string
@@ -22,15 +22,10 @@ const props = defineProps<ImageProps>()
 let imageSrc = $ref<string | null>(null)
 let loadingError = $ref(false)
 
-const fileBaseUrl = computed(() => 'https://files.bagel.design')
-
 function getImageUrl(): string | null {
 	if (!props.src && !props.pathKey) return null
 	if (props.src) return props.src
-	if (props.pathKey?.startsWith('static/')) {
-		return `${import.meta.env.VITE_BAGEL_BASE_URL}/${props.pathKey}`
-	}
-	return `${fileBaseUrl.value}/${props.pathKey}`
+	return pathKeyToURL(props.pathKey)
 }
 
 async function getCachedImage(url: string): Promise<string | null> {

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BglFile, QueueFile } from './upload.types'
-import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image } from '@bagelink/vue'
+import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image, pathKeyToURL } from '@bagelink/vue'
 import { watch } from 'vue'
 import { files } from './upload'
 
@@ -33,8 +33,6 @@ const bagel = useBagel()
 
 files.setBaseUrl(bagel.host)
 
-const fileBaseUrl = $computed(() => (props.baseURL || bagel.fileBaseUrl || 'https://files.bagel.design').replace(/\/$/, ''))
-const pathToUrl = (path_key: string) => `${fileBaseUrl}/${path_key}`
 const fileQueue = $ref<QueueFile[]>([])
 let storageFiles = $ref<BglFile[]>([])
 const pk = $ref<string[]>([props.modelValue].flat().filter(Boolean) as string[])
@@ -184,13 +182,13 @@ watch(() => props.dirPath, () => {
 							icon="download"
 							flat
 							thin
-							:href="pathToUrl(path_key)"
+							:href="pathKeyToURL(path_key)"
 							:download="path_key.split('/').pop()"
 						/>
 						<div class="flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1 ">
 							<Icon icon="draft" :size="1.5" />
 							<p
-								v-lightbox="{ src: pathToUrl(path_key), download: true }"
+								v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
 								class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
 							>
 								{{ path_key.split('/').pop() }}
@@ -227,7 +225,7 @@ watch(() => props.dirPath, () => {
 					<div
 						v-for="path_key in pathKeys"
 						:key="path_key"
-						v-lightbox="{ src: pathToUrl(path_key), download: true }"
+						v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
 						class="multi-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
@@ -308,13 +306,13 @@ watch(() => props.dirPath, () => {
 								color="gray"
 								thin
 								icon="download"
-								:href="pathToUrl(path_key)"
+								:href="pathKeyToURL(path_key)"
 								:download="path_key.split('/').pop()"
 							/>
 						</div>
 						<div v-if="isImage(path_key)" class="h-100">
 							<Image
-								v-lightbox="{ src: pathToUrl(path_key), download: true }"
+								v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
 
 								class="single-preview"
 								:pathKey="path_key"
@@ -323,7 +321,7 @@ watch(() => props.dirPath, () => {
 						</div>
 						<Icon
 							v-else
-							v-lightbox="{ src: pathToUrl(path_key), download: true }"
+							v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
 							:size="4"
 							weight="2"
 							icon="description"

package/src/components/lightbox/Lightbox.vue

@@ -117,7 +117,7 @@ defineExpose({ open, close })
 				<Carousel v-model:index="currentIndex" :items="1" class="bgl-lightbox-item" :class="{ zoomed: zoom > 1 }" :freeDrag="zoom === 1">
 					<template v-for="item in group" :key="item.src">
 						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom" :mouse-wheel-to-zoom="false">
-							<Image :draggable="false" :src="item?.src" :pathKey="item?.pathKey" alt="Preview" class="vw90 lightbox-image" />
+							<Image :draggable="false" :src="item?.src" alt="Preview" class="vw90 lightbox-image" />
 						</Zoomer>
 
 						<BglVideo

package/src/components/lightbox/index.ts

@@ -1,6 +1,6 @@
 import type { App, Directive, DirectiveBinding } from 'vue'
 import type { LightboxItem } from './lightbox.types'
-import { IMAGE_FORMATS_REGEXP, VIDEO_FORMATS_REGEXP } from '@bagelink/vue'
+import { IMAGE_FORMATS_REGEXP, pathKeyToURL, VIDEO_FORMATS_REGEXP } from '@bagelink/vue'
 import { createApp } from 'vue'
 import Lightbox from './Lightbox.vue'
 
@@ -48,8 +48,8 @@ function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBind
 }
 
 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') || ''
+	let { group, src, type, name, thumbnail, enableZoom, openFile, download, pathKey } = binding.value || {}
+	src = src || pathKeyToURL(pathKey) || 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 }

package/src/utils/index.ts

@@ -168,3 +168,13 @@ export { useLang } from './lang'
 
 export { formatString } from './strings'
 export { useDebounceFn } from '@vueuse/core'
+
+const fileBaseUrl = (import.meta.env.VITE_FILE_BASE_URL || 'https://files.bagel.design').replace(/\/$/, '')
+const bagelBaseUrl = import.meta.env.VITE_BAGEL_BASE_URL
+
+export function pathKeyToURL(pathKey: string) {
+	if (pathKey.startsWith('static/')) {
+		return `${bagelBaseUrl}/${pathKey}`
+	}
+	return `${fileBaseUrl}/${pathKey}`
+}