@ibiz-template/mob-vue3-components 0.7.41-alpha.13 → 0.7.41-alpha.16

package/es/locale/en/index.mjs

@@ -202,7 +202,8 @@ var index = {
     upload: {
       uploadJsonFormatErr: "The configuration of uploadparams did not follow the standard JSON format",
       exportJsonFormatErr: "The configuration of exportparams did not follow the standard JSON format",
-      cancelUpload: "Cancel Upload"
+      cancelUpload: "Cancel Upload",
+      compressError: "Image compression failed"
     },
     emojiPicker: {
       addEmoji: "Add emoji"

package/es/locale/zh-CN/index.d.ts

@@ -102,6 +102,7 @@ declare const _default: {
     };
     runtime: {
         common: {
+            undefined: string;
             unrealized: string;
             noExplanation: string;
         };
@@ -931,6 +932,7 @@ declare const _default: {
             uploadJsonFormatErr: string;
             exportJsonFormatErr: string;
             cancelUpload: string;
+            compressError: string;
         };
         emojiPicker: {
             addEmoji: string;

package/es/locale/zh-CN/index.mjs

@@ -187,7 +187,8 @@ var index = {
     upload: {
       uploadJsonFormatErr: "\u914D\u7F6Euploadparams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F",
       exportJsonFormatErr: "\u914D\u7F6Eexportparams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F",
-      cancelUpload: "\u53D6\u6D88\u4E0A\u4F20"
+      cancelUpload: "\u53D6\u6D88\u4E0A\u4F20",
+      compressError: "\u56FE\u7247\u538B\u7F29\u5931\u8D25"
     },
     emojiPicker: {
       addEmoji: "\u6DFB\u52A0\u8868\u60C5"

package/es/panel-component/panel-button-list/panel-button-list.controller.d.ts

@@ -1,4 +1,4 @@
-import { PanelController, PanelItemController, PanelNotifyState } from '@ibiz-template/runtime';
+import { PanelController, PanelNotifyState, PanelItemController } from '@ibiz-template/runtime';
 import { IPanelButtonList } from '@ibiz/model-core';
 import { PanelButtonListState } from './panel-button-list.state';
 /**

package/es/panel-component/panel-button-list/panel-button-list.controller.mjs

@@ -1,4 +1,4 @@
-import { PanelItemController, ButtonContainerState, UIActionButtonState, UIActionUtil } from '@ibiz-template/runtime';
+import { PanelItemController, ButtonContainerState, getAllUIActionItems, UIActionButtonState, UIActionUtil } from '@ibiz-template/runtime';
 import { PanelButtonListState } from './panel-button-list.state.mjs';
 
 "use strict";
@@ -45,20 +45,22 @@ class PanelButtonListController extends PanelItemController {
    * @memberof PanelButtonListController
    */
   async initButtonsState() {
-    var _a;
     const { buttonListType, uiactionGroup, panelButtons } = this.model;
     if (buttonListType === "UIACTIONGROUP") {
-      (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.forEach((detail) => {
-        if (detail.uiactionId) {
-          const buttonState = new UIActionButtonState(
-            detail.id,
-            this.model.appId,
-            detail.uiactionId,
-            detail
-          );
-          this.state.buttonsState.addState(detail.id, buttonState);
-        }
-      });
+      if (uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) {
+        const actions = getAllUIActionItems(uiactionGroup.uiactionGroupDetails);
+        actions.forEach((detail) => {
+          if (detail.uiactionId) {
+            const buttonState = new UIActionButtonState(
+              detail.id,
+              detail.appId,
+              detail.uiactionId,
+              detail
+            );
+            this.state.buttonsState.addState(detail.id, buttonState);
+          }
+        });
+      }
     } else {
       panelButtons == null ? void 0 : panelButtons.forEach((button) => {
         if (button.uiactionId) {
@@ -110,12 +112,11 @@ class PanelButtonListController extends PanelItemController {
    * @memberof PanelButtonListController
    */
   getModelById(id) {
-    var _a;
     const { buttonListType, uiactionGroup, panelButtons } = this.model;
-    if (buttonListType === "UIACTIONGROUP")
-      return (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.find(
-        (detail) => detail.id === id
-      );
+    if (buttonListType === "UIACTIONGROUP") {
+      const actions = getAllUIActionItems(uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails);
+      return actions.find((detail) => detail.id === id);
+    }
     return panelButtons == null ? void 0 : panelButtons.find((button) => button.id === id);
   }
   /**

package/es/util/store/view-stack/view-stack.mjs

@@ -27,6 +27,11 @@ const useViewStack = defineStore("viewStack", () => {
     cacheKeys: [],
     currentKey: ""
   });
+  const clear = () => {
+    viewStack.cacheKeys = [];
+    viewStack.currentKey = "";
+    viewInfoMap.clear();
+  };
   const updateViewInfo = (key, route) => {
     if (viewInfoMap.has(key)) {
       const info = viewInfoMap.get(key);
@@ -61,7 +66,12 @@ const useViewStack = defineStore("viewStack", () => {
         if (key === viewStack.currentKey) {
           updateViewInfo(key, to);
         } else if (viewStack.cacheKeys.includes(key)) {
-          pop();
+          if (key === "/-/index/-") {
+            clear();
+            push(key, to);
+          } else {
+            pop();
+          }
         } else {
           push(key, to);
         }

package/lib/common/action-group/action-group.cjs

@@ -0,0 +1,176 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('../../util/index.cjs');
+require('./action-group.css');
+var buttonUtil = require('../../util/button-util/button-util.cjs');
+
+"use strict";
+const IBizActionGroup = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizActionGroup",
+  props: {
+    actionDetail: {
+      type: Object,
+      required: true
+    },
+    actionsState: {
+      type: Object,
+      required: true
+    },
+    popoverClassName: {
+      type: String
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    }
+  },
+  emits: {
+    actionClick: (detail, event) => true,
+    popoverVisibleChange: (visible) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("action-group");
+    const showPopover = vue.ref(false);
+    const buttonRef = vue.ref();
+    const childPopover = vue.ref(false);
+    const details = vue.computed(() => {
+      if (props.actionDetail.detailType === "DEUIACTIONGROUP" && props.actionDetail.refUIActionGroup)
+        return props.actionDetail.refUIActionGroup.uiactionGroupDetails || [];
+      return [];
+    });
+    const visible = vue.computed(() => {
+      const visible2 = details.value.some((item) => {
+        var _a, _b;
+        return (_b = (_a = props.actionsState) == null ? void 0 : _a[item.id]) == null ? void 0 : _b.visible;
+      });
+      return visible2;
+    });
+    const caption = vue.computed(() => {
+      var _a, _b;
+      return ((_a = props.actionDetail.refUIActionGroup) == null ? void 0 : _a.name) || ((_b = props.actionDetail.refUIActionGroup) == null ? void 0 : _b.id);
+    });
+    const placement = vue.computed(() => {
+      if (!buttonRef.value)
+        return props.direction === "horizontal" ? "right" : "bottom";
+      const {
+        innerWidth,
+        innerHeight
+      } = window;
+      const {
+        offsetLeft: x,
+        offsetTop: y,
+        offsetWidth: width
+      } = buttonRef.value.$el;
+      const centerX = innerWidth - width - 128;
+      const centerY = details.value.length ? innerHeight - details.value.length * 44 : innerHeight / 2;
+      if (y > centerY) {
+        if (props.direction === "horizontal")
+          return x > centerX ? "left-end" : "right-end";
+        return x > centerX ? "top-end" : "top-start";
+      }
+      if (props.direction === "horizontal")
+        return x > centerX ? "left-start" : "right-start";
+      return x > centerX ? "bottom-end" : "bottom-start";
+    });
+    const handleClick = async (detail, event, closePopover = false) => {
+      if (closePopover)
+        showPopover.value = false;
+      emit("actionClick", detail, event);
+    };
+    const onPopoverVisibleChange = (visible2) => {
+      emit("popoverVisibleChange", visible2);
+    };
+    const renderSeparator = (visible2) => {
+      if (visible2)
+        return vue.createVNode("div", {
+          "class": ns.e("separator")
+        }, null);
+    };
+    const renderActions = () => {
+      var _a;
+      return (_a = details.value) == null ? void 0 : _a.map((detail) => {
+        var _a2, _b, _c;
+        if (detail.detailType === "DEUIACTIONGROUP")
+          return [renderSeparator(detail.addSeparator), vue.createVNode(vue.resolveComponent("iBizActionGroup"), {
+            "actionDetail": detail,
+            "onActionClick": handleClick,
+            "actionsState": props.actionsState,
+            "popoverClassName": props.popoverClassName,
+            "onPopoverVisibleChange": (visible2) => childPopover.value = visible2
+          }, null)];
+        if ((_b = (_a2 = props.actionsState) == null ? void 0 : _a2[detail.id]) == null ? void 0 : _b.visible)
+          return [renderSeparator(detail.addSeparator), vue.createVNode(vue.resolveComponent("van-button"), {
+            "size": "small",
+            "type": buttonUtil.convertBtnType(detail.buttonStyle),
+            "text": detail.showCaption ? detail.caption : "",
+            "onClick": (e) => handleClick(detail, e, true),
+            "disabled": props.actionsState[detail.id].disabled,
+            "class": [ns.e("item"), (_c = detail.sysCss) == null ? void 0 : _c.codeName]
+          }, {
+            icon: () => {
+              return detail.showIcon && detail.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                "icon": detail.sysImage
+              }, null);
+            }
+          })];
+        return null;
+      });
+    };
+    return {
+      ns,
+      visible,
+      caption,
+      buttonRef,
+      placement,
+      showPopover,
+      childPopover,
+      renderActions,
+      onPopoverVisibleChange
+    };
+  },
+  render() {
+    if (this.visible)
+      return vue.createVNode(vue.resolveComponent("van-popover"), {
+        "placement": this.placement,
+        "show": this.showPopover,
+        "onUpdate:show": ($event) => this.showPopover = $event,
+        "close-on-click-outside": !this.childPopover,
+        "class": [this.ns.b(), this.popoverClassName],
+        "onOpen": () => this.onPopoverVisibleChange(true),
+        "onClose": () => this.onPopoverVisibleChange(false)
+      }, {
+        reference: () => {
+          return vue.createVNode(vue.resolveComponent("van-button"), {
+            "size": "small",
+            "ref": "buttonRef",
+            "class": this.ns.e("button"),
+            "type": buttonUtil.convertBtnType(this.actionDetail.buttonStyle)
+          }, {
+            icon: () => {
+              return this.actionDetail.showIcon && this.actionDetail.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                "icon": this.actionDetail.sysImage
+              }, null);
+            },
+            default: () => {
+              return [vue.createVNode("div", {
+                "class": this.ns.em("button", "text")
+              }, [this.actionDetail.showCaption ? this.caption : ""]), vue.createVNode("ion-icon", {
+                "class": this.ns.em("button", "icon"),
+                "name": this.direction === "horizontal" ? "chevron-forward-outline" : "chevron-down-outline"
+              }, null)];
+            }
+          });
+        },
+        default: () => {
+          return this.renderActions();
+        }
+      });
+    return void 0;
+  }
+});
+
+exports.IBizActionGroup = IBizActionGroup;

package/lib/common/action-group/action-group.css

@@ -0,0 +1 @@
+.ibiz-action-group__separator{width:100%;height:.0625rem;display:inline-block;vertical-align:middle;background-color:var(--ibiz-color-border)}.ibiz-action-group__button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-action-group .van-popover__content{display:flex;flex-direction:column}.ibiz-action-group .van-popover__content .van-button{padding:0;font-size:var(--van-popover-action-font-size);line-height:var(--van-line-height-md);width:var(--van-popover-action-width);height:var(--van-popover-action-height);border-color:var(--ibiz-color-white)}.ibiz-action-group .van-popover__content .van-button:before{border-color:var(--ibiz-color-white)}.ibiz-action-group .van-popover__content .van-button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}

package/lib/common/action-toolbar/action-toolbar.cjs

@@ -32,27 +32,40 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
       event.stopPropagation();
       emit("action-click", detail, event);
     };
+    const renderSeparator = () => {
+      return vue.createVNode("div", {
+        "class": ns.e("separator")
+      }, null);
+    };
     return {
       ns,
-      handleClick
+      handleClick,
+      renderSeparator
     };
   },
   render() {
     const details = this.actionDetails || [];
-    if (this.mode === "buttons") {
+    if (this.mode === "buttons")
       return vue.createVNode("div", {
         "class": [this.ns.b(), this.ns.m("buttons")]
       }, [details.length > 0 && details.map((detail) => {
-        if (this.actionsState[detail.id].visible) {
-          return [detail.addSeparator && vue.createVNode("div", {
-            "class": this.ns.e("separator")
-          }, null), vue.createVNode(vue.resolveComponent("van-button"), {
+        var _a, _b, _c;
+        if (detail.detailType === "DEUIACTIONGROUP")
+          return [detail.addSeparator && this.renderSeparator(), vue.createVNode(vue.resolveComponent("iBizActionGroup"), {
+            "direction": "vertical",
+            "actionDetail": detail,
+            "actionsState": this.actionsState,
+            "onActionClick": this.handleClick,
+            "popoverClassName": this.ns.b("action-group")
+          }, null)];
+        if ((_b = (_a = this.actionsState) == null ? void 0 : _a[detail.id]) == null ? void 0 : _b.visible) {
+          return [detail.addSeparator && this.renderSeparator(), vue.createVNode(vue.resolveComponent("van-button"), {
             "size": "small",
             "text": detail.showCaption ? detail.caption : "",
             "type": buttonUtil.convertBtnType(detail.buttonStyle),
             "onClick": (e) => this.handleClick(detail, e),
             "disabled": this.actionsState[detail.id].disabled,
-            "class": [this.ns.e("item"), this.ns.is("disabled", false)]
+            "class": [this.ns.e("item"), this.ns.is("disabled", false), (_c = detail.sysCss) == null ? void 0 : _c.codeName]
           }, {
             icon: () => {
               return detail.showIcon && detail.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
@@ -63,7 +76,6 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
         }
         return null;
       })]);
-    }
     return vue.createVNode("div", null, [ibiz.i18n.t("component.actionToolbar.noSupportDropDown")]);
   }
 });

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

@@ -31,6 +31,36 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
   }) {
     const ns = vue3Util.useNamespace("button-list");
     const showPopover = vue.ref(false);
+    const buttonRef = vue.ref();
+    const childPopover = vue.ref(false);
+    const details = vue.computed(() => {
+      const {
+        buttonListType,
+        uiactionGroup
+      } = props.model;
+      if (buttonListType === "UIACTIONGROUP")
+        return (uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) || [];
+      return props.model.panelButtons || props.model.deformButtons || [];
+    });
+    const placement = vue.computed(() => {
+      if (!buttonRef.value)
+        return "bottom";
+      const {
+        innerWidth,
+        innerHeight
+      } = window;
+      const {
+        offsetLeft: x,
+        offsetTop: y,
+        offsetWidth: width
+      } = buttonRef.value.$el;
+      const centerX = innerWidth - width - 128;
+      const centerY = details.value.length ? innerHeight - details.value.length * 44 : innerHeight / 2;
+      if (y > centerY) {
+        return x > centerX ? "top-end" : "top-start";
+      }
+      return x > centerX ? "bottom-end" : "bottom-start";
+    });
     const buttonListStyle = vue.computed(() => {
       const {
         itemStyle,
@@ -39,102 +69,90 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
       return itemStyle || detailStyle || "DEFAULT";
     });
     const handleClick = (item, e) => {
+      e == null ? void 0 : e.stopPropagation();
       emit("click", item.id, e);
     };
     const onChangePopover = (e) => {
       e.stopPropagation();
       showPopover.value = !showPopover.value;
     };
-    const details = vue.computed(() => {
-      const {
-        buttonListType,
-        uiactionGroup
-      } = props.model;
-      if (buttonListType === "UIACTIONGROUP")
-        return (uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) || [];
-      return props.model.panelButtons || props.model.deformButtons || [];
-    });
-    const actions = vue.computed(() => {
-      return details.value.filter((detail) => {
-        var _a;
-        return ((_a = props.buttonsState[detail.id]) == null ? void 0 : _a.visible) !== false;
-      }).map((detail) => {
-        var _a, _b;
-        return {
-          ...detail,
-          disabled: (_a = props.buttonsState[detail.id]) == null ? void 0 : _a.disabled,
-          className: (_b = detail.sysCss) == null ? void 0 : _b.cssName
-        };
-      });
-    });
-    const renderActions = () => {
-      return vue.createVNode("div", {
-        "class": ns.e("content")
-      }, [details.value.map((item) => {
+    const renderSeparator = (visible) => {
+      if (visible)
+        return vue.createVNode("div", {
+          "class": ns.e("separator")
+        }, null);
+    };
+    const renderActions = (direction) => {
+      const showSeparator = direction === "vertical";
+      return details.value.map((item) => {
         var _a, _b, _c, _d;
-        if (((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible) === false)
-          return;
-        return vue.createVNode(vue.resolveComponent("van-button"), {
-          "class": [ns.e("item"), ns.em("item", `${(_b = item.id) == null ? void 0 : _b.toLowerCase()}`), (_c = item.sysCss) == null ? void 0 : _c.cssName],
-          "size": "small",
-          "type": buttonUtil.convertBtnType(item.buttonStyle),
-          "disabled": ((_d = props.buttonsState[item.id]) == null ? void 0 : _d.disabled) || props.disabled,
-          "onClick": (event) => handleClick(item, event)
-        }, {
-          default: () => [item.showIcon !== false && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-            "icon": item.sysImage,
-            "class": ns.em("item", "icon")
-          }, null), item.showCaption && vue.createVNode("span", {
-            "class": ns.em("item", "caption")
-          }, [item.caption])]
-        });
-      })]);
+        if (item.detailType === "DEUIACTIONGROUP")
+          return [renderSeparator(item.addSeparator && showSeparator), vue.createVNode(vue.resolveComponent("iBizActionGroup"), {
+            "actionDetail": item,
+            "onActionClick": handleClick,
+            "actionsState": props.buttonsState,
+            "popoverClassName": ns.b("action-group"),
+            "onPopoverVisibleChange": (visible) => childPopover.value = visible,
+            "direction": direction === "horizontal" ? "vertical" : "horizontal"
+          }, null)];
+        if ((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible)
+          return [renderSeparator(item.addSeparator && showSeparator), vue.createVNode(vue.resolveComponent("van-button"), {
+            "size": "small",
+            "class": [ns.e("item"), ns.em("item", `${(_b = item.id) == null ? void 0 : _b.toLowerCase()}`), (_c = item.sysCss) == null ? void 0 : _c.cssName],
+            "type": buttonUtil.convertBtnType(item.buttonStyle),
+            "disabled": ((_d = props.buttonsState[item.id]) == null ? void 0 : _d.disabled) || props.disabled,
+            "onClick": (event) => handleClick(item, event)
+          }, {
+            default: () => [item.showIcon !== false && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+              "icon": item.sysImage,
+              "class": ns.em("item", "icon")
+            }, null), item.showCaption && vue.createVNode("span", {
+              "class": ns.em("item", "caption")
+            }, [item.caption])]
+          })];
+        return null;
+      });
     };
     const renderDropdown = () => {
       return vue.createVNode(vue.resolveComponent("van-popover"), {
         "class": ns.e("popover"),
-        "placement": "bottom-end",
-        "actions": actions.value,
+        "placement": placement.value,
         "show": showPopover.value,
         "onUpdate:show": ($event) => showPopover.value = $event,
-        "onSelect": (data) => handleClick(data)
+        "close-on-click-outside": !childPopover.value
       }, {
-        action: ({
-          action
-        }) => {
-          return vue.createVNode("span", {
-            "class": ns.em("popover", "item")
-          }, [action.showIcon !== false && action.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-            "icon": action.sysImage
-          }, null), action.showCaption && action.caption]);
-        },
         reference: () => {
           const {
             caption,
-            sysImage,
-            showCaption
+            sysImage
           } = props.model;
           return vue.createVNode(vue.resolveComponent("van-button"), {
             "size": "small",
+            "ref": "buttonRef",
+            "class": ns.e("button"),
             "disabled": props.disabled,
             "onClick": onChangePopover,
             "type": buttonUtil.convertBtnType(buttonListStyle.value)
           }, {
             default: () => [sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-              "class": ns.em("popover", "icon"),
+              "class": ns.em("button", "icon"),
               "icon": sysImage
-            }, null), showCaption && vue.createVNode("span", {
-              "class": ns.em("popover", "caption")
+            }, null), caption && vue.createVNode("span", {
+              "class": ns.em("button", "caption")
             }, [caption, vue.createVNode("ion-icon", {
               "name": "chevron-down-outline",
-              "class": ns.em("popover", "more")
+              "class": ns.em("button", "more")
             }, null)])]
           });
+        },
+        default: () => {
+          return renderActions("vertical");
         }
       });
     };
     return {
       ns,
+      buttonRef,
       renderDropdown,
       renderActions
     };
@@ -144,7 +162,9 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.m(this.model.id), this.ns.m((_a = this.model.actionGroupExtractMode) == null ? void 0 : _a.toLowerCase())],
       "style": this.model.cssStyle
-    }, [this.model.actionGroupExtractMode === "ITEM" || this.model.buttonListType === "BUTTONS" ? this.renderActions() : this.renderDropdown()]);
+    }, [this.model.actionGroupExtractMode === "ITEM" || this.model.buttonListType === "BUTTONS" ? vue.createVNode("div", {
+      "class": this.ns.e("content")
+    }, [this.renderActions("horizontal")]) : this.renderDropdown()]);
   }
 });
 

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

@@ -1 +1 @@
-.ibiz-button-list{width:100%;height:100%}.ibiz-button-list .van-button{border:none}.ibiz-button-list .van-button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list .van-button .van-button__text .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-width-icon-medium)}.ibiz-button-list__content{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__popover{--ibiz-color-bg-0:var(--van-popover-light-text-color)}.ibiz-button-list__popover .van-popover__action--disabled,.ibiz-button-list__popover .van-popover__action--disabled:active{color:var(--ibiz-color-disabled-text)!important;background-color:var(--ibiz-color-disabled-bg)}.ibiz-button-list__popover--item{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__popover--item .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-width-icon-medium)}.ibiz-button-list__popover--caption{display:flex;line-height:100%;align-items:center;gap:var(--ibiz-spacing-extra-tight)}
+.ibiz-button-list{width:100%;height:100%}.ibiz-button-list .van-button{border:none}.ibiz-button-list .van-button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list .van-button .van-button__text .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-width-icon-medium)}.ibiz-button-list__content{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__button--caption{display:flex;line-height:100%;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__popover{--ibiz-color-bg-0:var(--van-popover-light-text-color)}.ibiz-button-list__popover .van-popover__action--disabled,.ibiz-button-list__popover .van-popover__action--disabled:active{color:var(--ibiz-color-disabled-text)!important;background-color:var(--ibiz-color-disabled-bg)}.ibiz-button-list__popover .van-popover__content{display:flex;flex-direction:column}.ibiz-button-list__popover .van-popover__content .van-button{padding:0;font-size:var(--van-popover-action-font-size);line-height:var(--van-line-height-md);width:var(--van-popover-action-width);height:var(--van-popover-action-height);border-color:var(--ibiz-color-white)}.ibiz-button-list__popover .van-popover__content .van-button:before{border-color:var(--ibiz-color-white)}.ibiz-button-list__popover .van-popover__content .van-button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}

package/lib/common/index.cjs

@@ -19,10 +19,12 @@ var mdCtrlSetting = require('./md-ctrl-setting/md-ctrl-setting.cjs');
 var previewImage = require('./preview-image/preview-image.cjs');
 var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
 var cropping = require('./cropping/cropping.cjs');
+var actionGroup = require('./action-group/action-group.cjs');
 
 "use strict";
 const IBizCommonComponents = {
   install: (v) => {
+    v.component(actionGroup.IBizActionGroup.name, actionGroup.IBizActionGroup);
     v.component(dateRangePicker.IBizDateRangeCalendar.name, dateRangePicker.IBizDateRangeCalendar);
     v.component(vue3Util.IBizViewShell.name, vue3Util.IBizViewShell);
     v.component(row.IBizRow.name, row.IBizRow);

package/lib/common/rawitem/rawitem.cjs

@@ -87,7 +87,7 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
           }
         }
       }
-      if (["TEXT", "HEADING1", "HEADING2", "HEADING3", "HEADING4", "HEADING5", "HEADING6", "PARAGRAPH", "HTML"].includes(rawItemType.value)) {
+      if (["TEXT", "HEADING1", "HEADING2", "HEADING3", "HEADING4", "HEADING5", "HEADING6", "PARAGRAPH", "HTML", "RAW"].includes(rawItemType.value)) {
         rawItemText.value = rawItemContent.value;
         if (typeof rawItemText.value === "string") {
           rawItemText.value = rawItemText.value.replaceAll("&lt;", "<");
@@ -163,7 +163,7 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
           "icon": this.rawItemContent
         }, null);
       }
-      if (this.rawItemType === "TEXT") {
+      if (this.rawItemType === "TEXT" || this.rawItemType === "RAW") {
         return vue.createVNode("span", {
           "class": this.ns.e("text")
         }, [this.rawItemText]);

package/lib/control/list/md-ctrl/md-ctrl.cjs

@@ -149,24 +149,22 @@ const MDCtrlControl = /* @__PURE__ */ vue.defineComponent({
     const leftSlidingActionGroup = c.model.deuiactionGroup;
     const rightSlidingActionGroup = c.model.deuiactionGroup2;
     const renderSlidingActionGroup = (group, data) => {
-      const groupDetails = group.uiactionGroupDetails || [];
-      if (!groupDetails || groupDetails.length === 0) {
+      const groupDetails = runtime.getAllUIActionItems(group.uiactionGroupDetails);
+      if (!groupDetails || groupDetails.length === 0)
         return null;
-      }
       const row = c.state.rows.find((rowData) => data.srfkey === rowData.data.srfkey);
       const btnContainer = row.uaColStates[group.id];
       return groupDetails.map((detail) => {
-        const btn = btnContainer[detail.id];
-        if (btn.visible === false) {
-          return null;
-        }
-        return vue.createVNode(vue.resolveComponent("van-button"), {
-          "square": true,
-          "type": "primary",
-          "text": detail.caption,
-          "disabled": btn.disabled || btn.loading,
-          "onClick": (e) => c.onActionClick(detail, row, e)
-        }, null);
+        const btn = btnContainer == null ? void 0 : btnContainer[detail.id];
+        if (btn == null ? void 0 : btn.visible)
+          return vue.createVNode(vue.resolveComponent("van-button"), {
+            "square": true,
+            "type": "primary",
+            "text": detail.caption,
+            "disabled": btn.disabled || btn.loading,
+            "onClick": (e) => c.onActionClick(detail, row, e)
+          }, null);
+        return null;
       });
     };
     const renderDefaultItem = (data) => {