@ibiz-template/vue3-components 0.7.34 → 0.7.38-alpha.12

package/lib/common/anchor-container/anchor-container.cjs

@@ -0,0 +1,157 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var anchorBarList = require('./anchor-bar-list/anchor-bar-list.cjs');
+require('./anchor-container.css');
+
+"use strict";
+const IBizAnchorContainer = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizAnchorContainer",
+  components: {
+    IBizAnchorBarList: anchorBarList.IBizAnchorBarList
+  },
+  props: {
+    // 锚点列表，项值格式为{id:xx,text:xx}
+    anchorList: {
+      type: Array,
+      default: []
+    },
+    // 锚点目标元素
+    anchorTargetEle: {
+      type: Object,
+      required: true
+    },
+    // 锚点导航栏配置
+    navBarConfig: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("anchor-container");
+    const timer = vue.ref();
+    const isClick = vue.ref(false);
+    const selected = vue.ref("");
+    const {
+      navBarPos = "USER",
+      navBarSysCss,
+      navBarWidth,
+      navBarStyle,
+      navbarHeight
+    } = props.navBarConfig;
+    const onSelect = (key) => {
+      clearInterval(timer.value);
+      const el = document.querySelector("#".concat(key));
+      isClick.value = true;
+      selected.value = key;
+      if (el) {
+        el.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        timer.value = setTimeout(() => {
+          isClick.value = false;
+        }, 1e3);
+      }
+    };
+    const handleScroll = () => {
+      if (isClick.value)
+        return;
+      let closestDistance = Infinity;
+      let tempSelect = "";
+      for (let i = 0; i < props.anchorList.length; i++) {
+        const childElement = document.querySelector("#".concat(props.anchorList[i].id));
+        if (childElement) {
+          const rect = childElement.getBoundingClientRect();
+          const parentRect = props.anchorTargetEle.$el.getBoundingClientRect();
+          const relativeTop = rect.top - parentRect.top;
+          const isInView = rect.bottom > parentRect.top && rect.top < parentRect.bottom;
+          if (isInView && relativeTop >= 0 && relativeTop < closestDistance) {
+            closestDistance = relativeTop;
+            tempSelect = props.anchorList[i].id;
+          }
+        }
+      }
+      selected.value = tempSelect;
+    };
+    const style = () => {
+      const tempStyle = {};
+      if (navBarWidth) {
+        if (navBarWidth === 1) {
+          Object.assign(tempStyle, {
+            width: "auto"
+          });
+        } else {
+          Object.assign(tempStyle, {
+            width: "".concat(navBarWidth, "px"),
+            minWidth: "".concat(navBarWidth, "px"),
+            maxWidth: "".concat(navBarWidth, "px")
+          });
+        }
+      }
+      if (navbarHeight) {
+        if (navbarHeight === 1) {
+          Object.assign(tempStyle, {
+            height: "auto"
+          });
+        } else {
+          Object.assign(tempStyle, {
+            height: "".concat(navbarHeight, "px"),
+            minHeight: "".concat(navbarHeight, "px")
+          });
+        }
+      }
+      return tempStyle;
+    };
+    const target = vue.watch(() => {
+      if (props.anchorTargetEle && props.anchorTargetEle.$el) {
+        return props.anchorTargetEle.$el;
+      }
+      return null;
+    }, (newVal) => {
+      if (newVal) {
+        newVal.addEventListener("scroll", handleScroll);
+        newVal.classList.add("no-slider");
+        target();
+      }
+    }, {
+      immediate: true
+    });
+    vue.onUnmounted(() => {
+      var _a, _b;
+      if ((_a = props.anchorTargetEle) == null ? void 0 : _a.$el) {
+        ((_b = props.anchorTargetEle) == null ? void 0 : _b.$el).removeEventListener("scroll", handleScroll);
+      }
+    });
+    return {
+      ns,
+      selected,
+      navBarPos,
+      navBarStyle,
+      navBarSysCss,
+      style,
+      onSelect
+    };
+  },
+  render() {
+    var _a, _b;
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("".concat(this.navBarPos.toLowerCase()), true), this.ns.is("broadside", this.navBarPos !== "USER" && this.navBarPos !== "USER2"), this.ns.is("usermode", this.navBarPos === "USER" || this.navBarPos === "USER2"), this.ns.b("".concat(this.navBarStyle || "default").toLowerCase())]
+    }, [vue.createVNode("div", {
+      "class": [this.ns.e("anchor"), this.navBarSysCss],
+      "style": this.style()
+    }, [vue.createVNode(anchorBarList.IBizAnchorBarList, {
+      "anchorList": this.anchorList,
+      "navBarStyle": this.navBarStyle,
+      "navBarPos": this.navBarPos,
+      "selected": this.selected,
+      "onSelect": this.onSelect
+    }, null)]), vue.createVNode("div", {
+      "class": this.ns.e("content")
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]);
+  }
+});
+
+exports.IBizAnchorContainer = IBizAnchorContainer;

package/lib/common/anchor-container/anchor-container.css

@@ -0,0 +1 @@
+.ibiz-anchor-container{--ibiz-anchor-container-default-width:200px;--ibiz-anchor-container-min-height:60px;display:flex;gap:var(--ibiz-spacing-tight);width:100%;height:100%;padding:var(--ibiz-spacing-tight)}.ibiz-anchor-container__content{width:100%;height:100%;overflow:auto}.ibiz-anchor-container__content .no-slider{overflow:auto}.ibiz-anchor-container__content .no-slider::-webkit-scrollbar{background-color:transparent}.ibiz-anchor-container__content .no-slider::-webkit-scrollbar-thumb{background-color:transparent}.ibiz-anchor-container__content .no-slider::-webkit-scrollbar-track{background-color:transparent}.ibiz-anchor-container.is-broadside .ibiz-anchor-container__anchor{width:var(--ibiz-anchor-container-default-width);margin:var(--ibiz-spacing-base) var(--ibiz-spacing-tight);overflow:auto}.ibiz-anchor-container.is-topleft .ibiz-anchor-container__anchor{align-self:start}.ibiz-anchor-container.is-topright{flex-direction:row-reverse}.ibiz-anchor-container.is-topright .ibiz-anchor-container__anchor{align-self:start}.ibiz-anchor-container.is-middleleft .ibiz-anchor-container__anchor{align-self:center}.ibiz-anchor-container.is-middleright{flex-direction:row-reverse}.ibiz-anchor-container.is-middleright .ibiz-anchor-container__anchor{align-self:center}.ibiz-anchor-container.is-bottomleft .ibiz-anchor-container__anchor{align-self:end}.ibiz-anchor-container.is-bottomright{flex-direction:row-reverse}.ibiz-anchor-container.is-bottomright .ibiz-anchor-container__anchor{align-self:end}.ibiz-anchor-container.is-usermode{flex-direction:column}.ibiz-anchor-container.is-usermode .ibiz-anchor-container__anchor{display:flex;align-items:center;width:100%;min-height:var(--ibiz-anchor-container-min-height);padding:0 var(--ibiz-spacing-base);overflow:auto}.ibiz-anchor-container.is-user2{flex-direction:column-reverse}

package/lib/common/button-list/button-list.cjs

@@ -0,0 +1,167 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./button-list.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizButtonList",
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    buttonsState: {
+      type: Object,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    click: (_e, _actionId) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("button-list");
+    const dropdown = vue.ref();
+    const {
+      uiactionGroup,
+      actionGroupExtractMode
+    } = props.model;
+    const firstIndex = vue.computed(() => {
+      var _a;
+      const index = (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.findIndex((item) => props.buttonsState[item.id].visible);
+      return index === void 0 ? -1 : index;
+    });
+    const buttonStyle = vue.computed(() => {
+      const {
+        itemStyle,
+        detailStyle
+      } = props.model;
+      return itemStyle || detailStyle || "DEFAULT";
+    });
+    const trigger = vue.computed(() => {
+      return actionGroupExtractMode === "ITEMX" && buttonStyle.value === "STYLE2" ? "hover" : "click";
+    });
+    const handleClick = (e, item) => {
+      var _a, _b;
+      e.stopPropagation();
+      (_b = (_a = dropdown.value) == null ? void 0 : _a.handleClose) == null ? void 0 : _b.call(_a);
+      emit("click", e, item.uiactionId);
+    };
+    const handleMoreClick = (e, item) => {
+      if (trigger.value === "hover") {
+        emit("click", e, item.uiactionId);
+      }
+    };
+    const renderButton = (item, disabled = false) => {
+      var _a, _b;
+      if (props.buttonsState[item.id].visible) {
+        return vue.createVNode(vue.resolveComponent("el-button"), {
+          "class": [ns.e("item"), ns.em("item", "".concat((_a = item.id) == null ? void 0 : _a.toLowerCase())), "".concat(((_b = item.sysCss) == null ? void 0 : _b.cssName) || "")],
+          "title": item.tooltip || item.caption,
+          "disabled": props.buttonsState[item.id].disabled || disabled,
+          "onClick": (event) => handleClick(event, item)
+        }, {
+          default: () => [vue.createVNode("div", {
+            "class": ns.e("button-content")
+          }, [item.showIcon && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": item.sysImage,
+            "class": ns.em("button-content", "icon")
+          }, null), item.showCaption && vue.createVNode("span", {
+            "class": ns.em("button-content", "caption")
+          }, [item.caption])])]
+        });
+      }
+      return null;
+    };
+    const renderActions = () => {
+      var _a;
+      return vue.createVNode("div", {
+        "class": ns.e("content")
+      }, [(_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((item) => renderButton(item))]);
+    };
+    const renderDropdown = () => {
+      const {
+        id,
+        caption,
+        sysImage
+      } = props.model;
+      return vue.createVNode(vue.resolveComponent("el-dropdown"), {
+        "ref": dropdown,
+        "trigger": trigger.value,
+        "class": [ns.e("dropdown"), ns.em("dropdown", "".concat(buttonStyle.value.toLowerCase()))],
+        "popper-class": [ns.e("dropdown-popper"), ns.em("dropdown-popper", "".concat(buttonStyle.value.toLowerCase())), ns.em("dropdown-popper", "".concat(id == null ? void 0 : id.toLowerCase()))],
+        "popper-options": {
+          modifiers: [{
+            name: "offset",
+            options: {
+              offset: [0, 4]
+            }
+          }]
+        }
+      }, {
+        default: () => {
+          const item = uiactionGroup.uiactionGroupDetails[firstIndex.value];
+          return vue.createVNode(vue.resolveComponent("el-button-group"), null, {
+            default: () => [actionGroupExtractMode === "ITEMX" && item && renderButton(item, props.disabled), (actionGroupExtractMode !== "ITEMX" || item) && vue.createVNode(vue.resolveComponent("el-button"), {
+              "disabled": props.disabled,
+              "class": ns.e("more-button"),
+              "title": actionGroupExtractMode !== "ITEMX" ? caption || ibiz.i18n.t("app.more") : ibiz.i18n.t("app.more"),
+              "onClick": (event) => handleMoreClick(event, item)
+            }, {
+              default: () => [vue.createVNode("div", {
+                "class": ns.e("button-content")
+              }, [actionGroupExtractMode === "ITEMS" ? [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                "class": ns.em("button-content", "icon"),
+                "icon": sysImage
+              }, null), caption ? vue.createVNode("span", {
+                "class": ns.em("button-content", "caption")
+              }, [caption]) : null] : vue.createVNode("ion-icon", {
+                "name": "chevron-down-outline",
+                "class": ns.em("button-content", "more")
+              }, null)])]
+            })]
+          });
+        },
+        dropdown: () => vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, {
+          default: () => {
+            var _a;
+            return [(_a = uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((item, index) => {
+              if (props.buttonsState[item.id].visible && (actionGroupExtractMode !== "ITEMX" || index !== firstIndex.value)) {
+                let _slot;
+                return vue.createVNode(vue.resolveComponent("el-dropdown-item"), null, _isSlot(_slot = renderButton(item)) ? _slot : {
+                  default: () => [_slot]
+                });
+              }
+              return null;
+            })];
+          }
+        })
+      });
+    };
+    return {
+      ns,
+      buttonStyle,
+      renderDropdown,
+      renderActions
+    };
+  },
+  render() {
+    var _a;
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.m(this.model.id), this.ns.m(this.buttonStyle.toLowerCase()), this.ns.m((_a = this.model.actionGroupExtractMode) == null ? void 0 : _a.toLowerCase())],
+      "style": this.model.cssStyle
+    }, [this.model.actionGroupExtractMode === "ITEM" ? this.renderActions() : this.renderDropdown()]);
+  }
+});
+
+exports.IBizButtonList = IBizButtonList;

package/lib/common/button-list/button-list.css

@@ -0,0 +1 @@
+.ibiz-button-list{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular)}.ibiz-button-list__button-content{display:flex;align-items:center}.ibiz-button-list__button-content--icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);font-size:var(--ibiz-button-list-icon-size);margin-right:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown{width:100%;height:100%}.ibiz-button-list__dropdown .ibiz-icon{margin-right:0}.ibiz-button-list__dropdown .ibiz-icon+.ibiz-button-list__button-content--caption{margin-left:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown .el-button-group{width:100%;display:flex;height:100%;border-radius:var(--ibiz-border-radius-small)}.ibiz-button-list__dropdown .el-button-group .el-button:first-child{flex-grow:1}.ibiz-button-list__dropdown .el-button-group .el-button:last-child{flex-shrink:0}.ibiz-button-list__dropdown--style2 .el-button{--el-button-active-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;--el-button-hover-bg-color:transparent}.ibiz-button-list__dropdown--style2 .el-button-group .ibiz-button-list__item{padding-right:0}.ibiz-button-list__dropdown--style2 .el-button-group .el-button{color:var(--ibiz-color-text-2)}.ibiz-button-list__dropdown--style2 .el-button-group:hover .el-button{color:var(--ibiz-color-primary)}.ibiz-button-list--itemx .ibiz-button-list__more-button{padding-left:0;padding-right:0;width:32px}.ibiz-button-list__dropdown-popper{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular)}.ibiz-button-list__dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-button-list__dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;width:100%;display:block;text-align:left;border-radius:0;padding:var(--ibiz-button-list-popover-button-padding);margin:var(--ibiz-button-list-popover-button-margin);font-size:var(--ibiz-button-list-popover-button-font-size)}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-button-list__dropdown-popper--style2 .el-button{color:var(--ibiz-color-text-2)}

package/lib/common/custom-filter-condition/custom-filter-condition.cjs

@@ -0,0 +1,288 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var qxUtil = require('qx-util');
+var runtime = require('@ibiz-template/runtime');
+require('./custom-filter-condition.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const IBizCustomFilterCondition = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizCustomFilterCondition",
+  props: {
+    value: {
+      type: Object
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object
+    },
+    schemaFields: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("custom-filter-condition");
+    const fields = vue.ref([]);
+    const fieldMap = vue.ref(/* @__PURE__ */ new Map());
+    const items = vue.ref([]);
+    const initItemEditor = async (item) => {
+      item.editorProvider = void 0;
+      item.editor = void 0;
+      const field = fieldMap.value.get(item.field);
+      if (!field || !item.valueOP || !props.context) {
+        return;
+      }
+      const editorModel = ibiz.util.jsonSchema.getMockEditor(props.context, field, item.valueOP);
+      if (!editorModel) {
+        return;
+      }
+      const editorProvider = await runtime.getEditorProvider(editorModel);
+      if (editorProvider) {
+        item.editorProvider = editorProvider;
+        const editorController = await editorProvider.createController(editorModel, {
+          context: props.context,
+          params: props.params
+        });
+        item.editor = editorController;
+      }
+    };
+    const transformValue = async () => {
+      if (!props.value) {
+        items.value = [];
+        return;
+      }
+      const conditionList = props.value.searchconds;
+      if (Array.isArray(conditionList) && conditionList.length) {
+        items.value = await Promise.all(conditionList.map(async (condition) => {
+          const field = condition.fieldname || "";
+          const valueOP = condition.condop || "";
+          const value = condition.value;
+          const item = {
+            key: qxUtil.createUUID(),
+            field,
+            valueOP,
+            value
+          };
+          await initItemEditor(item);
+          return item;
+        }));
+        return;
+      }
+      items.value = [];
+    };
+    const init = async () => {
+      if (Array.isArray(props.schemaFields)) {
+        fields.value = props.schemaFields.map((item) => {
+          return {
+            ...item,
+            valueOPs: item.type ? ibiz.util.jsonSchema.getValueOPsByDataType(item.type) : []
+          };
+        });
+        fields.value.forEach((item) => {
+          fieldMap.value.set(item.appDEFieldId, item);
+        });
+        await transformValue();
+      }
+    };
+    vue.watch(() => props.schemaFields, () => {
+      init();
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.value, () => {
+      transformValue();
+    }, {
+      immediate: true
+    });
+    const handleValueChange = () => {
+      if (!items.value.length) {
+        emit("change", void 0);
+        return;
+      }
+      const searchconds = {
+        condop: "AND",
+        condtype: "GROUP",
+        searchconds: []
+      };
+      items.value.forEach((item) => {
+        searchconds.searchconds.push({
+          condtype: "DEFIELD",
+          fieldname: item.field,
+          condop: item.valueOP,
+          value: item.value
+        });
+      });
+      emit("change", searchconds);
+    };
+    const handleAdd = async () => {
+      var _a, _b, _c, _d;
+      let filterItem = fields.value;
+      if (items.value.length) {
+        const set = /* @__PURE__ */ new Set();
+        items.value.forEach((condition) => {
+          set.add(condition.field);
+        });
+        filterItem = fields.value.filter((field) => !set.has(field.appDEFieldId));
+        if (!filterItem.length) {
+          filterItem = fields.value;
+        }
+      }
+      const item = {
+        key: qxUtil.createUUID(),
+        field: ((_a = filterItem[0]) == null ? void 0 : _a.appDEFieldId) || "",
+        valueOP: ((_d = (_c = (_b = filterItem[0]) == null ? void 0 : _b.valueOPs) == null ? void 0 : _c[0]) == null ? void 0 : _d.valueOP) || ""
+      };
+      await initItemEditor(item);
+      items.value.push(item);
+      handleValueChange();
+    };
+    const handleRemove = (index) => {
+      items.value.splice(index, 1);
+      handleValueChange();
+    };
+    const renderEditor = (item) => {
+      if (!item.valueOP) {
+        return null;
+      }
+      if (item.editorProvider && item.editor) {
+        const component = vue.resolveComponent(item.editorProvider.formEditor);
+        return vue.h(component, {
+          value: item.value,
+          controller: item.editor,
+          data: {},
+          onChange: (val) => {
+            item.value = val;
+            handleValueChange();
+          }
+        });
+      }
+    };
+    const handleFieldChange = async (item) => {
+      var _a, _b;
+      const field = fieldMap.value.get(item.field);
+      item.valueOP = ((_b = (_a = field == null ? void 0 : field.valueOPs) == null ? void 0 : _a[0]) == null ? void 0 : _b.valueOP) || "";
+      item.value = void 0;
+      await initItemEditor(item);
+      handleValueChange();
+    };
+    const handleValueOPChange = async (item) => {
+      item.value = void 0;
+      await initItemEditor(item);
+      handleValueChange();
+    };
+    return {
+      ns,
+      fields,
+      fieldMap,
+      items,
+      handleAdd,
+      handleRemove,
+      renderEditor,
+      handleFieldChange,
+      handleValueOPChange
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.b("content")
+    }, [this.items.map((item, i) => {
+      let _slot;
+      return vue.createVNode("div", {
+        "class": this.ns.b("item")
+      }, [vue.createVNode("div", {
+        "class": this.ns.b("item-header")
+      }, [vue.createVNode("div", {
+        "class": this.ns.b("item-header-text")
+      }, [vue.createTextVNode("\u67E5\u8BE2\u6761\u4EF6("), i + 1, vue.createTextVNode(")")]), vue.createVNode("div", {
+        "class": this.ns.b("item-header-btn"),
+        "onClick": () => this.handleRemove(i)
+      }, [vue.createVNode("svg", {
+        "viewBox": "0 0 16 16",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "1em",
+        "width": "1em",
+        "preserveAspectRatio": "xMidYMid meet",
+        "focusable": "false"
+      }, [vue.createVNode("g", {
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [vue.createVNode("path", {
+        "d": "M4.002 3.403V1a1 1 0 0 1 1-1h6.003a1 1 0 0 1 1 1v2.403h3.396a.6.6 0 1 1 0 1.2h-1.395V15a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.603H.6a.6.6 0 1 1 0-1.2h3.4zm8.804 1.205H3.2V14.8h9.605V4.608zM5.202 1.2v2.155h5.603V1.2H5.202zm.6 6.417a.6.6 0 0 1 1.201 0v4.758a.6.6 0 0 1-1.2 0V7.617zm3.202 0a.6.6 0 0 1 1.2 0v4.758a.6.6 0 0 1-1.2 0V7.617z"
+      }, null)])])])]), vue.createVNode("div", {
+        "class": this.ns.b("item-content")
+      }, [vue.createVNode("div", {
+        "class": this.ns.be("item", "field")
+      }, [vue.createVNode(vue.resolveComponent("el-select"), {
+        "modelValue": item.field,
+        "onUpdate:modelValue": ($event) => item.field = $event,
+        "onChange": () => {
+          this.handleFieldChange(item);
+        }
+      }, _isSlot(_slot = this.fields.map((field) => {
+        return vue.createVNode(vue.resolveComponent("el-option"), {
+          "key": field.appDEFieldId,
+          "value": field.appDEFieldId,
+          "label": field.caption
+        }, null);
+      })) ? _slot : {
+        default: () => [_slot]
+      })]), vue.createVNode("div", {
+        "class": this.ns.be("item", "valueOP")
+      }, [vue.createVNode(vue.resolveComponent("el-select"), {
+        "modelValue": item.valueOP,
+        "onUpdate:modelValue": ($event) => item.valueOP = $event,
+        "onChange": () => {
+          this.handleValueOPChange(item);
+        }
+      }, {
+        default: () => {
+          var _a, _b;
+          return [(_b = (_a = this.fieldMap.get(item.field)) == null ? void 0 : _a.valueOPs) == null ? void 0 : _b.map((op) => {
+            return vue.createVNode(vue.resolveComponent("el-option"), {
+              "key": op.valueOP,
+              "value": op.valueOP,
+              "label": op.label
+            }, null);
+          })];
+        }
+      })]), vue.createVNode("div", {
+        "class": this.ns.be("item", "editor")
+      }, [this.renderEditor(item)])])]);
+    })]), vue.createVNode("div", {
+      "class": this.ns.b("footer")
+    }, [vue.createVNode("div", {
+      "class": this.ns.b("footer-btn"),
+      "onClick": this.handleAdd
+    }, [vue.createVNode("svg", {
+      "class": this.ns.be("footer-btn", "icon"),
+      "viewBox": "0 0 16 16",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "height": "1em",
+      "width": "1em",
+      "preserveAspectRatio": "xMidYMid meet",
+      "focusable": "false"
+    }, [vue.createVNode("g", {
+      "stroke-width": "1",
+      "fill-rule": "evenodd"
+    }, [vue.createVNode("path", {
+      "d": "M8.578 7.383V1.602a.601.601 0 1 0-1.2 0v5.781H1.6a.601.601 0 0 0 0 1.203h5.777v5.812a.601.601 0 1 0 1.2 0V8.586H14.4a.601.601 0 0 0 0-1.203H8.578z"
+    }, null)])]), vue.createVNode("div", {
+      "class": this.ns.be("footer-btn", "text")
+    }, [vue.createTextVNode("\u6DFB\u52A0\u67E5\u8BE2\u6761\u4EF6")])])])]);
+  }
+});
+
+exports.IBizCustomFilterCondition = IBizCustomFilterCondition;

package/lib/common/custom-filter-condition/custom-filter-condition.css

@@ -0,0 +1 @@
+.ibiz-custom-filter-condition{height:100%;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);font-size:var(--ibiz-font-size-regular)}.ibiz-custom-filter-condition-item-header{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--ibiz-spacing-base-tight)/ 2) var(--ibiz-spacing-base-tight) calc(var(--ibiz-spacing-base-tight)/ 2) var(--ibiz-spacing-base-loose);background-color:var(--ibiz-color-bg-0)}.ibiz-custom-filter-condition-item-header-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-filter-condition-item-header-btn{display:flex;flex:0 0 auto;align-items:center;justify-content:center;padding:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-6);cursor:pointer}.ibiz-custom-filter-condition-item-header-btn svg{fill:var(--ibiz-color-text-3)}.ibiz-custom-filter-condition-item-header-btn:hover{background-color:var(--ibiz-color-danger-light-default)}.ibiz-custom-filter-condition-item-header-btn:hover svg{fill:var(--ibiz-color-danger-hover)}.ibiz-custom-filter-condition-item-content{display:flex;align-items:center;padding:var(--ibiz-spacing-base-loose);border-top:1px solid var(--ibiz-color-border)}.ibiz-custom-filter-condition-item{margin-bottom:var(--ibiz-spacing-base);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small)}.ibiz-custom-filter-condition-item__field{flex:0 0 30%;margin-right:var(--ibiz-spacing-base-tight)}.ibiz-custom-filter-condition-item__field>.el-select{width:100%}.ibiz-custom-filter-condition-item__valueOP{flex:0 0 30%;margin-right:var(--ibiz-spacing-base-tight)}.ibiz-custom-filter-condition-item__valueOP>.el-select{width:100%}.ibiz-custom-filter-condition-item__editor{flex:1 1 0}.ibiz-custom-filter-condition-footer{width:100%;margin-top:var(--ibiz-spacing-base-loose)}.ibiz-custom-filter-condition-footer-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);cursor:pointer;border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small)}.ibiz-custom-filter-condition-footer-btn__icon{fill:currentcolor}.ibiz-custom-filter-condition-footer-btn__text{margin-left:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-custom-filter-condition-footer-btn:hover{color:var(--ibiz-color-primary-hover);background-color:var(--ibiz-color-bg-0);border-color:var(--ibiz-color-primary-hover)}