@maketribe/ms-app 3.2.24 → 3.2.26

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

@@ -0,0 +1,225 @@
+import { defineComponent, computed, ref, watch, unref, createVNode, Fragment, createTextVNode } from "vue";
+import { ElTooltip } from "element-plus";
+import { MKSvgIcon } from "../../../svg-icon/index.js";
+import { MKUploadFile } from "../../upload-file.js";
+import { uploadFileUiProps, uploadFileUiEmits } from "./upload-file-options.js";
+import { UploadContext } from "../../context/UploadContext.js";
+import "@maketribe/request";
+import "@maketribe/utils";
+import "../../context/web-file-upload-context.js";
+import "../../context/web-file-upload-context-options.js";
+const MKUploadFileItem = /* @__PURE__ */ defineComponent({
+  name: "MKUploadFileItem",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    uploadContext: {
+      type: 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 = ref(null);
+    ref(null);
+    ref("");
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v) => {
+        emit("update:modelValue", v);
+      }
+    });
+    const getFileIconBySuffix = (v) => {
+      const index = 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(index + 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 (unref(modelValue)) {
+        return;
+      }
+      (_a = unref(uploadFileInstance)) == null ? void 0 : _a.handleUpload();
+    };
+    const handleDelete = (event) => {
+      event.stopPropagation();
+      emit("delete", unref(modelValue));
+    };
+    return () => {
+      let content;
+      if (unref(modelValue)) {
+        content = createVNode(Fragment, null, [createVNode("div", {
+          "class": "mk-upload-file-ui-item__file"
+        }, [createVNode(MKSvgIcon, {
+          "iconClass": getFileIconBySuffix(props.modelValue).icon
+        }, null), createVNode("div", {
+          "class": "mk-upload-file-ui-item__file__name"
+        }, [getFileIconBySuffix(props.modelValue).suffix])]), createVNode("div", {
+          "class": "mk-upload-file-ui-item__mask"
+        }, [createVNode(ElTooltip, {
+          "content": "删除"
+        }, {
+          default: () => [createVNode(MKSvgIcon, {
+            "iconClass": "Delete",
+            "onClick": handleDelete
+          }, null)]
+        })])]);
+      } else {
+        content = createVNode("div", {
+          "class": "mk-upload-file-ui-item__wrapper__desc"
+        }, [createVNode(MKSvgIcon, {
+          "iconClass": props.icon,
+          "class": "mk-upload-file-ui-item__wrapper__desc__icon"
+        }, null), createVNode("span", {
+          "class": "mk-upload-file-ui-item__wrapper__desc__text"
+        }, [createTextVNode("点击上传文件")])]);
+      }
+      return createVNode("div", {
+        "class": "mk-upload-file-ui-item",
+        "style": {
+          width: props.width,
+          height: props.height
+        }
+      }, [createVNode(MKUploadFile, {
+        "modelValue": props.modelValue,
+        "onUpdate:modelValue": handleUpdateModelValue,
+        "uploadContext": props.uploadContext,
+        "ref": (el) => uploadFileInstance.value = el
+      }, {
+        default: () => [createVNode("div", {
+          "class": "mk-upload-file-ui-item__wrapper",
+          "onClick": handleClick
+        }, [content])]
+      })]);
+    };
+  }
+});
+const UploadFile = /* @__PURE__ */ defineComponent({
+  name: "MKUploadFile",
+  props: uploadFileUiProps,
+  emits: uploadFileUiEmits,
+  setup(props, {
+    emit
+  }) {
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:modelValue", v)
+    });
+    const currentImageSrc = ref("");
+    const multiple = computed(() => props.multiple);
+    const isShowImageViewer = ref(false);
+    watch(computed(() => [unref(modelValue), unref(multiple)]), ([value, multiple2]) => {
+      if (multiple2 && !Array.isArray(value)) {
+        modelValue.value = [];
+      }
+    }, {
+      immediate: true
+    });
+    const handleDelete = (src) => {
+      if (!unref(multiple)) {
+        modelValue.value = "";
+        return;
+      }
+      const index = unref(modelValue).indexOf(src);
+      if (index === -1) {
+        return;
+      }
+      modelValue.value.splice(index, 1);
+    };
+    const handleShowImageViewer = (src) => {
+      isShowImageViewer.value = true;
+      currentImageSrc.value = src;
+    };
+    const handleAppendImage = (src) => {
+      const _value = unref(modelValue);
+      if (Array.isArray(_value)) {
+        _value.push(src);
+      }
+    };
+    return () => {
+      const _multiple = unref(multiple);
+      let content;
+      if (!_multiple) {
+        content = createVNode(MKUploadFileItem, {
+          "onView": handleShowImageViewer,
+          "onDelete": handleDelete,
+          "modelValue": 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(unref(modelValue))) {
+          images = unref(modelValue).map((src) => createVNode(MKUploadFileItem, {
+            "onView": handleShowImageViewer,
+            "onDelete": handleDelete,
+            "modelValue": src,
+            "uploadContext": props.uploadContext,
+            "width": props.width,
+            "height": props.height,
+            "icon": props.icon
+          }, null));
+        }
+        content = createVNode(Fragment, null, [images, createVNode(MKUploadFileItem, {
+          "onUpdate:modelValue": handleAppendImage,
+          "uploadContext": props.uploadContext,
+          "width": props.width,
+          "height": props.height,
+          "icon": props.icon
+        }, null)]);
+      }
+      return createVNode("div", {
+        "class": "mk-upload-file-ui",
+        "style": {
+          width: _multiple ? "" : props.width
+        }
+      }, [content]);
+    };
+  }
+});
+export {
+  UploadFile as default
+};
+//# sourceMappingURL=upload-file.js.map

package/dist/esm/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":"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"}

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

@@ -70,7 +70,7 @@ const MKUploadImageItem = /* @__PURE__ */ defineComponent({
           "ref": (el) => imageInstance.value = el,
           "src": unref(modelValue),
           "class": "mk-upload-image-item__image",
-          "fit": "cover"
+          "fit": "contain"
         }, null), createVNode("div", {
           "class": "mk-upload-image-item__mask"
         }, [createVNode(ElTooltip, {
@@ -202,7 +202,7 @@ const UploadImage = /* @__PURE__ */ defineComponent({
       return createVNode("div", {
         "class": "mk-upload-image",
         "style": {
-          width: _multiple ? "" : props.width
+          width: !_multiple ? "" : props.width
         }
       }, [content, imageViewer]);
     };

package/dist/esm/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    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      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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"}

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

@@ -0,0 +1,11 @@
+import { withInstall } from "@maketribe/utils";
+import UploadVideo from "./upload-video.js";
+import { uploadVideoEmits, uploadVideoProps } from "./upload-video-options.js";
+const MKUploadVideo = withInstall(UploadVideo);
+export {
+  MKUploadVideo,
+  MKUploadVideo as default,
+  uploadVideoEmits,
+  uploadVideoProps
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/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":[],"mappings":";;;AAGa,MAAA,gBAAgB,YAAY,WAAW;"}

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

@@ -0,0 +1,38 @@
+import { buildProps } from "@maketribe/utils";
+import { UploadContext } from "../../context/UploadContext.js";
+import { WebFileUploadContext } from "../../context/WebFileUploadContext.js";
+import "../../context/web-file-upload-context.js";
+import "../../context/web-file-upload-context-options.js";
+const uploadVideoProps = buildProps({
+  uploadContext: {
+    type: UploadContext,
+    default: () => new 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
+};
+export {
+  uploadVideoEmits,
+  uploadVideoProps
+};
+//# sourceMappingURL=upload-video-options.js.map

package/dist/esm/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":[],"mappings":";;;;;AAIO,MAAM,mBAAmB,WAAW;AAAA,EACzC,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS,MAAM,IAAI,qBAAqB;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/esm/components/basic/upload-file/ui/upload-video/upload-video.js

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