@bagelink/vue 0.0.884 → 0.0.889

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

@@ -83,6 +83,7 @@ declare const __VLS_component: import('vue').DefineComponent<{
     topic?: string;
     fill?: boolean;
     oval?: boolean;
+    theme?: "dropzone" | "basic";
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     addFileStart: (...args: any[]) => void;
@@ -97,6 +98,7 @@ declare const __VLS_component: import('vue').DefineComponent<{
     topic?: string;
     fill?: boolean;
     oval?: boolean;
+    theme?: "dropzone" | "basic";
 }> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onAddFileStart?: ((...args: any[]) => any) | undefined;

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":"AA8hBA,OAAO,EAAmC,KAAK,WAAW,EAAY,MAAM,eAAe,CAAA;AAK3F,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;AAmJzC,iBAAS,MAAM,SAgBd;AA6BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAxKZ,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YAgdQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;0BAndnB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YAide,GAAG;;;WASvB,OAAO,IAA6B;EAEjD;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YA1gBZ,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;;YATN,MAAM;eACH,OAAO;YACV,WAAW,GAAG,WAAW,EAAE;cACzB,MAAM;iBACH,OAAO;YACZ,MAAM;aACL,MAAM,GAAG,MAAM;YAChB,MAAM;WACP,OAAO;WACP,OAAO;;;;kFAwgBb,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":"AAskBA,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;AAsJzC,iBAAS,MAAM,SAgBd;AA6BD,iBAAS,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA1KZ,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YA+kBS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;0BAllBpB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YAglBe,GAAG;;;WASvB,OAAO,IAA6B;EAEjD;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YA5oBZ,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;;;;;YAVpB,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;;;;kFAyoB3B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -94,7 +94,7 @@ declare function __VLS_template(): {
             };
             $forceUpdate: () => void;
             $nextTick: typeof import('vue').nextTick;
-            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (... /** @type { [typeof __VLS_components.Icon, ] } */args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
         } & Readonly<{}> & Omit<Readonly<{
             value?: string;
             thin?: boolean;
@@ -229,6 +229,7 @@ declare function __VLS_template(): {
             modelValue: string | number;
             debounceDelay: number;
         }> | null;
+        trigger: HTMLButtonElement;
         selectOptions: HTMLDivElement;
     };
     attrs: Partial<{}>;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAwaA,OAAO,EAMN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AA+N/B,iBAAS,cAAc;;sBA4RI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA9EzB,GAAG,8CACmB,GAAE,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAyFjF,OAAO,IAA6B;EAEjD;AAmCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAxiBX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;;aAdvC,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;kFAiiB/C,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":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAobA,OAAO,EAMN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AA2O/B,iBAAS,cAAc;;sBA8RI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAzFrB,GAAG,8CACmB,GAAG,yBAAyB,GAC3D,CAAA,iDAAiD,6DAAd,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAoGxB,OAAO,IAA6B;EAEjD;AAoCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAxjBX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;;aAdvC,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;kFAijB/C,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

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

package/dist/index.cjs

@@ -18628,34 +18628,39 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$v = { class: "bagel-input" };
-const _hoisted_2$l = {
+const _hoisted_2$l = { class: "ellipsis-1 word-break-all h-20 m-0" };
+const _hoisted_3$h = {
+  key: 0,
+  class: "txt-gray txt-12"
+};
+const _hoisted_4$c = {
   key: 0,
   class: "bgl-multi-preview"
 };
-const _hoisted_3$h = ["src"];
-const _hoisted_4$c = { class: "m-0" };
-const _hoisted_5$a = ["width", "src"];
-const _hoisted_6$8 = { class: "no-margin multi-preview-txt" };
-const _hoisted_7$5 = {
+const _hoisted_5$a = ["src"];
+const _hoisted_6$8 = { class: "m-0" };
+const _hoisted_7$5 = ["width", "src"];
+const _hoisted_8$3 = { class: "no-margin multi-preview-txt" };
+const _hoisted_9$2 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_8$3 = {
+const _hoisted_10$2 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_9$2 = {
+const _hoisted_11$1 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_10$2 = ["src"];
-const _hoisted_11$1 = { class: "position-start m-05 gap-025 flex" };
-const _hoisted_12 = {
+const _hoisted_12 = ["src"];
+const _hoisted_13 = { class: "position-start m-05 flex opacity-7" };
+const _hoisted_14 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_13 = ["src"];
-const _hoisted_14 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _hoisted_15 = ["src"];
+const _hoisted_16 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
 const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
   props: {
@@ -18668,7 +18673,8 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     height: {},
     topic: {},
     fill: { type: Boolean },
-    oval: { type: Boolean }
+    oval: { type: Boolean },
+    theme: {}
   },
   emits: ["update:modelValue", "addFileStart"],
   setup(__props, { emit: __emit }) {
@@ -18719,6 +18725,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
       },
       { immediate: true }
     );
+    const theme = props2.theme || "dropzone";
     vue.watch(() => props2.modelValue, () => {
       const newModelValue = props2.modelValue || [];
       const currentValue = [file_bindkeys.value].flat();
@@ -18814,7 +18821,45 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
       const _directive_tooltip = vue.resolveDirective("tooltip");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
-        vue.createElementVNode("div", {
+        vue.unref(theme) === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$R), {
+          key: 0,
+          outline: "",
+          class: "flex p-05 gap-1",
+          onDragover: dragover,
+          onDrop: drop3
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(Btn), {
+              class: "px-1-5",
+              icon: "upload",
+              outline: "",
+              onClick: browse
+            }, {
+              default: vue.withCtx(() => _cache[1] || (_cache[1] = [
+                vue.createTextVNode(" Upload ")
+              ])),
+              _: 1
+            }),
+            (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_2$l, 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"])
+              ]);
+            }), 128)),
+            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$h, " No file selected ")) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        })) : (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
           class: vue.normalizeClass(["fileUploadWrap", {
             "fileDropZone": !storageFiles.value.length && !fileQueue.value.length,
             "dragover": vue.unref(isDragOver),
@@ -18830,7 +18875,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
             files: storageFiles.value,
             fileQueue: fileQueue.value
           }, () => [
-            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$l, [
+            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$c, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: file.id,
@@ -18841,14 +18886,14 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                     class: "multi-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_3$h)), [
+                  }, null, 8, _hoisted_5$a)), [
                     [_directive_lightbox]
                   ]) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  vue.createElementVNode("p", _hoisted_4$c, vue.toDisplayString(file.name), 1),
+                  vue.createElementVNode("p", _hoisted_6$8, vue.toDisplayString(file.name), 1),
                   vue.createVNode(vue.unref(Btn), {
                     thin: "",
                     flat: "",
@@ -18870,18 +18915,18 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                       class: "multi-preview",
                       src: fileToUrl(fileQ.file),
                       alt: ""
-                    }, null, 8, _hoisted_5$a)) : vue.createCommentVNode("", true)
+                    }, null, 8, _hoisted_7$5)) : vue.createCommentVNode("", true)
                   ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  vue.createElementVNode("p", _hoisted_6$8, vue.toDisplayString(fileQ.name), 1),
+                  vue.createElementVNode("p", _hoisted_8$3, 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_7$5, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
+                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_9$2, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
                     vue.createVNode(vue.unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -18890,21 +18935,21 @@ 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_8$3, [
+            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$2, [
               (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 }])
                 }, [
-                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [
+                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [
                     vue.withDirectives(vue.createElementVNode("img", {
                       class: "single-preview",
                       src: file.url,
                       alt: ""
-                    }, null, 8, _hoisted_10$2), [
+                    }, null, 8, _hoisted_12), [
                       [_directive_lightbox]
                     ]),
-                    vue.createElementVNode("div", _hoisted_11$1, [
+                    vue.createElementVNode("div", _hoisted_13, [
                       vue.withDirectives(vue.createVNode(vue.unref(Btn), {
                         color: "gray",
                         thin: "",
@@ -18920,6 +18965,18 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                         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.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
@@ -18940,7 +18997,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_12, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
+                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
                     vue.createVNode(vue.unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -18951,7 +19008,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
                     alt: ""
-                  }, null, 8, _hoisted_13)) : vue.createCommentVNode("", true)
+                  }, null, 8, _hoisted_15)) : vue.createCommentVNode("", true)
                 ], 2);
               }), 128))
             ])) : vue.createCommentVNode("", true)
@@ -18962,17 +19019,17 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
             fileQueue: fileQueue.value,
             browse
           }, () => [
-            vue.createElementVNode("p", _hoisted_14, [
+            vue.createElementVNode("p", _hoisted_16, [
               vue.createVNode(vue.unref(_sfc_main$c), { icon: "upload_2" }),
-              _cache[0] || (_cache[0] = vue.createTextVNode(" Drop files here or click to upload "))
+              _cache[2] || (_cache[2] = vue.createTextVNode(" Drop files here or click to upload "))
             ])
           ], true) : vue.createCommentVNode("", true)
-        ], 38)
+        ], 38))
       ]);
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-bfb0bd63"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-80a466d2"]]);
 const _hoisted_1$u = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
@@ -43998,6 +44055,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     const searchPlaceholder = vue.computed(() => props2.searchPlaceholder || "Search");
     const searchInput = vue.ref();
+    const trigger = vue.ref();
     let selectedItems = vue.ref([]);
     const selectedItemCount = vue.computed(() => selectedItems.value.length ?? 0);
     let search = vue.ref("");
@@ -44040,6 +44098,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     let highlightedIndex = vue.ref(0);
     const selectOptions = vue.ref();
     function navigate(direction) {
+      console.log("navigate", direction);
       if (direction === "up") {
         highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : filteredOptions.value.length - 1;
       } else if (direction === "down") {
@@ -44053,7 +44112,19 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     }
     const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
     function updateOpen(visible) {
+      var _a2;
+      console.log("updateOpen", visible);
       open.value = visible;
+      if (open.value) {
+        (_a2 = dropdown.value) == null ? void 0 : _a2.show();
+      } else {
+        setTimeout(() => {
+          var _a3;
+          if (trigger.value) trigger.value.focus();
+          if (searchInput.value) searchInput.value.focus();
+          (_a3 = dropdown.value) == null ? void 0 : _a3.hide();
+        }, 10);
+      }
       if (!open.value) {
         if (props2.searchable && !props2.multiselect && !search.value && !selected.value) {
           selectedItems.value = [];
@@ -44063,12 +44134,12 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
         }
         highlightedIndex.value = -1;
         search.value = "";
-      } else {
-        if (props2.searchable && !props2.multiselect && selectedItemCount.value) search.value = selectedLabel.value;
+      } else if (props2.searchable && !props2.multiselect && selectedItemCount.value) {
+        search.value = selectedLabel.value;
         setTimeout(
           () => {
-            var _a2, _b, _c;
-            return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
+            var _a3, _b, _c;
+            return (_c = (_b = (_a3 = searchInput.value) == null ? void 0 : _a3.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
           },
           100
         );
@@ -44161,7 +44232,6 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
         ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput",
-        noAutoFocus: "",
         onHide: _cache[10] || (_cache[10] = ($event) => updateOpen(false))
       }, {
         trigger: vue.withCtx(() => [
@@ -44186,11 +44256,13 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                 ]
               }, null, 8, ["modelValue", "placeholder"])) : (vue.openBlock(), vue.createElementBlock("button", {
                 key: 1,
+                ref_key: "trigger",
+                ref: trigger,
                 disabled: _ctx.disabled,
                 type: "button",
                 class: vue.normalizeClass(["selectinput-btn", { isEmpty: selectedItemCount.value === 0 }]),
                 onFocus: openOptions,
-                onClick: _cache[6] || (_cache[6] = ($event) => updateOpen(true))
+                onClick: _cache[6] || (_cache[6] = vue.withModifiers(($event) => updateOpen(true), ["stop"]))
               }, [
                 _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                   key: 0,
@@ -44284,7 +44356,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-0ea75792"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-973e8b39"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -55383,7 +55455,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c8e5a3c4"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f5f9581d"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {

package/dist/index.mjs

@@ -18626,34 +18626,39 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$v = { class: "bagel-input" };
-const _hoisted_2$l = {
+const _hoisted_2$l = { class: "ellipsis-1 word-break-all h-20 m-0" };
+const _hoisted_3$h = {
+  key: 0,
+  class: "txt-gray txt-12"
+};
+const _hoisted_4$c = {
   key: 0,
   class: "bgl-multi-preview"
 };
-const _hoisted_3$h = ["src"];
-const _hoisted_4$c = { class: "m-0" };
-const _hoisted_5$a = ["width", "src"];
-const _hoisted_6$8 = { class: "no-margin multi-preview-txt" };
-const _hoisted_7$5 = {
+const _hoisted_5$a = ["src"];
+const _hoisted_6$8 = { class: "m-0" };
+const _hoisted_7$5 = ["width", "src"];
+const _hoisted_8$3 = { class: "no-margin multi-preview-txt" };
+const _hoisted_9$2 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_8$3 = {
+const _hoisted_10$2 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_9$2 = {
+const _hoisted_11$1 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_10$2 = ["src"];
-const _hoisted_11$1 = { class: "position-start m-05 gap-025 flex" };
-const _hoisted_12 = {
+const _hoisted_12 = ["src"];
+const _hoisted_13 = { class: "position-start m-05 flex opacity-7" };
+const _hoisted_14 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_13 = ["src"];
-const _hoisted_14 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _hoisted_15 = ["src"];
+const _hoisted_16 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "FileUpload",
   props: {
@@ -18666,7 +18671,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     height: {},
     topic: {},
     fill: { type: Boolean },
-    oval: { type: Boolean }
+    oval: { type: Boolean },
+    theme: {}
   },
   emits: ["update:modelValue", "addFileStart"],
   setup(__props, { emit: __emit }) {
@@ -18717,6 +18723,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
+    const theme = props2.theme || "dropzone";
     watch(() => props2.modelValue, () => {
       const newModelValue = props2.modelValue || [];
       const currentValue = [file_bindkeys.value].flat();
@@ -18812,7 +18819,45 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", _hoisted_1$v, [
         createElementVNode("label", null, toDisplayString(_ctx.label), 1),
-        createElementVNode("div", {
+        unref(theme) === "basic" ? (openBlock(), createBlock(unref(_sfc_main$R), {
+          key: 0,
+          outline: "",
+          class: "flex p-05 gap-1",
+          onDragover: dragover,
+          onDrop: drop3
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(Btn), {
+              class: "px-1-5",
+              icon: "upload",
+              outline: "",
+              onClick: browse
+            }, {
+              default: withCtx(() => _cache[1] || (_cache[1] = [
+                createTextVNode(" Upload ")
+              ])),
+              _: 1
+            }),
+            (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_2$l, toDisplayString(file.name), 1),
+                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_3$h, " No file selected ")) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })) : (openBlock(), createElementBlock("div", {
+          key: 1,
           class: normalizeClass(["fileUploadWrap", {
             "fileDropZone": !storageFiles.value.length && !fileQueue.value.length,
             "dragover": unref(isDragOver),
@@ -18828,7 +18873,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             files: storageFiles.value,
             fileQueue: fileQueue.value
           }, () => [
-            _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_2$l, [
+            _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(storageFiles.value, (file) => {
                 return openBlock(), createElementBlock("div", {
                   key: file.id,
@@ -18839,14 +18884,14 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     class: "multi-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, _hoisted_3$h)), [
+                  }, null, 8, _hoisted_5$a)), [
                     [_directive_lightbox]
                   ]) : (openBlock(), createBlock(unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  createElementVNode("p", _hoisted_4$c, toDisplayString(file.name), 1),
+                  createElementVNode("p", _hoisted_6$8, toDisplayString(file.name), 1),
                   createVNode(unref(Btn), {
                     thin: "",
                     flat: "",
@@ -18868,18 +18913,18 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                       class: "multi-preview",
                       src: fileToUrl(fileQ.file),
                       alt: ""
-                    }, null, 8, _hoisted_5$a)) : createCommentVNode("", true)
+                    }, null, 8, _hoisted_7$5)) : createCommentVNode("", true)
                   ], 64)) : (openBlock(), createBlock(unref(_sfc_main$c), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  createElementVNode("p", _hoisted_6$8, toDisplayString(fileQ.name), 1),
+                  createElementVNode("p", _hoisted_8$3, 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_7$5, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
+                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_9$2, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
                     createVNode(unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -18888,21 +18933,21 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 ]);
               }), 128))
             ])) : createCommentVNode("", true),
-            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (openBlock(), createElementBlock("div", _hoisted_8$3, [
+            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (openBlock(), createElementBlock("div", _hoisted_10$2, [
               (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 }])
                 }, [
-                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("div", _hoisted_9$2, [
+                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
                     withDirectives(createElementVNode("img", {
                       class: "single-preview",
                       src: file.url,
                       alt: ""
-                    }, null, 8, _hoisted_10$2), [
+                    }, null, 8, _hoisted_12), [
                       [_directive_lightbox]
                     ]),
-                    createElementVNode("div", _hoisted_11$1, [
+                    createElementVNode("div", _hoisted_13, [
                       withDirectives(createVNode(unref(Btn), {
                         color: "gray",
                         thin: "",
@@ -18918,6 +18963,18 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                         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"]
                       ])
                     ])
                   ])) : (openBlock(), createBlock(unref(_sfc_main$c), {
@@ -18938,7 +18995,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_12, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
+                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
                     createVNode(unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -18949,7 +19006,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
                     alt: ""
-                  }, null, 8, _hoisted_13)) : createCommentVNode("", true)
+                  }, null, 8, _hoisted_15)) : createCommentVNode("", true)
                 ], 2);
               }), 128))
             ])) : createCommentVNode("", true)
@@ -18960,17 +19017,17 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             fileQueue: fileQueue.value,
             browse
           }, () => [
-            createElementVNode("p", _hoisted_14, [
+            createElementVNode("p", _hoisted_16, [
               createVNode(unref(_sfc_main$c), { icon: "upload_2" }),
-              _cache[0] || (_cache[0] = createTextVNode(" Drop files here or click to upload "))
+              _cache[2] || (_cache[2] = createTextVNode(" Drop files here or click to upload "))
             ])
           ], true) : createCommentVNode("", true)
-        ], 38)
+        ], 38))
       ]);
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-bfb0bd63"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-80a466d2"]]);
 const _hoisted_1$u = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
@@ -43996,6 +44053,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const searchPlaceholder = computed(() => props2.searchPlaceholder || "Search");
     const searchInput = ref();
+    const trigger = ref();
     let selectedItems = ref([]);
     const selectedItemCount = computed(() => selectedItems.value.length ?? 0);
     let search = ref("");
@@ -44038,6 +44096,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     let highlightedIndex = ref(0);
     const selectOptions = ref();
     function navigate(direction) {
+      console.log("navigate", direction);
       if (direction === "up") {
         highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : filteredOptions.value.length - 1;
       } else if (direction === "down") {
@@ -44051,7 +44110,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     }
     const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
     function updateOpen(visible) {
+      var _a2;
+      console.log("updateOpen", visible);
       open.value = visible;
+      if (open.value) {
+        (_a2 = dropdown.value) == null ? void 0 : _a2.show();
+      } else {
+        setTimeout(() => {
+          var _a3;
+          if (trigger.value) trigger.value.focus();
+          if (searchInput.value) searchInput.value.focus();
+          (_a3 = dropdown.value) == null ? void 0 : _a3.hide();
+        }, 10);
+      }
       if (!open.value) {
         if (props2.searchable && !props2.multiselect && !search.value && !selected.value) {
           selectedItems.value = [];
@@ -44061,12 +44132,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         }
         highlightedIndex.value = -1;
         search.value = "";
-      } else {
-        if (props2.searchable && !props2.multiselect && selectedItemCount.value) search.value = selectedLabel.value;
+      } else if (props2.searchable && !props2.multiselect && selectedItemCount.value) {
+        search.value = selectedLabel.value;
         setTimeout(
           () => {
-            var _a2, _b, _c;
-            return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
+            var _a3, _b, _c;
+            return (_c = (_b = (_a3 = searchInput.value) == null ? void 0 : _a3.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
           },
           100
         );
@@ -44159,7 +44230,6 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         ref: dropdown,
         placement: "bottom-start",
         class: "bagel-input selectinput",
-        noAutoFocus: "",
         onHide: _cache[10] || (_cache[10] = ($event) => updateOpen(false))
       }, {
         trigger: withCtx(() => [
@@ -44184,11 +44254,13 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                 ]
               }, null, 8, ["modelValue", "placeholder"])) : (openBlock(), createElementBlock("button", {
                 key: 1,
+                ref_key: "trigger",
+                ref: trigger,
                 disabled: _ctx.disabled,
                 type: "button",
                 class: normalizeClass(["selectinput-btn", { isEmpty: selectedItemCount.value === 0 }]),
                 onFocus: openOptions,
-                onClick: _cache[6] || (_cache[6] = ($event) => updateOpen(true))
+                onClick: _cache[6] || (_cache[6] = withModifiers(($event) => updateOpen(true), ["stop"]))
               }, [
                 _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
                   key: 0,
@@ -44282,7 +44354,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-0ea75792"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-973e8b39"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -55381,7 +55453,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c8e5a3c4"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f5f9581d"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {

package/dist/style.css

@@ -706,7 +706,7 @@ data[data-v-6c27f163] {
 }
 }
 
-.fileUploadWrap[data-v-bfb0bd63] {
+.fileUploadWrap[data-v-80a466d2] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -718,7 +718,7 @@ data[data-v-6c27f163] {
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-bfb0bd63] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-80a466d2] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -726,14 +726,14 @@ data[data-v-6c27f163] {
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-bfb0bd63],
-.fileUploadWrap[data-v-bfb0bd63]:hover {
+.fileUploadWrap.dragover[data-v-80a466d2],
+.fileUploadWrap[data-v-80a466d2]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-bfb0bd63] {
+.fileUploadWrap[style*="height: auto;"][data-v-80a466d2] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-bfb0bd63] {
+.multi-image-item-preview[data-v-80a466d2] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -747,12 +747,12 @@ data[data-v-6c27f163] {
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-bfb0bd63] {
+.multi-image-item-preview p[data-v-80a466d2] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-bfb0bd63]{
+.multi-preview[data-v-80a466d2]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -763,17 +763,17 @@ data[data-v-6c27f163] {
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-bfb0bd63]{
+.bgl-single-preview[data-v-80a466d2]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-bfb0bd63]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-80a466d2]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-bfb0bd63] {
+.single-image-item-preview[data-v-80a466d2] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -781,13 +781,13 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-bfb0bd63] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-80a466d2] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-bfb0bd63] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-80a466d2] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-bfb0bd63]{
+.single-preview[data-v-80a466d2]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -796,7 +796,7 @@ data[data-v-6c27f163] {
 	object-fit: cover;
 	background: var(--bgl-gray-light);
 }
-.single-image-item-preview[data-v-bfb0bd63]:hover::after{
+.single-image-item-preview[data-v-80a466d2]:hover::after{
 	content: "zoom_in";
 	font-size: 32px;
 	font-family: "Material Symbols Outlined", serif;
@@ -806,20 +806,20 @@ data[data-v-6c27f163] {
 	z-index: 9;
 	pointer-events: none;
 }
-.single-image-item-preview:hover img[data-v-bfb0bd63]{
+.single-image-item-preview:hover img[data-v-80a466d2]{
 	filter: brightness(70%);
 }
-.bgl_fill-image.single-image-item-preview[data-v-bfb0bd63] {
+.bgl_fill-image.single-image-item-preview[data-v-80a466d2] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-bfb0bd63]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-80a466d2]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-bfb0bd63] {
+.single-image-item-preview .pie[data-v-80a466d2] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -833,31 +833,31 @@ data[data-v-6c27f163] {
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-bfb0bd63] {
+.bgl_oval-upload[data-v-80a466d2] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-bfb0bd63] {
+.bgl_oval-upload p[data-v-80a466d2] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-bfb0bd63]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-80a466d2]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-bfb0bd63] {
+.bgl_oval-upload .pie[data-v-80a466d2] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-bfb0bd63] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-80a466d2] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-bfb0bd63]{
+.bgl_oval-upload .single-image-item-preview[data-v-80a466d2]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-bfb0bd63] {
+.bgl_oval-upload .single-preview[data-v-80a466d2] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-bfb0bd63] {
+.pie[data-v-80a466d2] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -865,7 +865,7 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-bfb0bd63]:before {
+.pie[data-v-80a466d2]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -883,26 +883,26 @@ data[data-v-6c27f163] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-bfb0bd63] {
+.pie .success[data-v-80a466d2] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-bfb0bd63] {
+.pie .progress[data-v-80a466d2] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-bfb0bd63] {
+.pie.complete .progress[data-v-80a466d2] {
 	display: none;
 }
-.pie.complete .success[data-v-bfb0bd63] {
+.pie.complete .success[data-v-80a466d2] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-bfb0bd63]:before {
+.pie.complete[data-v-80a466d2]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-bfb0bd63] {
+.pie.complete[data-v-80a466d2] {
 	color: var(--bgl-green);
 }
 
@@ -1316,10 +1316,10 @@ p {
 } */
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-0ea75792] {
+.selectinput[data-v-973e8b39] {
 	width: 100%;
 }
-.selectinput-option[data-v-0ea75792] {
+.selectinput-option[data-v-973e8b39] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1331,23 +1331,23 @@ p {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-0ea75792]{
+.selectinput-option .bgl_icon-font[data-v-973e8b39]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-0ea75792] {
+.selectinput-options.multiselect .selectinput-option[data-v-973e8b39] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-0ea75792] {
+.selectinput-options[data-v-973e8b39] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-0ea75792]:hover, .highlight[data-v-0ea75792] {
+.selectinput-option[data-v-973e8b39]:hover, .highlight[data-v-973e8b39] {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-0ea75792] {
+.isEmpty p[data-v-973e8b39] {
 	opacity: 0.3;
 }
-.selected[data-v-0ea75792]{
+.selected[data-v-973e8b39]{
 	/* background: var(--bgl-primary-tint); */
 	background: var(--bgl-selected);
 }
@@ -2841,6 +2841,9 @@ svg.leaflet-image-layer.leaflet-interactive path {
     opacity: 1;
     pointer-events: all;
 }
+body:has(.bg-dark.is-active) {
+    overflow: hidden;
+}
 
 .is-side.bg-dark.is-active {
     opacity: 1;
@@ -3485,19 +3488,19 @@ tbody tr[data-v-d8ca38b1]:hover {
   -moz-user-drag: none;
 }
 
-.lightbox-image[data-v-c8e5a3c4]{
+.lightbox-image[data-v-f5f9581d]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-c8e5a3c4] {
+.bgl-lightbox-overlay[data-v-f5f9581d] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-c8e5a3c4] {
+.bgl-lightbox[data-v-f5f9581d] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-c8e5a3c4]{
-	animation: 500ms ease bgl-lightbox-load-c8e5a3c4;
+.bgl-lightbox-item[data-v-f5f9581d]{
+	animation: 500ms ease bgl-lightbox-load-f5f9581d;
 }
-@keyframes bgl-lightbox-load-c8e5a3c4 {
+@keyframes bgl-lightbox-load-f5f9581d {
 from {
     scale:0.7;
 }
@@ -3505,32 +3508,32 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-c8e5a3c4] * {
+.bgl-lightbox-item[data-v-f5f9581d] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-c8e5a3c4;
+	animation: 200ms ease bgl-lightbox-load-f5f9581d;
 }
-.navigation[data-v-c8e5a3c4] {
+.navigation[data-v-f5f9581d] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-c8e5a3c4] {
+.navigation-btn[data-v-f5f9581d] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-c8e5a3c4] {
+.thumbnail[data-v-f5f9581d] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-c8e5a3c4]:hover {
+.thumbnail[data-v-f5f9581d]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-c8e5a3c4]:active {
+.thumbnail[data-v-f5f9581d]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-c8e5a3c4] {
+.thumbnail.active[data-v-f5f9581d] {
 	opacity: 1;
 	outline: 2px solid white;
 }

package/package.json

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

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Btn, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel } from '@bagelink/vue'
+import { Btn, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel, Card } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 
 type StrKey = keyof StorageFile
@@ -17,6 +17,7 @@ const props = defineProps<{
 	topic?: string
 	fill?: boolean
 	oval?: boolean
+	theme?: 'dropzone' | 'basic'
 }>()
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -89,6 +90,8 @@ watch(
 	{ immediate: true }
 )
 
+const theme = props.theme || 'dropzone'
+
 watch(() => props.modelValue, () => {
 	const newModelValue: FSValue = props.modelValue || []
 	const currentValue = [file_bindkeys].flat()
@@ -196,7 +199,37 @@ function drop(e: DragEvent) {
 		<label>
 			{{ label }}
 		</label>
+
+		<Card
+			v-if="theme === 'basic'" outline class="flex p-05 gap-1" @dragover="dragover"
+			@drop="drop"
+		>
+			<Btn
+				class="px-1-5"
+				icon="upload"
+				outline
+				@click="browse"
+			>
+				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>
+			<span v-if="!storageFiles.length && !fileQueue.length" class="txt-gray txt-12">
+				No file selected
+			</span>
+		</Card>
 		<div
+			v-else
 			class="fileUploadWrap"
 			:class="{
 				'fileDropZone': !storageFiles.length && !fileQueue.length,
@@ -272,12 +305,19 @@ function drop(e: DragEvent) {
 					>
 						<div v-if="isImage(file.extension || file.url)" class="h-100">
 							<img v-lightbox class="single-preview" :src="file.url" alt="">
-							<div class="position-start m-05 gap-025 flex">
+							<div class="position-start m-05 flex opacity-7">
 								<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
+								/>
 							</div>
 						</div>
 						<Icon v-else :size="4" weight="2" icon="draft" class="color-primary w-100" />

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

@@ -35,6 +35,7 @@ const emit = defineEmits(['update:modelValue']) // Add 'search' event
 const searchPlaceholder = $computed(() => props.searchPlaceholder || 'Search')
 
 const searchInput = $ref<HTMLInputElement | undefined>()
+const trigger = $ref<HTMLButtonElement | undefined>()
 
 let selectedItems = $ref<Option[]>([])
 
@@ -97,6 +98,7 @@ let highlightedIndex = $ref(0)
 const selectOptions = $ref<HTMLElement | undefined>()
 
 function navigate(direction: 'up' | 'down') {
+	console.log('navigate', direction)
 	if (direction === 'up') {
 		highlightedIndex = highlightedIndex > 0 ? highlightedIndex - 1 : filteredOptions.length - 1
 	} else if (direction === 'down') {
@@ -111,7 +113,17 @@ function navigate(direction: 'up' | 'down') {
 const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
 
 function updateOpen(visible: boolean) {
+	console.log('updateOpen', visible)
 	open = visible
+
+	if (open) { dropdown?.show() }
+	else {
+		setTimeout(() => {
+			if (trigger) trigger.focus()
+			if (searchInput) searchInput.focus()
+			dropdown?.hide()
+		}, 10)
+	}
 	if (!open) {
 		if (props.searchable && !props.multiselect && !search && !selected) { selectedItems = []
 		}
@@ -121,8 +133,8 @@ function updateOpen(visible: boolean) {
 		highlightedIndex = -1
 		search = ''
 	}
-	else {
-		if (props.searchable && !props.multiselect && selectedItemCount) search = selectedLabel as string
+	else if (props.searchable && !props.multiselect && selectedItemCount) {
+		search = selectedLabel as string
 		setTimeout(
 			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
 			100,
@@ -231,7 +243,6 @@ onMounted(() => {
 		ref="dropdown"
 		placement="bottom-start"
 		class="bagel-input selectinput"
-		noAutoFocus
 		@hide="updateOpen(false)"
 	>
 		<template #trigger>
@@ -253,12 +264,13 @@ onMounted(() => {
 					/>
 					<button
 						v-else
+						ref="trigger"
 						:disabled="disabled"
 						type="button"
 						class="selectinput-btn"
 						:class="{ isEmpty: selectedItemCount === 0 }"
 						@focus="openOptions"
-						@click="updateOpen(true)"
+						@click.stop="updateOpen(true)"
 					>
 						<Icon v-if="icon" :icon="icon" />
 						<p v-if="!hideLabel">

package/src/components/lightbox/Lightbox.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { LightboxItem } from './lightbox.types'
 import { BglVideo, Btn, Icon, Zoomer } from '@bagelink/vue'
-
 import { watch } from 'vue'
 
+import type { LightboxItem } from './lightbox.types'
+
 let isOpen = $ref(false)
 let currentItem = $ref<LightboxItem>()
 let group = $ref<LightboxItem[]>([])

package/src/styles/modal.css

@@ -112,6 +112,9 @@
     opacity: 1;
     pointer-events: all;
 }
+body:has(.bg-dark.is-active) {
+    overflow: hidden;
+}
 
 .is-side.bg-dark.is-active {
     opacity: 1;