@bagelink/vue 0.0.427 → 0.0.435

package/dist/index.cjs

@@ -4584,10 +4584,7 @@ class DataRequest {
   async post(item) {
     if (!this.data_table)
       throw new Error("Data table not set");
-    const { data: data2 } = await axios.post(
-      `/data/${this.data_table}`,
-      item
-    );
+    const { data: data2 } = await axios.post(`/data/${this.data_table}`, item);
     return data2;
   }
   filter(filter3) {
@@ -4649,7 +4646,9 @@ class BagelAuth {
   }
   async validateUser() {
     try {
-      const { data: usr } = await axios.get("/users/me", { withCredentials: true });
+      const { data: usr } = await axios.get("/users/me", {
+        withCredentials: true
+      });
       this.user = usr;
       return usr;
     } catch (err) {
@@ -4721,8 +4720,11 @@ class Bagel {
     __publicField(this, "read_table", null);
     __publicField(this, "auth", new BagelAuth(this));
     this.host = host == null ? void 0 : host.replace(/\/$/, "");
-    if (!this.host)
-      throw new Error("you probably need to set VITE_BAGEL_BASE_URL in the .env file");
+    if (!this.host) {
+      throw new Error(
+        "you probably need to set VITE_BAGEL_BASE_URL in the .env file"
+      );
+    }
     axios.defaults.baseURL = this.host;
     this.onError = onError;
   }
@@ -4741,6 +4743,7 @@ class Bagel {
     return axios.get(`/api/${endpoint}`).then(({ data: data2 }) => data2);
   }
   async get(endpoint, query) {
+    this._setAuthorization();
     endpoint = this._endpointCleaner(endpoint);
     if (endpoint.match(/undefined|null/))
       throw new Error("Invalid endpoint");
@@ -4757,6 +4760,7 @@ class Bagel {
     });
   }
   async delete(endpoint) {
+    this._setAuthorization();
     endpoint = this._endpointCleaner(endpoint);
     return axios.delete(`/${endpoint}`).then(({ data: data2 }) => data2).catch((err) => {
       var _a2;
@@ -4766,6 +4770,7 @@ class Bagel {
   }
   async put(endpoint, payload) {
     endpoint = this._endpointCleaner(endpoint);
+    this._setAuthorization();
     return axios.put(`/${endpoint}`, payload).then(({ data: data2 }) => data2).catch((err) => {
       var _a2;
       (_a2 = this.onError) == null ? void 0 : _a2.call(this, err);
@@ -4780,7 +4785,14 @@ class Bagel {
       throw err;
     });
   }
+  _setAuthorization() {
+    const Authorization = localStorage.getItem("access_token");
+    if (Authorization) {
+      axios.defaults.headers.common.Authorization = `Bearer ${Authorization}`;
+    }
+  }
   async post(endpoint, payload = {}) {
+    this._setAuthorization();
     endpoint = this._endpointCleaner(endpoint);
     return axios.post(`/${endpoint}`, payload).then(({ data: data2 }) => data2).catch((err) => {
       var _a2;
@@ -4789,6 +4801,7 @@ class Bagel {
     });
   }
   async uploadFile(file, options) {
+    this._setAuthorization();
     const formData = new FormData();
     formData.append("file", file);
     const { data: data2 } = await axios.post("/static_files/upload", formData, {
@@ -4813,94 +4826,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(" ");
@@ -4940,7 +4865,11 @@ function txtField(id, label, options) {
     id,
     label,
     placeholder: options == null ? void 0 : options.placeholder,
-    attrs: { type: options == null ? void 0 : options.type, pattern: options == null ? void 0 : options.pattern, multiline: options == null ? void 0 : options.multiline }
+    attrs: {
+      type: options == null ? void 0 : options.type,
+      pattern: options == null ? void 0 : options.pattern,
+      multiline: options == null ? void 0 : options.multiline
+    }
   };
 }
 function slctField(id, label, options, config) {
@@ -4953,7 +4882,11 @@ function slctField(id, label, options, config) {
     required: config == null ? void 0 : config.required,
     label,
     defaultValue: config == null ? void 0 : config.defaultValue,
-    attrs: { disabled: config == null ? void 0 : config.disabled, searchable: config == null ? void 0 : config.searchable, multiselect: config == null ? void 0 : config.multiselect }
+    attrs: {
+      disabled: config == null ? void 0 : config.disabled,
+      searchable: config == null ? void 0 : config.searchable,
+      multiselect: config == null ? void 0 : config.multiselect
+    }
   };
 }
 function checkField(id, label, options) {
@@ -4979,7 +4912,7 @@ function numField(id, label, options) {
 function frmRow(...children2) {
   return {
     $el: "div",
-    class: "flex gap-1 m_block mt-1",
+    class: "flex gap-1 m_block",
     children: children2
   };
 }
@@ -4992,6 +4925,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 +5002,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: {
@@ -5652,7 +5706,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);
@@ -5761,7 +5819,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) {
@@ -5965,7 +6023,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);
@@ -5980,12 +6039,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),
@@ -5998,7 +6058,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: {
@@ -6358,7 +6418,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
         formData.value = val;
         emit2("update:modelValue", val);
       },
-      get: () => props2.modelValue || formData.value
+      get: () => formData.value
     });
     const form = vue.ref();
     const validateForm = () => {
@@ -6380,7 +6440,8 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
       const isValid2 = validateForm();
       if (!isValid2)
         return;
-      emit2("submit", data2.value);
+      emit2("submit", { ...formData.value });
+      isDirty.value = false;
     };
     const i18nT = (val) => val;
     const deleteItem = () => {
@@ -6437,7 +6498,10 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(data2) ? data2.value = $event : data2 = $event)
             }, null, 8, ["field", "modelValue"]);
           }), 128)),
-          vue.renderSlot(_ctx.$slots, "submit")
+          vue.renderSlot(_ctx.$slots, "submit", {
+            submit: runSubmit,
+            isDirty: vue.unref(isDirty)
+          })
         ], 544)) : vue.createCommentVNode("", true),
         _ctx.status === "success" ? vue.renderSlot(_ctx.$slots, "success", { key: 2 }) : vue.createCommentVNode("", true),
         _ctx.status === "error" ? vue.renderSlot(_ctx.$slots, "error", { key: 3 }) : vue.createCommentVNode("", true)
@@ -15360,7 +15424,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
     const getValue = (option2) => {
       if (!option2)
-        return "";
+        return void 0;
       if (typeof option2 === "string")
         return option2;
       if (typeof option2 === "number")
@@ -15368,12 +15432,10 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       return option2.value;
     };
     const isSelected = (option2) => !!selectedItems.value.find((item) => getValue(option2) === getValue(item));
-    const filteredOptions = vue.computed(
-      () => props2.options.filter((option2) => {
-        const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
-        return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
-      })
-    );
+    const filteredOptions = vue.computed(() => props2.options.filter((option2) => {
+      const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
+      return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
+    }));
     const select2 = (option2) => {
       var _a2;
       const existingIndex = selectedItems.value.findIndex(
@@ -15395,9 +15457,8 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       if (props2.multiselect) {
         emit2("update:modelValue", selectedItems.value.map(getValue).filter(Boolean));
       } else {
-        selectedItems.value.splice(1, selectedItems.value.length - 1);
         const [item] = selectedItems.value;
-        emit2("update:modelValue", item ? getValue(item) : null);
+        emit2("update:modelValue", getValue(item));
       }
     }
     function compareArrays(arr1, arr2) {
@@ -15514,7 +15575,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-39ae2ac8"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -18216,7 +18277,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"],
@@ -18348,7 +18409,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",
@@ -18439,7 +18500,9 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     id: {},
     options: {},
     showTimeWrap: { type: Boolean },
-    modelValue: {}
+    modelValue: {},
+    allowedDates: {},
+    disabledDates: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -18466,6 +18529,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,
@@ -18474,7 +18539,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) => {
@@ -18508,7 +18573,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"],
@@ -18529,7 +18594,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
       return option2.value;
     };
     const props2 = __props;
-    let selectedValue = vue.ref("");
+    let selectedValue = vue.ref(props2.modelValue);
     function handleSelect(e) {
       var _a2;
       const newVal = (_a2 = e.target) == null ? void 0 : _a2.value;
@@ -18563,7 +18628,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                 id: `${_ctx.id}-${getValue(option2)}`,
                 name: _ctx.id,
                 value: getValue(option2),
-                checked: vue.unref(selectedValue) === getValue(option2),
+                checked: vue.unref(selectedValue) == getValue(option2),
                 onChange: handleSelect
               }, null, 40, _hoisted_4$6),
               vue.createElementVNode("label", {
@@ -18576,7 +18641,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-880c5069"]]);
 const _hoisted_1$f = { class: "bagel-input" };
 const _hoisted_2$c = {
   key: 0,
@@ -18592,7 +18657,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,
@@ -18605,7 +18670,8 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     multiple: { type: Boolean },
     files: {},
     deleteEndpoint: {},
-    bindkey: {}
+    bindkey: {},
+    width: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
@@ -18618,11 +18684,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 }
     );
@@ -18733,7 +18819,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: ""
@@ -18763,7 +18848,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: ""
@@ -18787,7 +18872,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));
@@ -51019,12 +51104,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;
@@ -51032,16 +51123,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)
@@ -51080,6 +51173,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) => {
@@ -51100,7 +51201,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ca10eb5f"]]);
+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",
@@ -51248,4 +51349,5 @@ exports.keyToLabel = keyToLabel;
 exports.useBagel = useBagel;
 exports.useEscape = useEscape;
 exports.useI18nT = useI18nT;
+exports.useLang = useLang;
 exports.useModal = useModal;