@maketribe/ms-app 3.0.3 → 3.0.5

package/src/components/form-components/form-icon-select/form-icon-select.tsx

@@ -0,0 +1,71 @@
+import { Ref, defineComponent, onMounted, ref, unref, watch } from "vue";
+import * as elIcons from "@element-plus/icons-vue";
+import { useFormItem } from "../../data-model/data-form/composables";
+import SvgIcon from "../../svg-icon";
+import { formIconSelectProps } from "./form-icon-select-options";
+import { ElScrollbar, useFormItem as elUseFormItem } from "element-plus";
+
+export default defineComponent({
+  name: "MKFormIconSelect",
+  props: formIconSelectProps,
+  setup() {
+    const icons: Ref<string[]> = ref([]);
+
+    const { value } = useFormItem();
+
+    const { formItem: elFormItem } = elUseFormItem();
+
+    const handleClick = (icon: string) => {
+      value.value = icon;
+    };
+
+    onMounted(() => {
+      const svgList: NodeListOf<SVGElement> = document.querySelectorAll(
+        'body > svg[aria-hidden="true"]'
+      );
+
+      let iconList: string[] = [];
+
+      for (const svg of Array.from(svgList)) {
+        const symbols = svg.querySelectorAll("symbol");
+
+        iconList = iconList.concat(
+          Array.from(symbols).map((symbol) => symbol.id.replace(/^icon-/, ""))
+        );
+      }
+
+      icons.value = [...Object.keys(elIcons), ...iconList];
+    });
+
+    watch(
+      value,
+      () => {
+        elFormItem?.validate?.("change");
+      },
+      { flush: "post" }
+    );
+
+    return () => {
+      const _value = unref(value);
+
+      const children = unref(icons).map((icon) => (
+        <span
+          key={icon}
+          class={[
+            "mk-form-icon-select__icon-item",
+            icon === _value ? "is-active" : "",
+          ]}
+          onClick={() => handleClick(icon)}
+        >
+          <SvgIcon iconClass={icon} />
+        </span>
+      ));
+
+      return (
+        <div class="mk-form-icon-select">
+          <ElScrollbar height="100%">{children}</ElScrollbar>
+        </div>
+      );
+    };
+  },
+});

package/src/components/form-components/form-icon-select/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import FormIconSelect from "./form-icon-select";
+
+export const MKFormIconSelect = withInstall(FormIconSelect);
+export default MKFormIconSelect;

package/src/components/form-components/form-image-list/form-image-list-options.ts

@@ -0,0 +1,17 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { WebFileUpload } from "@maketribe/request";
+import { columnProps } from "../../data-model/data-form/composables";
+
+export const formImageListProps = buildProps({
+  ...columnProps,
+  upload: {
+    type: WebFileUpload,
+  },
+  limit: {
+    type: Number,
+    default: 10,
+  },
+});
+
+export type FormImageListProps = ExtractPropTypes<typeof formImageListProps>;

package/src/components/form-components/form-image-list/form-image-list.tsx

@@ -0,0 +1,52 @@
+import { defineComponent, computed, unref } from "vue";
+import { useFormItem } from "../../data-model/data-form/composables";
+import MKUploadFile from "../../upload-file";
+import { MKSvgIcon } from "../../svg-icon";
+import { formImageListProps } from "./form-image-list-options";
+import { UploadFile } from "element-plus";
+
+export default defineComponent({
+  name: "MKFormImageList",
+  props: formImageListProps,
+  setup(props) {
+    const { column, value } = useFormItem();
+
+    const fileList = computed(
+      () =>
+        unref(value)?.map?.((item: string) => ({ name: item, url: item })) ?? []
+    );
+
+    const handleUploadSuccess = (res: any) => {
+      let _value = unref(value);
+
+      _value = Array.isArray(_value) ? [..._value] : [];
+
+      _value.push(res.data.data.path);
+
+      value.value = _value;
+    };
+
+    const handleRemove = (item: UploadFile) => {
+      value.value = unref(value).filter((path: string) => path !== item.url);
+    };
+
+    return () => {
+      return (
+        <div class="img-select-list">
+          <MKUploadFile
+            class="image-select-list-box"
+            showFileList={true}
+            fileList={unref(fileList)}
+            listType="picture-card"
+            upload={props.upload}
+            onUploadSuccess={handleUploadSuccess}
+            onRemove={handleRemove}
+            limit={props.limit}
+          >
+            <MKSvgIcon iconClass="Plus" />
+          </MKUploadFile>
+        </div>
+      );
+    };
+  },
+});

package/src/components/form-components/form-image-list/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import FormImageList from "./form-image-list";
+
+export const MKFormImageList = withInstall(FormImageList);
+export default MKFormImageList;

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

@@ -0,0 +1,15 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { WebFileUpload } from "@maketribe/request";
+import { columnProps } from "../../data-model/data-form/composables";
+
+export const formImageUploadProps = buildProps({
+  ...columnProps,
+  upload: {
+    type: WebFileUpload,
+  },
+});
+
+export type FormImageUploadProps = ExtractPropTypes<
+  typeof formImageUploadProps
+>;

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

@@ -0,0 +1,23 @@
+import { defineComponent, unref } from "vue";
+import { formImageUploadProps } from "./form-image-upload-options";
+import { useFormItem } from "../../data-model/data-form/composables";
+import { MKUploadImage } from "../../upload-image";
+
+export default defineComponent({
+  name: "MKFormImageUpload",
+  props: formImageUploadProps,
+  setup(props, {}) {
+    const { column, value } = useFormItem();
+
+    return () => {
+      return (
+        <MKUploadImage
+          {...unref(column)?.componentProps}
+          upload={props.upload}
+          modelValue={unref(value)}
+          onUpload:model-value={(v: any) => (value.value = v)}
+        />
+      );
+    };
+  },
+});

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

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import FormImageUpload from "./form-image-upload";
+
+export const MKFormImageUpload = withInstall(FormImageUpload);
+export default MKFormImageUpload;

package/src/components/form-components/form-radio-box/form-radio-box-options.ts

@@ -0,0 +1,32 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-form/composables";
+import { DataTable } from "@maketribe/dm";
+
+export const radioBoxProps = buildProps({
+  ...columnProps,
+  source: {
+    type: Object,
+  },
+  options: {
+    type: Array,
+  },
+  dataTable: {
+    type: DataTable,
+  },
+  formatOptions: {
+    type: Function,
+    default: (item: any) => {
+      const value = item.value ?? item.id ?? item.name;
+      const label = item.label ?? item.desc ?? item.title ?? item.name;
+
+      return { value, label };
+    },
+  },
+} as const);
+
+export type RadioBoxProps = ExtractPropTypes<typeof radioBoxProps>;
+
+export const radioBoxEmits = {};
+
+export type RadioBoxEmits = typeof radioBoxEmits;

package/src/components/form-components/form-radio-box/form-radio-box.tsx

@@ -0,0 +1,83 @@
+import { computed, defineComponent, unref, ComputedRef, watch } from "vue";
+import { ElRadioGroup, ElRadio } from "element-plus";
+import { DataSource, isDataTable } from "@maketribe/dm";
+import { radioBoxProps } from "./form-radio-box-options";
+import { useFormItem } from "../../data-model/data-form/composables";
+
+export type DataOptionItem = { value: any; label: string };
+
+export default defineComponent({
+  name: "MKFormRadioBox",
+  inheritAttrs: false,
+  props: radioBoxProps,
+  setup(props, { emit }) {
+    const { value, disabled } = useFormItem();
+
+    const options: ComputedRef<DataOptionItem[]> = computed(() => {
+      if (props.dataTable) {
+        return props.dataTable
+          .getList()
+          .map((item) => props.formatOptions(item));
+      }
+
+      if (Array.isArray(props.options)) {
+        return props.options.map((item) => props.formatOptions(item));
+      }
+
+      if (props.source) {
+        const source = props.source;
+
+        switch (source.type) {
+          case DataSource.DATA:
+            return Array.isArray(source.value)
+              ? source.value.map((item) => props.formatOptions(item))
+              : [];
+
+          case DataSource.DATATABLE:
+            const dataTable = source.value;
+
+            if (isDataTable(dataTable)) {
+              return dataTable
+                .getList()
+                .map((item) => props.formatOptions(item));
+            }
+
+            return [];
+
+          default:
+            return [];
+        }
+      }
+
+      return [];
+    });
+
+    watch(
+      computed(() => props.dataTable),
+      (dataTable) => {
+        dataTable?.dataFilter.setReady();
+        dataTable?.load();
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      const children = unref(options).map((item: any) => {
+        if (!item.label) {
+          return null;
+        }
+
+        return <ElRadio label={item.value}>{item.label}</ElRadio>;
+      });
+      return (
+        <ElRadioGroup
+          disabled={unref(disabled)}
+          modelValue={unref(value)}
+          onUpdate:modelValue={(v: any) => (value.value = v)}
+        >
+          {children}
+        </ElRadioGroup>
+      );
+    };
+  },
+});

package/src/components/form-components/form-radio-box/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import FormRadioBox from "./form-radio-box";
+
+export const MKFormRadioBox = withInstall(FormRadioBox);
+export default MKFormRadioBox;
+
+export * from "./form-radio-box-options";

package/src/components/form-components/form-rich-text-editor/form-rich-text-editor-options.ts

@@ -0,0 +1,6 @@
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-form/composables";
+
+export const formRichTextEditorProps = buildProps({
+  ...columnProps,
+});

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

@@ -0,0 +1,22 @@
+import { defineComponent, unref } from "vue";
+import { useFormItem } from "../../data-model/data-form/composables";
+import { MKRichTextEditor } from "../../rich-text-editor";
+
+export default defineComponent({
+  name: "MKFormRichTextEditor",
+  setup(props) {
+    const { value, disabled } = useFormItem();
+
+    return () => {
+      return (
+        <MKRichTextEditor
+          modelValue={unref(value)}
+          onUpdate:model-value={(v: string) => {
+            value.value = v;
+          }}
+          disabled={unref(disabled)}
+        />
+      );
+    };
+  },
+});

package/src/components/form-components/form-rich-text-editor/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import FormRichTextEditor from "./form-rich-text-editor";
+
+export const MKFormRichTextEditor = withInstall(FormRichTextEditor);
+export default MKFormRichTextEditor;
+
+export * from "./form-rich-text-editor-options";

package/src/components/form-components/index.ts

@@ -0,0 +1,10 @@
+export * from "./form-data-select";
+export * from "./form-icon-select";
+export * from "./form-radio-box";
+export * from "./form-detail";
+export * from "./form-data-table-select";
+export * from "./form-image-upload";
+export * from "./form-detail-select";
+export * from "./form-image-list";
+export * from "./form-date-picker";
+export * from "./form-rich-text-editor";

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

@@ -16,7 +16,11 @@ export default defineComponent({
     });
 
     const handleSelectClick = async (e: MouseEvent) => {
-      modelValue.value = await MKMaterialSelect();
+      const response = await MKMaterialSelect();
+
+      if (response.success) {
+        modelValue.value = response.data;
+      }
     };
 
     return () => {

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

@@ -0,0 +1,14 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const imageViewProps = buildProps({
+  showPreview: {
+    type: Boolean,
+    default: true,
+  },
+  src: {
+    type: String,
+  },
+} as const);
+
+export type ImageViewProps = ExtractPropTypes<typeof imageViewProps>;

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

@@ -0,0 +1,30 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElImage } from "element-plus";
+import { imageViewProps } from "./image-view-options";
+
+export default defineComponent({
+  name: "MKImageView",
+  inheritAttrs: false,
+  props: imageViewProps,
+  setup(props, { slots }) {
+    const showPreview = computed(() => props.showPreview);
+
+    const src = computed(() => props.src);
+
+    const previewSrcList = computed(() =>
+      unref(showPreview) && unref(src) ? [unref(src)!] : []
+    );
+
+    return () => (
+      <ElImage
+        class="mk-image-view"
+        src={unref(src)}
+        v-slots={slots}
+        fit="contain"
+        previewSrcList={unref(previewSrcList)}
+        preview-teleported
+        hide-on-click-modal
+      />
+    );
+  },
+});

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

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

package/src/components/index.ts

@@ -1,3 +1,20 @@
+export * from "./data-model";
+export * from "./form-components";
+export * from "./column-components";
+export * from "./condition-components";
+export * from "./svg-icon";
+export * from "./config-provider";
+export * from "./image-view";
+export * from "./video-view";
+export * from "./file-view";
+export * from "./upload-file";
+export * from "./data-table-select-dialog";
+export * from "./data-table-select";
+export * from "./data-select";
+export * from "./upload-image";
+export * from "./pagination";
+export * from "./markdown-editor";
+export * from "./rich-text-editor";
 export * from "./system-provider";
 export * from "./material-list";
 export * from "./material-select";
@@ -5,4 +22,4 @@ export * from "./role-permission-config";
 export * from "./menu-permission-table";
 export * from "./image-select";
 export * from "./verify-dialog";
-export * from "./member-table";
+export * from "./member-table";

package/src/components/markdown-editor/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import MarkdownEditor from "./markdown-editor";
+
+export const MKMarkdownEditor = withInstall(MarkdownEditor);
+
+export default MKMarkdownEditor;
+
+export * from "./markdown-editor-options";

package/src/components/markdown-editor/markdown-editor-options.ts

@@ -0,0 +1,17 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const markdownEditorProps = buildProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+} as const);
+
+export type MarkdownEditorProps = ExtractPropTypes<typeof markdownEditorProps>;
+
+export const markdownEditorEmits = {
+  "update:model-value": (modelValue: string) => true,
+};
+
+export type MarkdownEditorEmits = typeof markdownEditorEmits;

package/src/components/markdown-editor/markdown-editor.tsx

@@ -0,0 +1,108 @@
+import {
+  Ref,
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  unref,
+} from "vue";
+// @ts-ignore
+import Vditor from "vditor";
+// import "vditor/dist/index.css";
+import {
+  markdownEditorEmits,
+  markdownEditorProps,
+} from "./markdown-editor-options";
+import { Disposable, createDisposable } from "@maketribe/utils";
+import { WebFileUpload } from "@maketribe/request";
+import { ElMessage } from "element-plus";
+
+let uid = 0;
+
+export default defineComponent({
+  name: "MKMarkdownEditor",
+  props: markdownEditorProps,
+  emits: markdownEditorEmits,
+  setup(props, { emit }) {
+    // TODO 要使用MSAppClient的HttpRequest
+    const webFileUpload = new WebFileUpload();
+
+    const markdownEl: Ref<HTMLElement | null> = ref(null);
+
+    const _uid = uid++;
+
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v: string) => emit("update:model-value", v),
+    });
+
+    onMounted(() => {
+      const disposable = new Disposable();
+
+      const vditor = new Vditor(unref(markdownEl)!, {
+        cache: { id: `vditor${_uid}` },
+        upload: {
+          handler: async (files: File[]) => {
+            if (!files.length) {
+              return null;
+            }
+
+            try {
+              const response = await webFileUpload.upload(files[0]);
+
+              if (response.data.code !== 200) {
+                ElMessage.error(response.data.msg);
+                return null;
+              }
+
+              vditor.insertValue(`![图片](${response.data.data.path})`);
+
+              return response.data.data.path;
+            } catch (e) {
+              console.error(e);
+
+              ElMessage.error("网络异常");
+
+              return null;
+            }
+          },
+        } as any,
+        after: () => {
+          vditor!.setValue(modelValue.value || "");
+
+          const _markdownEl = unref(markdownEl)!;
+
+          const handleContentChange = () => {
+            modelValue.value = vditor!.getValue();
+          };
+
+          _markdownEl.addEventListener("input", handleContentChange);
+          _markdownEl.addEventListener("keydown", handleContentChange);
+          _markdownEl.addEventListener("keyup", handleContentChange);
+          _markdownEl.addEventListener("paste", handleContentChange);
+
+          disposable.register(
+            createDisposable(() => {
+              _markdownEl.removeEventListener("input", handleContentChange);
+              _markdownEl.removeEventListener("keydown", handleContentChange);
+              _markdownEl.removeEventListener("keyup", handleContentChange);
+              _markdownEl.removeEventListener("paste", handleContentChange);
+            })
+          );
+        },
+      });
+
+      onBeforeUnmount(() => {
+        disposable.dispose();
+        vditor?.destroy();
+      });
+    });
+
+    return () => {
+      return (
+        <div ref={((el: HTMLElement) => (markdownEl.value = el)) as any}></div>
+      );
+    };
+  },
+});

package/src/components/material-list/material-group-form-popover.vue

@@ -12,9 +12,19 @@
     </template>
 
     <div>
-      <MKDataForm :data-form="materialGroupForm"  v-loading="loading" />
-      <div style=" display: flex; align-items: center; justify-content: space-between;">
-        <ElButton type="primary" :loading="!allowSubmit" @click="handleSaveClick" >
+      <MKDataForm :data-form="materialGroupForm" v-loading="loading" />
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        "
+      >
+        <ElButton
+          type="primary"
+          :loading="!allowSubmit"
+          @click="handleSaveClick"
+        >
           保存
         </ElButton>
         <ElButton @click="handleCancelClick">取消</ElButton>
@@ -26,8 +36,8 @@
 <script setup lang="ts">
 import { Ref, computed, ref, unref } from "vue";
 import { ElMessage } from "element-plus";
-import { MKDataForm } from "@maketribe/dm-ui";
-import { MaterialGroupForm, MaterialMan } from "../../dataview";
+import { MKDataForm } from "../data-model/data-form";
+import { MaterialGroupForm, MaterialMan } from "../../dataview/material";
 
 const props = defineProps({
   materialMan: {

package/src/components/material-list/material-group.vue

@@ -68,9 +68,9 @@ import {
   MaterialMan,
   MaterialGroupNode,
   MaterialGroupForm,
-  Material,
 } from "../../dataview";
-import { MKDataTree, useI18n } from "@maketribe/dm-ui";
+import { MKDataTree } from "../data-model/data-tree";
+import { useI18n } from "../../composables";
 import MaterialGroupFromPopper from "./material-group-form-popover.vue";
 
 const props = defineProps({