@bagelink/vue 0.0.947 → 0.0.951

package/dist/index.cjs

@@ -18679,12 +18679,12 @@ const _hoisted_11$1 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_12$1 = {
+const _hoisted_12$1 = { class: "position-start m-05 flex opacity-7 z-99" };
+const _hoisted_13$1 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_13$1 = ["src"];
-const _hoisted_14$1 = { class: "position-start m-05 flex opacity-7" };
+const _hoisted_14$1 = ["src"];
 const _hoisted_15$1 = {
   key: 0,
   class: "progress"
@@ -18855,7 +18855,7 @@ 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),
-        _ctx.required ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$l)) : vue.createCommentVNode("", true),
+        _ctx.required && !storageFiles.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$l)) : vue.createCommentVNode("", true),
         vue.unref(theme) === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$R), {
           key: 1,
           outline: "",
@@ -18976,43 +18976,43 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                   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_12$1, [
+                  vue.createElementVNode("div", _hoisted_12$1, [
+                    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"]
+                    ])
+                  ]),
+                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [
                     vue.withDirectives(vue.createElementVNode("img", {
                       class: "single-preview",
                       src: file.url,
                       alt: ""
-                    }, null, 8, _hoisted_13$1), [
+                    }, null, 8, _hoisted_14$1), [
                       [_directive_lightbox, { src: file.url, download: true }]
-                    ]),
-                    vue.createElementVNode("div", _hoisted_14$1, [
-                      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.createBlock(vue.unref(_sfc_main$c), {
                     key: 1,
@@ -19066,7 +19066,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-d2c7e04e"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-36f16bdf"]]);
 const _hoisted_1$u = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];

package/dist/index.mjs

@@ -18677,12 +18677,12 @@ const _hoisted_11$1 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_12$1 = {
+const _hoisted_12$1 = { class: "position-start m-05 flex opacity-7 z-99" };
+const _hoisted_13$1 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_13$1 = ["src"];
-const _hoisted_14$1 = { class: "position-start m-05 flex opacity-7" };
+const _hoisted_14$1 = ["src"];
 const _hoisted_15$1 = {
   key: 0,
   class: "progress"
@@ -18853,7 +18853,7 @@ 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),
-        _ctx.required ? (openBlock(), createElementBlock("input", _hoisted_2$l)) : createCommentVNode("", true),
+        _ctx.required && !storageFiles.value.length ? (openBlock(), createElementBlock("input", _hoisted_2$l)) : createCommentVNode("", true),
         unref(theme) === "basic" ? (openBlock(), createBlock(unref(_sfc_main$R), {
           key: 1,
           outline: "",
@@ -18974,43 +18974,43 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                   key: file.id,
                   class: normalizeClass(["single-image-item-preview", { "bgl_fill-image": _ctx.fill }])
                 }, [
-                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("div", _hoisted_12$1, [
+                  createElementVNode("div", _hoisted_12$1, [
+                    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"]
+                    ])
+                  ]),
+                  isImage(file.extension || file.url) ? (openBlock(), createElementBlock("div", _hoisted_13$1, [
                     withDirectives(createElementVNode("img", {
                       class: "single-preview",
                       src: file.url,
                       alt: ""
-                    }, null, 8, _hoisted_13$1), [
+                    }, null, 8, _hoisted_14$1), [
                       [_directive_lightbox, { src: file.url, download: true }]
-                    ]),
-                    createElementVNode("div", _hoisted_14$1, [
-                      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(), createBlock(unref(_sfc_main$c), {
                     key: 1,
@@ -19064,7 +19064,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-d2c7e04e"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-36f16bdf"]]);
 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-d2c7e04e] {
+.fileUploadWrap[data-v-36f16bdf] {
 	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-d2c7e04e] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-36f16bdf] {
 	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-d2c7e04e],
-.fileUploadWrap[data-v-d2c7e04e]:hover {
+.fileUploadWrap.dragover[data-v-36f16bdf],
+.fileUploadWrap[data-v-36f16bdf]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-d2c7e04e] {
+.fileUploadWrap[style*="height: auto;"][data-v-36f16bdf] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-d2c7e04e] {
+.multi-image-item-preview[data-v-36f16bdf] {
 	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-d2c7e04e] {
+.multi-image-item-preview p[data-v-36f16bdf] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-d2c7e04e]{
+.multi-preview[data-v-36f16bdf]{
 	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-d2c7e04e]{
+.bgl-single-preview[data-v-36f16bdf]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-d2c7e04e]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-36f16bdf]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-d2c7e04e] {
+.single-image-item-preview[data-v-36f16bdf] {
 	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-d2c7e04e] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-36f16bdf] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-d2c7e04e] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-36f16bdf] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-d2c7e04e]{
+.single-preview[data-v-36f16bdf]{
 	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-d2c7e04e]:hover::after{
+.single-image-item-preview[data-v-36f16bdf]: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-d2c7e04e]{
+.single-image-item-preview:hover img[data-v-36f16bdf]{
 	filter: brightness(70%);
 }
-.bgl_fill-image.single-image-item-preview[data-v-d2c7e04e] {
+.bgl_fill-image.single-image-item-preview[data-v-36f16bdf] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-d2c7e04e]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-36f16bdf]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-d2c7e04e] {
+.single-image-item-preview .pie[data-v-36f16bdf] {
 	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-d2c7e04e] {
+.bgl_oval-upload[data-v-36f16bdf] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-d2c7e04e] {
+.bgl_oval-upload p[data-v-36f16bdf] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-d2c7e04e]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-36f16bdf]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-d2c7e04e] {
+.bgl_oval-upload .pie[data-v-36f16bdf] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-d2c7e04e] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-36f16bdf] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-d2c7e04e]{
+.bgl_oval-upload .single-image-item-preview[data-v-36f16bdf]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-d2c7e04e] {
+.bgl_oval-upload .single-preview[data-v-36f16bdf] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-d2c7e04e] {
+.pie[data-v-36f16bdf] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -866,7 +866,7 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-d2c7e04e]:before {
+.pie[data-v-36f16bdf]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -884,26 +884,26 @@ data[data-v-6c27f163] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-d2c7e04e] {
+.pie .success[data-v-36f16bdf] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-d2c7e04e] {
+.pie .progress[data-v-36f16bdf] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-d2c7e04e] {
+.pie.complete .progress[data-v-36f16bdf] {
 	display: none;
 }
-.pie.complete .success[data-v-d2c7e04e] {
+.pie.complete .success[data-v-36f16bdf] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-d2c7e04e]:before {
+.pie.complete[data-v-36f16bdf]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-d2c7e04e] {
+.pie.complete[data-v-36f16bdf] {
 	color: var(--bgl-green);
 }
 
@@ -11236,13 +11236,13 @@ select {
 	}
 }
 .pixel {
-	width: 0;
-	height: 0;
-	overflow: hidden;
-	outline: none;
-	position: absolute;
-	bottom: 0;
-	left: 50%;
+	width: 0 !important;
+	height: 0 !important;
+	overflow: hidden !important;
+	outline: none !important;
+	position: absolute !important;
+	bottom: 0 !important;
+	left: 50% !important;
 }
 .bgl_btn,
 .bgl_flatBtn,

package/package.json

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

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

@@ -204,7 +204,7 @@ function drop(e: DragEvent) {
 		<label>
 			{{ label }}
 		</label>
-		<input v-if="required" placeholder="required" type="text" required class="pixel">
+		<input v-if="required && !storageFiles.length" placeholder="required" type="text" required class="pixel">
 		<Card
 			v-if="theme === 'basic'" outline class="flex p-05 gap-1" @dragover="dragover"
 			@drop="drop"
@@ -309,22 +309,22 @@ function drop(e: DragEvent) {
 						class="single-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
+						<div class="position-start 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
+							/>
+						</div>
 						<div v-if="isImage(file.extension || file.url)" class="h-100">
 							<img v-lightbox="{ src: file.url, download: true }" class="single-preview" :src="file.url" alt="">
-							<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 v-lightbox="{ src: file.url, download: true }" :size="4" weight="2" icon="draft" class="color-primary w-100" />
 					</div>

package/src/styles/inputs.css

@@ -327,11 +327,11 @@ select {
 }
 
 .pixel {
-	width: 0;
-	height: 0;
-	overflow: hidden;
-	outline: none;
-	position: absolute;
-	bottom: 0;
-	left: 50%;
+	width: 0 !important;
+	height: 0 !important;
+	overflow: hidden !important;
+	outline: none !important;
+	position: absolute !important;
+	bottom: 0 !important;
+	left: 50% !important;
 }