@ibiz-template/vue3-components 0.1.28 → 0.1.29-dev.0

package/lib/control/dashboard/dashboard-design/dashboard-design.cjs

@@ -0,0 +1,466 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var ramda = require('ramda');
+require('./dashboard-design.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const DashboardDesign = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizDashboardDesign",
+  props: {
+    dashboard: {
+      type: Object,
+      required: true
+    },
+    customDashboard: {
+      type: Object,
+      required: true
+    },
+    isShowDesign: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ["saved"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace(`dashboard-design`);
+    const customC = props.customDashboard;
+    const filterData = (list2) => {
+      const items = [];
+      list2.forEach((data) => {
+        var _a;
+        if (Object.is(data.type, "app")) {
+          items.push(data);
+        }
+        const dataType = ((_a = customC.model) == null ? void 0 : _a.appDataEntityId) || "app";
+        if (Object.is(data.appCodeName, dataType)) {
+          items.push(data);
+        }
+      });
+      return items;
+    };
+    const prepareListChildren = (children, data) => {
+      let item = children.find((child) => Object.is(data.groupCodeName, child.type));
+      if (!item) {
+        item = {};
+        Object.assign(item, {
+          type: data.groupCodeName,
+          name: data.groupName,
+          children: []
+        });
+        children.push(item);
+      }
+      const _item = item.children.find((child) => Object.is(child.portletCodeName, data.portletCodeName));
+      if (!_item) {
+        item.children.push(data);
+      }
+    };
+    const prepareList = (datas) => {
+      const list2 = [];
+      datas.forEach((data) => {
+        let item = list2.find((_item) => Object.is(data.type, _item.type));
+        if (!item) {
+          item = {};
+          Object.assign(item, {
+            type: data.type,
+            name: Object.is(data.type, "app") ? "\u5168\u5C40" : data.appName,
+            children: []
+          });
+          list2.push(item);
+        }
+        prepareListChildren(item.children, data);
+      });
+      return list2;
+    };
+    const prepareGroup = (datas) => {
+      const items = [];
+      datas.forEach((data) => {
+        const item = items.find((_item) => Object.is(_item.value, data.groupCodeName));
+        if (item) {
+          const _item = item.children.find((a) => Object.is(a.portletCodeName, data.portletCodeName));
+          if (!_item) {
+            item.children.push(data);
+          }
+        } else {
+          items.push({
+            name: data.groupName,
+            value: data.groupCodeName,
+            children: [data]
+          });
+        }
+      });
+      return items;
+    };
+    const prepareData = () => {
+      const list2 = [];
+      const app = ibiz.hub.getApp(ibiz.env.appId);
+      if (app.model.appPortletCats && app.model.appPortlets) {
+        app.model.appPortlets.forEach((portlet) => {
+          var _a;
+          const portletCat = (_a = app.model.appPortletCats) == null ? void 0 : _a.find((cat) => {
+            var _a2;
+            return cat.codeName === ((_a2 = portlet.appPortletCat) == null ? void 0 : _a2.codeName);
+          });
+          const temp = {
+            type: "app",
+            portletCodeName: portlet.codeName,
+            portletName: portlet.name,
+            portletImage: portlet.control.sysImage,
+            groupCodeName: (portletCat == null ? void 0 : portletCat.codeName) || "",
+            groupName: (portletCat == null ? void 0 : portletCat.name) || "",
+            appCodeName: portlet.appDataEntityId || app.model.pkgcodeName,
+            appName: app.model.name
+          };
+          list2.push(temp);
+        });
+      }
+      const datas = filterData(list2);
+      const result2 = prepareList(datas);
+      const groups2 = prepareGroup(datas);
+      return {
+        portlets: datas,
+        list: result2.reverse(),
+        groups: groups2
+      };
+    };
+    const result = prepareData();
+    const portlets = vue.ref(result.portlets);
+    const list = vue.ref(result.list);
+    const groups = vue.ref(result.groups);
+    const filterVal = vue.ref("");
+    const layoutModel = vue.ref(ramda.clone(customC.customModelData));
+    const providers = vue.ref({});
+    const portletControllers = vue.ref({});
+    const initPortlets = async (portletModels) => {
+      if (!(portletModels == null ? void 0 : portletModels.length)) {
+        return;
+      }
+      await Promise.all(portletModels.map(async (portlet) => {
+        const provider = await runtime.getPortletProvider(portlet);
+        if (provider) {
+          providers.value[portlet.id] = provider;
+          const controller = await provider.createController(portlet, props.dashboard);
+          portletControllers.value[portlet.id] = controller;
+        }
+      }));
+    };
+    const getPortletByCodeName = (codeName) => {
+      const app = ibiz.hub.getApp(ibiz.env.appId);
+      if (app.model.appPortlets) {
+        const appPortlet = app.model.appPortlets.find((portlet) => {
+          var _a;
+          return ((_a = portlet.control) == null ? void 0 : _a.codeName) === codeName;
+        });
+        if (appPortlet) {
+          return appPortlet.control;
+        }
+      }
+    };
+    const convertData = (models) => {
+      const tempModelDatas = [];
+      if (models.length > 0) {
+        models.forEach((item) => {
+          const temModelData = getPortletByCodeName(item.portletCodeName);
+          if (temModelData) {
+            tempModelDatas.push(temModelData);
+          }
+        });
+      }
+      return tempModelDatas;
+    };
+    const preparePortlet = async () => {
+      const tempModelDatas = convertData(layoutModel.value);
+      await initPortlets(tempModelDatas);
+    };
+    vue.watch(() => props.isShowDesign, async (newVal) => {
+      if (newVal) {
+        const tempData = await customC.loadCustomModelData();
+        layoutModel.value = ramda.clone(tempData);
+        await preparePortlet();
+      }
+    }, {
+      immediate: true
+    });
+    const isDisabled = (child) => {
+      const model = layoutModel.value.find((item) => item.i === child.portletCodeName);
+      return !!model;
+    };
+    const onReset = () => {
+      layoutModel.value = [];
+    };
+    const onSave = async () => {
+      const model = await customC.saveCustomModelData(layoutModel.value);
+      emit("saved", {
+        model
+      });
+    };
+    const removeItem = async (child) => {
+      const index = layoutModel.value.indexOf(child);
+      if (index !== -1) {
+        layoutModel.value.splice(index, 1);
+        const temModelData = getPortletByCodeName(child.portletCodeName);
+        if (temModelData) {
+          const controller = portletControllers.value[temModelData.id];
+          await controller.destroyed();
+        }
+      }
+    };
+    const addLayoutItem = async (child) => {
+      let maxY = 0;
+      for (const obj of layoutModel.value) {
+        if (obj.y > maxY) {
+          maxY = obj.y;
+        }
+      }
+      layoutModel.value.push({
+        w: 4,
+        h: 3,
+        x: 0,
+        y: maxY + 3,
+        i: child.portletCodeName,
+        ...child
+      });
+      const element = document.querySelector(".custom-dashboard-drawer .el-drawer__body");
+      if (element) {
+        element.scrollTop = element.scrollHeight;
+      }
+      await preparePortlet();
+    };
+    const handleColNumberChange = (colNumber) => {
+      customC.layoutColNum = colNumber;
+    };
+    const handleRolHChange = (rowH) => {
+      customC.layoutRowH = rowH;
+    };
+    const maskSize = vue.computed(() => {
+      return `calc((100% - 10px) / ${customC.layoutColNum}) ${customC.layoutRowH + 10}px`;
+    });
+    vue.onUnmounted(async () => {
+      const controllers = Object.values(portletControllers.value);
+      await Promise.all(controllers.map(async (portlet) => {
+        await portlet.destroyed();
+      }));
+    });
+    return {
+      ns,
+      customC,
+      portlets,
+      list,
+      groups,
+      filterVal,
+      layoutModel,
+      onReset,
+      onSave,
+      removeItem,
+      addLayoutItem,
+      handleColNumberChange,
+      handleRolHChange,
+      isDisabled,
+      providers,
+      portletControllers,
+      getPortletByCodeName,
+      maskSize
+    };
+  },
+  render() {
+    let _slot3;
+    const renderElMenuItem = (child) => {
+      return vue.createVNode(vue.resolveComponent("el-menu-item"), {
+        "key": child.portletCodeName,
+        "index": child.portletCodeName,
+        "tag": child.portletCodeName,
+        "disabled": this.isDisabled(child)
+      }, {
+        default: () => [vue.createVNode("span", null, [vue.createVNode("ion-icon", {
+          "icon": child.portletImage
+        }, null), child.portletName]), vue.createVNode("ion-icon", {
+          "title": "\u6DFB\u52A0",
+          "name": "arrow-forward-outline",
+          "onClick": () => this.addLayoutItem(child)
+        }, null)]
+      });
+    };
+    const renderTree = () => {
+      let _slot, _slot2;
+      return this.filterVal ? vue.createVNode(vue.resolveComponent("el-menu"), {
+        "unique-opened": true,
+        "default-openeds": [this.filterVal],
+        "class": this.ns.is("filter", true)
+      }, _isSlot(_slot = this.groups.map((group) => {
+        if (group.value === this.filterVal) {
+          return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
+            "key": group.value,
+            "index": group.value
+          }, {
+            title: () => {
+              return group.name;
+            },
+            default: () => {
+              return group.children.map((child) => {
+                return renderElMenuItem(child);
+              });
+            }
+          });
+        }
+        return null;
+      })) ? _slot : {
+        default: () => [_slot]
+      }) : vue.createVNode(vue.resolveComponent("el-menu"), {
+        "unique-opened": true,
+        "class": this.ns.is("no-filter", true)
+      }, _isSlot(_slot2 = this.list.map((item, index) => {
+        return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
+          "key": item.type + index,
+          "index": item.type + index
+        }, {
+          title: () => {
+            if (item.type === "app") {
+              return "\u5168\u5C40";
+            }
+            return item.name;
+          },
+          default: () => {
+            return item.children.map((child, index2) => {
+              return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
+                "key": child.type + index2,
+                "index": child.type + index2
+              }, {
+                title: () => {
+                  return child.name;
+                },
+                default: () => {
+                  return child.children.map((child2) => {
+                    return renderElMenuItem(child2);
+                  });
+                }
+              });
+            });
+          }
+        });
+      })) ? _slot2 : {
+        default: () => [_slot2]
+      });
+    };
+    const renderPortlet = (item) => {
+      const portletModel = this.getPortletByCodeName(item.portletCodeName);
+      if (portletModel) {
+        const provider = this.providers[portletModel.id];
+        const controller = this.portletControllers[portletModel.id];
+        const commonProps = {
+          modelData: portletModel,
+          controller
+        };
+        if (!provider) {
+          return vue.createVNode("div", null, [vue.createTextVNode("\u6682\u672A\u652F\u6301"), portletModel.portletType]);
+        }
+        const providerComp = vue.resolveComponent(provider.component);
+        return vue.h(providerComp, {
+          ...commonProps,
+          key: portletModel.id
+        });
+      }
+    };
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.b("header")
+    }, [vue.createVNode("span", null, [vue.createTextVNode("\u81EA\u5B9A\u4E49\u95E8\u6237")]), vue.createVNode("span", {
+      "class": this.ns.b("header-utils")
+    }, [vue.createVNode("div", {
+      "class": this.ns.be("header-utils", "col-num")
+    }, [vue.createTextVNode("\u5217\u6570\uFF1A"), vue.createVNode(vue.resolveComponent("el-input-number"), {
+      "modelValue": this.customC.layoutColNum,
+      "onUpdate:modelValue": ($event) => this.customC.layoutColNum = $event,
+      "onChange": this.handleColNumberChange
+    }, null)]), vue.createVNode("div", {
+      "class": this.ns.be("header-utils", "row-h")
+    }, [vue.createTextVNode("\u5355\u5143\u683C\u9AD8\u5EA6\uFF1A"), vue.createVNode(vue.resolveComponent("el-input-number"), {
+      "modelValue": this.customC.layoutRowH,
+      "onUpdate:modelValue": ($event) => this.customC.layoutRowH = $event,
+      "onChange": this.handleRolHChange
+    }, null)]), vue.createVNode(vue.resolveComponent("el-button"), {
+      "class": this.ns.be("header-utils", "reset"),
+      "onClick": this.onReset
+    }, {
+      default: () => [vue.createTextVNode("\u6062\u590D\u9ED8\u8BA4")]
+    }), vue.createVNode(vue.resolveComponent("el-button"), {
+      "class": this.ns.be("header-utils", "save"),
+      "onClick": this.onSave
+    }, {
+      default: () => [vue.createTextVNode("\u4FDD\u5B58")]
+    })])]), vue.createVNode("div", {
+      "class": this.ns.b("content")
+    }, [vue.createVNode("div", {
+      "class": this.ns.b("tree")
+    }, [vue.createVNode(vue.resolveComponent("el-select"), {
+      "modelValue": this.filterVal,
+      "onUpdate:modelValue": ($event) => this.filterVal = $event,
+      "clearable": true,
+      "class": this.ns.b("tree-filter")
+    }, _isSlot(_slot3 = this.groups.map((group) => {
+      return vue.createVNode(vue.resolveComponent("el-option"), {
+        "key": group.value,
+        "value": group.value,
+        "label": group.name
+      }, null);
+    })) ? _slot3 : {
+      default: () => [_slot3]
+    }), vue.createVNode("div", {
+      "class": this.ns.b("tree-content")
+    }, [renderTree()])]), vue.createVNode("div", {
+      "class": this.ns.b("panel")
+    }, [vue.createVNode(vue.resolveComponent("grid-layout"), {
+      "class": this.ns.b("grid-layout"),
+      "layout": this.layoutModel,
+      "col-num": this.customC.layoutColNum,
+      "row-height": this.customC.layoutRowH,
+      "is-draggable": true,
+      "is-resizable": true,
+      "is-mirrored": false,
+      "vertical-compact": true,
+      "margin": [10, 10],
+      "use-css-transforms": true,
+      "style": {
+        maxHeight: "100%"
+      }
+    }, {
+      default: () => [vue.createVNode("div", {
+        "class": this.ns.b("grid-layout-mask"),
+        "style": {
+          backgroundSize: this.maskSize
+        }
+      }, null), this.layoutModel.map((item) => {
+        return vue.createVNode(vue.resolveComponent("grid-item"), {
+          "x": item.x,
+          "y": item.y,
+          "w": item.w,
+          "h": item.h,
+          "i": item.i,
+          "key": item.i
+        }, {
+          default: () => [vue.createVNode(vue.resolveComponent("el-card"), {
+            "class": this.ns.b("grid-layout-item")
+          }, {
+            default: () => [vue.createVNode("div", {
+              "class": this.ns.b("grid-layout-item-header")
+            }, [vue.createVNode("span", null, [item.portletName]), vue.createVNode("ion-icon", {
+              "name": "close-outline",
+              "onClick": () => this.removeItem(item)
+            }, null)]), vue.createVNode("div", {
+              "class": this.ns.b("grid-layout-item-content")
+            }, [renderPortlet(item)])]
+          })]
+        });
+      })]
+    })])])]);
+  }
+});
+
+exports.DashboardDesign = DashboardDesign;

package/lib/control/dashboard/dashboard-design/dashboard-design.css

@@ -0,0 +1 @@
+.ibiz-dashboard-design{width:100%;height:100%}.ibiz-dashboard-design .ibiz-dashboard-design-header{height:48px;padding:var(--ibiz-spacing-tight);display:flex;align-items:center;justify-content:space-between}.ibiz-dashboard-design .ibiz-dashboard-design-header .ibiz-dashboard-design-header-utils{display:flex;align-items:center;justify-content:flex-start}.ibiz-dashboard-design-header-utils__col-num{margin-right:var(--ibiz-spacing-tight)}.ibiz-dashboard-design-header-utils__row-h{margin-right:var(--ibiz-spacing-tight)}.ibiz-dashboard-design .ibiz-dashboard-design-content{width:100%;height:calc(100% - 48px);display:flex;align-items:flex-start;justify-content:flex-start}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree{min-width:300px;height:100%}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-filter{width:100%;height:32px;padding:0 var(--ibiz-spacing-tight)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content{height:calc(100% - 32px);overflow:auto}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu{height:100%;border:none}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item{display:flex;flex-flow:flex nowrap;align-items:center;justify-content:space-between}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item>span{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item ion-icon{cursor:pointer}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item ion-icon:hover{color:var(--ibiz-color-primary)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel{flex-grow:1;min-height:100%;background:#efefef}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout{position:relative}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-mask{position:absolute;inset:0;height:100%;min-height:1250px;background:linear-gradient(to bottom,var(--ibiz-color-primary) 10px,transparent 10px),linear-gradient(to right,var(--ibiz-color-primary) 10px,transparent 10px)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item{width:100%;height:100%}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .el-card__body{display:flex;flex-flow:column nowrap;height:100%;background-color:var(--ibiz-color-white)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-header{display:flex;align-items:center;justify-content:space-between}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-header>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-header ion-icon{cursor:pointer}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%}

package/lib/control/dashboard/dashboard.cjs

@@ -5,6 +5,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 require('./dashboard.css');
 var runtime = require('@ibiz-template/runtime');
 
+"use strict";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
@@ -57,27 +58,32 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
   },
   setup() {
     const c = vue3Util.useControlController((...args) => new runtime.DashboardController(...args));
+    const customModelDatas = vue.ref([]);
     const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}`);
     c.evt.on("onCreated", () => {
       Object.values(c.portlets).forEach((portlet) => {
         portlet.state = vue.reactive(portlet.state);
       });
     });
+    const handleCustomModelChange = async (args) => {
+      customModelDatas.value = args.model;
+      await c.initPortlets(customModelDatas.value);
+    };
     return {
       c,
-      ns
+      ns,
+      customModelDatas,
+      handleCustomModelChange
     };
   },
   render() {
+    let _slot2;
     const {
       state,
       model
     } = this.c;
-    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "controller": this.c,
-      "class": [this.ns.b()]
-    }, {
-      default: () => [state.isCreated && vue.createVNode(vue.resolveComponent("iBizRow"), {
+    const renderDefaultContent = () => {
+      return vue.createVNode(vue.resolveComponent("iBizRow"), {
         "class": [this.ns.b()],
         "layout": model.layout
       }, {
@@ -94,7 +100,30 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
             });
           })];
         }
-      })]
+      });
+    };
+    const renderCustomSlots = () => {
+      const slots = {
+        default: () => {
+          return renderDefaultContent();
+        }
+      };
+      this.customModelDatas.forEach((item) => {
+        slots[item.codeName] = () => renderPortletByType(item, this.c);
+      });
+      return slots;
+    };
+    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+      "controller": this.c,
+      "class": [this.ns.b()]
+    }, {
+      default: () => [state.isCreated && (model.enableCustomized ? vue.createVNode(vue.resolveComponent("iBizCustomDashboardContainer"), {
+        "modelData": this.modelData,
+        "dashboard": this.c,
+        "onChanged": this.handleCustomModelChange
+      }, _isSlot(_slot2 = renderCustomSlots()) ? _slot2 : {
+        default: () => [_slot2]
+      }) : renderDefaultContent())]
     });
   }
 });

package/lib/control/dashboard/dashboard.css

@@ -1 +1 @@
-.ibiz-control-dashboard{height:100%}
+.ibiz-control-dashboard{position:relative;align-content:flex-start;height:100%;overflow-y:scroll}.ibiz-control-dashboard .ibiz-control-dashboard-build-btn{position:absolute;right:0;z-index:10}

package/lib/control/dashboard/dashboard.provider.cjs

@@ -1,5 +1,6 @@
 '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) => {

package/lib/control/dashboard/index.cjs

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
 var dashboard = require('./dashboard.cjs');
+var dashboardDesign = require('./dashboard-design/dashboard-design.cjs');
+var customDashboardContainer = require('./custom-dashboard-container/custom-dashboard-container.cjs');
 var dashboard_provider = require('./dashboard.provider.cjs');
 require('./portlet/index.cjs');
 var portletLayout = require('./portlet/portlet-layout/portlet-layout.cjs');
@@ -15,10 +17,13 @@ var containerPortlet = require('./portlet/container-portlet/container-portlet.cj
 var viewPortlet_provider = require('./portlet/view-portlet/view-portlet.provider.cjs');
 var viewPortlet = require('./portlet/view-portlet/view-portlet.cjs');
 
+"use strict";
 const IBizDashboardControl = vue3Util.withInstall(
   dashboard.DashboardControl,
   function(v) {
     v.component(dashboard.DashboardControl.name, dashboard.DashboardControl);
+    v.component(dashboardDesign.DashboardDesign.name, dashboardDesign.DashboardDesign);
+    v.component(customDashboardContainer.CustomDashboardContainer.name, customDashboardContainer.CustomDashboardContainer);
     runtime.registerControlProvider(
       runtime.ControlType.DASHBOARD,
       () => new dashboard_provider.DashboardProvider()

package/lib/control/dashboard/portlet/container-portlet/container-portlet.cjs

@@ -5,6 +5,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 require('./container-portlet.css');
 
+"use strict";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }

package/lib/control/dashboard/portlet/container-portlet/container-portlet.provider.cjs

@@ -2,6 +2,7 @@
 
 var runtime = require('@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) => {

package/lib/control/dashboard/portlet/container-portlet/index.cjs

@@ -7,6 +7,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var containerPortlet = require('./container-portlet.cjs');
 var containerPortlet_provider = require('./container-portlet.provider.cjs');
 
+"use strict";
 const IBizContainerPortlet = vue3Util.withInstall(
   containerPortlet.ContainerPortlet,
   function(v) {

package/lib/control/dashboard/portlet/index.cjs

@@ -8,7 +8,7 @@ var containerPortlet = require('./container-portlet/container-portlet.cjs');
 var viewPortlet_provider = require('./view-portlet/view-portlet.provider.cjs');
 var viewPortlet = require('./view-portlet/view-portlet.cjs');
 
-
+"use strict";
 
 exports.IBizContainerPortlet = index.IBizContainerPortlet;
 exports.PortletLayout = portletLayout.PortletLayout;

package/lib/control/dashboard/portlet/portlet-layout/portlet-layout.cjs

@@ -5,6 +5,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 require('./portlet-layout.css');
 var runtime = require('@ibiz-template/runtime');
 
+"use strict";
 const PortletLayout = /* @__PURE__ */ vue.defineComponent({
   name: "IBizPortletLayout",
   props: {

package/lib/control/dashboard/portlet/view-portlet/index.cjs

@@ -7,6 +7,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var viewPortlet = require('./view-portlet.cjs');
 var viewPortlet_provider = require('./view-portlet.provider.cjs');
 
+"use strict";
 const IBizViewPortlet = vue3Util.withInstall(viewPortlet.ViewPortlet, function(v) {
   v.component(viewPortlet.ViewPortlet.name, viewPortlet.ViewPortlet);
   runtime.registerPortletProvider("VIEW", () => new viewPortlet_provider.ViewPortletProvider());

package/lib/control/dashboard/portlet/view-portlet/view-portlet.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 
+"use strict";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }

package/lib/control/dashboard/portlet/view-portlet/view-portlet.provider.cjs

@@ -2,6 +2,7 @@
 
 var runtime = require('@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) => {

package/lib/control/data-view/data-view.cjs

@@ -5,6 +5,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 require('./data-view.css');
 
+"use strict";
 const DataViewControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDataViewControl",
   props: {

package/lib/control/data-view/data-view.provider.cjs

@@ -1,5 +1,6 @@
 '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) => {