@ibiz-template/vue3-components 0.6.17 → 0.7.0

package/es/common/pagination/pagination.d.ts

@@ -12,6 +12,10 @@ export declare const IBizPagination: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
+    totalPages: {
+        type: NumberConstructor;
+        required: false;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     start: import("vue").ComputedRef<number>;
@@ -20,6 +24,7 @@ export declare const IBizPagination: import("vue").DefineComponent<{
     onPageSizeChange: (size: number) => void;
     pageRefresh: () => void;
     inputChange: (event: MouseEvent) => void;
+    calcTotalPages: import("vue").ComputedRef<number>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "pageSizeChange" | "pageRefresh")[], "change" | "pageSizeChange" | "pageRefresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     total: {
         type: NumberConstructor;
@@ -33,6 +38,10 @@ export declare const IBizPagination: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
+    totalPages: {
+        type: NumberConstructor;
+        required: false;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onPageSizeChange?: ((...args: any[]) => any) | undefined;

package/es/common/pagination/pagination.mjs

@@ -1,5 +1,6 @@
 import { computed, resolveComponent, mergeProps, createVNode, createTextVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
+import { isNil } from 'ramda';
 import './pagination.css';
 
 "use strict";
@@ -17,6 +18,10 @@ const IBizPagination = /* @__PURE__ */ defineComponent({
     size: {
       type: Number,
       required: true
+    },
+    totalPages: {
+      type: Number || void 0,
+      required: false
     }
   },
   emits: ["change", "pageSizeChange", "pageRefresh"],
@@ -42,6 +47,9 @@ const IBizPagination = /* @__PURE__ */ defineComponent({
     const inputChange = (event) => {
       event.stopPropagation();
     };
+    const calcTotalPages = computed(() => {
+      return Math.ceil(props.total / props.size);
+    });
     return {
       ns,
       start,
@@ -49,7 +57,8 @@ const IBizPagination = /* @__PURE__ */ defineComponent({
       onPageChange,
       onPageSizeChange,
       pageRefresh,
-      inputChange
+      inputChange,
+      calcTotalPages
     };
   },
   render() {
@@ -59,6 +68,7 @@ const IBizPagination = /* @__PURE__ */ defineComponent({
       "layout": "slot, prev, pager, next, sizes, jumper",
       "background": true,
       "total": this.total,
+      "page-count": !isNil(this.totalPages) && this.calcTotalPages === this.totalPages ? this.calcTotalPages : this.totalPages,
       "current-page": this.curPage,
       "page-size": this.size,
       "page-sizes": [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
@@ -76,7 +86,7 @@ const IBizPagination = /* @__PURE__ */ defineComponent({
         default: () => [createVNode("ion-icon", {
           "name": "refresh"
         }, null)]
-      })]), createVNode("span", null, [ibiz.i18n.t("component.pagination.display"), createTextVNode("\xA0"), this.start, createTextVNode("\xA0-\xA0"), this.end, createTextVNode("\xA0"), ibiz.i18n.t("component.pagination.piece"), createTextVNode("\uFF0C"), ibiz.i18n.t("component.pagination.total"), createTextVNode("\xA0"), this.total, createTextVNode("\xA0"), ibiz.i18n.t("component.pagination.pieceData")])]
+      })]), isNil(this.totalPages) || this.calcTotalPages === this.totalPages ? createVNode("span", null, [ibiz.i18n.t("component.pagination.display"), createTextVNode("\xA0"), this.start, createTextVNode("\xA0-\xA0"), this.end, createTextVNode("\xA0"), ibiz.i18n.t("component.pagination.piece"), createTextVNode("\uFF0C")]) : null, createVNode("span", null, [ibiz.i18n.t("component.pagination.total"), createTextVNode("\xA0"), this.total, createTextVNode("\xA0"), ibiz.i18n.t("component.pagination.pieceData")])]
     })]);
   }
 });

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

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

package/es/common/view-message/view-message.d.ts

@@ -17,9 +17,29 @@ export declare const ViewMessage: import("vue").DefineComponent<{
             readonly [Symbol.species]: ArrayConstructor;
         };
     };
+    scroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     getType: (messageType?: string) => string;
+    items: import("vue").Ref<{
+        position: string | undefined;
+        messageType?: string | undefined;
+        removeMode?: number | undefined;
+        title?: string | undefined;
+        message?: string | undefined;
+        extraParams: IData;
+        hidden?: boolean | undefined;
+    }[]>;
+    container: import("vue").Ref<HTMLElement | null>;
+    carouselHeight: import("vue").Ref<string>;
+    initialIndex: import("vue").Ref<number>;
+    uuid: import("vue").Ref<string>;
+    isHiddenContainer: import("vue").Ref<boolean>;
+    handleAlertClose: (index: number) => void;
+    handleChange: (index: number) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     messages: {
         type: {
@@ -37,4 +57,10 @@ export declare const ViewMessage: import("vue").DefineComponent<{
             readonly [Symbol.species]: ArrayConstructor;
         };
     };
-}>>, {}, {}>;
+    scroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    scroll: boolean;
+}, {}>;

package/es/common/view-message/view-message.mjs

@@ -1,16 +1,24 @@
-import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, ref, watch, nextTick, onMounted, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
+import { createUUID } from 'qx-util';
 import './view-message.css';
 
 "use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 const ViewMessage = /* @__PURE__ */ defineComponent({
   name: "ViewMessage",
   props: {
     messages: {
       type: Array
+    },
+    scroll: {
+      type: Boolean,
+      default: false
     }
   },
-  setup() {
+  setup(props) {
     const ns = useNamespace("view-message");
     const getType = (messageType) => {
       switch (messageType) {
@@ -22,27 +30,132 @@ const ViewMessage = /* @__PURE__ */ defineComponent({
           return "info";
       }
     };
+    const items = ref([]);
+    const initialIndex = ref(0);
+    const uuid = ref("");
+    const isHiddenContainer = ref(false);
+    watch(() => props.messages, () => {
+      initialIndex.value = 0;
+      uuid.value = createUUID();
+      if (Array.isArray(props.messages)) {
+        items.value = props.messages.filter((item) => item.title || item.message).map((item) => {
+          return {
+            ...item
+          };
+        });
+        isHiddenContainer.value = false;
+      } else {
+        items.value = [];
+        isHiddenContainer.value = true;
+      }
+    }, {
+      immediate: true
+    });
+    const container = ref(null);
+    const carouselHeight = ref("");
+    onMounted(() => {
+      nextTick(() => {
+        const el = container.value;
+        if (!el) {
+          return;
+        }
+        const alertEl = el.querySelector(".el-alert");
+        if (alertEl) {
+          carouselHeight.value = "".concat(alertEl.offsetHeight, "px");
+        }
+      });
+    });
+    const handleAlertClose = (index) => {
+      items.value[index].hidden = true;
+      const isHiddenCarouse = items.value.every((item) => item.hidden);
+      if (isHiddenCarouse) {
+        isHiddenContainer.value = true;
+      }
+      uuid.value = createUUID();
+    };
+    const handleChange = (index) => {
+      initialIndex.value = index;
+    };
     return {
       ns,
-      getType
+      getType,
+      items,
+      container,
+      carouselHeight,
+      initialIndex,
+      uuid,
+      isHiddenContainer,
+      handleAlertClose,
+      handleChange
     };
   },
   render() {
-    var _a, _b;
-    if (!((_a = this.messages) == null ? void 0 : _a.length)) {
-      return null;
+    const renderScrollMessages = () => {
+      let _slot;
+      return createVNode("div", {
+        "class": [this.ns.b(), this.isHiddenContainer && this.ns.m("hidden")],
+        "ref": "container"
+      }, [createVNode(resolveComponent("el-carousel"), {
+        "key": this.uuid,
+        "indicatorPosition": "none",
+        "arrow": "never",
+        "height": this.carouselHeight,
+        "initialIndex": this.initialIndex,
+        "onChange": this.handleChange
+      }, _isSlot(_slot = this.items.map((item, i) => {
+        if (item.hidden) {
+          return;
+        }
+        return createVNode(resolveComponent("el-carousel-item"), null, {
+          default: () => [createVNode(resolveComponent("el-alert"), {
+            "type": this.getType(item.messageType),
+            "class": this.ns.b("carousel-alert"),
+            "closable": item.removeMode !== 0,
+            "onClose": () => this.handleAlertClose(i)
+          }, {
+            title: () => {
+              return createVNode("div", {
+                "class": this.ns.be("carousel-alert", "title")
+              }, [item.title || ""]);
+            },
+            default: () => {
+              return createVNode("div", {
+                "class": this.ns.be("carousel-alert", "message")
+              }, [item.message || ""]);
+            }
+          })]
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      })]);
+    };
+    const renderMessages = () => {
+      return createVNode("div", {
+        "class": [this.ns.b(), this.isHiddenContainer && this.ns.m("hidden")]
+      }, [this.items.map((item, i) => {
+        return createVNode(resolveComponent("el-alert"), {
+          "type": this.getType(item.messageType),
+          "class": [this.ns.b("alert"), this.ns.bm("alert", item.title && item.message ? "" : "single"), this.ns.bm("alert", !item.title && item.message ? "single-message" : "")],
+          "closable": item.removeMode !== 0,
+          "onClose": () => this.handleAlertClose(i)
+        }, {
+          title: () => {
+            return createVNode("div", {
+              "class": this.ns.be("alert", "title")
+            }, [item.title || ""]);
+          },
+          default: () => {
+            return createVNode("div", {
+              "class": this.ns.be("alert", "message")
+            }, [item.message || ""]);
+          }
+        });
+      })]);
+    };
+    if (this.items.length > 1 && this.scroll) {
+      return renderScrollMessages();
     }
-    return createVNode("div", {
-      "class": [this.ns.b()]
-    }, [(_b = this.messages) == null ? void 0 : _b.map((message) => {
-      return createVNode(resolveComponent("el-alert"), {
-        "type": this.getType(message.messageType),
-        "title": message.title,
-        "class": [this.ns.e("alert"), this.ns.is("no-title", !message.title)],
-        "description": message.message,
-        "closable": message.removeMode !== 0
-      }, null);
-    })]);
+    return renderMessages();
   }
 });
 

package/es/control/chart/chart.css

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

package/es/control/chart/chart.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { IDEChart } from '@ibiz/model-core';
-import './chart.scss';
 import { ChartController, IControlProvider } from '@ibiz-template/runtime';
+import './chart.scss';
 declare const ChartControl: import("vue").DefineComponent<{
     modelData: {
         type: PropType<IDEChart>;
@@ -30,6 +30,8 @@ declare const ChartControl: import("vue").DefineComponent<{
     c: ChartController;
     ns: import("@ibiz-template/core").Namespace;
     chartRef: import("vue").Ref<any>;
+    uuid: string;
+    renderGrid: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDEChart>;

package/es/control/chart/chart.mjs

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

package/es/control/data-view/data-view.mjs

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

package/es/control/drbar/drbar.controller.d.ts

@@ -177,4 +177,13 @@ export declare class DRBarController extends ControlController<IDEDRBar, IDRBarS
      * @return {*}  {Promise<void>}
      */
     protected initCounter(): Promise<void>;
+    /**
+     * 监听组件销毁
+     *
+     * @author zhanghengfeng
+     * @date 2024-04-10 19:04:43
+     * @protected
+     * @return {*}  {Promise<void>}
+     */
+    protected onDestroyed(): Promise<void>;
 }

package/es/control/drbar/drbar.controller.mjs

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

package/es/control/drtab/drtab.controller.d.ts

@@ -145,4 +145,13 @@ export declare class DRTabController extends ControlController<IDEDRTab, IDRTabS
      * @return {*}  {Promise<void>}
      */
     protected initCounter(): Promise<void>;
+    /**
+     * 监听组件销毁
+     *
+     * @author zhanghengfeng
+     * @date 2024-04-10 19:04:40
+     * @protected
+     * @return {*}  {Promise<void>}
+     */
+    protected onDestroyed(): Promise<void>;
 }

package/es/control/drtab/drtab.controller.mjs

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

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

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

package/es/control/form/form-detail/form-mdctrl/form-mdctrl.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IDEFormMDCtrl } from '@ibiz/model-core';
+import { IDEFormMDCtrl, IUIActionGroupDetail } from '@ibiz/model-core';
 import { FormMDCtrlController } from '@ibiz-template/runtime';
 import './form-mdctrl.scss';
 export declare const FormMDCtrl: import("vue").DefineComponent<{
@@ -15,6 +15,7 @@ export declare const FormMDCtrl: import("vue").DefineComponent<{
     c: FormMDCtrlController;
     ns: import("@ibiz-template/core").Namespace;
     hasCaption: boolean | undefined;
+    onActionClick: (detail: IUIActionGroupDetail, event: MouseEvent) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDEFormMDCtrl>;

package/es/control/form/form-detail/form-mdctrl/form-mdctrl.mjs

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

package/es/control/form/form-detail/form-mdctrl/index.d.ts

@@ -11,6 +11,7 @@ export declare const IBizFormMDCtrl: import("@ibiz-template/vue3-util").TypeWith
     c: import("@ibiz-template/runtime").FormMDCtrlController;
     ns: import("@ibiz-template/core").Namespace;
     hasCaption: boolean | undefined;
+    onActionClick: (detail: import("@ibiz/model-core").IUIActionGroupDetail, event: MouseEvent) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IDEFormMDCtrl>;

package/es/control/form/form-detail/form-rawitem/form-rawitem.d.ts

@@ -1,5 +1,5 @@
 import { IDEFormRawItem } from '@ibiz/model-core';
-import { PropType } from 'vue';
+import { PropType, Ref } from 'vue';
 import { FormRawItemController } from '@ibiz-template/runtime';
 import './form-rawitem.scss';
 export declare const FormRawItem: import("vue").DefineComponent<{
@@ -13,6 +13,7 @@ export declare const FormRawItem: import("vue").DefineComponent<{
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
+    content: Ref<string | number | undefined>;
     showFormDefaultContent: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {