@maketribe/ms-app 4.0.0-beta.1 → 4.0.0-beta.11

package/dist/cjs/index-BGQ0lzSV.cjs

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@maketribe/utils");
+const vue = require("vue");
+const index = require("./index-Hn4CQWPI.cjs");
+const dm = require("@maketribe/dm");
+const elementPlus = require("element-plus");
+const locale = require("@maketribe/locale");
+const formDetailProps = utils.buildProps({
+  modelValue: {
+    type: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  column: { type: dm.FormDetailColumn, required: true },
+  formWidth: {
+    type: String,
+    default: "400px"
+  }
+});
+const formDetailEmits = {
+  "update:model-value": (v) => true
+};
+const _hoisted_1 = { class: "mk-form-detail" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "form-detail",
+  props: formDetailProps,
+  emits: formDetailEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const detailTable = vue.computed(() => props.column.detailTable);
+    const detailForm = vue.computed(() => props.column.detailForm);
+    const { value } = index.useFormItem();
+    vue.watch(
+      vue.computed(() => vue.unref(value)),
+      (value2) => {
+        const _detailTable = vue.unref(detailTable);
+        value2 = Array.isArray(value2) ? value2 : [];
+        _detailTable.setList(
+          value2.map((item) => _detailTable.formatItem(item))
+        );
+      }
+    );
+    const isShowDataForm = vue.ref(false);
+    vue.watch(
+      detailTable,
+      (dataTable, _, onCleanup) => {
+        const addRecordDisposable = dataTable.addRecordEvent.on(async ({ item }) => {
+          const _dataForm = vue.unref(detailForm);
+          if (!_dataForm) {
+            console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+            return;
+          }
+          isShowDataForm.value = true;
+          _dataForm.addRecord(item);
+        });
+        const editRecordDisposable = dataTable.editRecordEvent.on(
+          async ({ item }) => {
+            const _dataForm = vue.unref(detailForm);
+            if (!_dataForm) {
+              console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+              return;
+            }
+            isShowDataForm.value = true;
+            try {
+              const response = await _dataForm.editRecord(item);
+              if (response.data.code !== 200) {
+                dm.Messager.error({ message: response.data.msg });
+                isShowDataForm.value = false;
+                return;
+              }
+            } catch (e) {
+              console.error(e);
+              isShowDataForm.value = false;
+            }
+          }
+        );
+        onCleanup(() => {
+          addRecordDisposable.dispose();
+          editRecordDisposable.dispose();
+        });
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      detailForm,
+      (dataForm, _, onCleanup) => {
+        const submittedDisposable = dataForm.submittedEvent.on(() => {
+          var _a;
+          isShowDataForm.value = false;
+          (_a = vue.unref(detailTable)) == null ? void 0 : _a.load();
+        });
+        const cancelDisposable = dataForm.cancelEvent.on(() => {
+          isShowDataForm.value = false;
+        });
+        onCleanup(() => {
+          submittedDisposable.dispose();
+          cancelDisposable.dispose();
+        });
+      },
+      { immediate: true }
+    );
+    const isUpdateForm = vue.computed(() => vue.unref(detailForm).getDataFormType() == dm.DataFormType.UPDATE);
+    const handleFormSave = async () => {
+      var _a;
+      await ((_a = vue.unref(detailForm)) == null ? void 0 : _a.simpleSubmit());
+    };
+    const handleFormCancel = () => {
+      vue.unref(detailForm).cancel();
+    };
+    return (_ctx, _cache) => {
+      const _component_ElDrawer = vue.resolveComponent("ElDrawer");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(index.MKDataTable), {
+          dataTable: detailTable.value,
+          autoLoad: false
+        }, null, 8, ["dataTable"]),
+        vue.createVNode(_component_ElDrawer, {
+          modelValue: isShowDataForm.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isShowDataForm.value = $event),
+          "append-to-body": "",
+          title: _ctx.column.label
+        }, {
+          footer: vue.withCtx(() => [
+            vue.createVNode(vue.unref(elementPlus.ElButton), { onClick: handleFormCancel }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(vue.unref(locale.I18n).instance.translate("mk.dataForm.cancelButton")), 1)
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              type: "primary",
+              onClick: handleFormSave
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(isUpdateForm.value ? vue.unref(locale.I18n).instance.translate("mk.dataForm.saveButton") : vue.unref(locale.I18n).instance.translate("mk.dataForm.addButton")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(index.DataForm, {
+              dataForm: detailForm.value,
+              autoLoad: false
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(index.MKForm), { labelPosition: "top" })
+              ]),
+              _: 1
+            }, 8, ["dataForm"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])
+      ]);
+    };
+  }
+});
+const FormDetail = /* @__PURE__ */ index._export_sfc(_sfc_main, [["__scopeId", "data-v-7c09b537"]]);
+const MKFormDetail = utils.withInstall(FormDetail);
+exports.MKFormDetail = MKFormDetail;
+exports.default = MKFormDetail;
+exports.formDetailEmits = formDetailEmits;
+exports.formDetailProps = formDetailProps;
+//# sourceMappingURL=index-BGQ0lzSV.cjs.map

package/dist/cjs/index-BGQ0lzSV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BGQ0lzSV.cjs","sources":["../../src/components/data-model/data-form/components/form-detail/form-detail-options.ts","../../src/components/data-model/data-form/components/form-detail/form-detail.vue","../../src/components/data-model/data-form/components/form-detail/index.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\nimport { buildProps } from \"@maketribe/utils\";\nimport { FormDetailColumn } from \"@maketribe/dm\";\n\nexport const formDetailProps = buildProps({\n  modelValue: {\n    type: null,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  column: { type: FormDetailColumn, required: true },\n  formWidth: {\n    type: String,\n    default: \"400px\",\n  },\n} as const);\n\nexport type FormDetailProps = ExtractPropTypes<typeof formDetailProps>;\n\nexport const formDetailEmits = {\n  \"update:model-value\": (v: any) => true,\n};\n\nexport type FormDetailEmits = ExtractPropTypes<typeof formDetailEmits>;\n","<script setup lang=\"ts\">\nimport {computed, ref, unref, watch} from \"vue\";\nimport {MKDataTable} from \"../../../data-table\";\nimport DataForm from \"../../data-form.vue\";\nimport {formDetailEmits, formDetailProps} from \"./form-detail-options\";\nimport {useFormItem} from \"../../composables\";\nimport {MKForm} from '../../views'\nimport {ElButton, ElEmpty} from \"element-plus\";\nimport { I18n } from \"@maketribe/locale\";\nimport {DataFormType, Messager} from \"@maketribe/dm\";\n\nconst props = defineProps(formDetailProps);\n\nconst emit = defineEmits(formDetailEmits)\n\nconst detailTable = computed(() => props.column.detailTable);\nconst detailForm = computed(() => props.column.detailForm!);\n\nconst {value} = useFormItem();\n\nwatch(\n  computed(() => unref(value)),\n  (value) => {\n    const _detailTable = unref(detailTable);\n\n    value = Array.isArray(value) ? value : [];\n\n    _detailTable.setList(\n      value.map((item: any) => _detailTable.formatItem(item))\n    );\n  }\n);\n\nconst isShowDataForm = ref(false);\n\nwatch(\n  detailTable,\n  (dataTable, _, onCleanup) => {\n\n    const addRecordDisposable = dataTable.addRecordEvent.on(async ({item}) => {\n      const _dataForm = unref(detailForm);\n\n      if (!_dataForm) {\n        console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);\n        return;\n      }\n\n      isShowDataForm.value = true;\n\n      _dataForm.addRecord(item);\n    });\n\n    const editRecordDisposable = dataTable.editRecordEvent.on(\n      async ({item}) => {\n        const _dataForm = unref(detailForm);\n\n        if (!_dataForm) {\n          console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);\n          return;\n        }\n\n        isShowDataForm.value = true;\n\n        try {\n          const response = await _dataForm.editRecord(item);\n\n          if (response.data.code !== 200) {\n            Messager.error({message: response.data.msg});\n            isShowDataForm.value = false;\n            return;\n          }\n        } catch (e) {\n          console.error(e);\n          isShowDataForm.value = false;\n        }\n      }\n    );\n\n    onCleanup(() => {\n      addRecordDisposable.dispose();\n      editRecordDisposable.dispose();\n    });\n  },\n  {immediate: true}\n);\n\nwatch(\n  detailForm,\n  (dataForm, _, onCleanup) => {\n    const submittedDisposable = dataForm.submittedEvent.on(() => {\n      isShowDataForm.value = false;\n\n      unref(detailTable)?.load();\n    });\n\n    const cancelDisposable = dataForm.cancelEvent.on(() => {\n      isShowDataForm.value = false;\n    });\n\n    onCleanup(() => {\n      submittedDisposable.dispose();\n      cancelDisposable.dispose();\n    });\n  },\n  {immediate: true}\n);\n\nconst isUpdateForm = computed(()=> unref(detailForm).getDataFormType() == DataFormType.UPDATE)\n\nconst handleFormSave = async () => {\n  await unref(detailForm)?.simpleSubmit();\n};\n\nconst handleFormCancel = () => {\n  unref(detailForm).cancel();\n};\n\n\n</script>\n\n<template>\n  <div class=\"mk-form-detail\">\n    <MKDataTable :dataTable=\"detailTable\" :autoLoad=\"false\" />\n    <ElDrawer v-model=\"isShowDataForm\" append-to-body  :title=\"column.label\">\n      <DataForm :dataForm=\"detailForm\" :autoLoad=\"false\" >\n        <MKForm labelPosition=\"top\" />\n      </DataForm>\n      <template #footer>\n        <ElButton @click=\"handleFormCancel\">\n          {{I18n.instance.translate(\"mk.dataForm.cancelButton\")}}\n        </ElButton>\n        <ElButton type=\"primary\" @click=\"handleFormSave\">\n          {{ isUpdateForm ? I18n.instance.translate(\"mk.dataForm.saveButton\") : I18n.instance.translate(\"mk.dataForm.addButton\")}}\n        </ElButton>\n      </template>\n\n<!--      <template #empty>-->\n<!--        <ElEmpty :image-size=\"100\"/>-->\n<!--      </template>-->\n    </ElDrawer>\n  </div>\n</template>\n<style scoped lang=\"scss\">\n.mk-form-detail {\n  width: 100%;\n  min-height: 200px;\n\n  .mk-data-table {\n    height: 100%;\n  }\n\n  .mk-data-table-search {\n    display: none;\n  }\n\n  .el-table {\n    flex: 1;\n  }\n\n  @at-root {\n    &__drawer {\n      .el-card {\n        border: none;\n\n        &__body {\n          --el-card-padding: 0px;\n        }\n      }\n    }\n  }\n}\n\n</style>\n","import { withInstall } from \"@maketribe/utils\";\nimport FormDetail from \"./form-detail.vue\";\n\nexport const MKFormDetail = withInstall(FormDetail);\nexport default MKFormDetail;\n\nexport * from \"./form-detail-options\";\n"],"names":["buildProps","FormDetailColumn","computed","useFormItem","watch","unref","value","ref","Messager","DataFormType","withInstall"],"mappings":"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"}

package/dist/cjs/index-BIjPOfJP.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const utils = require("@maketribe/utils");
+const index = require("./index-Hn4CQWPI.cjs");
+require("vue-router");
+require("@maketribe/dm");
+require("element-plus");
+require("@maketribe/request");
+require("@maketribe/locale");
+require("lodash-es");
+require("vue-cropper");
+require("@lexical/overflow");
+require("@lexical/text");
+require("@lexical/utils");
+require("lexical");
+require("@lexical/selection");
+require("@lexical/link");
+require("@lexical/rich-text");
+require("@element-plus/icons-vue");
+require("@lexical/history");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+const index$1 = require("./index-DhE-x3xX.cjs");
+const columnObjectMappingTextProps = utils.buildProps({
+  ...index.columnProps,
+  mapping: { type: Object, required: true }
+});
+const ColumnObjectMappingText = /* @__PURE__ */ vue.defineComponent({
+  name: "MKColumnObjectMappingText",
+  props: columnObjectMappingTextProps,
+  setup(props) {
+    const formatValue = (value) => props.mapping[value] ?? value;
+    return () => {
+      return vue.createVNode(index$1.MKColumnText, {
+        "row": props.row,
+        "column": props.column,
+        "index": props.index,
+        "formatValue": formatValue
+      }, null);
+    };
+  }
+});
+const MKColumnObjectMappingText = ColumnObjectMappingText;
+exports.MKColumnObjectMappingText = MKColumnObjectMappingText;
+exports.columnObjectMappingTextProps = columnObjectMappingTextProps;
+exports.default = MKColumnObjectMappingText;
+//# sourceMappingURL=index-BIjPOfJP.cjs.map

package/dist/cjs/index-BIjPOfJP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BIjPOfJP.cjs","sources":["../../src/components/data-model/data-table/components/column-object-mapping-text/column-object-mapping-text-options.ts","../../src/components/data-model/data-table/components/column-object-mapping-text/column-object-mapping-text.tsx","../../src/components/data-model/data-table/components/column-object-mapping-text/index.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\nimport { buildProps } from \"@maketribe/utils\";\nimport { columnProps } from \"../../composables\";\n\nexport const columnObjectMappingTextProps = buildProps({\n  ...columnProps,\n  mapping: { type: Object, required: true },\n} as const);\n\nexport type ColumnObjectMappingTextProps = ExtractPropTypes<\n  typeof columnObjectMappingTextProps\n>;\n","import { defineComponent } from \"vue\";\nimport { columnObjectMappingTextProps } from \"./column-object-mapping-text-options\";\nimport ColumnText from \"../column-text\";\n\nexport default defineComponent({\n  name: \"MKColumnObjectMappingText\",\n  props: columnObjectMappingTextProps,\n  setup(props) {\n    const formatValue = (value: any) => props.mapping[value] ?? value;\n\n    return () => {\n      return (\n        <ColumnText\n          row={props.row}\n          column={props.column}\n          index={props.index}\n          formatValue={formatValue}\n        />\n      );\n    };\n  },\n});\n","import ColumnObjectMappingText from \"./column-object-mapping-text\";\n\nexport const MKColumnObjectMappingText = ColumnObjectMappingText;\nexport default MKColumnObjectMappingText;\n\nexport * from \"./column-object-mapping-text-options\";\n"],"names":["buildProps","columnProps","defineComponent","name","props","columnObjectMappingTextProps","setup","formatValue","value","mapping","_createVNode","ColumnText","row","column","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,+BAA+BA,MAAAA,WAAW;AAAA,EACrD,GAAGC,MAAA;AAAA,EACH,SAAS,EAAE,MAAM,QAAQ,UAAU,KAAK;AAC1C,CAAU;ACHV,MAAeC,8DAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAOC;AAAAA,EACPC,MAAMF,OAAO;AACX,UAAMG,cAAeC,WAAeJ,MAAMK,QAAQD,KAAK,KAAKA;AAE5D,WAAO,MAAM;AACX,aAAAE,IAAAA,YAAAC,QAAAA,cAAA;AAAA,QAAA,OAESP,MAAMQ;AAAAA,QAAG,UACNR,MAAMS;AAAAA,QAAM,SACbT,MAAMU;AAAAA,QAAK,eACLP;AAAAA,MAAW,GAAA,IAAA;AAAA;EAIhC;AACF,CAAC;ACnBM,MAAM,4BAA4B;;;;"}

package/dist/cjs/index-BUtqH0LZ.cjs

@@ -0,0 +1,409 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const iconsVue = require("@element-plus/icons-vue");
+const lodashEs = require("lodash-es");
+const dm = require("@maketribe/dm");
+const index = require("./index-Hn4CQWPI.cjs");
+require("vue-cropper");
+require("@lexical/overflow");
+require("@lexical/text");
+require("@lexical/utils");
+require("lexical");
+require("@lexical/selection");
+require("@lexical/link");
+require("@lexical/rich-text");
+require("@lexical/history");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+const utils = require("@maketribe/utils");
+require("vue-router");
+require("@maketribe/request");
+require("@maketribe/locale");
+require("./use-condition-BsNGbgF4.cjs");
+require("./index-Cj3GY0CU.cjs");
+require("./index-RjnvS-h4.cjs");
+require("./index-D_CB0k2e.cjs");
+require("./index-B_1yE8ac.cjs");
+const dataFilterFormItemProps = utils.buildProps({
+  name: { type: String, required: true },
+  label: { type: String }
+});
+const DATA_FILTER_CONTEXT = Symbol(
+  "DATA_FILTER_CONTEXT"
+);
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const DataFilterFormItem = /* @__PURE__ */ vue.defineComponent({
+  name: "MKDataFilterFormItem",
+  props: dataFilterFormItemProps,
+  setup(props, {
+    slots
+  }) {
+    const dataFilterContext = vue.inject(DATA_FILTER_CONTEXT);
+    const dataFilter = vue.computed(() => dataFilterContext.dataFilter);
+    let _filterColumn = null;
+    const createFilterColumn = () => {
+      _filterColumn = vue.reactive(new dm.FilterColumn({
+        name: props.name,
+        label: props.label
+      }));
+      vue.unref(dataFilter).addColumn(_filterColumn);
+      return _filterColumn;
+    };
+    const filterColumn = vue.computed(() => {
+      const existingColumn = vue.unref(dataFilter).getColumn(props.name) ?? null;
+      if (existingColumn) {
+        return existingColumn;
+      }
+      if (!_filterColumn) {
+        _filterColumn = createFilterColumn();
+      }
+      return _filterColumn;
+    });
+    const value = vue.computed({
+      get: () => vue.unref(dataFilter).getParam(vue.unref(filterColumn).name),
+      set: (v) => vue.unref(dataFilter).setParam(vue.unref(filterColumn).name, v)
+    });
+    const {
+      component,
+      componentProps,
+      componentInfo
+    } = index.useFilterColumnComponent(filterColumn, dataFilter);
+    vue.watch(componentInfo, (componentInfo2) => {
+      const _dataFilter = vue.unref(dataFilter);
+      if (dm.isWhereFilter(_dataFilter)) {
+        _dataFilter.setParamOperator(vue.unref(filterColumn).name, componentInfo2.defaultOperator);
+      }
+    }, {
+      immediate: true
+    });
+    vue.onBeforeUnmount(() => {
+      const _dataFilter = vue.unref(dataFilter);
+      if (dm.isWhereFilter(_dataFilter)) {
+        _dataFilter.deleteParamOperator(vue.unref(filterColumn).name);
+      }
+      _dataFilter.deleteParam(vue.unref(filterColumn).name);
+    });
+    return () => {
+      var _a;
+      const _filterColumn2 = vue.unref(filterColumn);
+      if (!_filterColumn2) {
+        return null;
+      }
+      let children = (_a = slots.default) == null ? void 0 : _a.call(slots);
+      if (!children && vue.unref(component)) {
+        const FilterColumnComponent = vue.toRaw(vue.unref(component));
+        children = vue.createVNode(FilterColumnComponent, vue.mergeProps(vue.unref(componentProps), {
+          "modelValue": vue.unref(value),
+          "onUpdate:modelValue": (v) => value.value = v,
+          "column": vue.unref(filterColumn)
+        }), null);
+      }
+      const labelWidth = vue.computed(() => dataFilterContext.labelWidth);
+      return vue.createVNode(elementPlus.ElFormItem, {
+        "prop": _filterColumn2.name,
+        "label": _filterColumn2.label,
+        "labelWidth": vue.unref(labelWidth)
+      }, _isSlot(children) ? children : {
+        default: () => [children]
+      });
+    };
+  }
+});
+const MKDataFilterFormItem = utils.withInstall(DataFilterFormItem);
+const dataFilterFormProps = utils.buildProps({
+  // dataFilter: { type: DataFilter, required: true },
+  dataTable: { type: dm.DataTable, required: true }
+});
+const DataFilterForm = /* @__PURE__ */ vue.defineComponent({
+  name: "MKDataFilterForm",
+  props: dataFilterFormProps,
+  setup(props, {
+    slots
+  }) {
+    const dataTable = vue.computed(() => props.dataTable);
+    const dataFilter = vue.computed(() => vue.unref(dataTable).dataFilter);
+    const columns = vue.computed(() => vue.unref(dataFilter).getColumns().filter((column) => column.visible));
+    const labelWidth = vue.computed(() => {
+      const maxWordCount = Math.max(...vue.unref(columns).map((column) => column.label.length));
+      return maxWordCount * 14 + 20;
+    });
+    vue.provide(DATA_FILTER_CONTEXT, vue.reactive({
+      dataFilter,
+      labelWidth
+    }));
+    let resolve = null;
+    const suspenseResolvePromise = new Promise((_resolve) => {
+      resolve = _resolve;
+    });
+    const handleResolve = () => {
+      resolve == null ? void 0 : resolve();
+    };
+    vue.onMounted(() => {
+      vue.watch(dataTable, async (dataTable2, _, onCleanup) => {
+        await suspenseResolvePromise;
+        const disposable = dataTable2.afterInitdEvent.on(() => {
+          dataTable2.dataFilter.setReady();
+        });
+        onCleanup(() => {
+          disposable.dispose();
+        });
+      }, {
+        immediate: true
+      });
+    });
+    return () => {
+      var _a;
+      if (!vue.unref(columns).length) {
+        return null;
+      }
+      let children = (_a = slots.default) == null ? void 0 : _a.call(slots);
+      if (!children) {
+        children = vue.unref(columns).map((column) => {
+          var _a2;
+          if (!column.name) {
+            return null;
+          }
+          return ((_a2 = slots[`col-${column.name}`]) == null ? void 0 : _a2.call(slots)) || vue.createVNode(MKDataFilterFormItem, {
+            "name": column.name
+          }, {
+            default: slots[`col-${column.name}-content`]
+          });
+        });
+      }
+      if (!children) {
+        return null;
+      }
+      return vue.createVNode(elementPlus.ElForm, {
+        "class": "mk-data-filter-form"
+      }, {
+        default: () => [vue.createVNode(vue.Suspense, {
+          "onResolve": handleResolve
+        }, {
+          default: () => [vue.createVNode(vue.Fragment, null, [children])]
+        })]
+      });
+    };
+  }
+});
+({
+  value: dm.Operator.EQUAL,
+  label: "mk.operator.equal"
+});
+({
+  value: dm.Operator.CONTAIN,
+  label: "mk.operator.contain"
+});
+({
+  value: dm.Operator.IN,
+  label: "mk.operator.in"
+});
+({
+  value: dm.Operator.NOT_IN,
+  label: "mk.operator.notIn"
+});
+({
+  value: dm.Operator.LESS_THAN,
+  label: "mk.operator.lessThan"
+});
+({
+  value: dm.Operator.LESS_THAN_EQUAL,
+  label: "mk.operator.lessThanEqual"
+});
+({
+  value: dm.Operator.GREATER_THAN,
+  label: "mk.operator.greaterThan"
+});
+({
+  value: dm.Operator.GREATER_THAN_EQUAL,
+  label: "mk.operator.greaterThanEqual"
+});
+({
+  value: dm.Operator.BETWEEN,
+  label: "mk.operator.between"
+});
+const MKDataFilterForm = utils.withInstall(DataFilterForm, {
+  MKDataFilterFormItem
+});
+const dataFilterDrawerProps = utils.buildProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  dataTable: {
+    type: dm.DataTable,
+    required: true
+  }
+});
+const dataFilterDrawerEmits = {
+  "update:visible": (visible) => true
+};
+const DataFilterDrawer = /* @__PURE__ */ vue.defineComponent({
+  name: "MKDataFilterDrawer",
+  props: dataFilterDrawerProps,
+  emits: dataFilterDrawerEmits,
+  setup(props, {
+    emit
+  }) {
+    const visible = vue.computed({
+      get: () => props.visible,
+      set: (v) => emit("update:visible", v)
+    });
+    const handleCancelClick = () => {
+      visible.value = false;
+    };
+    const handleResetClick = () => {
+      visible.value = false;
+      const dataTable = props.dataTable;
+      const dataFilter = props.dataTable.dataFilter;
+      dataFilter.reset();
+      dataFilter.beforeSearchEvent.emit();
+      dataTable.load();
+    };
+    const handleConfirmClick = () => {
+      visible.value = false;
+      const dataTable = props.dataTable;
+      const dataFilter = props.dataTable.dataFilter;
+      dataFilter.beforeSearchEvent.emit();
+      dataTable.load();
+    };
+    return () => {
+      return vue.createVNode(elementPlus.ElDrawer, {
+        "title": "筛选器",
+        "modelValue": vue.unref(visible),
+        "onUpdate:modelValue": (v) => visible.value = v
+      }, {
+        default: () => vue.createVNode(MKDataFilterForm, vue.mergeProps({
+          "class": "overflow-hidden",
+          "dataTable": props.dataTable
+        }, {
+          labelPosition: "top"
+        }), null),
+        footer: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(elementPlus.ElButton, {
+          "onClick": handleCancelClick
+        }, {
+          default: () => [vue.createTextVNode("取消")]
+        }), vue.createVNode(elementPlus.ElButton, {
+          "onClick": handleResetClick
+        }, {
+          default: () => [vue.createTextVNode("重置")]
+        }), vue.createVNode(elementPlus.ElButton, {
+          "type": "primary",
+          "onClick": handleConfirmClick
+        }, {
+          default: () => [vue.createTextVNode("查询")]
+        })])
+      });
+    };
+  }
+});
+const MKDataFilterDrawer = utils.withInstall(DataFilterDrawer);
+const TableFilter = /* @__PURE__ */ vue.defineComponent({
+  name: "MKTableFilter",
+  setup() {
+    const search = vue.ref("");
+    const isShowDrawer = vue.ref(false);
+    const dataTableContext = vue.inject(index.DATA_TABLE_CONTEXT_KEY);
+    const dataTable = vue.computed(() => dataTableContext.dataTable);
+    const dataTableInitd = vue.computed(() => {
+      var _a;
+      return ((_a = vue.unref(dataTable)) == null ? void 0 : _a.initd) ?? false;
+    });
+    const searchFilterColumns = vue.computed(() => vue.unref(dataTable).dataFilter.getColumns().filter((column) => column.search));
+    const searchPlaceholder = vue.computed(() => `通过${vue.unref(searchFilterColumns).map((column) => column.label).join("、")}搜索`);
+    vue.watch(dataTable, (dataTable2, _, onCleanup) => {
+      onCleanup(() => {
+        const dataFilter = dataTable2.dataFilter;
+        if (dm.isWhereFilter(dataFilter)) {
+          dataFilter.getSearchGroup().clear();
+        }
+      });
+    }, {
+      immediate: true
+    });
+    const handleSearch = () => {
+      debounceSearch.cancel();
+      const dataFilter = vue.unref(dataTable).dataFilter;
+      if (dm.isWhereFilter(dataFilter)) {
+        const searchGroup = dataFilter.getSearchGroup();
+        searchGroup.clear();
+        const searchValue = vue.unref(search);
+        for (const searchFilterColumn of vue.unref(searchFilterColumns)) {
+          searchGroup.addOrCondition(searchFilterColumn.name, "like", `%${searchValue}%`);
+        }
+      }
+      vue.unref(dataTable).load();
+    };
+    const debounceSearch = lodashEs.debounce(handleSearch, 1e3);
+    const handleSearchKeydown = (event) => {
+      if (event.key === "Enter") {
+        handleSearch();
+      }
+    };
+    const handleSearchFocus = (event) => {
+      const target = event.target;
+      target.addEventListener("input", debounceSearch);
+    };
+    const handleSearchBlur = (event) => {
+      const target = event.target;
+      target.removeEventListener("input", debounceSearch);
+    };
+    const handleShowDrawer = () => {
+      isShowDrawer.value = true;
+    };
+    return () => {
+      if (!vue.unref(dataTableInitd)) {
+        return null;
+      }
+      const _dataTable = vue.unref(dataTable);
+      if (_dataTable.dataFilter.getColumns().length === 0) {
+        return null;
+      }
+      let searchInputVNode = null;
+      if (vue.unref(searchFilterColumns).length) {
+        searchInputVNode = vue.createVNode(elementPlus.ElInput, {
+          "prefixIcon": iconsVue.Search,
+          "class": "mk-table-filter__search",
+          "modelValue": vue.unref(search),
+          "onUpdate:modelValue": (v) => search.value = v,
+          "onKeydown": handleSearchKeydown,
+          "placeholder": vue.unref(searchPlaceholder),
+          "onFocus": handleSearchFocus,
+          "onBlur": handleSearchBlur,
+          "onClear": handleSearch,
+          "clearable": true
+        }, null);
+      }
+      return vue.createVNode("div", {
+        "class": "mk-table-filter"
+      }, [searchInputVNode, vue.createVNode(elementPlus.ElTooltip, {
+        "content": "筛选",
+        "effect": "dark",
+        "placement": "top"
+      }, {
+        default: () => [vue.createVNode(elementPlus.ElButton, {
+          "onClick": handleShowDrawer
+        }, {
+          default: () => [vue.createVNode(index.MKSvgIcon, {
+            "name": "iconoir:filter"
+          }, null)]
+        })]
+      }), vue.createVNode(MKDataFilterDrawer, {
+        "visible": vue.unref(isShowDrawer),
+        "onUpdate:visible": (v) => isShowDrawer.value = v,
+        "dataTable": _dataTable
+      }, null), vue.createVNode("div", {
+        "class": "mk-table-filter__hidden"
+      }, [vue.createVNode(MKDataFilterForm, {
+        "dataTable": _dataTable
+      }, null)])]);
+    };
+  }
+});
+const MKTableFilter = TableFilter;
+exports.MKTableFilter = MKTableFilter;
+exports.default = MKTableFilter;
+//# sourceMappingURL=index-BUtqH0LZ.cjs.map