@ibiz-template/vue3-components 0.6.17 → 0.7.1

package/lib/common/view-message/view-message.css

@@ -1 +1 @@
-.ibiz-view-message__alert.is-no-title.el-alert .el-alert__description{margin:0}
+.ibiz-view-message{--ibiz-view-message-border--warning:1px solid var(--ibiz-color-warning-active);--ibiz-view-message-border--error:1px solid var(--ibiz-color-danger-active);--ibiz-view-message-border--info:1px solid var(--ibiz-color-info-active);padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none)}.ibiz-view-message--hidden{display:none}.ibiz-view-message .el-alert--warning.is-light{border:var(--ibiz-view-message-border--warning)}.ibiz-view-message .el-alert--error.is-light{border:var(--ibiz-view-message-border--error)}.ibiz-view-message .el-alert--info.is-light{border:var(--ibiz-view-message-border--info)}.ibiz-view-message-alert{margin-bottom:var(--ibiz-spacing-tight)}.ibiz-view-message-alert:last-child{margin-bottom:var(--ibiz-spacing-none)}.ibiz-view-message-alert--single .el-alert__description{margin:0}.ibiz-view-message-alert--single-message .el-alert__close-btn{top:calc(var(--ibiz-spacing-tight) + var(--ibiz-spacing-super-tight))}.ibiz-view-message-alert__title{line-height:calc(var(--ibiz-spacing-base-loose) - var(--ibiz-spacing-super-tight))}.ibiz-view-message-alert__message{line-height:var(--ibiz-spacing-base)}.ibiz-view-message-carousel-alert .el-alert__content{overflow:hidden}.ibiz-view-message-carousel-alert__title{height:calc(var(--ibiz-spacing-base-loose) - var(--ibiz-spacing-super-tight));overflow:hidden;line-height:calc(var(--ibiz-spacing-base-loose) - var(--ibiz-spacing-super-tight));text-overflow:ellipsis;white-space:nowrap}.ibiz-view-message-carousel-alert__message{height:var(--ibiz-spacing-base);overflow:hidden;line-height:var(--ibiz-spacing-base);text-overflow:ellipsis;white-space:nowrap}

package/lib/control/chart/chart.cjs

@@ -5,10 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var echarts = require('echarts');
-require('./chart.css');
+var qxUtil = require('qx-util');
 var runtime = require('@ibiz-template/runtime');
+require('./chart.css');
 
 "use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
 const ChartControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizChartControl",
   props: {
@@ -40,27 +44,87 @@ const ChartControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.ChartController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const chartRef = vue.ref();
+    const maxHeight = vue.ref(0);
+    const uuid = qxUtil.createUUID();
+    const setHeight = async () => {
+      await vue.nextTick();
+      const el = document.getElementById(uuid);
+      if (el) {
+        if (c.state.gridPosition === "bottom" || c.state.gridPosition === "top") {
+          maxHeight.value = el.offsetHeight / 2 - 8;
+        } else {
+          maxHeight.value = el.offsetHeight - 16;
+        }
+      }
+    };
+    const getGridData = () => {
+      return c.state.gridData || [];
+    };
     vue.onMounted(() => {
       const chart = echarts.init(chartRef.value);
       c.initChart(chart);
+      window.addEventListener("resize", setHeight);
+      setHeight();
+    });
+    vue.watch(() => c.state.showGrid, () => {
+      setHeight();
+    }, {
+      immediate: true
+    });
+    const renderGrid = () => {
+      let _slot;
+      return vue.createVNode(vue.resolveComponent("el-table"), {
+        "ref": "tableRef",
+        "data": getGridData(),
+        "border": true,
+        "style": {
+          width: "100%"
+        },
+        "max-height": maxHeight.value,
+        "header-row-class-name": ns.e("grid-header")
+      }, _isSlot(_slot = c.state.gridHeaders.map((column) => {
+        return vue.createVNode(vue.resolveComponent("el-table-column"), {
+          "prop": column.id,
+          "align": "center",
+          "label": column.name
+        }, null);
+      })) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+    vue.onBeforeUnmount(() => {
+      window.removeEventListener("resize", setHeight);
     });
     return {
       c,
       ns,
-      chartRef
+      chartRef,
+      uuid,
+      renderGrid
     };
   },
   render() {
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
       "controller": this.c
     }, {
-      default: () => [vue.createVNode(vue.resolveComponent("el-empty"), {
+      default: () => [vue.createVNode("div", {
+        "id": this.uuid,
+        "class": this.ns.b("chart-container")
+      }, [vue.createVNode(vue.resolveComponent("el-empty"), {
         "class": [this.ns.e("empty"), this.ns.is("no-data", this.c.state.items.length === 0)],
         "description": "\u6682\u65E0\u6570\u636E"
       }, null), vue.createVNode("div", {
+        "class": [this.ns.e("chart-grid"), this.ns.is("no-data", this.c.state.items.length === 0), this.ns.is("show-grid", this.c.state.showGrid), {
+          [this.ns.em("chart-grid", this.c.state.gridPosition)]: this.c.state.showGrid
+        }]
+      }, [vue.createVNode("div", {
+        "class": [this.ns.e("chart-grid-container"), this.ns.is(this.c.state.gridPosition, this.c.state.showGrid), this.ns.is("no-grid", !this.c.state.showGrid)]
+      }, [vue.createVNode("div", {
         "ref": "chartRef",
-        "class": [this.ns.e("chart"), this.ns.is("no-data", this.c.state.items.length === 0)]
-      }, [ibiz.i18n.t("control.chart.chartPlaceholder")])]
+        "class": [this.ns.e("chart")]
+      }, [ibiz.i18n.t("control.chart.chartPlaceholder")])]), this.c.state.showGrid ? vue.createVNode("div", {
+        "class": this.ns.e("grid")
+      }, [this.renderGrid()]) : null])])]
     });
   }
 });

package/lib/control/chart/chart.css

@@ -1 +1 @@
-.ibiz-control-chart{width:100%;height:100%}.ibiz-control-chart__chart{width:100%;height:100%}.ibiz-control-chart__chart.is-no-data{display:none}.ibiz-control-chart__empty{display:none;height:100%}.ibiz-control-chart__empty.is-no-data{display:flex}
+.ibiz-control-chart{width:100%;height:100%}.ibiz-control-chart__chart-grid{width:100%;height:100%}.ibiz-control-chart__chart-grid.is-show-grid{display:flex;height:calc(100% - 16px)}.ibiz-control-chart__chart-grid--bottom{flex-direction:column}.ibiz-control-chart__chart-grid--top{flex-direction:column-reverse}.ibiz-control-chart__chart-grid--left{flex-direction:row-reverse}.ibiz-control-chart__chart-grid--right{flex-direction:row}.ibiz-control-chart__chart-grid.is-no-data{display:none}.ibiz-control-chart__chart-grid-container{flex:1;height:50%}.ibiz-control-chart__chart-grid-container.is-bottom{width:100%;height:50%;min-height:50%}.ibiz-control-chart__chart-grid-container.is-top{width:100%;height:50%;min-height:50%}.ibiz-control-chart__chart-grid-container.is-left{width:50%;min-width:50%;height:100%}.ibiz-control-chart__chart-grid-container.is-right{width:50%;min-width:50%;height:100%}.ibiz-control-chart__chart-grid-container.is-no-grid{flex:unset;width:100%;height:100%}.ibiz-control-chart__chart{width:100%;height:100%}.ibiz-control-chart__grid{flex:1;height:auto}.ibiz-control-chart__grid .cell{text-overflow:ellipsis;white-space:nowrap}.ibiz-control-chart__grid .el-table__body-wrapper{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-control-chart__empty{display:none;height:100%}.ibiz-control-chart__empty.is-no-data{display:flex}.ibiz-control-chart-chart-container{width:100%;height:100%}

package/lib/control/data-view/data-view.cjs

@@ -283,6 +283,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "total": this.c.state.total,
         "curPage": this.c.state.curPage,
         "size": this.c.state.size,
+        "totalPages": this.c.state.totalPages,
         "onChange": this.onPageChange,
         "onPageSizeChange": this.onPageSizeChange,
         "onPageRefresh": this.onPageRefresh

package/lib/control/drbar/drbar.controller.cjs

@@ -54,7 +54,8 @@ class DRBarController extends runtime.ControlController {
    * @memberof DRBarController
    */
   get form() {
-    return this.view.getController("form");
+    var _a;
+    return (_a = this.view) == null ? void 0 : _a.getController("form");
   }
   /**
    * 是否是新建
@@ -443,6 +444,20 @@ class DRBarController extends runtime.ControlController {
       );
     }
   }
+  /**
+   * 监听组件销毁
+   *
+   * @author zhanghengfeng
+   * @date 2024-04-10 19:04:43
+   * @protected
+   * @return {*}  {Promise<void>}
+   */
+  async onDestroyed() {
+    await super.onDestroyed();
+    if (this.counter) {
+      this.counter.destroy();
+    }
+  }
 }
 
 exports.DRBarController = DRBarController;

package/lib/control/drtab/drtab.controller.cjs

@@ -45,7 +45,8 @@ class DRTabController extends runtime.ControlController {
    * @memberof DRTabController
    */
   get form() {
-    return this.view.getController("form");
+    var _a;
+    return (_a = this.view) == null ? void 0 : _a.getController("form");
   }
   /**
    * 路由层级
@@ -307,6 +308,20 @@ class DRTabController extends runtime.ControlController {
       );
     }
   }
+  /**
+   * 监听组件销毁
+   *
+   * @author zhanghengfeng
+   * @date 2024-04-10 19:04:40
+   * @protected
+   * @return {*}  {Promise<void>}
+   */
+  async onDestroyed() {
+    await super.onDestroyed();
+    if (this.counter) {
+      this.counter.destroy();
+    }
+  }
 }
 
 exports.DRTabController = DRTabController;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl.cjs

@@ -25,10 +25,14 @@ const FormMDCtrl = /* @__PURE__ */ vue.defineComponent({
     vue3Util.useController(props.controller);
     const c = props.controller;
     const hasCaption = c.model.showCaption && !!c.model.caption;
+    const onActionClick = async (detail, event) => {
+      await props.controller.onActionClick(detail, event);
+    };
     return {
       c,
       ns,
-      hasCaption
+      hasCaption,
+      onActionClick
     };
   },
   render() {
@@ -60,11 +64,16 @@ const FormMDCtrl = /* @__PURE__ */ vue.defineComponent({
     }
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass, this.hasCaption ? this.ns.m("show-caption") : ""]
-    }, [this.hasCaption && vue.createVNode("div", {
+    }, [vue.createVNode("div", {
       "class": this.ns.b("header")
-    }, [vue.createVNode("span", {
+    }, [vue.createVNode("div", {
       "class": this.ns.e("title")
-    }, [this.c.model.caption])]), content]);
+    }, [this.hasCaption ? this.c.model.caption : ""]), model.uiactionGroup && vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
+      "class": this.ns.e("toolbar"),
+      "action-details": model.uiactionGroup.uiactionGroupDetails,
+      "actions-state": this.controller.state.actionGroupState,
+      "onActionClick": this.onActionClick
+    }, null)]), content]);
   }
 });
 

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl.css

@@ -1 +1 @@
-.ibiz-form-mdctrl{--ibiz-form-mdctrl-header-height:32px}.ibiz-form-mdctrl-header{height:var(--ibiz-form-mdctrl-header-height);line-height:var(--ibiz-form-mdctrl-header-height)}
+.ibiz-form-mdctrl{--ibiz-form-mdctrl-header-height:49px}.ibiz-form-mdctrl__toolbar{display:flex;justify-content:flex-end;width:50%}.ibiz-form-mdctrl__title{width:50%;font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold)}.ibiz-form-mdctrl-header{display:flex;place-content:center space-between;align-items:center;height:var(--ibiz-form-mdctrl-header-height);padding:var(--ibiz-spacing-base-tight) 0;margin:6px var(--ibiz-spacing-base-tight);line-height:var(--ibiz-form-mdctrl-header-height);border-bottom:1px solid var(--ibiz-color-border)}

package/lib/control/form/form-detail/form-rawitem/form-rawitem.cjs

@@ -22,14 +22,44 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-raw-item");
+    const c = props.controller;
+    const content = vue.ref("");
     const showFormDefaultContent = vue.computed(() => {
       if (props.controller.form.controlParams && props.controller.form.controlParams.editmode === "hover") {
         return true;
       }
       return false;
     });
+    vue.watch(() => c.data, async (newVal) => {
+      if (newVal) {
+        const rawItemModel = c.model.rawItem;
+        if (!rawItemModel) {
+          return;
+        }
+        let rawItemContent = "";
+        const obj = {
+          ...newVal
+        };
+        if (rawItemModel.contentType === "RAW") {
+          rawItemContent = rawItemModel.caption;
+        } else if (rawItemModel.contentType === "HTML") {
+          rawItemContent = rawItemModel.content;
+        }
+        if (rawItemContent && rawItemModel.templateMode) {
+          rawItemContent = await ibiz.util.hbs.render(rawItemContent.replaceAll("//n", "\n"), Object.assign(obj, {
+            data: {
+              ...newVal
+            }
+          }));
+        }
+        content.value = rawItemContent;
+      }
+    }, {
+      immediate: true
+    });
     return {
       ns,
+      content,
       showFormDefaultContent
     };
   },
@@ -40,6 +70,7 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
     return vue.createVNode(vue.resolveComponent("iBizRawItem"), {
       "class": [this.ns.b(), ...this.controller.containerClass, this.ns.is("show-default", this.showFormDefaultContent)],
       "rawItem": this.modelData,
+      "content": this.content,
       "onClick": (event) => this.controller.onClick(event)
     }, null);
   }

package/lib/control/grid/grid/grid.cjs

@@ -294,6 +294,7 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
         "total": state.total,
         "curPage": state.curPage,
         "size": state.size,
+        "totalPages": state.totalPages,
         "onChange": this.onPageChange,
         "onPageSizeChange": this.onPageSizeChange,
         "onPageRefresh": this.onPageRefresh

package/lib/control/list/list.cjs

@@ -214,6 +214,7 @@ const ListControl = /* @__PURE__ */ vue.defineComponent({
         "total": this.c.state.total,
         "curPage": this.c.state.curPage,
         "size": this.c.state.size,
+        "totalPages": this.c.state.totalPages,
         "onChange": this.onPageChange,
         "onPageSizeChange": this.onPageSizeChange,
         "onPageRefresh": this.onPageRefresh

package/lib/control/search-bar/filter-tree/filter-tree.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./filter-tree.css');
+var qxUtil = require('qx-util');
 
 "use strict";
 function _isSlot(s) {
@@ -92,33 +93,49 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
     const UiFilterNodes = vue.computed(() => {
       return props.filterNodes;
     });
-    const findFilterController = (fieldName, valueOP) => {
+    const findFilterController = (node) => {
+      if (node.nodeType === "ITEMS" && node.simple) {
+        const subNode = node.children[0];
+        return props.filterControllers.find((item) => {
+          if (item.type === "SIMPLE_ITEMS") {
+            const simpleC = item;
+            if (simpleC.fieldName === node.field && simpleC.valueOP === node.valueOP && simpleC.subFieldName === subNode.field && simpleC.subValueOP === subNode.valueOP) {
+              return true;
+            }
+          }
+          return false;
+        });
+      }
+      const {
+        field,
+        valueOP
+      } = node;
       return props.filterControllers.find((item) => {
-        if (item.fieldName === fieldName) {
+        if (item.type === "SIMPLE_ITEMS") {
+          return false;
+        }
+        if (item.fieldName === field) {
           return item.valueOP ? item.valueOP === valueOP : true;
         }
         return false;
       });
     };
     const allFields = [];
-    const getFilterModes = (fieldName, fieldInfos = allFields) => {
-      if (!fieldName) {
-        return;
-      }
-      const field = fieldInfos.find((item) => item.name === fieldName);
-      if (!field) {
+    props.filterControllers.forEach((filterC) => {
+      let find = allFields.find((x) => x.name === filterC.key);
+      if (filterC.hidden) {
         return;
       }
-      return field.valueOPs;
-    };
-    props.filterControllers.forEach((filterC) => {
-      let find = allFields.find((x) => x.name === filterC.fieldName);
       if (find === void 0) {
         find = {
-          name: filterC.fieldName,
+          name: filterC.key,
+          fieldName: filterC.fieldName,
           label: filterC.label,
           valueOPs: []
         };
+        if (filterC.type === "SIMPLE_ITEMS") {
+          find.simpleFilterC = filterC;
+        }
         allFields.push(find);
       }
       if (!filterC.valueOP) {
@@ -127,25 +144,38 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
         find.valueOPs.push(filterC.valueOP);
       }
     });
-    const onFieldSelect = (node, field) => {
-      node.value = null;
-      node.valueOP = null;
-      node.field = field;
-      Object.assign(node, {
-        leaf: true,
-        logicType: void 0,
-        children: void 0
-      });
+    const getFilterModes = (fieldName, fieldInfos = allFields) => {
+      if (!fieldName) {
+        return;
+      }
+      const field = fieldInfos.find((item) => item.name === fieldName);
+      if (!field) {
+        return;
+      }
+      return field.valueOPs;
+    };
+    const onFieldSelect = (node, key, fields = allFields) => {
+      const fieldInfo = fields.find((item) => item.name === key);
+      if (!fieldInfo) {
+        ibiz.log.error("allFields\u627E\u4E0D\u5230\u5C5E\u6027\u6807\u8BC6\u4E3A".concat(key, "\u7684"));
+        return;
+      }
+      qxUtil.clearAll(node);
+      if (fieldInfo.simpleFilterC) {
+        fieldInfo.simpleFilterC.addSimpleFilterNode(node);
+        return;
+      }
+      node.nodeType = "FIELD";
+      node.field = fieldInfo.fieldName;
     };
     const onValueOPSelect = (node, valueOP) => {
       node.valueOP = valueOP;
       node.value = null;
       if (["EXISTS", "NOTEXISTS"].includes(valueOP)) {
         Object.assign(node, {
-          leaf: false,
-          logicType: "ITEMS",
+          nodeType: "ITEMS",
           children: [{
-            leaf: true,
+            nodeType: "FIELD",
             field: null,
             valueOP: null,
             value: null
@@ -153,8 +183,7 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
         });
       } else {
         Object.assign(node, {
-          leaf: true,
-          logicType: void 0,
+          nodeType: "FIELD",
           children: void 0
         });
       }
@@ -164,10 +193,10 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
     };
     const addGroup = (node) => {
       node.children.push({
-        leaf: false,
+        nodeType: "GROUP",
         logicType: "AND",
         children: [{
-          leaf: true,
+          nodeType: "FIELD",
           field: null,
           valueOP: null,
           value: null
@@ -176,7 +205,7 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
     };
     const addItem = (node) => {
       node.children.push({
-        leaf: true,
+        nodeType: "FIELD",
         field: null,
         valueOP: null,
         value: null
@@ -214,6 +243,9 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
     };
     const renderFilterItem = (node, itemsC) => {
       let _slot;
+      if (node.hidden) {
+        return;
+      }
       let fieldInfos = allFields;
       if (itemsC) {
         fieldInfos = itemsC.allFields;
@@ -225,7 +257,7 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
           const subFilterC = itemsC.getSubFilterController(node.field, node.valueOP);
           editor = renderEditor(node, subFilterC);
         } else {
-          const filterC = findFilterController(node.field, node.valueOP);
+          const filterC = findFilterController(node);
           if (filterC && !["EXISTS", "NOTEXISTS"].includes(filterC.valueOP)) {
             editor = renderEditor(node, filterC);
           }
@@ -239,7 +271,7 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
         "teleported": false,
         "class": ns.e("field-select"),
         "onChange": (field) => {
-          onFieldSelect(node, field);
+          onFieldSelect(node, field, fieldInfos);
         }
       }, _isSlot(_slot = fieldInfos.map((field) => {
         return vue.createVNode(vue.resolveComponent("el-option"), {
@@ -261,7 +293,10 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
     };
     let renderFilterItems = (_node) => vue.createVNode("div", null, null);
     const renderFilterGroup = (node, itemsC) => {
-      if (node.logicType === "ITEMS") {
+      if (node.hidden) {
+        return;
+      }
+      if (node.nodeType === "ITEMS") {
         return renderFilterItems(node);
       }
       return vue.createVNode("div", {
@@ -303,7 +338,10 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
       })]), vue.createVNode("div", {
         "class": ns.be("group", "list")
       }, [node.children.length > 0 && node.children.map((child, index) => {
-        const childContent = child.leaf ? renderFilterItem(child, itemsC) : renderFilterGroup(child, itemsC);
+        const childContent = child.nodeType === "FIELD" ? renderFilterItem(child, itemsC) : renderFilterGroup(child, itemsC);
+        if (!childContent) {
+          return null;
+        }
         return vue.createVNode("div", {
           "class": ns.be("group", "list-item")
         }, [vue.createVNode("div", {
@@ -320,7 +358,30 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
       })])]);
     };
     renderFilterItems = (node) => {
-      const itemsC = findFilterController(node.field, node.valueOP);
+      const itemsC = findFilterController(node);
+      if (node.simple) {
+        let _slot2;
+        const child = node.children[0];
+        if (!child) {
+          return;
+        }
+        return [vue.createVNode(vue.resolveComponent("el-select"), {
+          "model-value": itemsC.key,
+          "teleported": false,
+          "class": ns.e("field-select"),
+          "onChange": (field) => {
+            onFieldSelect(node, field);
+          }
+        }, _isSlot(_slot2 = allFields.map((field) => {
+          return vue.createVNode(vue.resolveComponent("el-option"), {
+            "key": field.name,
+            "value": field.name,
+            "label": field.label
+          }, null);
+        })) ? _slot2 : {
+          default: () => [_slot2]
+        }), renderEditor(child, itemsC)];
+      }
       return vue.createVNode("div", {
         "class": (ns.b("group"), ns.bm("group", "items"))
       }, [vue.createVNode("div", {
@@ -335,7 +396,7 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
       })]), vue.createVNode("div", {
         "class": ns.be("group", "list")
       }, [node.children.length > 0 && node.children.map((child, index) => {
-        const childContent = child.leaf ? renderFilterItem(child, itemsC) : renderFilterGroup(child, itemsC);
+        const childContent = child.nodeType === "FIELD" ? renderFilterItem(child, itemsC) : renderFilterGroup(child, itemsC);
         return vue.createVNode("div", {
           "class": ns.be("group", "list-item")
         }, [vue.createVNode("div", {
@@ -371,7 +432,7 @@ const FilterTreeControl = /* @__PURE__ */ vue.defineComponent({
     return vue.createVNode("div", {
       "class": [this.ns.b()]
     }, [this.UiFilterNodes.length > 0 && this.UiFilterNodes.map((node) => {
-      if (node.leaf) {
+      if (node.nodeType === "FIELD") {
         return this.renderFilterItem(node);
       }
       return this.renderFilterGroup(node);

package/lib/control/search-bar/index.cjs

@@ -9,6 +9,7 @@ var searchBar_provider = require('./search-bar.provider.cjs');
 var filterTree = require('./filter-tree/filter-tree.cjs');
 var filterModeSelect = require('./filter-mode-select/filter-mode-select.cjs');
 var searchGroups = require('./search-groups/search-groups.cjs');
+var quickSearchSelect = require('./quick-search-select/quick-search-select.cjs');
 
 "use strict";
 const IBizSearchBarControl = vue3Util.withInstall(
@@ -18,6 +19,7 @@ const IBizSearchBarControl = vue3Util.withInstall(
     v.component(filterTree.FilterTreeControl.name, filterTree.FilterTreeControl);
     v.component(filterModeSelect.FilterModeSelect.name, filterModeSelect.FilterModeSelect);
     v.component(searchGroups.SearchGroups.name, searchGroups.SearchGroups);
+    v.component(quickSearchSelect.QuickSearchSelect.name, quickSearchSelect.QuickSearchSelect);
     runtime.registerControlProvider(
       runtime.ControlType.SEARCHBAR,
       () => new searchBar_provider.SearchBarProvider()

package/lib/control/search-bar/quick-search-select/quick-search-select.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./quick-search-select.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const QuickSearchSelect = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizQuickSearchSelect",
+  props: {
+    controller: {
+      type: runtime.SearchBarController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("quick-search-select");
+    const onItemClick = (item) => {
+      const key = item.fieldName;
+      const {
+        quickSearchFieldNames
+      } = props.controller.state;
+      const index = quickSearchFieldNames.indexOf(key);
+      if (index === -1) {
+        quickSearchFieldNames.push(key);
+      } else {
+        quickSearchFieldNames.splice(index, 1);
+      }
+      props.controller.calcQuickSearchPlaceHolder();
+    };
+    return {
+      ns,
+      onItemClick
+    };
+  },
+  render() {
+    const {
+      state
+    } = this.controller;
+    return vue.createVNode(vue.resolveComponent("el-dropdown"), {
+      "onCommand": this.onItemClick,
+      "trigger": "click",
+      "hide-on-click": false,
+      "class": [this.ns.b()],
+      "popper-class": [this.ns.b("popover")]
+    }, {
+      default: () => vue.createVNode("div", {
+        "class": this.ns.e("icon")
+      }, [vue.createVNode("ion-icon", {
+        "name": "settings-outline"
+      }, null)]),
+      dropdown: () => {
+        let _slot;
+        return vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot = state.quickSearchItems.map((item) => {
+          const isSelected = state.quickSearchFieldNames.includes(item.fieldName);
+          return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
+            "class": [this.ns.be("popover", "item"), isSelected && this.ns.bem("popover", "item", "selected")],
+            "command": item
+          }, {
+            default: () => [item.label]
+          });
+        })) ? _slot : {
+          default: () => [_slot]
+        });
+      }
+    });
+  }
+});
+
+exports.QuickSearchSelect = QuickSearchSelect;

package/lib/control/search-bar/quick-search-select/quick-search-select.css

@@ -0,0 +1 @@
+.ibiz-quick-search-select{width:40px;height:100%;color:var(--ibiz-color-white);cursor:pointer;background-color:var(--ibiz-color-primary);border-top-left-radius:var(--el-input-border-radius);border-bottom-left-radius:var(--el-input-border-radius)}.ibiz-quick-search-select:hover{background-color:var(--ibiz-color-primary-hover)}.ibiz-quick-search-select__icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-quick-search-select-popover{--ibiz-quick-search-select-item-text-color:var(--ibiz-color-text-2);--ibiz-quick-search-select-item-bg-color:var(--ibiz-color-bg-1);--ibiz-quick-search-select-item-hover-text-color:var(--ibiz-color-text-0);--ibiz-quick-search-select-item-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-quick-search-select-item-selected-text-color:var(--ibiz-color-primary);--ibiz-quick-search-select-item-selected-bg-color:var(--ibiz-color-bg-1)}.ibiz-quick-search-select-popover.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:var(--ibiz-color-bg-1)}.ibiz-quick-search-select-popover.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu{background-color:var(--ibiz-color-bg-1)}.ibiz-quick-search-select-popover.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{color:var(--ibiz-quick-search-select-item-text-color);background-color:var(--ibiz-quick-search-select-item-bg-color)}.ibiz-quick-search-select-popover.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{color:var(--ibiz-quick-search-select-item-hover-text-color);background-color:var(--ibiz-quick-search-select-item-hover-bg-color)}.ibiz-quick-search-select-popover__item--selected{font-weight:700;--ibiz-quick-search-select-item-text-color:var(--ibiz-quick-search-select-item-selected-text-color);--ibiz-quick-search-select-item-bg-color:var(--ibiz-quick-search-select-item-selected-bg-color)}