@maketribe/ms-app 3.0.28 → 3.0.30

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;

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

@@ -1,206 +0,0 @@
-import {
-  Fragment,
-  computed,
-  defineComponent,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  unref,
-  watch,
-} from "vue";
-import {
-  ElDivider,
-  ElForm,
-  FormItemRule,
-  FormRules,
-  FormContext,
-} from "element-plus";
-import { formProps } from "./form-options";
-import { DataFormType, FormColumn, FormModel } from "@maketribe/dm";
-import MKDataFormItem from "../../data-form-item";
-import { Disposable } from "@maketribe/utils";
-
-let uid = 0;
-
-export default defineComponent({
-  props: formProps,
-  setup(props, { slots }) {
-    const formUID = uid++;
-
-    const formEl = ref<FormContext | null>(null);
-
-    const dataForm = computed(() => props.dataForm);
-
-    const data = computed(() => unref(dataForm).data as any);
-
-    const columns = computed(() =>
-      unref(dataForm)
-        .getColumns()
-        .filter((column) => column.visible)
-    );
-
-    const rules = computed(() => {
-      const rules: FormRules = {};
-
-      for (const column of unref(columns)) {
-        if (column.required && !column.rules.find((rule) => rule.required)) {
-          rules[column.name] = [
-            {
-              required: column.required,
-              message: `请录入${column.label}.`,
-            },
-          ];
-        }
-        let componentRules: FormItemRule[] = props.rules?.[column.name] || [];
-
-        if (!Array.isArray(componentRules)) {
-          componentRules = [componentRules];
-        }
-
-        if (column.rules.length) {
-          rules[column.name] = [
-            ...((rules[column.name] as FormItemRule[]) || []),
-            ...column.rules,
-            ...componentRules,
-          ];
-        }
-      }
-
-      return rules;
-    });
-
-    const labelWidth = computed(() => {
-      return (
-        props.labelWidth ||
-        Math.max.apply(
-          null,
-          columns.value
-            .filter((column) => column.componentInfo !== "MKFormDetail")
-            .map((item: FormColumn) => {
-              // + 8 像素只是预留 必填 * 号的宽度位置 12 像素是label的padding
-              return item.label.length * 16 + 8 + 12;
-            })
-        )
-      );
-    });
-
-    const disabled = computed(() => unref(dataForm).disabled);
-
-    onMounted(() => {
-      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();
-            },
-          });
-
-          disposable.register(
-            dataForm.dataFormTypeChangeEvent.on(async ({ dataFormType }) => {
-              if (dataFormType !== DataFormType.NONE) {
-                // 测试下来 需要两次nextTick才能清楚验证
-                await nextTick();
-                await nextTick();
-
-                dataForm.clearValidate();
-              }
-            })
-          );
-
-          onCleanup(() => {
-            const index = dataForm.formModels.findIndex(
-              (formModel) => formModel.id === uid
-            );
-
-            if (index === -1) {
-              return;
-            }
-
-            dataForm.formModels.splice(index, 1);
-
-            disposable.dispose();
-          });
-        },
-        { immediate: true }
-      );
-    });
-
-    return () => {
-      let children: any = slots.default?.();
-
-      const detailColumns = unref(columns).filter(
-        (column) => column.componentInfo === "MKFormDetail"
-      );
-
-      if (!children) {
-        children = unref(columns)
-          .filter(
-            (column) => !detailColumns.find((item) => item.name === column.name)
-          )
-          .map((column) => {
-            if (!column.name) {
-              return null;
-            }
-
-            return (
-              slots[`col-${column.name}`]?.() || (
-                <MKDataFormItem
-                  key={column.name}
-                  name={column.name}
-                  v-slots={{ default: slots[`col-${column.name}-content`] }}
-                />
-              )
-            );
-          });
-
-        children.push(
-          detailColumns.map((column) => {
-            if (!column.name) {
-              return null;
-            }
-
-            return (
-              <Fragment>
-                <ElDivider contentPosition="left">{column.label}</ElDivider>
-                <MKDataFormItem
-                  label=""
-                  labelWidth="0px"
-                  key={column.name}
-                  name={column.name}
-                />
-              </Fragment>
-            );
-          })
-        );
-      }
-
-      if (!unref(data)) {
-        return null;
-      }
-
-      return (
-        <ElForm
-          {...props}
-          ref={formEl}
-          model={unref(data)}
-          rules={unref(rules)}
-          disabled={unref(disabled)}
-          labelWidth={unref(labelWidth)}
-        >
-          {children}
-        </ElForm>
-      );
-    };
-  },
-});

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

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

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

@@ -1,68 +0,0 @@
-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 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(unref(dataForm).loading)}
-            >
-              {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

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

@@ -1,2 +0,0 @@
-export * from "./form";
-export * from "./form-view";

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

@@ -1,20 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { DataForm } from "@maketribe/dm";
-import { buildProps } from "@maketribe/utils";
-
-import { dataFormProps } from "../data-form";
-
-export const dataFormPageProps = buildProps({
-  ...dataFormProps,
-  dataForm: { type: DataForm<any> },
-} as const);
-
-export type DataFormPageProps = ExtractPropTypes<typeof dataFormPageProps>;
-
-export const dataFormPageEmits = {
-  cancel: () => true,
-  error: (e: any) => e instanceof Error,
-  submitted: (response: any) => !!response,
-};
-
-export type DataFormPageEmits = typeof dataFormPageEmits;