@ibiz-template/vue3-components 0.7.25 → 0.7.26-alpha.0

package/es/control/dashboard/index.mjs

@@ -14,6 +14,7 @@ import { IBizRawItemPortlet } from './portlet/rawitem-portlet/index.mjs';
 import { IBizListPortlet } from './portlet/list-portlet/index.mjs';
 import { IBizHtmlPortlet } from './portlet/html-portlet/index.mjs';
 import { IBizActionBarPortlet } from './portlet/actionbar-portlet/index.mjs';
+import { IBizReportPortlet } from './portlet/report-portlet/index.mjs';
 export { ContainerPortlet } from './portlet/container-portlet/container-portlet.mjs';
 export { ViewPortlet } from './portlet/view-portlet/view-portlet.mjs';
 export { MenuPortlet } from './portlet/menu-portlet/menu-portlet.mjs';
@@ -22,6 +23,7 @@ export { RawItemPortlet } from './portlet/rawitem-portlet/rawitem-portlet.mjs';
 export { ListPortlet } from './portlet/list-portlet/list-portlet.mjs';
 export { HtmlPortlet } from './portlet/html-portlet/html-portlet.mjs';
 export { ActionBarPortlet } from './portlet/actionbar-portlet/actionbar-portlet.mjs';
+export { ReportPortlet } from './portlet/report-portlet/report-portlet.mjs';
 
 "use strict";
 const IBizDashboardControl = withInstall(
@@ -43,7 +45,8 @@ const IBizDashboardControl = withInstall(
     v.use(IBizListPortlet);
     v.use(IBizHtmlPortlet);
     v.use(IBizActionBarPortlet);
+    v.use(IBizReportPortlet);
   }
 );
 
-export { IBizActionBarPortlet, IBizChartPortlet, IBizContainerPortlet, IBizDashboardControl, IBizHtmlPortlet, IBizListPortlet, IBizMenuPortlet, IBizRawItemPortlet, IBizViewPortlet, PortletLayout, IBizDashboardControl as default };
+export { IBizActionBarPortlet, IBizChartPortlet, IBizContainerPortlet, IBizDashboardControl, IBizHtmlPortlet, IBizListPortlet, IBizMenuPortlet, IBizRawItemPortlet, IBizReportPortlet, IBizViewPortlet, PortletLayout, IBizDashboardControl as default };

package/es/control/dashboard/portlet/index.d.ts

@@ -7,3 +7,4 @@ export * from './rawitem-portlet';
 export * from './list-portlet';
 export * from './html-portlet';
 export * from './actionbar-portlet';
+export * from './report-portlet';

package/es/control/dashboard/portlet/index.mjs

@@ -7,6 +7,7 @@ export { IBizRawItemPortlet } from './rawitem-portlet/index.mjs';
 export { IBizListPortlet } from './list-portlet/index.mjs';
 export { IBizHtmlPortlet } from './html-portlet/index.mjs';
 export { IBizActionBarPortlet } from './actionbar-portlet/index.mjs';
+export { IBizReportPortlet } from './report-portlet/index.mjs';
 export { ContainerPortlet } from './container-portlet/container-portlet.mjs';
 export { ViewPortlet } from './view-portlet/view-portlet.mjs';
 export { MenuPortlet } from './menu-portlet/menu-portlet.mjs';
@@ -15,5 +16,6 @@ export { RawItemPortlet } from './rawitem-portlet/rawitem-portlet.mjs';
 export { ListPortlet } from './list-portlet/list-portlet.mjs';
 export { HtmlPortlet } from './html-portlet/html-portlet.mjs';
 export { ActionBarPortlet } from './actionbar-portlet/actionbar-portlet.mjs';
+export { ReportPortlet } from './report-portlet/report-portlet.mjs';
 
 "use strict";

package/es/control/dashboard/portlet/report-portlet/index.d.ts

@@ -0,0 +1,24 @@
+export * from './report-portlet';
+export declare const IBizReportPortlet: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDBSysPortletPart>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").ReportPortletController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    report: import("@ibiz/model-core").IControl | undefined;
+}, 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").IDBSysPortletPart>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").ReportPortletController;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizReportPortlet;

package/es/control/dashboard/portlet/report-portlet/index.mjs

@@ -0,0 +1,12 @@
+import { registerPortletProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { ReportPortlet } from './report-portlet.mjs';
+import { ReportPortletProvider } from './report-portlet.provider.mjs';
+
+"use strict";
+const IBizReportPortlet = withInstall(ReportPortlet, function(v) {
+  v.component(ReportPortlet.name, ReportPortlet);
+  registerPortletProvider("REPORT", () => new ReportPortletProvider());
+});
+
+export { IBizReportPortlet, ReportPortlet, IBizReportPortlet as default };

package/es/control/dashboard/portlet/report-portlet/report-portlet.d.ts

@@ -0,0 +1,24 @@
+import { PropType } from 'vue';
+import { ReportPortletController } from '@ibiz-template/runtime';
+export declare const ReportPortlet: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<import("@ibiz/model-core").IDBSysPortletPart>;
+        required: true;
+    };
+    controller: {
+        type: typeof ReportPortletController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    report: import("@ibiz/model-core").IControl | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<import("@ibiz/model-core").IDBSysPortletPart>;
+        required: true;
+    };
+    controller: {
+        type: typeof ReportPortletController;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/control/dashboard/portlet/report-portlet/report-portlet.mjs

@@ -0,0 +1,64 @@
+import { isVNode, onMounted, onBeforeUnmount, resolveComponent, h, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { ReportPortletController, ControlType } from '@ibiz-template/runtime';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ReportPortlet = /* @__PURE__ */ defineComponent({
+  name: "IBizReportPortlet",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: ReportPortletController,
+      required: true
+    }
+  },
+  setup(props) {
+    var _a, _b;
+    const ns = useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const report = (_b = props.modelData.controls) == null ? void 0 : _b.find((item) => {
+      return item.controlType === ControlType.REPORT_PANEL;
+    });
+    let timerTag;
+    onMounted(() => {
+      const timer = props.controller.model.timer;
+      if (timer && timer > 0) {
+        timerTag = setInterval(() => {
+          props.controller.refresh();
+        }, timer);
+      }
+    });
+    onBeforeUnmount(() => {
+      clearInterval(timerTag);
+    });
+    return {
+      ns,
+      report
+    };
+  },
+  render() {
+    let _slot;
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass];
+    const {
+      context,
+      params
+    } = this.controller;
+    return createVNode(resolveComponent("iBizPortletLayout"), {
+      "controller": this.controller,
+      "class": classArr
+    }, _isSlot(_slot = h(resolveComponent("IBizControlShell"), {
+      context,
+      params,
+      modelData: this.report
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+export { ReportPortlet };

package/es/control/dashboard/portlet/report-portlet/report-portlet.provider.d.ts

@@ -0,0 +1,15 @@
+import { IDashboardController, IPortletContainerController, IPortletProvider, ReportPortletController } from '@ibiz-template/runtime';
+import { IDBReportPortlet } from '@ibiz/model-core';
+/**
+ * 报表门户部件适配器
+ *
+ * @author tony001
+ * @date 2024-06-19 17:06:17
+ * @export
+ * @class ReportPortletProvider
+ * @implements {IPortletProvider}
+ */
+export declare class ReportPortletProvider implements IPortletProvider {
+    component: string;
+    createController(portletModel: IDBReportPortlet, dashboard: IDashboardController, parent?: IPortletContainerController): Promise<ReportPortletController>;
+}

package/es/control/dashboard/portlet/report-portlet/report-portlet.provider.mjs

@@ -0,0 +1,21 @@
+import { ReportPortletController } from '@ibiz-template/runtime';
+
+"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 ReportPortletProvider {
+  constructor() {
+    __publicField(this, "component", "IBizReportPortlet");
+  }
+  async createController(portletModel, dashboard, parent) {
+    const c = new ReportPortletController(portletModel, dashboard, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { ReportPortletProvider };

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

@@ -45,6 +45,31 @@ const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
       formProvider,
       model
     } = this.controller;
+    if (model.detailStyle === "STYLE2") {
+      return createVNode(resolveComponent("iBizMDCtrlContainer2"), {
+        "controller": this.controller,
+        "items": state.items
+      }, {
+        item: ({
+          data
+        }) => {
+          if (!formProvider) {
+            return createVNode("div", null, [ibiz.i18n.t("control.form.formMDctrlForm.noFindProvider")]);
+          }
+          const formComponent = h(resolveComponent(formProvider.component), {
+            class: this.ns.be("item", "form"),
+            key: data.id,
+            modelData: model.contentControl,
+            context: data.context,
+            params: data.params,
+            onCreated: (event) => {
+              this.onCreated(data.id, event);
+            }
+          });
+          return formComponent;
+        }
+      });
+    }
     return createVNode(resolveComponent("iBizMDCtrlContainer"), {
       "class": this.ns.b(),
       "items": state.items,

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

@@ -6,6 +6,7 @@ import { FormMDCtrlMD } from './form-mdctrl-md/form-mdctrl-md.mjs';
 import { FormMDCtrlRepeater } from './form-mdctrl-repeater/form-mdctrl-repeater.mjs';
 import { FormMDCtrlProvider } from './form-mdctrl.provider.mjs';
 import { MDCtrlContainer } from './mdctrl-container/mdctrl-container.mjs';
+import { MDCtrlContainer2 } from './mdctrl-container2/mdctrl-container2.mjs';
 
 "use strict";
 const IBizFormMDCtrl = withInstall(FormMDCtrl, function(v) {
@@ -14,6 +15,7 @@ const IBizFormMDCtrl = withInstall(FormMDCtrl, function(v) {
   v.component(FormMDCtrlMD.name, FormMDCtrlMD);
   v.component(FormMDCtrlRepeater.name, FormMDCtrlRepeater);
   v.component(MDCtrlContainer.name, MDCtrlContainer);
+  v.component(MDCtrlContainer2.name, MDCtrlContainer2);
   registerFormDetailProvider("MDCTRL", () => new FormMDCtrlProvider());
 });
 

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

@@ -0,0 +1,21 @@
+import { VNode } from 'vue';
+/**
+ * 拖拽图标
+ */
+export declare const dragIcon: () => VNode;
+/**
+ * 删除图标
+ */
+export declare const removeIcon: () => VNode;
+/**
+ * 添加图标
+ */
+export declare const addIcon: () => VNode;
+/**
+ * 左箭头图标
+ */
+export declare const leftArrowIcon: () => VNode;
+/**
+ * 右箭头图标
+ */
+export declare const rightArrowIcon: () => VNode;

package/es/control/form/form-detail/form-mdctrl/mdctrl-container2/icon/index.mjs

@@ -0,0 +1,75 @@
+import { createVNode } from 'vue';
+
+"use strict";
+const dragIcon = () => createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("g", {
+  "transform": "translate(5 1)",
+  "fill-rule": "nonzero"
+}, [createVNode("path", {
+  "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+}, null)])])]);
+const removeIcon = () => createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M4.002 3.403V1a1 1 0 0 1 1-1h6.003a1 1 0 0 1 1 1v2.403h3.396a.6.6 0 1 1 0 1.2h-1.395V15a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.603H.6a.6.6 0 1 1 0-1.2h3.4zm8.804 1.205H3.2V14.8h9.605V4.608zM5.202 1.2v2.155h5.603V1.2H5.202zm.6 6.417a.6.6 0 0 1 1.201 0v4.758a.6.6 0 0 1-1.2 0V7.617zm3.202 0a.6.6 0 0 1 1.2 0v4.758a.6.6 0 0 1-1.2 0V7.617z"
+}, null)])]);
+const addIcon = () => createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M8.578 7.383V1.602a.601.601 0 1 0-1.2 0v5.781H1.6a.601.601 0 0 0 0 1.203h5.777v5.812a.601.601 0 1 0 1.2 0V8.586H14.4a.601.601 0 0 0 0-1.203H8.578z"
+}, null)])]);
+const leftArrowIcon = () => createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M7.028 10.976l5.951-5.952a.6.6 0 0 1 1.024.425V11.4a.6.6 0 0 1-.6.6H7.452a.6.6 0 0 1-.424-1.024z",
+  "transform": "scale(-1 1) rotate(-45 0 32.15)"
+}, null)])]);
+const rightArrowIcon = () => createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "preserveAspectRatio": "xMidYMid meet",
+  "focusable": "false"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M3.028 10.976l5.951-5.952a.6.6 0 0 1 1.024.425V11.4a.6.6 0 0 1-.6.6H3.452a.6.6 0 0 1-.424-1.024z",
+  "transform": "rotate(-45 6.003 8)"
+}, null)])]);
+
+export { addIcon, dragIcon, leftArrowIcon, removeIcon, rightArrowIcon };

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

@@ -0,0 +1 @@
+.ibiz-mdctrl-container2-header{position:relative;display:flex;overflow:hidden}.ibiz-mdctrl-container2-header-content{display:flex;flex:1;height:var(--ibiz-height-control-large);overflow:auto hidden;background:var(--ibiz-color-bg-0);border:1px solid var(--ibiz-color-border);scrollbar-width:none;-ms-overflow-style:none}.ibiz-mdctrl-container2-header-content::-webkit-scrollbar{display:none;width:0;height:0}.ibiz-mdctrl-container2-header-left-arrow{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;width:var(--ibiz-spacing-base-loose);cursor:pointer;background:var(--ibiz-color-disabled-border)}.ibiz-mdctrl-container2-header-left-arrow>svg{fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container2-header-right-arrow{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;width:var(--ibiz-spacing-base-loose);cursor:pointer;background:var(--ibiz-color-disabled-border)}.ibiz-mdctrl-container2-header-right-arrow>svg{fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container2-header-item{position:relative;display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:calc((100% - var(--ibiz-height-control-large))/ 5);height:var(--ibiz-height-control-large);padding:0 var(--ibiz-spacing-base-loose);line-height:var(--ibiz-height-control-large);text-align:center;cursor:pointer;border-right:1px solid var(--ibiz-color-border)}.ibiz-mdctrl-container2-header-item__drag-icon{position:absolute;left:0;display:none}.ibiz-mdctrl-container2-header-item__drag-icon>svg{fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container2-header-item__icon{display:flex;flex:0 0 auto;align-items:center;justify-content:center;margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-mdctrl-container2-header-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-mdctrl-container2-header-item__btn{position:absolute;top:0;right:var(--ibiz-spacing-extra-tight);display:none}.ibiz-mdctrl-container2-header-item__btn>svg{fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container2-header-item__btn:hover>svg{fill:var(--ibiz-color-danger)}.ibiz-mdctrl-container2-header-item--hidden-border{border-right:none}.ibiz-mdctrl-container2-header-item--active{background:var(--ibiz-color-bg-1)}.ibiz-mdctrl-container2-header-item--drag{background:var(--ibiz-color-bg-1);border:1px solid var(--ibiz-color-border)}.ibiz-mdctrl-container2-header-item--ghost{background:var(--ibiz-color-border);border:none}.ibiz-mdctrl-container2-header-item--ghost .ibiz-mdctrl-container2-header-item__text{opacity:0}.ibiz-mdctrl-container2-header-item:hover:not(.ibiz-mdctrl-container2-header-item--dragging):not(.ibiz-mdctrl-container2-header-item--drag):not(.ibiz-mdctrl-container2-header-item--ghost){background:var(--ibiz-color-bg-1)}.ibiz-mdctrl-container2-header-item:hover:not(.ibiz-mdctrl-container2-header-item--dragging):not(.ibiz-mdctrl-container2-header-item--drag):not(.ibiz-mdctrl-container2-header-item--ghost) .ibiz-mdctrl-container2-header-item__btn,.ibiz-mdctrl-container2-header-item:hover:not(.ibiz-mdctrl-container2-header-item--dragging):not(.ibiz-mdctrl-container2-header-item--drag):not(.ibiz-mdctrl-container2-header-item--ghost) .ibiz-mdctrl-container2-header-item__drag-icon{display:block}

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

@@ -0,0 +1,38 @@
+import { FormMDCtrlFormController } from '@ibiz-template/runtime';
+import { PropType } from 'vue';
+import './mdctrl-container2.scss';
+export declare const MDCtrlContainer2: import("vue").DefineComponent<{
+    controller: {
+        type: typeof FormMDCtrlFormController;
+        required: true;
+    };
+    items: {
+        type: PropType<IData[]>;
+        default: () => never[];
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    currentItem: import("vue").Ref<string>;
+    draggingKey: import("vue").Ref<string>;
+    container: import("vue").Ref<IData | undefined>;
+    isShowLeftArrow: import("vue").Ref<boolean>;
+    isShowRightArrow: import("vue").Ref<boolean>;
+    isShowBorder: import("vue").Ref<boolean>;
+    handleSelect: (e: MouseEvent, item: IData) => void;
+    handleAdd: (e: MouseEvent) => void;
+    handleRemove: (e: MouseEvent, item: IData) => Promise<void>;
+    handleArrowClick: (e: MouseEvent, direction: 'left' | 'right') => void;
+    handleDragStart: (item: IData) => void;
+    handleDragEnd: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    controller: {
+        type: typeof FormMDCtrlFormController;
+        required: true;
+    };
+    items: {
+        type: PropType<IData[]>;
+        default: () => never[];
+    };
+}>>, {
+    items: IData[];
+}, {}>;

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

@@ -0,0 +1,205 @@
+import { ref, watch, onMounted, onUnmounted, createVNode, defineComponent } from 'vue';
+import { FormMDCtrlFormController } from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import draggable from 'vuedraggable';
+import './mdctrl-container2.css';
+import { dragIcon, removeIcon, addIcon, leftArrowIcon, rightArrowIcon } from './icon/index.mjs';
+
+"use strict";
+const MDCtrlContainer2 = /* @__PURE__ */ defineComponent({
+  name: "IBizMDCtrlContainer2",
+  components: {
+    draggable
+  },
+  props: {
+    controller: {
+      type: FormMDCtrlFormController,
+      required: true
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("mdctrl-container2");
+    const currentItem = ref("");
+    watch(() => props.items, () => {
+      var _a;
+      if (!currentItem.value) {
+        currentItem.value = ((_a = props.items[0]) == null ? void 0 : _a.id) || "";
+      }
+    }, {
+      immediate: true
+    });
+    const draggingKey = ref("");
+    const container = ref();
+    const isShowLeftArrow = ref(false);
+    const isShowRightArrow = ref(false);
+    const isShowBorder = ref(true);
+    let resizeObserver;
+    const updateArrowVisible = () => {
+      if (container.value) {
+        const el = container.value.$el;
+        if (el) {
+          isShowLeftArrow.value = el.scrollLeft > 0;
+          isShowRightArrow.value = el.scrollLeft < el.scrollWidth - el.offsetWidth;
+          isShowBorder.value = el.offsetWidth > el.scrollWidth;
+        }
+      }
+    };
+    onMounted(() => {
+      if (container.value && container.value.$el) {
+        resizeObserver = new ResizeObserver((entries) => {
+          entries.forEach(() => {
+            updateArrowVisible();
+          });
+        });
+        resizeObserver.observe(container.value.$el);
+      }
+    });
+    onUnmounted(() => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
+    const handleSelect = (e, item) => {
+      e.stopPropagation();
+      currentItem.value = item.id;
+    };
+    const handleAdd = (e) => {
+      var _a;
+      e.stopPropagation();
+      props.controller.create();
+      currentItem.value = ((_a = props.items[props.items.length - 1]) == null ? void 0 : _a.id) || "";
+    };
+    const handleRemove = async (e, item) => {
+      var _a;
+      e.stopPropagation();
+      await props.controller.remove(item.id);
+      if (currentItem.value === item.id) {
+        currentItem.value = ((_a = props.items[0]) == null ? void 0 : _a.id) || "";
+      }
+      updateArrowVisible();
+    };
+    const handleArrowClick = (e, direction) => {
+      e.stopPropagation();
+      if (container.value) {
+        const el = container.value.$el;
+        if (el) {
+          const children = Array.from(el.children || []);
+          const child = children.find((item) => item.classList.contains(ns.b("header-item")));
+          if (child) {
+            const width = child.offsetWidth;
+            if (direction === "right") {
+              el.scrollLeft += width;
+            }
+            if (direction === "left") {
+              el.scrollLeft -= width;
+            }
+          }
+          updateArrowVisible();
+        }
+      }
+    };
+    const handleDragStart = (item) => {
+      draggingKey.value = item.id;
+    };
+    const handleDragEnd = () => {
+      draggingKey.value = "";
+      updateArrowVisible();
+    };
+    return {
+      ns,
+      currentItem,
+      draggingKey,
+      container,
+      isShowLeftArrow,
+      isShowRightArrow,
+      isShowBorder,
+      handleSelect,
+      handleAdd,
+      handleRemove,
+      handleArrowClick,
+      handleDragStart,
+      handleDragEnd
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": [this.ns.b("header")]
+    }, [createVNode(draggable, {
+      "ref": "container",
+      "class": [this.ns.b("header-content")],
+      "list": this.items,
+      "ghostClass": this.ns.bm("header-item", "ghost"),
+      "itemKey": "id"
+    }, {
+      item: ({
+        element
+      }) => {
+        return createVNode("div", {
+          "class": [this.ns.b("header-item"), this.draggingKey && this.ns.bm("header-item", "dragging"), this.draggingKey === element.id && this.ns.bm("header-item", "drag"), this.currentItem === element.id && this.ns.bm("header-item", "active")],
+          "onDragstart": () => {
+            this.handleDragStart(element);
+          },
+          "onDragend": () => {
+            this.handleDragEnd();
+          },
+          "onClick": (e) => {
+            this.handleSelect(e, element);
+          }
+        }, [createVNode("div", {
+          "class": this.ns.be("header-item", "drag-icon")
+        }, [dragIcon()]), createVNode("div", {
+          "class": this.ns.be("header-item", "text")
+        }, [element.title]), this.controller.enableDelete && createVNode("div", {
+          "class": this.ns.be("header-item", "btn"),
+          "title": ibiz.i18n.t("app.delete"),
+          "onClick": (e) => {
+            this.handleRemove(e, element);
+          }
+        }, [removeIcon()])]);
+      },
+      footer: () => {
+        return [this.controller.enableCreate && createVNode("div", {
+          "class": [this.ns.b("header-item"), !this.isShowBorder && this.ns.bm("header-item", "hidden-border")],
+          "onClick": (e) => {
+            this.handleAdd(e);
+          }
+        }, [createVNode("div", {
+          "class": this.ns.be("header-item", "icon")
+        }, [addIcon()]), createVNode("div", {
+          "class": this.ns.be("header-item", "text")
+        }, [ibiz.i18n.t("app.add")])]), this.isShowLeftArrow && createVNode("div", {
+          "class": this.ns.b("header-left-arrow"),
+          "onClick": (e) => {
+            this.handleArrowClick(e, "left");
+          }
+        }, [leftArrowIcon()]), this.isShowRightArrow && createVNode("div", {
+          "class": this.ns.b("header-right-arrow"),
+          "onClick": (e) => {
+            this.handleArrowClick(e, "right");
+          }
+        }, [rightArrowIcon()])];
+      }
+    })]), createVNode("div", {
+      "class": this.ns.b("content")
+    }, [this.items.map((item) => {
+      var _a, _b;
+      return createVNode("div", {
+        "key": item.id,
+        "class": this.ns.b("content-item"),
+        "style": {
+          display: item.id !== this.currentItem ? "none" : ""
+        }
+      }, [(_b = (_a = this.$slots).item) == null ? void 0 : _b.call(_a, {
+        data: item
+      })]);
+    })])]);
+  }
+});
+
+export { MDCtrlContainer2 };

package/es/control/index.mjs

@@ -71,5 +71,7 @@ export { HtmlPortlet } from './dashboard/portlet/html-portlet/html-portlet.mjs';
 export { IBizHtmlPortlet } from './dashboard/portlet/html-portlet/index.mjs';
 export { ActionBarPortlet } from './dashboard/portlet/actionbar-portlet/actionbar-portlet.mjs';
 export { IBizActionBarPortlet } from './dashboard/portlet/actionbar-portlet/index.mjs';
+export { ReportPortlet } from './dashboard/portlet/report-portlet/report-portlet.mjs';
+export { IBizReportPortlet } from './dashboard/portlet/report-portlet/index.mjs';
 
 "use strict";

package/es/control/report-panel/report-detail/bi-report-panel/bi-report-panel.mjs

@@ -30,7 +30,13 @@ const BIReportPanel = /* @__PURE__ */ defineComponent({
       "mode": "CONTENT",
       "context": this.c.context,
       "viewParams": this.c.params,
-      "config": this.generator && this.generator.config
+      "config": this.generator && this.generator.config,
+      "onInit": (args) => {
+        this.generator && this.generator.init(args);
+      },
+      "onReportChartChange": (args) => {
+        this.generator && this.generator.init(args);
+      }
     }, null)]);
   }
 });