@bagelink/vue 0.0.423 → 0.0.431

package/dist/index.cjs

@@ -4813,94 +4813,6 @@ const clickOutside = {
     document.removeEventListener("click", el.clickOutsideEvent);
   }
 };
-const bagelInjectionKey = Symbol("bagel");
-const i18nTInjectionKey = Symbol("bagel");
-function useBagel() {
-  const bagel = vue.inject(bagelInjectionKey);
-  if (!bagel)
-    throw new Error("No bagel provided");
-  return bagel;
-}
-function useI18nT() {
-  const i18nT = vue.inject(i18nTInjectionKey);
-  if (!i18nT)
-    throw new Error("No i18nT provided");
-  return i18nT;
-}
-const BagelVue = {
-  install: (app, options) => {
-    const bagel = new Bagel({ host: options.host, onError: options.onError });
-    app.directive("click-outside", clickOutside);
-    app.use(Gt$1, {
-      themes: {
-        "bgl-theme": {
-          triggers: ["click"],
-          autoHide: true,
-          placement: "bottom"
-        }
-      }
-    });
-    app.config.globalProperties.$bagel = bagel;
-    app.provide(bagelInjectionKey, bagel);
-    app.config.globalProperties.$i18T = (options == null ? void 0 : options.i18nT) || ((key) => key);
-    app.provide(i18nTInjectionKey, (options == null ? void 0 : options.i18nT) || ((key) => key));
-  }
-};
-const ModalSymbol = Symbol("modal");
-const useModal = () => {
-  const modalApi = vue.inject(ModalSymbol);
-  if (!modalApi)
-    throw new Error("Modal API not provided");
-  return modalApi;
-};
-const ModalPlugin = {
-  install: (app) => {
-    const modalStack = vue.ref([]);
-    const hideModal = (index2) => {
-      modalStack.value.splice(index2, 1);
-    };
-    const modalConfirm = (options) => new Promise((resolve) => {
-      if (typeof options === "string")
-        options = { title: options, message: "" };
-      modalStack.value.push({
-        modalOptions: { ...options, resolve },
-        modalType: "confirm",
-        componentSlots: {}
-      });
-    });
-    const showModal = (modalType, options, slots = {}) => {
-      modalStack.value.push({
-        modalOptions: options,
-        modalType,
-        componentSlots: slots
-      });
-      if (modalType === "modalForm")
-        return modalStack.value.at(-1);
-      return modalStack.value.at(-1);
-    };
-    app.provide(ModalSymbol, {
-      showModal: (options, slots) => showModal("modal", options, slots),
-      showModalForm: (options, slots) => showModal("modalForm", options, slots),
-      confirm: (userOptions) => modalConfirm(userOptions),
-      hideModal: (index2 = modalStack.value.length - 1) => hideModal(index2)
-      // modalOptions,
-    });
-    const ModalComponent = vue.defineComponent({
-      data: () => ({ modalStack: modalStack.value }),
-      render() {
-        return modalStack.value.map((modal, index2) => {
-          const props2 = { ...modal.modalOptions, visible: true, "onUpdate:visible": () => hideModal(index2) };
-          if (modal.modalType === "modalForm")
-            return vue.h(ModalForm, props2, modal.componentSlots);
-          if (modal.modalType === "confirm")
-            return vue.h(_sfc_main$n, props2, {});
-          return vue.h(_sfc_main$F, props2, modal.componentSlots);
-        });
-      }
-    });
-    app.component("ModalContainer", ModalComponent);
-  }
-};
 function formatString(str, format2) {
   if (format2 === "titleCase") {
     return str.split("_").map((word) => word[0].toUpperCase() + word.slice(1).toLocaleLowerCase()).join(" ");
@@ -4992,6 +4904,32 @@ const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
   slctField,
   txtField
 }, Symbol.toStringTag, { value: "Module" }));
+const state$1 = vue.reactive({
+  defaultLang: "",
+  availableLangs: [],
+  lang: "en"
+});
+function useLang() {
+  const lang = vue.computed({
+    get: () => state$1.lang,
+    set: (val) => state$1.lang = val
+  });
+  const $tdb = (langEl) => langEl[state$1.lang] || langEl[state$1.defaultLang] || "";
+  const availableLangs = vue.computed({
+    get: () => state$1.availableLangs,
+    set: (val) => state$1.availableLangs = val
+  });
+  const defaultLang = vue.computed({
+    get: () => state$1.defaultLang,
+    set: (val) => state$1.defaultLang = val
+  });
+  return {
+    lang,
+    $tdb,
+    availableLangs,
+    defaultLang
+  };
+}
 let timeout;
 const debounce$2 = (fn2, delay = 500) => {
   clearTimeout(timeout);
@@ -5043,6 +4981,101 @@ const iffer = (field, itemData) => {
   return true;
 };
 const denullify = (itemData, fieldID) => fieldID && itemData ? itemData[fieldID] : null;
+const bagelInjectionKey = Symbol("bagel");
+const i18nTInjectionKey = Symbol("bagel");
+function useBagel() {
+  const bagel = vue.inject(bagelInjectionKey);
+  if (!bagel)
+    throw new Error("No bagel provided");
+  return bagel;
+}
+function useI18nT() {
+  const i18nT = vue.inject(i18nTInjectionKey);
+  if (!i18nT)
+    throw new Error("No i18nT provided");
+  return i18nT;
+}
+const BagelVue = {
+  install: (app, options) => {
+    const bagel = new Bagel({ host: options.host, onError: options.onError });
+    app.directive("click-outside", clickOutside);
+    app.use(Gt$1, {
+      themes: {
+        "bgl-theme": {
+          triggers: ["click"],
+          autoHide: true,
+          placement: "bottom"
+        }
+      }
+    });
+    const { availableLangs, defaultLang, lang } = useLang();
+    if (options.availableLangs)
+      availableLangs.value = options.availableLangs;
+    if (options.defaultLang)
+      defaultLang.value = options.defaultLang;
+    if (options.language)
+      lang.value = options.language;
+    app.config.globalProperties.$bagel = bagel;
+    app.provide(bagelInjectionKey, bagel);
+    app.config.globalProperties.$i18T = (options == null ? void 0 : options.i18nT) || ((key) => key);
+    app.provide(i18nTInjectionKey, (options == null ? void 0 : options.i18nT) || ((key) => key));
+  }
+};
+const ModalSymbol = Symbol("modal");
+const useModal = () => {
+  const modalApi = vue.inject(ModalSymbol);
+  if (!modalApi)
+    throw new Error("Modal API not provided");
+  return modalApi;
+};
+const ModalPlugin = {
+  install: (app) => {
+    const modalStack = vue.ref([]);
+    const hideModal = (index2) => {
+      modalStack.value.splice(index2, 1);
+    };
+    const modalConfirm = (options) => new Promise((resolve) => {
+      if (typeof options === "string")
+        options = { title: options, message: "" };
+      modalStack.value.push({
+        modalOptions: { ...options, resolve },
+        modalType: "confirm",
+        componentSlots: {}
+      });
+    });
+    const showModal = (modalType, options, slots = {}) => {
+      modalStack.value.push({
+        modalOptions: options,
+        modalType,
+        componentSlots: slots
+      });
+      if (modalType === "modalForm")
+        return modalStack.value.at(-1);
+      return modalStack.value.at(-1);
+    };
+    app.provide(ModalSymbol, {
+      showModal: (options, slots) => showModal("modal", options, slots),
+      showModalForm: (options, slots) => showModal("modalForm", options, slots),
+      confirm: (userOptions) => modalConfirm(userOptions),
+      hideModal: (index2 = modalStack.value.length - 1) => hideModal(index2)
+      // modalOptions,
+    });
+    const ModalComponent = vue.defineComponent({
+      data: () => ({ modalStack: modalStack.value }),
+      render() {
+        return modalStack.value.map((modal, index2) => {
+          const props2 = { ...modal.modalOptions, visible: true, "onUpdate:visible": () => hideModal(index2) };
+          if (modal.modalType === "modalForm")
+            return vue.h(ModalForm, props2, modal.componentSlots);
+          if (modal.modalType === "confirm")
+            return vue.h(_sfc_main$n, props2, {});
+          return vue.h(_sfc_main$F, props2, modal.componentSlots);
+        });
+      }
+    });
+    app.component("ModalContainer", ModalComponent);
+  }
+};
 const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   __name: "MaterialIcon",
   props: {
@@ -5271,7 +5304,10 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
 });
 const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-d09a83c5"]]);
 const _hoisted_1$C = { class: "tool-bar" };
-const _hoisted_2$v = { class: "modal-footer mt-3" };
+const _hoisted_2$v = {
+  key: 0,
+  class: "modal-footer mt-3"
+};
 const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "Modal",
   props: {
@@ -5285,6 +5321,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:visible"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props2 = __props;
+    const slots = vue.useSlots();
     let isVisible = vue.ref(false);
     vue.watch(
       () => props2.visible,
@@ -5332,34 +5369,37 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
           }, ["stop"])),
           style: vue.normalizeStyle({ ...maxWidth.value })
         }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("header", _hoisted_1$C, [
-              vue.renderSlot(_ctx.$slots, "toolbar"),
-              vue.createVNode(vue.unref(Btn), {
-                style: vue.normalizeStyle({ float: _ctx.side ? "left" : "right" }),
-                flat: "",
-                icon: "close",
-                onClick: closeModal
-              }, null, 8, ["style"]),
-              _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$t), {
-                key: 0,
-                class: "modal-title",
-                tag: "h3",
-                label: _ctx.title
-              }, null, 8, ["label"])) : vue.createCommentVNode("", true)
-            ]),
-            vue.renderSlot(_ctx.$slots, "default"),
-            vue.createElementVNode("footer", _hoisted_2$v, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.actions, (action, i2) => {
-                return vue.openBlock(), vue.createBlock(vue.unref(Btn), vue.mergeProps({
-                  key: i2,
-                  onClick: closeModal,
-                  color: "gray"
-                }, action), null, 16);
-              }), 128)),
-              vue.renderSlot(_ctx.$slots, "footer")
-            ])
-          ]),
+          default: vue.withCtx(() => {
+            var _a2;
+            return [
+              vue.createElementVNode("header", _hoisted_1$C, [
+                vue.renderSlot(_ctx.$slots, "toolbar"),
+                vue.createVNode(vue.unref(Btn), {
+                  style: vue.normalizeStyle({ float: _ctx.side ? "left" : "right" }),
+                  flat: "",
+                  icon: "close",
+                  onClick: closeModal
+                }, null, 8, ["style"]),
+                _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$t), {
+                  key: 0,
+                  class: "modal-title",
+                  tag: "h3",
+                  label: _ctx.title
+                }, null, 8, ["label"])) : vue.createCommentVNode("", true)
+              ]),
+              vue.renderSlot(_ctx.$slots, "default"),
+              vue.unref(slots)["footer"] || ((_a2 = _ctx.actions) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_2$v, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.actions, (action, i2) => {
+                  return vue.openBlock(), vue.createBlock(vue.unref(Btn), vue.mergeProps({
+                    key: i2,
+                    onClick: closeModal,
+                    color: "gray"
+                  }, action), null, 16);
+                }), 128)),
+                vue.renderSlot(_ctx.$slots, "footer")
+              ])) : vue.createCommentVNode("", true)
+            ];
+          }),
           _: 3
         }, 8, ["style"])
       ], 34);
@@ -5496,11 +5536,15 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     let open = vue.ref(false);
     const accordionState = vue.inject("accordionState");
     const id = props2.id || Math.random().toString(36).substring(7);
-    vue.watch(() => accordionState == null ? void 0 : accordionState.openItem, (currentOpenId) => {
-      if (currentOpenId !== id) {
-        open.value = false;
-      }
-    }, { immediate: true });
+    vue.watch(
+      () => accordionState == null ? void 0 : accordionState.openItem,
+      (currentOpenId) => {
+        if (currentOpenId !== id) {
+          open.value = false;
+        }
+      },
+      { immediate: true }
+    );
     function toggle() {
       open.value = !open.value;
       if (open.value && (accordionState == null ? void 0 : accordionState.openItem))
@@ -5517,6 +5561,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
           "aria-controls": `accordion-body-${vue.unref(id)}`
         }, [
           vue.createElementVNode("span", _hoisted_3$k, vue.toDisplayString(_ctx.label), 1),
+          vue.renderSlot(_ctx.$slots, "head", {}, void 0, true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["accordion-icon", { open: vue.unref(open) }])
           }, [
@@ -5540,7 +5585,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-bf74738b"]]);
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-0fb593ee"]]);
 const _sfc_main$C = {};
 const _hoisted_1$A = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$t = { class: "p-1" };
@@ -5640,7 +5685,11 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       if (typeof props2.schema === "function") {
         return props2.schema();
       }
-      return props2.schema;
+      if (props2.schema)
+        return props2.schema;
+      const keys4 = [...new Set((props2.data || []).map(Object.keys).flat())];
+      const schema = keys4.map((id) => ({ id, label: keyToLabel(id) }));
+      return schema;
     });
     const emit2 = __emit;
     const selectElement = (item) => emit2("select", item);
@@ -5749,7 +5798,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-54d69b8f"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-1d169811"]]);
 const _sfc_main$y = {};
 const _hoisted_1$w = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
@@ -5888,7 +5937,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: "avatar flex",
+        class: "avatar flex justify-content-center",
         style: vue.normalizeStyle({ width: `${_ctx.size}px`, height: `${_ctx.size}px` })
       }, [
         _ctx.src ? (vue.openBlock(), vue.createElementBlock("img", {
@@ -5903,7 +5952,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-21ffa9bb"]]);
+const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-371a733d"]]);
 const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   __name: "Title",
   props: {
@@ -5953,7 +6002,8 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   props: {
     message: {},
     dismissable: { type: Boolean },
-    type: { default: "info" }
+    type: { default: "info" },
+    icon: {}
   },
   setup(__props) {
     const isDismissed = vue.ref(false);
@@ -5968,12 +6018,13 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["alert", [_ctx.type]]),
         dismissable: _ctx.dismissable
       }, [
-        vue.createVNode(vue.unref(_sfc_main$I), {
+        _ctx.icon !== "none" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$I), {
+          key: 0,
           class: "alert_icon",
-          icon: _ctx.type,
+          icon: _ctx.icon || _ctx.type,
           size: 2,
           color: color2[_ctx.type]
-        }, null, 8, ["icon", "color"]),
+        }, null, 8, ["icon", "color"])) : vue.createCommentVNode("", true),
         vue.createElementVNode("p", _hoisted_2$o, vue.toDisplayString(_ctx.message), 1),
         vue.createVNode(Btn, {
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true),
@@ -5986,7 +6037,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-4017e821"]]);
+const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-0ec1391d"]]);
 const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "Badge",
   props: {
@@ -6258,17 +6309,23 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
         ], 34),
         vue.createElementVNode("div", _hoisted_2$m, [
           vue.createElementVNode("span", { onClick: prev }, [
-            vue.renderSlot(_ctx.$slots, "prev", {}, void 0, true)
+            vue.renderSlot(_ctx.$slots, "prev", {
+              prev,
+              index: vue.unref(activeSlideIndex)
+            }, void 0, true)
           ]),
           vue.createElementVNode("span", { onClick: next }, [
-            vue.renderSlot(_ctx.$slots, "next", {}, void 0, true)
+            vue.renderSlot(_ctx.$slots, "next", {
+              next,
+              index: vue.unref(activeSlideIndex)
+            }, void 0, true)
           ])
         ])
       ], 6);
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-068aa914"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-e1cc4e21"]]);
 const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "ModalConfirm",
   props: {
@@ -15496,7 +15553,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-6b40f812"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-9b751fe0"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -18198,7 +18255,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     autoheight: { type: Boolean },
     code: { type: Boolean },
     lines: {},
-    autocomplete: { default: "off" },
+    autocomplete: {},
     autofocus: { type: Boolean }
   },
   emits: ["update:modelValue", "debounce"],
@@ -18330,7 +18387,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-df718b64"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-534ec341"]]);
 const _hoisted_1$j = { class: "primary-checkbox" };
 const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
@@ -18421,7 +18478,9 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     id: {},
     options: {},
     showTimeWrap: { type: Boolean },
-    modelValue: {}
+    modelValue: {},
+    allowedDates: {},
+    disabledDates: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -18448,6 +18507,8 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
             "week-start": "0",
             modelValue: selectedDate.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedDate.value = $event),
+            "allowed-dates": _ctx.allowedDates,
+            "disabled-dates": _ctx.disabledDates,
             "auto-apply": true,
             "highlight-week-days": [6],
             "enable-time-picker": false,
@@ -18456,7 +18517,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
             "action-buttons": vue.withCtx(() => []),
             "action-preview": vue.withCtx(() => []),
             _: 1
-          }, 16, ["modelValue"])
+          }, 16, ["modelValue", "allowed-dates", "disabled-dates"])
         ]),
         _ctx.showTimeWrap ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$b, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(hours), (hr2) => {
@@ -18490,7 +18551,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   props: {
     options: {},
     modelValue: { default: "" },
-    id: { default: () => `radio-pill-${Math.random().toString(36).substr(2, 9)}` },
+    id: { default: () => `radio-pill-${Math.random().toString(36).substring(2, 9)}` },
     label: { default: "" }
   },
   emits: ["update:modelValue"],
@@ -18558,7 +18619,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-41859ed6"]]);
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-ad2e40f3"]]);
 const _hoisted_1$f = { class: "bagel-input" };
 const _hoisted_2$c = {
   key: 0,
@@ -18574,7 +18635,7 @@ const _hoisted_7$1 = {
 };
 const _hoisted_8 = ["src"];
 const _hoisted_9 = { class: "previewName" };
-const _hoisted_10 = ["src"];
+const _hoisted_10 = ["width", "src"];
 const _hoisted_11 = { class: "no-margin" };
 const _hoisted_12 = {
   key: 0,
@@ -18587,7 +18648,8 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     multiple: { type: Boolean },
     files: {},
     deleteEndpoint: {},
-    bindkey: {}
+    bindkey: {},
+    width: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
@@ -18600,11 +18662,31 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     const file_bindkeys = vue.useModel(__props, "modelValue");
     const storageFiles = vue.ref([]);
     const compareIds = (v1, v2) => [v1].flat().join(",") === [v2].flat().join(",");
+    vue.onMounted(() => {
+      if (!props2.files && [file_bindkeys.value].flat().length) {
+        const ids = [file_bindkeys.value].flat();
+        if (props2.multiple) {
+          ids.forEach((id) => {
+            void bagel.get(`/files/${id}`).then((file) => {
+              storageFiles.value.push(file);
+            });
+          });
+        } else {
+          void bagel.get(`/files/${ids[0]}`).then((file) => {
+            storageFiles.value.push(file);
+          });
+        }
+      }
+    });
     vue.watch(
       () => props2.files,
       (newFiles) => {
-        if (newFiles)
-          storageFiles.value.push(...[newFiles].flat());
+        if (newFiles) {
+          const filesToAdd = [newFiles].flat().filter((f2) => !storageFiles.value.find((sf) => sf[bindKey2] === f2[bindKey2]));
+          for (const file of filesToAdd) {
+            storageFiles.value.push(file);
+          }
+        }
       },
       { immediate: true }
     );
@@ -18715,7 +18797,6 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", _hoisted_4$5, [
                 _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("img", {
                   key: 0,
-                  height: "60",
                   class: "preview",
                   src: file.url,
                   alt: ""
@@ -18745,7 +18826,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", _hoisted_9, [
                 _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("img", {
                   key: 0,
-                  height: "60",
+                  width: _ctx.width || "220",
                   class: "preview",
                   src: fileToUrl(fileQ.file),
                   alt: ""
@@ -18769,7 +18850,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-0dbacaa0"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-4f0a6b20"]]);
 const _withScopeId$1 = (n2) => (vue.pushScopeId("data-v-b87221d6"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$e = ["title"];
 const _hoisted_2$b = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
@@ -51001,12 +51082,18 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     tabs: {},
     modelValue: {}
   },
-  setup(__props) {
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
     const props2 = __props;
     const slots = vue.useSlots();
     const group = Math.random().toString(36).substring(7);
     const { currentTab } = useTabs(group);
     const tabValue = (tab) => typeof tab === "string" ? tab : tab.id;
+    const emit2 = __emit;
+    const slctTab = vue.computed({
+      get: () => props2.modelValue || tabValue(props2.tabs[0]),
+      set: (value) => emit2("update:modelValue", value)
+    });
     const tabComponent = vue.defineComponent({
       render() {
         var _a2, _b, _c;
@@ -51014,16 +51101,18 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           (tab) => tabValue(tab) === currentTab.value
         );
         const slotChildren = (_c = (_b = (_a2 = slots == null ? void 0 : slots.default) == null ? void 0 : _a2.call(slots)) == null ? void 0 : _b[1]) == null ? void 0 : _c.children;
-        return vue.h("div", slotChildren == null ? void 0 : slotChildren[currentTabIndex]);
+        return vue.h("div", slotChildren[currentTabIndex]);
       }
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         vue.createVNode(vue.unref(TabsNav), {
+          modelValue: slctTab.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => slctTab.value = $event),
           tabs: _ctx.tabs,
           group: vue.unref(group),
           class: "mb-05"
-        }, null, 8, ["tabs", "group"]),
+        }, null, 8, ["modelValue", "tabs", "group"]),
         vue.unref(currentTab) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
           vue.unref(slots)[vue.unref(currentTab)] ? vue.renderSlot(_ctx.$slots, vue.unref(currentTab), { key: 0 }) : vue.unref(currentTab) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabComponent)), { key: 1 })) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)
@@ -51031,7 +51120,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "grid auto-flow-columns fit-content" };
+const _hoisted_1$2 = { class: "grid auto-flow-columns fit-content bgl_tabs_wrap" };
 const _hoisted_2$1 = ["onClick"];
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   __name: "TabsNav",
@@ -51042,12 +51131,15 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     sideTabs: { type: Boolean },
     group: {}
   },
-  setup(__props) {
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
     const props2 = __props;
     const { currentTab } = useTabs(props2.group);
     currentTab.value = props2.modelValue || typeof props2.tabs[0] === "string" ? props2.tabs[0] : props2.tabs[0].id;
+    const emit2 = __emit;
     const selectTab = (tab) => {
       currentTab.value = typeof tab === "string" ? tab : tab.id;
+      emit2("update:modelValue", currentTab.value);
     };
     const isActive2 = (tab) => {
       if (typeof tab === "string")
@@ -51059,6 +51151,14 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         return tab;
       return tab.label;
     };
+    vue.watch(
+      () => props2.modelValue,
+      (value) => {
+        if (value && !isActive2(value))
+          currentTab.value = value;
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, (tab, i2) => {
@@ -51079,7 +51179,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-0774360e"]]);
+const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-05be4d6e"]]);
 const _hoisted_1$1 = { key: 0 };
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "TabsBody",
@@ -51227,4 +51327,5 @@ exports.keyToLabel = keyToLabel;
 exports.useBagel = useBagel;
 exports.useEscape = useEscape;
 exports.useI18nT = useI18nT;
+exports.useLang = useLang;
 exports.useModal = useModal;