@maketribe/ms-app 3.0.4 → 3.0.5

package/src/components/data-model/data-table/views/table/classify-search/classify-search-item/classify-search-item.tsx

@@ -0,0 +1,97 @@
+import { defineComponent, computed, unref, ComputedRef } from "vue";
+import { ElTag } from "element-plus";
+import {
+  classifySearchItemProps,
+  classifySearchItemEmits,
+} from "./classify-search-item-options";
+
+export type DataOptionItem = { value: any; label: string };
+
+export default defineComponent({
+  name: "MKTableClassifySearchItem",
+  props: classifySearchItemProps,
+  emits: classifySearchItemEmits,
+  setup(props, { emit }) {
+    const modelValue = computed({
+      get: () => {
+        if (props.multiple) {
+          return Array.isArray(props.modelValue)
+            ? props.modelValue
+            : props.modelValue
+            ? [props.modelValue]
+            : [];
+        }
+
+        return props.modelValue;
+      },
+      set: (v: any) => emit("update:model-value", v),
+    });
+
+    const handleClick = (item: any) => {
+      let _modelValue = unref(modelValue);
+      if (props.multiple) {
+        const index = _modelValue.findIndex((v: any) => v === item.value);
+
+        if (index > -1) {
+          _modelValue.splice(index, 1);
+        } else {
+          _modelValue.push(item.value);
+        }
+
+        modelValue.value = _modelValue;
+
+        return;
+      }
+
+      modelValue.value = item?.value ?? null;
+    };
+
+    const options: ComputedRef<DataOptionItem[]> = computed(() => {
+      if (Array.isArray(props.options)) {
+        return props.options.map((item) => props.formatOptions(item));
+      }
+
+      return [];
+    });
+
+    const labelStyle: ComputedRef<any> = computed(() => {
+      if (props.labelWidth) {
+        return { width: props.labelWidth };
+      }
+
+      return {};
+    });
+
+    return () => {
+      const title = props.label ? (
+        <div class="mk-classify-search-item-title" style={unref(labelStyle)}>
+          {props.label}
+        </div>
+      ) : null;
+
+      const tags = unref(options).map((item) => {
+        const isSelect = props.multiple
+          ? unref(modelValue).includes(item.value)
+          : item.value === unref(modelValue);
+
+        return (
+          <ElTag
+            key={item.value}
+            effect={isSelect ? "dark" : "light"}
+            onClick={() => handleClick(item)}
+            disable-transitions
+          >
+            {item.label}
+          </ElTag>
+        );
+      });
+
+      return (
+        <div class="mk-classify-search-item">
+          {title}
+          {tags}
+        </div>
+      );
+    };
+  },
+});

package/src/components/data-model/data-table/views/table/classify-search/classify-search-item/index.ts

@@ -0,0 +1,5 @@
+import TableClassifySearchItem from "./classify-search-item";
+
+export const MKTableClassifySearchItem = TableClassifySearchItem;
+
+export default TableClassifySearchItem;

package/src/components/data-model/data-table/views/table/classify-search/classify-search.tsx

@@ -0,0 +1,40 @@
+import { Fragment, computed, defineComponent, inject, unref } from "vue";
+import MKTableClassifySearchItem from "./classify-search-item";
+import { DATATABLE_CONTEXT_KEY } from "../../../token";
+
+export default defineComponent({
+  name: "MKTableClassifySearch",
+  setup(props, { slots }) {
+    const dataTable = inject(DATATABLE_CONTEXT_KEY)?.dataTable;
+
+    const classifySearch = computed(() => dataTable?.classifySearch ?? null);
+
+    return () => {
+      let children: any = slots.default?.();
+
+      const _classifySearch = unref(classifySearch);
+
+      if (!children && _classifySearch) {
+        children = (
+          <Fragment>
+            {_classifySearch.getClassifySearchItems().map((item) => (
+              <MKTableClassifySearchItem
+                label={item.label}
+                labelWidth={_classifySearch.labelWidth}
+                modelValue={_classifySearch.getParam(item.name)}
+                onUpdate:model-value={(v: any) => {
+                  _classifySearch.setParam(item.name, v);
+                }}
+                multiple={item.multiple}
+                options={item.options}
+                formatOptions={item.formatOptions || undefined}
+              />
+            ))}
+          </Fragment>
+        );
+      }
+
+      return <div class="mk-classify-search">{children}</div>;
+    };
+  },
+});

package/src/components/data-model/data-table/views/table/classify-search/index.ts

@@ -0,0 +1,7 @@
+import TableClassifySearch from "./classify-search";
+
+export const MKTableClassifySearch = TableClassifySearch;
+
+export default TableClassifySearch;
+
+export * from "./classify-search-item";

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

@@ -0,0 +1,8 @@
+import TableView from "./table-view";
+
+export const MKTableView = TableView;
+
+export default MKTableView;
+
+export * from "./classify-search";
+export * from "./search";

package/src/components/data-model/data-table/views/table/search/composables/index.ts

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

package/src/components/data-model/data-table/views/table/search/composables/use-condition.ts

@@ -0,0 +1,65 @@
+import { Operator } from "@maketribe/dm";
+import { computed, inject, unref, watch } from "vue";
+
+import { BETWEEN_OPTION, OperatorOption } from "../operator-options";
+import { TABLE_SEARCH_ITEM_CONTEXT_KEY } 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 tableSearchItemContext = inject(TABLE_SEARCH_ITEM_CONTEXT_KEY)!;
+  const tableSearchItem = tableSearchItemContext.tableSearchItem;
+
+  tableSearchItem.setOperatorOptions(options.operatorOptions);
+
+  tableSearchItem.setOperator(options.operator);
+  if (options.defaultValue !== void 0) {
+    tableSearchItem.column.defaultValue = options.defaultValue;
+  }
+
+  const value = computed({
+    get: () => tableSearchItem.getValue(),
+    set: (v: any) => tableSearchItem.setValue(v === "" ? null : v),
+  });
+
+  const isBetween = computed(
+    () => unref(currentOperator.value) === BETWEEN_OPTION.value
+  );
+
+  const currentOperator = computed(() => tableSearchItem.currentOperator);
+
+  watch(
+    currentOperator,
+    () => {
+      const defaultValue = options.defaultValue;
+
+      if (unref(isBetween)) {
+        tableSearchItem.column.defaultValue = [defaultValue, defaultValue];
+        value.value = [defaultValue, defaultValue];
+        return;
+      }
+
+      tableSearchItem.column.defaultValue = defaultValue;
+      value.value = defaultValue;
+    },
+    { immediate: true }
+  );
+
+  return {
+    isBetween,
+    tableSearchItem,
+    currentOperator,
+    value,
+  };
+}

package/src/components/data-model/data-table/views/table/search/index.ts

@@ -0,0 +1,9 @@
+import TableSearch from "./search";
+
+export const MKTableSearch = TableSearch;
+
+export default MKTableSearch;
+
+export * from "./composables";
+export * from "./token";
+export * from "./operator-options";

package/src/components/data-model/data-table/views/table/search/operator-options.ts

@@ -0,0 +1,69 @@
+import { Operator } from "@maketribe/dm";
+
+export type OperatorOption = { value: Operator; label: string; tag: string };
+
+export const EQUAL_OPTION: OperatorOption = {
+  value: Operator.EQUAL,
+  label: "mk.operator.equal",
+  tag: "mk.operator.equalTag",
+};
+
+export const CONTAIN_OPTION: OperatorOption = {
+  value: Operator.CONTAIN,
+  label: "mk.operator.contain",
+  tag: "mk.operator.containTag",
+};
+
+export const IN_OPTION: OperatorOption = {
+  value: Operator.IN,
+  label: "mk.operator.in",
+  tag: "mk.operator.inTag",
+};
+
+export const NOT_IN_OPTION: OperatorOption = {
+  value: Operator.NOT_IN,
+  label: "mk.operator.notIn",
+  tag: "mk.operator.notInTag",
+};
+
+export const LESS_THAN_OPTION: OperatorOption = {
+  value: Operator.LESS_THAN,
+  label: "mk.operator.lessThan",
+  tag: "mk.operator.lessThanTag",
+};
+
+export const LESS_THAN_EQUAL_OPTION: OperatorOption = {
+  value: Operator.LESS_THAN_EQUAL,
+  label: "mk.operator.lessThanEqual",
+  tag: "mk.operator.lessThanEqualTag",
+};
+
+export const GREATER_THAN_OPTION: OperatorOption = {
+  value: Operator.GREATER_THAN,
+  label: "mk.operator.greaterThan",
+  tag: "mk.operator.greaterThanTag",
+};
+
+export const GREATER_THAN_EQUAL_OPTION: OperatorOption = {
+  value: Operator.GREATER_THAN_EQUAL,
+  label: "mk.operator.greaterThanEqual",
+  tag: "mk.operator.greaterThanEqualTag",
+};
+
+export const BETWEEN_OPTION: OperatorOption = {
+  value: Operator.BETWEEN,
+  label: "mk.operator.between",
+  tag: "mk.operator.betweenTag",
+};
+
+export const OPERATOR_OPTIONS = [
+  EQUAL_OPTION,
+  CONTAIN_OPTION,
+  IN_OPTION,
+  NOT_IN_OPTION,
+  LESS_THAN_OPTION,
+  LESS_THAN_EQUAL_OPTION,
+  GREATER_THAN_OPTION,
+  GREATER_THAN_EQUAL_OPTION,
+  BETWEEN_OPTION,
+];

package/src/components/data-model/data-table/views/table/search/search-drawer/index.ts

@@ -0,0 +1,5 @@
+import TableSearchDrawer from "./search-drawer";
+
+export const MKTableSearchDrawer = TableSearchDrawer;
+
+export default MKTableSearchDrawer;

package/src/components/data-model/data-table/views/table/search/search-drawer/search-drawer-options.ts

@@ -0,0 +1,17 @@
+import { ExtractPropTypes } from "vue";
+import { DataFilter } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const searchDrawerProps = buildProps({
+  dataFilter: { type: DataFilter, required: true },
+  visible: { type: Boolean, default: false },
+} as const);
+
+export type SearchDrawerProps = ExtractPropTypes<typeof searchDrawerProps>;
+
+export const searchDrawerEmits = {
+  "update:visible": (visible: any) => true,
+  confirm: (result: any) => true,
+};
+
+export type SearchDrawerEmits = typeof searchDrawerEmits;

package/src/components/data-model/data-table/views/table/search/search-drawer/search-drawer.tsx

@@ -0,0 +1,130 @@
+import { ElButton, ElDrawer } from "element-plus";
+import {
+  Fragment,
+  Ref,
+  computed,
+  defineComponent,
+  ref,
+  unref,
+  watch,
+} from "vue";
+import { searchDrawerEmits, searchDrawerProps } from "./search-drawer-options";
+import MKTableSearchItem from "../search-item";
+import { FilterColumn, Operator, isWhereFilter } from "@maketribe/dm";
+import { cloneDeep } from "lodash-es";
+
+export default defineComponent({
+  name: "MKTableSearchDrawer",
+  props: searchDrawerProps,
+  emits: searchDrawerEmits,
+  setup(props, { emit }) {
+    const visible = computed({
+      get: () => props.visible,
+      set: (v: boolean) => emit("update:visible", v),
+    });
+
+    const columns = computed(() => props.dataFilter.getColumns());
+
+    const params: Ref<Record<string, any>> = ref({});
+    const operators: Ref<Record<string, Operator>> = ref({});
+
+    const handleConfirm = () => {
+      const _params = unref(params);
+
+      const _operators = unref(operators);
+
+      const result: Record<string, { operator?: Operator; value: any }> = {};
+
+      for (const key of Object.keys(_params)) {
+        let value = _params[key];
+        const operator = _operators[key];
+
+        if (value == null) {
+          continue;
+        }
+
+        if (isWhereFilter(props.dataFilter)) {
+          if ([Operator.IN, Operator.NOT_IN].includes(operator)) {
+            value = Array.isArray(value) ? value : [value];
+
+            if (value.length === 0) {
+              continue;
+            }
+          }
+
+          if (operator === Operator.BETWEEN) {
+            if (value[0] == null || value[1] == null) {
+              continue;
+            }
+          }
+        }
+
+        result[key] = { operator, value };
+      }
+
+      visible.value = false;
+
+      emit("confirm", result);
+    };
+
+    const handleCancel = () => {
+      visible.value = false;
+    };
+
+    const handleOperatorChange = (column: FilterColumn, operator: Operator) => {
+      unref(operators)[column.name] = operator;
+    };
+
+    watch(
+      visible,
+      (visible) => {
+        if (!visible) {
+          return;
+        }
+
+        const dataFilter = props.dataFilter;
+
+        params.value = cloneDeep(dataFilter.getParams());
+
+        if (isWhereFilter(dataFilter)) {
+          operators.value = cloneDeep(dataFilter.getParamOperators());
+        }
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      const searchItems = unref(columns).map((column) => (
+        <MKTableSearchItem
+          name={column.name}
+          modelValue={unref(params)[column.name]}
+          onOperatorChange={(operator: Operator) =>
+            handleOperatorChange(column, operator)
+          }
+          onUpdate:modelValue={(v: any) => (unref(params)[column.name] = v)}
+        />
+      ));
+
+      return (
+        <ElDrawer
+          title="多条件筛选"
+          appendToBody
+          modelValue={unref(visible)}
+          onUpdate:modelValue={(v) => (visible.value = v)}
+          v-slots={{
+            footer: () => (
+              <Fragment>
+                <ElButton type="primary" onClick={handleConfirm}>
+                  确定
+                </ElButton>
+                <ElButton onClick={handleCancel}>取消</ElButton>
+              </Fragment>
+            ),
+          }}
+        >
+          <div class="mk-data-table-search__drawer">{searchItems}</div>
+        </ElDrawer>
+      );
+    };
+  },
+});

package/src/components/data-model/data-table/views/table/search/search-item/index.ts

@@ -0,0 +1,5 @@
+import TableSearchItem from "./search-item";
+
+export const MKTableSearchItem = TableSearchItem;
+
+export default MKTableSearchItem;

package/src/components/data-model/data-table/views/table/search/search-item/search-item-options.ts

@@ -0,0 +1,16 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const searchItemProps = buildProps({
+  name: { type: String, required: true },
+  modelValue: { type: null },
+} as const);
+
+export type SearchItemProps = ExtractPropTypes<typeof searchItemProps>;
+
+export const searchItemEmits = {
+  operatorChange: (operator: any) => true,
+  "update:modelValue": (modelValue: any) => true,
+};
+
+export type SearchItemEmits = typeof searchItemEmits;

package/src/components/data-model/data-table/views/table/search/search-item/search-item.tsx

@@ -0,0 +1,160 @@
+import {
+  Ref,
+  computed,
+  defineComponent,
+  inject,
+  provide,
+  reactive,
+  ref,
+  toRaw,
+  unref,
+  watch,
+} from "vue";
+import { isWhereFilter } from "@maketribe/dm";
+import { useFilterColumnComponent } from "../../../../../../../composables";
+import {
+  TABLE_SEARCH_CONTEXT_KEY,
+  TABLE_SEARCH_ITEM_CONTEXT_KEY,
+  TableSearchItem,
+  TableSearchItemContext,
+} from "../token";
+import { searchItemEmits, searchItemProps } from "./search-item-options";
+import { OperatorOption } from "../operator-options";
+import { ElOption, ElSelect } from "element-plus";
+import { I18n } from "@maketribe/locale";
+
+export type SearchItemComponent = {
+  isEmpty: () => boolean;
+  reset: () => void;
+};
+
+export default defineComponent({
+  name: "MKTableSearchItem",
+  props: searchItemProps,
+  emits: searchItemEmits,
+  setup(props, { slots, emit, expose }) {
+    const tableSearchContext = inject(TABLE_SEARCH_CONTEXT_KEY)!;
+
+    const dataFilter = tableSearchContext.dataFilter;
+
+    const searchItemComponent: Ref<SearchItemComponent | null> = ref(null);
+
+    const column = computed(() => dataFilter.getColumn(props.name));
+
+    const { component, componentProps } = useFilterColumnComponent(
+      column,
+      dataFilter
+    );
+
+    const createSearchItem = () => {
+      function setOperator(
+        this: TableSearchItem,
+        operator: OperatorOption["value"]
+      ) {
+        const _dataFilter = unref(dataFilter);
+        if (isWhereFilter(_dataFilter)) {
+          this.currentOperator = operator;
+
+          emit("operatorChange", operator);
+        }
+      }
+
+      function setOperatorOptions(
+        this: TableSearchItem,
+        options: OperatorOption[]
+      ) {
+        if (isWhereFilter(unref(dataFilter))) {
+          this.operatorOptions = options;
+        }
+      }
+
+      function setValue(this: TableSearchItem, value: any) {
+        emit("update:modelValue", value);
+      }
+
+      function getValue(this: TableSearchItem): any {
+        return props.modelValue;
+      }
+
+      const tableSearchItem: TableSearchItem = reactive({
+        column,
+        currentOperator: null,
+        operatorOptions: [],
+        setOperator,
+        setOperatorOptions,
+        setValue,
+        getValue,
+      }) as TableSearchItem;
+
+      return tableSearchItem;
+    };
+
+    const tableSearchItem = createSearchItem();
+
+    watch(
+      computed(() => props.modelValue),
+      (modelValue, oldValue) => {
+        if (modelValue !== oldValue) {
+          tableSearchItem.setValue(modelValue);
+        }
+      },
+      { immediate: true }
+    );
+
+    provide(
+      TABLE_SEARCH_ITEM_CONTEXT_KEY,
+      reactive({ dataFilter, tableSearchItem }) as TableSearchItemContext
+    );
+
+    expose({
+      reset: () => {
+        unref(searchItemComponent)?.reset();
+      },
+      isEmpty: () => {
+        return unref(searchItemComponent)?.isEmpty() ?? true;
+      },
+    });
+
+    return () => {
+      const FilterColumnComponent = toRaw(unref(component));
+
+      const children = (
+        <FilterColumnComponent
+          ref={(ref) => {
+            searchItemComponent.value = ref as unknown as SearchItemComponent;
+          }}
+          key={props.name}
+          {...unref(componentProps)}
+        />
+      );
+
+      const options = tableSearchItem.operatorOptions.map((option) => (
+        <ElOption
+          key={option.value}
+          value={option.value}
+          label={I18n.instance.translate(option.label)}
+        />
+      ));
+
+      const operatorSelect = isWhereFilter(dataFilter) ? (
+        <ElSelect
+          modelValue={tableSearchItem.currentOperator as any}
+          onUpdate:modelValue={(v) => tableSearchItem.setOperator(v)}
+          class="mk-data-table-search-item__operator"
+        >
+          {options}
+        </ElSelect>
+      ) : null;
+
+      return (
+        <div class="mk-data-table-search-item">
+          <span class="mk-data-table-search-item__label">
+            {slots.label?.() ?? unref(column)!.label}
+          </span>
+          {operatorSelect}
+          <div class="mk-data-table-search-item__input">{children}</div>
+        </div>
+      );
+    };
+  },
+});

package/src/components/data-model/data-table/views/table/search/search-options.ts

@@ -0,0 +1,18 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { DataFilter } from "@maketribe/dm";
+
+export const searchProps = buildProps({
+  dataFilter: {
+    type: DataFilter,
+    required: true,
+  },
+} as const);
+
+export type SearchProps = ExtractPropTypes<typeof searchProps>;
+
+export const searchEmits = {
+  search: () => true,
+};
+
+export type SearchEmits = typeof searchEmits;