@maketribe/ms-app 3.0.30 → 3.0.32

package/src/components/system-provider/system-provider.tsx

@@ -0,0 +1,95 @@
+import {
+  computed,
+  defineComponent,
+  renderSlot,
+  unref,
+  useSlots,
+  watch,
+} from "vue";
+import { useRouter } from "vue-router";
+import { Components } from "@maketribe/dm";
+import { MSAppClient } from "../../core";
+import { MKConfigProvider } from "../config-provider";
+
+/**
+ * 路由变动的几种情况，
+ * 1.点击菜单跳转陆游
+ * 2.特定业务逻辑需要跳转路由
+ * 3.返回上一页
+ * 4.刷新页面
+ */
+
+export default defineComponent({
+  name: "MKSystemProvider",
+  setup() {
+    const vueRouter = useRouter();
+
+    const msAppClient = MSAppClient.instance!;
+
+    const ready = computed(() => msAppClient.ready);
+
+    const slots = useSlots();
+
+    watch(
+      computed(() => unref(vueRouter.currentRoute)),
+      (route) => {
+        const userSession = msAppClient.userSession;
+
+        if (!userSession) {
+          return;
+        }
+
+        const router = userSession.router;
+        const menu = userSession.menu;
+        const tabs = userSession.tabs;
+
+        const routeInfo = router.getRouteByName(route.name as string);
+
+        if (!routeInfo) {
+          menu.setCurrentMenuNode(null);
+          tabs.setCurrentTab(null);
+          return;
+        }
+
+        const menuNode = menu.findMenuNodeByID(routeInfo.menuId);
+
+        if (!menuNode) {
+          menu.setCurrentMenuNode(null);
+          tabs.setCurrentTab(null);
+          return;
+        }
+
+        menu.setCurrentMenuNode(menuNode);
+
+        const tab =
+          tabs.findTabByID(route.fullPath) ??
+          tabs.createTab({
+            id: route.fullPath,
+            title: routeInfo.title,
+            affix: !!route.matched?.[route.matched?.length - 1]?.meta?.affix,
+            realRoute: route,
+            route: routeInfo,
+          });
+
+        tabs.switchTab(tab);
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      return (
+        <MKConfigProvider
+          dataTableComponents={msAppClient.dataTableComponents as Components}
+          dataFormComponents={msAppClient.dataFormComponents as Components}
+          dataFilterComponents={msAppClient.dataFilterComponents as Components}
+          whereFilterComponents={
+            msAppClient.whereFilterComponents as Components
+          }
+          i18n={msAppClient.i18n}
+        >
+          {renderSlot(slots, "default")}
+        </MKConfigProvider>
+      );
+    };
+  },
+});

package/src/components/upload-file/context/MaterialUploadContext.ts

@@ -0,0 +1,33 @@
+import { MKMaterialSelect } from "../../material-select";
+import { MaterialType } from "../../../dataview";
+import { UploadContext, UploadResult } from "./UploadContext";
+
+export type MaterialUploadContextOptions = {
+  allowMaterialTypeValues?: MaterialType["value"][];
+};
+
+export class MaterialUploadContext extends UploadContext {
+  allowMaterialTypeValues: MaterialType["value"][];
+
+  constructor(options: MaterialUploadContextOptions = {}) {
+    super();
+
+    this.allowMaterialTypeValues = options.allowMaterialTypeValues || [];
+  }
+
+  setAllowMaterialTypeValues(allowMaterialTypeValues: MaterialType["value"][]) {
+    this.allowMaterialTypeValues = allowMaterialTypeValues;
+  }
+
+  async selectFile(): Promise<UploadResult> {
+    const materialSelectResult = await MKMaterialSelect({
+      allowMaterialTypeValues: this.allowMaterialTypeValues,
+    });
+
+    return {
+      success: true,
+      path: materialSelectResult.path,
+      msg: "",
+    };
+  }
+}

package/src/components/upload-file/context/UploadContext.ts

@@ -0,0 +1,21 @@
+import { InjectionKey } from "vue";
+
+export type UploadResult = {
+  success: boolean;
+  path: string;
+  msg: string;
+};
+
+export interface UploadContextCtx {
+  uploadContext: UploadContext;
+}
+
+export const UploadContextCtxKey = Symbol(
+  "UploadContextCtxKey"
+) as InjectionKey<UploadContextCtx>;
+
+export class UploadContext {
+  selectFile(): Promise<UploadResult> {
+    throw new Error();
+  }
+}

package/src/components/upload-file/context/WebFileUploadContext.ts

@@ -0,0 +1,77 @@
+import { WebFileUpload } from "@maketribe/request";
+import { UploadContext, UploadResult } from "./UploadContext";
+import { MSAppClient } from "../../../core";
+
+export type WebFileUploadContextOptions = {
+  webFileUpload?: WebFileUpload;
+  accept?: string;
+};
+
+export class WebFileUploadContext extends UploadContext {
+  webFileUpload: WebFileUpload;
+  accept: string;
+
+  constructor(options: WebFileUploadContextOptions = {}) {
+    super();
+
+    this.accept = options.accept || "";
+
+    this.webFileUpload =
+      options.webFileUpload ??
+      new WebFileUpload({
+        httpRequest: MSAppClient.instance!.httpRequest,
+      });
+  }
+
+  setAccept(accept: string) {
+    this.accept = accept;
+  }
+
+  setWebFileUpload(webFileUpload: WebFileUpload) {
+    this.webFileUpload = webFileUpload;
+  }
+
+  async selectFile(): Promise<UploadResult> {
+    const input = document.createElement("input");
+
+    input.type = "file";
+
+    if (this.accept) {
+      input.accept = this.accept;
+    }
+
+    Object.assign(input.style, {
+      width: "1px",
+      height: "1px",
+      display: "none",
+    });
+
+    const file: File | null = await new Promise((resolve) => {
+      const handleFileChange = (event: Event) => {
+        const files = input.files;
+
+        input.parentElement?.removeChild(input);
+
+        resolve(files?.length ? files[0] : null);
+      };
+
+      input.addEventListener("change", handleFileChange);
+
+      document.body.append(input);
+
+      input.click();
+    });
+
+    if (!file) {
+      return { success: true, path: "", msg: "" };
+    }
+
+    const response = await this.webFileUpload.upload(file);
+
+    return {
+      success: response.data.code === 200,
+      path: response.data.data.path,
+      msg: response.data.msg,
+    };
+  }
+}

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

@@ -0,0 +1,7 @@
+export * from "./UploadContext";
+export * from "./WebFileUploadContext";
+export * from "./MaterialUploadContext";
+export * from "./material-upload-context";
+export * from "./material-upload-context-options";
+export * from "./web-file-upload-context";
+export * from "./web-file-upload-context-options";

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

@@ -0,0 +1,13 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { MaterialType } from "../../../dataview";
+
+export const materialUploadContextProps = buildProps({
+  allowMaterialTypeValues: {
+    type: Array<MaterialType["value"]>,
+  },
+} as const);
+
+export type MaterialUploadContextProps = ExtractPropTypes<
+  typeof materialUploadContextProps
+>;

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

@@ -0,0 +1,34 @@
+import { computed, defineComponent, inject, unref, watch } from "vue";
+import { materialUploadContextProps } from "./material-upload-context-options";
+import { MaterialUploadContext } from "./MaterialUploadContext";
+import { UploadContextCtxKey } from "./UploadContext";
+import { withInstall } from "@maketribe/utils";
+
+const _MaterialUploadContext = defineComponent({
+  name: "MKMaterialUploadContext",
+  props: materialUploadContextProps,
+  inheritAttrs: false,
+  setup(props, { slots }) {
+    const allowMaterialTypeValues = computed(
+      () => props.allowMaterialTypeValues
+    );
+
+    const materialUploadContext = new MaterialUploadContext({
+      allowMaterialTypeValues: unref(allowMaterialTypeValues) ?? [],
+    });
+
+    watch(allowMaterialTypeValues, (allowMaterialTypeValues) => {
+      materialUploadContext.setAllowMaterialTypeValues(
+        allowMaterialTypeValues ?? []
+      );
+    });
+
+    inject(UploadContextCtxKey, { uploadContext: materialUploadContext });
+
+    return () => {
+      return slots.default?.();
+    };
+  },
+});
+
+export const MKMaterialUploadContext = withInstall(_MaterialUploadContext);

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

@@ -0,0 +1,16 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { WebFileUpload } from "@maketribe/request";
+
+export const webFileUploadContextProps = buildProps({
+  accept: {
+    type: String,
+  },
+  webFileUpload: {
+    type: WebFileUpload,
+  },
+} as const);
+
+export type WebFileUploadContextProps = ExtractPropTypes<
+  typeof webFileUploadContextProps
+>;

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,25 @@
+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;