@maketribe/ms-app 3.2.9 → 3.2.11

package/dist/esm/components/data-model/data-filter-form/composables/use-condition.js

@@ -1,48 +1,18 @@
-import { inject, computed, unref, watch } from "vue";
 import { buildProps } from "@maketribe/utils";
-import { BETWEEN_OPTION } from "../operator-options.js";
-import { DATA_FILTER_ITEM_CONTEXT } from "../token.js";
+import { FilterColumn } from "@maketribe/dm";
 const dataFilterConditionProps = buildProps({
+  modelValue: {
+    type: null
+  },
   defaultValue: {
     default: null
+  },
+  column: {
+    type: FilterColumn,
+    required: true
   }
 });
-function useDataFilterCondition(options) {
-  const dataFilterItemContext = inject(DATA_FILTER_ITEM_CONTEXT);
-  const dataFilterItem = dataFilterItemContext.dataFilterItem;
-  dataFilterItem.setOperatorOptions(options.operatorOptions);
-  dataFilterItem.setOperator(options.operator);
-  const value = computed({
-    get: () => dataFilterItem.getValue(),
-    set: (v) => 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) && !Array.isArray(defaultValue)) {
-      return [defaultValue, defaultValue];
-    }
-    return defaultValue;
-  };
-  watch(currentOperator, () => {
-    const defaultValue = dataFilterItem.column.defaultValue || calcDefaultValue();
-    dataFilterItem.column.defaultValue = defaultValue;
-    value.value = defaultValue;
-  });
-  dataFilterItem.column.defaultValue = dataFilterItem.column.defaultValue || calcDefaultValue();
-  value.value = dataFilterItem.getValue() || calcDefaultValue();
-  return {
-    isBetween,
-    dataFilterItem,
-    currentOperator,
-    value
-  };
-}
 export {
-  dataFilterConditionProps,
-  useDataFilterCondition
+  dataFilterConditionProps
 };
 //# sourceMappingURL=use-condition.js.map

package/dist/esm/components/data-model/data-filter-form/composables/use-condition.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-condition.js","sources":["../../../../../../src/components/data-model/data-filter-form/composables/use-condition.ts"],"sourcesContent":["import { computed, inject, unref, watch } from \"vue\";\r\nimport { buildProps } from \"@maketribe/utils\";\r\nimport { Operator } from \"@maketribe/dm\";\r\n\r\nimport { BETWEEN_OPTION, OperatorOption } from \"../operator-options\";\r\nimport { DATA_FILTER_ITEM_CONTEXT } from \"../token\";\r\n\r\nexport const dataFilterConditionProps = buildProps({\r\n  defaultValue: {\r\n    default: null,\r\n  },\r\n} as const);\r\n\r\nexport type DataFilterConditionOptions = {\r\n  operator: Operator;\r\n  operatorOptions: OperatorOption[];\r\n  defaultValue: any;\r\n};\r\n\r\nexport function useDataFilterCondition(options: DataFilterConditionOptions) {\r\n  const dataFilterItemContext = inject(DATA_FILTER_ITEM_CONTEXT)!;\r\n  const dataFilterItem = dataFilterItemContext.dataFilterItem;\r\n\r\n  dataFilterItem.setOperatorOptions(options.operatorOptions);\r\n\r\n  dataFilterItem.setOperator(options.operator);\r\n  // if (options.defaultValue !== void 0) {\r\n  //   dataFilterItem.column.defaultValue = options.defaultValue;\r\n  // }\r\n\r\n  const value = computed({\r\n    get: () => dataFilterItem.getValue(),\r\n    set: (v: any) => dataFilterItem.setValue(v === \"\" ? null : v),\r\n  });\r\n\r\n  const isBetween = computed(\r\n    () => unref(currentOperator.value) === BETWEEN_OPTION.value\r\n  );\r\n\r\n  const currentOperator = computed(() => dataFilterItem.currentOperator);\r\n\r\n  const calcDefaultValue = () => {\r\n    const defaultValue = options.defaultValue;\r\n\r\n    if (unref(isBetween) && !Array.isArray(defaultValue)) {\r\n      return [defaultValue, defaultValue];\r\n    }\r\n\r\n    return defaultValue;\r\n  };\r\n\r\n  watch(currentOperator, () => {\r\n    const defaultValue = dataFilterItem.column.defaultValue || calcDefaultValue();\r\n\r\n    dataFilterItem.column.defaultValue = defaultValue;\r\n    value.value = defaultValue;\r\n  });\r\n\r\n  dataFilterItem.column.defaultValue = dataFilterItem.column.defaultValue || calcDefaultValue();\r\n  value.value = dataFilterItem.getValue() || calcDefaultValue();\r\n\r\n  return {\r\n    isBetween,\r\n    dataFilterItem,\r\n    currentOperator,\r\n    value,\r\n  };\r\n}\r\n"],"names":[],"mappings":";;;;AAOO,MAAM,2BAA2B,WAAW;AAAA,EACjD,cAAc;AAAA,IACZ,SAAS;AAAA,EACX;AACF,CAAU;AAQH,SAAS,uBAAuB,SAAqC;AACpE,QAAA,wBAAwB,OAAO,wBAAwB;AAC7D,QAAM,iBAAiB,sBAAsB;AAE9B,iBAAA,mBAAmB,QAAQ,eAAe;AAE1C,iBAAA,YAAY,QAAQ,QAAQ;AAK3C,QAAM,QAAQ,SAAS;AAAA,IACrB,KAAK,MAAM,eAAe,SAAS;AAAA,IACnC,KAAK,CAAC,MAAW,eAAe,SAAS,MAAM,KAAK,OAAO,CAAC;AAAA,EAAA,CAC7D;AAED,QAAM,YAAY;AAAA,IAChB,MAAM,MAAM,gBAAgB,KAAK,MAAM,eAAe;AAAA,EAAA;AAGxD,QAAM,kBAAkB,SAAS,MAAM,eAAe,eAAe;AAErE,QAAM,mBAAmB,MAAM;AAC7B,UAAM,eAAe,QAAQ;AAE7B,QAAI,MAAM,SAAS,KAAK,CAAC,MAAM,QAAQ,YAAY,GAAG;AAC7C,aAAA,CAAC,cAAc,YAAY;AAAA,IACpC;AAEO,WAAA;AAAA,EAAA;AAGT,QAAM,iBAAiB,MAAM;AAC3B,UAAM,eAAe,eAAe,OAAO,gBAAgB,iBAAiB;AAE5E,mBAAe,OAAO,eAAe;AACrC,UAAM,QAAQ;AAAA,EAAA,CACf;AAED,iBAAe,OAAO,eAAe,eAAe,OAAO,gBAAgB;AAC3E,QAAM,QAAQ,eAAe,SAAS,KAAK,iBAAiB;AAErD,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"use-condition.js","sources":["../../../../../../src/components/data-model/data-filter-form/composables/use-condition.ts"],"sourcesContent":["import { buildProps } from \"@maketribe/utils\";\r\nimport { FilterColumn, Operator } from \"@maketribe/dm\";\r\n\r\nimport { OperatorOption } from \"../operator-options\";\r\n\r\nexport const dataFilterConditionProps = buildProps({\r\n  modelValue: {\r\n    type: null,\r\n  },\r\n  defaultValue: {\r\n    default: null,\r\n  },\r\n  column: {\r\n    type: FilterColumn,\r\n    required: true,\r\n  },\r\n} as const);\r\n\r\nexport type DataFilterConditionOptions = {\r\n  operator: Operator;\r\n  operatorOptions: OperatorOption[];\r\n  defaultValue: any;\r\n};\r\n\r\n// export function useDataFilterCondition(options: DataFilterConditionOptions) {\r\n//   const dataFilterItemContext = inject(DATA_FILTER_ITEM_CONTEXT)!;\r\n//   const dataFilterItem = dataFilterItemContext.dataFilterItem;\r\n\r\n//   dataFilterItem.setOperatorOptions(options.operatorOptions);\r\n\r\n//   dataFilterItem.setOperator(options.operator);\r\n//   // if (options.defaultValue !== void 0) {\r\n//   //   dataFilterItem.column.defaultValue = options.defaultValue;\r\n//   // }\r\n\r\n//   const value = computed({\r\n//     get: () => dataFilterItem.getValue(),\r\n//     set: (v: any) => dataFilterItem.setValue(v === \"\" ? null : v),\r\n//   });\r\n\r\n//   const isBetween = computed(\r\n//     () => unref(currentOperator.value) === BETWEEN_OPTION.value\r\n//   );\r\n\r\n//   const currentOperator = computed(() => dataFilterItem.currentOperator);\r\n\r\n//   const calcDefaultValue = () => {\r\n//     const defaultValue = options.defaultValue;\r\n\r\n//     if (unref(isBetween) && !Array.isArray(defaultValue)) {\r\n//       return [defaultValue, defaultValue];\r\n//     }\r\n\r\n//     return defaultValue;\r\n//   };\r\n\r\n//   watch(currentOperator, () => {\r\n//     const defaultValue =\r\n//       dataFilterItem.column.defaultValue || calcDefaultValue();\r\n\r\n//     dataFilterItem.column.defaultValue = defaultValue;\r\n//     value.value = defaultValue;\r\n//   });\r\n\r\n//   dataFilterItem.column.defaultValue =\r\n//     dataFilterItem.column.defaultValue || calcDefaultValue();\r\n//   value.value = dataFilterItem.getValue() || calcDefaultValue();\r\n\r\n//   return {\r\n//     isBetween,\r\n//     dataFilterItem,\r\n//     currentOperator,\r\n//     value,\r\n//   };\r\n// }\r\n"],"names":[],"mappings":";;AAKO,MAAM,2BAA2B,WAAW;AAAA,EACjD,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF,CAAU;"}

package/dist/esm/components/data-model/data-filter-form/data-filter-form-item/data-filter-form-item.js

@@ -1,15 +1,15 @@
-import { defineComponent, inject, computed, unref, reactive, provide, onBeforeUnmount, toRaw, createVNode, isVNode } from "vue";
+import { defineComponent, inject, computed, unref, watch, onBeforeUnmount, toRaw, createVNode, mergeProps, isVNode, reactive } from "vue";
+import { ElFormItem } from "element-plus";
 import { isWhereFilter, FilterColumn } from "@maketribe/dm";
 import { useFilterColumnComponent } from "../../../../composables/use-column-component.js";
-import { useI18n } from "../../../../composables/use-i18n.js";
+import "../../../basic/config-provider/index.js";
 import "vue-router";
 import "@maketribe/request";
 import "@maketribe/locale";
 import "@maketribe/utils";
 import "../../../../core/DataModelDefines.js";
-import { ElOption, ElSelect } from "element-plus";
 import { dataFilterFormItemProps } from "./data-filter-form-item-options.js";
-import { DATA_FILTER_CONTEXT, DATA_FILTER_ITEM_CONTEXT } from "../token.js";
+import { DATA_FILTER_CONTEXT } from "../token.js";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -19,7 +19,6 @@ const DataFilterFormItem = /* @__PURE__ */ defineComponent({
   setup(props, {
     slots
   }) {
-    const i18n = useI18n();
     const dataFilterContext = inject(DATA_FILTER_CONTEXT);
     const dataFilter = computed(() => dataFilterContext.dataFilter);
     let _filterColumn = null;
@@ -41,56 +40,32 @@ const DataFilterFormItem = /* @__PURE__ */ defineComponent({
       }
       return _filterColumn;
     });
+    const value = computed({
+      get: () => unref(dataFilter).getParam(unref(filterColumn).name),
+      set: (v) => unref(dataFilter).setParam(unref(filterColumn).name, v)
+    });
     const {
       component,
-      componentProps
+      componentProps,
+      componentInfo
     } = useFilterColumnComponent(filterColumn, dataFilter);
-    const createDataFilterItem = (dataFilter2, column) => {
-      function setOperator(operator) {
-        const _dataFilter = unref(dataFilter2);
-        if (isWhereFilter(_dataFilter)) {
-          this.currentOperator = operator;
-          _dataFilter.setParamOperator(unref(column).name, operator);
-        }
-      }
-      function setOperatorOptions(options) {
-        if (isWhereFilter(unref(dataFilter2))) {
-          this.operatorOptions = options;
-        }
-      }
-      function setValue(value) {
-        this.dataFilter.setParam(this.column.name, value);
+    watch(componentInfo, (componentInfo2) => {
+      const _dataFilter = unref(dataFilter);
+      if (isWhereFilter(_dataFilter)) {
+        _dataFilter.setParamOperator(unref(filterColumn).name, componentInfo2.defaultOperator);
       }
-      function getValue() {
-        return this.dataFilter.getParam(this.column.name);
-      }
-      const filterPanelItem = {
-        dataFilter: dataFilter2,
-        column,
-        currentOperator: null,
-        operatorOptions: [],
-        setOperator,
-        setOperatorOptions,
-        setValue,
-        getValue
-      };
-      return filterPanelItem;
-    };
-    const dataFilterItem = reactive(createDataFilterItem(unref(dataFilter), unref(filterColumn)));
-    provide(DATA_FILTER_ITEM_CONTEXT, reactive({
-      dataFilter,
-      dataFilterItem
-    }));
+    }, {
+      immediate: true
+    });
     onBeforeUnmount(() => {
-      const _filterPanel = unref(dataFilter);
-      if (isWhereFilter(_filterPanel)) {
-        _filterPanel.deleteParamOperator(unref(filterColumn).name);
+      const _dataFilter = unref(dataFilter);
+      if (isWhereFilter(_dataFilter)) {
+        _dataFilter.deleteParamOperator(unref(filterColumn).name);
       }
-      _filterPanel.deleteParam(unref(filterColumn).name);
+      _dataFilter.deleteParam(unref(filterColumn).name);
     });
     return () => {
       var _a;
-      const _filterPanel = unref(dataFilter);
       const _filterColumn2 = unref(filterColumn);
       if (!_filterColumn2) {
         return null;
@@ -98,31 +73,20 @@ const DataFilterFormItem = /* @__PURE__ */ defineComponent({
       let children = (_a = slots.default) == null ? void 0 : _a.call(slots);
       if (!children && unref(component)) {
         const FilterColumnComponent = toRaw(unref(component));
-        children = createVNode(FilterColumnComponent, unref(componentProps), null);
+        children = createVNode(FilterColumnComponent, mergeProps(unref(componentProps), {
+          "modelValue": unref(value),
+          "onUpdate:modelValue": (v) => value.value = v,
+          "column": unref(filterColumn)
+        }), null);
       }
-      const options = dataFilterItem.operatorOptions.map((option) => createVNode(ElOption, {
-        "key": option.value,
-        "value": option.value,
-        "label": i18n.translate(option.label)
-      }, null));
-      isWhereFilter(_filterPanel) ? createVNode(ElSelect, {
-        "modelValue": dataFilterItem.currentOperator,
-        "onUpdate:modelValue": (v) => dataFilterItem.setOperator(v),
-        "class": "mk-data-filter-form-item__operator"
-      }, _isSlot(options) ? options : {
-        default: () => [options]
-      }) : null;
       const labelWidth = computed(() => dataFilterContext.labelWidth);
-      return createVNode("div", {
-        "class": "mk-data-filter-form-item"
-      }, [createVNode("div", {
-        "class": "mk-data-filter-form-item__label",
-        "style": {
-          width: labelWidth.value + "px"
-        }
-      }, [_filterColumn2.label]), createVNode("div", {
-        "class": "mk-data-filter-form-item__content"
-      }, [children])]);
+      return createVNode(ElFormItem, {
+        "prop": _filterColumn2.name,
+        "label": _filterColumn2.label,
+        "labelWidth": unref(labelWidth)
+      }, _isSlot(children) ? children : {
+        default: () => [children]
+      });
     };
   }
 });

package/dist/esm/components/data-model/data-filter-form/data-filter-form-item/data-filter-form-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-filter-form-item.js","sources":["../../../../../../src/components/data-model/data-filter-form/data-filter-form-item/data-filter-form-item.tsx"],"sourcesContent":["import {\r\n  computed,\r\n  defineComponent,\r\n  inject,\r\n  onBeforeUnmount,\r\n  provide,\r\n  reactive,\r\n  toRaw,\r\n  unref,\r\n} from \"vue\";\r\nimport { DataFilter, FilterColumn, isWhereFilter } from \"@maketribe/dm\";\r\nimport { useFilterColumnComponent, useI18n } from \"../../../../composables\";\r\nimport { dataFilterFormItemProps } from \"./data-filter-form-item-options\";\r\nimport {\r\n  DATA_FILTER_CONTEXT,\r\n  DATA_FILTER_ITEM_CONTEXT,\r\n  DataFilterItem,\r\n  DataFilterItemContext,\r\n} from \"../token\";\r\nimport { OperatorOption } from \"../operator-options\";\r\nimport { ElOption, ElSelect } from \"element-plus\";\r\n\r\nexport default defineComponent({\r\n  name: \"MKDataFilterFormItem\",\r\n  props: dataFilterFormItemProps,\r\n  setup(props, { slots }) {\r\n    const i18n = useI18n()!;\r\n\r\n    const dataFilterContext = inject(DATA_FILTER_CONTEXT)!;\r\n\r\n    const dataFilter = computed(() => dataFilterContext.dataFilter);\r\n\r\n    let _filterColumn: FilterColumn | null = null;\r\n\r\n    const createFilterColumn = () => {\r\n      _filterColumn = reactive(\r\n        new FilterColumn({\r\n          name: props.name!,\r\n          label: props.label!,\r\n        })\r\n      );\r\n\r\n      unref(dataFilter).addColumn(_filterColumn);\r\n\r\n      return _filterColumn;\r\n    };\r\n\r\n    const filterColumn = computed(() => {\r\n      const existingColumn = unref(dataFilter).getColumn(props.name) ?? null;\r\n\r\n      if (existingColumn) {\r\n        return existingColumn;\r\n      }\r\n\r\n      if (!_filterColumn) {\r\n        _filterColumn = createFilterColumn();\r\n      }\r\n\r\n      return _filterColumn;\r\n    });\r\n\r\n    const { component, componentProps } = useFilterColumnComponent(\r\n      filterColumn,\r\n      dataFilter\r\n    );\r\n\r\n    const createDataFilterItem = (\r\n      dataFilter: DataFilter,\r\n      column: FilterColumn\r\n    ) => {\r\n      function setOperator(\r\n        this: DataFilterItem,\r\n        operator: OperatorOption[\"value\"]\r\n      ) {\r\n        const _dataFilter = unref(dataFilter);\r\n        if (isWhereFilter(_dataFilter)) {\r\n          this.currentOperator = operator;\r\n          _dataFilter.setParamOperator(unref(column).name, operator);\r\n        }\r\n      }\r\n\r\n      function setOperatorOptions(\r\n        this: DataFilterItem,\r\n        options: OperatorOption[]\r\n      ) {\r\n        if (isWhereFilter(unref(dataFilter))) {\r\n          this.operatorOptions = options;\r\n        }\r\n      }\r\n\r\n      function setValue(this: DataFilterItem, value: any) {\r\n        this.dataFilter.setParam(this.column.name, value);\r\n      }\r\n\r\n      function getValue(this: DataFilterItem): any {\r\n        return this.dataFilter.getParam(this.column.name);\r\n      }\r\n\r\n      const filterPanelItem: DataFilterItem = {\r\n        dataFilter,\r\n        column,\r\n        currentOperator: null,\r\n        operatorOptions: [],\r\n        setOperator,\r\n        setOperatorOptions,\r\n        setValue,\r\n        getValue,\r\n      };\r\n\r\n      return filterPanelItem;\r\n    };\r\n\r\n    const dataFilterItem = reactive(\r\n      createDataFilterItem(unref(dataFilter), unref(filterColumn))\r\n    ) as DataFilterItem;\r\n\r\n    provide(\r\n      DATA_FILTER_ITEM_CONTEXT,\r\n      reactive({ dataFilter, dataFilterItem }) as DataFilterItemContext\r\n    );\r\n\r\n    onBeforeUnmount(() => {\r\n      const _filterPanel = unref(dataFilter);\r\n\r\n      if (isWhereFilter(_filterPanel)) {\r\n        _filterPanel.deleteParamOperator(unref(filterColumn).name);\r\n      }\r\n\r\n      _filterPanel.deleteParam(unref(filterColumn).name);\r\n    });\r\n\r\n    return () => {\r\n      const _filterPanel = unref(dataFilter);\r\n\r\n      const _filterColumn = unref(filterColumn);\r\n\r\n      if (!_filterColumn) {\r\n        return null;\r\n      }\r\n\r\n      let children: any = slots.default?.();\r\n\r\n      if (!children && unref(component)) {\r\n        const FilterColumnComponent = toRaw(unref(component));\r\n\r\n        children = <FilterColumnComponent {...unref(componentProps)} />;\r\n      }\r\n\r\n      const options = dataFilterItem.operatorOptions.map((option) => (\r\n        <ElOption\r\n          key={option.value}\r\n          value={option.value}\r\n          label={i18n.translate(option.label)}\r\n        />\r\n      ));\r\n\r\n      const operatorSelect = isWhereFilter(_filterPanel) ? (\r\n        <ElSelect\r\n          modelValue={dataFilterItem.currentOperator as any}\r\n          onUpdate:modelValue={(v) => dataFilterItem.setOperator(v)}\r\n          class=\"mk-data-filter-form-item__operator\"\r\n        >\r\n          {options}\r\n        </ElSelect>\r\n      ) : null;\r\n\r\n      const labelWidth = computed(() => dataFilterContext.labelWidth);\r\n\r\n      return (\r\n        <div class=\"mk-data-filter-form-item\">\r\n          <div\r\n            class=\"mk-data-filter-form-item__label\"\r\n            style={{ width: labelWidth.value + \"px\" }}\r\n          >\r\n            {_filterColumn.label}\r\n          </div>\r\n          {/* {operatorSelect} */}\r\n          <div class=\"mk-data-filter-form-item__content\">{children}</div>\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","defineComponent","name","props","dataFilterFormItemProps","setup","slots","i18n","useI18n","dataFilterContext","inject","DATA_FILTER_CONTEXT","dataFilter","computed","_filterColumn","createFilterColumn","reactive","FilterColumn","label","unref","addColumn","filterColumn","existingColumn","getColumn","component","componentProps","useFilterColumnComponent","createDataFilterItem","column","setOperator","operator","_dataFilter","isWhereFilter","currentOperator","setParamOperator","setOperatorOptions","options","operatorOptions","setValue","value","setParam","getValue","getParam","filterPanelItem","dataFilterItem","provide","DATA_FILTER_ITEM_CONTEXT","onBeforeUnmount","_filterPanel","deleteParamOperator","deleteParam","children","default","FilterColumnComponent","toRaw","_createVNode","map","option","ElOption","translate","ElSelect","v","labelWidth","width"],"mappings":"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"}
+{"version":3,"file":"data-filter-form-item.js","sources":["../../../../../../src/components/data-model/data-filter-form/data-filter-form-item/data-filter-form-item.tsx"],"sourcesContent":["import {\r\n  computed,\r\n  defineComponent,\r\n  inject,\r\n  onBeforeUnmount,\r\n  reactive,\r\n  toRaw,\r\n  unref,\r\n  watch,\r\n} from \"vue\";\r\nimport { ElFormItem } from \"element-plus\";\r\nimport { FilterColumn, isWhereFilter } from \"@maketribe/dm\";\r\nimport { useFilterColumnComponent } from \"../../../../composables\";\r\nimport { DataFilterComponent } from \"../../../../core\";\r\nimport { dataFilterFormItemProps } from \"./data-filter-form-item-options\";\r\nimport { DATA_FILTER_CONTEXT } from \"../token\";\r\n\r\nexport default defineComponent({\r\n  name: \"MKDataFilterFormItem\",\r\n  props: dataFilterFormItemProps,\r\n  setup(props, { slots }) {\r\n    const dataFilterContext = inject(DATA_FILTER_CONTEXT)!;\r\n\r\n    const dataFilter = computed(() => dataFilterContext.dataFilter);\r\n\r\n    let _filterColumn: FilterColumn | null = null;\r\n\r\n    const createFilterColumn = () => {\r\n      _filterColumn = reactive(\r\n        new FilterColumn({\r\n          name: props.name!,\r\n          label: props.label!,\r\n        })\r\n      );\r\n\r\n      unref(dataFilter).addColumn(_filterColumn);\r\n\r\n      return _filterColumn;\r\n    };\r\n\r\n    const filterColumn = computed(() => {\r\n      const existingColumn = unref(dataFilter).getColumn(props.name) ?? null;\r\n\r\n      if (existingColumn) {\r\n        return existingColumn;\r\n      }\r\n\r\n      if (!_filterColumn) {\r\n        _filterColumn = createFilterColumn();\r\n      }\r\n\r\n      return _filterColumn;\r\n    });\r\n\r\n    const value = computed({\r\n      get: () => unref(dataFilter).getParam(unref(filterColumn).name),\r\n      set: (v) => unref(dataFilter).setParam(unref(filterColumn).name, v),\r\n    });\r\n\r\n    const { component, componentProps, componentInfo } =\r\n      useFilterColumnComponent(filterColumn, dataFilter);\r\n\r\n    watch(\r\n      componentInfo,\r\n      (componentInfo) => {\r\n        const _dataFilter = unref(dataFilter);\r\n\r\n        if (isWhereFilter(_dataFilter)) {\r\n          _dataFilter.setParamOperator(\r\n            unref(filterColumn).name,\r\n            (componentInfo as DataFilterComponent).defaultOperator\r\n          );\r\n        }\r\n      },\r\n      { immediate: true }\r\n    );\r\n\r\n    onBeforeUnmount(() => {\r\n      const _dataFilter = unref(dataFilter);\r\n\r\n      if (isWhereFilter(_dataFilter)) {\r\n        _dataFilter.deleteParamOperator(unref(filterColumn).name);\r\n      }\r\n\r\n      _dataFilter.deleteParam(unref(filterColumn).name);\r\n    });\r\n\r\n    return () => {\r\n      const _filterColumn = unref(filterColumn);\r\n\r\n      if (!_filterColumn) {\r\n        return null;\r\n      }\r\n\r\n      let children: any = slots.default?.();\r\n\r\n      if (!children && unref(component)) {\r\n        const FilterColumnComponent = toRaw(unref(component));\r\n\r\n        children = (\r\n          <FilterColumnComponent\r\n            {...unref(componentProps)}\r\n            modelValue={unref(value)}\r\n            onUpdate:modelValue={(v: any) => (value.value = v)}\r\n            column={unref(filterColumn)}\r\n          />\r\n        );\r\n      }\r\n\r\n      const labelWidth = computed(() => dataFilterContext.labelWidth);\r\n\r\n      return (\r\n        <ElFormItem\r\n          prop={_filterColumn.name}\r\n          label={_filterColumn.label}\r\n          labelWidth={unref(labelWidth)}\r\n        >\r\n          {children}\r\n        </ElFormItem>\r\n      );\r\n    };\r\n  },\r\n});\r\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","defineComponent","name","props","dataFilterFormItemProps","setup","slots","dataFilterContext","inject","DATA_FILTER_CONTEXT","dataFilter","computed","_filterColumn","createFilterColumn","reactive","FilterColumn","label","unref","addColumn","filterColumn","existingColumn","getColumn","value","get","getParam","set","v","setParam","component","componentProps","componentInfo","useFilterColumnComponent","watch","_dataFilter","isWhereFilter","setParamOperator","defaultOperator","immediate","onBeforeUnmount","deleteParamOperator","deleteParam","children","default","FilterColumnComponent","toRaw","_createVNode","_mergeProps","labelWidth","ElFormItem"],"mappings":"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"}

package/dist/esm/components/data-model/data-filter-form/data-filter-form.js

@@ -2,6 +2,7 @@ import { defineComponent, computed, unref, provide, reactive, onMounted, watch,
 import { dataFilterFormProps } from "./data-filter-form-options.js";
 import { MKDataFilterFormItem } from "./data-filter-form-item/index.js";
 import { DATA_FILTER_CONTEXT } from "./token.js";
+import { ElForm } from "element-plus";
 const DataFilterForm = /* @__PURE__ */ defineComponent({
   name: "MKDataFilterForm",
   props: dataFilterFormProps,
@@ -13,7 +14,7 @@ const DataFilterForm = /* @__PURE__ */ defineComponent({
     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;
+      return maxWordCount * 14 + 20;
     });
     provide(DATA_FILTER_CONTEXT, reactive({
       dataFilter,
@@ -61,13 +62,15 @@ const DataFilterForm = /* @__PURE__ */ defineComponent({
       if (!children) {
         return null;
       }
-      return createVNode("div", {
+      return createVNode(ElForm, {
         "class": "mk-data-filter-form"
-      }, [createVNode(Suspense, {
-        "onResolve": handleResolve
       }, {
-        default: () => [createVNode(Fragment, null, [children])]
-      })]);
+        default: () => [createVNode(Suspense, {
+          "onResolve": handleResolve
+        }, {
+          default: () => [createVNode(Fragment, null, [children])]
+        })]
+      });
     };
   }
 });

package/dist/esm/components/data-model/data-filter-form/data-filter-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-filter-form.js","sources":["../../../../../src/components/data-model/data-filter-form/data-filter-form.tsx"],"sourcesContent":["import {\r\n  Fragment,\r\n  Suspense,\r\n  computed,\r\n  defineComponent,\r\n  inject,\r\n  provide,\r\n  reactive,\r\n  unref,\r\n  watch,\r\n  onMounted,\r\n} from \"vue\";\r\nimport { dataFilterFormProps } from \"./data-filter-form-options\";\r\nimport { MKDataFilterFormItem } from \"./data-filter-form-item\";\r\nimport { DATA_FILTER_CONTEXT } from \"./token\";\r\n\r\nexport default defineComponent({\r\n  name: \"MKDataFilterForm\",\r\n  props: dataFilterFormProps,\r\n  setup(props, { slots }) {\r\n    const dataTable = computed(() => props.dataTable);\r\n    const dataFilter = computed(() => unref(dataTable).dataFilter);\r\n\r\n    const columns = computed(() =>\r\n      unref(dataFilter)\r\n        .getColumns()\r\n        .filter((column) => column.visible)\r\n    );\r\n\r\n    const labelWidth = computed(() => {\r\n      const maxWordCount = Math.max(\r\n        ...unref(columns).map((column) => column.label.length)\r\n      );\r\n\r\n      return maxWordCount * 14 + 10;\r\n    });\r\n\r\n    provide(DATA_FILTER_CONTEXT, reactive({ dataFilter, labelWidth }));\r\n\r\n    let resolve: Function | null = null;\r\n    const suspenseResolvePromise = new Promise((_resolve) => {\r\n      resolve = _resolve;\r\n    });\r\n\r\n    const handleResolve = () => {\r\n      resolve?.();\r\n    };\r\n\r\n    onMounted(() => {\r\n      watch(\r\n        dataTable,\r\n        async (dataTable, _, onCleanup) => {\r\n          await suspenseResolvePromise;\r\n\r\n          const disposable = dataTable.afterInitdEvent.on(() => {\r\n            dataTable.dataFilter.setReady();\r\n          });\r\n\r\n          onCleanup(() => {\r\n            disposable.dispose();\r\n          });\r\n        },\r\n        { immediate: true }\r\n      );\r\n    });\r\n\r\n    return () => {\r\n      if (!unref(columns).length) {\r\n        return null;\r\n      }\r\n\r\n      let children: any = slots.default?.();\r\n\r\n      if (!children) {\r\n        children = unref(columns).map((column) => {\r\n          if (!column.name) {\r\n            return null;\r\n          }\r\n\r\n          return (\r\n            slots[`col-${column.name}`]?.() || (\r\n              <MKDataFilterFormItem\r\n                name={column.name}\r\n                v-slots={{ default: slots[`col-${column.name}-content`] }}\r\n              />\r\n            )\r\n          );\r\n        });\r\n      }\r\n\r\n      if (!children) {\r\n        return null;\r\n      }\r\n\r\n      return (\r\n        <div class=\"mk-data-filter-form\">\r\n          <Suspense onResolve={handleResolve}>\r\n            <Fragment>{children}</Fragment>\r\n          </Suspense>\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n"],"names":["defineComponent","name","props","dataFilterFormProps","setup","slots","dataTable","computed","dataFilter","unref","columns","getColumns","filter","column","visible","labelWidth","maxWordCount","Math","max","map","label","length","provide","DATA_FILTER_CONTEXT","reactive","resolve","suspenseResolvePromise","Promise","_resolve","handleResolve","onMounted","watch","_","onCleanup","disposable","afterInitdEvent","on","setReady","dispose","immediate","children","default","_createVNode","MKDataFilterFormItem","Suspense","_Fragment"],"mappings":";;;;AAgBA,MAAeA,iDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAOC;AAAAA,EACPC,MAAMF,OAAO;AAAA,IAAEG;AAAAA,EAAM,GAAG;AACtB,UAAMC,YAAYC,SAAS,MAAML,MAAMI,SAAS;AAChD,UAAME,aAAaD,SAAS,MAAME,MAAMH,SAAS,EAAEE,UAAU;AAE7D,UAAME,UAAUH,SAAS,MACvBE,MAAMD,UAAU,EACbG,WAAY,EACZC,OAAQC,YAAWA,OAAOC,OAAO,CACtC;AAEA,UAAMC,aAAaR,SAAS,MAAM;AAChC,YAAMS,eAAeC,KAAKC,IACxB,GAAGT,MAAMC,OAAO,EAAES,IAAKN,YAAWA,OAAOO,MAAMC,MAAM,CACvD;AAEA,aAAOL,eAAe,KAAK;AAAA,IAC7B,CAAC;AAEDM,YAAQC,qBAAqBC,SAAS;AAAA,MAAEhB;AAAAA,MAAYO;AAAAA,IAAY,CAAA,CAAC;AAEjE,QAAIU,UAA2B;AAC/B,UAAMC,yBAAyB,IAAIC,QAASC,cAAa;AACvDH,gBAAUG;AAAAA,IACZ,CAAC;AAED,UAAMC,gBAAgBA,MAAM;AAC1BJ;AAAAA;AAGFK,cAAU,MAAM;AACdC,YACEzB,WACA,OAAOA,YAAW0B,GAAGC,cAAc;AACjC,cAAMP;AAEN,cAAMQ,aAAa5B,WAAU6B,gBAAgBC,GAAG,MAAM;AACpD9B,UAAAA,WAAUE,WAAW6B;QACvB,CAAC;AAEDJ,kBAAU,MAAM;AACdC,qBAAWI,QAAO;AAAA,QACpB,CAAC;AAAA,MACH,GACA;AAAA,QAAEC,WAAW;AAAA,MAAK,CACpB;AAAA,IACF,CAAC;AAED,WAAO,MAAM;;AACX,UAAI,CAAC9B,MAAMC,OAAO,EAAEW,QAAQ;AAC1B,eAAO;AAAA,MACT;AAEA,UAAImB,YAAgBnC,WAAMoC,YAANpC;AAEpB,UAAI,CAACmC,UAAU;AACbA,mBAAW/B,MAAMC,OAAO,EAAES,IAAKN,YAAW;;AACxC,cAAI,CAACA,OAAOZ,MAAM;AAChB,mBAAO;AAAA,UACT;AAEA,mBACEI,MAAAA,MAAM,OAAOQ,OAAOZ,IAAI,QAAxBI,gBAAAA,IAAAA,gBAA+BqC,YAAAC,sBAAA;AAAA,YAAA,QAErB9B,OAAOZ;AAAAA,aACJ;AAAA,YAAEwC,SAASpC,MAAM,OAAOQ,OAAOZ,IAAI,UAAU;AAAA,UAAE,CAAC;AAAA,QAIjE,CAAC;AAAA,MACH;AAEA,UAAI,CAACuC,UAAU;AACb,eAAO;AAAA,MACT;AAEA,aAAAE,YAAA,OAAA;AAAA,QAAA,SAAA;AAAA,SAAAA,CAAAA,YAAAE,UAAA;AAAA,QAAA,aAEyBf;AAAAA,MAAa,GAAA;AAAA,QAAAY,SAAAA,MAAA,CAAAC,YAAAG,iBACrBL,QAAQ,CAAA,CAAA;AAAA,MAAA,CAAA,CAAA,CAAA;AAAA;EAK7B;AACF,CAAC;"}
+{"version":3,"file":"data-filter-form.js","sources":["../../../../../src/components/data-model/data-filter-form/data-filter-form.tsx"],"sourcesContent":["import {\r\n  Suspense,\r\n  computed,\r\n  defineComponent,\r\n  provide,\r\n  reactive,\r\n  unref,\r\n  watch,\r\n  onMounted,\r\n  Fragment,\r\n} from \"vue\";\r\nimport { dataFilterFormProps } from \"./data-filter-form-options\";\r\nimport { MKDataFilterFormItem } from \"./data-filter-form-item\";\r\nimport { DATA_FILTER_CONTEXT } from \"./token\";\r\nimport { ElForm } from \"element-plus\";\r\n\r\nexport default defineComponent({\r\n  name: \"MKDataFilterForm\",\r\n  props: dataFilterFormProps,\r\n  setup(props, { slots }) {\r\n    const dataTable = computed(() => props.dataTable);\r\n    const dataFilter = computed(() => unref(dataTable).dataFilter);\r\n\r\n    const columns = computed(() =>\r\n      unref(dataFilter)\r\n        .getColumns()\r\n        .filter((column) => column.visible)\r\n    );\r\n\r\n    const labelWidth = computed(() => {\r\n      const maxWordCount = Math.max(\r\n        ...unref(columns).map((column) => column.label.length)\r\n      );\r\n\r\n      return maxWordCount * 14 + 20;\r\n    });\r\n\r\n    provide(DATA_FILTER_CONTEXT, reactive({ dataFilter, labelWidth }));\r\n\r\n    let resolve: Function | null = null;\r\n    const suspenseResolvePromise = new Promise((_resolve) => {\r\n      resolve = _resolve;\r\n    });\r\n\r\n    const handleResolve = () => {\r\n      resolve?.();\r\n    };\r\n\r\n    onMounted(() => {\r\n      watch(\r\n        dataTable,\r\n        async (dataTable, _, onCleanup) => {\r\n          await suspenseResolvePromise;\r\n\r\n          const disposable = dataTable.afterInitdEvent.on(() => {\r\n            dataTable.dataFilter.setReady();\r\n          });\r\n\r\n          onCleanup(() => {\r\n            disposable.dispose();\r\n          });\r\n        },\r\n        { immediate: true }\r\n      );\r\n    });\r\n\r\n    return () => {\r\n      if (!unref(columns).length) {\r\n        return null;\r\n      }\r\n\r\n      let children: any = slots.default?.();\r\n\r\n      if (!children) {\r\n        children = unref(columns).map((column) => {\r\n          if (!column.name) {\r\n            return null;\r\n          }\r\n\r\n          return (\r\n            slots[`col-${column.name}`]?.() || (\r\n              <MKDataFilterFormItem\r\n                name={column.name}\r\n                v-slots={{ default: slots[`col-${column.name}-content`] }}\r\n              />\r\n            )\r\n          );\r\n        });\r\n      }\r\n\r\n      if (!children) {\r\n        return null;\r\n      }\r\n\r\n      return (\r\n        <ElForm class=\"mk-data-filter-form\">\r\n          <Suspense onResolve={handleResolve}>\r\n            <Fragment>{children}</Fragment>\r\n          </Suspense>\r\n        </ElForm>\r\n      );\r\n    };\r\n  },\r\n});\r\n\r\n// export default defineComponent({\r\n//   name: \"MKDataFilterForm\",\r\n//   props: dataFilterFormProps,\r\n//   setup(props, { slots }) {\r\n//     const dataTable = computed(() => props.dataTable);\r\n//     const dataFilter = computed(() => unref(dataTable).dataFilter);\r\n\r\n//     const columns = computed(() =>\r\n//       unref(dataFilter)\r\n//         .getColumns()\r\n//         .filter((column) => column.visible)\r\n//     );\r\n\r\n//     const labelWidth = computed(() => {\r\n//       const maxWordCount = Math.max(\r\n//         ...unref(columns).map((column) => column.label.length)\r\n//       );\r\n\r\n//       return maxWordCount * 14 + 10;\r\n//     });\r\n\r\n//     provide(DATA_FILTER_CONTEXT, reactive({ dataFilter, labelWidth }));\r\n\r\n//     let resolve: Function | null = null;\r\n//     const suspenseResolvePromise = new Promise((_resolve) => {\r\n//       resolve = _resolve;\r\n//     });\r\n\r\n//     const handleResolve = () => {\r\n//       resolve?.();\r\n//     };\r\n\r\n//     onMounted(() => {\r\n//       watch(\r\n//         dataTable,\r\n//         async (dataTable, _, onCleanup) => {\r\n//           await suspenseResolvePromise;\r\n\r\n//           const disposable = dataTable.afterInitdEvent.on(() => {\r\n//             dataTable.dataFilter.setReady();\r\n//           });\r\n\r\n//           onCleanup(() => {\r\n//             disposable.dispose();\r\n//           });\r\n//         },\r\n//         { immediate: true }\r\n//       );\r\n//     });\r\n\r\n//     return () => {\r\n//       if (!unref(columns).length) {\r\n//         return null;\r\n//       }\r\n\r\n//       let children: any = slots.default?.();\r\n\r\n//       if (!children) {\r\n//         children = unref(columns).map((column) => {\r\n//           if (!column.name) {\r\n//             return null;\r\n//           }\r\n\r\n//           return (\r\n//             slots[`col-${column.name}`]?.() || (\r\n//               <MKDataFilterFormItem\r\n//                 name={column.name}\r\n//                 v-slots={{ default: slots[`col-${column.name}-content`] }}\r\n//               />\r\n//             )\r\n//           );\r\n//         });\r\n//       }\r\n\r\n//       if (!children) {\r\n//         return null;\r\n//       }\r\n\r\n//       return (\r\n//         <div class=\"mk-data-filter-form\">\r\n//           <Suspense onResolve={handleResolve}>\r\n//             <Fragment>{children}</Fragment>\r\n//           </Suspense>\r\n//         </div>\r\n//       );\r\n//     };\r\n//   },\r\n// });\r\n"],"names":["defineComponent","name","props","dataFilterFormProps","setup","slots","dataTable","computed","dataFilter","unref","columns","getColumns","filter","column","visible","labelWidth","maxWordCount","Math","max","map","label","length","provide","DATA_FILTER_CONTEXT","reactive","resolve","suspenseResolvePromise","Promise","_resolve","handleResolve","onMounted","watch","_","onCleanup","disposable","afterInitdEvent","on","setReady","dispose","immediate","children","default","_createVNode","MKDataFilterFormItem","ElForm","Suspense","_Fragment"],"mappings":";;;;;AAgBA,MAAeA,iDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAOC;AAAAA,EACPC,MAAMF,OAAO;AAAA,IAAEG;AAAAA,EAAM,GAAG;AACtB,UAAMC,YAAYC,SAAS,MAAML,MAAMI,SAAS;AAChD,UAAME,aAAaD,SAAS,MAAME,MAAMH,SAAS,EAAEE,UAAU;AAE7D,UAAME,UAAUH,SAAS,MACvBE,MAAMD,UAAU,EACbG,WAAY,EACZC,OAAQC,YAAWA,OAAOC,OAAO,CACtC;AAEA,UAAMC,aAAaR,SAAS,MAAM;AAChC,YAAMS,eAAeC,KAAKC,IACxB,GAAGT,MAAMC,OAAO,EAAES,IAAKN,YAAWA,OAAOO,MAAMC,MAAM,CACvD;AAEA,aAAOL,eAAe,KAAK;AAAA,IAC7B,CAAC;AAEDM,YAAQC,qBAAqBC,SAAS;AAAA,MAAEhB;AAAAA,MAAYO;AAAAA,IAAY,CAAA,CAAC;AAEjE,QAAIU,UAA2B;AAC/B,UAAMC,yBAAyB,IAAIC,QAASC,cAAa;AACvDH,gBAAUG;AAAAA,IACZ,CAAC;AAED,UAAMC,gBAAgBA,MAAM;AAC1BJ;AAAAA;AAGFK,cAAU,MAAM;AACdC,YACEzB,WACA,OAAOA,YAAW0B,GAAGC,cAAc;AACjC,cAAMP;AAEN,cAAMQ,aAAa5B,WAAU6B,gBAAgBC,GAAG,MAAM;AACpD9B,UAAAA,WAAUE,WAAW6B;QACvB,CAAC;AAEDJ,kBAAU,MAAM;AACdC,qBAAWI,QAAO;AAAA,QACpB,CAAC;AAAA,MACH,GACA;AAAA,QAAEC,WAAW;AAAA,MAAK,CACpB;AAAA,IACF,CAAC;AAED,WAAO,MAAM;;AACX,UAAI,CAAC9B,MAAMC,OAAO,EAAEW,QAAQ;AAC1B,eAAO;AAAA,MACT;AAEA,UAAImB,YAAgBnC,WAAMoC,YAANpC;AAEpB,UAAI,CAACmC,UAAU;AACbA,mBAAW/B,MAAMC,OAAO,EAAES,IAAKN,YAAW;;AACxC,cAAI,CAACA,OAAOZ,MAAM;AAChB,mBAAO;AAAA,UACT;AAEA,mBACEI,MAAAA,MAAM,OAAOQ,OAAOZ,IAAI,QAAxBI,gBAAAA,IAAAA,gBAA+BqC,YAAAC,sBAAA;AAAA,YAAA,QAErB9B,OAAOZ;AAAAA,aACJ;AAAA,YAAEwC,SAASpC,MAAM,OAAOQ,OAAOZ,IAAI,UAAU;AAAA,UAAE,CAAC;AAAA,QAIjE,CAAC;AAAA,MACH;AAEA,UAAI,CAACuC,UAAU;AACb,eAAO;AAAA,MACT;AAEA,aAAAE,YAAAE,QAAA;AAAA,QAAA,SAAA;AAAA,MAAA,GAAA;AAAA,QAAAH,SAAAA,MAAAC,CAAAA,YAAAG,UAAA;AAAA,UAAA,aAEyBhB;AAAAA,QAAa,GAAA;AAAA,UAAAY,SAAAA,MAAA,CAAAC,YAAAI,iBACrBN,QAAQ,CAAA,CAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAAA,CAAA;AAAA;EAK7B;AACF,CAAC;"}

package/dist/esm/components/data-model/data-filter-form/index.js

@@ -2,8 +2,8 @@ import { withInstall } from "@maketribe/utils";
 import { MKDataFilterFormItem } from "./data-filter-form-item/index.js";
 import DataFilterForm from "./data-filter-form.js";
 import { dataFilterFormProps } from "./data-filter-form-options.js";
-import { dataFilterConditionProps, useDataFilterCondition } from "./composables/use-condition.js";
-import { BETWEEN_OPTION, CONTAIN_OPTION, EQUAL_OPTION, GREATER_THAN_EQUAL_OPTION, GREATER_THAN_OPTION, IN_OPTION, LESS_THAN_EQUAL_OPTION, LESS_THAN_OPTION, NOT_IN_OPTION } from "./operator-options.js";
+import { dataFilterConditionProps } from "./composables/use-condition.js";
+import "./operator-options.js";
 import { MKConditionInput } from "./components/condition-input/index.js";
 import { MKConditionDate } from "./components/condition-date/index.js";
 import { MKConditionNumber } from "./components/condition-number/index.js";
@@ -12,24 +12,14 @@ const MKDataFilterForm = withInstall(DataFilterForm, {
   MKDataFilterFormItem
 });
 export {
-  BETWEEN_OPTION,
-  CONTAIN_OPTION,
-  EQUAL_OPTION,
-  GREATER_THAN_EQUAL_OPTION,
-  GREATER_THAN_OPTION,
-  IN_OPTION,
-  LESS_THAN_EQUAL_OPTION,
-  LESS_THAN_OPTION,
   MKConditionDate,
   MKConditionInput,
   MKConditionNumber,
   MKConditionSelect,
   MKDataFilterForm,
   MKDataFilterFormItem,
-  NOT_IN_OPTION,
   dataFilterConditionProps,
   dataFilterFormProps,
-  MKDataFilterForm as default,
-  useDataFilterCondition
+  MKDataFilterForm as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/data-model/data-filter-form/operator-options.js

@@ -1,49 +1,38 @@
 import { Operator } from "@maketribe/dm";
-const EQUAL_OPTION = {
+({
   value: Operator.EQUAL,
   label: "mk.operator.equal"
-};
-const CONTAIN_OPTION = {
+});
+({
   value: Operator.CONTAIN,
   label: "mk.operator.contain"
-};
-const IN_OPTION = {
+});
+({
   value: Operator.IN,
   label: "mk.operator.in"
-};
-const NOT_IN_OPTION = {
+});
+({
   value: Operator.NOT_IN,
   label: "mk.operator.notIn"
-};
-const LESS_THAN_OPTION = {
+});
+({
   value: Operator.LESS_THAN,
   label: "mk.operator.lessThan"
-};
-const LESS_THAN_EQUAL_OPTION = {
+});
+({
   value: Operator.LESS_THAN_EQUAL,
   label: "mk.operator.lessThanEqual"
-};
-const GREATER_THAN_OPTION = {
+});
+({
   value: Operator.GREATER_THAN,
   label: "mk.operator.greaterThan"
-};
-const GREATER_THAN_EQUAL_OPTION = {
+});
+({
   value: Operator.GREATER_THAN_EQUAL,
   label: "mk.operator.greaterThanEqual"
-};
-const BETWEEN_OPTION = {
+});
+({
   value: Operator.BETWEEN,
   label: "mk.operator.between"
-};
-export {
-  BETWEEN_OPTION,
-  CONTAIN_OPTION,
-  EQUAL_OPTION,
-  GREATER_THAN_EQUAL_OPTION,
-  GREATER_THAN_OPTION,
-  IN_OPTION,
-  LESS_THAN_EQUAL_OPTION,
-  LESS_THAN_OPTION,
-  NOT_IN_OPTION
-};
+});
 //# sourceMappingURL=operator-options.js.map

package/dist/esm/components/data-model/data-filter-form/operator-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"operator-options.js","sources":["../../../../../src/components/data-model/data-filter-form/operator-options.ts"],"sourcesContent":["import { Operator } from \"@maketribe/dm\";\r\n\r\nexport type OperatorOption = { value: Operator; label: string };\r\n\r\nexport const EQUAL_OPTION: OperatorOption = {\r\n  value: Operator.EQUAL,\r\n  label: \"mk.operator.equal\",\r\n};\r\n\r\nexport const CONTAIN_OPTION: OperatorOption = {\r\n  value: Operator.CONTAIN,\r\n  label: \"mk.operator.contain\",\r\n};\r\n\r\nexport const IN_OPTION: OperatorOption = {\r\n  value: Operator.IN,\r\n  label: \"mk.operator.in\",\r\n};\r\n\r\nexport const NOT_IN_OPTION: OperatorOption = {\r\n  value: Operator.NOT_IN,\r\n  label: \"mk.operator.notIn\",\r\n};\r\n\r\nexport const LESS_THAN_OPTION: OperatorOption = {\r\n  value: Operator.LESS_THAN,\r\n  label: \"mk.operator.lessThan\",\r\n};\r\n\r\nexport const LESS_THAN_EQUAL_OPTION: OperatorOption = {\r\n  value: Operator.LESS_THAN_EQUAL,\r\n  label: \"mk.operator.lessThanEqual\",\r\n};\r\n\r\nexport const GREATER_THAN_OPTION: OperatorOption = {\r\n  value: Operator.GREATER_THAN,\r\n  label: \"mk.operator.greaterThan\",\r\n};\r\n\r\nexport const GREATER_THAN_EQUAL_OPTION: OperatorOption = {\r\n  value: Operator.GREATER_THAN_EQUAL,\r\n  label: \"mk.operator.greaterThanEqual\",\r\n};\r\n\r\nexport const BETWEEN_OPTION: OperatorOption = {\r\n  value: Operator.BETWEEN,\r\n  label: \"mk.operator.between\",\r\n};\r\n"],"names":[],"mappings":";AAIO,MAAM,eAA+B;AAAA,EAC1C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAEO,MAAM,iBAAiC;AAAA,EAC5C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAEO,MAAM,YAA4B;AAAA,EACvC,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAEO,MAAM,gBAAgC;AAAA,EAC3C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAEO,MAAM,mBAAmC;AAAA,EAC9C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAEO,MAAM,yBAAyC;AAAA,EACpD,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAEO,MAAM,sBAAsC;AAAA,EACjD,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAEO,MAAM,4BAA4C;AAAA,EACvD,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAEO,MAAM,iBAAiC;AAAA,EAC5C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;"}
+{"version":3,"file":"operator-options.js","sources":["../../../../../src/components/data-model/data-filter-form/operator-options.ts"],"sourcesContent":["import { Operator } from \"@maketribe/dm\";\r\n\r\nexport type OperatorOption = { value: Operator; label: string };\r\n\r\nexport const EQUAL_OPTION: OperatorOption = {\r\n  value: Operator.EQUAL,\r\n  label: \"mk.operator.equal\",\r\n};\r\n\r\nexport const CONTAIN_OPTION: OperatorOption = {\r\n  value: Operator.CONTAIN,\r\n  label: \"mk.operator.contain\",\r\n};\r\n\r\nexport const IN_OPTION: OperatorOption = {\r\n  value: Operator.IN,\r\n  label: \"mk.operator.in\",\r\n};\r\n\r\nexport const NOT_IN_OPTION: OperatorOption = {\r\n  value: Operator.NOT_IN,\r\n  label: \"mk.operator.notIn\",\r\n};\r\n\r\nexport const LESS_THAN_OPTION: OperatorOption = {\r\n  value: Operator.LESS_THAN,\r\n  label: \"mk.operator.lessThan\",\r\n};\r\n\r\nexport const LESS_THAN_EQUAL_OPTION: OperatorOption = {\r\n  value: Operator.LESS_THAN_EQUAL,\r\n  label: \"mk.operator.lessThanEqual\",\r\n};\r\n\r\nexport const GREATER_THAN_OPTION: OperatorOption = {\r\n  value: Operator.GREATER_THAN,\r\n  label: \"mk.operator.greaterThan\",\r\n};\r\n\r\nexport const GREATER_THAN_EQUAL_OPTION: OperatorOption = {\r\n  value: Operator.GREATER_THAN_EQUAL,\r\n  label: \"mk.operator.greaterThanEqual\",\r\n};\r\n\r\nexport const BETWEEN_OPTION: OperatorOption = {\r\n  value: Operator.BETWEEN,\r\n  label: \"mk.operator.between\",\r\n};\r\n"],"names":[],"mappings":";CAI4C;AAAA,EAC1C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAAA,CAE8C;AAAA,EAC5C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAAA,CAEyC;AAAA,EACvC,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAAA,CAE6C;AAAA,EAC3C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAAA,CAEgD;AAAA,EAC9C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAAA,CAEsD;AAAA,EACpD,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAAA,CAEmD;AAAA,EACjD,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAAA,CAEyD;AAAA,EACvD,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;AAAA,CAE8C;AAAA,EAC5C,OAAO,SAAS;AAAA,EAChB,OAAO;AACT;"}

package/dist/esm/components/data-model/data-filter-form/token.js

@@ -1,9 +1,7 @@
 const DATA_FILTER_CONTEXT = Symbol(
   "DATA_FILTER_CONTEXT"
 );
-const DATA_FILTER_ITEM_CONTEXT = Symbol("DATA_FILTER_ITEM_CONTEXT");
 export {
-  DATA_FILTER_CONTEXT,
-  DATA_FILTER_ITEM_CONTEXT
+  DATA_FILTER_CONTEXT
 };
 //# sourceMappingURL=token.js.map

package/dist/esm/components/data-model/data-filter-form/token.js.map

@@ -1 +1 @@
-{"version":3,"file":"token.js","sources":["../../../../../src/components/data-model/data-filter-form/token.ts"],"sourcesContent":["import { InjectionKey } from \"vue\";\r\nimport { Operator, FilterColumn, DataFilter } from \"@maketribe/dm\";\r\nimport { OperatorOption } from \"./operator-options\";\r\n\r\nexport interface DataFilterContext {\r\n  dataFilter: DataFilter;\r\n  labelWidth: number;\r\n}\r\n\r\nexport interface DataFilterItemContext {\r\n  dataFilter: DataFilter;\r\n  dataFilterItem: DataFilterItem;\r\n}\r\n\r\nexport interface DataFilterItem {\r\n  dataFilter: DataFilter;\r\n  column: FilterColumn;\r\n  currentOperator: Operator | null;\r\n  operatorOptions: OperatorOption[];\r\n  setOperator(operator: Operator): void;\r\n  setOperatorOptions(options: OperatorOption[]): void;\r\n  setValue(value: any): void;\r\n  getValue(): any;\r\n}\r\n\r\nexport const DATA_FILTER_CONTEXT: InjectionKey<DataFilterContext> = Symbol(\r\n  \"DATA_FILTER_CONTEXT\"\r\n);\r\nexport const DATA_FILTER_ITEM_CONTEXT: InjectionKey<DataFilterItemContext> =\r\n  Symbol(\"DATA_FILTER_ITEM_CONTEXT\");\r\n\r\nexport const DATA_FILTER_QUERY_NAME: string = \"dataTableParams\";\r\n"],"names":[],"mappings":"AAyBO,MAAM,sBAAuD;AAAA,EAClE;AACF;AACa,MAAA,2BACX,OAAO,0BAA0B;"}
+{"version":3,"file":"token.js","sources":["../../../../../src/components/data-model/data-filter-form/token.ts"],"sourcesContent":["import { InjectionKey } from \"vue\";\r\nimport { Operator, FilterColumn, DataFilter } from \"@maketribe/dm\";\r\nimport { OperatorOption } from \"./operator-options\";\r\n\r\nexport interface DataFilterContext {\r\n  dataFilter: DataFilter;\r\n  labelWidth: number;\r\n}\r\n\r\nexport interface DataFilterItemContext {\r\n  dataFilter: DataFilter;\r\n  // dataFilterItem: DataFilterItem;\r\n}\r\n\r\n// export interface DataFilterItem {\r\n//   dataFilter: DataFilter;\r\n//   column: FilterColumn;\r\n//   currentOperator: Operator | null;\r\n//   operatorOptions: OperatorOption[];\r\n//   setOperator(operator: Operator): void;\r\n//   setOperatorOptions(options: OperatorOption[]): void;\r\n//   setValue(value: any): void;\r\n//   getValue(): any;\r\n// }\r\n\r\nexport const DATA_FILTER_CONTEXT: InjectionKey<DataFilterContext> = Symbol(\r\n  \"DATA_FILTER_CONTEXT\"\r\n);\r\nexport const DATA_FILTER_ITEM_CONTEXT: InjectionKey<DataFilterItemContext> =\r\n  Symbol(\"DATA_FILTER_ITEM_CONTEXT\");\r\n\r\nexport const DATA_FILTER_QUERY_NAME: string = \"dataTableParams\";\r\n"],"names":[],"mappings":"AAyBO,MAAM,sBAAuD;AAAA,EAClE;AACF;"}

package/dist/esm/components/data-model/data-table/components/header-components/table-filter/table-filter.js

@@ -1,8 +1,9 @@
 import { defineComponent, ref, inject, computed, unref, watch, createVNode } from "vue";
-import { ElInput, ElButton } from "element-plus";
+import { ElTooltip, ElInput, ElButton } from "element-plus";
 import { Search } from "@element-plus/icons-vue";
+import { debounce } from "lodash-es";
+import { isWhereFilter } from "@maketribe/dm";
 import { DATA_TABLE_CONTEXT_KEY } from "../../../token.js";
-import { MKDataFilterPopover } from "../../../../data-filter-popover/index.js";
 import { MKSvgIcon } from "../../../../../basic/svg-icon/index.js";
 import "../../../../../basic/button/button-options.js";
 import "../../../../../basic/config-provider/index.js";
@@ -25,12 +26,13 @@ import "../../../../../basic/upload-file/upload-file-options.js";
 import "../../../../../basic/doc-editor/index.js";
 import "../../../../../basic/copy-container/index.js";
 import "../../../../../basic/image-cropper/index.js";
-import { debounce } from "lodash-es";
-import { isWhereFilter } from "@maketribe/dm";
+import { MKDataFilterDrawer } from "../../../../data-filter-drawer/index.js";
+import { MKDataFilterForm } from "../../../../data-filter-form/index.js";
 const TableFilter = /* @__PURE__ */ defineComponent({
   name: "MKTableFilter",
   setup() {
     const search = ref("");
+    const isShowDrawer = ref(false);
     const dataTableContext = inject(DATA_TABLE_CONTEXT_KEY);
     const dataTable = computed(() => dataTableContext.dataTable);
     const dataTableInitd = computed(() => {
@@ -76,6 +78,9 @@ const TableFilter = /* @__PURE__ */ defineComponent({
       const target = event.target;
       target.removeEventListener("input", debounceSearch);
     };
+    const handleShowDrawer = () => {
+      isShowDrawer.value = true;
+    };
     return () => {
       if (!unref(dataTableInitd)) {
         return null;
@@ -86,30 +91,48 @@ const TableFilter = /* @__PURE__ */ defineComponent({
       }
       let searchInputVNode = null;
       if (unref(searchFilterColumns).length) {
-        searchInputVNode = createVNode(ElInput, {
-          "prefixIcon": Search,
-          "class": "mk-table-filter__search",
-          "modelValue": unref(search),
-          "onUpdate:modelValue": (v) => search.value = v,
-          "onKeydown": handleSearchKeydown,
-          "placeholder": unref(searchPlaceholder),
-          "onFocus": handleSearchFocus,
-          "onBlur": handleSearchBlur,
-          "onClear": handleSearch,
-          "clearable": true
-        }, null);
+        searchInputVNode = createVNode(ElTooltip, {
+          "content": unref(searchPlaceholder),
+          "effect": "dark",
+          "placement": "top"
+        }, {
+          default: () => [createVNode(ElInput, {
+            "prefixIcon": Search,
+            "class": "mk-table-filter__search",
+            "modelValue": unref(search),
+            "onUpdate:modelValue": (v) => search.value = v,
+            "onKeydown": handleSearchKeydown,
+            "placeholder": unref(searchPlaceholder),
+            "onFocus": handleSearchFocus,
+            "onBlur": handleSearchBlur,
+            "onClear": handleSearch,
+            "clearable": true
+          }, null)]
+        });
       }
       return createVNode("div", {
         "class": "mk-table-filter"
-      }, [searchInputVNode, createVNode(MKDataFilterPopover, {
-        "dataTable": _dataTable
+      }, [searchInputVNode, createVNode(ElTooltip, {
+        "content": "筛选",
+        "effect": "dark",
+        "placement": "top"
       }, {
-        default: () => [createVNode(ElButton, null, {
+        default: () => [createVNode(ElButton, {
+          "onClick": handleShowDrawer
+        }, {
           default: () => [createVNode(MKSvgIcon, {
             "iconClass": "Filter"
           }, null)]
         })]
-      })]);
+      }), createVNode(MKDataFilterDrawer, {
+        "visible": unref(isShowDrawer),
+        "onUpdate:visible": (v) => isShowDrawer.value = v,
+        "dataTable": _dataTable
+      }, null), createVNode("div", {
+        "class": "mk-table-filter__hidden"
+      }, [createVNode(MKDataFilterForm, {
+        "dataTable": _dataTable
+      }, null)])]);
     };
   }
 });