@maketribe/ms-app 3.2.23 → 3.2.25

package/dist/cjs/components/basic/upload-file/ui/upload-file/upload-file.js

@@ -0,0 +1,224 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../../../svg-icon/index.js");
+const uploadFile = require("../../upload-file.js");
+const uploadFileOptions = require("./upload-file-options.js");
+const UploadContext = require("../../context/UploadContext.js");
+require("@maketribe/request");
+require("@maketribe/utils");
+require("../../context/web-file-upload-context.js");
+require("../../context/web-file-upload-context-options.js");
+const MKUploadFileItem = /* @__PURE__ */ vue.defineComponent({
+  name: "MKUploadFileItem",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    uploadContext: {
+      type: UploadContext.UploadContext,
+      required: true
+    },
+    width: {
+      type: String,
+      default: "180px"
+    },
+    height: {
+      type: String,
+      default: "180px"
+    },
+    icon: {
+      type: String,
+      default: "Plus"
+    }
+  },
+  emits: ["update:modelValue", "view", "delete"],
+  setup(props, {
+    emit
+  }) {
+    const uploadFileInstance = vue.ref(null);
+    vue.ref(null);
+    vue.ref("");
+    const modelValue = vue.computed({
+      get: () => props.modelValue,
+      set: (v) => {
+        emit("update:modelValue", v);
+      }
+    });
+    const getFileIconBySuffix = (v) => {
+      const index2 = v.lastIndexOf(".");
+      const indexBias = v.lastIndexOf("/");
+      const icon = ["html", "apk", "eps", "ppt", "xml", "pdf", "exe", "psd", "visio", "xls", "doc", "txt", "dll", "tiff", "bmp", "audio"];
+      const zipIcon = ["zip", "rar", "zip", "tar", "gz", "bz2", "7z"];
+      const suffixIcon = v.substring(index2 + 1);
+      const suffix = v.substring(indexBias + 1);
+      if (icon.includes(suffixIcon)) {
+        return {
+          icon: suffixIcon,
+          suffix
+        };
+      } else if (zipIcon.includes(suffixIcon)) {
+        return {
+          icon: "yasuo",
+          suffix
+        };
+      } else {
+        return {
+          icon: "weizhiwenjian",
+          suffix
+        };
+      }
+    };
+    const handleUpdateModelValue = (v) => {
+      modelValue.value = v;
+    };
+    const handleClick = (event) => {
+      var _a;
+      event.stopPropagation();
+      if (vue.unref(modelValue)) {
+        return;
+      }
+      (_a = vue.unref(uploadFileInstance)) == null ? void 0 : _a.handleUpload();
+    };
+    const handleDelete = (event) => {
+      event.stopPropagation();
+      emit("delete", vue.unref(modelValue));
+    };
+    return () => {
+      let content;
+      if (vue.unref(modelValue)) {
+        content = vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+          "class": "mk-upload-file-ui-item__file"
+        }, [vue.createVNode(index.MKSvgIcon, {
+          "iconClass": getFileIconBySuffix(props.modelValue).icon
+        }, null), vue.createVNode("div", {
+          "class": "mk-upload-file-ui-item__file__name"
+        }, [getFileIconBySuffix(props.modelValue).suffix])]), vue.createVNode("div", {
+          "class": "mk-upload-file-ui-item__mask"
+        }, [vue.createVNode(elementPlus.ElTooltip, {
+          "content": "删除"
+        }, {
+          default: () => [vue.createVNode(index.MKSvgIcon, {
+            "iconClass": "Delete",
+            "onClick": handleDelete
+          }, null)]
+        })])]);
+      } else {
+        content = vue.createVNode("div", {
+          "class": "mk-upload-file-ui-item__wrapper__desc"
+        }, [vue.createVNode(index.MKSvgIcon, {
+          "iconClass": props.icon,
+          "class": "mk-upload-file-ui-item__wrapper__desc__icon"
+        }, null), vue.createVNode("span", {
+          "class": "mk-upload-file-ui-item__wrapper__desc__text"
+        }, [vue.createTextVNode("点击上传文件")])]);
+      }
+      return vue.createVNode("div", {
+        "class": "mk-upload-file-ui-item",
+        "style": {
+          width: props.width,
+          height: props.height
+        }
+      }, [vue.createVNode(uploadFile.MKUploadFile, {
+        "modelValue": props.modelValue,
+        "onUpdate:modelValue": handleUpdateModelValue,
+        "uploadContext": props.uploadContext,
+        "ref": (el) => uploadFileInstance.value = el
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": "mk-upload-file-ui-item__wrapper",
+          "onClick": handleClick
+        }, [content])]
+      })]);
+    };
+  }
+});
+const UploadFile = /* @__PURE__ */ vue.defineComponent({
+  name: "MKUploadFile",
+  props: uploadFileOptions.uploadFileUiProps,
+  emits: uploadFileOptions.uploadFileUiEmits,
+  setup(props, {
+    emit
+  }) {
+    const modelValue = vue.computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:modelValue", v)
+    });
+    const currentImageSrc = vue.ref("");
+    const multiple = vue.computed(() => props.multiple);
+    const isShowImageViewer = vue.ref(false);
+    vue.watch(vue.computed(() => [vue.unref(modelValue), vue.unref(multiple)]), ([value, multiple2]) => {
+      if (multiple2 && !Array.isArray(value)) {
+        modelValue.value = [];
+      }
+    }, {
+      immediate: true
+    });
+    const handleDelete = (src) => {
+      if (!vue.unref(multiple)) {
+        modelValue.value = "";
+        return;
+      }
+      const index2 = vue.unref(modelValue).indexOf(src);
+      if (index2 === -1) {
+        return;
+      }
+      modelValue.value.splice(index2, 1);
+    };
+    const handleShowImageViewer = (src) => {
+      isShowImageViewer.value = true;
+      currentImageSrc.value = src;
+    };
+    const handleAppendImage = (src) => {
+      const _value = vue.unref(modelValue);
+      if (Array.isArray(_value)) {
+        _value.push(src);
+      }
+    };
+    return () => {
+      const _multiple = vue.unref(multiple);
+      let content;
+      if (!_multiple) {
+        content = vue.createVNode(MKUploadFileItem, {
+          "onView": handleShowImageViewer,
+          "onDelete": handleDelete,
+          "modelValue": vue.unref(modelValue),
+          "onUpdate:modelValue": (value) => modelValue.value = value,
+          "uploadContext": props.uploadContext,
+          "width": props.width,
+          "height": props.height,
+          "icon": props.icon
+        }, null);
+      } else {
+        let images = null;
+        if (Array.isArray(vue.unref(modelValue))) {
+          images = vue.unref(modelValue).map((src) => vue.createVNode(MKUploadFileItem, {
+            "onView": handleShowImageViewer,
+            "onDelete": handleDelete,
+            "modelValue": src,
+            "uploadContext": props.uploadContext,
+            "width": props.width,
+            "height": props.height,
+            "icon": props.icon
+          }, null));
+        }
+        content = vue.createVNode(vue.Fragment, null, [images, vue.createVNode(MKUploadFileItem, {
+          "onUpdate:modelValue": handleAppendImage,
+          "uploadContext": props.uploadContext,
+          "width": props.width,
+          "height": props.height,
+          "icon": props.icon
+        }, null)]);
+      }
+      return vue.createVNode("div", {
+        "class": "mk-upload-file-ui",
+        "style": {
+          width: _multiple ? "" : props.width
+        }
+      }, [content]);
+    };
+  }
+});
+module.exports = UploadFile;
+//# sourceMappingURL=upload-file.js.map

package/dist/cjs/components/basic/upload-file/ui/upload-file/upload-file.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-file.js","sources":["../../../../../../../src/components/basic/upload-file/ui/upload-file/upload-file.tsx"],"sourcesContent":["import {\r\n  Fragment,\r\n  Ref,\r\n  VNode,\r\n  computed,\r\n  defineComponent,\r\n  ref,\r\n  unref,\r\n  watch,\r\n} from \"vue\";\r\nimport { ElImage, ElTooltip, ElImageViewer } from \"element-plus\";\r\nimport { MKSvgIcon } from \"../../../svg-icon\";\r\nimport { MKUploadFile } from \"../../upload-file\";\r\nimport { uploadFileUiEmits, uploadFileUiProps } from \"./upload-file-options\";\r\nimport { UploadContext } from \"../../context\";\r\n\r\nconst MKUploadFileItem = defineComponent({\r\n  name: \"MKUploadFileItem\",\r\n  props: {\r\n    modelValue: {\r\n      type: String,\r\n      default: \"\",\r\n    },\r\n    uploadContext: {\r\n      type: UploadContext,\r\n      required: true,\r\n    },\r\n    width: {\r\n      type: String,\r\n      default: \"180px\",\r\n    },\r\n    height: {\r\n      type: String,\r\n      default: \"180px\",\r\n    },\r\n    icon: {\r\n      type: String,\r\n      default: \"Plus\",\r\n    }\r\n  },\r\n  emits: [\"update:modelValue\", \"view\", \"delete\"],\r\n  setup(props, { emit }) {\r\n    const uploadFileInstance: Ref<InstanceType<typeof MKUploadFile> | null> =\r\n      ref(null);\r\n\r\n    const imageInstance: Ref<InstanceType<typeof ElImage> | null> = ref(null);\r\n\r\n    const currentFileName: Ref<string> = ref(\"\")\r\n\r\n    const modelValue = computed({\r\n      get: () => props.modelValue as string,\r\n      set: (v: string) => {\r\n        emit(\"update:modelValue\", v);\r\n      },\r\n    });\r\n\r\n\r\n\r\n    const getFileIconBySuffix = (v: string) => {\r\n      const index = v.lastIndexOf('.');\r\n      const indexBias = v.lastIndexOf('/');\r\n      const icon = [\"html\", \"apk\", \"eps\", \"ppt\", \"xml\", \"pdf\", \"exe\", \"psd\", \"visio\", \"xls\", \"doc\", \"txt\", \"dll\", \"tiff\", \"bmp\", \"audio\"]\r\n      const zipIcon = [\"zip\", \"rar\", \"zip\", \"tar\", \"gz\", \"bz2\", \"7z\"]\r\n      const suffixIcon = v.substring(index + 1)\r\n      const suffix = v.substring(indexBias + 1)\r\n      if (icon.includes(suffixIcon)) {\r\n        return {\r\n          icon: suffixIcon,\r\n          suffix: suffix,\r\n        }\r\n      } else if (zipIcon.includes(suffixIcon)) {\r\n        return {\r\n          icon: \"yasuo\",\r\n          suffix: suffix\r\n        }\r\n      } else {\r\n        return {\r\n          icon: \"weizhiwenjian\",\r\n          suffix: suffix\r\n        }\r\n      }\r\n    }\r\n\r\n    const handleUpdateModelValue = (v: string) => {\r\n      modelValue.value = v;\r\n    };\r\n\r\n    const handleClick = (event: MouseEvent) => {\r\n      event.stopPropagation();\r\n\r\n      if (unref(modelValue)) {\r\n        return;\r\n      }\r\n\r\n      unref(uploadFileInstance)?.handleUpload();\r\n    };\r\n\r\n    const handleDelete = (event: MouseEvent) => {\r\n      event.stopPropagation();\r\n\r\n      // modelValue.value = \"\";\r\n      emit(\"delete\", unref(modelValue));\r\n    };\r\n\r\n    return () => {\r\n      let content;\r\n\r\n      if (unref(modelValue)) {\r\n        content = (\r\n          <Fragment>\r\n            <div class=\"mk-upload-file-ui-item__file\">\r\n              <MKSvgIcon iconClass={getFileIconBySuffix(props.modelValue).icon} />\r\n              <div class=\"mk-upload-file-ui-item__file__name\">\r\n                {getFileIconBySuffix(props.modelValue).suffix}\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"mk-upload-file-ui-item__mask\">\r\n              <ElTooltip content=\"删除\">\r\n                <MKSvgIcon iconClass=\"Delete\" onClick={handleDelete} />\r\n              </ElTooltip>\r\n            </div>\r\n          </Fragment>\r\n        );\r\n      } else {\r\n        content = <div class=\"mk-upload-file-ui-item__wrapper__desc\">\r\n          <MKSvgIcon iconClass={props.icon} class=\"mk-upload-file-ui-item__wrapper__desc__icon\" />\r\n          <span class=\"mk-upload-file-ui-item__wrapper__desc__text\">点击上传文件</span>\r\n        </div>;\r\n      }\r\n\r\n      return (\r\n        <div class=\"mk-upload-file-ui-item\" style={{ width: props.width, height: props.height }}>\r\n          <MKUploadFile\r\n            modelValue={props.modelValue}\r\n            onUpdate:modelValue={handleUpdateModelValue}\r\n            uploadContext={props.uploadContext}\r\n            ref={\r\n              ((el: InstanceType<typeof MKUploadFile>) =>\r\n                (uploadFileInstance.value = el)) as any\r\n            }\r\n          >\r\n            <div class=\"mk-upload-file-ui-item__wrapper\" onClick={handleClick}>\r\n              {content}\r\n            </div>\r\n          </MKUploadFile>\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n\r\nexport default defineComponent({\r\n  name: \"MKUploadFile\",\r\n  props: uploadFileUiProps,\r\n  emits: uploadFileUiEmits,\r\n  setup(props, { emit }) {\r\n    const modelValue = computed({\r\n      get: () => props.modelValue as string[] | string,\r\n      set: (v: string[] | string) => emit(\"update:modelValue\", v),\r\n    });\r\n\r\n    const currentImageSrc: Ref<string> = ref(\"\");\r\n\r\n    const multiple = computed(() => props.multiple);\r\n\r\n    const isShowImageViewer: Ref<boolean> = ref(false);\r\n\r\n    watch(\r\n      computed(() => [unref(modelValue), unref(multiple)]),\r\n      ([value, multiple]) => {\r\n        if (multiple && !Array.isArray(value)) {\r\n          modelValue.value = [];\r\n        }\r\n      },\r\n      { immediate: true }\r\n    );\r\n\r\n    const handleDelete = (src: string) => {\r\n      if (!unref(multiple)) {\r\n        modelValue.value = \"\";\r\n        return;\r\n      }\r\n\r\n      const index = unref(modelValue).indexOf(src);\r\n\r\n      if (index === -1) {\r\n        return;\r\n      }\r\n\r\n      (modelValue.value as string[]).splice(index, 1);\r\n    };\r\n\r\n    const handleShowImageViewer = (src: string) => {\r\n      isShowImageViewer.value = true;\r\n      currentImageSrc.value = src;\r\n    };\r\n\r\n    const handleCloseImageViewer = () => {\r\n      isShowImageViewer.value = false;\r\n    };\r\n\r\n    const handleAppendImage = (src: string) => {\r\n      const _value = unref(modelValue);\r\n\r\n      if (Array.isArray(_value)) {\r\n        _value.push(src);\r\n      }\r\n    };\r\n\r\n    return () => {\r\n      const _multiple = unref(multiple);\r\n\r\n      let content;\r\n\r\n      if (!_multiple) {\r\n        content = (\r\n          <MKUploadFileItem\r\n            onView={handleShowImageViewer}\r\n            onDelete={handleDelete}\r\n            modelValue={unref(modelValue) as string}\r\n            onUpdate:modelValue={(value) => (modelValue.value = value)}\r\n            uploadContext={props.uploadContext}\r\n            width={props.width}\r\n            height={props.height}\r\n            icon={props.icon}\r\n          />\r\n        );\r\n      } else {\r\n        let images: VNode[] | null = null;\r\n\r\n        if (Array.isArray(unref(modelValue))) {\r\n          images = (unref(modelValue) as string[]).map((src) => (\r\n            <MKUploadFileItem\r\n              onView={handleShowImageViewer}\r\n              onDelete={handleDelete}\r\n              modelValue={src}\r\n              uploadContext={props.uploadContext}\r\n              width={props.width}\r\n              height={props.height}\r\n              icon={props.icon}\r\n            />\r\n          ));\r\n        }\r\n\r\n        content = (\r\n          <Fragment>\r\n            {images}\r\n            <MKUploadFileItem\r\n              onUpdate:modelValue={handleAppendImage}\r\n              uploadContext={props.uploadContext}\r\n              width={props.width}\r\n              height={props.height}\r\n              icon={props.icon}\r\n            />\r\n          </Fragment>\r\n        );\r\n      }\r\n\r\n      return (\r\n        <div class=\"mk-upload-file-ui\" style={{ width: _multiple ? \"\" : props.width }}>\r\n          {content}\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n"],"names":["MKUploadFileItem","defineComponent","name","props","modelValue","type","String","default","uploadContext","UploadContext","required","width","height","icon","emits","setup","emit","uploadFileInstance","ref","computed","get","set","v","getFileIconBySuffix","index","lastIndexOf","indexBias","zipIcon","suffixIcon","substring","suffix","includes","handleUpdateModelValue","value","handleClick","event","stopPropagation","unref","handleUpload","handleDelete","content","_createVNode","_Fragment","MKSvgIcon","ElTooltip","_createTextVNode","MKUploadFile","el","uploadFileUiProps","uploadFileUiEmits","currentImageSrc","multiple","isShowImageViewer","watch","Array","isArray","immediate","src","indexOf","splice","handleShowImageViewer","handleAppendImage","_value","push","_multiple","images","map"],"mappings":";;;;;;;;;;;AAgBA,MAAMA,mBAAmBC,oBAAAA,gBAAgB;AAAA,EACvCC,MAAM;AAAA,EACNC,OAAO;AAAA,IACLC,YAAY;AAAA,MACVC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA,IACDC,eAAe;AAAA,MACbH,MAAMI,cAAa;AAAA,MACnBC,UAAU;AAAA,IACX;AAAA,IACDC,OAAO;AAAA,MACLN,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA,IACDK,QAAQ;AAAA,MACNP,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA,IACDM,MAAM;AAAA,MACJR,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EACDO,OAAO,CAAC,qBAAqB,QAAQ,QAAQ;AAAA,EAC7CC,MAAMZ,OAAO;AAAA,IAAEa;AAAAA,EAAK,GAAG;AACrB,UAAMC,qBACJC,QAAI,IAAI;AAEsDA,QAAAA,IAAI,IAAI;AAEnCA,QAAAA,IAAI,EAAE;AAE3C,UAAMd,aAAae,IAAAA,SAAS;AAAA,MAC1BC,KAAKA,MAAMjB,MAAMC;AAAAA,MACjBiB,KAAMC,OAAc;AAClBN,aAAK,qBAAqBM,CAAC;AAAA,MAC7B;AAAA,IACF,CAAC;AAID,UAAMC,sBAAuBD,OAAc;AACzC,YAAME,SAAQF,EAAEG,YAAY,GAAG;AAC/B,YAAMC,YAAYJ,EAAEG,YAAY,GAAG;AACnC,YAAMZ,OAAO,CAAC,QAAQ,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,SAAS,OAAO,OAAO,OAAO,OAAO,QAAQ,OAAO,OAAO;AAClI,YAAMc,UAAU,CAAC,OAAO,OAAO,OAAO,OAAO,MAAM,OAAO,IAAI;AAC9D,YAAMC,aAAaN,EAAEO,UAAUL,SAAQ,CAAC;AACxC,YAAMM,SAASR,EAAEO,UAAUH,YAAY,CAAC;AACxC,UAAIb,KAAKkB,SAASH,UAAU,GAAG;AAC7B,eAAO;AAAA,UACLf,MAAMe;AAAAA,UACNE;AAAAA;MAEH,WAAUH,QAAQI,SAASH,UAAU,GAAG;AACvC,eAAO;AAAA,UACLf,MAAM;AAAA,UACNiB;AAAAA;MAEJ,OAAO;AACL,eAAO;AAAA,UACLjB,MAAM;AAAA,UACNiB;AAAAA;MAEJ;AAAA;AAGF,UAAME,yBAA0BV,OAAc;AAC5ClB,iBAAW6B,QAAQX;AAAAA;AAGrB,UAAMY,cAAeC,WAAsB;;AACzCA,YAAMC,gBAAe;AAErB,UAAIC,IAAAA,MAAMjC,UAAU,GAAG;AACrB;AAAA,MACF;AAEAiC,sBAAMpB,kBAAkB,MAAxBoB,mBAA2BC;AAAAA;AAG7B,UAAMC,eAAgBJ,WAAsB;AAC1CA,YAAMC,gBAAe;AAGrBpB,WAAK,UAAUqB,UAAMjC,UAAU,CAAC;AAAA;AAGlC,WAAO,MAAM;AACX,UAAIoC;AAEJ,UAAIH,IAAAA,MAAMjC,UAAU,GAAG;AACrBoC,kBAAOC,IAAA,YAAAC,IAAA,iBAAAD,IAAAA,YAAA,OAAA;AAAA,UAAA,SAAA;AAAA,WAAAA,CAAAA,IAAA,YAAAE,iBAAA;AAAA,UAAA,aAGqBpB,oBAAoBpB,MAAMC,UAAU,EAAES;AAAAA,QAAI,GAAA,IAAA,GAAA4B,IAAA,YAAA,OAAA;AAAA,UAAA,SAAA;AAAA,WAE7DlB,CAAAA,oBAAoBpB,MAAMC,UAAU,EAAE0B,MAAM,CAAA,CAAA,CAAA,GAAAW,IAAA,YAAA,OAAA;AAAA,UAAA,SAAA;AAAA,WAAAA,CAAAA,IAAA,YAAAG,uBAAA;AAAA,UAAA,WAAA;AAAA,QAAA,GAAA;AAAA,UAAArC,SAAAA,MAAAkC,CAAAA,IAAA,YAAAE,iBAAA;AAAA,YAAA,aAAA;AAAA,YAAA,WAMNJ;AAAAA,UAAY,GAAA,IAAA,CAAA;AAAA,SAI1D,CAAA,CAAA,CAAA,CAAA;AAAA,MACH,OAAO;AACLC,kBAAOC,IAAA,YAAA,OAAA;AAAA,UAAA,SAAA;AAAA,WAAAA,CAAAA,IAAA,YAAAE,iBAAA;AAAA,UAAA,aACiBxC,MAAMU;AAAAA,UAAI,SAAA;AAAA,QAAA,GAAA,IAAA,GAAA4B,IAAA,YAAA,QAAA;AAAA,UAAA,SAAA;AAAA,QAAA,GAAA,CAAAI,IAAAA,gBAE5B,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA,MACR;AAEA,aAAAJ,IAAAA,YAAA,OAAA;AAAA,QAAA,SAAA;AAAA,QAAA,SAC6C;AAAA,UAAE9B,OAAOR,MAAMQ;AAAAA,UAAOC,QAAQT,MAAMS;AAAAA,QAAO;AAAA,SAAC6B,CAAAA,IAAA,YAAAK,yBAAA;AAAA,QAAA,cAEvE3C,MAAMC;AAAAA,QAAU,uBACP4B;AAAAA,QAAsB,iBAC5B7B,MAAMK;AAAAA,QAAa,OAE9BuC,QACC9B,mBAAmBgB,QAAQc;AAAAA,MAAG,GAAA;AAAA,QAAAxC,SAAAA,MAAA,CAAAkC,IAAA,YAAA,OAAA;AAAA,UAAA,SAAA;AAAA,UAAA,WAGmBP;AAAAA,QAAW,GAAA,CAC9DM,OAAO,CAAA,CAAA;AAAA,MAAA,CAAA,CAAA,CAAA;AAAA;EAMpB;AACF,CAAC;AAED,MAAevC,iDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAO6C,kBAAiB;AAAA,EACxBlC,OAAOmC,kBAAiB;AAAA,EACxBlC,MAAMZ,OAAO;AAAA,IAAEa;AAAAA,EAAK,GAAG;AACrB,UAAMZ,aAAae,IAAAA,SAAS;AAAA,MAC1BC,KAAKA,MAAMjB,MAAMC;AAAAA,MACjBiB,KAAMC,OAAyBN,KAAK,qBAAqBM,CAAC;AAAA,IAC5D,CAAC;AAED,UAAM4B,kBAA+BhC,QAAI,EAAE;AAE3C,UAAMiC,WAAWhC,IAAQ,SAAC,MAAMhB,MAAMgD,QAAQ;AAE9C,UAAMC,oBAAkClC,QAAI,KAAK;AAEjDmC,QAAAA,MACElC,IAAAA,SAAS,MAAM,CAACkB,IAAK,MAACjC,UAAU,GAAGiC,IAAAA,MAAMc,QAAQ,CAAC,CAAC,GACnD,CAAC,CAAClB,OAAOkB,SAAQ,MAAM;AACrB,UAAIA,aAAY,CAACG,MAAMC,QAAQtB,KAAK,GAAG;AACrC7B,mBAAW6B,QAAQ;MACrB;AAAA,IACF,GACA;AAAA,MAAEuB,WAAW;AAAA,IAAK,CACpB;AAEA,UAAMjB,eAAgBkB,SAAgB;AACpC,UAAI,CAACpB,IAAAA,MAAMc,QAAQ,GAAG;AACpB/C,mBAAW6B,QAAQ;AACnB;AAAA,MACF;AAEA,YAAMT,SAAQa,IAAAA,MAAMjC,UAAU,EAAEsD,QAAQD,GAAG;AAE3C,UAAIjC,WAAU,IAAI;AAChB;AAAA,MACF;AAECpB,iBAAW6B,MAAmB0B,OAAOnC,QAAO,CAAC;AAAA;AAGhD,UAAMoC,wBAAyBH,SAAgB;AAC7CL,wBAAkBnB,QAAQ;AAC1BiB,sBAAgBjB,QAAQwB;AAAAA;AAO1B,UAAMI,oBAAqBJ,SAAgB;AACzC,YAAMK,SAASzB,UAAMjC,UAAU;AAE/B,UAAIkD,MAAMC,QAAQO,MAAM,GAAG;AACzBA,eAAOC,KAAKN,GAAG;AAAA,MACjB;AAAA;AAGF,WAAO,MAAM;AACX,YAAMO,YAAY3B,UAAMc,QAAQ;AAEhC,UAAIX;AAEJ,UAAI,CAACwB,WAAW;AACdxB,kBAAOC,IAAA,YAAAzC,kBAAA;AAAA,UAAA,UAEK4D;AAAAA,UAAqB,YACnBrB;AAAAA,UAAY,cACVF,IAAK,MAACjC,UAAU;AAAA,UAAC,uBACP6B,WAAW7B,WAAW6B,QAAQA;AAAAA,UAAM,iBAC3C9B,MAAMK;AAAAA,UAAa,SAC3BL,MAAMQ;AAAAA,UAAK,UACVR,MAAMS;AAAAA,UAAM,QACdT,MAAMU;AAAAA,QAEf,GAAA,IAAA;AAAA,MACH,OAAO;AACL,YAAIoD,SAAyB;AAE7B,YAAIX,MAAMC,QAAQlB,UAAMjC,UAAU,CAAC,GAAG;AACpC6D,mBAAU5B,IAAK,MAACjC,UAAU,EAAe8D,IAAKT,SAAGhB,IAAA,YAAAzC,kBAAA;AAAA,YAAA,UAErC4D;AAAAA,YAAqB,YACnBrB;AAAAA,YAAY,cACVkB;AAAAA,YAAG,iBACAtD,MAAMK;AAAAA,YAAa,SAC3BL,MAAMQ;AAAAA,YAAK,UACVR,MAAMS;AAAAA,YAAM,QACdT,MAAMU;AAAAA,UAAI,GAAA,IAAA,CAEnB;AAAA,QACH;AAEA2B,kBAAOC,IAAA,YAAAC,qBAEFuB,QAAMxB,IAAA,YAAAzC,kBAAA;AAAA,UAAA,uBAEgB6D;AAAAA,UAAiB,iBACvB1D,MAAMK;AAAAA,UAAa,SAC3BL,MAAMQ;AAAAA,UAAK,UACVR,MAAMS;AAAAA,UAAM,QACdT,MAAMU;AAAAA,WAGjB,IAAA,CAAA,CAAA;AAAA,MACH;AAEA,aAAA4B,IAAAA,YAAA,OAAA;AAAA,QAAA,SAAA;AAAA,QAAA,SACwC;AAAA,UAAE9B,OAAOqD,YAAY,KAAK7D,MAAMQ;AAAAA,QAAM;AAAA,MAAC,GAAA,CAC1E6B,OAAO,CAAA;AAAA;EAIhB;AACF,CAAC;;"}

package/dist/cjs/components/basic/upload-file/ui/upload-image/upload-image.js

@@ -45,6 +45,7 @@ const MKUploadImageItem = /* @__PURE__ */ vue.defineComponent({
         emit("update:modelValue", v);
       }
     });
+    console.log(props.uploadContext);
     const handleUpdateModelValue = (v) => {
       modelValue.value = v;
     };
@@ -71,7 +72,7 @@ const MKUploadImageItem = /* @__PURE__ */ vue.defineComponent({
           "ref": (el) => imageInstance.value = el,
           "src": vue.unref(modelValue),
           "class": "mk-upload-image-item__image",
-          "fit": "cover"
+          "fit": "contain"
         }, null), vue.createVNode("div", {
           "class": "mk-upload-image-item__mask"
         }, [vue.createVNode(elementPlus.ElTooltip, {
@@ -161,6 +162,7 @@ const UploadImage = /* @__PURE__ */ vue.defineComponent({
     };
     return () => {
       const _multiple = vue.unref(multiple);
+      console.log(_multiple);
       let content;
       if (!_multiple) {
         content = vue.createVNode(MKUploadImageItem, {
@@ -203,7 +205,7 @@ const UploadImage = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("div", {
         "class": "mk-upload-image",
         "style": {
-          width: _multiple ? "" : props.width
+          width: !_multiple ? "" : props.width
         }
       }, [content, imageViewer]);
     };

package/dist/cjs/components/basic/upload-file/ui/upload-image/upload-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload-image.js","sources":["../../../../../../../src/components/basic/upload-file/ui/upload-image/upload-image.tsx"],"sourcesContent":["import {\r\n  Fragment,\r\n  Ref,\r\n  VNode,\r\n  computed,\r\n  defineComponent,\r\n  ref,\r\n  unref,\r\n  watch,\r\n} from \"vue\";\r\nimport { ElImage, ElTooltip, ElImageViewer } from \"element-plus\";\r\nimport { MKSvgIcon } from \"../../../svg-icon\";\r\nimport { MKUploadFile } from \"../../upload-file\";\r\nimport { uploadImageEmits, uploadImageProps } from \"./upload-image-options\";\r\nimport { UploadContext } from \"../../context\";\r\n\r\nconst MKUploadImageItem = defineComponent({\r\n  name: \"MKUploadImageItem\",\r\n  props: {\r\n    modelValue: {\r\n      type: String,\r\n      default: \"\",\r\n    },\r\n    uploadContext: {\r\n      type: UploadContext,\r\n      required: true,\r\n    },\r\n    width: {\r\n      type: String,\r\n      default: \"180px\",\r\n    },\r\n    height: {\r\n      type: String,\r\n      default: \"180px\",\r\n    },\r\n    icon: {\r\n      type: String,\r\n      default: \"Plus\",\r\n    }\r\n  },\r\n  emits: [\"update:modelValue\", \"view\", \"delete\"],\r\n  setup(props, { emit }) {\r\n    const uploadFileInstance: Ref<InstanceType<typeof MKUploadFile> | null> =\r\n      ref(null);\r\n\r\n    const imageInstance: Ref<InstanceType<typeof ElImage> | null> = ref(null);\r\n\r\n    const modelValue = computed({\r\n      get: () => props.modelValue as string,\r\n      set: (v: string) => {\r\n        emit(\"update:modelValue\", v);\r\n      },\r\n    });\r\n\r\n    const handleUpdateModelValue = (v: string) => {\r\n      modelValue.value = v;\r\n    };\r\n\r\n    const handleClick = (event: MouseEvent) => {\r\n      event.stopPropagation();\r\n\r\n      if (unref(modelValue)) {\r\n        return;\r\n      }\r\n\r\n      unref(uploadFileInstance)?.handleUpload();\r\n    };\r\n\r\n    const handleView = (event: MouseEvent) => {\r\n      event.stopPropagation();\r\n\r\n      emit(\"view\", unref(modelValue));\r\n    };\r\n\r\n    const handleDelete = (event: MouseEvent) => {\r\n      event.stopPropagation();\r\n\r\n      // modelValue.value = \"\";\r\n      emit(\"delete\", unref(modelValue));\r\n    };\r\n\r\n    return () => {\r\n      let content;\r\n\r\n      if (unref(modelValue)) {\r\n        content = (\r\n          <Fragment>\r\n            <ElImage ref={\r\n                ((el: InstanceType<typeof ElImage>) =>\r\n                  (imageInstance.value = el)) as any\r\n              }\r\n              src={unref(modelValue)}\r\n              class=\"mk-upload-image-item__image\"\r\n              fit=\"cover\"\r\n            />\r\n\r\n            <div class=\"mk-upload-image-item__mask\">\r\n              <ElTooltip content=\"查看\">\r\n                <MKSvgIcon iconClass=\"View\" onClick={handleView} />\r\n              </ElTooltip>\r\n              <ElTooltip content=\"删除\">\r\n                <MKSvgIcon iconClass=\"Delete\" onClick={handleDelete} />\r\n              </ElTooltip>\r\n            </div>\r\n          </Fragment>\r\n        );\r\n      } else {\r\n        content = <MKSvgIcon iconClass={props.icon} />;\r\n      }\r\n\r\n      return (\r\n        <div class=\"mk-upload-image-item\" style={{width:props.width,height:props.height}}>\r\n          <MKUploadFile\r\n            modelValue={props.modelValue}\r\n            onUpdate:modelValue={handleUpdateModelValue}\r\n            uploadContext={props.uploadContext}\r\n            ref={\r\n              ((el: InstanceType<typeof MKUploadFile>) =>\r\n                (uploadFileInstance.value = el)) as any\r\n            }\r\n          >\r\n            <div class=\"mk-upload-image-item__wrapper\" onClick={handleClick}>\r\n              {content}\r\n            </div>\r\n          </MKUploadFile>\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n\r\nexport default defineComponent({\r\n  name: \"MKUploadImage\",\r\n  props: uploadImageProps,\r\n  emits: uploadImageEmits,\r\n  setup(props, { emit }) {\r\n    const modelValue = computed({\r\n      get: () => props.modelValue as string[] | string,\r\n      set: (v: string[] | string) => emit(\"update:modelValue\", v),\r\n    });\r\n\r\n    const currentImageSrc: Ref<string> = ref(\"\");\r\n\r\n    const multiple = computed(() => props.multiple);\r\n\r\n    const isShowImageViewer: Ref<boolean> = ref(false);\r\n\r\n    watch(\r\n      computed(() => [unref(modelValue), unref(multiple)]),\r\n      ([value, multiple]) => {\r\n        if (multiple && !Array.isArray(value)) {\r\n          modelValue.value = [];\r\n        }\r\n      },\r\n      { immediate: true }\r\n    );\r\n\r\n    const handleDelete = (src: string) => {\r\n      if (!unref(multiple)) {\r\n        modelValue.value = \"\";\r\n        return;\r\n      }\r\n\r\n      const index = unref(modelValue).indexOf(src);\r\n\r\n      if (index === -1) {\r\n        return;\r\n      }\r\n\r\n      (modelValue.value as string[]).splice(index, 1);\r\n    };\r\n\r\n    const handleShowImageViewer = (src: string) => {\r\n      isShowImageViewer.value = true;\r\n      currentImageSrc.value = src;\r\n    };\r\n\r\n    const handleCloseImageViewer = () => {\r\n      isShowImageViewer.value = false;\r\n    };\r\n\r\n    const handleAppendImage = (src: string) => {\r\n      const _value = unref(modelValue);\r\n\r\n      if (Array.isArray(_value)) {\r\n        _value.push(src);\r\n      }\r\n    };\r\n\r\n    return () => {\r\n      const _multiple = unref(multiple);\r\n\r\n      let content;\r\n\r\n      if (!_multiple) {\r\n        content = (\r\n          <MKUploadImageItem\r\n            onView={handleShowImageViewer}\r\n            onDelete={handleDelete}\r\n            modelValue={unref(modelValue) as string}\r\n            onUpdate:modelValue={(value) => (modelValue.value = value)}\r\n            uploadContext={props.uploadContext}\r\n            width={props.width}\r\n            height={props.height}\r\n            icon={props.icon}\r\n          />\r\n        );\r\n      } else {\r\n        let images: VNode[] | null = null;\r\n\r\n        if (Array.isArray(unref(modelValue))) {\r\n          images = (unref(modelValue) as string[]).map((src) => (\r\n            <MKUploadImageItem\r\n              onView={handleShowImageViewer}\r\n              onDelete={handleDelete}\r\n              modelValue={src}\r\n              uploadContext={props.uploadContext}\r\n              width={props.width}\r\n              height={props.height}\r\n              icon={props.icon}\r\n            />\r\n          ));\r\n        }\r\n\r\n        content = (\r\n          <Fragment>\r\n            {images}\r\n            <MKUploadImageItem\r\n              onUpdate:modelValue={handleAppendImage}\r\n              uploadContext={props.uploadContext}\r\n              width={props.width}\r\n              height={props.height}\r\n              icon={props.icon}\r\n            />\r\n          </Fragment>\r\n        );\r\n      }\r\n\r\n      const imageViewer = unref(isShowImageViewer) ? (\r\n        <ElImageViewer teleported zIndex={99}\r\n          onClose={handleCloseImageViewer}\r\n          urlList={[unref(currentImageSrc)]}\r\n        />\r\n      ) : null;\r\n\r\n      return (\r\n        <div class=\"mk-upload-image\" style={{width:_multiple?\"\":props.width}}>\r\n          {content}\r\n          {imageViewer}\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n"],"names":["MKUploadImageItem","defineComponent","name","props","modelValue","type","String","default","uploadContext","UploadContext","required","width","height","icon","emits","setup","emit","uploadFileInstance","ref","imageInstance","computed","get","set","v","handleUpdateModelValue","value","handleClick","event","stopPropagation","unref","handleUpload","handleView","handleDelete","content","_createVNode","_Fragment","ElImage","el","ElTooltip","MKSvgIcon","MKUploadFile","uploadImageProps","uploadImageEmits","currentImageSrc","multiple","isShowImageViewer","watch","Array","isArray","immediate","src","index","indexOf","splice","handleShowImageViewer","handleCloseImageViewer","handleAppendImage","_value","push","_multiple","images","map","imageViewer","ElImageViewer"],"mappings":"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"}
+{"version":3,"file":"upload-image.js","sources":["../../../../../../../src/components/basic/upload-file/ui/upload-image/upload-image.tsx"],"sourcesContent":["import {\r\n  Fragment,\r\n  Ref,\r\n  VNode,\r\n  computed,\r\n  defineComponent,\r\n  ref,\r\n  unref,\r\n  watch,\r\n} from \"vue\";\r\nimport { ElImage, ElTooltip, ElImageViewer } from \"element-plus\";\r\nimport { MKSvgIcon } from \"../../../svg-icon\";\r\nimport { MKUploadFile } from \"../../upload-file\";\r\nimport { uploadImageEmits, uploadImageProps } from \"./upload-image-options\";\r\nimport { UploadContext } from \"../../context\";\r\n\r\nconst MKUploadImageItem = defineComponent({\r\n  name: \"MKUploadImageItem\",\r\n  props: {\r\n    modelValue: {\r\n      type: String,\r\n      default: \"\",\r\n    },\r\n    uploadContext: {\r\n      type: UploadContext,\r\n      required: true,\r\n    },\r\n    width: {\r\n      type: String,\r\n      default: \"180px\",\r\n    },\r\n    height: {\r\n      type: String,\r\n      default: \"180px\",\r\n    },\r\n    icon: {\r\n      type: String,\r\n      default: \"Plus\",\r\n    }\r\n  },\r\n  emits: [\"update:modelValue\", \"view\", \"delete\"],\r\n  setup(props, { emit }) {\r\n    const uploadFileInstance: Ref<InstanceType<typeof MKUploadFile> | null> =\r\n      ref(null);\r\n\r\n    const imageInstance: Ref<InstanceType<typeof ElImage> | null> = ref(null);\r\n\r\n    const modelValue = computed({\r\n      get: () => props.modelValue as string,\r\n      set: (v: string) => {\r\n        emit(\"update:modelValue\", v);\r\n      },\r\n    });\r\n    console.log(props.uploadContext)\r\n    const handleUpdateModelValue = (v: string) => {\r\n      modelValue.value = v;\r\n    };\r\n\r\n    const handleClick = (event: MouseEvent) => {\r\n      event.stopPropagation();\r\n\r\n      if (unref(modelValue)) {\r\n        return;\r\n      }\r\n\r\n      unref(uploadFileInstance)?.handleUpload();\r\n    };\r\n\r\n    const handleView = (event: MouseEvent) => {\r\n      event.stopPropagation();\r\n\r\n      emit(\"view\", unref(modelValue));\r\n    };\r\n\r\n    const handleDelete = (event: MouseEvent) => {\r\n      event.stopPropagation();\r\n\r\n      // modelValue.value = \"\";\r\n      emit(\"delete\", unref(modelValue));\r\n    };\r\n\r\n    return () => {\r\n      let content;\r\n\r\n      if (unref(modelValue)) {\r\n        content = (\r\n          <Fragment>\r\n            <ElImage ref={\r\n              ((el: InstanceType<typeof ElImage>) =>\r\n                (imageInstance.value = el)) as any\r\n            }\r\n              src={unref(modelValue)}\r\n              class=\"mk-upload-image-item__image\"\r\n              fit=\"contain\"\r\n            />\r\n\r\n            <div class=\"mk-upload-image-item__mask\">\r\n              <ElTooltip content=\"查看\">\r\n                <MKSvgIcon iconClass=\"View\" onClick={handleView} />\r\n              </ElTooltip>\r\n              <ElTooltip content=\"删除\">\r\n                <MKSvgIcon iconClass=\"Delete\" onClick={handleDelete} />\r\n              </ElTooltip>\r\n            </div>\r\n          </Fragment>\r\n        );\r\n      } else {\r\n        content = <MKSvgIcon iconClass={props.icon} />;\r\n      }\r\n\r\n      return (\r\n        <div class=\"mk-upload-image-item\" style={{ width: props.width, height: props.height }}>\r\n          <MKUploadFile\r\n            modelValue={props.modelValue}\r\n            onUpdate:modelValue={handleUpdateModelValue}\r\n            uploadContext={props.uploadContext}\r\n            ref={\r\n              ((el: InstanceType<typeof MKUploadFile>) =>\r\n                (uploadFileInstance.value = el)) as any\r\n            }\r\n          >\r\n            <div class=\"mk-upload-image-item__wrapper\" onClick={handleClick}>\r\n              {content}\r\n            </div>\r\n          </MKUploadFile>\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n\r\nexport default defineComponent({\r\n  name: \"MKUploadImage\",\r\n  props: uploadImageProps,\r\n  emits: uploadImageEmits,\r\n  setup(props, { emit }) {\r\n    const modelValue = computed({\r\n      get: () => props.modelValue as string[] | string,\r\n      set: (v: string[] | string) => emit(\"update:modelValue\", v),\r\n    });\r\n\r\n    const currentImageSrc: Ref<string> = ref(\"\");\r\n\r\n    const multiple = computed(() => props.multiple);\r\n\r\n    const isShowImageViewer: Ref<boolean> = ref(false);\r\n\r\n    watch(\r\n      computed(() => [unref(modelValue), unref(multiple)]),\r\n      ([value, multiple]) => {\r\n        if (multiple && !Array.isArray(value)) {\r\n          modelValue.value = [];\r\n        }\r\n      },\r\n      { immediate: true }\r\n    );\r\n\r\n    const handleDelete = (src: string) => {\r\n      if (!unref(multiple)) {\r\n        modelValue.value = \"\";\r\n        return;\r\n      }\r\n\r\n      const index = unref(modelValue).indexOf(src);\r\n\r\n      if (index === -1) {\r\n        return;\r\n      }\r\n\r\n      (modelValue.value as string[]).splice(index, 1);\r\n    };\r\n\r\n    const handleShowImageViewer = (src: string) => {\r\n      isShowImageViewer.value = true;\r\n      currentImageSrc.value = src;\r\n    };\r\n\r\n    const handleCloseImageViewer = () => {\r\n      isShowImageViewer.value = false;\r\n    };\r\n\r\n    const handleAppendImage = (src: string) => {\r\n      const _value = unref(modelValue);\r\n\r\n      if (Array.isArray(_value)) {\r\n        _value.push(src);\r\n      }\r\n    };\r\n\r\n    return () => {\r\n      const _multiple = unref(multiple);\r\n      console.log(_multiple)\r\n      let content;\r\n\r\n      if (!_multiple) {\r\n        content = (\r\n          <MKUploadImageItem\r\n            onView={handleShowImageViewer}\r\n            onDelete={handleDelete}\r\n            modelValue={unref(modelValue) as string}\r\n            onUpdate:modelValue={(value) => (modelValue.value = value)}\r\n            uploadContext={props.uploadContext}\r\n            width={props.width}\r\n            height={props.height}\r\n            icon={props.icon}\r\n          />\r\n        );\r\n      } else {\r\n        let images: VNode[] | null = null;\r\n\r\n        if (Array.isArray(unref(modelValue))) {\r\n          images = (unref(modelValue) as string[]).map((src) => (\r\n            <MKUploadImageItem\r\n              onView={handleShowImageViewer}\r\n              onDelete={handleDelete}\r\n              modelValue={src}\r\n              uploadContext={props.uploadContext}\r\n              width={props.width}\r\n              height={props.height}\r\n              icon={props.icon}\r\n            />\r\n          ));\r\n        }\r\n\r\n        content = (\r\n          <Fragment>\r\n            {images}\r\n            <MKUploadImageItem\r\n              onUpdate:modelValue={handleAppendImage}\r\n              uploadContext={props.uploadContext}\r\n              width={props.width}\r\n              height={props.height}\r\n              icon={props.icon}\r\n            />\r\n          </Fragment>\r\n        );\r\n      }\r\n\r\n      const imageViewer = unref(isShowImageViewer) ? (\r\n        <ElImageViewer teleported zIndex={99}\r\n          onClose={handleCloseImageViewer}\r\n          urlList={[unref(currentImageSrc)]}\r\n        />\r\n      ) : null;\r\n\r\n      return (\r\n        <div class=\"mk-upload-image\" style={{ width: !_multiple ? \"\" : props.width }}>\r\n          {content}\r\n          {imageViewer}\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n"],"names":["MKUploadImageItem","defineComponent","name","props","modelValue","type","String","default","uploadContext","UploadContext","required","width","height","icon","emits","setup","emit","uploadFileInstance","ref","imageInstance","computed","get","set","v","console","log","handleUpdateModelValue","value","handleClick","event","stopPropagation","unref","handleUpload","handleView","handleDelete","content","_createVNode","_Fragment","ElImage","el","ElTooltip","MKSvgIcon","MKUploadFile","uploadImageProps","uploadImageEmits","currentImageSrc","multiple","isShowImageViewer","watch","Array","isArray","immediate","src","index","indexOf","splice","handleShowImageViewer","handleCloseImageViewer","handleAppendImage","_value","push","_multiple","images","map","imageViewer","ElImageViewer"],"mappings":"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"}

package/dist/cjs/components/basic/upload-file/ui/upload-video/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const utils = require("@maketribe/utils");
+const uploadVideo = require("./upload-video.js");
+const uploadVideoOptions = require("./upload-video-options.js");
+const MKUploadVideo = utils.withInstall(uploadVideo);
+exports.uploadVideoEmits = uploadVideoOptions.uploadVideoEmits;
+exports.uploadVideoProps = uploadVideoOptions.uploadVideoProps;
+exports.MKUploadVideo = MKUploadVideo;
+exports.default = MKUploadVideo;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/basic/upload-file/ui/upload-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/upload-file/ui/upload-video/index.ts"],"sourcesContent":["import { withInstall } from \"@maketribe/utils\";\r\nimport UploadVideo from \"./upload-video\"\r\n\r\nexport const MKUploadVideo = withInstall(UploadVideo);\r\nexport default MKUploadVideo;\r\n\r\nexport * from \"./upload-video-options\";\r\n"],"names":["withInstall","UploadVideo"],"mappings":";;;;;AAGa,MAAA,gBAAgBA,kBAAYC,WAAW;;;;;"}

package/dist/cjs/components/basic/upload-file/ui/upload-video/upload-video-options.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@maketribe/utils");
+const UploadContext = require("../../context/UploadContext.js");
+const WebFileUploadContext = require("../../context/WebFileUploadContext.js");
+require("../../context/web-file-upload-context.js");
+require("../../context/web-file-upload-context-options.js");
+const uploadVideoProps = utils.buildProps({
+  uploadContext: {
+    type: UploadContext.UploadContext,
+    default: () => new WebFileUploadContext.WebFileUploadContext()
+  },
+  modelValue: {
+    type: [String, Array]
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: String,
+    default: "180px"
+  },
+  height: {
+    type: String,
+    default: "180px"
+  },
+  icon: {
+    type: String,
+    default: "UploadFilled"
+  }
+});
+const uploadVideoEmits = {
+  "update:modelValue": (path) => true
+};
+exports.uploadVideoEmits = uploadVideoEmits;
+exports.uploadVideoProps = uploadVideoProps;
+//# sourceMappingURL=upload-video-options.js.map

package/dist/cjs/components/basic/upload-file/ui/upload-video/upload-video-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-video-options.js","sources":["../../../../../../../src/components/basic/upload-file/ui/upload-video/upload-video-options.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\r\nimport { buildProps } from \"@maketribe/utils\";\r\nimport { WebFileUploadContext, UploadContext } from \"../../context\";\r\n\r\nexport const uploadVideoProps = buildProps({\r\n  uploadContext: {\r\n    type: UploadContext,\r\n    default: () => new WebFileUploadContext(),\r\n  },\r\n  modelValue: {\r\n    type: [String, Array<String>],\r\n  },\r\n  multiple: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  width: {\r\n    type: String,\r\n    default: \"180px\",\r\n  },\r\n  height: {\r\n    type: String,\r\n    default: \"180px\",\r\n  },\r\n  icon: {\r\n    type: String,\r\n    default: \"UploadFilled\",\r\n  }\r\n} as const);\r\n\r\nexport type UploadVideoProps = ExtractPropTypes<typeof uploadVideoProps>;\r\n\r\nexport const uploadVideoEmits = {\r\n  \"update:modelValue\": (path: string | string[]) => true,\r\n};\r\n\r\nexport type UploadVideoEmits = typeof uploadVideoEmits;\r\n"],"names":["buildProps","UploadContext","WebFileUploadContext"],"mappings":";;;;;;;AAIO,MAAM,mBAAmBA,MAAAA,WAAW;AAAA,EACzC,eAAe;AAAA,IACb,MAAMC,cAAA;AAAA,IACN,SAAS,MAAM,IAAIC,0CAAqB;AAAA,EAC1C;AAAA,EACA,YAAY;AAAA,IACV,MAAM,CAAC,QAAQ,KAAa;AAAA,EAC9B;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF,CAAU;AAIH,MAAM,mBAAmB;AAAA,EAC9B,qBAAqB,CAAC,SAA4B;AACpD;;;"}

package/dist/cjs/components/basic/upload-file/ui/upload-video/upload-video.js

@@ -0,0 +1,222 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../../../svg-icon/index.js");
+const uploadFile = require("../../upload-file.js");
+const uploadVideoOptions = require("./upload-video-options.js");
+const UploadContext = require("../../context/UploadContext.js");
+require("@maketribe/request");
+require("@maketribe/utils");
+require("../../context/web-file-upload-context.js");
+require("../../context/web-file-upload-context-options.js");
+const MKUploadFileItem = /* @__PURE__ */ vue.defineComponent({
+  name: "MKUploadFileItem",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    uploadContext: {
+      type: UploadContext.UploadContext,
+      required: true
+    },
+    width: {
+      type: String,
+      default: "180px"
+    },
+    height: {
+      type: String,
+      default: "180px"
+    },
+    icon: {
+      type: String,
+      default: "Plus"
+    }
+  },
+  emits: ["update:modelValue", "view", "delete"],
+  setup(props, {
+    emit
+  }) {
+    const uploadFileInstance = vue.ref(null);
+    vue.ref(null);
+    vue.ref("");
+    const modelValue = vue.computed({
+      get: () => props.modelValue,
+      set: (v) => {
+        emit("update:modelValue", v);
+      }
+    });
+    const handleUpdateModelValue = (v) => {
+      modelValue.value = v;
+    };
+    const handleClick = (event) => {
+      var _a;
+      event.stopPropagation();
+      if (vue.unref(modelValue)) {
+        return;
+      }
+      (_a = vue.unref(uploadFileInstance)) == null ? void 0 : _a.handleUpload();
+    };
+    const handleView = (event) => {
+      event.stopPropagation();
+      emit("view", vue.unref(modelValue));
+    };
+    const handleDelete = (event) => {
+      event.stopPropagation();
+      emit("delete", vue.unref(modelValue));
+    };
+    return () => {
+      let content;
+      if (vue.unref(modelValue)) {
+        content = vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+          "class": "mk-upload-video-item__file"
+        }, [vue.createVNode(index.MKSvgIcon, {
+          "iconClass": "video"
+        }, null)]), vue.createVNode("div", {
+          "class": "mk-upload-video-item__mask"
+        }, [vue.createVNode(elementPlus.ElTooltip, {
+          "content": "查看"
+        }, {
+          default: () => [vue.createVNode(index.MKSvgIcon, {
+            "iconClass": "View",
+            "onClick": handleView
+          }, null)]
+        }), vue.createVNode(elementPlus.ElTooltip, {
+          "content": "删除"
+        }, {
+          default: () => [vue.createVNode(index.MKSvgIcon, {
+            "iconClass": "Delete",
+            "onClick": handleDelete
+          }, null)]
+        })])]);
+      } else {
+        content = vue.createVNode("div", {
+          "class": "mk-upload-video-item__wrapper__desc"
+        }, [vue.createVNode(index.MKSvgIcon, {
+          "iconClass": props.icon,
+          "class": "mk-upload-video-item__wrapper__desc__icon"
+        }, null), vue.createVNode("span", {
+          "class": "mk-upload-video-item__wrapper__desc__text"
+        }, [vue.createTextVNode("点击上传视频")])]);
+      }
+      return vue.createVNode("div", {
+        "class": "mk-upload-video-item",
+        "style": {
+          width: props.width,
+          height: props.height
+        }
+      }, [vue.createVNode(uploadFile.MKUploadFile, {
+        "modelValue": props.modelValue,
+        "onUpdate:modelValue": handleUpdateModelValue,
+        "uploadContext": props.uploadContext,
+        "ref": (el) => uploadFileInstance.value = el
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": "mk-upload-video-item__wrapper",
+          "onClick": handleClick
+        }, [content])]
+      })]);
+    };
+  }
+});
+const UploadVideo = /* @__PURE__ */ vue.defineComponent({
+  name: "MKUploadFile",
+  props: uploadVideoOptions.uploadVideoProps,
+  emits: uploadVideoOptions.uploadVideoEmits,
+  setup(props, {
+    emit
+  }) {
+    const modelValue = vue.computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:modelValue", v)
+    });
+    const currentVideoSrc = vue.ref("");
+    const multiple = vue.computed(() => props.multiple);
+    const isShowVideoViewer = vue.ref(false);
+    vue.watch(vue.computed(() => [vue.unref(modelValue), vue.unref(multiple)]), ([value, multiple2]) => {
+      if (multiple2 && !Array.isArray(value)) {
+        modelValue.value = [];
+      }
+    }, {
+      immediate: true
+    });
+    const handleDelete = (src) => {
+      if (!vue.unref(multiple)) {
+        modelValue.value = "";
+        return;
+      }
+      const index2 = vue.unref(modelValue).indexOf(src);
+      if (index2 === -1) {
+        return;
+      }
+      modelValue.value.splice(index2, 1);
+    };
+    const handleShowImageViewer = (src) => {
+      isShowVideoViewer.value = true;
+      currentVideoSrc.value = src;
+    };
+    const handleAppendImage = (src) => {
+      const _value = vue.unref(modelValue);
+      if (Array.isArray(_value)) {
+        _value.push(src);
+      }
+    };
+    return () => {
+      const _multiple = vue.unref(multiple);
+      let content;
+      if (!_multiple) {
+        content = vue.createVNode(MKUploadFileItem, {
+          "onView": handleShowImageViewer,
+          "onDelete": handleDelete,
+          "modelValue": vue.unref(modelValue),
+          "onUpdate:modelValue": (value) => modelValue.value = value,
+          "uploadContext": props.uploadContext,
+          "width": props.width,
+          "height": props.height,
+          "icon": props.icon
+        }, null);
+      } else {
+        let images = null;
+        if (Array.isArray(vue.unref(modelValue))) {
+          images = vue.unref(modelValue).map((src) => vue.createVNode(MKUploadFileItem, {
+            "onView": handleShowImageViewer,
+            "onDelete": handleDelete,
+            "modelValue": src,
+            "uploadContext": props.uploadContext,
+            "width": props.width,
+            "height": props.height,
+            "icon": props.icon
+          }, null));
+        }
+        content = vue.createVNode(vue.Fragment, null, [images, vue.createVNode(MKUploadFileItem, {
+          "onUpdate:modelValue": handleAppendImage,
+          "uploadContext": props.uploadContext,
+          "width": props.width,
+          "height": props.height,
+          "icon": props.icon
+        }, null)]);
+      }
+      const videoViewer = vue.unref(isShowVideoViewer) ? vue.createVNode("div", {
+        "class": "mk-upload-video-viewer"
+      }, [vue.createVNode(index.MKSvgIcon, {
+        "class": "mk-upload-video-viewer__close",
+        "iconClass": "Close",
+        "onClick": () => isShowVideoViewer.value = false
+      }, null), vue.createVNode("div", {
+        "class": "mk-upload-video-viewer__mask"
+      }, null), vue.createVNode("video", {
+        "class": "mk-upload-video-viewer__video",
+        "src": currentVideoSrc.value,
+        "controls": true
+      }, null)]) : null;
+      return vue.createVNode("div", {
+        "class": "mk-upload-video",
+        "style": {
+          width: _multiple ? "" : props.width
+        }
+      }, [content, videoViewer]);
+    };
+  }
+});
+module.exports = UploadVideo;
+//# sourceMappingURL=upload-video.js.map