@maketribe/ms-app 3.0.5 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -18,10 +18,10 @@
     "vditor": "^3.9.6",
     "lodash-es": "^4.17.21",
     "vue-router": "^4.2.4",
-    "@maketribe/dm": "^3.0.3",
+    "@maketribe/dm": "^3.0.4",
     "@maketribe/utils": "^1.1.1",
-    "@maketribe/locale": "^1.0.5",
-    "@maketribe/request": "^1.1.2"
+    "@maketribe/request": "^1.1.2",
+    "@maketribe/locale": "^1.0.5"
   },
   "scripts": {
     "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",

package/src/components/data-model/data-form/data-form-options.ts

@@ -2,10 +2,7 @@ import { ExtractPropTypes } from "vue";
 import { buildProps } from "@maketribe/utils";
 import { ColumnOptions, DataForm } from "@maketribe/dm";
 
-import { innerDataFormProps } from "./inner-data-form-options";
-
 export const dataFormProps = buildProps({
-  ...innerDataFormProps,
   dataForm: {
     type: DataForm<any>,
   },

package/src/components/data-model/data-form/data-form.tsx

@@ -1,29 +1,27 @@
 import {
   computed,
   defineComponent,
+  provide,
   reactive,
   unref,
-  useAttrs,
   useSlots,
   watch,
 } from "vue";
-import { FormColumn, DataForm, Messager, MKError } from "@maketribe/dm";
+import { FormColumn, DataForm } from "@maketribe/dm";
 
-import InnerDataForm from "./inner-data-form";
 import { dataFormEmits, dataFormProps } from "./data-form-options";
-import { ElButton, ElCard, ElScrollbar } from "element-plus";
-import { I18n } from "@maketribe/locale";
+import { DATAFORM_CONTEXT_KEY } from "./token";
+import { Disposable, Event } from "@maketribe/utils";
+import { MKFormView } from "./views";
 
 export default defineComponent({
   name: "MKDataForm",
   inheritAttrs: false,
   props: dataFormProps,
   emits: dataFormEmits,
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     let _dataForm: DataForm | null = null;
 
-    const slots = useSlots();
-
     const createDataForm = () => {
       const dataForm = new DataForm({
         name: props.name!,
@@ -54,75 +52,59 @@ export default defineComponent({
       return _dataForm;
     });
 
-    const allowSubmit = computed(() => {
-      const _dataForm = unref(dataForm);
-      if (_dataForm) {
-        return _dataForm.allowSubmit;
-      }
-      return false;
-    });
-
     watch(
       dataForm,
-      async (dataForm) => {
+      async (dataForm, _, onCleanup) => {
         await dataForm.init();
-        emit("changeDataForm", dataForm);
-      },
-      { immediate: true }
-    );
 
-    const handleSave = async () => {
-      try {
-        if (!(await unref(dataForm)?.validate())) {
-          return;
+        if (unref(dataForm).autoReset) {
+          unref(dataForm).reset();
         }
 
-        const result = await unref(dataForm)!.submit();
-
-        if (result.data.code !== 200) {
-          Messager.instance.error({ message: result.data.msg });
-          return;
+        const disposable = new Disposable();
+
+        const events = Object.keys(dataForm)
+          .filter((key) => dataForm[key as keyof DataForm] instanceof Event)
+          .map((key) => ({
+            eventName: key
+              .replace(/Event$/, "")
+              .replace(/[A-Z]/g, (match) => `-${match.toLocaleLowerCase()}`),
+            event: dataForm[key as keyof DataForm]! as Event,
+          }));
+
+        for (const item of events) {
+          disposable.register(
+            // @ts-ignore
+            item.event.on((event: any) => {
+              // @ts-ignore
+              emit(item.eventName, event);
+            })
+          );
         }
 
-        Messager.instance.success({ message: "保存成功" });
+        onCleanup(() => {
+          disposable.dispose();
+        });
 
-        emit("submitted", result);
-      } catch (e) {
-        if (e instanceof MKError) {
-          Messager.instance.error({ message: e.message });
-        }
-      }
-    };
+        emit("changeDataForm", dataForm);
+      },
+      { immediate: true }
+    );
 
-    const handleCancel = () => {
-      emit("cancel");
-    };
+    provide(
+      DATAFORM_CONTEXT_KEY,
+      reactive({
+        dataForm,
+      })
+    );
 
     return () => {
       return (
-        <ElCard class="mk-data-form" shadow="never">
-          <div class="mk-data-form__main">
-            <ElScrollbar>
-              <InnerDataForm
-                {...props}
-                dataForm={unref(dataForm)}
-                v-slots={slots}
-              />
-            </ElScrollbar>
-          </div>
-          <div class="mk-data-form__footer">
-            <ElButton
-              type="primary"
-              onClick={handleSave}
-              loading={unref(allowSubmit)}
-            >
-              {I18n.instance.translate("mk.dataForm.saveButton")}
-            </ElButton>
-            <ElButton onClick={handleCancel}>
-              {I18n.instance.translate("mk.dataForm.cancelButton")}
-            </ElButton>
-          </div>
-        </ElCard>
+        <div class="mk-data-form">
+          {slots.default?.({ ...props, dataForm: unref(dataForm) }) || (
+            <MKFormView {...props} dataForm={unref(dataForm)} v-slots={slots} />
+          )}
+        </div>
       );
     };
   },

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

@@ -9,3 +9,5 @@ export default MKDataForm;
 
 export * from "./data-form-options";
 export * from "./data-form-item";
+
+export * from "./views";

package/src/components/data-model/data-form/views/form/form-options.ts

@@ -0,0 +1,16 @@
+import { ExtractPropTypes } from "vue";
+
+import { buildProps } from "@maketribe/utils";
+import { DataForm } from "@maketribe/dm";
+
+export const formProps = buildProps({
+  rules: { type: Object },
+  labelWidth: { type: String },
+  dataForm: { type: DataForm<any>, required: true },
+} as const);
+
+export type FormProps = ExtractPropTypes<typeof formProps>;
+
+export const formEmits = {};
+
+export const FormEmits = typeof formEmits;

package/src/components/data-model/data-form/{inner-data-form.tsx → views/form/form.tsx}

@@ -4,36 +4,34 @@ import {
   defineComponent,
   onBeforeUnmount,
   onMounted,
-  provide,
-  reactive,
   ref,
-  toRefs,
   unref,
-  useSlots,
-  watch,
 } from "vue";
-import { ElForm, FormRules, FormItemRule, ElDivider } from "element-plus";
-import { DataForm, FormModel, FormColumn } from "@maketribe/dm";
-
-import { DATAFORM_CONTEXT_KEY } from "./token";
-import MKDataFormItem from "./data-form-item";
-import { innerDataFormProps } from "./inner-data-form-options";
-import { Disposable } from "@maketribe/utils";
+import {
+  ElDivider,
+  ElForm,
+  FormItemRule,
+  FormRules,
+  FormContext,
+} from "element-plus";
+import { formProps } from "./form-options";
+import { FormColumn, FormModel } from "@maketribe/dm";
+import MKDataFormItem from "../../data-form-item";
 
 let uid = 0;
 
 export default defineComponent({
-  name: "InnerDataForm",
-  inheritAttrs: false,
-  props: innerDataFormProps,
-  setup(props) {
-    const { dataForm } = toRefs(props);
-
+  props: formProps,
+  setup(props, { slots }) {
     const formUID = uid++;
 
-    const formEl = ref<FormModel | null>(null);
+    const formEl = ref<FormContext | null>(null);
+    // formEl.value.vali
+    (window as any).a = formEl;
 
-    const slots = useSlots();
+    const dataForm = computed(() => props.dataForm);
+
+    const data = computed(() => unref(dataForm).data as any);
 
     const columns = computed(() =>
       unref(dataForm)
@@ -41,21 +39,6 @@ export default defineComponent({
         .filter((column) => column.visible)
     );
 
-    const data = computed(() => unref(dataForm).data as any);
-
-    unref(dataForm).initdEvent.on(() => {
-      if (unref(dataForm).autoReset) {
-        unref(dataForm).resetWidthOriginalData();
-      }
-    });
-
-    provide(
-      DATAFORM_CONTEXT_KEY,
-      reactive({
-        dataForm,
-      })
-    );
-
     const rules = computed(() => {
       const rules: FormRules = {};
 
@@ -68,8 +51,7 @@ export default defineComponent({
             },
           ];
         }
-
-        let componentRules = props.rules?.[column.name] || [];
+        let componentRules: FormItemRule[] = props.rules?.[column.name] || [];
 
         if (!Array.isArray(componentRules)) {
           componentRules = [componentRules];
@@ -104,49 +86,19 @@ export default defineComponent({
 
     const disabled = computed(() => unref(dataForm).disabled);
 
-    let disposable: Disposable | null = null;
-
-    watch(
-      dataForm,
-      (dataForm) => {
-        disposable?.dispose();
-
-        disposable = new Disposable();
-
-        const events = Object.keys(dataForm)
-          .filter((key) => dataForm[key as keyof DataForm] instanceof Event)
-          .map((key) => ({
-            eventName: key
-              .replace(/Event$/, "")
-              .replace(/[A-Z]/g, (match) => `-${match.toLocaleLowerCase()}`),
-            event: dataForm[key as keyof DataForm]! as Event,
-          }));
-
-        for (const item of events) {
-          disposable.register(
-            // @ts-ignore
-            item.event.on((event: any) => {
-              // @ts-ignore
-              emit(item.eventName, event);
-            })
-          );
-        }
-      },
-      { immediate: true }
-    );
-
     onMounted(() => {
       unref(dataForm).formModels.push({
         id: formUID,
         validate: async () => {
-          return unref(formEl)?.validate() ?? false;
+          return unref(formEl)?.validateField() ?? false;
+        },
+        reset: () => {
+          unref(formEl)?.resetFields();
         },
       });
     });
 
     onBeforeUnmount(() => {
-      disposable?.dispose();
-
       const index = unref(dataForm).formModels.findIndex(
         (formModel) => formModel.id === uid
       );

package/src/components/data-model/data-form/views/form/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import Form from "./form";
+
+export const MKForm = withInstall(Form);
+
+export default MKForm;

package/src/components/data-model/data-form/views/form-view/form-view-options.ts

@@ -0,0 +1,17 @@
+import { ExtractPropTypes } from "vue";
+import { FormItemRule, formProps } from "element-plus";
+
+import { buildProps } from "@maketribe/utils";
+import { DataForm } from "@maketribe/dm";
+
+export const formViewProps = buildProps({
+  rules: { type: Object },
+  labelWidth: { type: String },
+  dataForm: { type: DataForm<any>, required: true },
+} as const);
+
+export type FormViewProps = ExtractPropTypes<typeof formViewProps>;
+
+export const formViewEmits = {};
+
+export const FormViewEmits = typeof formViewEmits;

package/src/components/data-model/data-form/views/form-view/form-view.tsx

@@ -0,0 +1,70 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElButton, ElCard, ElScrollbar } from "element-plus";
+import { formViewProps } from "./form-view-options";
+import { MKError, Messager } from "@maketribe/dm";
+import { I18n } from "@maketribe/locale";
+import MKForm from "../form";
+
+export default defineComponent({
+  name: "MKFormView",
+  props: formViewProps,
+  setup(props, { slots }) {
+    const dataForm = computed(() => props.dataForm);
+
+    const allowSubmit = computed(() => unref(dataForm).allowSubmit);
+
+    const handleSave = async () => {
+      try {
+        if (!(await unref(dataForm)?.validate())) {
+          return;
+        }
+
+        const result = await unref(dataForm)!.submit();
+
+        if (result.data.code !== 200) {
+          Messager.instance.error({ message: result.data.msg });
+          return;
+        }
+
+        Messager.instance.success({ message: "保存成功" });
+      } catch (e) {
+        if (e instanceof MKError) {
+          Messager.instance.error({ message: e.message });
+        }
+      }
+    };
+
+    const handleCancel = () => {
+      unref(dataForm).cancel();
+    };
+
+    return () => {
+      return (
+        <ElCard class="mk-form-view" shadow="never">
+          <div class="mk-form-view__main">
+            <ElScrollbar>
+              <MKForm
+                rules={props.rules}
+                labelWidth={props.labelWidth}
+                dataForm={props.dataForm}
+                v-slots={slots}
+              />
+            </ElScrollbar>
+          </div>
+          <div class="mk-form-view__footer">
+            <ElButton
+              type="primary"
+              onClick={handleSave}
+              loading={unref(allowSubmit)}
+            >
+              {I18n.instance.translate("mk.dataForm.saveButton")}
+            </ElButton>
+            <ElButton onClick={handleCancel}>
+              {I18n.instance.translate("mk.dataForm.cancelButton")}
+            </ElButton>
+          </div>
+        </ElCard>
+      );
+    };
+  },
+});

package/src/components/data-model/data-form/views/form-view/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import FormView from "./form-view";
+
+export const MKFormView = withInstall(FormView);
+
+export default MKFormView;

package/src/components/data-model/data-form/views/index.ts

@@ -0,0 +1,2 @@
+export * from "./form";
+export * from "./form-view";

package/src/components/data-model/data-table/data-table.tsx

@@ -88,7 +88,7 @@ export default defineComponent({
     return () => {
       return (
         <div class="mk-data-table">
-          {slots?.default?.({ dataTable: unref(dataTable) }) || (
+          {slots.default?.({ dataTable: unref(dataTable) }) || (
             <MKTableView dataTable={unref(dataTable)} />
           )}
         </div>

package/src/components/data-model/data-table/views/table/index.ts

@@ -1,6 +1,7 @@
+import { withInstall } from "@maketribe/utils";
 import TableView from "./table-view";
 
-export const MKTableView = TableView;
+export const MKTableView = withInstall(TableView);
 
 export default MKTableView;
 

package/src/components/data-model/data-tree-page/data-tree-page.tsx

@@ -12,6 +12,7 @@ import {
 import { ElButton, ElDialog, ElMessage, ElCard } from "element-plus";
 import { Search } from "@element-plus/icons-vue";
 import { useI18n } from "../../../composables";
+import { MKForm } from "../data-form";
 import MKDataTree from "../data-tree/data-tree";
 import MKDataForm from "../data-form/data-form";
 import { dataTreePageProps } from "./data-tree-page-options";
@@ -81,6 +82,7 @@ export default defineComponent({
     };
 
     const handleCancel = () => {
+      unref(dataForm).cancel();
       isShowForm.value = false;
     };
 
@@ -190,7 +192,10 @@ export default defineComponent({
             <MKDataForm
               {...unref(attrs)}
               dataForm={unref(dataForm)}
-              v-slots={unref(dataFormSlots)}
+              v-slots={{
+                ...unref(dataFormSlots),
+                default: () => <MKForm dataForm={unref(dataForm)} />,
+              }}
             />
           </ElDialog>
         </ElCard>

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

@@ -19,7 +19,7 @@ export default defineComponent({
       const response = await MKMaterialSelect();
 
       if (response.success) {
-        modelValue.value = response.data;
+        modelValue.value = response.path;
       }
     };
 

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

@@ -9,14 +9,13 @@ import {
 } 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";
+import { MKMaterialSelect } from "../material-select";
 
 let uid = 0;
 
@@ -42,32 +41,65 @@ export default defineComponent({
 
       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;
+        toolbar: [
+          "emoji",
+          "headings",
+          "bold",
+          "italic",
+          "strike",
+          "link",
+          "|",
+          "list",
+          "ordered-list",
+          "check",
+          "outdent",
+          "indent",
+          "|",
+          "quote",
+          "line",
+          "code",
+          "inline-code",
+          "insert-before",
+          "insert-after",
+          "|",
+          {
+            name: "material",
+            tipPosition: "s",
+            tip: "素材",
+            icon: `<svg><use xlink:href="#icon-image" /></svg>`,
+            click: async () => {
+              const response = await MKMaterialSelect();
+
+              if (!response.success) {
+                return;
               }
 
-              vditor.insertValue(`![图片](${response.data.data.path})`);
-
-              return response.data.data.path;
-            } catch (e) {
-              console.error(e);
-
-              ElMessage.error("网络异常");
-
-              return null;
-            }
+              vditor.insertValue(`![图片](${response.path})`);
+            },
+          },
+          "record",
+          "table",
+          "|",
+          "undo",
+          "redo",
+          "|",
+          "fullscreen",
+          "edit-mode",
+          {
+            name: "more",
+            toolbar: [
+              "both",
+              "code-theme",
+              "content-theme",
+              "export",
+              "outline",
+              "preview",
+              "devtools",
+              "info",
+              "help",
+            ],
           },
-        } as any,
+        ],
         after: () => {
           vditor!.setValue(modelValue.value || "");
 

package/src/components/material-list/material-list-options.ts

@@ -1,6 +1,6 @@
 import { ExtractPropTypes } from "vue";
 import { buildProps } from "@maketribe/utils";
-import { MaterialMan } from "../../dataview";
+import { Material, MaterialMan } from "../../dataview";
 
 export const materialListProps = buildProps({
   materialMan: {
@@ -19,5 +19,6 @@ export const materialListProps = buildProps({
 export type MaterialListProps = ExtractPropTypes<typeof materialListProps>;
 
 export const materialListEmits = {
-  "update:selected-path": (path: any) => typeof path === "string",
+  "update:selected-path": (path: any) => true,
+  selectedChange: (material: Material) => true,
 };

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

@@ -119,7 +119,7 @@ const changePageSize = (v: number) => {
 };
 
 const materialList = computed(() => unref(materialTable).getList());
-const materialTypes = computed(() => props.materialMan.materialTypes);
+const materialTypes = computed(() => props.materialMan.getMaterialType());
 const currentMaterialTypeId = computed(
   () => props.materialMan.currentMaterialTypeId
 );
@@ -145,5 +145,6 @@ const handleMaterialItemClick = (event: MouseEvent, material: Material) => {
   event.stopPropagation();
 
   value.value = material.path;
+  emit("selectedChange", material);
 };
 </script>