@maketribe/ms-app 3.0.28 → 3.0.30

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

@@ -1,57 +0,0 @@
-import {
-  ComputedRef,
-  computed,
-  defineComponent,
-  unref,
-  useAttrs,
-  useSlots,
-} from "vue";
-import { DataForm } from "@maketribe/dm";
-
-import MKDataForm from "../data-form/data-form";
-import { dataFormPageEmits, dataFormPageProps } from "./data-form-page-options";
-
-export default defineComponent({
-  name: "MKDataFormPage",
-  props: dataFormPageProps,
-  emits: dataFormPageEmits,
-  setup(props, { emit }) {
-    const dataForm = computed(
-      () => props.dataForm ?? null
-    ) as ComputedRef<DataForm | null>;
-
-    const slots = useSlots();
-    const attrs = useAttrs();
-
-    const loading = computed(() => unref(dataForm)?.loading ?? true);
-
-    const handleCancel = () => {
-      emit("cancel");
-    };
-
-    const handleSubmitted = (result: any) => {
-      emit("submitted", result);
-    };
-
-    const handleError = (error: any) => {
-      emit("error", error);
-    };
-
-    return () => {
-      return (
-        <div class="data-form-page">
-          <MKDataForm
-            v-loading={unref(loading)}
-            {...props}
-            {...attrs}
-            dataForm={unref(dataForm) as DataForm}
-            v-slots={slots}
-            onCancel={handleCancel}
-            onSubmitted={handleSubmitted}
-            onError={handleError}
-          />
-        </div>
-      );
-    };
-  },
-});

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

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import DataFormPage from "./data-form-page";
-
-export const MKDataFormPage = withInstall(DataFormPage);
-export default MKDataFormPage;
-
-export * from "./data-form-page-options";

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

@@ -1 +0,0 @@
-export * from "./use-column";

package/src/components/data-model/data-table/composables/use-column.ts

@@ -1,23 +0,0 @@
-import { get } from "lodash-es";
-import { ExtractPropTypes, computed } from "vue";
-import { TableColumn } from "@maketribe/dm";
-import { buildProps } from "@maketribe/utils";
-
-export type ColumnEventData = { row: any; column: TableColumn; index: number };
-
-export const columnProps = buildProps({
-  row: { type: Object, required: true },
-  column: { type: TableColumn, required: true },
-  index: { type: Number, required: true },
-} as const);
-
-export type ColumnProps = ExtractPropTypes<typeof columnProps>;
-
-export const useColumn = (props: {
-  row: Record<string, any>;
-  column: TableColumn;
-}) => {
-  const value = computed(() => get(props.row, props.column.name));
-
-  return { value };
-};

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

@@ -1,11 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { TableColumn } from "@maketribe/dm";
-
-export const dataTableColumnProps = buildProps({
-  column: { type: TableColumn, required: true },
-} as const);
-
-export type DataTableColumnProps = ExtractPropTypes<
-  typeof dataTableColumnProps
->;

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

@@ -1,18 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { dataTableColumnProps } from "./data-table-column-options";
-
-export default defineComponent({
-  name: "MKDataTableColumn",
-  props: dataTableColumnProps,
-  setup(props, { slots }) {
-    const column = computed(() => props.column);
-
-    return () => {
-      if (!unref(column).visible) {
-        return null;
-      }
-
-      return slots.default?.({ column: unref(column) });
-    };
-  },
-});

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

@@ -1,7 +0,0 @@
-import DataTableColumn from "./data-table-column";
-
-export const MKDataTableColumn = DataTableColumn;
-
-export default DataTableColumn;
-
-export * from "./data-table-column-options";

package/src/components/data-model/data-table/data-table-column-component/data-table-column-component-options.ts

@@ -1,13 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { TableColumn } from "@maketribe/dm";
-
-export const dataTableColumnComponentProps = buildProps({
-  column: { type: TableColumn, required: true },
-  row: { type: null },
-  index: { type: Number, required: true },
-} as const);
-
-export type DataTableColumnComponentProps = ExtractPropTypes<
-  typeof dataTableColumnComponentProps
->;

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

@@ -1,38 +0,0 @@
-import { computed, defineComponent, inject, toRaw, unref } from "vue";
-import { useTableColumnComponent } from "../../../../composables";
-import { DATATABLE_CONTEXT_KEY } from "../token";
-import { dataTableColumnComponentProps } from "./data-table-column-component-options";
-
-export default defineComponent({
-  name: "MKDataTableColumnComponent",
-  props: dataTableColumnComponentProps,
-  setup(props) {
-    const dataTableContext = inject(DATATABLE_CONTEXT_KEY);
-
-    const dataTable = computed(() => dataTableContext?.dataTable ?? null);
-
-    const tableColumn = computed(() => props.column);
-
-    const { component, componentProps } = useTableColumnComponent(
-      tableColumn,
-      dataTable
-    );
-
-    return () => {
-      const TableColumnComponent = toRaw(unref(component));
-
-      if (!TableColumnComponent) {
-        return null;
-      }
-
-      return (
-        <TableColumnComponent
-          {...unref(componentProps)}
-          column={unref(tableColumn)}
-          index={props.index}
-          row={props.row}
-        />
-      );
-    };
-  },
-});

package/src/components/data-model/data-table/data-table-column-component/index.ts

@@ -1,7 +0,0 @@
-import DataTableColumnComponent from "./data-table-column-component";
-
-export const MKDataTableColumnComponent = DataTableColumnComponent;
-
-export default MKDataTableColumnComponent;
-
-export * from "./data-table-column-component-options";

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

@@ -1,24 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { ColumnOptions, DataTable } from "@maketribe/dm";
-import { buildProps } from "@maketribe/utils";
-
-export const dataTableProps = buildProps({
-  dataTable: { type: DataTable<any>, required: true },
-  selection: { type: Boolean, default: false },
-  name: { type: String },
-  primaryKey: { type: String },
-  pageSize: { type: Number },
-  interfaceURL: { type: Object },
-  listInterfaceURL: { type: String },
-  deleteInterfaceURL: { type: String },
-  autoLoad: { type: Boolean, default: true },
-  columns: { type: Array<ColumnOptions>, default: () => [] },
-} as const);
-
-export type DataTableProps = ExtractPropTypes<typeof dataTableProps>;
-
-export const dataTableEmits = {
-  changeDataTable: (dataTable: any) => dataTable instanceof DataTable,
-};
-
-export const DataTableEmits = typeof dataTableEmits;

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

@@ -1,102 +0,0 @@
-import { DataTable, TableColumn } from "@maketribe/dm";
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  provide,
-  reactive,
-  unref,
-  watch,
-} from "vue";
-import { dataTableProps } from "./data-table-options";
-import { DATATABLE_CONTEXT_KEY } from "./token";
-import MKTableView from "./views/table-view";
-
-export default defineComponent({
-  name: "MKDataTable",
-  props: dataTableProps,
-  setup(props, { slots }) {
-    let _dataTable: DataTable | null = null;
-
-    const dataTable = computed(() => {
-      if (props.dataTable instanceof DataTable) {
-        return props.dataTable;
-      }
-
-      if (!_dataTable) {
-        _dataTable = reactive(
-          new DataTable({
-            name: props.name!,
-            primaryKey: props.primaryKey,
-            pageSize: props.pageSize ?? 20,
-            interfaceURL: {
-              list: props.listInterfaceURL || "",
-              delete: props.deleteInterfaceURL || "",
-            },
-          })
-        ) as DataTable;
-      }
-
-      return _dataTable;
-    });
-
-    watch(
-      dataTable,
-      async (dataTable) => {
-        // nextTick(() => {
-        //   dataTable.dataFilter.setReady();
-        // });
-
-        if (props.autoLoad) {
-          dataTable.load();
-        }
-
-        let columns = unref(dataTable).getColumns();
-
-        const extractColumnConfig = props.columns.filter(
-          (config) =>
-            columns.findIndex((column) => column.name === config.name) === -1
-        );
-
-        const extractColumn = extractColumnConfig.map(
-          (config) => new TableColumn({ visible: true, ...config })
-        );
-
-        columns = [...extractColumn, ...columns];
-
-        let sortedColumns: TableColumn[] = [];
-        for (const columnConfig of props.columns) {
-          const column = columns.find(
-            (column) => column.name === columnConfig.name
-          )!;
-
-          sortedColumns.push(column);
-        }
-
-        const _columns = columns.filter(
-          (column) =>
-            sortedColumns.findIndex((item) => item.name === column.name) === -1
-        );
-
-        sortedColumns = [...sortedColumns, ..._columns];
-
-        dataTable.setColumns(sortedColumns);
-
-        await dataTable.init();
-      },
-      { immediate: true }
-    );
-
-    provide(DATATABLE_CONTEXT_KEY, reactive({ dataTable }));
-
-    return () => {
-      return (
-        <div class="mk-data-table">
-          {slots.default?.({ dataTable: unref(dataTable) }) || (
-            <MKTableView dataTable={unref(dataTable)} />
-          )}
-        </div>
-      );
-    };
-  },
-});

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

@@ -1,17 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import DataTable from "./data-table";
-import { MKDataTableColumn } from "./data-table-column";
-import { MKDataTableColumnComponent } from "./data-table-column-component";
-
-export const MKDataTable = withInstall(DataTable, {
-  MKDataTableColumn,
-  MKDataTableColumnComponent,
-});
-
-export default MKDataTable;
-
-export * from "./data-table-column";
-export * from "./data-table-column-component";
-export * from "./data-table-options";
-
-export * from "./views";

package/src/components/data-model/data-table/token.ts

@@ -1,10 +0,0 @@
-import { InjectionKey } from "vue";
-import { DataTable } from "@maketribe/dm";
-
-export interface DataTableContext {
-  dataTable: DataTable;
-}
-
-export const DATATABLE_CONTEXT_KEY: InjectionKey<DataTableContext> = Symbol(
-  "dataTableContextKey"
-);

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

@@ -1,5 +0,0 @@
-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,8 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import Table from "./table";
-
-export const MKTable = withInstall(Table);
-
-export default MKTable;
-
-export * from "./table-options";

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

@@ -1,12 +0,0 @@
-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

@@ -1,98 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { Column, ElEmpty, ElTable, ElTableColumn } from "element-plus";
-import { tableProps } from "./table-options";
-import { MKDataTableColumn } from "../../data-table-column";
-import MKDataTableColumnComponent from "../../data-table-column-component";
-import { OrderType } from "@maketribe/dm";
-
-export default defineComponent({
-  name: "MKTable",
-  props: tableProps,
-  setup(props, { slots }) {
-    const dataTable = computed(() => props.dataTable);
-
-    type SortChangeEvent = { column: Column; prop: string; order: string };
-    const handleSortChange = ({ column, prop, order }: SortChangeEvent) => {
-      let orderType: OrderType | null = null;
-
-      if (order === "descending") {
-        orderType = OrderType.DESC;
-      } else if (order === "ascending") {
-        orderType = OrderType.ASC;
-      }
-
-      unref(dataTable).sorter.setColumnSort(prop, orderType);
-    };
-
-    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,
-            sortable: column.sortable,
-          };
-
-          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}
-          onSort-change={handleSortChange}
-          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

@@ -1,8 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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/classify-search/classify-search-item/classify-search-item-options.ts

@@ -1,34 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-
-export const classifySearchItemProps = buildProps({
-  modelValue: { type: null },
-  label: { type: String },
-  labelWidth: { type: String },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  options: {
-    type: Array,
-  },
-  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 };
-    },
-  },
-});
-
-export type ClassifySearchItemProps = ExtractPropTypes<
-  typeof classifySearchItemProps
->;
-
-export const classifySearchItemEmits = {
-  "update:model-value": (modelValue: any) => true,
-};
-
-export type ClassifySearchItemEmits = typeof classifySearchItemEmits;