@ozdao/martyrs 0.2.540 → 0.2.542

package/dist/martyrs/src/components/UploadImage/UploadImage.vue.cjs

@@ -2,25 +2,81 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const axios = require("axios");
+const Loader = require("../Loader/Loader.vue2.cjs");
+const IconUpload = ;/* empty css                                              */
+const IconDelete = require("../../modules/icons/navigation/IconDelete.vue.cjs");
+;/* empty css                   */
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
 const _hoisted_1 = ["src"];
 const _hoisted_2 = {
   key: 1,
-  class: "flex-v-center flex-h-center flex w-100 h-100 bg-second"
+  class: "flex-v-center z-index-2 flex-h-center flex w-100 h-100 bg-second"
+};
+const _hoisted_3 = { class: "z-index-2 hover-controls pos-absolute w-100 h-100 flex-v-center flex-h-center flex" };
+const _hoisted_4 = {
+  key: 0,
+  class: "hover-upload-icon"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "hover-buttons flex gap-small"
+};
+const _hoisted_6 = {
+  key: 2,
+  class: "z-index-2 loading-overlay pos-absolute w-100 h-100 flex-v-center flex-h-center flex"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "upload-text-block flex flex-column"
+};
+const _hoisted_8 = { class: "mn-b-small t-medium" };
+const _hoisted_9 = { class: "mn-b-medium t-transp" };
+const _hoisted_10 = { key: 0 };
+const _hoisted_11 = {
+  key: 1,
+  class: "flex gap-thin"
 };
 const _sfc_main = {
   __name: "UploadImage",
-  props: [
-    "uploadPath",
-    // only necessary prop
-    "photo"
-    // new prop for holding the image url
-  ],
+  props: {
+    uploadPath: {
+      type: String,
+      required: true
+    },
+    photo: {
+      type: String,
+      default: null
+    },
+    text: {
+      type: [Object, Boolean],
+      default: null
+    }
+  },
   emits: ["update:photo", "error"],
   setup(__props, { emit: __emit }) {
     const imageUrl = vue.ref(null);
     const fileInput = vue.ref(null);
+    const previewUrl = vue.ref(null);
+    const loading = vue.ref(false);
     const props = __props;
     const emit = __emit;
+    const textConfig = vue.computed(() => {
+      const defaults = {
+        title: "Upload Image",
+        subtitle: "Drag & drop your image here or click button. Supported: JPG, PNG, GIF. Max size: 2MB",
+        buttonText: "Choose Image"
+      };
+      if (props.text === true) {
+        return defaults;
+      } else if (typeof props.text === "object" && props.text !== null) {
+        return {
+          title: props.text.title || defaults.title,
+          subtitle: props.text.subtitle || defaults.subtitle,
+          buttonText: props.text.buttonText || defaults.buttonText
+        };
+      }
+      return defaults;
+    });
     vue.watch(props, ({ photo }) => {
       if (photo) imageUrl.value = photo;
     });
@@ -33,18 +89,28 @@ const _sfc_main = {
         console.error("No file selected");
         return;
       }
+      const reader = new FileReader();
+      reader.onload = (e2) => {
+        previewUrl.value = e2.target.result;
+      };
+      reader.readAsDataURL(file);
       let formData = new FormData();
       formData.append("file", file);
       console.log("Sending file:", file.name);
+      loading.value = true;
       try {
         const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true });
         let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);
         console.log("Upload response:", response);
         imageUrl.value = response.data[0].filepath;
+        previewUrl.value = null;
         emit("update:photo", imageUrl.value);
       } catch (error) {
         emit("error", error);
         console.error("Upload error:", error);
+        previewUrl.value = null;
+      } finally {
+        loading.value = false;
       }
     }
     function onDrop(e) {
@@ -55,46 +121,99 @@ const _sfc_main = {
         }
       });
     }
+    function deleteImage() {
+      imageUrl.value = null;
+      previewUrl.value = null;
+      emit("update:photo", null);
+      if (fileInput.value) {
+        fileInput.value.value = "";
+      }
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        onClick: onComponentClick,
-        onDrop,
-        onDragover: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-        }, ["prevent"])),
-        class: "image-upload-area flex-v-center flex-h-center flex"
+        class: vue.normalizeClass(["upload-image-wrapper flex-v-center flex-nowrap flex gap-small", { "with-text": __props.text }])
       }, [
-        imageUrl.value || __props.photo ? (vue.openBlock(), vue.createElementBlock("img", {
-          key: 0,
-          loading: "lazy",
-          src: (_ctx.FILE_SERVER_URL || "") + (imageUrl.value || __props.photo),
-          alt: "Uploaded image",
-          class: "w-100 h-100 object-fit-cover"
-        }, null, 8, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, _cache[1] || (_cache[1] = [
-          vue.createElementVNode("svg", {
-            class: "i-medium",
-            width: "104",
-            height: "104",
-            viewBox: "0 0 104 104",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, [
-            vue.createElementVNode("path", {
-              fill: "rgb(var(--white))",
-              d: "M21.2784 37.2973C18.8466 34.6628 18.8466 30.6098 21.2784 27.9753L47.2179 2.03584C48.6364 0.81993 50.2577 0.211974 51.8789 0.211974C53.5001 0.211974 55.1213 0.81993 56.5399 2.03584L82.4793 27.9753C84.9111 30.6098 84.9111 34.6628 82.4793 37.2973C79.8448 39.7291 75.7918 39.7291 73.1573 37.2973L58.3637 22.301V71.5454C58.3637 75.1932 55.5266 78.0303 51.8789 78.0303C48.2311 78.0303 45.394 75.1932 45.394 71.5454V22.301L30.6004 37.2973C27.966 39.7291 23.9129 39.7291 21.2784 37.2973ZM97.2729 71.5454C100.921 71.5454 103.758 74.3825 103.758 78.0303V97.4849C103.758 101.133 100.921 103.97 97.2729 103.97H6.48486C2.83713 103.97 0 101.133 0 97.4849V78.0303C0 74.3825 2.83713 71.5454 6.48486 71.5454H38.9092C38.9092 78.6382 44.7861 84.5151 51.8789 84.5151C58.9717 84.5151 64.8486 78.6382 64.8486 71.5454H97.2729ZM87.5456 92.6212C90.1801 92.6212 92.4092 90.392 92.4092 87.7576C92.4092 85.1231 90.1801 82.8939 87.5456 82.8939C84.9111 82.8939 82.682 85.1231 82.682 87.7576C82.682 90.392 84.9111 92.6212 87.5456 92.6212Z"
+        vue.createElementVNode("div", {
+          onClick: onComponentClick,
+          onDrop,
+          onDragover: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+          }, ["prevent"])),
+          class: "pos-relative bg-light radius-small br-solid br-1px br-black-transp-10 h-100 aspect-1x1 flex-v-center flex-h-center flex cursor-pointer"
+        }, [
+          imageUrl.value || __props.photo || previewUrl.value ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 0,
+            loading: "lazy",
+            src: previewUrl.value || (_ctx.FILE_SERVER_URL || "") + (imageUrl.value || __props.photo),
+            alt: "Uploaded image",
+            class: "pos-absolute z-index-1 w-100 h-100 object-fit-cover"
+          }, null, 8, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+            vue.createVNode(IconUpload.default, {
+              class: "i-medium upload-icon",
+              fill: "rgb(var(--white))"
             })
-          ], -1)
-        ]))),
-        vue.createElementVNode("input", {
-          type: "file",
-          name: "file",
-          ref_key: "fileInput",
-          ref: fileInput,
-          onChange: onFileChange,
-          style: { "display": "none" }
-        }, null, 544)
-      ], 32);
+          ])),
+          vue.createElementVNode("div", _hoisted_3, [
+            !imageUrl.value && !__props.photo && !previewUrl.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              vue.createVNode(IconUpload.default, {
+                class: "i-medium",
+                fill: "rgb(var(--white))"
+              })
+            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+              vue.createElementVNode("button", {
+                onClick: vue.withModifiers(onComponentClick, ["stop"]),
+                class: "hover-button radius-small pd-thin bg-main t-white br-none cursor-pointer"
+              }, [
+                vue.createVNode(IconUpload.default, {
+                  class: "i-semi",
+                  fill: "rgb(var(--white))"
+                })
+              ]),
+              vue.createElementVNode("button", {
+                onClick: vue.withModifiers(deleteImage, ["stop"]),
+                class: "hover-button radius-small pd-thin bg-danger t-white br-none cursor-pointer"
+              }, [
+                vue.createVNode(IconDelete.default, {
+                  class: "i-semi",
+                  fill: "rgb(var(--white))"
+                })
+              ])
+            ]))
+          ]),
+          loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+            vue.createVNode(Loader.default, { centered: false })
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("input", {
+            type: "file",
+            name: "file",
+            ref_key: "fileInput",
+            ref: fileInput,
+            onChange: onFileChange,
+            style: { "display": "none" }
+          }, null, 544)
+        ], 32),
+        __props.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+          vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(textConfig.value.title), 1),
+          vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(textConfig.value.subtitle), 1),
+          !imageUrl.value && !__props.photo && !previewUrl.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+            vue.createElementVNode("button", {
+              onClick: onComponentClick,
+              class: "button button-small w-max bg-main t-black cursor-pointer"
+            }, vue.toDisplayString(textConfig.value.buttonText), 1)
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [
+            vue.createElementVNode("button", {
+              onClick: onComponentClick,
+              class: "button button-small w-max bg-second t-white cursor-pointer"
+            }, " Upload "),
+            vue.createElementVNode("button", {
+              onClick: deleteImage,
+              class: "button button-small w-max bg-red t-white cursor-pointer"
+            }, " Delete ")
+          ]))
+        ])) : vue.createCommentVNode("", true)
+      ], 2);
     };
   }
 };
-exports.default = _sfc_main;
+const UploadImage = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-78cc3140"]]);
+exports.default = UploadImage;
 //# sourceMappingURL=UploadImage.vue.cjs.map

package/dist/martyrs/src/components/UploadImage/UploadImage.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadImage.vue.cjs","sources":["../../../../../src/components/UploadImage/UploadImage.vue"],"sourcesContent":["<template>\n  <div \n    @click=\"onComponentClick\"\n    @drop=\"onDrop\"\n    @dragover.prevent\n    class=\"image-upload-area flex-v-center flex-h-center flex\">\n      <img loading=\"lazy\" \n        v-if=\"imageUrl || photo\" \n        :src=\"(FILE_SERVER_URL || '') + (imageUrl || photo)\"\n        alt=\"Uploaded image\" \n        class=\"w-100 h-100 object-fit-cover\"\n        />\n      \n      <div v-else class=\"flex-v-center flex-h-center flex w-100 h-100 bg-second\" >\n        <svg class=\"i-medium\" width=\"104\" height=\"104\" viewBox=\"0 0 104 104\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path  fill=\"rgb(var(--white))\" d=\"M21.2784 37.2973C18.8466 34.6628 18.8466 30.6098 21.2784 27.9753L47.2179 2.03584C48.6364 0.81993 50.2577 0.211974 51.8789 0.211974C53.5001 0.211974 55.1213 0.81993 56.5399 2.03584L82.4793 27.9753C84.9111 30.6098 84.9111 34.6628 82.4793 37.2973C79.8448 39.7291 75.7918 39.7291 73.1573 37.2973L58.3637 22.301V71.5454C58.3637 75.1932 55.5266 78.0303 51.8789 78.0303C48.2311 78.0303 45.394 75.1932 45.394 71.5454V22.301L30.6004 37.2973C27.966 39.7291 23.9129 39.7291 21.2784 37.2973ZM97.2729 71.5454C100.921 71.5454 103.758 74.3825 103.758 78.0303V97.4849C103.758 101.133 100.921 103.97 97.2729 103.97H6.48486C2.83713 103.97 0 101.133 0 97.4849V78.0303C0 74.3825 2.83713 71.5454 6.48486 71.5454H38.9092C38.9092 78.6382 44.7861 84.5151 51.8789 84.5151C58.9717 84.5151 64.8486 78.6382 64.8486 71.5454H97.2729ZM87.5456 92.6212C90.1801 92.6212 92.4092 90.392 92.4092 87.7576C92.4092 85.1231 90.1801 82.8939 87.5456 82.8939C84.9111 82.8939 82.682 85.1231 82.682 87.7576C82.682 90.392 84.9111 92.6212 87.5456 92.6212Z\"/>\n        </svg>\n      </div>\n      \n      <input type=\"file\" name=\"file\" ref=\"fileInput\" @change=\"onFileChange\" style=\"display: none\"/>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue';\nimport axios from 'axios';\n\nconst imageUrl = ref(null);\nconst fileInput = ref(null);\n\nconst props = defineProps([\n  'uploadPath', // only necessary prop\n  'photo' // new prop for holding the image url\n]);\n\nconst emit = defineEmits(['update:photo', 'error']);\n\nwatch(props, ({photo}) => {\n  if(photo) imageUrl.value = photo;\n});\n\nfunction onComponentClick() {\n  fileInput.value.click();\n}\n\nasync function onFileChange(e) {\n  let file = e.target.files[0];\n  if (!file) {\n    console.error(\"No file selected\");\n    return;\n  }\n  \n  let formData = new FormData();\n  formData.append(\"file\", file);\n\n  console.log(\"Sending file:\", file.name); // Логируем имя файла перед отправкой\n\n  try {\n    const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true }); \n\n    let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);\n    console.log(\"Upload response:\", response); // Логируем ответ сервера\n    imageUrl.value = response.data[0].filepath;\n    emit('update:photo', imageUrl.value);\n  } catch (error) {\n    emit('error', error);\n    console.error(\"Upload error:\", error); // Логируем ошибку\n  }\n}\n\n\nfunction onDrop(e) {\n  e.preventDefault();\n  onFileChange({\n    target: {\n      files: e.dataTransfer.files\n    }\n  });\n}\n</script>\n"],"names":["ref","watch"],"mappings":";;;;;;;;;;;;;;;;;;;AA2BA,UAAM,WAAWA,IAAAA,IAAI,IAAI;AACzB,UAAM,YAAYA,IAAAA,IAAI,IAAI;AAE1B,UAAM,QAAQ;AAKd,UAAM,OAAO;AAEbC,QAAAA,MAAM,OAAO,CAAC,EAAC,MAAK,MAAM;AACxB,UAAG,MAAO,UAAS,QAAQ;AAAA,IAC7B,CAAC;AAED,aAAS,mBAAmB;AAC1B,gBAAU,MAAM,MAAK;AAAA,IACvB;AAEA,mBAAe,aAAa,GAAG;AAC7B,UAAI,OAAO,EAAE,OAAO,MAAM,CAAC;AAC3B,UAAI,CAAC,MAAM;AACT,gBAAQ,MAAM,kBAAkB;AAChC;AAAA,MACF;AAEA,UAAI,WAAW,IAAI,SAAQ;AAC3B,eAAS,OAAO,QAAQ,IAAI;AAE5B,cAAQ,IAAI,iBAAiB,KAAK,IAAI;AAEtC,UAAI;AACF,cAAM,SAAS,MAAM,OAAO,EAAE,SAAS,QAAQ,IAAI,SAAS,iBAAiB,KAAI,CAAE;AAEnF,YAAI,WAAW,MAAM,OAAO,KAAK,mCAAmC,mBAAmB,MAAM,UAAU,CAAC,IAAI,QAAQ;AACpH,gBAAQ,IAAI,oBAAoB,QAAQ;AACxC,iBAAS,QAAQ,SAAS,KAAK,CAAC,EAAE;AAClC,aAAK,gBAAgB,SAAS,KAAK;AAAA,MACrC,SAAS,OAAO;AACd,aAAK,SAAS,KAAK;AACnB,gBAAQ,MAAM,iBAAiB,KAAK;AAAA,MACtC;AAAA,IACF;AAGA,aAAS,OAAO,GAAG;AACjB,QAAE,eAAc;AAChB,mBAAa;AAAA,QACX,QAAQ;AAAA,UACN,OAAO,EAAE,aAAa;AAAA,QAC5B;AAAA,MACA,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"UploadImage.vue.cjs","sources":["../../../../../src/components/UploadImage/UploadImage.vue"],"sourcesContent":["<template>\n  <div class=\"upload-image-wrapper flex-v-center flex-nowrap flex gap-small\" :class=\"{'with-text': text}\">\n    <div \n      @click=\"onComponentClick\"\n      @drop=\"onDrop\"\n      @dragover.prevent\n      class=\"pos-relative bg-light radius-small br-solid br-1px br-black-transp-10 h-100 aspect-1x1 flex-v-center flex-h-center flex cursor-pointer\"\n    >\n      <img loading=\"lazy\" \n        v-if=\"imageUrl || photo || previewUrl\" \n        :src=\"previewUrl || (FILE_SERVER_URL || '') + (imageUrl || photo)\"\n        alt=\"Uploaded image\" \n        class=\"pos-absolute z-index-1 w-100 h-100 object-fit-cover\"\n      />\n      \n      <div v-else class=\"flex-v-center z-index-2 flex-h-center flex w-100 h-100 bg-second\" >\n        <IconUpload class=\"i-medium upload-icon\" fill=\"rgb(var(--white))\" />\n      </div>\n      \n      <!-- Hover controls -->\n      <div class=\"z-index-2 hover-controls pos-absolute w-100 h-100 flex-v-center flex-h-center flex\">\n        <div v-if=\"!imageUrl && !photo && !previewUrl\" class=\"hover-upload-icon\">\n          <IconUpload class=\"i-medium\" fill=\"rgb(var(--white))\" />\n        </div>\n        <div v-else class=\"hover-buttons flex gap-small\">\n          <button @click.stop=\"onComponentClick\" class=\"hover-button radius-small pd-thin bg-main t-white br-none cursor-pointer\">\n            <IconUpload class=\"i-semi\" fill=\"rgb(var(--white))\" />\n          </button>\n          <button @click.stop=\"deleteImage\" class=\"hover-button radius-small pd-thin bg-danger t-white br-none cursor-pointer\">\n            <IconDelete class=\"i-semi\" fill=\"rgb(var(--white))\" />\n          </button>\n        </div>\n      </div>\n      \n      <!-- Loading overlay -->\n      <div v-if=\"loading\" class=\"z-index-2 loading-overlay pos-absolute w-100 h-100 flex-v-center flex-h-center flex\">\n        <Loader :centered=\"false\" />\n      </div>\n      \n      <input type=\"file\" name=\"file\" ref=\"fileInput\" @change=\"onFileChange\" style=\"display: none\"/>\n    </div>\n    \n    <!-- Text block -->\n    <div v-if=\"text\" class=\"upload-text-block  flex flex-column\">\n      <span class=\"mn-b-small t-medium\">{{ textConfig.title }}</span>\n      <span class=\"mn-b-medium t-transp\">{{ textConfig.subtitle }}</span>\n      <div v-if=\"!imageUrl && !photo && !previewUrl\">\n        <button @click=\"onComponentClick\" class=\"button button-small w-max bg-main t-black cursor-pointer\">\n          {{ textConfig.buttonText }}\n        </button>\n      </div>\n      <div v-else class=\"flex gap-thin\">\n        <button @click=\"onComponentClick\" class=\"button button-small w-max bg-second t-white cursor-pointer\">\n          Upload \n        </button>\n        <button @click=\"deleteImage\" class=\"button button-small w-max bg-red t-white cursor-pointer\">\n          Delete\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch, computed } from 'vue';\nimport axios from 'axios';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport IconUpload from '@martyrs/src/modules/icons/navigation/IconUpload.vue';\nimport IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';\n\nconst imageUrl = ref(null);\nconst fileInput = ref(null);\nconst previewUrl = ref(null);\nconst loading = ref(false);\n\nconst props = defineProps({\n  uploadPath: {\n    type: String,\n    required: true\n  },\n  photo: {\n    type: String,\n    default: null\n  },\n  text: {\n    type: [Object, Boolean],\n    default: null\n  }\n});\n\nconst emit = defineEmits(['update:photo', 'error']);\n\n// Text configuration with defaults\nconst textConfig = computed(() => {\n  const defaults = {\n    title: 'Upload Image',\n    subtitle: 'Drag & drop your image here or click button. Supported: JPG, PNG, GIF. Max size: 2MB',\n    buttonText: 'Choose Image'\n  };\n  \n  if (props.text === true) {\n    return defaults;\n  } else if (typeof props.text === 'object' && props.text !== null) {\n    return {\n      title: props.text.title || defaults.title,\n      subtitle: props.text.subtitle || defaults.subtitle,\n      buttonText: props.text.buttonText || defaults.buttonText\n    };\n  }\n  \n  return defaults;\n});\n\nwatch(props, ({photo}) => {\n  if(photo) imageUrl.value = photo;\n});\n\nfunction onComponentClick() {\n  fileInput.value.click();\n}\n\nasync function onFileChange(e) {\n  let file = e.target.files[0];\n  if (!file) {\n    console.error(\"No file selected\");\n    return;\n  }\n  \n  // Create preview from file\n  const reader = new FileReader();\n  reader.onload = (e) => {\n    previewUrl.value = e.target.result;\n  };\n  reader.readAsDataURL(file);\n  \n  let formData = new FormData();\n  formData.append(\"file\", file);\n\n  console.log(\"Sending file:\", file.name); // Логируем имя файла перед отправкой\n  \n  loading.value = true;\n\n  try {\n    const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true }); \n\n    let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);\n    console.log(\"Upload response:\", response); // Логируем ответ сервера\n    imageUrl.value = response.data[0].filepath;\n    previewUrl.value = null; // Clear preview after successful upload\n    emit('update:photo', imageUrl.value);\n  } catch (error) {\n    emit('error', error);\n    console.error(\"Upload error:\", error); // Логируем ошибку\n    previewUrl.value = null; // Clear preview on error\n  } finally {\n    loading.value = false;\n  }\n}\n\n\nfunction onDrop(e) {\n  e.preventDefault();\n  onFileChange({\n    target: {\n      files: e.dataTransfer.files\n    }\n  });\n}\n\nfunction deleteImage() {\n  imageUrl.value = null;\n  previewUrl.value = null;\n  emit('update:photo', null);\n  // Reset file input\n  if (fileInput.value) {\n    fileInput.value.value = '';\n  }\n}\n</script>\n\n<style scoped>\n.image-upload-area {\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.image-upload-area:hover {\n  opacity: 0.95;\n}\n\n/* Hover controls */\n.hover-controls {\n  top: 0;\n  left: 0;\n  background: rgba(0, 0, 0, 0.7);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n}\n\n.image-upload-area:hover .hover-controls {\n  opacity: 1;\n  pointer-events: all;\n}\n\n.hover-upload-icon {\n  animation: pulse 1.5s infinite;\n}\n\n.hover-button {\n  transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.hover-button:hover {\n  transform: scale(1.1);\n}\n\n.hover-button:active {\n  transform: scale(0.95);\n}\n\n/* Loading overlay */\n.loading-overlay {\n  top: 0;\n  left: 0;\n  background: rgba(255, 255, 255, 0.9);\n  z-index: 10;\n}\n\n/* Animations */\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Upload icon in empty state */\n.upload-icon {\n  transition: transform 0.3s ease;\n}\n\n.image-upload-area:hover .upload-icon {\n  transform: scale(1.1);\n}\n</style>\n"],"names":["ref","computed","watch","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,UAAM,WAAWA,IAAAA,IAAI,IAAI;AACzB,UAAM,YAAYA,IAAAA,IAAI,IAAI;AAC1B,UAAM,aAAaA,IAAAA,IAAI,IAAI;AAC3B,UAAM,UAAUA,IAAAA,IAAI,KAAK;AAEzB,UAAM,QAAQ;AAed,UAAM,OAAO;AAGb,UAAM,aAAaC,IAAAA,SAAS,MAAM;AAChC,YAAM,WAAW;AAAA,QACf,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,MAChB;AAEE,UAAI,MAAM,SAAS,MAAM;AACvB,eAAO;AAAA,MACT,WAAW,OAAO,MAAM,SAAS,YAAY,MAAM,SAAS,MAAM;AAChE,eAAO;AAAA,UACL,OAAO,MAAM,KAAK,SAAS,SAAS;AAAA,UACpC,UAAU,MAAM,KAAK,YAAY,SAAS;AAAA,UAC1C,YAAY,MAAM,KAAK,cAAc,SAAS;AAAA,QACpD;AAAA,MACE;AAEA,aAAO;AAAA,IACT,CAAC;AAEDC,QAAAA,MAAM,OAAO,CAAC,EAAC,MAAK,MAAM;AACxB,UAAG,MAAO,UAAS,QAAQ;AAAA,IAC7B,CAAC;AAED,aAAS,mBAAmB;AAC1B,gBAAU,MAAM,MAAK;AAAA,IACvB;AAEA,mBAAe,aAAa,GAAG;AAC7B,UAAI,OAAO,EAAE,OAAO,MAAM,CAAC;AAC3B,UAAI,CAAC,MAAM;AACT,gBAAQ,MAAM,kBAAkB;AAChC;AAAA,MACF;AAGA,YAAM,SAAS,IAAI,WAAU;AAC7B,aAAO,SAAS,CAACC,OAAM;AACrB,mBAAW,QAAQA,GAAE,OAAO;AAAA,MAC9B;AACA,aAAO,cAAc,IAAI;AAEzB,UAAI,WAAW,IAAI,SAAQ;AAC3B,eAAS,OAAO,QAAQ,IAAI;AAE5B,cAAQ,IAAI,iBAAiB,KAAK,IAAI;AAEtC,cAAQ,QAAQ;AAEhB,UAAI;AACF,cAAM,SAAS,MAAM,OAAO,EAAE,SAAS,QAAQ,IAAI,SAAS,iBAAiB,KAAI,CAAE;AAEnF,YAAI,WAAW,MAAM,OAAO,KAAK,mCAAmC,mBAAmB,MAAM,UAAU,CAAC,IAAI,QAAQ;AACpH,gBAAQ,IAAI,oBAAoB,QAAQ;AACxC,iBAAS,QAAQ,SAAS,KAAK,CAAC,EAAE;AAClC,mBAAW,QAAQ;AACnB,aAAK,gBAAgB,SAAS,KAAK;AAAA,MACrC,SAAS,OAAO;AACd,aAAK,SAAS,KAAK;AACnB,gBAAQ,MAAM,iBAAiB,KAAK;AACpC,mBAAW,QAAQ;AAAA,MACrB,UAAC;AACC,gBAAQ,QAAQ;AAAA,MAClB;AAAA,IACF;AAGA,aAAS,OAAO,GAAG;AACjB,QAAE,eAAc;AAChB,mBAAa;AAAA,QACX,QAAQ;AAAA,UACN,OAAO,EAAE,aAAa;AAAA,QAC5B;AAAA,MACA,CAAG;AAAA,IACH;AAEA,aAAS,cAAc;AACrB,eAAS,QAAQ;AACjB,iBAAW,QAAQ;AACnB,WAAK,gBAAgB,IAAI;AAEzB,UAAI,UAAU,OAAO;AACnB,kBAAU,MAAM,QAAQ;AAAA,MAC1B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/components/UploadImage/UploadImage.vue.js

@@ -1,24 +1,80 @@
-import { ref, watch, createElementBlock, openBlock, withModifiers, createElementVNode } from "vue";
+import { ref, computed, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, withModifiers, createVNode, toDisplayString } from "vue";
 import axios from "axios";
+import Loader from "../Loader/Loader.vue2.js";
+import _sfc_main$1 from "../../modules/icons/navigation/IconUpload.vue.js";
+import _sfc_main$2 from "../../modules/icons/navigation/IconDelete.vue.js";
+/* empty css                 */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["src"];
 const _hoisted_2 = {
   key: 1,
-  class: "flex-v-center flex-h-center flex w-100 h-100 bg-second"
+  class: "flex-v-center z-index-2 flex-h-center flex w-100 h-100 bg-second"
+};
+const _hoisted_3 = { class: "z-index-2 hover-controls pos-absolute w-100 h-100 flex-v-center flex-h-center flex" };
+const _hoisted_4 = {
+  key: 0,
+  class: "hover-upload-icon"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "hover-buttons flex gap-small"
+};
+const _hoisted_6 = {
+  key: 2,
+  class: "z-index-2 loading-overlay pos-absolute w-100 h-100 flex-v-center flex-h-center flex"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "upload-text-block flex flex-column"
+};
+const _hoisted_8 = { class: "mn-b-small t-medium" };
+const _hoisted_9 = { class: "mn-b-medium t-transp" };
+const _hoisted_10 = { key: 0 };
+const _hoisted_11 = {
+  key: 1,
+  class: "flex gap-thin"
 };
 const _sfc_main = {
   __name: "UploadImage",
-  props: [
-    "uploadPath",
-    // only necessary prop
-    "photo"
-    // new prop for holding the image url
-  ],
+  props: {
+    uploadPath: {
+      type: String,
+      required: true
+    },
+    photo: {
+      type: String,
+      default: null
+    },
+    text: {
+      type: [Object, Boolean],
+      default: null
+    }
+  },
   emits: ["update:photo", "error"],
   setup(__props, { emit: __emit }) {
     const imageUrl = ref(null);
     const fileInput = ref(null);
+    const previewUrl = ref(null);
+    const loading = ref(false);
     const props = __props;
     const emit = __emit;
+    const textConfig = computed(() => {
+      const defaults = {
+        title: "Upload Image",
+        subtitle: "Drag & drop your image here or click button. Supported: JPG, PNG, GIF. Max size: 2MB",
+        buttonText: "Choose Image"
+      };
+      if (props.text === true) {
+        return defaults;
+      } else if (typeof props.text === "object" && props.text !== null) {
+        return {
+          title: props.text.title || defaults.title,
+          subtitle: props.text.subtitle || defaults.subtitle,
+          buttonText: props.text.buttonText || defaults.buttonText
+        };
+      }
+      return defaults;
+    });
     watch(props, ({ photo }) => {
       if (photo) imageUrl.value = photo;
     });
@@ -31,18 +87,28 @@ const _sfc_main = {
         console.error("No file selected");
         return;
       }
+      const reader = new FileReader();
+      reader.onload = (e2) => {
+        previewUrl.value = e2.target.result;
+      };
+      reader.readAsDataURL(file);
       let formData = new FormData();
       formData.append("file", file);
       console.log("Sending file:", file.name);
+      loading.value = true;
       try {
         const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true });
         let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);
         console.log("Upload response:", response);
         imageUrl.value = response.data[0].filepath;
+        previewUrl.value = null;
         emit("update:photo", imageUrl.value);
       } catch (error) {
         emit("error", error);
         console.error("Upload error:", error);
+        previewUrl.value = null;
+      } finally {
+        loading.value = false;
       }
     }
     function onDrop(e) {
@@ -53,48 +119,101 @@ const _sfc_main = {
         }
       });
     }
+    function deleteImage() {
+      imageUrl.value = null;
+      previewUrl.value = null;
+      emit("update:photo", null);
+      if (fileInput.value) {
+        fileInput.value.value = "";
+      }
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        onClick: onComponentClick,
-        onDrop,
-        onDragover: _cache[0] || (_cache[0] = withModifiers(() => {
-        }, ["prevent"])),
-        class: "image-upload-area flex-v-center flex-h-center flex"
+        class: normalizeClass(["upload-image-wrapper flex-v-center flex-nowrap flex gap-small", { "with-text": __props.text }])
       }, [
-        imageUrl.value || __props.photo ? (openBlock(), createElementBlock("img", {
-          key: 0,
-          loading: "lazy",
-          src: (_ctx.FILE_SERVER_URL || "") + (imageUrl.value || __props.photo),
-          alt: "Uploaded image",
-          class: "w-100 h-100 object-fit-cover"
-        }, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("div", _hoisted_2, _cache[1] || (_cache[1] = [
-          createElementVNode("svg", {
-            class: "i-medium",
-            width: "104",
-            height: "104",
-            viewBox: "0 0 104 104",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, [
-            createElementVNode("path", {
-              fill: "rgb(var(--white))",
-              d: "M21.2784 37.2973C18.8466 34.6628 18.8466 30.6098 21.2784 27.9753L47.2179 2.03584C48.6364 0.81993 50.2577 0.211974 51.8789 0.211974C53.5001 0.211974 55.1213 0.81993 56.5399 2.03584L82.4793 27.9753C84.9111 30.6098 84.9111 34.6628 82.4793 37.2973C79.8448 39.7291 75.7918 39.7291 73.1573 37.2973L58.3637 22.301V71.5454C58.3637 75.1932 55.5266 78.0303 51.8789 78.0303C48.2311 78.0303 45.394 75.1932 45.394 71.5454V22.301L30.6004 37.2973C27.966 39.7291 23.9129 39.7291 21.2784 37.2973ZM97.2729 71.5454C100.921 71.5454 103.758 74.3825 103.758 78.0303V97.4849C103.758 101.133 100.921 103.97 97.2729 103.97H6.48486C2.83713 103.97 0 101.133 0 97.4849V78.0303C0 74.3825 2.83713 71.5454 6.48486 71.5454H38.9092C38.9092 78.6382 44.7861 84.5151 51.8789 84.5151C58.9717 84.5151 64.8486 78.6382 64.8486 71.5454H97.2729ZM87.5456 92.6212C90.1801 92.6212 92.4092 90.392 92.4092 87.7576C92.4092 85.1231 90.1801 82.8939 87.5456 82.8939C84.9111 82.8939 82.682 85.1231 82.682 87.7576C82.682 90.392 84.9111 92.6212 87.5456 92.6212Z"
+        createElementVNode("div", {
+          onClick: onComponentClick,
+          onDrop,
+          onDragover: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["prevent"])),
+          class: "pos-relative bg-light radius-small br-solid br-1px br-black-transp-10 h-100 aspect-1x1 flex-v-center flex-h-center flex cursor-pointer"
+        }, [
+          imageUrl.value || __props.photo || previewUrl.value ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            loading: "lazy",
+            src: previewUrl.value || (_ctx.FILE_SERVER_URL || "") + (imageUrl.value || __props.photo),
+            alt: "Uploaded image",
+            class: "pos-absolute z-index-1 w-100 h-100 object-fit-cover"
+          }, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("div", _hoisted_2, [
+            createVNode(_sfc_main$1, {
+              class: "i-medium upload-icon",
+              fill: "rgb(var(--white))"
             })
-          ], -1)
-        ]))),
-        createElementVNode("input", {
-          type: "file",
-          name: "file",
-          ref_key: "fileInput",
-          ref: fileInput,
-          onChange: onFileChange,
-          style: { "display": "none" }
-        }, null, 544)
-      ], 32);
+          ])),
+          createElementVNode("div", _hoisted_3, [
+            !imageUrl.value && !__props.photo && !previewUrl.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              createVNode(_sfc_main$1, {
+                class: "i-medium",
+                fill: "rgb(var(--white))"
+              })
+            ])) : (openBlock(), createElementBlock("div", _hoisted_5, [
+              createElementVNode("button", {
+                onClick: withModifiers(onComponentClick, ["stop"]),
+                class: "hover-button radius-small pd-thin bg-main t-white br-none cursor-pointer"
+              }, [
+                createVNode(_sfc_main$1, {
+                  class: "i-semi",
+                  fill: "rgb(var(--white))"
+                })
+              ]),
+              createElementVNode("button", {
+                onClick: withModifiers(deleteImage, ["stop"]),
+                class: "hover-button radius-small pd-thin bg-danger t-white br-none cursor-pointer"
+              }, [
+                createVNode(_sfc_main$2, {
+                  class: "i-semi",
+                  fill: "rgb(var(--white))"
+                })
+              ])
+            ]))
+          ]),
+          loading.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            createVNode(Loader, { centered: false })
+          ])) : createCommentVNode("", true),
+          createElementVNode("input", {
+            type: "file",
+            name: "file",
+            ref_key: "fileInput",
+            ref: fileInput,
+            onChange: onFileChange,
+            style: { "display": "none" }
+          }, null, 544)
+        ], 32),
+        __props.text ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          createElementVNode("span", _hoisted_8, toDisplayString(textConfig.value.title), 1),
+          createElementVNode("span", _hoisted_9, toDisplayString(textConfig.value.subtitle), 1),
+          !imageUrl.value && !__props.photo && !previewUrl.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
+            createElementVNode("button", {
+              onClick: onComponentClick,
+              class: "button button-small w-max bg-main t-black cursor-pointer"
+            }, toDisplayString(textConfig.value.buttonText), 1)
+          ])) : (openBlock(), createElementBlock("div", _hoisted_11, [
+            createElementVNode("button", {
+              onClick: onComponentClick,
+              class: "button button-small w-max bg-second t-white cursor-pointer"
+            }, " Upload "),
+            createElementVNode("button", {
+              onClick: deleteImage,
+              class: "button button-small w-max bg-red t-white cursor-pointer"
+            }, " Delete ")
+          ]))
+        ])) : createCommentVNode("", true)
+      ], 2);
     };
   }
 };
+const UploadImage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-78cc3140"]]);
 export {
-  _sfc_main as default
+  UploadImage as default
 };
 //# sourceMappingURL=UploadImage.vue.js.map

package/dist/martyrs/src/components/UploadImage/UploadImage.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadImage.vue.js","sources":["../../../../../src/components/UploadImage/UploadImage.vue"],"sourcesContent":["<template>\n  <div \n    @click=\"onComponentClick\"\n    @drop=\"onDrop\"\n    @dragover.prevent\n    class=\"image-upload-area flex-v-center flex-h-center flex\">\n      <img loading=\"lazy\" \n        v-if=\"imageUrl || photo\" \n        :src=\"(FILE_SERVER_URL || '') + (imageUrl || photo)\"\n        alt=\"Uploaded image\" \n        class=\"w-100 h-100 object-fit-cover\"\n        />\n      \n      <div v-else class=\"flex-v-center flex-h-center flex w-100 h-100 bg-second\" >\n        <svg class=\"i-medium\" width=\"104\" height=\"104\" viewBox=\"0 0 104 104\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path  fill=\"rgb(var(--white))\" d=\"M21.2784 37.2973C18.8466 34.6628 18.8466 30.6098 21.2784 27.9753L47.2179 2.03584C48.6364 0.81993 50.2577 0.211974 51.8789 0.211974C53.5001 0.211974 55.1213 0.81993 56.5399 2.03584L82.4793 27.9753C84.9111 30.6098 84.9111 34.6628 82.4793 37.2973C79.8448 39.7291 75.7918 39.7291 73.1573 37.2973L58.3637 22.301V71.5454C58.3637 75.1932 55.5266 78.0303 51.8789 78.0303C48.2311 78.0303 45.394 75.1932 45.394 71.5454V22.301L30.6004 37.2973C27.966 39.7291 23.9129 39.7291 21.2784 37.2973ZM97.2729 71.5454C100.921 71.5454 103.758 74.3825 103.758 78.0303V97.4849C103.758 101.133 100.921 103.97 97.2729 103.97H6.48486C2.83713 103.97 0 101.133 0 97.4849V78.0303C0 74.3825 2.83713 71.5454 6.48486 71.5454H38.9092C38.9092 78.6382 44.7861 84.5151 51.8789 84.5151C58.9717 84.5151 64.8486 78.6382 64.8486 71.5454H97.2729ZM87.5456 92.6212C90.1801 92.6212 92.4092 90.392 92.4092 87.7576C92.4092 85.1231 90.1801 82.8939 87.5456 82.8939C84.9111 82.8939 82.682 85.1231 82.682 87.7576C82.682 90.392 84.9111 92.6212 87.5456 92.6212Z\"/>\n        </svg>\n      </div>\n      \n      <input type=\"file\" name=\"file\" ref=\"fileInput\" @change=\"onFileChange\" style=\"display: none\"/>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue';\nimport axios from 'axios';\n\nconst imageUrl = ref(null);\nconst fileInput = ref(null);\n\nconst props = defineProps([\n  'uploadPath', // only necessary prop\n  'photo' // new prop for holding the image url\n]);\n\nconst emit = defineEmits(['update:photo', 'error']);\n\nwatch(props, ({photo}) => {\n  if(photo) imageUrl.value = photo;\n});\n\nfunction onComponentClick() {\n  fileInput.value.click();\n}\n\nasync function onFileChange(e) {\n  let file = e.target.files[0];\n  if (!file) {\n    console.error(\"No file selected\");\n    return;\n  }\n  \n  let formData = new FormData();\n  formData.append(\"file\", file);\n\n  console.log(\"Sending file:\", file.name); // Логируем имя файла перед отправкой\n\n  try {\n    const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true }); \n\n    let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);\n    console.log(\"Upload response:\", response); // Логируем ответ сервера\n    imageUrl.value = response.data[0].filepath;\n    emit('update:photo', imageUrl.value);\n  } catch (error) {\n    emit('error', error);\n    console.error(\"Upload error:\", error); // Логируем ошибку\n  }\n}\n\n\nfunction onDrop(e) {\n  e.preventDefault();\n  onFileChange({\n    target: {\n      files: e.dataTransfer.files\n    }\n  });\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA2BA,UAAM,WAAW,IAAI,IAAI;AACzB,UAAM,YAAY,IAAI,IAAI;AAE1B,UAAM,QAAQ;AAKd,UAAM,OAAO;AAEb,UAAM,OAAO,CAAC,EAAC,MAAK,MAAM;AACxB,UAAG,MAAO,UAAS,QAAQ;AAAA,IAC7B,CAAC;AAED,aAAS,mBAAmB;AAC1B,gBAAU,MAAM,MAAK;AAAA,IACvB;AAEA,mBAAe,aAAa,GAAG;AAC7B,UAAI,OAAO,EAAE,OAAO,MAAM,CAAC;AAC3B,UAAI,CAAC,MAAM;AACT,gBAAQ,MAAM,kBAAkB;AAChC;AAAA,MACF;AAEA,UAAI,WAAW,IAAI,SAAQ;AAC3B,eAAS,OAAO,QAAQ,IAAI;AAE5B,cAAQ,IAAI,iBAAiB,KAAK,IAAI;AAEtC,UAAI;AACF,cAAM,SAAS,MAAM,OAAO,EAAE,SAAS,QAAQ,IAAI,SAAS,iBAAiB,KAAI,CAAE;AAEnF,YAAI,WAAW,MAAM,OAAO,KAAK,mCAAmC,mBAAmB,MAAM,UAAU,CAAC,IAAI,QAAQ;AACpH,gBAAQ,IAAI,oBAAoB,QAAQ;AACxC,iBAAS,QAAQ,SAAS,KAAK,CAAC,EAAE;AAClC,aAAK,gBAAgB,SAAS,KAAK;AAAA,MACrC,SAAS,OAAO;AACd,aAAK,SAAS,KAAK;AACnB,gBAAQ,MAAM,iBAAiB,KAAK;AAAA,MACtC;AAAA,IACF;AAGA,aAAS,OAAO,GAAG;AACjB,QAAE,eAAc;AAChB,mBAAa;AAAA,QACX,QAAQ;AAAA,UACN,OAAO,EAAE,aAAa;AAAA,QAC5B;AAAA,MACA,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"UploadImage.vue.js","sources":["../../../../../src/components/UploadImage/UploadImage.vue"],"sourcesContent":["<template>\n  <div class=\"upload-image-wrapper flex-v-center flex-nowrap flex gap-small\" :class=\"{'with-text': text}\">\n    <div \n      @click=\"onComponentClick\"\n      @drop=\"onDrop\"\n      @dragover.prevent\n      class=\"pos-relative bg-light radius-small br-solid br-1px br-black-transp-10 h-100 aspect-1x1 flex-v-center flex-h-center flex cursor-pointer\"\n    >\n      <img loading=\"lazy\" \n        v-if=\"imageUrl || photo || previewUrl\" \n        :src=\"previewUrl || (FILE_SERVER_URL || '') + (imageUrl || photo)\"\n        alt=\"Uploaded image\" \n        class=\"pos-absolute z-index-1 w-100 h-100 object-fit-cover\"\n      />\n      \n      <div v-else class=\"flex-v-center z-index-2 flex-h-center flex w-100 h-100 bg-second\" >\n        <IconUpload class=\"i-medium upload-icon\" fill=\"rgb(var(--white))\" />\n      </div>\n      \n      <!-- Hover controls -->\n      <div class=\"z-index-2 hover-controls pos-absolute w-100 h-100 flex-v-center flex-h-center flex\">\n        <div v-if=\"!imageUrl && !photo && !previewUrl\" class=\"hover-upload-icon\">\n          <IconUpload class=\"i-medium\" fill=\"rgb(var(--white))\" />\n        </div>\n        <div v-else class=\"hover-buttons flex gap-small\">\n          <button @click.stop=\"onComponentClick\" class=\"hover-button radius-small pd-thin bg-main t-white br-none cursor-pointer\">\n            <IconUpload class=\"i-semi\" fill=\"rgb(var(--white))\" />\n          </button>\n          <button @click.stop=\"deleteImage\" class=\"hover-button radius-small pd-thin bg-danger t-white br-none cursor-pointer\">\n            <IconDelete class=\"i-semi\" fill=\"rgb(var(--white))\" />\n          </button>\n        </div>\n      </div>\n      \n      <!-- Loading overlay -->\n      <div v-if=\"loading\" class=\"z-index-2 loading-overlay pos-absolute w-100 h-100 flex-v-center flex-h-center flex\">\n        <Loader :centered=\"false\" />\n      </div>\n      \n      <input type=\"file\" name=\"file\" ref=\"fileInput\" @change=\"onFileChange\" style=\"display: none\"/>\n    </div>\n    \n    <!-- Text block -->\n    <div v-if=\"text\" class=\"upload-text-block  flex flex-column\">\n      <span class=\"mn-b-small t-medium\">{{ textConfig.title }}</span>\n      <span class=\"mn-b-medium t-transp\">{{ textConfig.subtitle }}</span>\n      <div v-if=\"!imageUrl && !photo && !previewUrl\">\n        <button @click=\"onComponentClick\" class=\"button button-small w-max bg-main t-black cursor-pointer\">\n          {{ textConfig.buttonText }}\n        </button>\n      </div>\n      <div v-else class=\"flex gap-thin\">\n        <button @click=\"onComponentClick\" class=\"button button-small w-max bg-second t-white cursor-pointer\">\n          Upload \n        </button>\n        <button @click=\"deleteImage\" class=\"button button-small w-max bg-red t-white cursor-pointer\">\n          Delete\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch, computed } from 'vue';\nimport axios from 'axios';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport IconUpload from '@martyrs/src/modules/icons/navigation/IconUpload.vue';\nimport IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';\n\nconst imageUrl = ref(null);\nconst fileInput = ref(null);\nconst previewUrl = ref(null);\nconst loading = ref(false);\n\nconst props = defineProps({\n  uploadPath: {\n    type: String,\n    required: true\n  },\n  photo: {\n    type: String,\n    default: null\n  },\n  text: {\n    type: [Object, Boolean],\n    default: null\n  }\n});\n\nconst emit = defineEmits(['update:photo', 'error']);\n\n// Text configuration with defaults\nconst textConfig = computed(() => {\n  const defaults = {\n    title: 'Upload Image',\n    subtitle: 'Drag & drop your image here or click button. Supported: JPG, PNG, GIF. Max size: 2MB',\n    buttonText: 'Choose Image'\n  };\n  \n  if (props.text === true) {\n    return defaults;\n  } else if (typeof props.text === 'object' && props.text !== null) {\n    return {\n      title: props.text.title || defaults.title,\n      subtitle: props.text.subtitle || defaults.subtitle,\n      buttonText: props.text.buttonText || defaults.buttonText\n    };\n  }\n  \n  return defaults;\n});\n\nwatch(props, ({photo}) => {\n  if(photo) imageUrl.value = photo;\n});\n\nfunction onComponentClick() {\n  fileInput.value.click();\n}\n\nasync function onFileChange(e) {\n  let file = e.target.files[0];\n  if (!file) {\n    console.error(\"No file selected\");\n    return;\n  }\n  \n  // Create preview from file\n  const reader = new FileReader();\n  reader.onload = (e) => {\n    previewUrl.value = e.target.result;\n  };\n  reader.readAsDataURL(file);\n  \n  let formData = new FormData();\n  formData.append(\"file\", file);\n\n  console.log(\"Sending file:\", file.name); // Логируем имя файла перед отправкой\n  \n  loading.value = true;\n\n  try {\n    const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true }); \n\n    let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);\n    console.log(\"Upload response:\", response); // Логируем ответ сервера\n    imageUrl.value = response.data[0].filepath;\n    previewUrl.value = null; // Clear preview after successful upload\n    emit('update:photo', imageUrl.value);\n  } catch (error) {\n    emit('error', error);\n    console.error(\"Upload error:\", error); // Логируем ошибку\n    previewUrl.value = null; // Clear preview on error\n  } finally {\n    loading.value = false;\n  }\n}\n\n\nfunction onDrop(e) {\n  e.preventDefault();\n  onFileChange({\n    target: {\n      files: e.dataTransfer.files\n    }\n  });\n}\n\nfunction deleteImage() {\n  imageUrl.value = null;\n  previewUrl.value = null;\n  emit('update:photo', null);\n  // Reset file input\n  if (fileInput.value) {\n    fileInput.value.value = '';\n  }\n}\n</script>\n\n<style scoped>\n.image-upload-area {\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.image-upload-area:hover {\n  opacity: 0.95;\n}\n\n/* Hover controls */\n.hover-controls {\n  top: 0;\n  left: 0;\n  background: rgba(0, 0, 0, 0.7);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n}\n\n.image-upload-area:hover .hover-controls {\n  opacity: 1;\n  pointer-events: all;\n}\n\n.hover-upload-icon {\n  animation: pulse 1.5s infinite;\n}\n\n.hover-button {\n  transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.hover-button:hover {\n  transform: scale(1.1);\n}\n\n.hover-button:active {\n  transform: scale(0.95);\n}\n\n/* Loading overlay */\n.loading-overlay {\n  top: 0;\n  left: 0;\n  background: rgba(255, 255, 255, 0.9);\n  z-index: 10;\n}\n\n/* Animations */\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Upload icon in empty state */\n.upload-icon {\n  transition: transform 0.3s ease;\n}\n\n.image-upload-area:hover .upload-icon {\n  transform: scale(1.1);\n}\n</style>\n"],"names":["e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,UAAM,WAAW,IAAI,IAAI;AACzB,UAAM,YAAY,IAAI,IAAI;AAC1B,UAAM,aAAa,IAAI,IAAI;AAC3B,UAAM,UAAU,IAAI,KAAK;AAEzB,UAAM,QAAQ;AAed,UAAM,OAAO;AAGb,UAAM,aAAa,SAAS,MAAM;AAChC,YAAM,WAAW;AAAA,QACf,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,MAChB;AAEE,UAAI,MAAM,SAAS,MAAM;AACvB,eAAO;AAAA,MACT,WAAW,OAAO,MAAM,SAAS,YAAY,MAAM,SAAS,MAAM;AAChE,eAAO;AAAA,UACL,OAAO,MAAM,KAAK,SAAS,SAAS;AAAA,UACpC,UAAU,MAAM,KAAK,YAAY,SAAS;AAAA,UAC1C,YAAY,MAAM,KAAK,cAAc,SAAS;AAAA,QACpD;AAAA,MACE;AAEA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,OAAO,CAAC,EAAC,MAAK,MAAM;AACxB,UAAG,MAAO,UAAS,QAAQ;AAAA,IAC7B,CAAC;AAED,aAAS,mBAAmB;AAC1B,gBAAU,MAAM,MAAK;AAAA,IACvB;AAEA,mBAAe,aAAa,GAAG;AAC7B,UAAI,OAAO,EAAE,OAAO,MAAM,CAAC;AAC3B,UAAI,CAAC,MAAM;AACT,gBAAQ,MAAM,kBAAkB;AAChC;AAAA,MACF;AAGA,YAAM,SAAS,IAAI,WAAU;AAC7B,aAAO,SAAS,CAACA,OAAM;AACrB,mBAAW,QAAQA,GAAE,OAAO;AAAA,MAC9B;AACA,aAAO,cAAc,IAAI;AAEzB,UAAI,WAAW,IAAI,SAAQ;AAC3B,eAAS,OAAO,QAAQ,IAAI;AAE5B,cAAQ,IAAI,iBAAiB,KAAK,IAAI;AAEtC,cAAQ,QAAQ;AAEhB,UAAI;AACF,cAAM,SAAS,MAAM,OAAO,EAAE,SAAS,QAAQ,IAAI,SAAS,iBAAiB,KAAI,CAAE;AAEnF,YAAI,WAAW,MAAM,OAAO,KAAK,mCAAmC,mBAAmB,MAAM,UAAU,CAAC,IAAI,QAAQ;AACpH,gBAAQ,IAAI,oBAAoB,QAAQ;AACxC,iBAAS,QAAQ,SAAS,KAAK,CAAC,EAAE;AAClC,mBAAW,QAAQ;AACnB,aAAK,gBAAgB,SAAS,KAAK;AAAA,MACrC,SAAS,OAAO;AACd,aAAK,SAAS,KAAK;AACnB,gBAAQ,MAAM,iBAAiB,KAAK;AACpC,mBAAW,QAAQ;AAAA,MACrB,UAAC;AACC,gBAAQ,QAAQ;AAAA,MAClB;AAAA,IACF;AAGA,aAAS,OAAO,GAAG;AACjB,QAAE,eAAc;AAChB,mBAAa;AAAA,QACX,QAAQ;AAAA,UACN,OAAO,EAAE,aAAa;AAAA,QAC5B;AAAA,MACA,CAAG;AAAA,IACH;AAEA,aAAS,cAAc;AACrB,eAAS,QAAQ;AACjB,iBAAW,QAAQ;AACnB,WAAK,gBAAgB,IAAI;AAEzB,UAAI,UAAU,OAAO;AACnB,kBAAU,MAAM,QAAQ;AAAA,MAC1B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/auth/views/components/pages/EnterPassword.vue.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 ;/* empty css                                      */
 const Field = require("../../../../../components/Field/Field.vue.cjs");
-const Button = require("../../../../../components/Button/Button.vue2.cjs");
+const Button = require("../../../../../components/Button/Button.vue.cjs");
 const vueRouter = require("vue-router");
 const vueI18n = require("vue-i18n");
 const auth = require("../../store/auth.cjs");

package/dist/martyrs/src/modules/auth/views/components/pages/EnterPassword.vue.js

@@ -1,7 +1,7 @@
 import { ref, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, toDisplayString, unref, createTextVNode, withCtx } from "vue";
 /* empty css                                    */
 import Field from "../../../../../components/Field/Field.vue.js";
-import _sfc_main$1 from "../../../../../components/Button/Button.vue2.js";
+import _sfc_main$1 from "../../../../../components/Button/Button.vue.js";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { state, actions } from "../../store/auth.js";

package/dist/martyrs/src/modules/auth/views/components/pages/Invite.vue.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 ;/* empty css                                      */
 const Field = require("../../../../../components/Field/Field.vue.cjs");
-const Button = require("../../../../../components/Button/Button.vue2.cjs");
+const Button = require("../../../../../components/Button/Button.vue.cjs");
 const vueRouter = require("vue-router");
 const auth = require("../../store/auth.cjs");
 const invites_store = require("../../../../organizations/store/invites.store.cjs");

package/dist/martyrs/src/modules/auth/views/components/pages/Invite.vue.js

@@ -1,7 +1,7 @@
 import { ref, onMounted, createElementBlock, openBlock, createElementVNode, createVNode, withCtx } from "vue";
 /* empty css                                    */
 import Field from "../../../../../components/Field/Field.vue.js";
-import _sfc_main$1 from "../../../../../components/Button/Button.vue2.js";
+import _sfc_main$1 from "../../../../../components/Button/Button.vue.js";
 import { useRoute, useRouter } from "vue-router";
 import { state, actions } from "../../store/auth.js";
 import invitesStore from "../../../../organizations/store/invites.store.js";