npm - @ibiz-template/vue3-components - Versions diffs - 0.7.34 → 0.7.38-alpha.12 - Mend

@ibiz-template/vue3-components 0.7.34 → 0.7.38-alpha.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1061) hide show

package/lib/control/caption-bar/caption-bar.cjs CHANGED Viewed

@@ -32,9 +32,13 @@ const CaptionBarControl = /* @__PURE__ */ vue.defineComponent({
     vue.onActivated(() => {
       c.setBrowserTabTitle();
     });
+    const showTotal = vue.computed(() => {
+      return c.state.totalx !== void 0;
+    });
     return {
       c,
-      ns
+      ns,
+      showTotal
     };
   },
   render() {
@@ -49,7 +53,12 @@ const CaptionBarControl = /* @__PURE__ */ vue.defineComponent({
         "icon": this.c.model.sysImage
       }, null), vue.createVNode("div", {
         "class": [this.ns.be("caption", "content")]
-      }, [this.c.state.caption])])]
+      }, [this.c.state.caption]), this.showTotal && vue.createVNode("div", {
+        "class": [this.ns.be("caption", "total")]
+      }, [ibiz.i18n.t("control.captionBar.total", {
+        total: this.c.state.totalx,
+        invisibleNum: this.c.state.totalx - this.c.state.total
+      })])])]
     });
   }
 });

package/lib/control/caption-bar/caption-bar.css CHANGED Viewed

	@@ -1 +1 @@
1	- .ibiz-control-captionbar{--ibiz-control-captionbar-color:var(--ibiz-color-text-0);--ibiz-control-captionbar-font-size:var(--ibiz-font-size-header-5);--ibiz-control-captionbar-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-captionbar-padding:0 var(--ibiz-spacing-base);--ibiz-control-captionbar-margin:var(--ibiz-spacing-none);position:relative;height:100%;padding:var(--ibiz-control-captionbar-padding)}.ibiz-control-captionbar .ibiz-control-captionbar-caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;height:100%;padding-left:var(--ibiz-spacing-base);font-size:var(--ibiz-control-captionbar-font-size);font-weight:var(--ibiz-control-captionbar-font-weight);color:var(--ibiz-control-captionbar-color);display:flex;align-items:center;justify-content:flex-start}.ibiz-control-captionbar .ibiz-control-captionbar-caption::before{position:absolute;top:50%;left:0;width:4px;height:var(--ibiz-width-icon-large);content:"";background-color:var(--ibiz-color-primary);border-radius:2px;transform:translateY(-50%)}.ibiz-control-captionbar .ibiz-control-captionbar-caption.is-show-icon{padding-left:0}.ibiz-control-captionbar .ibiz-control-captionbar-caption.is-show-icon::before{display:none}.ibiz-control-captionbar-caption__icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-control-captionbar-caption__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-view:not(.ibiz-view-appindexview) .ibiz-view .ibiz-view .ibiz-control-captionbar-caption{--ibiz-control-captionbar-font-size:var(--ibiz-font-size-header-5);--ibiz-control-captionbar-font-weight:var(--ibiz-font-weight-regular);padding-left:0}.ibiz-view:not(.ibiz-view-appindexview) .ibiz-view .ibiz-view .ibiz-control-captionbar-caption::before{content:none}.ibiz-drawer .ibiz-view .ibiz-view .ibiz-control-captionbar-caption,.ibiz-modal .ibiz-view .ibiz-view .ibiz-control-captionbar-caption,.ibiz-popover .ibiz-view .ibiz-view .ibiz-control-captionbar-caption{--ibiz-control-captionbar-font-size:var(--ibiz-font-size-header-5);--ibiz-control-captionbar-font-weight:var(--ibiz-font-weight-regular);padding-left:0}.ibiz-drawer .ibiz-view .ibiz-view .ibiz-control-captionbar-caption::before,.ibiz-modal .ibiz-view .ibiz-view .ibiz-control-captionbar-caption::before,.ibiz-popover .ibiz-view .ibiz-view .ibiz-control-captionbar-caption::before{content:none}
1	+ .ibiz-control-captionbar{--ibiz-control-captionbar-color:var(--ibiz-color-text-0);--ibiz-control-captionbar-font-size:var(--ibiz-font-size-header-5);--ibiz-control-captionbar-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-captionbar-padding:0 var(--ibiz-spacing-base);--ibiz-control-captionbar-margin:var(--ibiz-spacing-none);position:relative;height:100%;padding:var(--ibiz-control-captionbar-padding)}.ibiz-control-captionbar .ibiz-control-captionbar-caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;height:100%;padding-left:var(--ibiz-spacing-base);font-size:var(--ibiz-control-captionbar-font-size);font-weight:var(--ibiz-control-captionbar-font-weight);color:var(--ibiz-control-captionbar-color);display:flex;align-items:center;justify-content:flex-start}.ibiz-control-captionbar .ibiz-control-captionbar-caption::before{position:absolute;top:50%;left:0;width:4px;height:var(--ibiz-width-icon-large);content:"";background-color:var(--ibiz-color-primary);border-radius:2px;transform:translateY(-50%)}.ibiz-control-captionbar .ibiz-control-captionbar-caption.is-show-icon{padding-left:0}.ibiz-control-captionbar .ibiz-control-captionbar-caption.is-show-icon::before{display:none}.ibiz-control-captionbar-caption__icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-control-captionbar-caption__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-captionbar-caption__total{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-3);transform:translate(0,2px)}.ibiz-view:not(.ibiz-view-appindexview) .ibiz-view .ibiz-view .ibiz-control-captionbar-caption{--ibiz-control-captionbar-font-size:var(--ibiz-font-size-header-5);--ibiz-control-captionbar-font-weight:var(--ibiz-font-weight-regular);padding-left:0}.ibiz-view:not(.ibiz-view-appindexview) .ibiz-view .ibiz-view .ibiz-control-captionbar-caption::before{content:none}.ibiz-drawer .ibiz-view .ibiz-view .ibiz-control-captionbar-caption,.ibiz-modal .ibiz-view .ibiz-view .ibiz-control-captionbar-caption,.ibiz-popover .ibiz-view .ibiz-view .ibiz-control-captionbar-caption{--ibiz-control-captionbar-font-size:var(--ibiz-font-size-header-5);--ibiz-control-captionbar-font-weight:var(--ibiz-font-weight-regular);padding-left:0}.ibiz-drawer .ibiz-view .ibiz-view .ibiz-control-captionbar-caption::before,.ibiz-modal .ibiz-view .ibiz-view .ibiz-control-captionbar-caption::before,.ibiz-popover .ibiz-view .ibiz-view .ibiz-control-captionbar-caption::before{content:none}

package/lib/control/chart/chart.cjs CHANGED Viewed

@@ -65,7 +65,7 @@ const ChartControl = /* @__PURE__ */ vue.defineComponent({
       if (!props.data) {
         return;
       }
-      c.state.items = props.data;
+      c.state.items = props.data.map((item) => new runtime.ControlVO(item));
       c.afterLoad({}, c.state.items);
     };
     c.evt.on("onCreated", async () => {
@@ -146,7 +146,7 @@ const ChartControl = /* @__PURE__ */ vue.defineComponent({
       if (drillDetails == null ? void 0 : drillDetails.length) {
         chart.on("click", (params) => {
           const serieModel = c.computedClickSerieModel(params);
-          if (!serieModel) {
+          if (!serieModel || ibiz.fullscreenUtil.isFullScreen) {
             return;
           }
           const tempDrill = drillDetails.find((item) => {

package/lib/control/context-menu/context-menu.cjs CHANGED Viewed

@@ -83,10 +83,11 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       });
     }
     const calcActionItemClass = (item) => {
+      var _a;
       const {
         actionLevel
       } = item;
-      return [ns.e("item"), ns.is("disabled", false), ns.em("item", "level-".concat(actionLevel))];
+      return [ns.e("item"), "".concat((_a = item == null ? void 0 : item.sysCss) == null ? void 0 : _a.cssName), ns.em("item", "level-".concat(actionLevel)), ns.is("disabled", c.state.buttonsState[item.id].disabled)];
     };
     vue.watch(() => props.nodeData, async (newVal, oldVal) => {
       if (newVal !== oldVal) {
@@ -96,7 +97,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
     c.evt.on("onCreated", async () => {
       await c.calcButtonState(props.nodeData._deData || (props.nodeData.srfkey ? props.nodeData : void 0), props.nodeModel.appDataEntityId);
     });
-    const handleClick = async (detail, e) => {
+    const handleClick = (detail, e) => {
       if (props.mode === "buttons") {
         popoverVisible.value = false;
       } else if (dropdownRef.value) {
@@ -104,96 +105,140 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       }
       e.stopPropagation();
       popoverVisible.value = false;
-      emit("action-click", detail, e);
-    };
-    return {
-      c,
-      ns,
-      expandDetails,
-      groupDetails,
-      groupButtonRef,
-      dropdownRef,
-      popoverVisible,
-      handleClick,
-      calcActionItemClass,
-      actionDetails
+      if (detail.uiactionId) {
+        emit("action-click", detail, e);
+      }
     };
-  },
-  render() {
-    const details = this.actionDetails || [];
     const renderDivider = (isExpand) => {
       return vue.createVNode(vue.resolveComponent("el-divider"), {
-        "class": this.ns.e("separator"),
+        "class": ns.e("separator"),
         "border-style": "double",
         "direction": isExpand ? "vertical" : "horizontal"
       }, null);
     };
+    const renderActionButton = (detail, isExpand = true) => {
+      if (c.state.buttonsState[detail.id].visible) {
+        return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
+          "text": true,
+          "size": "small",
+          "title": core.showTitle(detail.tooltip),
+          "class": calcActionItemClass(detail),
+          "disabled": c.state.buttonsState[detail.id].disabled,
+          "onClick": (e) => handleClick(detail, e)
+        }, {
+          default: () => [vue.createVNode("div", {
+            "class": ns.e("action-content")
+          }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
+            "class": ns.e("action-content-icon")
+          }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": detail.sysImage
+          }, null)]), detail.showCaption ? vue.createVNode("div", {
+            "class": ns.e("action-content-caption")
+          }, [detail.caption]) : ""])]
+        })];
+      }
+      return null;
+    };
+    const renderGroupItem = (item, isExpand = true) => {
+      var _a, _b, _c;
+      const {
+        groupExtractMode,
+        uiactionGroup
+      } = item;
+      let detail = item;
+      if (uiactionGroup && groupExtractMode === "ITEM") {
+        return (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((_item) => renderActionButton(_item, isExpand));
+      }
+      const details = (_c = (_b = item.uiactionGroup) == null ? void 0 : _b.uiactionGroupDetails) == null ? void 0 : _c.filter((_item) => c.state.buttonsState[_item.id].visible);
+      if (uiactionGroup && groupExtractMode === "ITEMX" && details) {
+        detail = details[0];
+      }
+      if (detail) {
+        return vue.createVNode(vue.resolveComponent("el-popover"), {
+          "placement": "right-start",
+          "popper-class": ns.e("popover"),
+          "teleported": false,
+          "popper-options": {
+            modifiers: [{
+              name: "offset",
+              options: {
+                offset: [0, 4]
+              }
+            }]
+          }
+        }, {
+          reference: () => {
+            return vue.createVNode(vue.resolveComponent("el-button"), {
+              "text": true,
+              "size": "small",
+              "onClick": (e) => handleClick(detail, e),
+              "title": core.showTitle(detail.tooltip),
+              "class": calcActionItemClass(detail),
+              "disabled": c.state.buttonsState[detail.id].disabled
+            }, {
+              default: () => [vue.createVNode("div", {
+                "class": ns.e("action-content")
+              }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
+                "class": ns.e("action-content-icon")
+              }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                "icon": detail.sysImage
+              }, null)]), detail.showCaption ? vue.createVNode("div", {
+                "class": [ns.e("action-content-caption"), ns.e("action-content-group-caption")]
+              }, [detail.caption]) : "", vue.createVNode("ion-icon", {
+                "class": ns.e("action-content-group-icon"),
+                "name": "chevron-forward-outline"
+              }, null)])]
+            });
+          },
+          default: () => {
+            if (uiactionGroup) {
+              return details == null ? void 0 : details.map((_item, index) => {
+                if (groupExtractMode === "ITEMX" && index === 0) {
+                  return null;
+                }
+                return renderActionButton(_item, isExpand);
+              });
+            }
+            return renderActions(item.detoolbarItems || [], isExpand);
+          }
+        });
+      }
+    };
     const renderActions = (items, isExpand = true) => {
       return items.map((detail) => {
-        var _a, _b;
-        if (!((_a = this.c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible)) {
+        var _a;
+        if (!((_a = c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible)) {
           return null;
         }
         if (detail.itemType === "SEPERATOR") {
           return renderDivider(isExpand);
         }
-        if (detail.itemType === "DEUIACTION" || detail.itemType === "ITEMS" && !((_b = detail.detoolbarItems) == null ? void 0 : _b.length)) {
-          return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
-            "text": true,
-            "size": "small",
-            "onClick": (e) => this.handleClick(detail, e),
-            "title": core.showTitle(detail.tooltip),
-            "disabled": this.c.state.buttonsState[detail.id].disabled,
-            "class": this.calcActionItemClass(detail)
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": this.ns.e("action-content")
-            }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
-              "class": this.ns.e("action-content-icon")
-            }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-              "icon": detail.sysImage
-            }, null)]), detail.showCaption ? vue.createVNode("div", {
-              "class": this.ns.e("action-content-caption")
-            }, [detail.caption]) : ""])]
-          })];
+        if (detail.itemType === "DEUIACTION") {
+          return renderActionButton(detail, isExpand);
         }
         if (detail.itemType === "ITEMS") {
-          return vue.createVNode(vue.resolveComponent("el-popover"), {
-            "placement": "right-start",
-            "popper-class": this.ns.e("popover"),
-            "teleported": false
-          }, {
-            reference: () => {
-              return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
-                "text": true,
-                "size": "small",
-                "onClick": (e) => this.handleClick(detail, e),
-                "title": core.showTitle(detail.tooltip),
-                "disabled": this.c.state.buttonsState[detail.id].disabled,
-                "class": this.calcActionItemClass(detail)
-              }, {
-                default: () => [vue.createVNode("div", {
-                  "class": this.ns.e("action-content")
-                }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
-                  "class": this.ns.e("action-content-icon")
-                }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                  "icon": detail.sysImage
-                }, null)]), detail.showCaption ? vue.createVNode("div", {
-                  "class": [this.ns.e("action-content-caption"), this.ns.e("action-content-group-caption")]
-                }, [detail.caption]) : "", vue.createVNode("ion-icon", {
-                  "class": this.ns.e("action-content-group-icon"),
-                  "name": "chevron-forward-outline"
-                }, null)])]
-              })];
-            },
-            default: () => {
-              return renderActions(detail.detoolbarItems || [], isExpand);
-            }
-          });
+          return renderGroupItem(detail, isExpand);
         }
         return null;
       });
     };
+    return {
+      c,
+      ns,
+      expandDetails,
+      groupDetails,
+      groupButtonRef,
+      dropdownRef,
+      popoverVisible,
+      handleClick,
+      renderActions,
+      renderActionButton,
+      calcActionItemClass,
+      actionDetails
+    };
+  },
+  render() {
+    const details = this.actionDetails || [];
     const renderGroup = () => {
       let _slot;
       if (this.groupDetails.length === 0) {
@@ -228,7 +273,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
         "popper-class": this.ns.e("popover"),
         "virtual-triggering": true,
         "transition": "none"
-      }, _isSlot(_slot = renderActions(this.groupDetails, false)) ? _slot : {
+      }, _isSlot(_slot = this.renderActions(this.groupDetails, false)) ? _slot : {
         default: () => [_slot]
       })];
     };
@@ -239,7 +284,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("div", {
         "class": [this.ns.b(), this.ns.m("buttons")],
         "onClick": (e) => e.stopPropagation()
-      }, [renderActions(this.expandDetails), renderGroup()]);
+      }, [this.renderActions(this.expandDetails), renderGroup()]);
     }
     return vue.createVNode(vue.resolveComponent("el-dropdown"), {
       "ref": "dropdownRef",

package/lib/control/dashboard/custom-dashboard-container/custom-dashboard-container.cjs CHANGED Viewed

@@ -23,10 +23,13 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
     emit
   }) {
     const ns = vue3Util.useNamespace("custom-dashboard-container");
-    const customC = vue.reactive(new runtime.CustomDashboardController(props.modelData, props.dashboard));
+    const customDashboard = new runtime.CustomDashboardController(props.modelData, props.dashboard);
+    props.dashboard.setCustomDashboard(customDashboard);
+    const customC = vue.reactive(customDashboard);
     const isInited = vue.ref(false);
     const isShowDesign = vue.ref(false);
     const showTypeDir = vue.ref(false);
+    const showFilter = vue.ref(false);
     const openDesign = () => {
       isShowDesign.value = true;
     };
@@ -78,11 +81,13 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
         model: tempModelDatas,
         config: args.config
       });
-      await props.dashboard.evt.emit("onSavePortlet", void 0);
       emit("changed", {
         model: tempModelDatas
       });
     };
+    const openFilterDesign = () => {
+      props.dashboard.openFilterDesignPage();
+    };
     const onReset = async () => {
       isInited.value = false;
       isShowDesign.value = false;
@@ -90,10 +95,9 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
       await vue.nextTick();
       isInited.value = true;
     };
-    const isShowDefault = vue.computed(() => {
-      return customC.customModelData.length === 0;
-    });
     vue.onMounted(async () => {
+      var _a;
+      showFilter.value = ((_a = props.dashboard.model) == null ? void 0 : _a.dashboardStyle) === "BIREPORTDASHBOARD";
       const response = await customC.loadCustomModelData();
       const tempModelDatas = await convertData(response.model);
       emit("changed", {
@@ -113,18 +117,31 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
           [name]: config
         });
       });
+      props.dashboard.evt.on("onSavePortlet", async (args) => {
+        const modelDatas = await convertData(args.model);
+        await handleCustomModelChange({
+          model: modelDatas,
+          config: args.config
+        });
+        props.dashboard.refresh();
+        emit("changed", {
+          model: modelDatas,
+          filter: true
+        });
+      });
     });
     return {
       ns,
       customC,
       isShowDesign,
       isInited,
-      isShowDefault,
       showTypeDir,
+      showFilter,
       openDesign,
       onSaved,
       onReset,
-      clickCollapse
+      clickCollapse,
+      openFilterDesign
     };
   },
   render() {
@@ -133,7 +150,15 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
       "class": [this.ns.b()]
     }, [this.customC.showDesignBtn ? vue.createVNode("div", {
       "class": this.ns.b("build-btn")
-    }, [this.showTypeDir ? vue.createVNode("div", null, [vue.createVNode(vue.resolveComponent("el-button"), {
+    }, [this.showTypeDir ? vue.createVNode("div", null, [this.showFilter ? vue.createVNode(vue.resolveComponent("el-button"), {
+      "class": this.ns.b("deisgn-btn"),
+      "title": ibiz.i18n.t("control.dashboard.customDashboardContainer.newFilter"),
+      "onClick": this.openFilterDesign
+    }, {
+      default: () => [vue.createVNode("ion-icon", {
+        "name": "filter-outline"
+      }, null)]
+    }) : null, vue.createVNode(vue.resolveComponent("el-button"), {
       "class": this.ns.b("deisgn-btn"),
       "title": core.showTitle(ibiz.i18n.t("control.dashboard.customDashboardContainer.portalCustomPrompt")),
       "onClick": this.openDesign
@@ -169,7 +194,7 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
         "onSaved": this.onSaved,
         "onReset": this.onReset
       }, null)]
-    }), this.isInited && (this.isShowDefault ? (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a) : this.customC.customModelData.map((item) => {
+    }), this.isInited && (this.customC.customModelData.length === 0 ? (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a) : this.customC.customModelData.map((item) => {
       var _a2, _b2;
       const itemStyle = {
         position: "absolute",

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

@@ -122,7 +122,7 @@ const DashboardDesign = /* @__PURE__ */ vue.defineComponent({
             portletCodeName: portlet.codename,
             portletName: portlet.psappportletname,
             groupCodeName: portlet.groupcodename || "Ungroup",
-            groupName: portlet.groupname || "\u672A\u5206\u7C7B",
+            groupName: portlet.groupname || ibiz.i18n.t("control.dashboard.dashboardDesign.unGroup"),
             appCodeName: app.model.pkgcodeName,
             appName: app.model.name
           };
@@ -445,7 +445,7 @@ const DashboardDesign = /* @__PURE__ */ vue.defineComponent({
         modelData: portletModel,
         controller
       };
-      if (!provider) {
+      if (!provider || !controller) {
         return vue.createVNode("div", null, [portletModel.portletType, ibiz.i18n.t("app.noSupport")]);
       }
       const providerComp = vue.resolveComponent(provider.component);

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

	@@ -1 +1 @@
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:var(--ibiz-spacing-none) 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{font-size:calc(var(--ibiz-width-icon-medium) - 2px);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:var(--ibiz-color-fill-1)}.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%;pointer-events:none}
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:var(--ibiz-spacing-none) 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{font-size:calc(var(--ibiz-width-icon-medium) - 2px);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:var(--ibiz-color-fill-1)}.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-bg-1)}.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%;pointer-events:none}

package/lib/control/dashboard/dashboard.cjs CHANGED Viewed

@@ -27,7 +27,8 @@ function renderPortletByType(model, c, opts) {
     const container = model;
     return vue.h(providerComp, {
       ...commonProps,
-      key: model.id
+      key: model.id,
+      id: model.id
     }, {
       default: () => {
         var _a2;
@@ -37,7 +38,8 @@ function renderPortletByType(model, c, opts) {
   }
   return vue.h(providerComp, {
     ...commonProps,
-    key: ((_a = refreshTagObj[model.id]) == null ? void 0 : _a.refreshtag) ? refreshTagObj[model.id].refreshtag : model.id
+    key: ((_a = refreshTagObj[model.id]) == null ? void 0 : _a.refreshtag) ? refreshTagObj[model.id].refreshtag : model.id,
+    id: model.id
   });
 }
 const DashboardControl = /* @__PURE__ */ vue.defineComponent({
@@ -63,11 +65,16 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.DashboardController(...args));
     const vue$1 = vue.getCurrentInstance().proxy;
     const customModelDatas = vue.ref([]);
+    const anchorList = vue.ref([]);
+    const dashboardRef = vue.ref();
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
-    c.evt.on("onCreated", () => {
+    c.evt.on("onInitPortlets", () => {
       Object.values(c.portlets).forEach((portlet) => {
-        portlet.state = vue.reactive(portlet.state);
+        if (!vue.isReactive(portlet.state)) {
+          portlet.state = vue.reactive(portlet.state);
+        }
       });
+      anchorList.value = c.enableAnchorCtrls;
     });
     c.evt.on("onItemModelReset", async (args) => {
       const {
@@ -89,24 +96,53 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
       }
     });
     const handleCustomModelChange = (args) => {
-      customModelDatas.value = args.model;
+      const model = args.model;
+      if (args.filter && model && model.length > 0) {
+        model.forEach((element) => {
+          if (element.portletType === "FILTER") {
+            refreshTagObj[element.id] = {
+              refreshtag: lodashEs.uniqueId()
+            };
+          }
+        });
+      }
+      customModelDatas.value = model;
       vue$1.$forceUpdate();
     };
+    const calcNavBarConfig = () => {
+      const {
+        navBarPos,
+        navBarSysCss,
+        navBarWidth,
+        navBarStyle,
+        navbarHeight
+      } = c.model;
+      return {
+        navBarPos,
+        navBarSysCss,
+        navBarWidth,
+        navBarStyle,
+        navbarHeight
+      };
+    };
     return {
       c,
       ns,
       customModelDatas,
+      anchorList,
+      dashboardRef,
+      calcNavBarConfig,
       handleCustomModelChange
     };
   },
   render() {
-    let _slot2;
     const {
       state,
       model
     } = this.c;
     const renderDefaultContent = () => {
       return vue.createVNode(vue.resolveComponent("iBizRow"), {
+        "ref": "dashboardRef",
         "class": [this.ns.b()],
         "layout": model.layout
       }, {
@@ -136,17 +172,38 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
       });
       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"), {
+    let content = null;
+    if (model.enableCustomized) {
+      let _slot2;
+      content = vue.createVNode(vue.resolveComponent("iBizCustomDashboardContainer"), {
         "modelData": this.modelData,
         "dashboard": this.c,
         "onChanged": this.handleCustomModelChange
       }, _isSlot(_slot2 = renderCustomSlots()) ? _slot2 : {
         default: () => [_slot2]
-      }) : renderDefaultContent())]
+      });
+    } else if (model.showDashboardNavBar) {
+      let _slot3;
+      content = vue.createVNode(vue.resolveComponent("iBizAnchorContainer"), {
+        "anchorList": this.anchorList.map((item) => {
+          return {
+            id: item.id,
+            title: item.title
+          };
+        }),
+        "anchorTargetEle": this.dashboardRef,
+        "navBarConfig": this.calcNavBarConfig()
+      }, _isSlot(_slot3 = renderDefaultContent()) ? _slot3 : {
+        default: () => [_slot3]
+      });
+    } else {
+      content = renderDefaultContent();
+    }
+    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+      "controller": this.c,
+      "class": [this.ns.b()]
+    }, {
+      default: () => [state.isCreated && content]
     });
   }
 });

package/lib/control/dashboard/index.cjs CHANGED Viewed

@@ -19,6 +19,7 @@ var index$5 = require('./portlet/list-portlet/index.cjs');
 var index$6 = require('./portlet/html-portlet/index.cjs');
 var index$7 = require('./portlet/actionbar-portlet/index.cjs');
 var index$8 = require('./portlet/report-portlet/index.cjs');
+var index$9 = require('./portlet/filter-portlet/index.cjs');
 var containerPortlet = require('./portlet/container-portlet/container-portlet.cjs');
 var viewPortlet = require('./portlet/view-portlet/view-portlet.cjs');
 var menuPortlet = require('./portlet/menu-portlet/menu-portlet.cjs');
@@ -28,6 +29,7 @@ var listPortlet = require('./portlet/list-portlet/list-portlet.cjs');
 var htmlPortlet = require('./portlet/html-portlet/html-portlet.cjs');
 var actionbarPortlet = require('./portlet/actionbar-portlet/actionbar-portlet.cjs');
 var reportPortlet = require('./portlet/report-portlet/report-portlet.cjs');
+var filterPortlet = require('./portlet/filter-portlet/filter-portlet.cjs');
 "use strict";
 const IBizDashboardControl = vue3Util.withInstall(
@@ -50,6 +52,7 @@ const IBizDashboardControl = vue3Util.withInstall(
     v.use(index$6.IBizHtmlPortlet);
     v.use(index$7.IBizActionBarPortlet);
     v.use(index$8.IBizReportPortlet);
+    v.use(index$9.IBizFilterPortlet);
   }
 );
@@ -63,6 +66,7 @@ exports.IBizListPortlet = index$5.IBizListPortlet;
 exports.IBizHtmlPortlet = index$6.IBizHtmlPortlet;
 exports.IBizActionBarPortlet = index$7.IBizActionBarPortlet;
 exports.IBizReportPortlet = index$8.IBizReportPortlet;
+exports.IBizFilterPortlet = index$9.IBizFilterPortlet;
 exports.ContainerPortlet = containerPortlet.ContainerPortlet;
 exports.ViewPortlet = viewPortlet.ViewPortlet;
 exports.MenuPortlet = menuPortlet.MenuPortlet;
@@ -72,5 +76,6 @@ exports.ListPortlet = listPortlet.ListPortlet;
 exports.HtmlPortlet = htmlPortlet.HtmlPortlet;
 exports.ActionBarPortlet = actionbarPortlet.ActionBarPortlet;
 exports.ReportPortlet = reportPortlet.ReportPortlet;
+exports.FilterPortlet = filterPortlet.FilterPortlet;
 exports.IBizDashboardControl = IBizDashboardControl;
 exports.default = IBizDashboardControl;