@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.8

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var searchBar = require('./search-bar.cjs');
+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');
+
+"use strict";
+const IBizSearchBarControl = vue3Util.withInstall(
+  searchBar.SearchBarControl,
+  function(v) {
+    v.component(searchBar.SearchBarControl.name, searchBar.SearchBarControl);
+    v.component(filterTree.FilterTreeControl.name, filterTree.FilterTreeControl);
+    v.component(filterModeSelect.FilterModeSelect.name, filterModeSelect.FilterModeSelect);
+    runtime.registerControlProvider(
+      runtime.ControlType.SEARCHBAR,
+      () => new searchBar_provider.SearchBarProvider()
+    );
+  }
+);
+
+exports.IBizSearchBarControl = IBizSearchBarControl;
+exports.default = IBizSearchBarControl;

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

@@ -0,0 +1,141 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./search-bar.css');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const SearchBarControl = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizSearchBarControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    provider: {
+      type: Object
+    }
+  },
+  setup() {
+    var _a;
+    const c = vue3Util.useControlController((...args) => new runtime.SearchBarController(...args));
+    const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const onSearch = () => {
+      c.onSearch();
+    };
+    const onKeydown = (e) => {
+      if (e.code === "Enter") {
+        onSearch();
+      }
+    };
+    const cssVars = vue.computed(() => {
+      if (c.model.quickSearchWidth) {
+        return ns.cssVarBlock({
+          "quick-search-width": `${c.model.quickSearchWidth}px`
+        });
+      }
+      return {};
+    });
+    const onGroupClick = (item) => {
+      c.state.selectedGroupItem = item;
+      onSearch();
+    };
+    if (c.model.enableGroup && c.model.searchBarGroups && ((_a = c.model.searchBarGroups) == null ? void 0 : _a.length) > 0) {
+      c.state.selectedGroupItem = c.model.searchBarGroups[0];
+    }
+    const filterButtonRef = vue.ref();
+    let popover;
+    const showFilter = async () => {
+      popover = ibiz.overlay.createPopover(() => {
+        return vue.createVNode(vue.resolveComponent("iBizFilterTreeControl"), {
+          "onClose": () => {
+            if (popover) {
+              popover.dismiss();
+            }
+          },
+          "controller": c
+        }, null);
+      }, void 0, {
+        placement: "bottom-end",
+        autoClose: true
+      });
+      popover.present(filterButtonRef.value.$el);
+      await popover.onWillDismiss();
+      popover = void 0;
+    };
+    return {
+      c,
+      ns,
+      cssVars,
+      filterButtonRef,
+      onSearch,
+      onKeydown,
+      onGroupClick,
+      showFilter
+    };
+  },
+  render() {
+    const quickSearchSlots = {};
+    if (this.c.model.enableFilter) {
+      quickSearchSlots.append = () => {
+        return vue.createVNode(vue.resolveComponent("el-button"), {
+          "ref": "filterButtonRef",
+          "type": "primary",
+          "onClick": () => this.showFilter()
+        }, {
+          default: () => [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": {
+              cssClass: "funnel-outline"
+            }
+          }, null)]
+        });
+      };
+    }
+    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+      "controller": this.c,
+      "class": [this.ns.b()],
+      "style": this.cssVars
+    }, {
+      default: () => {
+        var _a;
+        return [this.c.model.enableGroup && vue.createVNode("div", {
+          "class": this.ns.b("quick-group")
+        }, [(_a = this.c.model.searchBarGroups) == null ? void 0 : _a.map((groupItem) => {
+          var _a2;
+          return vue.createVNode("span", {
+            "class": [this.ns.b("quick-group-item"), this.ns.is("selected", ((_a2 = this.c.state.selectedGroupItem) == null ? void 0 : _a2.id) === groupItem.id)],
+            "onClick": () => this.onGroupClick(groupItem)
+          }, [groupItem.caption]);
+        })]), this.c.model.enableQuickSearch && vue.createVNode(vue.resolveComponent("el-input"), {
+          "modelValue": this.c.state.query,
+          "onUpdate:modelValue": ($event) => this.c.state.query = $event,
+          "class": this.ns.b("quick-search"),
+          "placeholder": this.c.placeHolder,
+          "clearable": true,
+          "onKeydown": this.onKeydown,
+          "suffix-icon": vue.createVNode("ion-icon", {
+            "onClick": this.onSearch,
+            "class": this.ns.e("search-icon"),
+            "name": "search"
+          }, null)
+        }, _isSlot(quickSearchSlots) ? quickSearchSlots : {
+          default: () => [quickSearchSlots]
+        })];
+      }
+    });
+  }
+});
+
+exports.SearchBarControl = SearchBarControl;

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

@@ -0,0 +1 @@
+@charset "UTF-8";.ibiz-control-searchbar{--ibiz-control-searchbar-quick-search-width:220px;--ibiz-control-searchbar-quick-group-item-padding:var(--ibiz-spacing-tight);--ibiz-control-searchbar-quick-group-item-margin:var(--ibiz-spacing-tight);display:flex;align-items:center;justify-content:flex-start;height:100%}.ibiz-control-searchbar .ibiz-control-searchbar-quick-search{width:var(--ibiz-control-searchbar-quick-search-width);font-size:14px;color:var(--ibiz-text-color);background:var(--ibiz-color-white);border:1px solid var(--ibiz-border-color);border-radius:4px}.ibiz-control-searchbar .ibiz-control-searchbar-quick-group{height:100%}.ibiz-control-searchbar .ibiz-control-searchbar-quick-group .ibiz-control-searchbar-quick-group-item{position:relative;display:inline-block;height:100%;padding:var(--ibiz-control-searchbar-quick-group-item-padding);margin-right:var(--ibiz-control-searchbar-quick-group-item-margin);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-control-searchbar .ibiz-control-searchbar-quick-group .ibiz-control-searchbar-quick-group-item.is-selected::after{position:absolute;bottom:2px;left:0;width:100%;height:2px;content:"";background-color:var(--ibiz-color-primary)}.ibiz-control-searchbar .ibiz-control-searchbar-quick-group .ibiz-control-searchbar-quick-group-item:hover{color:var(--ibiz-color-primary)}.ibiz-control-searchbar .el-input__icon{cursor:pointer}

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

@@ -0,0 +1,16 @@
+'use strict';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class SearchBarProvider {
+  constructor() {
+    __publicField(this, "component", "IBizSearchBarControl");
+  }
+}
+
+exports.SearchBarProvider = SearchBarProvider;

package/lib/control/tab-exp-panel/index.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var tabExpPanel = require('./tab-exp-panel.cjs');
+var tabExpPanel_provider = require('./tab-exp-panel.provider.cjs');
+
+"use strict";
+const IBizTabExpPanelControl = vue3Util.withInstall(
+  tabExpPanel.TabExpPanelControl,
+  function(v) {
+    v.component(tabExpPanel.TabExpPanelControl.name, tabExpPanel.TabExpPanelControl);
+    runtime.registerControlProvider(
+      runtime.ControlType.TAB_EXP_PANEL,
+      () => new tabExpPanel_provider.TabExpPanelProvider()
+    );
+  }
+);
+
+exports.IBizTabExpPanelControl = IBizTabExpPanelControl;
+exports.default = IBizTabExpPanelControl;

package/lib/control/tab-exp-panel/tab-exp-panel.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./tab-exp-panel.css');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const TabExpPanelControl = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTabExpPanelControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    provider: {
+      type: Object
+    },
+    defaultTabName: {
+      type: String,
+      required: false
+    }
+  },
+  setup() {
+    var _a;
+    const c = vue3Util.useControlController((...args) => new runtime.TabExpPanelController(...args));
+    const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const handleTabChange = () => {
+      c.handleTabChange();
+    };
+    const tabPosition = ((_a = c.view.model.tabLayout) == null ? void 0 : _a.toLowerCase()) || "top";
+    return {
+      c,
+      ns,
+      tabPosition,
+      handleTabChange
+    };
+  },
+  render() {
+    let _slot;
+    const {
+      isCreated,
+      tabPages
+    } = this.c.state;
+    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+      "controller": this.c
+    }, {
+      default: () => [isCreated && vue.createVNode(vue.resolveComponent("el-tabs"), {
+        "modelValue": this.c.state.activeName,
+        "onUpdate:modelValue": ($event) => this.c.state.activeName = $event,
+        "tabPosition": this.tabPosition,
+        "onTabChange": this.handleTabChange
+      }, _isSlot(_slot = tabPages.map((tab) => {
+        return vue.createVNode(vue.resolveComponent("el-tab-pane"), {
+          "class": [this.ns.e("tab-item")],
+          "label": tab.caption,
+          "name": tab.tabTag
+        }, {
+          label: () => {
+            return vue.createVNode("span", {
+              "class": [...tab.class]
+            }, [this.c.isShowIcon && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+              "icon": tab.sysImage
+            }, null), this.c.isShowCaption && tab.caption]);
+          }
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      })]
+    });
+  }
+});
+
+exports.TabExpPanelControl = TabExpPanelControl;

package/lib/control/tab-exp-panel/tab-exp-panel.css

@@ -0,0 +1 @@
+.ibiz-control-tabexppanel .el-tabs .el-tabs__header{margin:0}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:0}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-color-primary)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-color-text-0)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-color-primary)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:0}.ibiz-control-tabexppanel .el-tabs.el-tabs--bottom,.ibiz-control-tabexppanel .el-tabs.el-tabs--top{padding-left:var(--ibiz-spacing-base)}

package/lib/control/tab-exp-panel/tab-exp-panel.provider.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class TabExpPanelProvider {
+  constructor() {
+    __publicField(this, "component", "IBizTabExpPanelControl");
+  }
+}
+
+exports.TabExpPanelProvider = TabExpPanelProvider;

package/lib/control/toolbar/export-excel/export-excel.cjs

@@ -0,0 +1,133 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./export-excel.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const IBizExportExcel = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizExportExcel",
+  props: {
+    size: {
+      type: String,
+      required: false
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    btnContent: {
+      type: Function,
+      required: true
+    },
+    controller: {
+      type: Object
+    }
+  },
+  emits: ["exportExcel"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("export-excel");
+    const startPage = vue.ref(1);
+    const endPage = vue.ref(9999);
+    const onCommand = (command, e) => {
+      if (!command) {
+        return;
+      }
+      emit("exportExcel", e, {
+        type: command,
+        startPage: startPage.value,
+        endPage: endPage.value
+      });
+    };
+    return {
+      ns,
+      endPage,
+      startPage,
+      onCommand
+    };
+  },
+  render() {
+    return vue.createVNode(vue.resolveComponent("el-dropdown"), {
+      "size": this.$props.size,
+      "onCommand": this.onCommand,
+      "popper-class": this.ns.b(),
+      "trigger": "click"
+    }, {
+      default: () => {
+        let _slot;
+        return vue.createVNode(vue.resolveComponent("el-button"), {
+          "title": this.item.tooltip,
+          "size": this.$props.size,
+          "class": this.ns.e("button")
+        }, _isSlot(_slot = this.btnContent(this.item)) ? _slot : {
+          default: () => [_slot]
+        });
+      },
+      dropdown: () => {
+        return vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, {
+          default: () => [vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
+            "command": "maxRowCount"
+          }, {
+            default: () => [vue.createTextVNode("\u5BFC\u51FA\u5168\u90E8(\u6700\u5927\u5BFC\u51FA1000\u884C)")]
+          }), vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
+            "command": "activatedPage"
+          }, {
+            default: () => [vue.createTextVNode("\u5BFC\u51FA\u5F53\u524D\u9875")]
+          }), vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
+            "command": "selectedRows"
+          }, {
+            default: () => [vue.createTextVNode("\u5BFC\u51FA\u5F53\u524D\u9009\u4E2D")]
+          }), vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
+            "class": this.ns.e("custom"),
+            "command": ""
+          }, {
+            default: () => [vue.createVNode(vue.resolveComponent("el-input"), {
+              "type": "number",
+              "modelValue": this.startPage,
+              "onUpdate:modelValue": ($event) => this.startPage = $event,
+              "size": "small",
+              "maxlength": "4",
+              "onClick": (event) => {
+                event.stopPropagation();
+              },
+              "onChange": (value) => {
+                this.startPage = value;
+              }
+            }, null), vue.createVNode("span", {
+              "class": "item-text",
+              "onClick": (event) => {
+                event.stopPropagation();
+              }
+            }, [vue.createTextVNode("-")]), vue.createVNode(vue.resolveComponent("el-input"), {
+              "modelValue": this.endPage,
+              "onUpdate:modelValue": ($event) => this.endPage = $event,
+              "size": "small",
+              "type": "number",
+              "maxlength": "4",
+              "onClick": (event) => {
+                event.stopPropagation();
+              }
+            }, null), vue.createVNode("span", {
+              "class": "item-text",
+              "onClick": (event) => {
+                event.stopPropagation();
+              }
+            }, [vue.createTextVNode("\u9875")]), vue.createVNode(vue.resolveComponent("el-button"), {
+              "onClick": (e) => this.onCommand("customPage", e),
+              "size": "small"
+            }, {
+              default: () => [vue.createTextVNode("\u5BFC\u51FA")]
+            })]
+          })]
+        });
+      }
+    });
+  }
+});
+
+exports.IBizExportExcel = IBizExportExcel;

package/lib/control/toolbar/export-excel/export-excel.css

@@ -0,0 +1 @@
+.ibiz-export-excel{width:270px}.ibiz-export-excel__custom{display:flex;gap:10px;align-items:center;justify-content:center}.ibiz-export-excel__custom.el-dropdown-menu__item:focus{color:var(--el-text-color-regular);background-color:transparent}.ibiz-export-excel__custom .el-input{--el-input-text-color:var(--ibiz-color-white)}.ibiz-export-excel__button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base)}.ibiz-export-excel__button>span{display:flex;align-items:center;justify-content:center;font-size:14px;pointer-events:none}.ibiz-export-excel__button i,.ibiz-export-excel__button img{display:inline-block;max-width:var(--ibiz-width-icon-medium);max-height:var(--ibiz-width-icon-medium);margin:0 var(--ibiz-spacing-extra-tight) 0 0}

package/lib/control/toolbar/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var toolbar = require('./toolbar.cjs');
+var toolbar_provider = require('./toolbar.provider.cjs');
+
+"use strict";
+const IBizToolbarControl = vue3Util.withInstall(
+  toolbar.ToolbarControl,
+  function(v) {
+    v.component(toolbar.ToolbarControl.name, toolbar.ToolbarControl);
+    runtime.registerControlProvider(runtime.ControlType.TOOLBAR, () => new toolbar_provider.ToolbarProvider());
+  }
+);
+
+exports.IBizToolbarControl = IBizToolbarControl;
+exports.default = IBizToolbarControl;

package/lib/control/toolbar/toolbar.cjs

@@ -0,0 +1,192 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+var exportExcel = require('./export-excel/export-excel.cjs');
+require('./toolbar.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const btnContent = (item) => {
+  const image = item.sysImage;
+  const result = [];
+  if (item.showIcon && image) {
+    result.push(vue.createVNode(vue.resolveComponent("iBizIcon"), {
+      "icon": image
+    }, null));
+  }
+  if (item.showCaption) {
+    if (item.capLanguageRes) {
+      const caption = ibiz.i18n.t(item.capLanguageRes.lanResTag, item.caption);
+      result.push(caption);
+    } else if (item.caption) {
+      result.push(item.caption);
+    }
+  }
+  return result;
+};
+const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizToolbarControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    provider: {
+      type: Object
+    }
+  },
+  setup() {
+    const c = vue3Util.useControlController((...args) => new runtime.ToolbarController(...args));
+    const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const btnSize = vue.ref("default");
+    const handleClick = async (item, event, params) => {
+      await c.onItemClick(item, event, params);
+    };
+    const renderExtraButtons = (extraButtons) => {
+      return extraButtons.map((button) => {
+        let _slot;
+        return vue.createVNode("div", {
+          "key": button.id,
+          "class": [ns.e("item")]
+        }, [vue.createVNode(vue.resolveComponent("el-button"), {
+          "title": button.tooltip,
+          "size": btnSize.value,
+          "onClick": (e) => handleClick(button, e)
+        }, _isSlot(_slot = btnContent(button)) ? _slot : {
+          default: () => [_slot]
+        })]);
+      });
+    };
+    const renderToolbarItem = (item) => {
+      const itemId = item.id;
+      if (item.itemType === "SEPERATOR") {
+        return vue.createVNode("div", {
+          "key": itemId,
+          "class": [ns.e("item"), ns.e("item-separator")]
+        }, [vue.createTextVNode("|")]);
+      }
+      if (item.itemType === "RAWITEM") {
+        return vue.createVNode("div", {
+          "key": itemId,
+          "class": [ns.e("item"), ns.e("item-rawitem")]
+        }, [btnContent(item)]);
+      }
+      if (item.itemType === "DEUIACTION" && c.state.buttonsState[itemId].visible) {
+        let _slot2;
+        const actionId = item.uiactionId;
+        if (actionId === "exportexcel") {
+          return vue.createVNode(exportExcel.IBizExportExcel, {
+            "class": [ns.e("item"), ns.e("item-deuiaction")],
+            "item": item,
+            "btnContent": btnContent,
+            "size": btnSize.value,
+            "controller": c,
+            "onExportExcel": (e, data) => {
+              handleClick(item, e, data);
+            }
+          }, null);
+        }
+        return vue.createVNode("div", {
+          "key": itemId,
+          "class": [ns.e("item"), ns.e("item-deuiaction"), ns.is("loading", c.state.buttonsState[itemId].loading)]
+        }, [vue.createVNode(vue.resolveComponent("el-button"), {
+          "title": item.tooltip,
+          "size": btnSize.value,
+          "loading": c.state.buttonsState[itemId].loading,
+          "disabled": c.state.buttonsState[itemId].disabled,
+          "onClick": (e) => handleClick(item, e)
+        }, _isSlot(_slot2 = btnContent(item)) ? _slot2 : {
+          default: () => [_slot2]
+        })]);
+      }
+      if (item.itemType === "ITEMS") {
+        return vue.createVNode("div", {
+          "key": itemId,
+          "class": [ns.e("item"), ns.e("item-items")]
+        }, [vue.createVNode(vue.resolveComponent("el-dropdown"), {
+          "trigger": "click",
+          "placement": "bottom-start"
+        }, {
+          default: () => {
+            let _slot3;
+            return vue.createVNode(vue.resolveComponent("el-button"), {
+              "title": item.tooltip,
+              "size": btnSize.value
+            }, _isSlot(_slot3 = btnContent(item)) ? _slot3 : {
+              default: () => [_slot3]
+            });
+          },
+          dropdown: () => {
+            return vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, {
+              default: () => {
+                var _a;
+                return [(_a = item.detoolbarItems) == null ? void 0 : _a.map((item2) => {
+                  let _slot4;
+                  return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
+                    "key": item2.id,
+                    "disabled": c.state.buttonsState[item2.id].disabled,
+                    "onClick": (e) => handleClick(item2, e)
+                  }, _isSlot(_slot4 = btnContent(item2)) ? _slot4 : {
+                    default: () => [_slot4]
+                  });
+                })];
+              }
+            });
+          }
+        })]);
+      }
+      return null;
+    };
+    return {
+      c,
+      btnSize,
+      ns,
+      handleClick,
+      renderExtraButtons,
+      renderToolbarItem
+    };
+  },
+  render() {
+    var _a, _b, _c;
+    const {
+      state
+    } = this.c;
+    let content = null;
+    if (state.isCreated) {
+      content = [
+        // 绘制最前方的额外按钮
+        ((_a = state.extraButtons.before) == null ? void 0 : _a.length) > 0 && this.renderExtraButtons(state.extraButtons.before),
+        (_b = this.modelData.detoolbarItems) == null ? void 0 : _b.map((item, index) => {
+          var _a2;
+          const toolbarItemNode = this.renderToolbarItem(item);
+          if ((_a2 = state.extraButtons[index]) == null ? void 0 : _a2.length) {
+            return [toolbarItemNode, this.renderExtraButtons(state.extraButtons[index])];
+          }
+          return toolbarItemNode;
+        }),
+        // 绘制最后方的额外按钮
+        ((_c = state.extraButtons.after) == null ? void 0 : _c.length) > 0 && this.renderExtraButtons(state.extraButtons.after)
+      ];
+    }
+    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+      "controller": this.c,
+      "class": [this.ns.m(state.viewMode.toLowerCase())]
+    }, _isSlot(content) ? content : {
+      default: () => [content]
+    });
+  }
+});
+
+exports.ToolbarControl = ToolbarControl;

package/lib/control/toolbar/toolbar.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ibiz-control-toolbar{--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);display:flex}.ibiz-control-toolbar__item{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar__item .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding)}.ibiz-control-toolbar__item .el-button>span{display:flex;align-items:center;justify-content:center;font-size:14px;pointer-events:none}.ibiz-control-toolbar__item .el-button i,.ibiz-control-toolbar__item .el-button img{display:inline-block;max-width:var(--ibiz-control-toolbar-icon-max-width);max-height:var(--ibiz-control-toolbar-icon-max-height);margin:var(--ibiz-control-toolbar-icon-margin)}.ibiz-control-toolbar__item.is-loading .el-button .ibiz-icon{display:none}.ibiz-control-toolbar__item-separator{color:var(--ibiz-control-toolbar-separator-color)}.ibiz-control-toolbar__item-separator+.ibiz-control-toolbar__item-separator,.ibiz-control-toolbar__item-separator:first-child{display:none}