@ibiz-template/vue3-components 0.7.27 → 0.7.28-alpha.0

package/lib/control/toolbar/toolbar.cjs

@@ -60,11 +60,20 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const c = vue3Util.useControlController((...args) => new runtime.ToolbarController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
+    const ns2 = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase(), "-actions"));
     const btnSize = vue.ref("default");
     const toolbarStyle = (_a = c.model.toolbarStyle) == null ? void 0 : _a.toLowerCase();
     const handleClick = async (item, event, params) => {
       await c.onItemClick(item, event, params);
     };
+    const handleActionClick = async (item, event, params) => {
+      const tempItem = {};
+      Object.assign(tempItem, {
+        ...item,
+        itemType: item.detailType
+      });
+      await handleClick(tempItem, event, params);
+    };
     const renderExtraButtons = (extraButtons) => {
       return extraButtons.map((button) => {
         let _slot;
@@ -184,8 +193,128 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
         }
       });
     };
+    const renderActionButton = (detail) => {
+      if (c.state.buttonsState[detail.id].visible) {
+        let _slot4;
+        return [vue.createVNode(vue.resolveComponent("el-button"), {
+          "title": ibiz.env.enableTitle ? detail.caption : void 0,
+          "size": btnSize.value,
+          "class": [calcCssName(detail)],
+          "loading": c.state.buttonsState[detail.id].loading,
+          "disabled": c.state.buttonsState[detail.id].disabled,
+          "onClick": (e) => handleActionClick(detail, e)
+        }, _isSlot(_slot4 = btnContent(detail)) ? _slot4 : {
+          default: () => [_slot4]
+        })];
+      }
+      return null;
+    };
+    const renderDropdownItem = (detail) => {
+      if (c.state.buttonsState[detail.id].visible) {
+        let _slot5;
+        const disabled = c.state.buttonsState[detail.id].disabled;
+        return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
+          "class": [ns2.be("dropdown-popper", "dropdown-item"), ns2.is("disabled", disabled)]
+        }, _isSlot(_slot5 = renderActionButton(detail)) ? _slot5 : {
+          default: () => [_slot5]
+        });
+      }
+      return null;
+    };
+    const renderActionGroupItems = (item) => {
+      const {
+        uiactionGroup
+      } = item;
+      if (uiactionGroup && uiactionGroup.uiactionGroupDetails) {
+        const {
+          uiactionGroupDetails
+        } = uiactionGroup;
+        const enableDropdown = uiactionGroupDetails.length > 0;
+        const groupButtonStyle = item.buttonStyle || "";
+        return vue.createVNode(vue.resolveComponent("el-dropdown"), {
+          "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item))]
+        }, {
+          default: () => renderActionButton(item),
+          dropdown: () => {
+            let _slot6;
+            return enableDropdown && vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot6 = uiactionGroupDetails.map((detail) => renderDropdownItem(detail))) ? _slot6 : {
+              default: () => [_slot6]
+            });
+          }
+        });
+      }
+      return null;
+    };
+    const getFirstIndex = (details, index) => {
+      const firstItem = details.slice(index, 1);
+      if (firstItem[0]) {
+        if (c.state.buttonsState[firstItem[0].id].visible) {
+          return index;
+        }
+        return getFirstIndex(details, index + 1);
+      }
+      return -1;
+    };
+    const renderActionGroupItemx = (item) => {
+      const {
+        uiactionGroup
+      } = item;
+      if (uiactionGroup && uiactionGroup.uiactionGroupDetails) {
+        const {
+          uiactionGroupDetails
+        } = uiactionGroup;
+        const firstIndex = getFirstIndex(uiactionGroupDetails, 0);
+        if (firstIndex !== -1) {
+          const firstItem = uiactionGroupDetails.slice(firstIndex, 1);
+          const remainders = uiactionGroupDetails.slice(firstIndex + 1);
+          const enableDropdown = remainders.length > 0;
+          const groupButtonStyle = item.buttonStyle || "";
+          return vue.createVNode(vue.resolveComponent("el-dropdown"), {
+            "split-button": enableDropdown,
+            "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item))]
+          }, {
+            default: () => renderActionButton(firstItem[0]),
+            dropdown: () => {
+              let _slot7;
+              return enableDropdown && vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot7 = remainders.map((detail) => renderDropdownItem(detail))) ? _slot7 : {
+                default: () => [_slot7]
+              });
+            }
+          });
+        }
+      }
+      return null;
+    };
+    const renderActionGroupItem = (item) => {
+      const {
+        uiactionGroup
+      } = item;
+      if (uiactionGroup && uiactionGroup.uiactionGroupDetails) {
+        const {
+          uiactionGroupDetails
+        } = uiactionGroup;
+        return uiactionGroupDetails.map((detail) => vue.createVNode("div", {
+          "class": ns2.e("item-deuiaction")
+        }, [renderActionButton(detail)]));
+      }
+      return null;
+    };
+    const renderActionGroup = (item) => {
+      const {
+        groupExtractMode
+      } = item;
+      switch (groupExtractMode) {
+        case "ITEMS":
+          return renderActionGroupItems(item);
+        case "ITEMX":
+          return renderActionGroupItemx(item);
+        case "ITEM":
+        default:
+          return renderActionGroupItem(item);
+      }
+    };
     const renderToolbarItem = (item) => {
-      var _a2, _b;
+      var _a2, _b, _c;
       const itemId = item.id;
       const visible = (_a2 = c.state.buttonsState[itemId]) == null ? void 0 : _a2.visible;
       const provider = c.itemProviders[itemId];
@@ -216,7 +345,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
         }, null)]);
       }
       if (item.itemType === "DEUIACTION") {
-        let _slot4;
+        let _slot8;
         const actionId = item.uiactionId;
         const buttonType = (_b = item.buttonStyle) == null ? void 0 : _b.toLowerCase();
         if (actionId === "exportexcel") {
@@ -252,20 +381,27 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
           "loading": c.state.buttonsState[itemId].loading,
           "disabled": c.state.buttonsState[itemId].disabled,
           "onClick": (e) => handleClick(item, e)
-        }, _isSlot(_slot4 = btnContent(item)) ? _slot4 : {
-          default: () => [_slot4]
+        }, _isSlot(_slot8 = btnContent(item)) ? _slot8 : {
+          default: () => [_slot8]
         })]);
       }
       if (item.itemType === "ITEMS") {
-        let _slot5;
-        const groupButtonStyle = item.buttonStyle || "";
+        let _slot9;
+        const groupItem = item;
+        const groupButtonStyle = groupItem.buttonStyle || "";
+        if (groupItem.groupExtractMode && groupItem.uiactionGroup) {
+          const extractName = "extract-mode-".concat(((_c = groupItem.groupExtractMode) == null ? void 0 : _c.toLowerCase()) || "item");
+          return vue.createVNode("div", {
+            "class": [ns2.b(), ns2.e(extractName), ns2.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)]
+          }, [renderActionGroup(item)]);
+        }
         return vue.createVNode(vue.resolveComponent("el-menu"), {
           "mode": "horizontal",
           "class": [ns.e("menu"), ns.em("menu", groupButtonStyle.toLowerCase()), calcCssName(item)],
           "ellipsis": false,
           "menu-trigger": "hover"
-        }, _isSlot(_slot5 = renderSubmenu(item)) ? _slot5 : {
-          default: () => [_slot5]
+        }, _isSlot(_slot9 = renderSubmenu(item)) ? _slot9 : {
+          default: () => [_slot9]
         });
       }
       return null;

package/lib/control/toolbar/toolbar.css

@@ -1 +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-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);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.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;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-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}.ibiz-control-toolbar__menu.el-menu{height:var(--ibiz-control-toolbar-menu-height);margin:var(--ibiz-control-toolbar-item-margin);border:none}.ibiz-control-toolbar__menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title{display:flex;align-items:center;justify-content:center;padding:0;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary);border-bottom:none;border-radius:var(--ibiz-border-radius-small)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-sub-menu__icon-arrow{display:none}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span{display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title>span{display:flex;align-items:center;justify-content:center;line-height:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper{--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-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);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title{padding:0 10px;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu-rawitem{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item.is-active{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .el-button{justify-content:flex-start;width:100%;padding:0;--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent}
+@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-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);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.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;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-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}.ibiz-control-toolbar__menu.el-menu{height:var(--ibiz-control-toolbar-menu-height);margin:var(--ibiz-control-toolbar-item-margin);border:none}.ibiz-control-toolbar__menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title{display:flex;align-items:center;justify-content:center;padding:0;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary);border-bottom:none;border-radius:var(--ibiz-border-radius-small)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-sub-menu__icon-arrow{display:none}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span{display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title>span{display:flex;align-items:center;justify-content:center;line-height:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper{--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-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);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title{padding:0 10px;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu-rawitem{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item.is-active{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .el-button{justify-content:flex-start;width:100%;padding:0;--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent}.ibiz-control-toolbar-actions{display:flex;margin:var(--ibiz-control-toolbar-item-margin);white-space:normal;visibility:visible}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group{display:flex;white-space:normal}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button:nth-child(2):focus-visible{outline:0;outline-offset:0}.ibiz-control-toolbar-actions__item-deuiaction{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar-actions__item-deuiaction:first-child{margin-left:0}.ibiz-control-toolbar-actions__item-deuiaction:last-child{margin-right:0}.ibiz-control-toolbar-actions .el-button>span{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-actions-dropdown-popper{--el-popover-padding:var(--ibiz-spacing-none);min-width:200px;--ibiz-control-toolbar-actions-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-toolbar-actions-dropdown-item-height:36px}.ibiz-control-toolbar-actions-dropdown-popper__dropdown-item{height:var(--ibiz-control-toolbar-actions-dropdown-item-height)}.ibiz-control-toolbar-actions-dropdown-popper.is-disabled{display:none}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item.is-disabled{background-color:transparent;opacity:.25}.ibiz-control-toolbar-actions-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;display:block;width:100%;padding:var(--ibiz-control-toolbar-actions-popover-button-padding);margin:var(--ibiz-spacing-none);color:var(--ibiz-color-primary-text);text-align:left;background-color:transparent;border-radius:0}.ibiz-control-toolbar-actions-dropdown-popper .el-button:hover{color:var(--ibiz-color-primary-text);background-color:transparent}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}

package/lib/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.cjs

@@ -35,7 +35,6 @@ const IBizEmojiPicker = /* @__PURE__ */ vue.defineComponent({
       emoji.value = "";
       visible.value = false;
       emit("change", "");
-      console.log("emojiRef", emojiRef.value);
       emojiRef.value.click();
     };
     const onSelect = (val) => {
@@ -45,13 +44,7 @@ const IBizEmojiPicker = /* @__PURE__ */ vue.defineComponent({
     };
     vue.watch(() => props.value, (newVal, oldVal) => {
       if (newVal !== oldVal) {
-        if (!newVal) {
-          emoji.value = "";
-        } else if (Number.isNaN(Number(newVal)) && core.isBase64("".concat(newVal))) {
-          emoji.value = core.base64ToStr("".concat(newVal));
-        } else {
-          emoji.value = newVal.toString();
-        }
+        emoji.value = newVal && core.isEmoji("".concat(newVal)) ? core.base64ToStr(newVal) : newVal;
       }
     }, {
       immediate: true

package/lib/editor/html/html-editor.controller.cjs

@@ -1,8 +1,15 @@
 'use strict';
 
+var vue = require('vue');
 var runtime = require('@ibiz-template/runtime');
+var core = require('@ibiz-template/core');
 var editor = require('@wangeditor/editor');
-var aiModules = require('./wang-editor/ai/ai-modules.cjs');
+require('./wang-editor/index.cjs');
+var aiModule = require('./wang-editor/module/ai-module.cjs');
+var emoji = require('./wang-editor/element/emoji.cjs');
+var emojiModule = require('./wang-editor/module/emoji-module.cjs');
+var plugin = require('./wang-editor/plugin/plugin.cjs');
+var emoji$1 = require('./wang-editor/component/emoji/emoji.cjs');
 
 "use strict";
 var __defProp = Object.defineProperty;
@@ -45,9 +52,55 @@ class HtmlEditorController extends runtime.EditorController {
      * @type {boolean}
      */
     __publicField(this, "chatCompletion", false);
+    /**
+     * wangEditor 实例
+     *
+     * @private
+     * @type {IDomEditor}
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "wangEditor");
+    /**
+     * 气泡容器
+     *
+     * @type {(IOverlayPopoverContainer | null)}
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "overlay", null);
+    /**
+     * 清除回调
+     *
+     * @private
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "cleanup", core.NOOP);
+    /**
+     * 预定义阻止捕获事件code
+     *
+     * @private
+     * @type {number[]}
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "presetPreventEvents", [13, 38, 40]);
+    /**
+     * 预定义阻止冒泡事件code
+     *
+     * @private
+     * @type {number[]}
+     * @memberof HtmlEditorController
+     */
+    __publicField(this, "presetPreventPropEvents", [27]);
   }
+  /**
+   * 初始化
+   *
+   * @protected
+   * @return {*}  {Promise<void>}
+   * @memberof HtmlEditorController
+   */
   async onInit() {
     await super.onInit();
+    this.customRegister();
     if (this.editorParams) {
       const { uploadParams, exportParams } = this.editorParams;
       if (uploadParams) {
@@ -87,14 +140,124 @@ class HtmlEditorController extends runtime.EditorController {
         }
       }
     }
+  }
+  /**
+   * 自定义注册
+   *
+   * @private
+   * @memberof HtmlEditorController
+   */
+  customRegister() {
     if (!window.aichartRegister) {
-      editor.Boot.registerMenu({
-        key: "aichart",
-        factory() {
-          return new aiModules.AIMenu();
+      editor.Boot.registerMenu(aiModule.AIMenu);
+      window.aichartRegister = true;
+    }
+    if (!window.customElements.get("emoji-elem")) {
+      window.customElements.define("emoji-elem", emoji.EmojiElem);
+    }
+    if (!window.emojiIsRegiter) {
+      editor.Boot.registerModule(emojiModule.EmojiModule);
+      window.emojiIsRegiter = true;
+    }
+    if (!window.wangEditorPlugin) {
+      editor.Boot.registerPlugin(plugin.Plugin);
+      window.wangEditorPlugin = true;
+    }
+  }
+  /**
+   * wangEditor 创建完成
+   *
+   * @private
+   * @param {IDomEditor} editor
+   * @memberof HtmlEditorController
+   */
+  onCreated(editor) {
+    this.wangEditor = editor;
+    this.listenEvent();
+  }
+  /**
+   * 监听事件
+   *
+   * @private
+   * @memberof HtmlEditorController
+   */
+  listenEvent() {
+    const container = this.wangEditor.getEditableContainer();
+    this.wangEditor.on("openEmojiSelect", () => this.openEmojiSelect());
+    this.cleanup = core.listenJSEvent(container, "keydown", (event) => {
+      var _a;
+      if (this.overlay && this.presetPreventEvents.includes(event.keyCode)) {
+        event.preventDefault();
+      }
+      if (this.overlay && this.presetPreventPropEvents.includes(event.keyCode)) {
+        event.stopPropagation();
+        (_a = this.overlay) == null ? void 0 : _a.dismiss();
+      }
+    });
+  }
+  /**
+   * 打开表情选择
+   *
+   * @memberof HtmlEditorController
+   */
+  async openEmojiSelect() {
+    const domSelection = document.getSelection();
+    const { focusNode } = domSelection;
+    if (focusNode) {
+      this.overlay = ibiz.overlay.createPopover(
+        (modal) => {
+          return vue.h(emoji$1.Emoji, {
+            modal
+          });
+        },
+        void 0,
+        {
+          width: "auto",
+          noArrow: true,
+          autoClose: true,
+          placement: "bottom-start"
         }
+      );
+      await this.overlay.present(focusNode.parentNode);
+      this.overlay.onWillDismiss().then((result) => {
+        var _a;
+        const _result = result;
+        const item = (_a = _result.data) == null ? void 0 : _a[0];
+        if (_result.ok && item) {
+          this.addEmojiNode(item);
+        }
+        this.overlay = null;
       });
-      window.aichartRegister = true;
+    }
+  }
+  /**
+   * 添加表情
+   *
+   * @param {string} data
+   * @memberof HtmlEditorController
+   */
+  addEmojiNode(data) {
+    const emojiNode = {
+      data,
+      type: "emoji",
+      children: [{ text: "" }]
+    };
+    this.wangEditor.restoreSelection();
+    this.wangEditor.insertNode(emojiNode);
+    this.wangEditor.move(1);
+  }
+  /**
+   * 销毁
+   *
+   * @private
+   * @memberof HtmlEditorController
+   */
+  onDestroyed() {
+    if (this.cleanup !== core.NOOP) {
+      this.cleanup();
+    }
+    if (this.overlay) {
+      this.overlay.dismiss();
     }
   }
 }

package/lib/editor/html/wang-editor/component/emoji/emoji.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@ibiz-template/core');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./emoji.css');
+
+"use strict";
+const Emoji = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizHtmlEmoji",
+  props: {
+    modal: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("html-emoji");
+    const onSelect = (val) => {
+      const modalData = {
+        ok: true,
+        data: [{
+          emoji: core.strToBase64(val.data)
+        }]
+      };
+      props.modal.dismiss(modalData);
+    };
+    return {
+      ns,
+      onSelect
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode(vue.resolveComponent("iBizEmojiSelect"), {
+      "dark": true,
+      "continuousList": true,
+      "onSelect": this.onSelect
+    }, null)]);
+  }
+});
+
+exports.Emoji = Emoji;

package/lib/editor/html/wang-editor/component/emoji/emoji.css

@@ -0,0 +1 @@
+.ibiz-html-emoji{width:auto;height:auto}

package/lib/editor/html/wang-editor/component/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var emoji = require('./emoji/emoji.cjs');
+
+"use strict";
+
+exports.Emoji = emoji.Emoji;

package/lib/editor/html/wang-editor/element/emoji.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+"use strict";
+class EmojiElem extends HTMLElement {
+  // 监听的 attr
+  static get observedAttributes() {
+    return ["data-value"];
+  }
+  attributeChangedCallback(tag, oldValue, newValue) {
+    if (tag === "data-value") {
+      if (newValue && oldValue === newValue)
+        return;
+      const shadow = this.attachShadow({ mode: "open" });
+      const document = shadow.ownerDocument;
+      const box = document.createElement("span");
+      box.innerHTML = newValue;
+      box.part.add("box");
+      box.classList.add("emoji-elem_box");
+      shadow.appendChild(box);
+    }
+  }
+}
+
+exports.EmojiElem = EmojiElem;

package/lib/editor/html/wang-editor/element/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var emoji = require('./emoji.cjs');
+
+"use strict";
+
+exports.EmojiElem = emoji.EmojiElem;

package/lib/editor/html/wang-editor/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+require('./module/index.cjs');
+require('./element/index.cjs');
+require('./plugin/index.cjs');
+require('./component/index.cjs');
+var aiModule = require('./module/ai-module.cjs');
+var emojiModule = require('./module/emoji-module.cjs');
+var emoji = require('./element/emoji.cjs');
+var plugin = require('./plugin/plugin.cjs');
+var emoji$1 = require('./component/emoji/emoji.cjs');
+
+"use strict";
+
+exports.AIMenu = aiModule.AIMenu;
+exports.EmojiModule = emojiModule.EmojiModule;
+exports.EmojiElem = emoji.EmojiElem;
+exports.Plugin = plugin.Plugin;
+exports.Emoji = emoji$1.Emoji;

package/lib/editor/html/wang-editor/module/ai-module.cjs

@@ -0,0 +1,78 @@
+'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 AIButtonMenu {
+  constructor() {
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof AIButtonMenu
+     */
+    __publicField(this, "title", "AI");
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof AIButtonMenu
+     */
+    __publicField(this, "iconSvg", '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="13" font-size="16" fill="black">AI</text></svg>');
+    /**
+     *
+     *
+     * @type {string}
+     * @memberof AIButtonMenu
+     */
+    __publicField(this, "tag", "button");
+  }
+  /**
+   * 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
+   *
+   * @return {*}  {boolean}
+   * @memberof AIButtonMenu
+   */
+  isActive() {
+    return false;
+  }
+  /**
+   * 获取菜单执行时的 value ，用不到则返回空 字符串或 false
+   *
+   * @return {*}  {(string | boolean)}
+   * @memberof AIButtonMenu
+   */
+  getValue() {
+    return "aichart";
+  }
+  /**
+   * 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
+   *
+   * @return {*}  {boolean}
+   * @memberof AIButtonMenu
+   */
+  isDisabled() {
+    return false;
+  }
+  /**
+   * 点击菜单时触发的函数
+   *
+   * @param {IDomEditor} editor
+   * @memberof AIButtonMenu
+   */
+  exec(editor) {
+    editor.emit("aiClick");
+  }
+}
+const AIMenu = {
+  key: "aichart",
+  factory() {
+    return new AIButtonMenu();
+  }
+};
+
+exports.AIMenu = AIMenu;