@ibiz-template/mob-vue3-components 0.7.41-alpha.19-lts.1 → 0.7.41-alpha.21

package/es/control/calendar/calendar.mjs

@@ -1,18 +1,21 @@
-import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed, watch } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { CalendarController } from '@ibiz-template/runtime';
 import dayjs from 'dayjs';
+import { debounce } from 'lodash-es';
+import isBetween from '../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/isBetween.mjs';
 import stdin_default from '../../node_modules/.pnpm/vue3-hash-calendar@1.1.3_vue@3.5.22/node_modules/vue3-hash-calendar/es/index.mjs';
 import 'vue3-hash-calendar/es/index.css';
 import { getCurSelectMonthDate, getCurSelectDayDate } from './date-util.mjs';
-import './calendar.css';
 import '../../util/index.mjs';
+import './calendar.css';
 import { usePopstateListener } from '../../util/use-popstate-util/use-popstate-util.mjs';
 
 "use strict";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
+dayjs.extend(isBetween);
 const CalendarControl = /* @__PURE__ */ defineComponent({
   name: "IBizCalendarControl",
   components: {
@@ -67,6 +70,13 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new CalendarController(...args));
     const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
     const loadItems = ref([]);
+    const infiniteScroll = ref();
+    const disabledLodeMore = computed(() => {
+      if (c.model.calendarStyle !== "TIMELINE" || c.state.isLoading)
+        return true;
+      const result = !Object.values(c.loadMoreItems).some((item) => item.curPage < item.totalPage);
+      return result;
+    });
     const visible = ref(false);
     const calendar = ref();
     const currentDate = ref();
@@ -113,38 +123,34 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         backgroundColor: data.bkColor
       };
     };
-    const markerData = computed(() => {
-      const filterSameDayAndUniqueType = (itemData, index, arr) => {
-        const dateString = dayjs(new Date(itemData.beginTime)).format("YYYY-MM-DD");
-        const isSameDayAndUniqueType = arr.findIndex((item) => dateString === dayjs(new Date(item.beginTime)).format("YYYY-MM-DD") && item.itemType === itemData.itemType) === index;
-        return isSameDayAndUniqueType;
-      };
-      const date = Object.values(markDateItems.value).flat().filter(filterSameDayAndUniqueType).map((item) => {
-        const _date = new Date(item.beginTime);
-        return {
-          date: item.beginTime,
-          type: item.itemType,
-          day: _date.getDate(),
-          month: _date.getMonth(),
-          year: _date.getFullYear(),
-          data: item
-        };
-      });
-      return date;
-    });
-    c.evt.on("onMounted", () => {
-      loadMarkerData(c.state.selectedDate || /* @__PURE__ */ new Date());
-      loadData(c.state.selectedDate || /* @__PURE__ */ new Date());
-    });
-    const dateChange = (newDate) => {
+    const dateChange = async (newDate) => {
       c.state.selectedDate = newDate;
-      loadData(c.state.selectedDate);
+      await loadData(c.state.selectedDate);
       const items = markDateItems.value[dayjs(newDate).format("YYYY-MM")];
-      if (items) {
+      if (items)
         return;
-      }
-      loadMarkerData(c.state.selectedDate);
+      await loadMarkerData(c.state.selectedDate);
+    };
+    const handleScrollLoad = async () => {
+      if (!infiniteScroll.value || disabledLodeMore.value)
+        return;
+      const scrollTop = infiniteScroll.value.scrollTop;
+      const scrollHeight = infiniteScroll.value.scrollHeight;
+      const clientHeight = infiniteScroll.value.clientHeight;
+      if (scrollHeight - scrollTop - clientHeight < 10)
+        await c.load({
+          isLoadMore: true
+        });
     };
+    watch(() => c.state.selectedDate, (newVal, oldVal) => {
+      var _a;
+      if (newVal && newVal !== oldVal) {
+        (_a = calendar.value) == null ? void 0 : _a.reset(c.state.selectedDate);
+      }
+    }, {
+      deep: true,
+      immediate: true
+    });
     const onCustom = () => {
       const temptime = dayjs(c.state.selectedDate).format("YYYY-MM-DD").split("-");
       currentDate.value = temptime;
@@ -163,30 +169,43 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       visible.value = false;
     };
     usePopstateListener(closeDrawer);
+    const calcMarkerByDate = (time) => {
+      const date = dayjs().set("year", time.year).set("month", time.month).set("date", time.day);
+      const markers = Object.values(markDateItems.value).flat().filter((item) => date.isBetween(item.beginTime, item.endTime, "D", "[]"));
+      const map = /* @__PURE__ */ new Map();
+      markers.forEach((item) => {
+        if (!map.has(item.itemType))
+          map.set(item.itemType, item);
+      });
+      return Array.from(map.values());
+    };
     return {
       c,
       ns,
-      markerData,
-      loadItems,
       visible,
       calendar,
+      loadItems,
       currentDate,
+      infiniteScroll,
+      disabledLodeMore,
+      toDay,
+      onCustom,
       onConfirm,
-      calcItemStyle,
       dateChange,
       closeDrawer,
-      onCustom,
-      toDay
+      calcItemStyle,
+      handleScrollLoad,
+      calcMarkerByDate
     };
   },
   render() {
     const renderMarker = (date) => {
-      const arr = this.markerData.filter((item) => item.day === date.day && item.month === date.month && item.year === date.year);
-      return arr.map((item) => {
-        const style = this.calcItemStyle(item.data);
+      const markers = this.calcMarkerByDate(date);
+      return markers.map((item) => {
+        const style = this.calcItemStyle(item);
         return createVNode("div", {
-          "class": [this.ns.em("mark", "item"), this.ns.em("mark", item.type)],
-          "style": style
+          "style": style,
+          "class": [this.ns.em("mark", "item"), this.ns.em("mark", item.itemType)]
         }, null);
       });
     };
@@ -198,7 +217,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [this.ns.b("item"), this.ns.is("active", findIndex !== -1)];
+      const itemClass = [this.ns.b("item"), this.ns.bm("item", "panel"), this.ns.is("active", findIndex !== -1)];
       return createVNode(resolveComponent("iBizControlShell"), {
         "class": itemClass,
         "data": item.deData,
@@ -215,7 +234,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         }
       }, null);
     };
-    const renderDefaultItem = (item) => {
+    const renderDefaultItem = (item, isLink = true) => {
       const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
@@ -223,7 +242,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       return createVNode(resolveComponent("van-cell"), {
         "class": itemClass,
         "key": item.deData.srfkey,
-        "is-link": true,
+        "is-link": isLink,
         "title": item.text || "",
         "onClick": () => this.c.onRowClick(item)
       }, null);
@@ -259,7 +278,8 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
     };
     const renderHeaderToolbar = () => {
       return createVNode("div", {
-        "class": this.ns.b("header-toolbar")
+        "class": this.ns.b("header-toolbar"),
+        "onClick": (evt) => evt.stopPropagation()
       }, [createVNode("div", {
         "class": this.ns.be("header-toolbar", "select-day")
       }, [dayjs(this.c.state.selectedDate).format("YYYY\u5E74MM\u6708DD\u65E5")]), createVNode("div", {
@@ -272,18 +292,15 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         "onClick": this.toDay
       }, [ibiz.i18n.t("control.calendar.today")])])]);
     };
-    return this.c.state.isCreated && createVNode(resolveComponent("iBizControlBase"), {
-      "controller": this.c
-    }, {
-      default: () => [createVNode("div", {
+    const renderCalendarContent = () => {
+      return [createVNode("div", {
         "class": this.ns.b("content")
       }, [createVNode(stdin_default, {
         "ref": "calendar",
-        "show-week-view": true,
         "pickerType": "date",
-        "onChange": (date) => {
-          this.dateChange(date);
-        }
+        "onChange": (date) => this.dateChange(date),
+        "default-datetime": this.c.state.selectedDate,
+        "show-week-view": this.c.model.calendarStyle === "WEEK"
       }, {
         day: ({
           date
@@ -309,7 +326,11 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
               label = ibiz.i18n.t(calendarItem.nameLanguageRes.lanResTag, calendarItem.name);
             }
             return createVNode(resolveComponent("van-tab"), {
-              "title": label
+              "title": label,
+              "title-class": this.ns.be("footer", "tab-item"),
+              "title-style": {
+                [`--${this.ns.b()}-tab-bg`]: calendarItem.bkcolor
+              }
             }, {
               default: () => [createVNode(resolveComponent("van-list"), null, _isSlot(_slot = renderCalendarListByItemType(calendarItem.itemType)) ? _slot : {
                 default: () => [_slot]
@@ -334,7 +355,59 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
           "onCancel": this.closeDrawer,
           "title": ibiz.i18n.t("control.calendar.pickerDate")
         }, null)]
-      })]
+      })];
+    };
+    const renderTimeLine = () => {
+      if (this.c.state.items.length === 0)
+        return renderNoData();
+      const groupMap = /* @__PURE__ */ new Map();
+      const groups = [];
+      this.c.state.items.forEach((item) => {
+        const value = item[this.c.groupTimeField];
+        if (value) {
+          if (!groupMap.has(value))
+            groupMap.set(value, []);
+          groupMap.get(value).push(item);
+        }
+      });
+      groupMap.forEach((children, key) => {
+        groups.push({
+          key: `${key}`,
+          caption: key ? dayjs(key).format(this.c.timelineCaptionFormat) : `${key}`,
+          children
+        });
+      });
+      return createVNode("div", {
+        "ref": "infiniteScroll",
+        "class": this.ns.b("timeline"),
+        "onScroll": debounce(this.handleScrollLoad, 300)
+      }, [groups.map((item) => {
+        return createVNode("div", {
+          "class": this.ns.be("timeline", "item")
+        }, [createVNode("div", {
+          "class": this.ns.bem("timeline", "item", "timespan")
+        }, [item.caption]), item.children.map((child) => {
+          var _a;
+          const model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((calendarItems) => {
+            return child.itemType === calendarItems.itemType;
+          });
+          const style = {};
+          if (model == null ? void 0 : model.bkcolor) {
+            Object.assign(style, {
+              [`--${this.ns.b()}-timeline-item-bg-color`]: model.bkcolor
+            });
+          }
+          return createVNode("div", {
+            "class": this.ns.bem("timeline", "item", "content"),
+            "style": style
+          }, [(model == null ? void 0 : model.layoutPanel) ? renderPanelItem(child, model.layoutPanel) : renderDefaultItem(child, false)]);
+        })]);
+      })]);
+    };
+    return this.c.state.isCreated && createVNode(resolveComponent("iBizControlBase"), {
+      "controller": this.c
+    }, {
+      default: () => [this.c.model.calendarStyle === "TIMELINE" ? renderTimeLine() : renderCalendarContent()]
     });
   }
 });

package/es/control/caption-bar/caption-bar.css

@@ -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-sub-main-font-size:var(--ibiz-font-size-header-6);--ibiz-control-captionbar-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-captionbar-line-height:1.625rem;--ibiz-control-captionbar-text-align:center;--ibiz-control-captionbar-min-height:var(--ibiz-spacing-super-loose);--ibiz-control-captionbar-sub-caption-font-size:var(--ibiz-font-size-regular);--ibiz-control-captionbar-sub-caption-color:var(--ibiz-color-text-2);--ibiz-control-captionbar-padding:var(--ibiz-spacing-tight) 0;--ibiz-control-captionbar-icon-width:1.25rem;position:relative;display:flex;flex-direction:column;align-items:center;height:100%;min-height:var(--ibiz-control-captionbar-min-height);padding:var(--ibiz-control-captionbar-padding)}.ibiz-control-captionbar.is-hasSub .ibiz-control-captionbar-caption{font-size:var(--ibiz-control-captionbar-sub-main-font-size)}.ibiz-control-captionbar-caption__icon{display:inline;margin-right:var(--ibiz-spacing-tight)}.ibiz-control-captionbar .ibiz-control-captionbar-caption{position:relative;display:flex;justify-content:center;width:100%;height:100%;font-size:var(--ibiz-control-captionbar-font-size);font-weight:var(--ibiz-control-captionbar-font-weight);line-height:var(--ibiz-control-captionbar-line-height);color:var(--ibiz-control-captionbar-color);text-align:var(--ibiz-control-captionbar-text-align)}.ibiz-control-captionbar .ibiz-control-captionbar-caption>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-captionbar .ibiz-control-captionbar-caption .ibiz-icon{flex-shrink:0;width:var(--ibiz-control-captionbar-icon-width);font-size:var(--ibiz-control-captionbar-icon-width)}.ibiz-control-captionbar .ibiz-control-captionbar-sub-caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--ibiz-control-captionbar-sub-caption-font-size);color:var(--ibiz-control-captionbar-sub-caption-color);text-align:var(--ibiz-control-captionbar-text-align)}
+.ibiz-control-captionbar{--ibiz-control-captionbar-color-page-caption:var(--ibiz-view-page-caption-color);--ibiz-control-captionbar-color-sub-caption:var(--ibiz-color-text-2);--ibiz-control-captionbar-font-page-caption:var(--ibiz-view-page-caption-font-size);--ibiz-control-captionbar-font-sub-caption:var(--ibiz-font-size-regular);--ibiz-control-captionbar-font-sub-main-size:var(--ibiz-font-size-header-6);--ibiz-control-captionbar-font-weight:var(--ibiz-view-page-caption-font-weight);--ibiz-control-captionbar-font-line-height:var(--ibiz-view-page-caption-line-height);--ibiz-control-captionbar-font-text-align:var(--ibiz-view-page-caption-text-align);--ibiz-control-captionbar-font-icon-width:1.25rem;--ibiz-control-captionbar-spacing-padding:var(--ibiz-spacing-tight) 0;--ibiz-control-captionbar-spacing-margin-right:var(--ibiz-spacing-tight) 0;--ibiz-control-captionbar-height-min-height:var(--ibiz-spacing-super-loose);position:relative;display:flex;flex-direction:column;align-items:center;height:100%;min-height:var(--ibiz-control-captionbar-height-min-height);padding:var(--ibiz-control-captionbar-spacing-padding)}.ibiz-control-captionbar.is-hasSub .ibiz-control-captionbar-caption{font-size:var(--ibiz-control-captionbar-font-sub-main-size)}.ibiz-control-captionbar-caption__icon{display:inline;margin-right:var(--ibiz-control-captionbar-spacing-margin-right)}.ibiz-control-captionbar .ibiz-control-captionbar-caption{position:relative;display:flex;justify-content:center;width:100%;height:100%;font-size:var(--ibiz-control-captionbar-font-page-caption);font-weight:var(--ibiz-control-captionbar-font-weight);line-height:var(--ibiz-control-captionbar-font-line-height);color:var(--ibiz-control-captionbar-color-page-caption);text-align:var(--ibiz-control-captionbar-font-text-align)}.ibiz-control-captionbar .ibiz-control-captionbar-caption>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-captionbar .ibiz-control-captionbar-caption .ibiz-icon{flex-shrink:0;width:var(--ibiz-control-captionbar-font-icon-width);font-size:var(--ibiz-control-captionbar-font-icon-width)}.ibiz-control-captionbar .ibiz-control-captionbar-sub-caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--ibiz-control-captionbar-font-sub-caption);color:var(--ibiz-control-captionbar-color-sub-caption);text-align:var(--ibiz-control-captionbar-font-text-align)}

package/es/control/dashboard/custom-dashboard-design/custom-dashboard-design.css

@@ -0,0 +1 @@
+.ibiz-custom-dashboard-design{--ibiz-custom-dashboard-design-save-btn-color:var(--ibiz-color-primary);--ibiz-custom-dashboard-design-item-bg-color:var(--ibiz-color-bg-0);--ibiz-custom-dashboard-design-item-height:var(--ibiz-height-control-large);--ibiz-custom-dashboard-design-padding:var(--ibiz-spacing-base);--ibiz-custom-dashboard-design-header-padding:0 0 var(--ibiz-spacing-tight);--ibiz-custom-dashboard-design-item-padding:0 var(--ibiz-spacing-base);--ibiz-custom-dashboard-design-item-margin:var(--ibiz-spacing-tight) 0;--ibiz-custom-dashboard-design-item-icon-margin-right:var(--ibiz-spacing-extra-tight);--ibiz-custom-dashboard-design-item-checkbox-margin-left:var(--ibiz-spacing-extra-tight);--ibiz-custom-dashboard-design-item-border-radius:var(--ibiz-border-radius-medium);--ibiz-custom-dashboard-design-header-font-size:var(--ibiz-font-size-header-5);--ibiz-custom-dashboard-design-close-btn-font-size:var(--ibiz-font-size-header-3);--ibiz-custom-dashboard-design-item-font-size:var(--ibiz-font-size-header-6);--ibiz-custom-dashboard-design-header-title-font-weight:var(--ibiz-font-weight-bold);display:flex;flex-direction:column;height:100%;padding:var(--ibiz-custom-dashboard-design-padding)}.ibiz-custom-dashboard-design-header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;padding:var(--ibiz-custom-dashboard-design-header-padding);font-size:var(--ibiz-custom-dashboard-design-header-font-size)}.ibiz-custom-dashboard-design-header__close-btn{flex-shrink:0;font-size:var(--ibiz-custom-dashboard-design-close-btn-font-size);cursor:pointer}.ibiz-custom-dashboard-design-header__title{overflow:hidden;font-weight:var(--ibiz-custom-dashboard-design-header-title-font-weight);text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-dashboard-design-header__save-btn{flex-shrink:0;color:var(--ibiz-custom-dashboard-design-save-btn-color);cursor:pointer}.ibiz-custom-dashboard-design-content{flex:1 1 0;overflow:auto}.ibiz-custom-dashboard-design-item{display:flex;align-items:center;height:var(--ibiz-custom-dashboard-design-item-height);padding:var(--ibiz-custom-dashboard-design-item-padding);margin:var(--ibiz-custom-dashboard-design-item-margin);font-size:var(--ibiz-custom-dashboard-design-item-font-size);line-height:var(--ibiz-custom-dashboard-design-item-height);background-color:var(--ibiz-custom-dashboard-design-item-bg-color);border-radius:var(--ibiz-custom-dashboard-design-item-border-radius)}.ibiz-custom-dashboard-design-item__icon{display:flex;flex:0 0 auto;align-items:center;width:1em;height:1em;margin-right:var(--ibiz-custom-dashboard-design-item-icon-margin-right)}.ibiz-custom-dashboard-design-item__text{flex:1 1 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-dashboard-design-item__checkbox{flex:0 0 auto;margin-left:var(--ibiz-custom-dashboard-design-item-checkbox-margin-left)}

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

@@ -0,0 +1,80 @@
+import { defineComponent, createVNode, resolveComponent, ref } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './custom-dashboard-design.css';
+
+"use strict";
+const CustomDashboardDesign = /* @__PURE__ */ defineComponent({
+  name: "IBizCustomDashboardDesign",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    modal: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("custom-dashboard-design");
+    const customDashboard = props.controller.getMobCustomDashboard();
+    const portlets = Object.values(props.controller.portlets).filter((item) => !customDashboard.ignoreType.includes(item.model.portletType));
+    const items = ref(portlets.map((item) => {
+      const id = item.model.id;
+      const visible = !Array.isArray(customDashboard.portlets) ? true : customDashboard.portlets.includes(id);
+      return {
+        id,
+        title: item.model.title,
+        visible
+      };
+    }));
+    const handleClose = () => {
+      props.modal.dismiss();
+    };
+    const handleSave = async () => {
+      await customDashboard.save(items.value.filter((item) => item.visible).map((item) => item.id));
+      handleClose();
+    };
+    return {
+      ns,
+      items,
+      handleClose,
+      handleSave
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.b("header")
+    }, [createVNode("ion-icon", {
+      "class": this.ns.be("header", "close-btn"),
+      "name": "close-outline",
+      "onClick": this.handleClose
+    }, null), createVNode("div", {
+      "class": this.ns.be("header", "title")
+    }, [ibiz.i18n.t("control.dashboard.customLayout")]), createVNode("div", {
+      "class": this.ns.be("header", "save-btn"),
+      "onClick": this.handleSave
+    }, [ibiz.i18n.t("control.dashboard.save")])]), createVNode("div", {
+      "class": this.ns.b("content")
+    }, [this.items.map((item) => {
+      return createVNode("div", {
+        "class": this.ns.b("item")
+      }, [createVNode(resolveComponent("iBizIcon"), {
+        "class": this.ns.be("item", "icon"),
+        "icon": {
+          cssClass: "fa fa-th-large"
+        }
+      }, null), createVNode("div", {
+        "class": this.ns.be("item", "text")
+      }, [item.title || item.id]), createVNode(resolveComponent("van-checkbox"), {
+        "class": this.ns.be("item", "checkbox"),
+        "modelValue": item.visible,
+        "onUpdate:modelValue": ($event) => item.visible = $event
+      }, null)]);
+    }), this.items.length === 0 ? createVNode(resolveComponent("iBizNoData"), null, null) : null])]);
+  }
+});
+
+export { CustomDashboardDesign };

package/es/control/dashboard/dashboard.css

@@ -1 +1 @@
-.ibiz-control-dashboard{--ibiz-control-dashboard-dashboard-margin:var(--ibiz-spacing-tight);--ibiz-control-dashboard-portlet-header-height:2.5rem;height:100%;margin:var(--ibiz-control-dashboard-dashboard-margin);overflow:var(--ibiz-control-overflow)}.ibiz-control-dashboard .ibiz-control-dashboard-row{gap:var(--ibiz-control-dashboard-dashboard-margin)}.ibiz-control-dashboard.ibiz-control{width:auto}
+.ibiz-control-dashboard{--ibiz-control-dashboard-portlet-header-height:3.125rem;--ibiz-control-dashboard-sidebar-topleft-top:calc(var(--ibiz-view-page-caption-line-height) + 2 * var(--ibiz-spacing-tight));--ibiz-control-dashboard-sidebar-topleft-left:0rem;--ibiz-control-dashboard-sidebar-topright-top:calc(var(--ibiz-view-page-caption-line-height) + 2 * var(--ibiz-spacing-tight));--ibiz-control-dashboard-sidebar-topright-right:0rem;--ibiz-control-dashboard-sidebar-bottomleft-bottom:0rem;--ibiz-control-dashboard-sidebar-bottomleft-left:0rem;--ibiz-control-dashboard-sidebar-bottomright-bottom:0rem;--ibiz-control-dashboard-sidebar-bottomright-right:0rem;--ibiz-control-dashboard-sidebar-middleleft-top:50%;--ibiz-control-dashboard-sidebar-middleleft-left:0rem;--ibiz-control-dashboard-sidebar-middleright-top:50%;--ibiz-control-dashboard-sidebar-middleright-right:0rem;height:100%;overflow:var(--ibiz-control-overflow)}.ibiz-control-dashboard__nav-bar--topleft .van-index-bar__sidebar{top:var(--ibiz-control-dashboard-sidebar-topleft-top);right:auto;left:var(--ibiz-control-dashboard-sidebar-topleft-left);transform:none}.ibiz-control-dashboard__nav-bar--topright .van-index-bar__sidebar{top:var(--ibiz-control-dashboard-sidebar-topright-top);right:var(--ibiz-control-dashboard-sidebar-topright-right);transform:none}.ibiz-control-dashboard__nav-bar--bottomleft .van-index-bar__sidebar{inset:auto auto var(--ibiz-control-dashboard-sidebar-bottomleft-bottom) var(--ibiz-control-dashboard-sidebar-bottomleft-left);transform:none}.ibiz-control-dashboard__nav-bar--bottomright .van-index-bar__sidebar{top:auto;right:var(--ibiz-control-dashboard-sidebar-bottomright-right);bottom:var(--ibiz-control-dashboard-sidebar-bottomright-bottom);transform:none}.ibiz-control-dashboard__nav-bar--middleleft .van-index-bar__sidebar{top:var(--ibiz-control-dashboard-sidebar-middleleft-top);right:auto;left:var(--ibiz-control-dashboard-sidebar-middleleft-left)}.ibiz-control-dashboard__nav-bar--middleright .van-index-bar__sidebar{top:var(--ibiz-control-dashboard-sidebar-middleright-top);right:var(--ibiz-control-dashboard-sidebar-middleright-right)}.ibiz-control-dashboard .ibiz-control-dashboard-row{gap:var(--ibiz-control-dashboard-dashboard-margin)}.ibiz-control-dashboard.ibiz-control{width:auto}

package/es/control/dashboard/dashboard.mjs

@@ -1,6 +1,7 @@
-import { isVNode, createVNode, resolveComponent, h, defineComponent } from 'vue';
+import { isVNode, createVNode, resolveComponent, h, defineComponent, isReactive, reactive, ref } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
-import { DashboardController } from '@ibiz-template/runtime';
+import { DashboardController, MobCustomDashboardController } from '@ibiz-template/runtime';
+import { CustomDashboardDesign } from './custom-dashboard-design/custom-dashboard-design.mjs';
 import './dashboard.css';
 
 "use strict";
@@ -14,6 +15,9 @@ function renderPortletByType(model, c, opts) {
     modelData: model,
     controller
   };
+  if (!controller.state.visible) {
+    return null;
+  }
   if (!provider) {
     return createVNode("div", null, [ibiz.i18n.t("app.noSupport"), model.portletType]);
   }
@@ -70,46 +74,95 @@ const DashboardControl = /* @__PURE__ */ defineComponent({
   setup() {
     const c = useControlController((...args) => new DashboardController(...args));
     const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
-    const calcLayoutHeightWidth = (part) => {
-      const isShowHeader = part.model.showTitleBar && (part.model.title || part.model.sysImage) || part.model.uiactionGroup;
-      const layout = part.state.layout;
-      if (isShowHeader && layout.height) {
-        layout.height = `calc(${layout.height} + var(${ns.cssVarBlockName("portlet-header-height")}))`;
+    c.evt.on("onInitPortlets", () => {
+      Object.values(c.portlets).forEach((portlet) => {
+        if (!isReactive(portlet.state)) {
+          portlet.state = reactive(portlet.state);
+        }
+      });
+    });
+    const initialized = ref(false);
+    const isShowFloatingButton = ref(!!c.model.enableCustomized);
+    const init = async () => {
+      try {
+        if (c.model.enableCustomized) {
+          const customDashboard = new MobCustomDashboardController(c.model, c);
+          c.setMobCustomDashboard(customDashboard);
+          await customDashboard.load();
+        }
+      } finally {
+        initialized.value = true;
       }
-      return part.state;
+    };
+    init();
+    const handleFloatingButtonClick = async () => {
+      await ibiz.overlay.drawer((modal) => {
+        return h(CustomDashboardDesign, {
+          modal,
+          controller: c
+        });
+      }, {}, {
+        attrs: {
+          position: "bottom",
+          closeable: false
+        }
+      });
     };
     return {
       c,
       ns,
-      calcLayoutHeightWidth
+      initialized,
+      isShowFloatingButton,
+      handleFloatingButtonClick
     };
   },
   render() {
+    var _a;
     const {
       state,
       model
     } = this.c;
+    let content = createVNode(resolveComponent("iBizRow"), {
+      "class": [this.ns.b("row")],
+      "layout": model.layout
+    }, {
+      default: () => {
+        var _a2;
+        return [(_a2 = model.controls) == null ? void 0 : _a2.map((child) => {
+          let _slot;
+          return createVNode(resolveComponent("iBizCol"), {
+            "layoutPos": child.layoutPos,
+            "state": this.c.portlets[child.id].state
+          }, _isSlot(_slot = renderPortletByType(child, this.c)) ? _slot : {
+            default: () => [_slot]
+          });
+        })];
+      }
+    });
+    if (model.showDashboardNavBar) {
+      const anchorList = this.c.enableAnchorCtrls.filter((ctrl) => {
+        const controller = this.c.portlets[ctrl.id];
+        return controller.state.visible;
+      });
+      const list = anchorList.map((ctrl) => ctrl.title || ctrl.id);
+      const _content = /* @__PURE__ */ function() {
+        return content;
+      }();
+      content = createVNode(resolveComponent("van-index-bar"), {
+        "index-list": list,
+        "sticky": false,
+        "class": [this.ns.e("nav-bar"), this.ns.em("nav-bar", ((_a = model.navBarPos) == null ? void 0 : _a.toLowerCase()) || "middleright")]
+      }, _isSlot(content) ? content : {
+        default: () => [_content]
+      });
+    }
     return createVNode(resolveComponent("iBizControlBase"), {
       "controller": this.c,
       "class": [this.ns.b()]
     }, {
-      default: () => [state.isCreated && createVNode(resolveComponent("iBizRow"), {
-        "class": [this.ns.b("row")],
-        "layout": model.layout
-      }, {
-        default: () => {
-          var _a;
-          return [(_a = model.controls) == null ? void 0 : _a.map((child) => {
-            let _slot;
-            return createVNode(resolveComponent("iBizCol"), {
-              "layoutPos": child.layoutPos,
-              "state": this.calcLayoutHeightWidth(this.c.portlets[child.id])
-            }, _isSlot(_slot = renderPortletByType(child, this.c)) ? _slot : {
-              default: () => [_slot]
-            });
-          })];
-        }
-      })]
+      default: () => [state.isCreated && this.initialized && content, state.isCreated && this.initialized && this.isShowFloatingButton && createVNode(resolveComponent("iBizFloatButton"), {
+        "onClick": this.handleFloatingButtonClick
+      }, null)]
     });
   }
 });

package/es/control/dashboard/index.mjs

@@ -8,13 +8,20 @@ import { IBizContainerPortlet } from './portlet/container-portlet/index.mjs';
 import { IBizMenuPortlet } from './portlet/menu-portlet/index.mjs';
 import { IBizListPortlet } from './portlet/list-portlet/index.mjs';
 import { IBizViewPortlet } from './portlet/view-portlet/index.mjs';
-export { PortletPartState } from './portlet/portlet-part/portlet-part.state.mjs';
+import { IBizRawItemPortlet } from './portlet/rawitem-portlet/index.mjs';
+import { IBizChartPortlet } from './portlet/chart-portlet/index.mjs';
+import { IBizHtmlPortlet } from './portlet/html-portlet/index.mjs';
+import { IBizActionBarPortlet } from './portlet/actionbar-portlet/index.mjs';
 export { ContainerPortletProvider } from './portlet/container-portlet/container-portlet.provider.mjs';
 export { ContainerPortlet } from './portlet/container-portlet/container-portlet.mjs';
 export { MenuPortletProvider } from './portlet/menu-portlet/menu-portlet.provider.mjs';
 export { MenuPortlet } from './portlet/menu-portlet/menu-portlet.mjs';
 export { ViewPortlet } from './portlet/view-portlet/view-portlet.mjs';
 export { ListPortlet } from './portlet/list-portlet/list-portlet.mjs';
+export { RawItemPortlet } from './portlet/rawitem-portlet/rawitem-portlet.mjs';
+export { ChartPortlet } from './portlet/chart-portlet/chart-portlet.mjs';
+export { HtmlPortlet } from './portlet/html-portlet/html-portlet.mjs';
+export { ActionBarPortlet } from './portlet/actionbar-portlet/actionbar-portlet.mjs';
 
 "use strict";
 const IBizDashboardControl = withInstall(
@@ -30,7 +37,11 @@ const IBizDashboardControl = withInstall(
     v.use(IBizMenuPortlet);
     v.use(IBizListPortlet);
     v.use(IBizViewPortlet);
+    v.use(IBizRawItemPortlet);
+    v.use(IBizChartPortlet);
+    v.use(IBizHtmlPortlet);
+    v.use(IBizActionBarPortlet);
   }
 );
 
-export { DashboardProvider, IBizContainerPortlet, IBizDashboardControl, IBizListPortlet, IBizMenuPortlet, IBizViewPortlet, PortletLayout, IBizDashboardControl as default };
+export { DashboardProvider, IBizActionBarPortlet, IBizChartPortlet, IBizContainerPortlet, IBizDashboardControl, IBizHtmlPortlet, IBizListPortlet, IBizMenuPortlet, IBizRawItemPortlet, IBizViewPortlet, PortletLayout, IBizDashboardControl as default };

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

@@ -0,0 +1,47 @@
+import { defineComponent, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { ActionBarPortletController } from '@ibiz-template/runtime';
+
+"use strict";
+const ActionBarPortlet = /* @__PURE__ */ defineComponent({
+  name: "IBizActionBarPortlet",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: ActionBarPortletController,
+      required: true
+    }
+  },
+  setup(props) {
+    var _a;
+    const ns = useNamespace(`portlet-${(_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()}`);
+    const zIndex = props.controller.dashboard.state.zIndex;
+    const onActionClick = async (detail, event) => {
+      await props.controller.onActionClick(detail, event);
+    };
+    return {
+      ns,
+      zIndex,
+      onActionClick
+    };
+  },
+  render() {
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass];
+    return createVNode(resolveComponent("iBizPortletLayout"), {
+      "controller": this.controller,
+      "class": classArr
+    }, {
+      default: () => [this.modelData.uiactionGroup && createVNode(resolveComponent("iBizActionToolbar"), {
+        "zIndex": this.zIndex,
+        "action-details": this.modelData.uiactionGroup.uiactionGroupDetails,
+        "actions-state": this.controller.state.actionGroupState,
+        "onActionClick": this.onActionClick
+      }, null)]
+    });
+  }
+});
+
+export { ActionBarPortlet };

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

@@ -0,0 +1,21 @@
+import { ActionBarPortletController } from '@ibiz-template/runtime';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ActionBarPortletProvider {
+  constructor() {
+    __publicField(this, "component", "IBizActionBarPortlet");
+  }
+  async createController(portletModel, dashboard, parent) {
+    const c = new ActionBarPortletController(portletModel, dashboard, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { ActionBarPortletProvider };

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

@@ -0,0 +1,15 @@
+import { registerPortletProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { ActionBarPortlet } from './actionbar-portlet.mjs';
+import { ActionBarPortletProvider } from './actionbar-portlet.provider.mjs';
+
+"use strict";
+const IBizActionBarPortlet = withInstall(
+  ActionBarPortlet,
+  function(v) {
+    v.component(ActionBarPortlet.name, ActionBarPortlet);
+    registerPortletProvider("ACTIONBAR", () => new ActionBarPortletProvider());
+  }
+);
+
+export { ActionBarPortlet, IBizActionBarPortlet, IBizActionBarPortlet as default };