@maketribe/ms-app 3.0.4 → 3.0.6

package/src/components/rich-text-editor/rich-text-editor.tsx

@@ -0,0 +1,114 @@
+import {
+  Ref,
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  unref,
+  watch,
+} from "vue";
+import { MKMaterialSelect } from "../material-select";
+import TinyMCE from "tinymce";
+import "tinymce/skins/ui/oxide/content.js";
+import "tinymce/skins/content/default/content.js";
+import "tinymce/themes/silver/theme.min.js";
+import "tinymce/models/dom/model.min.js";
+import "tinymce/icons/default/icons.min.js";
+import "tinymce/skins/ui/oxide/skin.js";
+import "tinymce/plugins/link";
+import "tinymce/plugins/table";
+import "tinymce/plugins/fullscreen";
+import "./langs/zh-Hans.js";
+import {
+  richTextEditorEmits,
+  richTextEditorProps,
+} from "./rich-text-editor-options";
+
+export default defineComponent({
+  name: "MKRichTextEditor",
+  props: richTextEditorProps,
+  emits: richTextEditorEmits,
+  setup(props, { emit }) {
+    const richTextEditorEl: Ref<HTMLElement | null> = ref(null);
+
+    onMounted(async () => {
+      const tinymceInstance = await TinyMCE.init({
+        target: unref(richTextEditorEl)!,
+        promotion: false,
+        plugins: ["link", "table", "fullscreen"],
+        branding: false,
+        menubar: false,
+        content_css: "ui/default/content.css",
+        toolbar:
+          "undo redo | bold italic underline strikethrough | alignleft aligncenter alignright | outdent indent | link | material | table | hr | removeformat | fullscreen",
+        language: "zh-Hans",
+        setup: (editor) => {
+          editor.ui.registry.addButton("material", {
+            icon: "image",
+            onAction: async () => {
+              const response = await MKMaterialSelect({
+                allowMaterialTypeValues: ["1"],
+              });
+
+              if (!response.success) {
+                return;
+              }
+
+              editor.insertContent(
+                `<img src="${response.path}" alt="${response.data!.id}">`
+              );
+            },
+          });
+
+          editor.on("paste", (event) => {
+            console.log(event);
+          });
+
+          editor.on("change input undo redo", () => {
+            emit("update:model-value", editor.getContent());
+          });
+        },
+      });
+
+      watch(
+        computed(() => props.modelValue),
+        (modelValue) => {
+          for (const instance of tinymceInstance) {
+            if (instance.getContent() !== modelValue) {
+              instance.setContent(modelValue);
+            }
+          }
+        },
+        { immediate: true }
+      );
+
+      watch(
+        computed(() => props.disabled),
+        (disabled) => {
+          for (const instance of tinymceInstance) {
+            instance.mode.set(disabled ? "readonly" : "design");
+          }
+        },
+        { immediate: true }
+      );
+
+      onBeforeUnmount(() => {
+        for (const instance of tinymceInstance) {
+          instance.destroy();
+        }
+      });
+    });
+
+    return () => {
+      return (
+        <div class="mk-rich-text-editor">
+          <div
+            class="mk-rich-text-editor__wrapper"
+            ref={((el: HTMLElement) => (richTextEditorEl.value = el)) as any}
+          />
+        </div>
+      );
+    };
+  },
+});

package/src/components/role-permission-config/role-permission-config.tsx

@@ -16,12 +16,9 @@ import {
   ElAlert,
 } from "element-plus";
 import { postTraverse } from "@maketribe/utils";
-import {
-  RoleMenuNode,
-  RolePermissionPointDefine,
-  RoleTable,
-} from "../../dataview";
-import { MKDataSelect, useI18n } from "@maketribe/dm-ui";
+import { RoleMenuNode, RolePermissionPointDefine } from "../../dataview";
+import { useI18n } from "../../composables";
+import { MKDataSelect } from "../data-select";
 import {
   rolePermissionConfigEmits,
   rolePermissionConfigProps,
@@ -41,8 +38,6 @@ export default defineComponent({
   setup(props, { emit }) {
     const i18n = useI18n()!;
 
-    const roleTable = reactive(new RoleTable()) as RoleTable;
-
     const rolePermissionConfigTable = computed(
       () => props.rolePermissionConfigTable
     );
@@ -198,8 +193,8 @@ export default defineComponent({
                     <ElAlert
                       title={
                         props.rolePermissionConfigTable.hasChange()
-                          ? "当前权限已发生改变，保存后生效！"
-                          : "当前权限无任何改变！"
+                          ? `当前【 ${rolePermissionConfigTable.value.currentRoleDesc} 】权限已发生改变，保存后生效！`
+                          : `当前【 ${rolePermissionConfigTable.value.currentRoleDesc} 】权限无任何改变！`
                       }
                       showIcon
                       type={
@@ -209,11 +204,6 @@ export default defineComponent({
                       }
                       closable={false}
                     />
-                    <MKDataSelect
-                      modelValue={props.rolePermissionConfigTable.currentRoleId}
-                      onUpdate:model-value={(v) => emit("roleChange", v)}
-                      dataTable={roleTable}
-                    />
                   </div>
                   <div class="header-box-tools">
                     <ElButton

package/src/components/svg-icon/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import SvgIcon from "./svg-icon";
+
+export const MKSvgIcon = withInstall(SvgIcon);
+export default MKSvgIcon;

package/src/components/svg-icon/svg-icon-options.ts

@@ -0,0 +1,21 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const svgIconProps = buildProps({
+  iconClass: {
+    type: String,
+    required: true,
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+});
+
+export type SvgIconProps = ExtractPropTypes<typeof svgIconProps>;
+
+export const svgIconEmits = {
+  click: (e: MouseEvent) => true,
+};
+
+export type SvgIconEmits = typeof svgIconEmits;

package/src/components/svg-icon/svg-icon.tsx

@@ -0,0 +1,48 @@
+import { computed, defineComponent, unref } from "vue";
+import * as icons from "@element-plus/icons-vue";
+import { svgIconEmits, svgIconProps } from "./svg-icon-options";
+import { ElIcon } from "element-plus";
+
+export default defineComponent({
+  name: "MKSvgIcon",
+  props: svgIconProps,
+  emits: svgIconEmits,
+  setup(props, { emit }) {
+    const iconNames = Object.keys(icons);
+
+    const iconName = computed(() => `#icon-${props.iconClass}`);
+    const iconClass = computed(() =>
+      props.className ? `mk-svg-icon ${props.className}` : "mk-svg-icon"
+    );
+
+    const isElIcon = computed(() =>
+      props.iconClass ? unref(iconNames).includes(props.iconClass) : false
+    );
+
+    const handleClick = (e: MouseEvent) => {
+      emit("click", e);
+    };
+
+    return () => {
+      if (unref(isElIcon)) {
+        const Icon = icons[props.iconClass as keyof typeof icons];
+
+        return (
+          <i class={unref(iconClass)} onClick={handleClick}>
+            <ElIcon>
+              <Icon />
+            </ElIcon>
+          </i>
+        );
+      }
+
+      return (
+        <i class={unref(iconClass)} onClick={handleClick}>
+          <svg>
+            <use xlinkHref={unref(iconName)} />
+          </svg>
+        </i>
+      );
+    };
+  },
+});

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

@@ -1,10 +1,9 @@
 import { computed, defineComponent, renderSlot, unref, useSlots } from "vue";
 import { useRouter } from "vue-router";
 import { Components } from "@maketribe/dm";
-import { UserSession } from "../../UserSession";
-import { MSAppClient } from "../../MSAppClient";
+import { UserSession, MSAppClient } from "../../core";
 import { RouteType } from "../../constants";
-import { MKConfigProvider } from "@maketribe/dm-ui";
+import { MKConfigProvider } from "../config-provider";
 
 export default defineComponent({
   name: "MKSystemProvider",

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

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import UploadFile from "./upload-file";
+
+export const MKUploadFile = withInstall(UploadFile);
+export default MKUploadFile;

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(