@maketribe/ms-app 3.0.30 → 3.0.32

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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