@maketribe/ms-app 3.0.38 → 3.0.40

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

@@ -1,103 +0,0 @@
-import {
-  Fragment,
-  Suspense,
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  provide,
-  reactive,
-  unref,
-  watch,
-  withCtx,
-} from "vue";
-import { dataFilterFormProps } from "./data-filter-form-options";
-import { MKDataFilterFormItem } from "./data-filter-form-item";
-import { DATA_FILTER_CONTEXT } from "./token";
-
-export default defineComponent({
-  name: "MKDataFilterForm",
-  props: dataFilterFormProps,
-  setup(props, { slots }) {
-    const dataTable = computed(() => props.dataTable);
-    const dataFilter = computed(() => unref(dataTable).dataFilter);
-
-    const columns = computed(() =>
-      unref(dataFilter)
-        .getColumns()
-        .filter((column) => column.visible)
-    );
-
-    const labelWidth = computed(() => {
-      const maxWordCount = Math.max(
-        ...unref(columns).map((column) => column.label.length)
-      );
-
-      return maxWordCount * 14 + 10;
-    });
-
-    provide(DATA_FILTER_CONTEXT, reactive({ dataFilter, labelWidth }));
-
-    const instance = getCurrentInstance();
-
-    const handleResolve = () => {
-      withCtx(() => {
-        watch(
-          dataFilter,
-          (dataFilter) => {
-            dataFilter.setReady();
-          },
-          { immediate: true }
-        );
-      }, instance)();
-    };
-
-    watch(
-      dataTable,
-      (dataTable) => {
-        dataTable.initdEvent.once(() => {
-          if (!dataTable.dataFilter.getColumns().length) {
-            dataTable.dataFilter.setReady();
-          }
-        });
-      },
-      { immediate: true }
-    );
-
-    return () => {
-      if (!unref(columns).length) {
-        return null;
-      }
-
-      let children: any = slots.default?.();
-
-      if (!children) {
-        children = unref(columns).map((column) => {
-          if (!column.name) {
-            return null;
-          }
-
-          return (
-            slots[`col-${column.name}`]?.() || (
-              <MKDataFilterFormItem
-                name={column.name}
-                v-slots={{ default: slots[`col-${column.name}-content`] }}
-              />
-            )
-          );
-        });
-      }
-
-      if (!children) {
-        return null;
-      }
-
-      return (
-        <div class="mk-data-filter-form">
-          <Suspense onResolve={handleResolve}>
-            <Fragment>{children}</Fragment>
-          </Suspense>
-        </div>
-      );
-    };
-  },
-});

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

@@ -1,13 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import { MKDataFilterFormItem } from "./data-filter-form-item";
-import DataFilterForm from "./data-filter-form";
-
-export const MKDataFilterForm = withInstall(DataFilterForm, {
-  MKDataFilterFormItem,
-});
-export default MKDataFilterForm;
-
-export * from "./data-filter-form-item";
-export * from "./data-filter-form-options";
-export * from "./composables";
-export * from "./operator-options";

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

@@ -1,48 +0,0 @@
-import { Operator } from "@maketribe/dm";
-
-export type OperatorOption = { value: Operator; label: string };
-
-export const EQUAL_OPTION: OperatorOption = {
-  value: Operator.EQUAL,
-  label: "mk.operator.equal",
-};
-
-export const CONTAIN_OPTION: OperatorOption = {
-  value: Operator.CONTAIN,
-  label: "mk.operator.contain",
-};
-
-export const IN_OPTION: OperatorOption = {
-  value: Operator.IN,
-  label: "mk.operator.in",
-};
-
-export const NOT_IN_OPTION: OperatorOption = {
-  value: Operator.NOT_IN,
-  label: "mk.operator.notIn",
-};
-
-export const LESS_THAN_OPTION: OperatorOption = {
-  value: Operator.LESS_THAN,
-  label: "mk.operator.lessThan",
-};
-
-export const LESS_THAN_EQUAL_OPTION: OperatorOption = {
-  value: Operator.LESS_THAN_EQUAL,
-  label: "mk.operator.lessThanEqual",
-};
-
-export const GREATER_THAN_OPTION: OperatorOption = {
-  value: Operator.GREATER_THAN,
-  label: "mk.operator.greaterThan",
-};
-
-export const GREATER_THAN_EQUAL_OPTION: OperatorOption = {
-  value: Operator.GREATER_THAN_EQUAL,
-  label: "mk.operator.greaterThanEqual",
-};
-
-export const BETWEEN_OPTION: OperatorOption = {
-  value: Operator.BETWEEN,
-  label: "mk.operator.between",
-};

package/src/components/data-model/data-filter-form/token.ts

@@ -1,30 +0,0 @@
-import { InjectionKey } from "vue";
-import { Operator, FilterColumn, DataFilter } from "@maketribe/dm";
-import { OperatorOption } from "./operator-options";
-
-export interface DataFilterContext {
-  dataFilter: DataFilter;
-  labelWidth: number;
-}
-
-export interface DataFilterItemContext {
-  dataFilter: DataFilter;
-  dataFilterItem: DataFilterItem;
-}
-
-export interface DataFilterItem {
-  dataFilter: DataFilter;
-  column: FilterColumn;
-  currentOperator: Operator | null;
-  operatorOptions: OperatorOption[];
-  setOperator(operator: Operator): void;
-  setOperatorOptions(options: OperatorOption[]): void;
-  setValue(value: any): void;
-  getValue(): any;
-}
-
-export const DATA_FILTER_CONTEXT: InjectionKey<DataFilterContext> = Symbol(
-  "DATA_FILTER_CONTEXT"
-);
-export const DATA_FILTER_ITEM_CONTEXT: InjectionKey<DataFilterItemContext> =
-  Symbol("DATA_FILTER_ITEM_CONTEXT");

package/src/components/data-model/data-filter-popover/data-filter-popover-options.ts

@@ -1,6 +0,0 @@
-import { DataTable } from "@maketribe/dm";
-import { buildProps } from "@maketribe/utils";
-
-export const dataFilterPopoverProps = buildProps({
-  dataTable: { type: DataTable, required: true },
-} as const);

package/src/components/data-model/data-filter-popover/data-filter-popover.tsx

@@ -1,52 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { ElButton, ElPopover } from "element-plus";
-import { MKDataFilterForm } from "../data-filter-form";
-import { dataFilterPopoverProps } from "./data-filter-popover-options";
-import MKSvgIcon from "../../svg-icon";
-
-export default defineComponent({
-  name: "MKDataFilterPopover",
-  props: dataFilterPopoverProps,
-  setup(props, { slots }) {
-    const dataTable = computed(() => props.dataTable);
-    const dataFilter = computed(() => unref(dataTable).dataFilter);
-
-    const handleSearch = () => {
-      unref(dataTable).load();
-    };
-
-    const handleReset = () => {
-      unref(dataFilter).reset();
-
-      handleSearch();
-    };
-
-    return () => {
-      return (
-        <ElPopover
-          trigger="click"
-          width="400px"
-          v-slots={{
-            reference: () =>
-              slots.default?.() || <MKSvgIcon iconClass="Filter" />,
-            default: () => {
-              return (
-                <div class="mk-data-filter-popover">
-                  <div class="mk-data-filter-popover__body">
-                    <MKDataFilterForm dataTable={unref(dataTable)} />
-                  </div>
-                  <div class="mk-data-filter-popover__footer">
-                    <ElButton onClick={handleReset}>重置</ElButton>
-                    <ElButton type="primary" onClick={handleSearch}>
-                      查询
-                    </ElButton>
-                  </div>
-                </div>
-              );
-            },
-          }}
-        />
-      );
-    };
-  },
-});

package/src/components/data-model/data-filter-popover/index.ts

@@ -1,8 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import DataFilterPopover from "./data-filter-popover";
-
-export const MKDataFilterPopover = withInstall(DataFilterPopover);
-export default MKDataFilterPopover;
-
-export * from "./data-filter-popover";
-export * from "./data-filter-popover";

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

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

package/src/components/data-model/data-form/composables/use-form-item.ts

@@ -1,40 +0,0 @@
-import { ExtractPropTypes, computed, inject, unref } from "vue";
-import { DATAFORM_ITEM_CONTEXT_KEY } from "../token";
-import { FormColumn } from "@maketribe/dm";
-import { buildProps } from "@maketribe/utils";
-
-export const columnProps = buildProps({
-  column: { type: FormColumn, required: true },
-} as const);
-
-export type ColumnProps = ExtractPropTypes<typeof columnProps>;
-
-export function useFormItem() {
-  const dataFormItemContext = inject(DATAFORM_ITEM_CONTEXT_KEY);
-  const column = computed(() => unref(dataFormItemContext)?.column ?? null);
-
-  const value = computed({
-    get: () => {
-      const _column = unref(column);
-
-      if (!_column) {
-        return;
-      }
-
-      return _column.getValue();
-    },
-    set: (v: any) => {
-      const _column = unref(column);
-
-      if (!_column) {
-        return;
-      }
-
-      _column.setValue(v);
-    },
-  });
-
-  const disabled = computed(() => unref(column)?.disabled ?? false);
-
-  return { column, value, disabled };
-}

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

@@ -1,11 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-
-export const dataFormItemProps = buildProps({
-  name: { type: String },
-  label: { type: String },
-  required: { type: Boolean, default: false },
-  labelWidth:{ type: String },
-} as const);
-
-export type DataFormItemProps = ExtractPropTypes<typeof dataFormItemProps>;

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

@@ -1,140 +0,0 @@
-import { ElFormItem } from "element-plus";
-import {
-  Ref,
-  computed,
-  defineComponent,
-  inject,
-  provide,
-  reactive,
-  ref,
-  toRaw,
-  unref,
-  useSlots,
-  watch,
-} from "vue";
-import { FormColumn } from "@maketribe/dm";
-
-import { useFormColumnComponent } from "../../../../composables";
-import {
-  DATAFORM_CONTEXT_KEY,
-  DATAFORM_ITEM_CONTEXT_KEY,
-  DataFormItemContext,
-} from "../token";
-import { dataFormItemProps } from "./data-form-item-options";
-
-export default defineComponent({
-  name: "MKDataFormItem",
-  props: dataFormItemProps,
-  setup(props) {
-    const slots = useSlots();
-
-    const dataFormContext = inject(DATAFORM_CONTEXT_KEY);
-
-    const dataForm = computed(() => dataFormContext?.dataForm ?? null);
-
-    let _formColumn: FormColumn | null = null;
-
-    const existFormColumn = ref(
-      unref(dataForm)!.getColumn(props.name!)
-    ) as Ref<FormColumn | null>;
-
-    const formColumn = computed(() => {
-      const existingColumn = unref(existFormColumn);
-
-      if (existingColumn) {
-        return existingColumn;
-      }
-
-      if (!_formColumn) {
-        _formColumn = reactive(
-          new FormColumn({
-            required: props.required,
-            name: props.name!,
-            label: props.label!,
-          })
-        ) as FormColumn;
-      }
-
-      return _formColumn!;
-    });
-
-    watch(
-      formColumn,
-      (formColumn, _, onCleanup) => {
-        const existFormColumn = unref(dataForm)!.getColumn(formColumn.name);
-
-        if (!existFormColumn && _formColumn) {
-          unref(dataForm)!.addColumn(_formColumn);
-        }
-
-        onCleanup(() => {
-          if (_formColumn) {
-            unref(dataForm)!.removeColumn(_formColumn);
-          }
-        });
-      },
-      { immediate: true }
-    );
-
-    const { component, componentProps } = useFormColumnComponent(
-      formColumn,
-      dataForm
-    );
-
-    const disabled = computed(() => unref(formColumn).disabled);
-
-    const value = computed({
-      get: () => unref(formColumn)?.getValue(),
-      set: (v) => {
-        unref(formColumn).setValue(v);
-      },
-    });
-
-    const label = computed(() =>
-      typeof props.label !== "string" ? unref(formColumn).label : props.label
-    );
-
-    provide(
-      DATAFORM_ITEM_CONTEXT_KEY,
-      reactive({ column: formColumn }) as DataFormItemContext
-    );
-
-    return () => {
-      let _formColumn = unref(formColumn);
-
-      let _component = unref(component);
-
-      let children: any =
-        slots.default?.({
-          data: unref(dataForm)!.data,
-          column: _formColumn,
-          dataForm: unref(dataForm),
-        }) || null;
-
-      if (!children && _component) {
-        const FormColumnComponent = toRaw(_component);
-
-        children = (
-          <FormColumnComponent
-            {...unref(componentProps)}
-            column={_formColumn}
-            modelValue={value.value}
-            disabled={unref(disabled)}
-            onUpdate:modelValue={(v: any) => (value.value = v)}
-          />
-        );
-      }
-
-      return (
-        <ElFormItem
-          prop={_formColumn.name}
-          label={unref(label)}
-          required={_formColumn.required}
-          labelWidth={props.labelWidth}
-        >
-          {children}
-        </ElFormItem>
-      );
-    };
-  },
-});

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

@@ -1,6 +0,0 @@
-import DataFormItem from "./data-form-item";
-
-export const MKDataFormItem = DataFormItem;
-export default MKDataFormItem;
-
-export * from "./data-form-item-options";

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

@@ -1,43 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { ColumnOptions, DataForm } from "@maketribe/dm";
-
-export const dataFormProps = buildProps({
-  dataForm: {
-    type: DataForm<any>,
-  },
-  name: {
-    type: String,
-  },
-  primaryKey: {
-    type: String,
-  },
-  autoLoad: {
-    type: Boolean,
-    default: true,
-  },
-  loadInterfaceURL: {
-    type: String,
-  },
-  addInterfaceURL: {
-    type: String,
-  },
-  updateInterfaceURL: {
-    type: String,
-  },
-  columns: {
-    type: Array<ColumnOptions>,
-    default: () => [],
-  },
-} as const);
-
-export type DataFormProps = ExtractPropTypes<typeof dataFormProps>;
-
-export const dataFormEmits = {
-  changeDataForm: (dataForm: any) => dataForm instanceof DataForm,
-  cancel: () => true,
-  error: (e: any) => e instanceof Error,
-  submitted: (response: any) => !!response,
-};
-
-export type DataFormEmits = typeof dataFormEmits;

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

@@ -1,113 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  provide,
-  reactive,
-  unref,
-  useSlots,
-  watch,
-} from "vue";
-import { FormColumn, DataForm } from "@maketribe/dm";
-
-import { dataFormEmits, dataFormProps } from "./data-form-options";
-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, slots }) {
-    let _dataForm: DataForm | null = null;
-
-    const createDataForm = () => {
-      const dataForm = new DataForm({
-        name: props.name!,
-        primaryKey: props.primaryKey,
-        interfaceURL: {
-          load: props.loadInterfaceURL || "",
-          add: props.addInterfaceURL || "",
-          update: props.updateInterfaceURL || props.addInterfaceURL || "",
-        },
-      });
-
-      const columns = props.columns.map((column) => new FormColumn(column));
-
-      dataForm.setColumns(columns);
-
-      return dataForm;
-    };
-
-    const dataForm = computed(() => {
-      if (props.dataForm instanceof DataForm) {
-        return props.dataForm;
-      }
-
-      if (!_dataForm) {
-        _dataForm = reactive(createDataForm()) as DataForm;
-      }
-
-      return _dataForm;
-    });
-
-    watch(
-      dataForm,
-      async (dataForm, _, onCleanup) => {
-        await dataForm.init();
-
-        if (unref(dataForm).autoReset) {
-          unref(dataForm).reset();
-        }
-
-        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.filter(
-          (event) => event.eventName in dataFormEmits
-        )) {
-          disposable.register(
-            // @ts-ignore
-            item.event.on((event: any) => {
-              // @ts-ignore
-              emit(item.eventName, event);
-            })
-          );
-        }
-
-        onCleanup(() => {
-          disposable.dispose();
-        });
-
-        emit("changeDataForm", dataForm);
-      },
-      { immediate: true }
-    );
-
-    provide(
-      DATAFORM_CONTEXT_KEY,
-      reactive({
-        dataForm,
-      })
-    );
-
-    return () => {
-      return (
-        <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

@@ -1,13 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import DataForm from "./data-form";
-import MKDataFormItem from "./data-form-item";
-
-export const MKDataForm = withInstall(DataForm, {
-  MKDataFormItem,
-});
-export default MKDataForm;
-
-export * from "./data-form-options";
-export * from "./data-form-item";
-
-export * from "./views";

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

@@ -1,16 +0,0 @@
-import { InjectionKey } from "vue";
-import { DataForm, FormColumn } from "@maketribe/dm";
-
-export interface DataFormContext {
-  dataForm: DataForm;
-}
-
-export const DATAFORM_CONTEXT_KEY: InjectionKey<DataFormContext> =
-  Symbol("dataFormContextKey");
-
-export interface DataFormItemContext {
-  column: FormColumn;
-}
-
-export const DATAFORM_ITEM_CONTEXT_KEY: InjectionKey<DataFormItemContext> =
-  Symbol("dataFormItemContextKey");

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

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