@maketribe/ms-app 3.0.27 → 3.0.29

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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