@maketribe/ms-app 3.0.30 → 3.0.31

package/src/components/config-provider/use-global-config.ts

@@ -0,0 +1,70 @@
+import {
+  App,
+  MaybeRef,
+  Ref,
+  computed,
+  getCurrentInstance,
+  inject,
+  provide,
+  ref,
+  unref,
+} from "vue";
+import merge from "lodash-es/merge";
+import {
+  CONFIG_PROVIDER_CONTEXT_KEY,
+  ConfigProviderContext,
+} from "./constants";
+
+const globalConfig = ref<ConfigProviderContext>();
+
+export function useGlobalConfig<
+  K extends keyof ConfigProviderContext,
+  D extends ConfigProviderContext[K]
+>(key?: K, defaultValue?: D): Ref<ConfigProviderContext[K] | D>;
+export function useGlobalConfig(): Ref<ConfigProviderContext>;
+export function useGlobalConfig(
+  key?: keyof ConfigProviderContext,
+  defaultValue = undefined
+) {
+  const config = getCurrentInstance()
+    ? inject(CONFIG_PROVIDER_CONTEXT_KEY, globalConfig)
+    : globalConfig;
+
+  if (key) {
+    return computed(() => unref(config)?.[key] ?? defaultValue);
+  }
+
+  return config;
+}
+
+export function provideGlobalConfig(
+  config: MaybeRef<ConfigProviderContext>,
+  app?: App,
+  global: boolean = false
+) {
+  const inSetup = !!getCurrentInstance();
+  const oldConfig = inSetup ? useGlobalConfig() : globalConfig;
+
+  const provideFn = app?.provide ?? (inSetup ? provide : undefined);
+
+  if (!provideFn) {
+    throw new Error("");
+  }
+
+  const context = computed(() => {
+    const cfg = unref(config);
+    if (!oldConfig?.value) {
+      return cfg;
+    }
+
+    return merge(oldConfig.value, cfg);
+  });
+
+  provide(CONFIG_PROVIDER_CONTEXT_KEY, context);
+
+  if (global || !globalConfig.value) {
+    globalConfig.value = context.value;
+  }
+
+  return context;
+}

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

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

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

@@ -0,0 +1,68 @@
+import { computed, inject, unref, watch } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { Operator } from "@maketribe/dm";
+
+import { BETWEEN_OPTION, OperatorOption } from "../operator-options";
+import { DATA_FILTER_ITEM_CONTEXT } from "../token";
+
+export const dataFilterConditionProps = buildProps({
+  defaultValue: {
+    default: null,
+  },
+} as const);
+
+export type DataFilterConditionOptions = {
+  operator: Operator;
+  operatorOptions: OperatorOption[];
+  defaultValue: any;
+};
+
+export function useDataFilterCondition(options: DataFilterConditionOptions) {
+  const dataFilterItemContext = inject(DATA_FILTER_ITEM_CONTEXT)!;
+  const dataFilterItem = dataFilterItemContext.dataFilterItem;
+
+  dataFilterItem.setOperatorOptions(options.operatorOptions);
+
+  dataFilterItem.setOperator(options.operator);
+  if (options.defaultValue !== void 0) {
+    dataFilterItem.column.defaultValue = options.defaultValue;
+  }
+
+  const value = computed({
+    get: () => dataFilterItem.getValue(),
+    set: (v: any) => dataFilterItem.setValue(v === "" ? null : v),
+  });
+
+  const isBetween = computed(
+    () => unref(currentOperator.value) === BETWEEN_OPTION.value
+  );
+
+  const currentOperator = computed(() => dataFilterItem.currentOperator);
+
+  const calcDefaultValue = () => {
+    const defaultValue = options.defaultValue;
+
+    if (unref(isBetween)) {
+      return [defaultValue, defaultValue];
+    }
+
+    return defaultValue;
+  };
+
+  watch(currentOperator, () => {
+    const defaultValue = calcDefaultValue();
+
+    dataFilterItem.column.defaultValue = defaultValue;
+    value.value = defaultValue;
+  });
+
+  dataFilterItem.column.defaultValue = calcDefaultValue();
+  value.value = dataFilterItem.getValue() || calcDefaultValue();
+
+  return {
+    isBetween,
+    dataFilterItem,
+    currentOperator,
+    value,
+  };
+}

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

@@ -0,0 +1,11 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const dataFilterFormItemProps = buildProps({
+  name: { type: String, required: true },
+  label: { type: String },
+} as const);
+
+export type DataFilterFormItemProps = ExtractPropTypes<
+  typeof dataFilterFormItemProps
+>;

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

@@ -0,0 +1,183 @@
+import {
+  computed,
+  defineComponent,
+  inject,
+  onBeforeUnmount,
+  provide,
+  reactive,
+  toRaw,
+  unref,
+} from "vue";
+import { DataFilter, FilterColumn, isWhereFilter } from "@maketribe/dm";
+import { useFilterColumnComponent, useI18n } from "../../../../composables";
+import { dataFilterFormItemProps } from "./data-filter-form-item-options";
+import {
+  DATA_FILTER_CONTEXT,
+  DATA_FILTER_ITEM_CONTEXT,
+  DataFilterItem,
+  DataFilterItemContext,
+} from "../token";
+import { OperatorOption } from "../operator-options";
+import { ElOption, ElSelect, ElTooltip } from "element-plus";
+
+export default defineComponent({
+  name: "MKDataFilterFormItem",
+  props: dataFilterFormItemProps,
+  setup(props, { slots }) {
+    const i18n = useI18n()!;
+
+    const dataFilterContext = inject(DATA_FILTER_CONTEXT)!;
+
+    const dataFilter = computed(() => dataFilterContext.dataFilter);
+
+    let _filterColumn: FilterColumn | null = null;
+
+    const createFilterColumn = () => {
+      _filterColumn = reactive(
+        new FilterColumn({
+          name: props.name!,
+          label: props.label!,
+        })
+      );
+
+      unref(dataFilter).addColumn(_filterColumn);
+
+      return _filterColumn;
+    };
+
+    const filterColumn = computed(() => {
+      const existingColumn = unref(dataFilter).getColumn(props.name) ?? null;
+
+      if (existingColumn) {
+        return existingColumn;
+      }
+
+      if (!_filterColumn) {
+        _filterColumn = createFilterColumn();
+      }
+
+      return _filterColumn;
+    });
+
+    const { component, componentProps } = useFilterColumnComponent(
+      filterColumn,
+      dataFilter
+    );
+
+    const createDataFilterItem = (
+      dataFilter: DataFilter,
+      column: FilterColumn
+    ) => {
+      function setOperator(
+        this: DataFilterItem,
+        operator: OperatorOption["value"]
+      ) {
+        const _dataFilter = unref(dataFilter);
+        if (isWhereFilter(_dataFilter)) {
+          this.currentOperator = operator;
+          _dataFilter.setParamOperator(unref(column).name, operator);
+        }
+      }
+
+      function setOperatorOptions(
+        this: DataFilterItem,
+        options: OperatorOption[]
+      ) {
+        if (isWhereFilter(unref(dataFilter))) {
+          this.operatorOptions = options;
+        }
+      }
+
+      function setValue(this: DataFilterItem, value: any) {
+        this.dataFilter.setParam(this.column.name, value);
+      }
+
+      function getValue(this: DataFilterItem): any {
+        return this.dataFilter.getParam(this.column.name);
+      }
+
+      const filterPanelItem: DataFilterItem = {
+        dataFilter,
+        column,
+        currentOperator: null,
+        operatorOptions: [],
+        setOperator,
+        setOperatorOptions,
+        setValue,
+        getValue,
+      };
+
+      return filterPanelItem;
+    };
+
+    const dataFilterItem = reactive(
+      createDataFilterItem(unref(dataFilter), unref(filterColumn))
+    ) as DataFilterItem;
+
+    provide(
+      DATA_FILTER_ITEM_CONTEXT,
+      reactive({ dataFilter, dataFilterItem }) as DataFilterItemContext
+    );
+
+    onBeforeUnmount(() => {
+      const _filterPanel = unref(dataFilter);
+
+      if (isWhereFilter(_filterPanel)) {
+        _filterPanel.deleteParamOperator(unref(filterColumn).name);
+      }
+
+      _filterPanel.deleteParam(unref(filterColumn).name);
+    });
+
+    return () => {
+      const _filterPanel = unref(dataFilter);
+
+      const _filterColumn = unref(filterColumn);
+
+      if (!_filterColumn) {
+        return null;
+      }
+
+      let children: any = slots.default?.();
+
+      if (!children && unref(component)) {
+        const FilterColumnComponent = toRaw(unref(component));
+
+        children = <FilterColumnComponent {...unref(componentProps)} />;
+      }
+
+      const options = dataFilterItem.operatorOptions.map((option) => (
+        <ElOption
+          key={option.value}
+          value={option.value}
+          label={i18n.translate(option.label)}
+        />
+      ));
+
+      const operatorSelect = isWhereFilter(_filterPanel) ? (
+        <ElSelect
+          modelValue={dataFilterItem.currentOperator as any}
+          onUpdate:modelValue={(v) => dataFilterItem.setOperator(v)}
+          class="mk-data-filter-form-item__operator"
+        >
+          {options}
+        </ElSelect>
+      ) : null;
+
+      const labelWidth = computed(() => dataFilterContext.labelWidth);
+
+      return (
+        <div class="mk-data-filter-form-item">
+          <div
+            class="mk-data-filter-form-item__label"
+            style={{ width: labelWidth.value + "px" }}
+          >
+            {_filterColumn.label}
+          </div>
+          {/* {operatorSelect} */}
+          <div class="mk-data-filter-form-item__content">{children}</div>
+        </div>
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,15 @@
+import { ExtractPropTypes } from "vue";
+import { DataFilter, DataTable } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+import dataFilterForm from "./data-filter-form";
+
+export const dataFilterFormProps = buildProps({
+  // dataFilter: { type: DataFilter, required: true },
+  dataTable: { type: DataTable, required: true },
+} as const);
+
+export type DataFilterFormProps = ExtractPropTypes<typeof dataFilterFormProps>;
+
+export const dataFilterFormEmits = {};
+
+export type DataFilterFormEmits = typeof dataFilterForm;

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>;