@maketribe/ms-app 3.0.7 → 3.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -10,18 +10,20 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
     "@element-plus/icons-vue": "^2.1.0",
-    "element-plus": "^2.3.7",
-    "vue": "^3.3.4",
-    "ufo": "^1.3.1",
+    "element-plus": "^2.4.3",
+    "lodash-es": "^4.17.21",
     "tinymce": "^6.8.0",
+    "ufo": "^1.3.1",
     "vditor": "^3.9.6",
-    "lodash-es": "^4.17.21",
+    "vue": "^3.3.4",
+    "vue-codemirror": "^6.1.1",
     "vue-router": "^4.2.4",
-    "@maketribe/dm": "^3.0.4",
+    "@maketribe/dm": "^3.0.7",
     "@maketribe/utils": "^1.1.1",
-    "@maketribe/request": "^1.1.2",
-    "@maketribe/locale": "^1.0.5"
+    "@maketribe/locale": "^1.0.5",
+    "@maketribe/request": "^1.1.8"
   },
   "scripts": {
     "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",

package/src/components/column-components/column-json/column-json-options.ts

@@ -0,0 +1,13 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnJsonProps = buildProps({
+  ...columnProps,
+  buttonText: {
+    type: String,
+    default: "查看",
+  },
+} as const);
+
+export type ColumnJsonProps = ExtractPropTypes<typeof columnJsonProps>;

package/src/components/column-components/column-json/column-json.tsx

@@ -0,0 +1,41 @@
+import { Fragment, computed, defineComponent, ref, unref } from "vue";
+import { ElButton, ElDialog, ElScrollbar } from "element-plus";
+import { I18n } from "@maketribe/locale";
+import { useColumn } from "../../data-model/data-table/composables";
+import { columnJsonProps } from "./column-json-options";
+import { MKJsonEditor } from "../../json-editor";
+
+export default defineComponent({
+  name: "MKColumnJson",
+  props: columnJsonProps,
+  setup(props) {
+    const { value } = useColumn(props);
+
+    const isShowDialog = ref(false);
+
+    const buttonText = computed(() => props.buttonText);
+
+    const handleClick = () => {
+      isShowDialog.value = true;
+    };
+
+    return () => {
+      return (
+        <Fragment>
+          <ElButton onClick={handleClick}>{unref(buttonText)}</ElButton>
+
+          <ElDialog
+            class="mk-column-json__dialog"
+            appendToBody
+            modelValue={unref(isShowDialog)}
+            onUpdate:modelValue={(v: boolean) => (isShowDialog.value = v)}
+          >
+            <ElScrollbar height="100%">
+              <MKJsonEditor disabled modelValue={unref(value) as string} />
+            </ElScrollbar>
+          </ElDialog>
+        </Fragment>
+      );
+    };
+  },
+});

package/src/components/column-components/column-json/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import ColumnJson from "./column-json";
+
+export const MKColumnJson = withInstall(ColumnJson);
+
+export default MKColumnJson;
+
+export * from "./column-json-options";

package/src/components/column-components/column-text/column-text.tsx

@@ -12,7 +12,7 @@ export default defineComponent({
     const formatValue = computed(() => props.formatValue(unref(value)));
 
     return () => {
-      return <span>{unref(formatValue)}</span>;
+      return <span class="mk-column-text">{unref(formatValue)}</span>;
     };
   },
 });

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

@@ -3,3 +3,4 @@ export * from "./column-image";
 export * from "./column-text";
 export * from "./column-object-mapping-text";
 export * from "./column-select";
+export * from "./column-json";

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

@@ -2,10 +2,12 @@ import {
   Fragment,
   computed,
   defineComponent,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
   unref,
+  watch,
 } from "vue";
 import {
   ElDivider,
@@ -15,8 +17,9 @@ import {
   FormContext,
 } from "element-plus";
 import { formProps } from "./form-options";
-import { FormColumn, FormModel } from "@maketribe/dm";
+import { DataFormType, FormColumn, FormModel } from "@maketribe/dm";
 import MKDataFormItem from "../../data-form-item";
+import { Disposable } from "@maketribe/utils";
 
 let uid = 0;
 
@@ -26,8 +29,6 @@ export default defineComponent({
     const formUID = uid++;
 
     const formEl = ref<FormContext | null>(null);
-    // formEl.value.vali
-    (window as any).a = formEl;
 
     const dataForm = computed(() => props.dataForm);
 
@@ -87,27 +88,52 @@ export default defineComponent({
     const disabled = computed(() => unref(dataForm).disabled);
 
     onMounted(() => {
-      unref(dataForm).formModels.push({
-        id: formUID,
-        validate: async () => {
-          return unref(formEl)?.validateField() ?? false;
-        },
-        reset: () => {
-          unref(formEl)?.resetFields();
-        },
-      });
-    });
+      watch(
+        dataForm,
+        (dataForm, _, onCleanup) => {
+          const disposable = new Disposable();
+
+          unref(dataForm).formModels.push({
+            id: formUID,
+            validate: async () => {
+              return unref(formEl)?.validateField() ?? false;
+            },
+            reset: () => {
+              unref(formEl)?.resetFields();
+            },
+            clearValidate: () => {
+              unref(formEl)?.clearValidate();
+            },
+          });
 
-    onBeforeUnmount(() => {
-      const index = unref(dataForm).formModels.findIndex(
-        (formModel) => formModel.id === uid
-      );
+          disposable.register(
+            dataForm.dataFormTypeChangeEvent.on(async ({ dataFormType }) => {
+              if (dataFormType !== DataFormType.NONE) {
+                // 测试下来 需要两次nextTick才能清楚验证
+                await nextTick();
+                await nextTick();
 
-      if (index === -1) {
-        return;
-      }
+                dataForm.clearValidate();
+              }
+            })
+          );
+
+          onCleanup(() => {
+            const index = dataForm.formModels.findIndex(
+              (formModel) => formModel.id === uid
+            );
+
+            if (index === -1) {
+              return;
+            }
 
-      unref(dataForm).formModels.splice(index, 1);
+            dataForm.formModels.splice(index, 1);
+
+            disposable.dispose();
+          });
+        },
+        { immediate: true }
+      );
     });
 
     return () => {

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

@@ -11,8 +11,6 @@ export default defineComponent({
   setup(props, { slots }) {
     const dataForm = computed(() => props.dataForm);
 
-    const allowSubmit = computed(() => unref(dataForm).allowSubmit);
-
     const handleSave = async () => {
       try {
         if (!(await unref(dataForm)?.validate())) {
@@ -55,7 +53,7 @@ export default defineComponent({
             <ElButton
               type="primary"
               onClick={handleSave}
-              loading={unref(allowSubmit)}
+              loading={unref(unref(dataForm).loading)}
             >
               {I18n.instance.translate("mk.dataForm.saveButton")}
             </ElButton>

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

@@ -1,4 +1,4 @@
-import { computed, defineComponent, inject, toRaw, unref } from "vue";
+import { computed, defineComponent, unref } from "vue";
 import { dataTableColumnProps } from "./data-table-column-options";
 
 export default defineComponent({

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

@@ -9,7 +9,7 @@ import {
 } from "vue";
 import { dataTableProps } from "./data-table-options";
 import { DATATABLE_CONTEXT_KEY } from "./token";
-import MKTableView from "./views/table";
+import MKTableView from "./views/table-view";
 
 export default defineComponent({
   name: "MKDataTable",

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

@@ -1 +1,5 @@
 export * from "./table";
+export * from "./table-tree";
+export * from "./tree";
+export * from "./table-view";
+export * from "./tree-view";

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

@@ -1,9 +1,8 @@
 import { withInstall } from "@maketribe/utils";
-import TableView from "./table-view";
+import Table from "./table";
 
-export const MKTableView = withInstall(TableView);
+export const MKTable = withInstall(Table);
 
-export default MKTableView;
+export default MKTable;
 
-export * from "./classify-search";
-export * from "./search";
+export * from "./table-options";

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

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from "vue";
+import { DataTable } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const tableProps = buildProps({
+  dataTable: {
+    type: DataTable<any>,
+    required: true,
+  },
+} as const);
+
+export type TableProps = ExtractPropTypes<typeof tableProps>;

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

@@ -0,0 +1,82 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElEmpty, ElTable, ElTableColumn } from "element-plus";
+import { tableProps } from "./table-options";
+import { MKDataTableColumn } from "../../data-table-column";
+import MKDataTableColumnComponent from "../../data-table-column-component";
+
+export default defineComponent({
+  name: "MKTable",
+  props: tableProps,
+  setup(props, { slots }) {
+    const dataTable = computed(() => props.dataTable);
+
+    return () => {
+      const columns = unref(dataTable)
+        .getColumns()
+        .filter((column) => column.visible && column.name)
+        .map((column) => {
+          const columnProps: Record<string, any> = {
+            prop: column.name,
+            label: column.label,
+            width: column.width,
+            minWidth: column.minWidth,
+            fixed: column.fixed,
+            align: column.align || "center",
+            reserveSelection: true,
+            type: column.type === null ? "default" : column.type,
+          };
+
+          if (!column.visible) {
+            return null;
+          }
+
+          return (
+            slots[`col-${column.name}`]?.() ?? (
+              <ElTableColumn
+                {...columnProps}
+                v-slots={{
+                  default: (scope: {
+                    $index: number;
+                    row: any;
+                    column: any;
+                  }) => {
+                    let children = slots[`col-${column.name}-content`]?.({
+                      $index: scope.$index,
+                      row: scope.row,
+                      column: column,
+                      dataTable: unref(dataTable),
+                    });
+
+                    if (children) {
+                      return children;
+                    }
+
+                    return (
+                      <MKDataTableColumnComponent
+                        column={column}
+                        row={scope.row}
+                        index={scope.$index}
+                      />
+                    );
+                  },
+                }}
+              />
+            )
+          );
+        });
+
+      return (
+        <ElTable
+          data={unref(dataTable).getList()}
+          rowKey={unref(dataTable).primaryKey}
+          show-overflow-tooltip
+          border
+          stripe
+          v-slots={{ empty: () => slots.empty?.() || <ElEmpty /> }}
+        >
+          {columns}
+        </ElTable>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import TableTree from "./table-tree";
+
+export const MKTableTree = withInstall(TableTree);
+
+export default MKTableTree;
+
+export * from "./table-tree-options";

package/src/components/data-model/data-table/views/table-tree/table-tree-options.ts

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from "vue";
+import { DataTree } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const tableTreeProps = buildProps({
+  dataTree: {
+    type: DataTree<any>,
+    required: true,
+  },
+} as const);
+
+export type TableTreeProps = ExtractPropTypes<typeof tableTreeProps>;

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

@@ -0,0 +1,104 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElEmpty, ElTable, ElTableColumn, TreeNode } from "element-plus";
+import { tableTreeProps } from "./table-tree-options";
+import { MKDataTableColumn } from "../../data-table-column";
+import MKDataTableColumnComponent from "../../data-table-column-component";
+import { DataTreeNode } from "@maketribe/dm";
+
+export default defineComponent({
+  name: "MKTableTree",
+  props: tableTreeProps,
+  setup(props, { slots }) {
+    const dataTree = computed(() => props.dataTree);
+
+    const treeProps = computed(() => {
+      const _dataTre = unref(dataTree);
+
+      return { children: _dataTre.props.children, hasChildren: "hasChildren" };
+    });
+
+    const handleLoad = async (
+      row: DataTreeNode,
+      node: TreeNode,
+      resolve: Function
+    ) => {
+      await row.load();
+
+      resolve(row.children);
+    };
+
+    return () => {
+      const columns = unref(dataTree)
+        .getColumns()
+        .filter((column) => column.visible && column.name)
+        .map((column) => {
+          const columnProps: Record<string, any> = {
+            prop: column.name,
+            label: column.label,
+            width: column.width,
+            minWidth: column.minWidth,
+            fixed: column.fixed,
+            reserveSelection: true,
+            type: column.type,
+          };
+
+          if (!column.visible) {
+            return null;
+          }
+
+          return (
+            // TODO 这里 不用这个组件的原因，因为ElTableColumn要去获取ElTable，但是他是通过instance.parent获取的，我添加这个组件会导致获取不到，出现一些问题
+            // <MKDataTableColumn column={column}>
+            slots[`col-${column.name}`]?.() ?? (
+              <ElTableColumn
+                {...columnProps}
+                v-slots={{
+                  default: (scope: {
+                    $index: number;
+                    row: any;
+                    column: any;
+                  }) => {
+                    let children = slots[`col-${column.name}-content`]?.({
+                      $index: scope.$index,
+                      row: scope.row,
+                      column: column,
+                      dataTable: unref(dataTree),
+                    });
+
+                    if (children) {
+                      return children;
+                    }
+
+                    return (
+                      <MKDataTableColumnComponent
+                        column={column}
+                        row={scope.row.data}
+                        index={scope.$index}
+                      />
+                    );
+                  },
+                }}
+              />
+            )
+            // </MKDataTableColumn>
+          );
+        });
+
+      return (
+        <ElTable
+          data={unref(dataTree).children}
+          rowKey={unref(dataTree).primaryKey}
+          show-overflow-tooltip
+          border
+          stripe
+          lazy
+          v-slots={{ empty: () => slots.empty?.() || <ElEmpty /> }}
+          tree-props={unref(treeProps)}
+          load={handleLoad}
+        >
+          {columns}
+        </ElTable>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import TableView from "./table-view";
+
+export const MKTableView = withInstall(TableView);
+
+export default MKTableView;
+
+export * from "./classify-search";

package/src/components/data-model/data-table/views/{table → table-view}/table-view.tsx

@@ -1,86 +1,27 @@
 import { Fragment, computed, defineComponent, unref } from "vue";
-import {
-  ElButton,
-  ElCard,
-  ElEmpty,
-  ElTable,
-  ElTableColumn,
-} from "element-plus";
+import { ElButton, ElCard } from "element-plus";
 
-import { MKDataTableColumnComponent } from "../../data-table-column-component";
 import { MKButton } from "../../../../button";
 import { MKTableClassifySearch } from "./classify-search";
-import { MKDataTableColumn } from "../../data-table-column";
 import { MKDataTablePagination } from "../../../data-table-pagination";
 import { MKDataFilterPopover } from "../../../data-filter-popover";
 import { MKSvgIcon } from "../../../../svg-icon";
+import { MKTable } from "../table";
 import { tableViewProps } from "./table-view-options";
 
 export default defineComponent({
   name: "MKTableView",
   props: tableViewProps,
   setup(props, { slots }) {
-    const pageSizes = computed(() => props.dataTable.pageSizes);
+    const dataTable = computed(() => props.dataTable);
 
-    return () => {
-      const table = slots.table?.({ dataTable: props.dataTable }) || (
-        <ElTable
-          data={props.dataTable.getList()}
-          rowKey={props.dataTable.primaryKey}
-          border
-          stripe
-          v-slots={{ empty: () => slots.empty?.() || <ElEmpty /> }}
-        >
-          {props.dataTable
-            .getColumns()
-            .filter((column) => column.visible && column.name)
-            .map((column) => (
-              <MKDataTableColumn column={column}>
-                {slots[`col-${column.name}`]?.() ?? (
-                  <ElTableColumn
-                    prop={column.name}
-                    label={column.label}
-                    width={column.width}
-                    minWidth={column.minWidth}
-                    fixed={column.fixed}
-                    reserveSelection={true}
-                    v-slots={{
-                      default: (scope: {
-                        $index: number;
-                        row: any;
-                        column: any;
-                      }) => {
-                        let children = slots[`col-${column.name}-content`]?.({
-                          $index: scope.$index,
-                          row: scope.row,
-                          column: column,
-                          dataTable: props.dataTable,
-                        });
-
-                        if (children) {
-                          return children;
-                        }
-
-                        return (
-                          <MKDataTableColumnComponent
-                            column={column}
-                            row={scope.row}
-                            index={scope.$index}
-                          />
-                        );
-                      },
-                    }}
-                  />
-                )}
-              </MKDataTableColumn>
-            ))}
-        </ElTable>
-      );
+    const pageSizes = computed(() => unref(dataTable).pageSizes);
 
+    return () => {
       const pagination =
-        slots.pagination?.({ dataTable: props.dataTable }) ||
+        slots.pagination?.({ dataTable: unref(dataTable) }) ||
         (unref(pageSizes).length ? (
-          <MKDataTablePagination dataTable={props.dataTable} />
+          <MKDataTablePagination dataTable={unref(dataTable)} />
         ) : null);
 
       return (
@@ -88,7 +29,7 @@ export default defineComponent({
           class="mk-table-view"
           v-slots={{
             header: () => {
-              const _dataTable = props.dataTable;
+              const _dataTable = unref(dataTable);
 
               const buttons = _dataTable.buttonTools
                 .filter((button) => button.predicate())
@@ -106,12 +47,7 @@ export default defineComponent({
 
               const tools = !_dataTable.getSelection().length ? (
                 <Fragment>
-                  <div class="header-box-main">
-                    {/* <MKTableSearch
-                      dataFilter={_dataTable.dataFilter}
-                      onSearch={handleSearch}
-                    /> */}
-                  </div>
+                  <div class="header-box-main"></div>
                   <div class="header-box-tools">
                     <MKDataFilterPopover dataTable={_dataTable}>
                       <ElButton>
@@ -157,7 +93,9 @@ export default defineComponent({
             },
           }}
         >
-          {table}
+          {slots.default?.({ dataTable: unref(dataTable) }) || (
+            <MKTable dataTable={unref(dataTable)} />
+          )}
           {pagination}
         </ElCard>
       );

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

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import Tree from "./tree";
+
+export const MKTree = withInstall(Tree);
+
+export default MKTree;
+
+export * from "./tree-options";

package/src/components/data-model/data-table/views/tree/tree-options.ts

@@ -0,0 +1,14 @@
+import { ExtractPropTypes } from "vue";
+import { DataTree } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const treeProps = buildProps({
+  dataTree: {
+    type: DataTree<any>,
+    required: true,
+  },
+  filterNodeMethod: { type: Function },
+  defaultExpandAll: { type: Boolean, default: true },
+} as const);
+
+export type TreeProps = ExtractPropTypes<typeof treeProps>;