@bagelink/vue 0.0.951 → 0.0.955

package/dist/components/form/inputs/FileUpload.vue.d.ts

@@ -1,7 +1,28 @@
 import { StorageFile } from '../../..';
 type StrKey = keyof StorageFile;
 type FSValue = string[] | string | number;
+declare let __VLS_typeProps: {
+    label?: string;
+    multiple?: boolean;
+    files?: StorageFile | StorageFile[];
+    bindkey?: StrKey;
+    modelValue?: FSValue;
+    width?: string;
+    height?: string | 'auto';
+    topic?: string;
+    fill?: boolean;
+    oval?: boolean;
+    theme?: 'dropzone' | 'basic';
+    accept?: string;
+    required?: boolean;
+};
 declare function browse(): void;
+declare const __VLS_defaults: {
+    modelValue: () => FSValue;
+};
+type __VLS_PublicProps = {
+    'modelValue'?: typeof __VLS_defaults['modelValue'];
+} & typeof __VLS_typeProps;
 declare function __VLS_template(): {
     slots: {
         files?(_: {
@@ -72,38 +93,10 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{
-    label?: string;
-    multiple?: boolean;
-    files?: StorageFile | StorageFile[];
-    bindkey?: StrKey;
-    modelValue?: FSValue;
-    width?: string;
-    height?: string | "auto";
-    topic?: string;
-    fill?: boolean;
-    oval?: boolean;
-    theme?: "dropzone" | "basic";
-    accept?: string;
-    required?: boolean;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     addFileStart: (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<{
-    label?: string;
-    multiple?: boolean;
-    files?: StorageFile | StorageFile[];
-    bindkey?: StrKey;
-    modelValue?: FSValue;
-    width?: string;
-    height?: string | "auto";
-    topic?: string;
-    fill?: boolean;
-    oval?: boolean;
-    theme?: "dropzone" | "basic";
-    accept?: string;
-    required?: boolean;
-}> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onAddFileStart?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/form/inputs/FileUpload.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AA4kBA,OAAO,EAAmC,KAAK,WAAW,EAAkB,MAAM,eAAe,CAAA;AAKjG,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AA0JzC,iBAAS,MAAM,SAiBd;AA6BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA7KZ,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YAulBS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;0BA1lBpB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YAwlBe,GAAG;;;WASvB,OAAO,IAA6B;EAEjD;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YAtpBZ,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;YACN,UAAU,GAAG,OAAO;aACnB,MAAM;eACJ,OAAO;;;;;YAZV,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;YACN,UAAU,GAAG,OAAO;aACnB,MAAM;eACJ,OAAO;;;;kFAipBjB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAomBA,OAAO,EAAmC,KAAK,WAAW,EAAkB,MAAM,eAAe,CAAA;AAKjG,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AAEzC,QAAA,IAAI,eAAe,EAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,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;CAClB,CAAC;AAkJF,iBAAS,MAAM,SAiBd;AA+BD,QAAA,MAAM,cAAc;sBACI,OAAO;CAC9B,CAAC;AACF,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,OAAO,cAAc,CAAC,YAAY,CAAC,CAAC;CAClD,GAAG,OAAO,eAAe,CAAC;AAI3B,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAhMZ,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YAorBS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;0BAvrBpB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YAqrBgB,GAAG;;;WASxB,OAAO,IAA6B;EAEjD;AA0BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;kFAUnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.cjs

@@ -18658,42 +18658,43 @@ const _hoisted_2$l = {
   required: "",
   class: "pixel"
 };
-const _hoisted_3$h = { class: "ellipsis-1 word-break-all h-20 m-0" };
-const _hoisted_4$b = {
-  key: 0,
+const _hoisted_3$h = { class: "m-05 flex opacity-7 z-99" };
+const _hoisted_4$b = { class: "ellipsis-1 word-break-all h-20 m-0" };
+const _hoisted_5$a = {
+  key: 1,
   class: "txt-gray txt-12"
 };
-const _hoisted_5$a = {
+const _hoisted_6$8 = {
   key: 0,
   class: "bgl-multi-preview"
 };
-const _hoisted_6$8 = ["src"];
-const _hoisted_7$5 = { class: "m-0" };
-const _hoisted_8$3 = ["width", "src"];
-const _hoisted_9$2 = { class: "no-margin multi-preview-txt" };
-const _hoisted_10$2 = {
+const _hoisted_7$5 = ["src"];
+const _hoisted_8$3 = { class: "m-0" };
+const _hoisted_9$2 = ["width", "src"];
+const _hoisted_10$2 = { class: "no-margin multi-preview-txt" };
+const _hoisted_11$1 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_11$1 = {
+const _hoisted_12$1 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_12$1 = { class: "position-start m-05 flex opacity-7 z-99" };
-const _hoisted_13$1 = {
+const _hoisted_13$1 = { class: "position-start m-05 flex opacity-7 z-99" };
+const _hoisted_14$1 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_14$1 = ["src"];
-const _hoisted_15$1 = {
+const _hoisted_15$1 = ["src"];
+const _hoisted_16 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_16 = ["src"];
-const _hoisted_17 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _hoisted_17 = ["src"];
+const _hoisted_18 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
 const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
-  props: {
+  props: /* @__PURE__ */ vue.mergeModels({
     label: {},
     multiple: { type: Boolean },
     files: {},
@@ -18707,44 +18708,62 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     theme: {},
     accept: {},
     required: { type: Boolean }
-  },
-  emits: ["update:modelValue", "addFileStart"],
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["update:modelValue", "addFileStart"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
     const bindKey2 = props2.bindkey || "id";
     const bagel = useBagel();
     const isImage = (str) => IMAGE_FORMATS_REGEXP.test(str);
-    let file_bindkeys = vue.ref(props2.modelValue || []);
+    const file_bindkeys = vue.useModel(__props, "modelValue");
     const storageFiles = vue.ref([]);
-    async function fetchFiles() {
+    async function fetchTopicFiles() {
       const files = await bagel.get(`/files?topic=${props2.topic}`);
       storageFiles.value.push(...files);
     }
-    vue.onMounted(() => {
-      if (props2.topic) fetchFiles();
-      if (!props2.files && [file_bindkeys.value].flat().length > 0) {
-        const ids = [file_bindkeys.value].flat().filter(Boolean);
-        if (!(ids == null ? void 0 : ids.length)) return;
-        if (bindKey2 === "url") {
-          ids.forEach((url) => {
-            storageFiles.value.push({ url });
-          });
-          return;
-        }
-        if (props2.multiple) {
-          ids.forEach((id) => {
-            void bagel.get(`/files/${id}`).then((file) => {
-              storageFiles.value.push(file);
-            }).catch(console.error);
-          });
-        } else {
-          void bagel.get(`/files/${ids[0]}`).then((file) => {
+    function loadFiles() {
+      const ids = [file_bindkeys.value].flat().filter(Boolean);
+      if (!ids.length) {
+        storageFiles.value.splice(0, storageFiles.value.length);
+        return;
+      }
+      const currentIds = storageFiles.value.map((file) => file[bindKey2]);
+      const idsToAdd = ids.filter((id) => !currentIds.includes(id));
+      const idsToRemove = currentIds.filter((id) => (typeof id === "string" || typeof id === "number") && !ids.includes(id));
+      idsToRemove.forEach((id) => {
+        const index2 = storageFiles.value.findIndex((file) => file[bindKey2] === id);
+        if (index2 !== -1) storageFiles.value.splice(index2, 1);
+      });
+      if (bindKey2 === "url") {
+        idsToAdd.forEach((url) => {
+          storageFiles.value.push({ url });
+        });
+        return;
+      }
+      if (props2.multiple) {
+        idsToAdd.forEach((id) => {
+          void bagel.get(`/files/${id}`).then((file) => {
             storageFiles.value.push(file);
           }).catch(console.error);
-        }
+        });
+      } else {
+        void bagel.get(`/files/${idsToAdd[0]}`).then((file) => {
+          storageFiles.value.push(file);
+        }).catch(console.error);
+      }
+    }
+    vue.onMounted(() => {
+      if (props2.topic) fetchTopicFiles();
+      if (!props2.files && [file_bindkeys.value].flat().length > 0) {
+        loadFiles();
       }
     });
+    vue.watch(() => props2.topic, fetchTopicFiles);
+    vue.watch(() => props2.modelValue, loadFiles);
     vue.watch(
       () => props2.files,
       (newFiles) => {
@@ -18761,17 +18780,6 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     function compareLists(a2, b2) {
       return [a2].flat().every((id) => [b2].flat().includes(id)) && [b2].flat().every((id) => [a2].flat().includes(id));
     }
-    vue.watch(() => props2.modelValue, (newVal = []) => {
-      console.log(newVal);
-      const isSame = compareLists(file_bindkeys.value, newVal);
-      if (!isSame) {
-        file_bindkeys.value = newVal;
-        for (const fle of storageFiles.value) {
-          const index2 = [file_bindkeys.value].flat().findIndex((key) => fle[bindKey2] === key);
-          if (index2 === -1) storageFiles.value.splice(index2, 1);
-        }
-      }
-    });
     function updateModelValue() {
       let idValue;
       if (props2.multiple) {
@@ -18782,7 +18790,6 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
       const isSame = compareLists(file_bindkeys.value, idValue);
       if (!isSame) {
         file_bindkeys.value = idValue;
-        emit2("update:modelValue", file_bindkeys.value);
       }
     }
     const fileQueue = vue.ref([]);
@@ -18851,8 +18858,8 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
       flushQueue();
     }
     return (_ctx, _cache) => {
-      const _directive_lightbox = vue.resolveDirective("lightbox");
       const _directive_tooltip = vue.resolveDirective("tooltip");
+      const _directive_lightbox = vue.resolveDirective("lightbox");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
         _ctx.required && !storageFiles.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$l)) : vue.createCommentVNode("", true),
@@ -18864,33 +18871,68 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
           onDrop: drop3
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(Btn), {
+            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+              key: 0,
               class: "px-1-5",
               icon: "upload",
               outline: "",
               onClick: browse
             }, {
-              default: vue.withCtx(() => _cache[1] || (_cache[1] = [
+              default: vue.withCtx(() => _cache[2] || (_cache[2] = [
                 vue.createTextVNode(" Upload ")
               ])),
               _: 1
-            }),
+            })) : vue.createCommentVNode("", true),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: file.id,
                 class: "txt-gray txt-12 flex"
               }, [
-                vue.createElementVNode("p", _hoisted_3$h, vue.toDisplayString(file.name), 1),
-                vue.createVNode(vue.unref(Btn), {
-                  thin: "",
-                  flat: "",
-                  icon: "delete",
-                  color: "red",
-                  onClick: vue.withModifiers(($event) => removeFile(file), ["stop"])
-                }, null, 8, ["onClick"])
+                vue.createElementVNode("div", _hoisted_3$h, [
+                  vue.withDirectives(vue.createVNode(vue.unref(Btn), {
+                    color: "gray",
+                    thin: "",
+                    icon: "delete",
+                    onClick: vue.withModifiers(($event) => removeFile(file), ["stop"])
+                  }, null, 8, ["onClick"]), [
+                    [_directive_tooltip, "Delete"]
+                  ]),
+                  vue.withDirectives(vue.createVNode(vue.unref(Btn), {
+                    color: "gray",
+                    thin: "",
+                    icon: "autorenew",
+                    onClick: browse
+                  }, null, 512), [
+                    [_directive_tooltip, "Replace"]
+                  ]),
+                  vue.withDirectives(vue.createVNode(vue.unref(Btn), {
+                    href: file.url,
+                    download: file.name,
+                    color: "gray",
+                    thin: "",
+                    icon: "download",
+                    target: "_blank",
+                    onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                    }, ["stop"]))
+                  }, null, 8, ["href", "download"]), [
+                    [_directive_tooltip, "Download"]
+                  ]),
+                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("p", _hoisted_4$b, [
+                    vue.createTextVNode(vue.toDisplayString(file.name), 1)
+                  ])), [
+                    [_directive_lightbox, { src: file.url, download: true }]
+                  ]),
+                  vue.createVNode(vue.unref(Btn), {
+                    thin: "",
+                    flat: "",
+                    icon: "delete",
+                    color: "red",
+                    onClick: vue.withModifiers(($event) => removeFile(file), ["stop"])
+                  }, null, 8, ["onClick"])
+                ])
               ]);
             }), 128)),
-            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$b, " No file selected ")) : vue.createCommentVNode("", true)
+            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$a, " No file selected ")) : vue.createCommentVNode("", true)
           ]),
           _: 1
         })) : (vue.openBlock(), vue.createElementBlock("div", {
@@ -18910,7 +18952,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
             files: storageFiles.value,
             fileQueue: fileQueue.value
           }, () => [
-            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$a, [
+            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$8, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   key: file.id,
@@ -18921,12 +18963,12 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                     class: "multi-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_6$8)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+                  }, null, 8, _hoisted_7$5)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  vue.createElementVNode("p", _hoisted_7$5, vue.toDisplayString(file.name), 1),
+                  vue.createElementVNode("p", _hoisted_8$3, vue.toDisplayString(file.name), 1),
                   vue.createVNode(vue.unref(Btn), {
                     thin: "",
                     flat: "",
@@ -18950,18 +18992,18 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                       class: "multi-preview",
                       src: fileToUrl(fileQ.file),
                       alt: ""
-                    }, null, 8, _hoisted_8$3)) : vue.createCommentVNode("", true)
+                    }, null, 8, _hoisted_9$2)) : vue.createCommentVNode("", true)
                   ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  vue.createElementVNode("p", _hoisted_9$2, vue.toDisplayString(fileQ.name), 1),
+                  vue.createElementVNode("p", _hoisted_10$2, vue.toDisplayString(fileQ.name), 1),
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: vue.normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$2, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
+                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
                     vue.createVNode(vue.unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -18970,13 +19012,13 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                 ]);
               }), 128))
             ])) : vue.createCommentVNode("", true),
-            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [
+            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: file.id,
                   class: vue.normalizeClass(["single-image-item-preview", { "bgl_fill-image": _ctx.fill }])
                 }, [
-                  vue.createElementVNode("div", _hoisted_12$1, [
+                  vue.createElementVNode("div", _hoisted_13$1, [
                     vue.withDirectives(vue.createVNode(vue.unref(Btn), {
                       color: "gray",
                       thin: "",
@@ -19000,18 +19042,18 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                       thin: "",
                       icon: "download",
                       target: "_blank",
-                      onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                      onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
                       }, ["stop"]))
                     }, null, 8, ["href", "download"]), [
                       [_directive_tooltip, "Download"]
                     ])
                   ]),
-                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [
+                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$1, [
                     vue.withDirectives(vue.createElementVNode("img", {
                       class: "single-preview",
                       src: file.url,
                       alt: ""
-                    }, null, 8, _hoisted_14$1), [
+                    }, null, 8, _hoisted_15$1), [
                       [_directive_lightbox, { src: file.url, download: true }]
                     ])
                   ])) : vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
@@ -19034,7 +19076,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                     class: vue.normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: vue.normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15$1, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
+                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_16, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
                     vue.createVNode(vue.unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -19045,7 +19087,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
                     alt: ""
-                  }, null, 8, _hoisted_16)) : vue.createCommentVNode("", true)
+                  }, null, 8, _hoisted_17)) : vue.createCommentVNode("", true)
                 ], 2);
               }), 128))
             ])) : vue.createCommentVNode("", true)
@@ -19056,9 +19098,9 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
             fileQueue: fileQueue.value,
             browse
           }, () => [
-            vue.createElementVNode("p", _hoisted_17, [
+            vue.createElementVNode("p", _hoisted_18, [
               vue.createVNode(vue.unref(_sfc_main$c), { icon: "upload_2" }),
-              _cache[2] || (_cache[2] = vue.createTextVNode(" Drop files here or click to upload "))
+              _cache[3] || (_cache[3] = vue.createTextVNode(" Drop files here or click to upload "))
             ])
           ], true) : vue.createCommentVNode("", true)
         ], 38))
@@ -19066,7 +19108,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-36f16bdf"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-30231b53"]]);
 const _hoisted_1$u = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];

package/dist/index.mjs

@@ -18656,42 +18656,43 @@ const _hoisted_2$l = {
   required: "",
   class: "pixel"
 };
-const _hoisted_3$h = { class: "ellipsis-1 word-break-all h-20 m-0" };
-const _hoisted_4$b = {
-  key: 0,
+const _hoisted_3$h = { class: "m-05 flex opacity-7 z-99" };
+const _hoisted_4$b = { class: "ellipsis-1 word-break-all h-20 m-0" };
+const _hoisted_5$a = {
+  key: 1,
   class: "txt-gray txt-12"
 };
-const _hoisted_5$a = {
+const _hoisted_6$8 = {
   key: 0,
   class: "bgl-multi-preview"
 };
-const _hoisted_6$8 = ["src"];
-const _hoisted_7$5 = { class: "m-0" };
-const _hoisted_8$3 = ["width", "src"];
-const _hoisted_9$2 = { class: "no-margin multi-preview-txt" };
-const _hoisted_10$2 = {
+const _hoisted_7$5 = ["src"];
+const _hoisted_8$3 = { class: "m-0" };
+const _hoisted_9$2 = ["width", "src"];
+const _hoisted_10$2 = { class: "no-margin multi-preview-txt" };
+const _hoisted_11$1 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_11$1 = {
+const _hoisted_12$1 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_12$1 = { class: "position-start m-05 flex opacity-7 z-99" };
-const _hoisted_13$1 = {
+const _hoisted_13$1 = { class: "position-start m-05 flex opacity-7 z-99" };
+const _hoisted_14$1 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_14$1 = ["src"];
-const _hoisted_15$1 = {
+const _hoisted_15$1 = ["src"];
+const _hoisted_16 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_16 = ["src"];
-const _hoisted_17 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _hoisted_17 = ["src"];
+const _hoisted_18 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "FileUpload",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     label: {},
     multiple: { type: Boolean },
     files: {},
@@ -18705,44 +18706,62 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     theme: {},
     accept: {},
     required: { type: Boolean }
-  },
-  emits: ["update:modelValue", "addFileStart"],
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "addFileStart"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
     const bindKey2 = props2.bindkey || "id";
     const bagel = useBagel();
     const isImage = (str) => IMAGE_FORMATS_REGEXP.test(str);
-    let file_bindkeys = ref(props2.modelValue || []);
+    const file_bindkeys = useModel(__props, "modelValue");
     const storageFiles = ref([]);
-    async function fetchFiles() {
+    async function fetchTopicFiles() {
       const files = await bagel.get(`/files?topic=${props2.topic}`);
       storageFiles.value.push(...files);
     }
-    onMounted(() => {
-      if (props2.topic) fetchFiles();
-      if (!props2.files && [file_bindkeys.value].flat().length > 0) {
-        const ids = [file_bindkeys.value].flat().filter(Boolean);
-        if (!(ids == null ? void 0 : ids.length)) return;
-        if (bindKey2 === "url") {
-          ids.forEach((url) => {
-            storageFiles.value.push({ url });
-          });
-          return;
-        }
-        if (props2.multiple) {
-          ids.forEach((id) => {
-            void bagel.get(`/files/${id}`).then((file) => {
-              storageFiles.value.push(file);
-            }).catch(console.error);
-          });
-        } else {
-          void bagel.get(`/files/${ids[0]}`).then((file) => {
+    function loadFiles() {
+      const ids = [file_bindkeys.value].flat().filter(Boolean);
+      if (!ids.length) {
+        storageFiles.value.splice(0, storageFiles.value.length);
+        return;
+      }
+      const currentIds = storageFiles.value.map((file) => file[bindKey2]);
+      const idsToAdd = ids.filter((id) => !currentIds.includes(id));
+      const idsToRemove = currentIds.filter((id) => (typeof id === "string" || typeof id === "number") && !ids.includes(id));
+      idsToRemove.forEach((id) => {
+        const index2 = storageFiles.value.findIndex((file) => file[bindKey2] === id);
+        if (index2 !== -1) storageFiles.value.splice(index2, 1);
+      });
+      if (bindKey2 === "url") {
+        idsToAdd.forEach((url) => {
+          storageFiles.value.push({ url });
+        });
+        return;
+      }
+      if (props2.multiple) {
+        idsToAdd.forEach((id) => {
+          void bagel.get(`/files/${id}`).then((file) => {
             storageFiles.value.push(file);
           }).catch(console.error);
-        }
+        });
+      } else {
+        void bagel.get(`/files/${idsToAdd[0]}`).then((file) => {
+          storageFiles.value.push(file);
+        }).catch(console.error);
+      }
+    }
+    onMounted(() => {
+      if (props2.topic) fetchTopicFiles();
+      if (!props2.files && [file_bindkeys.value].flat().length > 0) {
+        loadFiles();
       }
     });
+    watch(() => props2.topic, fetchTopicFiles);
+    watch(() => props2.modelValue, loadFiles);
     watch(
       () => props2.files,
       (newFiles) => {
@@ -18759,17 +18778,6 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     function compareLists(a2, b2) {
       return [a2].flat().every((id) => [b2].flat().includes(id)) && [b2].flat().every((id) => [a2].flat().includes(id));
     }
-    watch(() => props2.modelValue, (newVal = []) => {
-      console.log(newVal);
-      const isSame = compareLists(file_bindkeys.value, newVal);
-      if (!isSame) {
-        file_bindkeys.value = newVal;
-        for (const fle of storageFiles.value) {
-          const index2 = [file_bindkeys.value].flat().findIndex((key) => fle[bindKey2] === key);
-          if (index2 === -1) storageFiles.value.splice(index2, 1);
-        }
-      }
-    });
     function updateModelValue() {
       let idValue;
       if (props2.multiple) {
@@ -18780,7 +18788,6 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       const isSame = compareLists(file_bindkeys.value, idValue);
       if (!isSame) {
         file_bindkeys.value = idValue;
-        emit2("update:modelValue", file_bindkeys.value);
       }
     }
     const fileQueue = ref([]);
@@ -18849,8 +18856,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       flushQueue();
     }
     return (_ctx, _cache) => {
-      const _directive_lightbox = resolveDirective("lightbox");
       const _directive_tooltip = resolveDirective("tooltip");
+      const _directive_lightbox = resolveDirective("lightbox");
       return openBlock(), createElementBlock("div", _hoisted_1$v, [
         createElementVNode("label", null, toDisplayString(_ctx.label), 1),
         _ctx.required && !storageFiles.value.length ? (openBlock(), createElementBlock("input", _hoisted_2$l)) : createCommentVNode("", true),
@@ -18862,33 +18869,68 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           onDrop: drop3
         }, {
           default: withCtx(() => [
-            createVNode(unref(Btn), {
+            !storageFiles.value.length && !fileQueue.value.length ? (openBlock(), createBlock(unref(Btn), {
+              key: 0,
               class: "px-1-5",
               icon: "upload",
               outline: "",
               onClick: browse
             }, {
-              default: withCtx(() => _cache[1] || (_cache[1] = [
+              default: withCtx(() => _cache[2] || (_cache[2] = [
                 createTextVNode(" Upload ")
               ])),
               _: 1
-            }),
+            })) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(storageFiles.value, (file) => {
               return openBlock(), createElementBlock("div", {
                 key: file.id,
                 class: "txt-gray txt-12 flex"
               }, [
-                createElementVNode("p", _hoisted_3$h, toDisplayString(file.name), 1),
-                createVNode(unref(Btn), {
-                  thin: "",
-                  flat: "",
-                  icon: "delete",
-                  color: "red",
-                  onClick: withModifiers(($event) => removeFile(file), ["stop"])
-                }, null, 8, ["onClick"])
+                createElementVNode("div", _hoisted_3$h, [
+                  withDirectives(createVNode(unref(Btn), {
+                    color: "gray",
+                    thin: "",
+                    icon: "delete",
+                    onClick: withModifiers(($event) => removeFile(file), ["stop"])
+                  }, null, 8, ["onClick"]), [
+                    [_directive_tooltip, "Delete"]
+                  ]),
+                  withDirectives(createVNode(unref(Btn), {
+                    color: "gray",
+                    thin: "",
+                    icon: "autorenew",
+                    onClick: browse
+                  }, null, 512), [
+                    [_directive_tooltip, "Replace"]
+                  ]),
+                  withDirectives(createVNode(unref(Btn), {
+                    href: file.url,
+                    download: file.name,
+                    color: "gray",
+                    thin: "",
+                    icon: "download",
+                    target: "_blank",
+                    onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                    }, ["stop"]))
+                  }, null, 8, ["href", "download"]), [
+                    [_directive_tooltip, "Download"]
+                  ]),
+                  withDirectives((openBlock(), createElementBlock("p", _hoisted_4$b, [
+                    createTextVNode(toDisplayString(file.name), 1)
+                  ])), [
+                    [_directive_lightbox, { src: file.url, download: true }]
+                  ]),
+                  createVNode(unref(Btn), {
+                    thin: "",
+                    flat: "",
+                    icon: "delete",
+                    color: "red",
+                    onClick: withModifiers(($event) => removeFile(file), ["stop"])
+                  }, null, 8, ["onClick"])
+                ])
               ]);
             }), 128)),
-            !storageFiles.value.length && !fileQueue.value.length ? (openBlock(), createElementBlock("span", _hoisted_4$b, " No file selected ")) : createCommentVNode("", true)
+            !storageFiles.value.length && !fileQueue.value.length ? (openBlock(), createElementBlock("span", _hoisted_5$a, " No file selected ")) : createCommentVNode("", true)
           ]),
           _: 1
         })) : (openBlock(), createElementBlock("div", {
@@ -18908,7 +18950,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             files: storageFiles.value,
             fileQueue: fileQueue.value
           }, () => [
-            _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_5$a, [
+            _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(storageFiles.value, (file) => {
                 return withDirectives((openBlock(), createElementBlock("div", {
                   key: file.id,
@@ -18919,12 +18961,12 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     class: "multi-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_6$8)) : (openBlock(), createBlock(unref(_sfc_main$c), {
+                  }, null, 8, _hoisted_7$5)) : (openBlock(), createBlock(unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  createElementVNode("p", _hoisted_7$5, toDisplayString(file.name), 1),
+                  createElementVNode("p", _hoisted_8$3, toDisplayString(file.name), 1),
                   createVNode(unref(Btn), {
                     thin: "",
                     flat: "",
@@ -18948,18 +18990,18 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                       class: "multi-preview",
                       src: fileToUrl(fileQ.file),
                       alt: ""
-                    }, null, 8, _hoisted_8$3)) : createCommentVNode("", true)
+                    }, null, 8, _hoisted_9$2)) : createCommentVNode("", true)
                   ], 64)) : (openBlock(), createBlock(unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  createElementVNode("p", _hoisted_9$2, toDisplayString(fileQ.name), 1),
+                  createElementVNode("p", _hoisted_10$2, toDisplayString(fileQ.name), 1),
                   createElementVNode("div", {
                     class: normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_10$2, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
+                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_11$1, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
                     createVNode(unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -18968,13 +19010,13 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 ]);
               }), 128))
             ])) : createCommentVNode("", true),
-            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
+            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (openBlock(), createElementBlock("div", _hoisted_12$1, [
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(storageFiles.value, (file) => {
                 return openBlock(), createElementBlock("div", {
                   key: file.id,
                   class: normalizeClass(["single-image-item-preview", { "bgl_fill-image": _ctx.fill }])
                 }, [
-                  createElementVNode("div", _hoisted_12$1, [
+                  createElementVNode("div", _hoisted_13$1, [
                     withDirectives(createVNode(unref(Btn), {
                       color: "gray",
                       thin: "",
@@ -18998,18 +19040,18 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                       thin: "",
                       icon: "download",
                       target: "_blank",
-                      onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                      onClick: _cache[1] || (_cache[1] = withModifiers(() => {
                       }, ["stop"]))
                     }, null, 8, ["href", "download"]), [
                       [_directive_tooltip, "Download"]
                     ])
                   ]),
-                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("div", _hoisted_13$1, [
+                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("div", _hoisted_14$1, [
                     withDirectives(createElementVNode("img", {
                       class: "single-preview",
                       src: file.url,
                       alt: ""
-                    }, null, 8, _hoisted_14$1), [
+                    }, null, 8, _hoisted_15$1), [
                       [_directive_lightbox, { src: file.url, download: true }]
                     ])
                   ])) : withDirectives((openBlock(), createBlock(unref(_sfc_main$c), {
@@ -19032,7 +19074,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_15$1, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
+                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
                     createVNode(unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -19043,7 +19085,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
                     alt: ""
-                  }, null, 8, _hoisted_16)) : createCommentVNode("", true)
+                  }, null, 8, _hoisted_17)) : createCommentVNode("", true)
                 ], 2);
               }), 128))
             ])) : createCommentVNode("", true)
@@ -19054,9 +19096,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             fileQueue: fileQueue.value,
             browse
           }, () => [
-            createElementVNode("p", _hoisted_17, [
+            createElementVNode("p", _hoisted_18, [
               createVNode(unref(_sfc_main$c), { icon: "upload_2" }),
-              _cache[2] || (_cache[2] = createTextVNode(" Drop files here or click to upload "))
+              _cache[3] || (_cache[3] = createTextVNode(" Drop files here or click to upload "))
             ])
           ], true) : createCommentVNode("", true)
         ], 38))
@@ -19064,7 +19106,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-36f16bdf"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-30231b53"]]);
 const _hoisted_1$u = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];

package/dist/style.css

@@ -707,7 +707,7 @@ data[data-v-6c27f163] {
 }
 }
 
-.fileUploadWrap[data-v-36f16bdf] {
+.fileUploadWrap[data-v-30231b53] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -719,7 +719,7 @@ data[data-v-6c27f163] {
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-36f16bdf] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-30231b53] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -727,14 +727,14 @@ data[data-v-6c27f163] {
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-36f16bdf],
-.fileUploadWrap[data-v-36f16bdf]:hover {
+.fileUploadWrap.dragover[data-v-30231b53],
+.fileUploadWrap[data-v-30231b53]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-36f16bdf] {
+.fileUploadWrap[style*="height: auto;"][data-v-30231b53] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-36f16bdf] {
+.multi-image-item-preview[data-v-30231b53] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -748,12 +748,12 @@ data[data-v-6c27f163] {
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-36f16bdf] {
+.multi-image-item-preview p[data-v-30231b53] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-36f16bdf]{
+.multi-preview[data-v-30231b53]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -764,17 +764,17 @@ data[data-v-6c27f163] {
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-36f16bdf]{
+.bgl-single-preview[data-v-30231b53]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-36f16bdf]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-30231b53]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-36f16bdf] {
+.single-image-item-preview[data-v-30231b53] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -782,13 +782,13 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-36f16bdf] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-30231b53] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-36f16bdf] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-30231b53] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-36f16bdf]{
+.single-preview[data-v-30231b53]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -797,7 +797,7 @@ data[data-v-6c27f163] {
 	object-fit: cover;
 	background: var(--bgl-gray-light);
 }
-.single-image-item-preview[data-v-36f16bdf]:hover::after{
+.single-image-item-preview[data-v-30231b53]:hover::after{
 	content: "zoom_in";
 	font-size: 32px;
 	font-family: "Material Symbols Outlined", serif;
@@ -807,20 +807,20 @@ data[data-v-6c27f163] {
 	z-index: 9;
 	pointer-events: none;
 }
-.single-image-item-preview:hover img[data-v-36f16bdf]{
+.single-image-item-preview:hover img[data-v-30231b53]{
 	filter: brightness(70%);
 }
-.bgl_fill-image.single-image-item-preview[data-v-36f16bdf] {
+.bgl_fill-image.single-image-item-preview[data-v-30231b53] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-36f16bdf]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-30231b53]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-36f16bdf] {
+.single-image-item-preview .pie[data-v-30231b53] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -834,31 +834,31 @@ data[data-v-6c27f163] {
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-36f16bdf] {
+.bgl_oval-upload[data-v-30231b53] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-36f16bdf] {
+.bgl_oval-upload p[data-v-30231b53] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-36f16bdf]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-30231b53]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-36f16bdf] {
+.bgl_oval-upload .pie[data-v-30231b53] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-36f16bdf] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-30231b53] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-36f16bdf]{
+.bgl_oval-upload .single-image-item-preview[data-v-30231b53]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-36f16bdf] {
+.bgl_oval-upload .single-preview[data-v-30231b53] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-36f16bdf] {
+.pie[data-v-30231b53] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -866,7 +866,7 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-36f16bdf]:before {
+.pie[data-v-30231b53]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -884,26 +884,26 @@ data[data-v-6c27f163] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-36f16bdf] {
+.pie .success[data-v-30231b53] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-36f16bdf] {
+.pie .progress[data-v-30231b53] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-36f16bdf] {
+.pie.complete .progress[data-v-30231b53] {
 	display: none;
 }
-.pie.complete .success[data-v-36f16bdf] {
+.pie.complete .success[data-v-30231b53] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-36f16bdf]:before {
+.pie.complete[data-v-30231b53]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-36f16bdf] {
+.pie.complete[data-v-30231b53] {
 	color: var(--bgl-green);
 }
 

package/package.json

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

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

@@ -38,45 +38,66 @@ interface QueueFile {
 
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
 
-let file_bindkeys = $ref<FSValue>(props.modelValue || [])
+const file_bindkeys = defineModel('modelValue', { default: () => [] as FSValue })
 const storageFiles = $ref<StorageFile[]>([])
 
-async function fetchFiles() {
+async function fetchTopicFiles() {
 	const files = await bagel.get<StorageFile[]>(`/files?topic=${props.topic}`)
 	storageFiles.push(...files)
 }
 
-onMounted(() => {
-	if (props.topic) fetchFiles()
-	if (!props.files && [file_bindkeys].flat().length > 0) {
-		const ids = [file_bindkeys].flat().filter(Boolean) as (string | number)[] | undefined
-		if (!ids?.length) return
-		if (bindKey === 'url') {
-			ids.forEach((url) => {
-				storageFiles.push({ url } as StorageFile)
-			})
-			return
-		}
-		if (props.multiple) {
-			ids.forEach((id) => {
-				void bagel
-					.get<StorageFile>(`/files/${id}`)
-					.then((file) => {
-						storageFiles.push(file)
-					})
-					.catch(console.error)
-			})
-		} else {
+function loadFiles() {
+	const ids = ([file_bindkeys.value].flat().filter(Boolean) as unknown) as (string | number)[]
+	if (!ids.length) {
+		storageFiles.splice(0, storageFiles.length)
+		return
+	}
+
+	const currentIds = storageFiles.map(file => file[bindKey])
+	const idsToAdd = ids.filter(id => !currentIds.includes(id))
+	const idsToRemove = currentIds.filter((id): id is string | number => (typeof id === 'string' || typeof id === 'number') && !ids.includes(id))
+
+	idsToRemove.forEach((id) => {
+		const index = storageFiles.findIndex(file => file[bindKey] === id)
+		if (index !== -1) storageFiles.splice(index, 1)
+	})
+
+	if (bindKey === 'url') {
+		idsToAdd.forEach((url) => {
+			storageFiles.push({ url } as StorageFile)
+		})
+		return
+	}
+
+	if (props.multiple) {
+		idsToAdd.forEach((id) => {
 			void bagel
-				.get<StorageFile>(`/files/${ids[0]}`)
+				.get<StorageFile>(`/files/${id}`)
 				.then((file) => {
 					storageFiles.push(file)
 				})
 				.catch(console.error)
-		}
+		})
+	} else {
+		void bagel
+			.get<StorageFile>(`/files/${idsToAdd[0]}`)
+			.then((file) => {
+				storageFiles.push(file)
+			})
+			.catch(console.error)
+	}
+}
+
+onMounted(() => {
+	if (props.topic) fetchTopicFiles()
+	if (!props.files && [file_bindkeys.value].flat().length > 0) {
+		loadFiles()
 	}
 })
 
+watch(() => props.topic, fetchTopicFiles)
+watch(() => props.modelValue, loadFiles)
+
 watch(
 	() => props.files,
 	(newFiles) => {
@@ -100,18 +121,6 @@ function compareLists(a: any, b: any) {
 		.every((id: any) => [b].flat().includes(id)) && [b].flat().every(id => [a].flat().includes(id))
 }
 
-watch(() => props.modelValue, (newVal: FSValue = []) => {
-	console.log(newVal)
-	const isSame = compareLists(file_bindkeys, newVal)
-	if (!isSame) {
-		file_bindkeys = newVal
-		for (const fle of storageFiles) {
-			const index = [file_bindkeys].flat().findIndex(key => fle[bindKey] === key)
-			if (index === -1) storageFiles.splice(index, 1)
-		}
-	}
-})
-
 function updateModelValue() {
 	let idValue: FSValue
 	if (props.multiple) {
@@ -119,10 +128,9 @@ function updateModelValue() {
 	} else {
 		idValue = (storageFiles[0][bindKey] as string) || ''
 	}
-	const isSame = compareLists(file_bindkeys, idValue)
+	const isSame = compareLists(file_bindkeys.value, idValue)
 	if (!isSame) {
-		file_bindkeys = idValue
-		emit('update:modelValue', file_bindkeys)
+		file_bindkeys.value = idValue
 	}
 }
 
@@ -210,6 +218,7 @@ function drop(e: DragEvent) {
 			@drop="drop"
 		>
 			<Btn
+				v-if="!storageFiles.length && !fileQueue.length"
 				class="px-1-5"
 				icon="upload"
 				outline
@@ -217,17 +226,32 @@ function drop(e: DragEvent) {
 			>
 				Upload
 			</Btn>
+
 			<div v-for="file in storageFiles" :key="file.id" class="txt-gray txt-12 flex">
-				<p class="ellipsis-1 word-break-all h-20 m-0">
-					{{ file.name }}
-				</p>
-				<Btn
-					thin
-					flat
-					icon="delete"
-					color="red"
-					@click.stop="removeFile(file)"
-				/>
+				<div class="m-05 flex opacity-7 z-99">
+					<Btn v-tooltip="'Delete'" color="gray" thin icon="delete" @click.stop="removeFile(file)" />
+					<Btn
+						v-tooltip="'Replace'" color="gray" thin icon="autorenew"
+						@click="browse"
+					/>
+					<Btn
+						v-tooltip="'Download'"
+						:href="file.url" :download="file.name"
+						color="gray" thin icon="download"
+						target="_blank"
+						@click.stop
+					/>
+					<p v-lightbox="{ src: file.url, download: true }" class="ellipsis-1 word-break-all h-20 m-0">
+						{{ file.name }}
+					</p>
+					<Btn
+						thin
+						flat
+						icon="delete"
+						color="red"
+						@click.stop="removeFile(file)"
+					/>
+				</div>
 			</div>
 			<span v-if="!storageFiles.length && !fileQueue.length" class="txt-gray txt-12">
 				No file selected