@maketribe/ms-app 3.0.4 → 3.0.5

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

@@ -0,0 +1,36 @@
+import { WebFileUpload } from "@maketribe/request";
+import { buildProps } from "@maketribe/utils";
+import { UploadFile, UploadFiles } from "element-plus";
+import { ExtractPropTypes } from "vue";
+
+export const uploadFileProps = buildProps({
+  upload: {
+    type: WebFileUpload,
+  },
+  showFileList: {
+    type: Boolean,
+    default: false,
+  },
+  fileList: {
+    type: null,
+  },
+  listType: {
+    type: String,
+    values: ["text", "picture", "picture-card"],
+    default: "text",
+  },
+  limit: {
+    type: Number,
+    default: 10,
+  },
+} as const);
+
+export type UploadFileProps = ExtractPropTypes<typeof uploadFileProps>;
+
+export const uploadFileEmits = {
+  uploadSuccess: (res: any) => true,
+  "update:file-list": (fileList: any) => true,
+  remove: (uploadFile: UploadFile, uploadFiles: UploadFiles) => true,
+};
+
+export type UploadFileEmits = typeof uploadFileEmits;

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

@@ -0,0 +1,53 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElMessage, ElUpload, UploadFile, UploadFiles } from "element-plus";
+import { UploadError, WebFileUpload } from "@maketribe/request";
+import { uploadFileProps, uploadFileEmits } from "./upload-file-options";
+
+export default defineComponent({
+  name: "MKUploadFile",
+  props: uploadFileProps,
+  emits: uploadFileEmits,
+  setup(props, { slots, emit }) {
+    const upload = props.upload ?? new WebFileUpload();
+
+    const fileList = computed({
+      get: () => props.fileList,
+      set: (v) => emit("update:file-list", v),
+    });
+
+    const handleChange = async (uploadFile: UploadFile) => {
+      if (uploadFile.raw) {
+        try {
+          const result = await upload.upload(uploadFile.raw);
+          if (result.data.code == 200) {
+            emit("uploadSuccess", result);
+          }
+        } catch (e) {
+          if (e instanceof UploadError) {
+            ElMessage.error(e.message);
+          }
+        }
+      }
+    };
+
+    const handleRemove = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+      emit("remove", uploadFile, uploadFiles);
+    };
+
+    return () => {
+      return (
+        <ElUpload
+          class="mk-upload-file"
+          autoUpload={false}
+          showFileList={props.showFileList}
+          fileList={unref(fileList)}
+          listType={props.listType}
+          onChange={handleChange}
+          onRemove={handleRemove}
+          limit={props.limit}
+          v-slots={slots}
+        />
+      );
+    };
+  },
+});

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

@@ -0,0 +1,5 @@
+import UploadImage from "./upload-image";
+
+export const MKUploadImage = UploadImage;
+
+export default MKUploadImage;

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

@@ -0,0 +1,24 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { WebFileUpload } from "@maketribe/request";
+
+export const uploadImageProps = buildProps({
+  size: {
+    type: String,
+    default: "150px",
+  },
+  upload: {
+    type: WebFileUpload,
+  },
+  modelValue: {
+    type: String,
+  },
+});
+
+export type UploadImageProps = ExtractPropTypes<typeof uploadImageProps>;
+
+export const uploadImageEmits = {
+  "update:model-value": (modelValue: any) => true,
+};
+
+export type UploadImageEmits = typeof uploadImageEmits;

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

@@ -0,0 +1,58 @@
+import { ComputedRef, StyleValue, computed, defineComponent, unref } from "vue";
+import MKUploadFile from "../upload-file";
+import MKSvgIcon from "../svg-icon";
+import { uploadImageEmits, uploadImageProps } from "./upload-image-options";
+import { ElImage } from "element-plus";
+
+export default defineComponent({
+  name: "MKUploadImage",
+  props: uploadImageProps,
+  emits: uploadImageEmits,
+  setup(props, { emit }) {
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v: any) => emit("update:model-value", v),
+    });
+
+    const style: ComputedRef<StyleValue> = computed(() => ({
+      "--mk-upload-image-size": props.size,
+    }));
+
+    const handleDelete = () => {
+      modelValue.value = "";
+    };
+
+    return () => {
+      const content = unref(modelValue) ? (
+        <ElImage src={unref(modelValue)} fit="contain" />
+      ) : (
+        <div class="mk-upload-image__select">
+          <MKSvgIcon iconClass="Plus" />
+        </div>
+      );
+
+      return (
+        <div
+          class={["mk-upload-image", unref(modelValue) ? "is-image" : ""]}
+          style={unref(style)}
+        >
+          <MKUploadFile
+            class="mk-upload-image__upload"
+            upload={props.upload}
+            listType="picture-card"
+            onUploadSuccess={(res: any) =>
+              (modelValue.value = res.data.data.path)
+            }
+          >
+            {content}
+          </MKUploadFile>
+          <div class="mk-upload-image__mask">
+            <span onClick={handleDelete}>
+              <MKSvgIcon iconClass="Delete" />
+            </span>
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/components/video-view/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import VideoView from "./video-view";
+
+export const MKVideoView = withInstall(VideoView);
+export default MKVideoView;
+
+export * from "./video-view-options";

package/src/components/video-view/video-view-options.ts

@@ -0,0 +1,10 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const videoViewProps = buildProps({
+  src: { type: String, required: true },
+  poster: { type: String, required: false },
+  dialogWidth: { type: String, default: "800px" },
+} as const);
+
+export type VideoViewProps = ExtractPropTypes<typeof videoViewProps>;

package/src/components/video-view/video-view.tsx

@@ -0,0 +1,115 @@
+import { Fragment, Ref, defineComponent, ref, unref, watch } from "vue";
+import { ElButton, ElDialog, ElIcon } from "element-plus";
+import { Film, View, Download, Close } from "@element-plus/icons-vue";
+import MKImageView from "../image-view";
+import { videoViewProps } from "./video-view-options";
+
+export default defineComponent({
+  name: "MKVideoView",
+  props: videoViewProps,
+  setup(props) {
+    const isShowVideoDialog = ref(false);
+
+    const videoEl: Ref<HTMLVideoElement | null> = ref(null);
+
+    const handleViewClick = () => {
+      isShowVideoDialog.value = true;
+    };
+
+    const handleDownloadClick = () => {
+      if (!props.src) {
+        return;
+      }
+
+      const a = document.createElement("a");
+      a.setAttribute("download", new Date().getTime().toString());
+      a.target = "_blank";
+      a.href = props.src;
+      Object.assign(a.style, { width: "1px", height: "1px" });
+
+      document.body.append(a);
+      a.click();
+
+      setTimeout(() => {
+        document.body.removeChild(a);
+      });
+    };
+
+    watch(isShowVideoDialog, (isShowVideoDialog) => {
+      if (!unref(videoEl)) {
+        return;
+      }
+
+      if (!isShowVideoDialog) {
+        unref(videoEl)!.pause();
+        unref(videoEl)!.currentTime = 0;
+      }
+    });
+
+    return () => (
+      <div class="mk-video-view">
+        <MKImageView
+          src={props.src}
+          showPreview={false}
+          v-slots={{
+            error: () => {
+              return (
+                <Fragment>
+                  <ElIcon size="20">
+                    <Film />
+                  </ElIcon>
+                  <div class="mk-video-view__tools">
+                    <ElButton
+                      type="primary"
+                      icon={View}
+                      onClick={handleViewClick}
+                    />
+                    <ElButton
+                      type="primary"
+                      icon={Download}
+                      onClick={handleDownloadClick}
+                    />
+                  </div>
+                </Fragment>
+              );
+            },
+          }}
+        />
+        <ElDialog
+          appendToBody
+          showClose={false}
+          width={props.dialogWidth}
+          modelValue={unref(isShowVideoDialog)}
+          onUpdate:modelValue={(v) => {
+            isShowVideoDialog.value = v;
+          }}
+          v-slots={{
+            header: (scope: any) => {
+              return (
+                <div class="mk-video-view__dialog-header">
+                  <ElButton
+                    type="primary"
+                    icon={Download}
+                    onClick={handleDownloadClick}
+                  >
+                    下载
+                  </ElButton>
+                  <ElButton icon={Close} onClick={scope.close} />
+                </div>
+              );
+            },
+          }}
+        >
+          <video
+            class="mk-video-view__video"
+            src={props.src}
+            draggable="false"
+            preload="true"
+            controls
+            ref={(el: any) => (videoEl.value = el)}
+          />
+        </ElDialog>
+      </div>
+    );
+  },
+});

package/src/composables/create-data-form.ts

@@ -0,0 +1,6 @@
+import { reactive } from "vue";
+import { DataForm, DataFormOptions } from "@maketribe/dm";
+
+export const createDataForm = (dataFormOptions: DataFormOptions): DataForm => {
+  return reactive(new DataForm(dataFormOptions)) as DataForm;
+};

package/src/composables/create-data-table.ts

@@ -0,0 +1,8 @@
+import { reactive } from "vue";
+import { DataTable, DataTableOptions } from "@maketribe/dm";
+
+export const createDataTable = (
+  dataTableOptions: DataTableOptions
+): DataTable => {
+  return reactive(new DataTable(dataTableOptions)) as DataTable;
+};

package/src/composables/index.ts

@@ -1,3 +1,7 @@
+export * from "./create-data-table";
+export * from "./create-data-form";
+export * from "./use-column-component";
+export * from "./use-i18n";
 export * from "./on-tab-before-close";
 export * from "./on-tab-refresh";
 export * from "./on-tab-before-switch";

package/src/composables/on-tab-before-close.ts

@@ -1,5 +1,5 @@
 import { EventCallback } from "@maketribe/utils";
-import { MSAppClient } from "../MSAppClient";
+import { MSAppClient } from "../core/MSAppClient";
 
 export const onTabBeforeClose = (callback: EventCallback<undefined>) => {
   MSAppClient.instance!.userSession!.tabs.getCurrentTab()?.beforeCloseEvent.once(

package/src/composables/on-tab-before-switch.ts

@@ -1,5 +1,5 @@
 import { EventCallback } from "@maketribe/utils";
-import { MSAppClient } from "../MSAppClient";
+import { MSAppClient } from "../core";
 
 export const onTabBeforeSwitch = (callback: EventCallback<undefined>) => {
   MSAppClient.instance!.userSession!.tabs.getCurrentTab()?.beforeCloseEvent.on(

package/src/composables/on-tab-refresh.ts

@@ -1,5 +1,5 @@
 import { EventCallback } from "@maketribe/utils";
-import { MSAppClient } from "../MSAppClient";
+import { MSAppClient } from "../core";
 
 export const onTabRefresh = (callback: EventCallback<undefined>) => {
   MSAppClient.instance!.userSession!.tabs.getCurrentTab()?.beforeSwitchEvent.on(

package/src/composables/use-column-component.ts

@@ -0,0 +1,184 @@
+import { unref, computed, Ref, MaybeRef, ComputedRef, watch, ref } from "vue";
+import {
+  Column,
+  Component,
+  ComponentsCombine,
+  DataForm,
+  DataTable,
+  FilterColumn,
+  DataFilter,
+  FormColumn,
+  IComponents,
+  TableColumn,
+  isWhereFilter,
+} from "@maketribe/dm";
+import { useGlobalConfig } from "../components/config-provider";
+
+export const useComponent = (
+  componentName: MaybeRef<string>,
+  components: MaybeRef<IComponents>
+): {
+  componentInfo: ComputedRef<Component | null>;
+  component: ComputedRef<any>;
+  componentProps: ComputedRef<Record<string, any> | null>;
+} => {
+  const componentInfo = computed(() =>
+    unref(components).resolveComponent(unref(componentName))
+  );
+
+  const component = computed(() => unref(componentInfo)?.component ?? null);
+
+  const componentProps = computed(() => {
+    const componentProps = unref(componentInfo)?.defaultProps ?? null;
+
+    return componentProps ? { ...componentProps } : null;
+  });
+
+  return { componentInfo, component, componentProps };
+};
+
+export const useComponentWithDefault = (
+  componentInfo: ReturnType<typeof useComponent>,
+  defaultComponentInfo: ReturnType<typeof useComponent>
+) => {
+  const _componentInfo = computed(() =>
+    unref(componentInfo.componentInfo)
+      ? unref(componentInfo.componentInfo)
+      : unref(defaultComponentInfo.componentInfo)
+  );
+
+  const _componentProps = computed(() =>
+    unref(componentInfo.componentInfo)
+      ? unref(componentInfo.componentProps)
+      : unref(defaultComponentInfo.componentProps)
+  );
+
+  const _component = computed(() =>
+    unref(componentInfo.componentInfo)
+      ? unref(componentInfo.component)
+      : unref(defaultComponentInfo.component)
+  );
+
+  return {
+    componentInfo: _componentInfo,
+    componentProps: _componentProps,
+    component: _component,
+  };
+};
+
+export const useColumnComponent = (
+  column: Ref<Column | null> | Column,
+  components: Ref<IComponents> | IComponents
+) => {
+  const columnComponentInfo = computed(
+    () => unref(column)?.componentInfo || ""
+  );
+
+  const componentInfo: Ref<Component | null> = ref(null);
+  watch(
+    columnComponentInfo,
+    (columnComponentInfo) => {
+      if (typeof columnComponentInfo === "string") {
+        const { componentInfo: _componentInfo } = useComponent(
+          columnComponentInfo,
+          components
+        );
+
+        componentInfo.value = unref(_componentInfo);
+        return;
+      }
+
+      componentInfo.value = columnComponentInfo;
+    },
+    { immediate: true }
+  );
+
+  const component = computed(() => unref(componentInfo)?.component ?? null);
+  const componentProps = computed(() => {
+    const _componentInfo = unref(componentInfo);
+
+    if (!_componentInfo) {
+      return null;
+    }
+
+    return {
+      ..._componentInfo.defaultProps,
+      ...unref(column)?.componentProps,
+    };
+  });
+
+  return {
+    componentInfo: computed(() => unref(componentInfo)),
+    component,
+    componentProps,
+  };
+};
+
+export const useTableColumnComponent = (
+  column: Ref<TableColumn | null> | TableColumn,
+  dataTable: Ref<DataTable | null> | DataTable
+) => {
+  const defaultDataTableComponents = useGlobalConfig("dataTableComponents");
+
+  const componentCombine = computed(() => {
+    const _defaultDataTableComponents = unref(defaultDataTableComponents);
+
+    const componentsList = ([unref(dataTable)] as IComponents[]).concat(
+      _defaultDataTableComponents ? [_defaultDataTableComponents] : []
+    );
+
+    return new ComponentsCombine({ componentsList });
+  });
+
+  return useComponentWithDefault(
+    useColumnComponent(column, componentCombine),
+    useComponent("MKColumnText", componentCombine)
+  );
+};
+
+export const useFormColumnComponent = (
+  column: Ref<FormColumn | null> | FormColumn,
+  dataForm: Ref<DataForm | null> | DataForm
+) => {
+  const defaultDataFormComponents = useGlobalConfig("dataFormComponents");
+
+  const componentCombine = computed(() => {
+    const _defaultDataFormComponents = unref(defaultDataFormComponents);
+
+    const componentsList = ([unref(dataForm)] as IComponents[]).concat(
+      _defaultDataFormComponents ? [_defaultDataFormComponents] : []
+    );
+
+    return new ComponentsCombine({ componentsList });
+  });
+
+  return useComponentWithDefault(
+    useColumnComponent(column, componentCombine),
+    useComponent("MKFormInput", componentCombine)
+  );
+};
+
+export const useFilterColumnComponent = (
+  column: Ref<FilterColumn | null> | FilterColumn,
+  dataFilter: Ref<DataFilter | null> | DataFilter
+) => {
+  const defaulDataFilterComponents = useGlobalConfig("dataFilterComponents");
+  const defaulWhereFilterComponents = useGlobalConfig("whereFilterComponents");
+
+  const componentCombine = computed(() => {
+    const systemComponents = isWhereFilter(unref(dataFilter))
+      ? unref(defaulWhereFilterComponents)
+      : unref(defaulDataFilterComponents);
+
+    const componentsList = ([unref(dataFilter)] as IComponents[]).concat(
+      systemComponents ? [systemComponents] : []
+    );
+
+    return new ComponentsCombine({ componentsList });
+  });
+
+  return useComponentWithDefault(
+    useColumnComponent(column, componentCombine),
+    useComponent("MKConditionInput", componentCombine)
+  );
+};

package/src/composables/use-current-tab.ts

@@ -1,5 +1,4 @@
-import { MSAppClient } from "../MSAppClient";
-import type { Tab } from "../tabs";
+import { MSAppClient, Tab } from "../core";
 
 export const useCurrentTab = (): Tab | null =>
   MSAppClient.instance!.userSession!.tabs.getCurrentTab() ?? null;

package/src/composables/use-http-request.ts

@@ -1,5 +1,5 @@
 import { HttpRequest } from "@maketribe/request";
-import { MSAppClient } from "../MSAppClient";
+import { MSAppClient } from "../core";
 
 export const useHttpRequest = (): HttpRequest =>
   MSAppClient.instance!.httpRequest;

package/src/composables/use-i18n.ts

@@ -0,0 +1,7 @@
+import { unref } from "vue";
+import { I18n } from "@maketribe/locale";
+import { useGlobalConfig } from "../components/config-provider";
+
+export const useI18n = (): I18n | null => {
+  return unref(useGlobalConfig("i18n")) ?? null;
+};

package/src/composables/use-ms-app-client.ts

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-import { MSAppClient } from "../MSAppClient";
+import { MSAppClient } from "../core";
 
 import { MSAPPCLIENT_CONTEXT_KEY } from "../tokens";
 

package/src/composables/use-user-info.ts

@@ -1,4 +1,4 @@
-import { MSAppClient } from "../MSAppClient";
+import { MSAppClient } from "../core";
 
 export const useUserInfo = () =>
   MSAppClient.instance?.userSession?.userInfo ?? null;