@maketribe/ms-app 3.0.30 → 3.0.31

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

@@ -0,0 +1,66 @@
+import { Operator } from "@maketribe/dm";
+import { computed, inject, unref, watch } from "vue";
+
+import { BETWEEN_OPTION, OperatorOption } from "../operator-options";
+import { FILTER_PANEL_ITEM_CONTEXT, FilterPanelItem } from "../token";
+import { buildProps } from "@maketribe/utils";
+
+export const conditionProps = buildProps({
+  defaultValue: {
+    default: null,
+  },
+} as const);
+
+export type ConditionOptions = {
+  operator: Operator;
+  operatorOptions: OperatorOption[];
+  defaultValue: any;
+};
+
+export function useCondition(options: ConditionOptions) {
+  const filterPanelItemContext = inject(FILTER_PANEL_ITEM_CONTEXT) as any;
+  const filterPanelItem =
+    filterPanelItemContext.filterPanelItem as FilterPanelItem;
+
+  filterPanelItem.setOperatorOptions(options.operatorOptions);
+
+  filterPanelItem.setOperator(options.operator);
+  if (options.defaultValue !== void 0) {
+    filterPanelItem.column.defaultValue = options.defaultValue;
+  }
+
+  const value = computed({
+    get: () => filterPanelItem.getValue(),
+    set: (v: any) => filterPanelItem.setValue(v === "" ? null : v),
+  });
+
+  const isBetween = computed(
+    () => unref(currentOperator.value) === BETWEEN_OPTION.value
+  );
+
+  const currentOperator = computed(() => filterPanelItem.currentOperator);
+
+  watch(
+    currentOperator,
+    () => {
+      const defalutValue = options.defaultValue;
+
+      if (unref(isBetween)) {
+        filterPanelItem.column.defaultValue = [defalutValue, defalutValue];
+        value.value = [defalutValue, defalutValue];
+        return;
+      }
+
+      filterPanelItem.column.defaultValue = defalutValue;
+      value.value = defalutValue;
+    },
+    { immediate: true }
+  );
+
+  return {
+    isBetween,
+    filterPanelItem,
+    currentOperator,
+    value,
+  };
+}

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

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

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

@@ -0,0 +1,187 @@
+import {
+  computed,
+  defineComponent,
+  inject,
+  onBeforeUnmount,
+  provide,
+  reactive,
+  toRaw,
+  unref,
+  useSlots,
+} from "vue";
+import { ElOption, ElSelect, ElTooltip } from "element-plus";
+import { FilterColumn, isWhereFilter, DataFilter } from "@maketribe/dm";
+
+import {
+  FILTER_PANEL_CONTEXT,
+  FILTER_PANEL_ITEM_CONTEXT,
+  FilterPanelItem,
+} from "../token";
+
+import { useI18n, useFilterColumnComponent } from "../../../../composables";
+import { OperatorOption } from "../operator-options";
+import { filterPanelItemOptions } from "./filter-panel-item-options";
+
+export default defineComponent({
+  name: "MKFilterPanelItem",
+  props: filterPanelItemOptions,
+  setup(props) {
+    const slots = useSlots();
+
+    const i18n = useI18n()!;
+
+    const filterPanelContext: any = inject(FILTER_PANEL_CONTEXT);
+
+    const dataFilter = computed(
+      () => filterPanelContext.dataFilter as 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 createFilterPanelItem = (
+      dataFilter: DataFilter,
+      column: FilterColumn
+    ) => {
+      function setOperator(
+        this: FilterPanelItem,
+        operator: OperatorOption["value"]
+      ) {
+        const _dataFilter = unref(dataFilter);
+        if (isWhereFilter(_dataFilter)) {
+          this.currentOperator = operator;
+          _dataFilter.setParamOperator(unref(column).name, operator);
+        }
+      }
+
+      function setOperatorOptions(
+        this: FilterPanelItem,
+        options: OperatorOption[]
+      ) {
+        if (isWhereFilter(unref(dataFilter))) {
+          this.operatorOptions = options;
+        }
+      }
+
+      function setValue(this: FilterPanelItem, value: any) {
+        this.dataFilter.setParam(this.column.name, value);
+      }
+
+      function getValue(this: FilterPanelItem): any {
+        return this.dataFilter.getParam(this.column.name);
+      }
+
+      const filterPanelItem: FilterPanelItem = {
+        dataFilter,
+        column,
+        currentOperator: null,
+        operatorOptions: [],
+        setOperator,
+        setOperatorOptions,
+        setValue,
+        getValue,
+      };
+
+      return filterPanelItem;
+    };
+
+    const filterPanelItem = reactive(
+      createFilterPanelItem(unref(dataFilter), unref(filterColumn))
+    );
+
+    provide(
+      FILTER_PANEL_ITEM_CONTEXT,
+      reactive({
+        dataFilter,
+        filterPanelItem,
+      })
+    );
+
+    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 = filterPanelItem.operatorOptions.map((option) => (
+        <ElOption
+          key={option.value}
+          value={option.value}
+          label={i18n.translate(option.label)}
+        />
+      ));
+
+      const operatorSelect = isWhereFilter(_filterPanel) ? (
+        <ElSelect
+          modelValue={filterPanelItem.currentOperator as any}
+          onUpdate:modelValue={(v) => filterPanelItem.setOperator(v)}
+          class="mk-filter-panel-item__operator"
+        >
+          {options}
+        </ElSelect>
+      ) : null;
+
+      return (
+        <div class="mk-filter-panel-item">
+          <ElTooltip content={_filterColumn.label} placement="top">
+            <div class="mk-filter-panel-item__label">{_filterColumn.label}</div>
+          </ElTooltip>
+          {operatorSelect}
+          <div class="mk-filter-panel-item__content">{children}</div>
+        </div>
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,15 @@
+import { ExtractPropTypes } from "vue";
+import { DataFilter } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const filterPanelProps = buildProps({
+  dataFilter: { type: DataFilter, required: true },
+} as const);
+
+export type FilterPanelProps = ExtractPropTypes<typeof filterPanelProps>;
+
+export const filterPanelEmits = {
+  search: () => true,
+};
+
+export type FilterPanelEmits = typeof filterPanelEmits;

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

@@ -0,0 +1,102 @@
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  provide,
+  reactive,
+  unref,
+  useSlots,
+} from "vue";
+import { useRouter } from "vue-router";
+
+import FilterPanelItem from "./filter-panel-item/filter-panel-item";
+import { FILTER_PANEL_CONTEXT } from "./token";
+import { filterPanelEmits, filterPanelProps } from "./filter-panel-options";
+import { ElButton } from "element-plus";
+
+export default defineComponent({
+  name: "MKFilterPanel",
+  props: filterPanelProps,
+  emits: filterPanelEmits,
+  setup(props, { emit }) {
+    const slots = useSlots();
+    const router = useRouter();
+
+    const dataFilter = computed(() => props.dataFilter);
+
+    const columns = computed(() =>
+      unref(dataFilter)
+        .getColumns()
+        .filter((column) => column.visible)
+    );
+
+    provide(FILTER_PANEL_CONTEXT, reactive({ dataFilter }));
+
+    const handleSearch = () => {
+      emit("search");
+    };
+
+    const handleReset = () => {
+      unref(dataFilter)?.reset();
+
+      emit("search");
+    };
+
+    onMounted(() => {
+      const currentRoute = unref(router.currentRoute);
+
+      const queryFilterParams = currentRoute.query.filterParams;
+      if (typeof queryFilterParams === "string") {
+        try {
+          const filterParams = JSON.parse(
+            decodeURIComponent(queryFilterParams)
+          );
+          unref(dataFilter).setParams(filterParams);
+        } catch (e) {
+          unref(dataFilter).reset();
+        }
+      } else {
+        unref(dataFilter).reset();
+      }
+
+      unref(dataFilter).setReady();
+    });
+
+    return () => {
+      let children: any = slots.default?.();
+
+      if (!children) {
+        children = unref(columns).map((column) => {
+          if (!column.name) {
+            return null;
+          }
+
+          return (
+            slots[`col-${column.name}`]?.() || (
+              <FilterPanelItem
+                name={column.name}
+                v-slots={{ default: slots[`col-${column.name}-content`] }}
+              />
+            )
+          );
+        });
+      }
+
+      if (!children) {
+        return null;
+      }
+
+      return (
+        <div class="mk-filter-panel">
+          {children}
+          <div class="mk-filter-panel__tools">
+            <ElButton type="primary" onClick={handleSearch}>
+              查询
+            </ElButton>
+            <ElButton onClick={handleReset}>重置</ElButton>
+          </div>
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,11 @@
+import { withInstall } from "@maketribe/utils";
+import FitlerPanel from "./filter-panel";
+import MKFilterPanelItem from "./filter-panel-item";
+
+export const MKFilterPanel = withInstall(FitlerPanel, {
+  MKFilterPanelItem,
+});
+export default MKFilterPanel;
+
+export * from "./filter-panel-options";
+export * from "./filter-panel-item";

package/src/components/data-model/filter-panel/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/filter-panel/token.ts

@@ -0,0 +1,17 @@
+import { Operator, FilterColumn, DataFilter } from "@maketribe/dm";
+
+import { OperatorOption } from "./operator-options";
+
+export interface FilterPanelItem {
+  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 FILTER_PANEL_CONTEXT = Symbol("FILTER_PANEL_CONTEXT");
+export const FILTER_PANEL_ITEM_CONTEXT = Symbol("FILTER_PANEL_ITEM_CONTEXT");

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

@@ -0,0 +1,5 @@
+export * from "./data-form";
+export * from "./data-form-page";
+export * from "./data-table";
+export * from "./data-table-page";
+export * from "./data-table-pagination";

package/src/components/data-select/data-select-options.ts

@@ -0,0 +1,43 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { DataTable } from "@maketribe/dm";
+
+export const dataSelectProps = buildProps({
+  source: {
+    type: Object,
+  },
+  options: {
+    type: Array,
+  },
+  dataTable: {
+    type: DataTable<any>,
+  },
+  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 };
+    },
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+} as const);
+
+export type DataSelectProps = ExtractPropTypes<typeof dataSelectProps>;
+
+export const dataSelectEmit = {
+  "update:model-value": (modelValue: any) => true,
+};
+
+export type DataSelectEmit = typeof dataSelectEmit;

package/src/components/data-select/data-select.tsx

@@ -0,0 +1,87 @@
+import { ComputedRef, computed, defineComponent, unref, watch } from "vue";
+import { ElSelect, ElOption } from "element-plus";
+import { DataSource, isDataTable } from "@maketribe/dm";
+
+import { dataSelectProps, dataSelectEmit } from "./data-select-options";
+
+export type DataOptionItem = { value: any; label: string };
+
+export default defineComponent({
+  name: "MKDataSelect",
+  props: dataSelectProps,
+  emits: dataSelectEmit,
+  setup(props, { emit }) {
+    const value = computed({
+      get: () => unref(props.modelValue),
+      set: (v) => {
+        emit("update:model-value", v);
+      },
+    });
+
+    const options: ComputedRef<DataOptionItem[]> = computed(() => {
+      if (props.dataTable) {
+        return props.dataTable
+          .getList()
+          .map((item) => props.formatOptions(item));
+      }
+
+      if (Array.isArray(props.options)) {
+        return props.options.map((item) => props.formatOptions(item));
+      }
+
+      if (props.source) {
+        const source = props.source;
+
+        switch (source.type) {
+          case DataSource.DATA:
+            return Array.isArray(source.value)
+              ? source.value.map((item) => props.formatOptions(item))
+              : [];
+
+          case DataSource.DATATABLE:
+            const dataTable = source.value;
+
+            if (isDataTable(dataTable)) {
+              return dataTable
+                .getList()
+                .map((item) => props.formatOptions(item));
+            }
+
+            return [];
+
+          default:
+            return [];
+        }
+      }
+
+      return [];
+    });
+
+    watch(
+      computed(() => props.dataTable),
+      (dataTable) => {
+        dataTable?.dataFilter.setReady();
+        dataTable?.load();
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      const children = unref(options).map((item) => (
+        <ElOption key={item.value} value={item.value} label={item.label} />
+      ));
+
+      return (
+        <ElSelect
+          disabled={props.disabled}
+          class="data-select"
+          modelValue={unref(value)}
+          multiple={props.multiple}
+          onUpdate:modelValue={(v: any) => (value.value = v)}
+        >
+          {children}
+        </ElSelect>
+      );
+    };
+  },
+});

package/src/components/data-select/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import DataSelect from "./data-select";
+
+export const MKDataSelect = withInstall(DataSelect);
+export default MKDataSelect;
+
+export * from "./data-select-options";

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

@@ -0,0 +1,43 @@
+import { ExtractPropTypes } from "vue";
+import { DataTable } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const dataTableSelectProps = buildProps({
+  modelValue: {
+    type: null,
+  },
+  labelFieldName: {
+    type: String,
+    required: true,
+  },
+  primaryFieldName: {
+    type: String,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  objectValue: {
+    type: Boolean,
+    default: false,
+  },
+  dataTable: {
+    type: DataTable<any>,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+} as const);
+
+export type DataTableSelectProps = ExtractPropTypes<
+  typeof dataTableSelectProps
+>;
+
+export const dataTableSelectEmits = {
+  "update:model-value": (modelValue: any) => true,
+  recordsChange: (records: any[]) => Array.isArray(records),
+};
+
+export type DataTableSelectEmits = typeof dataTableSelectEmits;