@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.9

package/es/control/dashboard/custom-dashboard-container/custom-dashboard-container.mjs

@@ -0,0 +1,143 @@
+import { reactive, ref, computed, onMounted, resolveComponent, createVNode, defineComponent } from 'vue';
+import { CustomDashboardController } from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './custom-dashboard-container.css';
+
+"use strict";
+const CustomDashboardContainer = /* @__PURE__ */ defineComponent({
+  name: "IBizCustomDashboardContainer",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    dashboard: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace(`custom-dashboard-container`);
+    const customC = reactive(new CustomDashboardController(props.modelData));
+    const isInited = ref(false);
+    const isShowDesign = ref(false);
+    const showTypeDir = ref(false);
+    const openDesign = () => {
+      isShowDesign.value = true;
+    };
+    const clickCollapse = (type) => {
+      showTypeDir.value = type === "left";
+    };
+    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 onSaved = (args) => {
+      isShowDesign.value = false;
+      const tempModelDatas = convertData(args.model);
+      emit("changed", {
+        model: tempModelDatas
+      });
+    };
+    const isShowDefault = computed(() => {
+      return customC.customModelData.length === 0;
+    });
+    onMounted(async () => {
+      const model = await customC.loadCustomModelData();
+      const tempModelDatas = convertData(model);
+      emit("changed", {
+        model: tempModelDatas
+      });
+      isInited.value = true;
+    });
+    return {
+      ns,
+      customC,
+      isShowDesign,
+      isInited,
+      isShowDefault,
+      showTypeDir,
+      openDesign,
+      onSaved,
+      clickCollapse
+    };
+  },
+  render() {
+    var _a, _b;
+    return createVNode("div", {
+      "class": [this.ns.b()]
+    }, [createVNode("div", {
+      "class": this.ns.b("build-btn")
+    }, [this.showTypeDir ? createVNode("div", null, [createVNode(resolveComponent("el-button"), {
+      "class": this.ns.b("deisgn-btn"),
+      "onClick": this.openDesign
+    }, {
+      default: () => [createVNode("ion-icon", {
+        "name": "build-outline"
+      }, null)]
+    }), createVNode(resolveComponent("el-button"), {
+      "class": this.ns.b("forward-btn"),
+      "onClick": () => this.clickCollapse("right")
+    }, {
+      default: () => [createVNode("ion-icon", {
+        "name": "chevron-forward-outline"
+      }, null)]
+    })]) : createVNode(resolveComponent("el-button"), {
+      "class": this.ns.b("back-btn"),
+      "onClick": () => this.clickCollapse("left")
+    }, {
+      default: () => [createVNode("ion-icon", {
+        "name": "chevron-back-outline"
+      }, null)]
+    })]), createVNode(resolveComponent("el-drawer"), {
+      "modelValue": this.isShowDesign,
+      "onUpdate:modelValue": ($event) => this.isShowDesign = $event,
+      "with-header": false,
+      "size": "80%",
+      "modal-class": "custom-dashboard-drawer"
+    }, {
+      default: () => [this.isShowDesign && createVNode(resolveComponent("iBizDashboardDesign"), {
+        "dashboard": this.dashboard,
+        "custom-dashboard": this.customC,
+        "is-show-design": this.isShowDesign,
+        "onSaved": this.onSaved
+      }, null)]
+    }), this.isInited && (this.isShowDefault ? (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a) : this.customC.customModelData.map((item) => {
+      var _a2, _b2;
+      const itemStyle = {
+        position: "absolute",
+        height: `${item.h * this.customC.layoutRowH}px`,
+        width: `calc(100% / ${this.customC.layoutColNum} * ${item.w})`,
+        top: `${item.y * this.customC.layoutRowH}px`,
+        left: `calc(100% / ${this.customC.layoutColNum} * ${item.x})`
+      };
+      return createVNode("div", {
+        "style": itemStyle
+      }, [(_b2 = (_a2 = this.$slots)[item.portletCodeName]) == null ? void 0 : _b2.call(_a2)]);
+    }))]);
+  }
+});
+
+export { CustomDashboardContainer };

package/es/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%;overflow-y:scroll}.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-scroll-box{flex-grow:1;height:100%;overflow-y:scroll;background:#efefef}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel{position:relative}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout-mask{position:absolute;inset:0;height:100%;min-height:1248px;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/es/control/dashboard/dashboard-design/dashboard-design.mjs

@@ -0,0 +1,497 @@
+import { isVNode, ref, computed, watch, onUnmounted, resolveComponent, createVNode, createTextVNode, h, defineComponent } from 'vue';
+import { getPortletProvider } from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { clone } from 'ramda';
+import './dashboard-design.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const DashboardDesign = /* @__PURE__ */ 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 = 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 = ref(result.portlets);
+    const list = ref(result.list);
+    const groups = ref(result.groups);
+    const filterVal = ref("");
+    const layoutModel = ref(clone(customC.customModelData));
+    const providers = ref({});
+    const portletControllers = ref({});
+    const designPanel = ref(null);
+    const defaultOpens = computed(() => {
+      let tempOpens = [];
+      if (filterVal.value) {
+        tempOpens = [filterVal.value];
+      } else {
+        list.value.forEach((item, index) => {
+          tempOpens.push(item.type + index);
+          item.children.forEach((child, index2) => {
+            tempOpens.push(child.type + index2);
+          });
+        });
+      }
+      return tempOpens;
+    });
+    const initPortlets = async (portletModels) => {
+      if (!(portletModels == null ? void 0 : portletModels.length)) {
+        return;
+      }
+      await Promise.all(portletModels.map(async (portlet) => {
+        const provider = await 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);
+    };
+    watch(() => props.isShowDesign, async (newVal) => {
+      if (newVal) {
+        const tempData = await customC.loadCustomModelData();
+        layoutModel.value = 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 lastScrollHeight = ref(0);
+    const addLayoutItem = async (child) => {
+      const element = designPanel.value;
+      if (element) {
+        lastScrollHeight.value = element.scrollHeight + 3 * customC.layoutRowH;
+      }
+      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
+      });
+      await preparePortlet();
+      if (element) {
+        const intervalId = setInterval(() => {
+          if (element.scrollHeight >= lastScrollHeight.value) {
+            element.scrollTo({
+              top: element.scrollHeight,
+              behavior: "smooth"
+            });
+            clearInterval(intervalId);
+          }
+        }, 50);
+      }
+    };
+    const handleColNumberChange = (colNumber) => {
+      customC.layoutColNum = colNumber;
+    };
+    const handleRolHChange = (rowH) => {
+      customC.layoutRowH = rowH;
+    };
+    const maskSize = computed(() => {
+      return `calc((100% - 10px) / ${customC.layoutColNum}) ${customC.layoutRowH + 10}px`;
+    });
+    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,
+      defaultOpens,
+      layoutModel,
+      onReset,
+      onSave,
+      removeItem,
+      addLayoutItem,
+      handleColNumberChange,
+      handleRolHChange,
+      isDisabled,
+      providers,
+      portletControllers,
+      getPortletByCodeName,
+      maskSize,
+      designPanel
+    };
+  },
+  render() {
+    let _slot3, _slot4;
+    const renderElMenuItem = (child) => {
+      return createVNode(resolveComponent("el-menu-item"), {
+        "key": child.portletCodeName,
+        "index": child.portletCodeName,
+        "tag": child.portletCodeName,
+        "disabled": this.isDisabled(child)
+      }, {
+        default: () => [createVNode("span", null, [createVNode("ion-icon", {
+          "icon": child.portletImage
+        }, null), child.portletName]), createVNode("ion-icon", {
+          "title": "\u6DFB\u52A0",
+          "name": "arrow-forward-outline",
+          "onClick": () => this.addLayoutItem(child)
+        }, null)]
+      });
+    };
+    const renderTree = () => {
+      let _slot, _slot2;
+      return this.filterVal ? createVNode(resolveComponent("el-menu"), {
+        "default-openeds": this.defaultOpens,
+        "class": this.ns.is("filter", true),
+        "key": this.filterVal
+      }, _isSlot(_slot = this.groups.map((group) => {
+        if (group.value === this.filterVal) {
+          return createVNode(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]
+      }) : createVNode(resolveComponent("el-menu"), {
+        "class": this.ns.is("no-filter", true),
+        "default-openeds": this.defaultOpens,
+        "key": "default"
+      }, _isSlot(_slot2 = this.list.map((item, index) => {
+        return createVNode(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 createVNode(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 createVNode("div", null, [createTextVNode("\u6682\u672A\u652F\u6301"), portletModel.portletType]);
+        }
+        const providerComp = resolveComponent(provider.component);
+        return h(providerComp, {
+          ...commonProps,
+          key: portletModel.id
+        });
+      }
+    };
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.b("header")
+    }, [createVNode("span", null, [createTextVNode("\u81EA\u5B9A\u4E49\u95E8\u6237")]), createVNode("span", {
+      "class": this.ns.b("header-utils")
+    }, [createVNode("div", {
+      "class": this.ns.be("header-utils", "col-num")
+    }, [createTextVNode("\u5217\u6570\uFF1A"), createVNode(resolveComponent("el-input-number"), {
+      "modelValue": this.customC.layoutColNum,
+      "onUpdate:modelValue": ($event) => this.customC.layoutColNum = $event,
+      "onChange": this.handleColNumberChange
+    }, null)]), createVNode("div", {
+      "class": this.ns.be("header-utils", "row-h")
+    }, [createTextVNode("\u5355\u5143\u683C\u9AD8\u5EA6\uFF1A"), createVNode(resolveComponent("el-input-number"), {
+      "modelValue": this.customC.layoutRowH,
+      "onUpdate:modelValue": ($event) => this.customC.layoutRowH = $event,
+      "onChange": this.handleRolHChange
+    }, null)]), createVNode(resolveComponent("el-button"), {
+      "class": this.ns.be("header-utils", "reset"),
+      "onClick": this.onReset
+    }, {
+      default: () => [createTextVNode("\u6062\u590D\u9ED8\u8BA4")]
+    }), createVNode(resolveComponent("el-button"), {
+      "class": this.ns.be("header-utils", "save"),
+      "onClick": this.onSave
+    }, {
+      default: () => [createTextVNode("\u4FDD\u5B58")]
+    })])]), createVNode("div", {
+      "class": this.ns.b("content")
+    }, [createVNode("div", {
+      "class": this.ns.b("tree")
+    }, [createVNode(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 createVNode(resolveComponent("el-option"), {
+        "key": group.value,
+        "value": group.value,
+        "label": group.name
+      }, null);
+    })) ? _slot3 : {
+      default: () => [_slot3]
+    }), createVNode("div", {
+      "class": this.ns.b("tree-content")
+    }, [renderTree()])]), createVNode("div", {
+      "class": this.ns.b("scroll-box"),
+      "ref": "designPanel"
+    }, [createVNode("div", {
+      "class": this.ns.b("panel")
+    }, [createVNode("div", {
+      "class": this.ns.b("grid-layout-mask"),
+      "style": {
+        backgroundSize: this.maskSize
+      }
+    }, null), createVNode(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%"
+      }
+    }, _isSlot(_slot4 = this.layoutModel.map((item) => {
+      return createVNode(resolveComponent("grid-item"), {
+        "x": item.x,
+        "y": item.y,
+        "w": item.w,
+        "h": item.h,
+        "i": item.i,
+        "key": item.i
+      }, {
+        default: () => [createVNode(resolveComponent("el-card"), {
+          "class": this.ns.b("grid-layout-item")
+        }, {
+          default: () => [createVNode("div", {
+            "class": this.ns.b("grid-layout-item-header")
+          }, [createVNode("span", null, [item.portletName]), createVNode("ion-icon", {
+            "name": "close-outline",
+            "onClick": () => this.removeItem(item)
+          }, null)]), createVNode("div", {
+            "class": this.ns.b("grid-layout-item-content")
+          }, [renderPortlet(item)])]
+        })]
+      });
+    })) ? _slot4 : {
+      default: () => [_slot4]
+    })])])])]);
+  }
+});
+
+export { DashboardDesign };

package/es/control/dashboard/dashboard.css

@@ -0,0 +1 @@
+.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}