@maketribe/ms-app 3.0.5 → 3.0.6

package/dist/style/layouts/default/bar.css

@@ -1 +1 @@
-.mk-bar{display:flex;flex-direction:column;width:80px;height:100%;background-color:#001428;color:#fff}.mk-bar__logo{overflow:hidden;width:64px;height:64px;border-radius:4px;margin:8px auto}.mk-bar__items{flex:1}.mk-bar__footer{font-size:18px;color:#9d9d9d;height:40px;display:flex;align-items:center;justify-content:center}.mk-bar__item{position:relative;display:flex;align-items:center;justify-content:center;width:64px;margin:0 auto;flex-direction:column;cursor:pointer;margin-top:10px;padding:8px 0}.mk-bar__item-button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background-color:#9d9d9d;border-radius:4px}.mk-bar__item-title{font-size:12px;padding:5px 5px 0 5px;overflow:hidden;text-overflow:clip;white-space:normal;width:100%;box-sizing:border-box;text-align:center}.mk-bar__item.is-active{background:#fff;border-radius:4px}.mk-bar__item.is-active .mk-bar__item-button{background-color:#ff844b}.mk-bar__item.is-active .mk-bar__item-title{color:#333}.mk-bar__item.is-active.has-children{border-top-right-radius:0;border-bottom-right-radius:0}.mk-bar__item.is-active.has-children::after{content:"";position:absolute;left:100%;height:100%;width:8px;background-color:#fff}.mk-bar__setting{cursor:pointer}.mk-bar .mk-logo{width:65px;height:65px;margin:0 auto;background-size:contain;background-position:center center}
+.mk-bar{display:flex;flex-direction:column;width:80px;height:100%;background-color:#001428;color:#fff}.mk-bar__logo{overflow:hidden;width:64px;height:64px;border-radius:4px;margin:8px auto}.mk-bar__items{flex:1}.mk-bar__footer{font-size:18px;color:#9d9d9d;height:40px;display:flex;align-items:center;justify-content:center}.mk-bar__item{position:relative;display:flex;align-items:center;justify-content:center;width:64px;margin:0 auto;flex-direction:column;cursor:pointer;margin-top:10px;padding:8px 0}.mk-bar__item-button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background-color:#9d9d9d;border-radius:4px}.mk-bar__item-title{font-size:12px;padding:5px 5px 0 5px;overflow:hidden;text-overflow:clip;white-space:normal;width:100%;box-sizing:border-box;text-align:center}.mk-bar__item.is-active{background:#fff;border-radius:4px}.mk-bar__item.is-active .mk-bar__item-button{background-color:#ff844b}.mk-bar__item.is-active .mk-bar__item-title{color:#333}.mk-bar__item.is-active.has-children{border-top-right-radius:0;border-bottom-right-radius:0}.mk-bar__item.is-active.has-children::after{content:"";position:absolute;left:100%;height:100%;width:8px;background-color:#fff}.mk-bar .mk-logo{width:65px;height:65px;margin:0 auto;background-size:contain;background-position:center center}.mk-bar-settings__icon{cursor:pointer}.mk-bar-settings__item{display:flex;padding:5px 3px;align-items:center;cursor:pointer}.mk-bar-settings__item-icon{margin-right:10px}.mk-bar-settings__item:hover{background-color:#ecf5ff}

package/dist/style/layouts/default/index.css

@@ -1 +1 @@
-.mk-bar{display:flex;flex-direction:column;width:80px;height:100%;background-color:#001428;color:#fff}.mk-bar__logo{overflow:hidden;width:64px;height:64px;border-radius:4px;margin:8px auto}.mk-bar__items{flex:1}.mk-bar__footer{font-size:18px;color:#9d9d9d;height:40px;display:flex;align-items:center;justify-content:center}.mk-bar__item{position:relative;display:flex;align-items:center;justify-content:center;width:64px;margin:0 auto;flex-direction:column;cursor:pointer;margin-top:10px;padding:8px 0}.mk-bar__item-button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background-color:#9d9d9d;border-radius:4px}.mk-bar__item-title{font-size:12px;padding:5px 5px 0 5px;overflow:hidden;text-overflow:clip;white-space:normal;width:100%;box-sizing:border-box;text-align:center}.mk-bar__item.is-active{background:#fff;border-radius:4px}.mk-bar__item.is-active .mk-bar__item-button{background-color:#ff844b}.mk-bar__item.is-active .mk-bar__item-title{color:#333}.mk-bar__item.is-active.has-children{border-top-right-radius:0;border-bottom-right-radius:0}.mk-bar__item.is-active.has-children::after{content:"";position:absolute;left:100%;height:100%;width:8px;background-color:#fff}.mk-bar__setting{cursor:pointer}.mk-bar .mk-logo{width:65px;height:65px;margin:0 auto;background-size:contain;background-position:center center}.mk-menu{--el-menu-active-color:rgba(0, 98, 255, 1);--el-menu-text-color:rgba(23, 23, 37, 1);width:200px;height:100%;background-color:#fff}.mk-menu .el-menu{border:none}.mk-menu-item__icon{margin-right:10px}.mk-layout-default{height:100%;background-color:#ebeced}.mk-layout-default>.el-main{--el-main-padding:0px}.mk-layout-default__body{height:100%}.mk-layout-default__body>.el-main{--el-main-padding:0px}.mk-layout-default__header{--el-header-height:56px;background-color:#fff;border-bottom:1px solid #e2e2ea}.mk-layout-default__main{height:100%}.mk-layout-default__main>.el-main{--el-main-padding:0px}.mk-layout-default__menu{border-right:1px solid #e2e2ea}
+.mk-bar{display:flex;flex-direction:column;width:80px;height:100%;background-color:#001428;color:#fff}.mk-bar__logo{overflow:hidden;width:64px;height:64px;border-radius:4px;margin:8px auto}.mk-bar__items{flex:1}.mk-bar__footer{font-size:18px;color:#9d9d9d;height:40px;display:flex;align-items:center;justify-content:center}.mk-bar__item{position:relative;display:flex;align-items:center;justify-content:center;width:64px;margin:0 auto;flex-direction:column;cursor:pointer;margin-top:10px;padding:8px 0}.mk-bar__item-button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background-color:#9d9d9d;border-radius:4px}.mk-bar__item-title{font-size:12px;padding:5px 5px 0 5px;overflow:hidden;text-overflow:clip;white-space:normal;width:100%;box-sizing:border-box;text-align:center}.mk-bar__item.is-active{background:#fff;border-radius:4px}.mk-bar__item.is-active .mk-bar__item-button{background-color:#ff844b}.mk-bar__item.is-active .mk-bar__item-title{color:#333}.mk-bar__item.is-active.has-children{border-top-right-radius:0;border-bottom-right-radius:0}.mk-bar__item.is-active.has-children::after{content:"";position:absolute;left:100%;height:100%;width:8px;background-color:#fff}.mk-bar .mk-logo{width:65px;height:65px;margin:0 auto;background-size:contain;background-position:center center}.mk-bar-settings__icon{cursor:pointer}.mk-bar-settings__item{display:flex;padding:5px 3px;align-items:center;cursor:pointer}.mk-bar-settings__item-icon{margin-right:10px}.mk-bar-settings__item:hover{background-color:#ecf5ff}.mk-menu{--el-menu-active-color:rgba(0, 98, 255, 1);--el-menu-text-color:rgba(23, 23, 37, 1);width:200px;height:100%;background-color:#fff}.mk-menu .el-menu{border:none}.mk-menu-item__icon{margin-right:10px}.mk-layout-default{height:100%;background-color:#ebeced}.mk-layout-default>.el-main{--el-main-padding:0px}.mk-layout-default__body{height:100%}.mk-layout-default__body>.el-main{--el-main-padding:0px}.mk-layout-default__header{--el-header-height:56px;background-color:#fff;border-bottom:1px solid #e2e2ea}.mk-layout-default__main{height:100%}.mk-layout-default__main>.el-main{--el-main-padding:0px}.mk-layout-default__menu{border-right:1px solid #e2e2ea}

package/dist/style/layouts/index.css

@@ -1 +1 @@
-.mk-lock{position:fixed;left:0;top:0;right:0;bottom:0;z-index:1999}.mk-lock__overlay{width:100%;height:100%}.mk-lock-entry{position:absolute;top:50%;left:50%;width:260px;transform:translate(-50%,-50%)}.mk-lock-entry__footer{display:flex;justify-content:space-between;margin-top:6px}.mk-bar{display:flex;flex-direction:column;width:80px;height:100%;background-color:#001428;color:#fff}.mk-bar__logo{overflow:hidden;width:64px;height:64px;border-radius:4px;margin:8px auto}.mk-bar__items{flex:1}.mk-bar__footer{font-size:18px;color:#9d9d9d;height:40px;display:flex;align-items:center;justify-content:center}.mk-bar__item{position:relative;display:flex;align-items:center;justify-content:center;width:64px;margin:0 auto;flex-direction:column;cursor:pointer;margin-top:10px;padding:8px 0}.mk-bar__item-button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background-color:#9d9d9d;border-radius:4px}.mk-bar__item-title{font-size:12px;padding:5px 5px 0 5px;overflow:hidden;text-overflow:clip;white-space:normal;width:100%;box-sizing:border-box;text-align:center}.mk-bar__item.is-active{background:#fff;border-radius:4px}.mk-bar__item.is-active .mk-bar__item-button{background-color:#ff844b}.mk-bar__item.is-active .mk-bar__item-title{color:#333}.mk-bar__item.is-active.has-children{border-top-right-radius:0;border-bottom-right-radius:0}.mk-bar__item.is-active.has-children::after{content:"";position:absolute;left:100%;height:100%;width:8px;background-color:#fff}.mk-bar__setting{cursor:pointer}.mk-bar .mk-logo{width:65px;height:65px;margin:0 auto;background-size:contain;background-position:center center}.mk-menu{--el-menu-active-color:rgba(0, 98, 255, 1);--el-menu-text-color:rgba(23, 23, 37, 1);width:200px;height:100%;background-color:#fff}.mk-menu .el-menu{border:none}.mk-menu-item__icon{margin-right:10px}.mk-layout-default{height:100%;background-color:#ebeced}.mk-layout-default>.el-main{--el-main-padding:0px}.mk-layout-default__body{height:100%}.mk-layout-default__body>.el-main{--el-main-padding:0px}.mk-layout-default__header{--el-header-height:56px;background-color:#fff;border-bottom:1px solid #e2e2ea}.mk-layout-default__main{height:100%}.mk-layout-default__main>.el-main{--el-main-padding:0px}.mk-layout-default__menu{border-right:1px solid #e2e2ea}
+.mk-lock{position:fixed;left:0;top:0;right:0;bottom:0;z-index:1999}.mk-lock__overlay{width:100%;height:100%}.mk-lock-entry{position:absolute;top:50%;left:50%;width:260px;transform:translate(-50%,-50%)}.mk-lock-entry__footer{display:flex;justify-content:space-between;margin-top:6px}.mk-bar{display:flex;flex-direction:column;width:80px;height:100%;background-color:#001428;color:#fff}.mk-bar__logo{overflow:hidden;width:64px;height:64px;border-radius:4px;margin:8px auto}.mk-bar__items{flex:1}.mk-bar__footer{font-size:18px;color:#9d9d9d;height:40px;display:flex;align-items:center;justify-content:center}.mk-bar__item{position:relative;display:flex;align-items:center;justify-content:center;width:64px;margin:0 auto;flex-direction:column;cursor:pointer;margin-top:10px;padding:8px 0}.mk-bar__item-button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background-color:#9d9d9d;border-radius:4px}.mk-bar__item-title{font-size:12px;padding:5px 5px 0 5px;overflow:hidden;text-overflow:clip;white-space:normal;width:100%;box-sizing:border-box;text-align:center}.mk-bar__item.is-active{background:#fff;border-radius:4px}.mk-bar__item.is-active .mk-bar__item-button{background-color:#ff844b}.mk-bar__item.is-active .mk-bar__item-title{color:#333}.mk-bar__item.is-active.has-children{border-top-right-radius:0;border-bottom-right-radius:0}.mk-bar__item.is-active.has-children::after{content:"";position:absolute;left:100%;height:100%;width:8px;background-color:#fff}.mk-bar .mk-logo{width:65px;height:65px;margin:0 auto;background-size:contain;background-position:center center}.mk-bar-settings__icon{cursor:pointer}.mk-bar-settings__item{display:flex;padding:5px 3px;align-items:center;cursor:pointer}.mk-bar-settings__item-icon{margin-right:10px}.mk-bar-settings__item:hover{background-color:#ecf5ff}.mk-menu{--el-menu-active-color:rgba(0, 98, 255, 1);--el-menu-text-color:rgba(23, 23, 37, 1);width:200px;height:100%;background-color:#fff}.mk-menu .el-menu{border:none}.mk-menu-item__icon{margin-right:10px}.mk-layout-default{height:100%;background-color:#ebeced}.mk-layout-default>.el-main{--el-main-padding:0px}.mk-layout-default__body{height:100%}.mk-layout-default__body>.el-main{--el-main-padding:0px}.mk-layout-default__header{--el-header-height:56px;background-color:#fff;border-bottom:1px solid #e2e2ea}.mk-layout-default__main{height:100%}.mk-layout-default__main>.el-main{--el-main-padding:0px}.mk-layout-default__menu{border-right:1px solid #e2e2ea}

package/dist/style/src/components/data-form-page.scss

@@ -2,4 +2,8 @@
   height: 100%;
   padding: 10px;
   box-sizing: border-box;
+
+  .mk-data-form {
+    height: 100%;
+  }
 }

package/dist/style/src/components/data-form.scss

@@ -1,23 +0,0 @@
-.mk-data-form {
-  height: 100%;
-
-  > .el-card__body {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-  }
-
-  &__main {
-    position: relative;
-    flex: 1 0 0px;
-
-    height: 0;
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 15px;
-  }
-}

package/dist/style/src/components/data-table-page.scss

@@ -1,4 +1,5 @@
 .mk-data-table-page {
+  display: flex;
   height: 100%;
   padding: 10px;
   box-sizing: border-box;

package/dist/style/src/components/data-table.scss

@@ -1,3 +1,3 @@
 .mk-data-table {
-  height: 100%;
+  // height: 100%;
 }

package/dist/style/src/components/form-view.scss

@@ -0,0 +1,26 @@
+.mk-form-view {
+  height: 100%;
+
+  &.el-card {
+    > .el-card__body {
+      display: flex;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
+  }
+
+  &__main {
+    position: relative;
+    flex: 1 0 0px;
+
+    height: 0;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+  }
+}

package/dist/style/src/components/index.scss

@@ -15,6 +15,7 @@
 @use "./data-table.scss";
 @use "./data-table-page.scss";
 @use "./data-form.scss";
+@use "./form-view.scss";
 @use "./data-form-page.scss";
 @use "./data-tree.scss";
 @use "./data-tree-page.scss";

package/dist/style/src/components/material-item.scss

@@ -16,5 +16,8 @@
   &__title {
     font-size: 12px;
     padding: 5px 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }

package/dist/style/src/layouts/default/bar.scss

@@ -12,7 +12,6 @@
     height: 64px;
     border-radius: 4px;
     margin: 8px auto;
-
   }
 
   &__items {
@@ -39,7 +38,7 @@
     cursor: pointer;
     margin-top: 10px;
     padding: 8px 0;
-    
+
     &-button {
       display: flex;
       align-items: center;
@@ -48,10 +47,9 @@
       height: 25px;
       background-color: rgba(157, 157, 157, 1);
       border-radius: 4px;
-
     }
 
-    &-title{
+    &-title {
       font-size: 12px;
       padding: 5px 5px 0 5px;
       overflow: hidden;
@@ -60,7 +58,7 @@
       width: 100%;
       box-sizing: border-box;
       text-align: center;
-    } 
+    }
 
     &.is-active {
       background: white;
@@ -72,8 +70,8 @@
         background-color: rgba(255, 132, 75, 1);
       }
 
-      .mk-bar__item-title{
-        color:#333;
+      .mk-bar__item-title {
+        color: #333;
       }
 
       &.has-children {
@@ -92,10 +90,6 @@
     }
   }
 
-  &__setting {
-    cursor: pointer;
-  }
-
   .mk-logo {
     width: 65px;
     height: 65px;
@@ -103,4 +97,28 @@
     background-size: contain;
     background-position: center center;
   }
+
+  @at-root {
+    &-settings {
+      &__icon {
+        cursor: pointer;
+      }
+
+      &__item {
+        display: flex;
+        padding: 5px 3px;
+        align-items: center;
+        cursor: pointer;
+
+        &-icon {
+          margin-right: 10px;
+        }
+
+        &:hover {
+          background-color: rgb(236, 245, 255);
+        }
+
+      }
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -18,7 +18,7 @@
     "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"

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).resetWidthOriginalData();
         }
 
-        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,26 @@ 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 } 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 slots = useSlots();
+    const dataForm = computed(() => props.dataForm);
+
+    const data = computed(() => unref(dataForm).data as any);
 
     const columns = computed(() =>
       unref(dataForm)
@@ -41,21 +31,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 +43,7 @@ export default defineComponent({
             },
           ];
         }
-
-        let componentRules = props.rules?.[column.name] || [];
+        let componentRules: FormItemRule[] = props.rules?.[column.name] || [];
 
         if (!Array.isArray(componentRules)) {
           componentRules = [componentRules];
@@ -104,37 +78,6 @@ 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,
@@ -145,8 +88,6 @@ export default defineComponent({
     });
 
     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;