@maketribe/ms-app 3.0.6 → 3.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "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/utils": "^1.1.1",
+    "@maketribe/dm": "^3.0.6",
     "@maketribe/locale": "^1.0.5",
-    "@maketribe/request": "^1.1.2"
+    "@maketribe/request": "^1.1.8",
+    "@maketribe/utils": "^1.1.1"
   },
   "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/data-form.tsx

@@ -58,7 +58,7 @@ export default defineComponent({
         await dataForm.init();
 
         if (unref(dataForm).autoReset) {
-          unref(dataForm).resetWidthOriginalData();
+          unref(dataForm).reset();
         }
 
         const disposable = new Disposable();

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

@@ -2,15 +2,24 @@ import {
   Fragment,
   computed,
   defineComponent,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
   unref,
+  watch,
 } from "vue";
-import { ElDivider, ElForm, FormItemRule, FormRules } from "element-plus";
+import {
+  ElDivider,
+  ElForm,
+  FormItemRule,
+  FormRules,
+  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;
 
@@ -19,7 +28,7 @@ export default defineComponent({
   setup(props, { slots }) {
     const formUID = uid++;
 
-    const formEl = ref<FormModel | null>(null);
+    const formEl = ref<FormContext | null>(null);
 
     const dataForm = computed(() => props.dataForm);
 
@@ -79,24 +88,52 @@ export default defineComponent({
     const disabled = computed(() => unref(dataForm).disabled);
 
     onMounted(() => {
-      unref(dataForm).formModels.push({
-        id: formUID,
-        validate: async () => {
-          return unref(formEl)?.validate() ?? false;
-        },
-      });
-    });
+      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,81 @@
+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,
+            reserveSelection: true,
+            type: 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-view/table-view.tsx

@@ -0,0 +1,104 @@
+import { Fragment, computed, defineComponent, unref } from "vue";
+import { ElButton, ElCard } from "element-plus";
+
+import { MKButton } from "../../../../button";
+import { MKTableClassifySearch } from "./classify-search";
+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 dataTable = computed(() => props.dataTable);
+
+    const pageSizes = computed(() => unref(dataTable).pageSizes);
+
+    return () => {
+      const pagination =
+        slots.pagination?.({ dataTable: unref(dataTable) }) ||
+        (unref(pageSizes).length ? (
+          <MKDataTablePagination dataTable={unref(dataTable)} />
+        ) : null);
+
+      return (
+        <ElCard
+          class="mk-table-view"
+          v-slots={{
+            header: () => {
+              const _dataTable = unref(dataTable);
+
+              const buttons = _dataTable.buttonTools
+                .filter((button) => button.predicate())
+                .map((button) => (
+                  <MKButton button={button} onClick={() => button.handler()} />
+                ));
+
+              let classifySearch: any = slots["classify-search"]?.() ?? null;
+              if (
+                !classifySearch &&
+                _dataTable.classifySearch.getClassifySearchItems().length
+              ) {
+                classifySearch = <MKTableClassifySearch />;
+              }
+
+              const tools = !_dataTable.getSelection().length ? (
+                <Fragment>
+                  <div class="header-box-main"></div>
+                  <div class="header-box-tools">
+                    <MKDataFilterPopover dataTable={_dataTable}>
+                      <ElButton>
+                        <MKSvgIcon iconClass="Filter" />
+                      </ElButton>
+                    </MKDataFilterPopover>
+
+                    {buttons}
+                  </div>
+                </Fragment>
+              ) : (
+                <div class="mk-table-view__selection-tip">
+                  <div class="mk-table-view__selection-tip-left">
+                    <span>
+                      已选中
+                      <span class="selection-count">
+                        {_dataTable.getSelection().length}
+                      </span>
+                      项
+                    </span>
+                  </div>
+                  <div class="mk-table-view__selection-tip-right">
+                    {_dataTable.batchActionButtonTools.map((button) => (
+                      <MKButton
+                        link
+                        button={button}
+                        onClick={() => button.handler()}
+                      />
+                    ))}
+                    <ElButton link onClick={() => _dataTable.clearSelection()}>
+                      取消选择
+                    </ElButton>
+                  </div>
+                </div>
+              );
+
+              return (
+                <Fragment>
+                  {classifySearch}
+                  <div class="mk-table-view__header header-box">{tools}</div>
+                </Fragment>
+              );
+            },
+          }}
+        >
+          {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>;