@maketribe/ms-app 3.0.38 → 3.0.39

package/src/components/upload-file/context/web-file-upload-context.tsx

@@ -1,37 +0,0 @@
-import { computed, defineComponent, provide, unref, watch } from "vue";
-import { WebFileUpload } from "@maketribe/request";
-import { webFileUploadContextProps } from "./web-file-upload-context-options";
-import { WebFileUploadContext } from "./WebFileUploadContext";
-import { UploadContextCtxKey } from "./UploadContext";
-import { withInstall } from "@maketribe/utils";
-
-const _WebFileUploadContext = defineComponent({
-  name: "MKWebFileUploadContext",
-  props: webFileUploadContextProps,
-  inheritAttrs: false,
-  setup(props, { slots }) {
-    const accept = computed(() => props.accept);
-    const webFileUpload = computed(() => props.webFileUpload);
-
-    const webFileUploadContext = new WebFileUploadContext();
-
-    watch(
-      computed(() => [unref(accept), unref(webFileUpload)] as any),
-      ([accept, webFileUpload]: [string, WebFileUpload]) => {
-        webFileUploadContext.setAccept(accept ?? "");
-        if (webFileUpload) {
-          webFileUploadContext.setWebFileUpload(webFileUpload);
-        }
-      },
-      { immediate: true }
-    );
-
-    provide(UploadContextCtxKey, { uploadContext: webFileUploadContext });
-
-    return () => {
-      return slots.default?.();
-    };
-  },
-});
-
-export const MKWebFileUploadContext = withInstall(_WebFileUploadContext);

package/src/components/upload-file/index.ts

@@ -1,11 +0,0 @@
-import { MKUploadFile } from "./upload-file";
-
-export { MKUploadFile };
-
-export default MKUploadFile;
-
-export * from "./upload-file";
-export * from "./context";
-export * from "./ui";
-
-export * from "./upload-file-options";

package/src/components/upload-file/ui/index.ts

@@ -1 +0,0 @@
-export * from "./upload-image";

package/src/components/upload-file/ui/upload-image/index.ts

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import UploadImage from "./upload-image";
-
-export const MKUploadImage = withInstall(UploadImage);
-export default MKUploadImage;
-
-export * from "./upload-image-options";

package/src/components/upload-file/ui/upload-image/upload-image-options.ts

@@ -1,25 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { MaterialUploadContext, UploadContext } from "../../context";
-
-export const uploadImageProps = buildProps({
-  uploadContext: {
-    type: UploadContext,
-    default: () => new MaterialUploadContext(),
-  },
-  modelValue: {
-    type: [String, Array<String>],
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-} as const);
-
-export type UploadImageProps = ExtractPropTypes<typeof uploadImageProps>;
-
-export const uploadImageEmits = {
-  "update:modelValue": (path: string | string[]) => true,
-};
-
-export type UploadImageEmits = typeof uploadImageEmits;

package/src/components/upload-file/ui/upload-image/upload-image.tsx

@@ -1,337 +0,0 @@
-import {
-  Fragment,
-  Ref,
-  VNode,
-  computed,
-  defineComponent,
-  ref,
-  unref,
-  watch,
-} from "vue";
-import { ElImage, ElTooltip, ElImageViewer } from "element-plus";
-import { MKSvgIcon } from "../../../svg-icon";
-import { MKUploadFile } from "../../upload-file";
-import { uploadImageEmits, uploadImageProps } from "./upload-image-options";
-import { UploadContext } from "../../context";
-
-const MKUploadImageItem = defineComponent({
-  name: "MKUploadImageItem",
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    uploadContext: {
-      type: UploadContext,
-      required: true,
-    },
-  },
-  emits: ["update:modelValue", "view", "delete"],
-  setup(props, { emit }) {
-    const uploadFileInstance: Ref<InstanceType<typeof MKUploadFile> | null> =
-      ref(null);
-
-    const imageInstance: Ref<InstanceType<typeof ElImage> | null> = ref(null);
-
-    const modelValue = computed({
-      get: () => props.modelValue as string,
-      set: (v: string) => {
-        emit("update:modelValue", v);
-      },
-    });
-
-    const handleUpdateModelValue = (v: string) => {
-      modelValue.value = v;
-    };
-
-    const handleClick = (event: MouseEvent) => {
-      event.stopPropagation();
-
-      if (unref(modelValue)) {
-        return;
-      }
-
-      unref(uploadFileInstance)?.handleUpload();
-    };
-
-    const handleView = (event: MouseEvent) => {
-      event.stopPropagation();
-
-      emit("view", unref(modelValue));
-    };
-
-    const handleDelete = (event: MouseEvent) => {
-      event.stopPropagation();
-
-      // modelValue.value = "";
-      emit("delete", unref(modelValue));
-    };
-
-    return () => {
-      let content;
-
-      if (unref(modelValue)) {
-        content = (
-          <Fragment>
-            <ElImage
-              ref={
-                ((el: InstanceType<typeof ElImage>) =>
-                  (imageInstance.value = el)) as any
-              }
-              src={unref(modelValue)}
-              class="mk-upload-image-item__image"
-              fit="cover"
-            />
-
-            <div class="mk-upload-image-item__mask">
-              <ElTooltip content="查看">
-                <MKSvgIcon iconClass="View" onClick={handleView} />
-              </ElTooltip>
-              <ElTooltip content="删除">
-                <MKSvgIcon iconClass="Delete" onClick={handleDelete} />
-              </ElTooltip>
-            </div>
-          </Fragment>
-        );
-      } else {
-        content = <MKSvgIcon iconClass="Plus" />;
-      }
-
-      return (
-        <div class="mk-upload-image-item">
-          <MKUploadFile
-            modelValue={props.modelValue}
-            onUpdate:modelValue={handleUpdateModelValue}
-            uploadContext={props.uploadContext}
-            ref={
-              ((el: InstanceType<typeof MKUploadFile>) =>
-                (uploadFileInstance.value = el)) as any
-            }
-          >
-            <div class="mk-upload-image-item__wrapper" onClick={handleClick}>
-              {content}
-            </div>
-          </MKUploadFile>
-        </div>
-      );
-    };
-  },
-});
-
-export default defineComponent({
-  name: "MKUploadImage",
-  props: uploadImageProps,
-  emits: uploadImageEmits,
-  setup(props, { emit }) {
-    const modelValue = computed({
-      get: () => props.modelValue as string[] | string,
-      set: (v: string[] | string) => emit("update:modelValue", v),
-    });
-
-    const currentImageSrc: Ref<string> = ref("");
-
-    const multiple = computed(() => props.multiple);
-
-    const isShowImageViewer: Ref<boolean> = ref(false);
-
-    watch(
-      computed(() => [unref(modelValue), unref(multiple)]),
-      ([value, multiple]) => {
-        if (multiple && !Array.isArray(value)) {
-          modelValue.value = [];
-        }
-      },
-      { immediate: true }
-    );
-
-    const handleDelete = (src: string) => {
-      if (!unref(multiple)) {
-        modelValue.value = "";
-        return;
-      }
-
-      const index = unref(modelValue).indexOf(src);
-
-      if (index === -1) {
-        return;
-      }
-
-      (modelValue.value as string[]).splice(index, 1);
-    };
-
-    const handleShowImageViewer = (src: string) => {
-      isShowImageViewer.value = true;
-      currentImageSrc.value = src;
-    };
-
-    const handleCloseImageViewer = () => {
-      isShowImageViewer.value = false;
-    };
-
-    const handleAppendImage = (src: string) => {
-      const _value = unref(modelValue);
-
-      if (Array.isArray(_value)) {
-        _value.push(src);
-      }
-    };
-
-    return () => {
-      const _multiple = unref(multiple);
-
-      let content;
-
-      if (!_multiple) {
-        content = (
-          <MKUploadImageItem
-            onView={handleShowImageViewer}
-            onDelete={handleDelete}
-            modelValue={unref(modelValue) as string}
-            onUpdate:modelValue={(value) => (modelValue.value = value)}
-            uploadContext={props.uploadContext}
-          />
-        );
-      } else {
-        let images: VNode[] | null = null;
-
-        if (Array.isArray(unref(modelValue))) {
-          images = (unref(modelValue) as string[]).map((src) => (
-            <MKUploadImageItem
-              onView={handleShowImageViewer}
-              onDelete={handleDelete}
-              modelValue={src}
-              uploadContext={props.uploadContext}
-            />
-          ));
-        }
-
-        content = (
-          <Fragment>
-            {images}
-            <MKUploadImageItem
-              onUpdate:modelValue={handleAppendImage}
-              uploadContext={props.uploadContext}
-            />
-          </Fragment>
-        );
-      }
-
-      const imageViewer = unref(isShowImageViewer) ? (
-        <ElImageViewer
-          onClose={handleCloseImageViewer}
-          urlList={[unref(currentImageSrc)]}
-        />
-      ) : null;
-
-      return (
-        <div class="mk-upload-image">
-          {content}
-          {imageViewer}
-        </div>
-      );
-    };
-  },
-  // setup(props, { emit }) {
-  //   const uploadFileInstance: Ref<InstanceType<typeof MKUploadFile> | null> =
-  //     ref(null);
-
-  //   const imageInstance: Ref<InstanceType<typeof ElImage> | null> = ref(null);
-
-  //   const isShowImageViewer: Ref<boolean> = ref(false);
-
-  //   const modelValue = computed({
-  //     get: () => props.modelValue as string,
-  //     set: (v: string) => {
-  //       emit("update:modelValue", v);
-  //     },
-  //   });
-
-  //   const handleUpdateModelValue = (v: string) => {
-  //     modelValue.value = v;
-  //   };
-
-  //   const handleClick = (event: MouseEvent) => {
-  //     event.stopPropagation();
-
-  //     if (unref(modelValue)) {
-  //       return;
-  //     }
-
-  //     unref(uploadFileInstance)?.handleUpload();
-  //   };
-
-  //   const handleView = (event: MouseEvent) => {
-  //     event.stopPropagation();
-
-  //     isShowImageViewer.value = true;
-  //   };
-
-  //   const handleCloseImageViewer = () => {
-  //     isShowImageViewer.value = false;
-  //   };
-
-  //   const handleDelete = (event: MouseEvent) => {
-  //     event.stopPropagation();
-
-  //     modelValue.value = "";
-  //   };
-
-  //   return () => {
-  //     let content;
-
-  //     if (unref(modelValue)) {
-  //       const imageViewer = unref(isShowImageViewer) ? (
-  //         <ElImageViewer
-  //           onClose={handleCloseImageViewer}
-  //           urlList={[unref(modelValue)]}
-  //         />
-  //       ) : null;
-
-  //       content = (
-  //         <Fragment>
-  //           <ElImage
-  //             ref={
-  //               ((el: InstanceType<typeof ElImage>) =>
-  //                 (imageInstance.value = el)) as any
-  //             }
-  //             src={unref(modelValue)}
-  //             class="mk-upload-image__image"
-  //             fit="cover"
-  //           />
-
-  //           {imageViewer}
-
-  //           <div class="mk-upload-image__mask">
-  //             <ElTooltip content="查看">
-  //               <MKSvgIcon iconClass="View" onClick={handleView} />
-  //             </ElTooltip>
-  //             <ElTooltip content="删除">
-  //               <MKSvgIcon iconClass="Delete" onClick={handleDelete} />
-  //             </ElTooltip>
-  //           </div>
-  //         </Fragment>
-  //       );
-  //     } else {
-  //       content = <MKSvgIcon iconClass="Plus" />;
-  //     }
-
-  //     return (
-  //       <div class="mk-upload-image">
-  //         <MKUploadFile
-  //           modelValue={props.modelValue}
-  //           onUpdate:modelValue={handleUpdateModelValue}
-  //           uploadContext={props.uploadContext}
-  //           ref={
-  //             ((el: InstanceType<typeof MKUploadFile>) =>
-  //               (uploadFileInstance.value = el)) as any
-  //           }
-  //         >
-  //           <div class="mk-upload-image__wrapper" onClick={handleClick}>
-  //             {content}
-  //           </div>
-  //         </MKUploadFile>
-  //       </div>
-  //     );
-  //   };
-  // },
-});

package/src/components/upload-file/upload-file-options.ts

@@ -1,22 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { UploadContext } from "./context";
-import { MaterialUploadContext } from "./context/MaterialUploadContext";
-
-export const uploadFileProps = buildProps({
-  modelValue: {
-    type: String,
-  },
-  uploadContext: {
-    type: UploadContext,
-    default: () => new MaterialUploadContext(),
-  },
-} as const);
-
-export type UploadFileProps = ExtractPropTypes<typeof uploadFileProps>;
-
-export const uploadFileEmits = {
-  "update:modelValue": (path: string) => true,
-};
-
-export type UploadFileEmits = typeof uploadFileEmits;

package/src/components/upload-file/upload-file.tsx

@@ -1,69 +0,0 @@
-import { computed, defineComponent, inject, unref } from "vue";
-import { uploadFileEmits, uploadFileProps } from "./upload-file-options";
-import { ElMessage } from "element-plus";
-import { UploadContextCtxKey } from "./context";
-import { withInstall } from "@maketribe/utils";
-
-/**
- * 文件上传
- *
- * 文件上传在本后台中有两大分类
- * 1.直接上传文件
- * 2.使用素材库文件
- *
- * 文件上传的界面交互又会分为几种情况
- * 1.单文件上传（单文件上传，可能会根据。文件情况的不同，界面显示方式不一样）
- * 2.多文件上传（多文件上传基于单文件的逻辑，不过是会变成多个文件）
- *
- * 希望文件交互组件不需要用了解是直接上传文件或使用素材库。
- *
- */
-
-const _UploadFile = defineComponent({
-  name: "MKUploadFile",
-  props: uploadFileProps,
-  emits: uploadFileEmits,
-  setup(props, { emit }) {
-    const uploadContextCtx = inject(UploadContextCtxKey, null);
-
-    const value = computed({
-      get: () => props.modelValue as string,
-      set: (v: string) => emit("update:modelValue", v),
-    });
-
-    const uploadContext = computed(
-      () => uploadContextCtx?.uploadContext || props.uploadContext
-    );
-
-    const handleUpload = async () => {
-      try {
-        const uploadResult = await unref(uploadContext).selectFile();
-
-        if (uploadResult.success) {
-          value.value = uploadResult.path || value.value;
-          return;
-        }
-
-        ElMessage.error(uploadResult.msg);
-      } catch (e) {
-        console.error(e);
-        ElMessage.error("网络异常");
-      }
-    };
-
-    return {
-      handleUpload,
-    };
-  },
-  render() {
-    const { handleUpload, $slots } = this;
-
-    return (
-      <span class="mk-upload-file" onClick={handleUpload}>
-        {$slots.default?.()}
-      </span>
-    );
-  },
-});
-
-export const MKUploadFile = withInstall(_UploadFile);

package/src/components/verify-dialog/index.ts

@@ -1,5 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import VerifyDialog from "./verify-dialog";
-
-export const MKVerifyDialog = withInstall(VerifyDialog);
-export default MKVerifyDialog;

package/src/components/verify-dialog/verify-dialog-option.ts

@@ -1,24 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-
-export const verifyDialogProps = buildProps({
-  visible: {
-    type: Boolean,
-    required: true,
-  },
-  scene: {
-    type: String,
-    required: true,
-  },
-  width: {
-    type: String,
-    default: "300px",
-  },
-} as const);
-
-export const verifyDialogEmits = {
-  "update:visible": (modelValue: any) => true,
-
-  confirm: (modelValue: any) => true,
-};
-export type VerifyDialogProps = ExtractPropTypes<typeof verifyDialogEmits>;