@ibiz-template/vue3-components 0.7.41-alpha.96 → 0.7.41-alpha.98

package/lib/control/calendar/calendar-util.cjs

@@ -38,7 +38,7 @@ function useCalendarLegend(ns) {
     () => getVarValue("".concat(ns.cssVarName("color-black")))
   );
   const getBkColor = (_index) => {
-    return bgColors[_index] || bgColors[0];
+    return bgColors[_index % bgColors.length] || bgColors[0];
   };
   const getActBdrColors = (_index) => {
     return actBdrColors[_index] || getVarValue("".concat(ns.cssVarName("color-primary")));

package/lib/control/calendar/calendar.cjs

@@ -7,6 +7,7 @@ var dayjs = require('dayjs');
 var lodashEs = require('lodash-es');
 var core = require('@ibiz-template/core');
 var index = require('./components/custom-calendar/index.cjs');
+var index$1 = require('./components/calendar-flatten/index.cjs');
 var calendarUtil = require('./calendar-util.cjs');
 require('../../util/index.cjs');
 require('./calendar.css');
@@ -92,15 +93,13 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       const result = !Object.values(c.loadMoreItems).some((item) => item.curPage < item.totalPage);
       return result;
     });
-    const monthLegendClick = (_item) => {
-      Object.assign(_item, {
-        isShow: !_item.isShow
-      });
+    const legendType = ["DAY", "WEEK", "MONTH", "USER2"];
+    const legends = vue.ref([]);
+    const onLegendClick = (item) => {
+      item.isShow = !item.isShow;
     };
-    const legendItems = vue.ref([]);
-    const legendType = ["DAY", "WEEK", "MONTH"];
     const calcLegend = () => {
-      legendItems.value = c.state.legends.map((_item, index) => {
+      legends.value = c.state.legends.map((_item, index) => {
         const tempItem = {
           ..._item,
           isShow: true
@@ -192,13 +191,20 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       return false;
     };
     vue.watch(() => c.state.selectedDate, (newVal, oldVal) => {
-      if (timeRangeComparison(newVal, oldVal)) {
+      if (timeRangeComparison(newVal, oldVal))
+        return;
+      c.load();
+    });
+    vue.watch(() => c.state.timeRange, () => {
+      if (!c.state.isLoaded)
         return;
-      }
       c.load();
     });
+    const onTimeRangeChange = (date) => {
+      c.state.timeRange = date;
+    };
     const calcItemStyle = (data) => {
-      const _legend = legendItems.value.find((_item) => _item.id === data.itemType);
+      const _legend = legends.value.find((_item) => _item.id === data.itemType);
       return {
         color: data.color,
         backgroundColor: data.bkColor,
@@ -209,7 +215,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     const calcCalendarItems = (date) => {
       const weekRange = calendarUtil.getWeekRange(date);
       const calendarItems = c.state.items.filter((item) => {
-        const _legend = legendItems.value.find((legend) => legend.id === item.itemType);
+        const _legend = legends.value.find((legend) => legend.id === item.itemType);
         if (_legend && !_legend.isShow)
           return false;
         if (!showDateRange.value) {
@@ -233,7 +239,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         });
       }
       return calendarItems.map((_item) => {
-        const targetLegend = legendItems.value.find((legendItem) => Object.is(legendItem.id, _item.itemType));
+        const targetLegend = legends.value.find((legendItem) => Object.is(legendItem.id, _item.itemType));
         if (!targetLegend)
           return _item;
         if (!_item.bkColor)
@@ -379,9 +385,9 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
+      legends,
       curPopover,
       calendarRef,
-      legendItems,
       popoverValue,
       showDateList,
       showDateRange,
@@ -389,8 +395,9 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       disabledLodeMore,
       selectDate,
       calcItemStyle,
+      onLegendClick,
       handleScrollLoad,
-      monthLegendClick,
+      onTimeRangeChange,
       calcCalendarItems,
       onNodeContextmenu
     };
@@ -505,25 +512,19 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
             "class": this.ns.b("content-title")
           }, [date]), vue.createVNode("div", {
             "class": this.ns.b("legend")
-          }, [this.legendItems && this.legendItems.length > 1 && this.legendItems.map((_legend) => {
-            var _a;
-            let label = _legend.name;
-            const _model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((_calendarItem) => _calendarItem.id === _legend.id);
-            if (_model == null ? void 0 : _model.nameLanguageRes) {
-              label = ibiz.i18n.t(_model.nameLanguageRes.lanResTag, _model.name);
-            }
+          }, [this.legends && this.legends.length > 1 && this.legends.map((legend) => {
             return vue.createVNode("div", {
               "class": [this.ns.be("legend", "item")],
-              "onClick": () => this.monthLegendClick(_legend)
+              "onClick": () => this.onLegendClick(legend)
             }, [vue.createVNode("div", {
               "class": this.ns.bem("legend", "item", "tip"),
               "style": {
-                background: _legend.isShow ? _legend == null ? void 0 : _legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")"),
-                color: _legend == null ? void 0 : _legend.color
+                background: legend.isShow ? legend == null ? void 0 : legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")"),
+                color: legend == null ? void 0 : legend.color
               }
             }, null), vue.createVNode("div", {
               "class": this.ns.bem("legend", "item", "text")
-            }, [label])]);
+            }, [legend.name])]);
           })]), vue.createVNode("div", {
             "class": this.ns.b("content-header")
           }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
@@ -600,22 +601,23 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         default: () => [noDataSlots]
       });
     };
-    const renderWeekDay = () => {
-      const slots = {};
+    const renderSlots = () => {
       const {
-        sysCalendarItems
+        sysCalendarItems = []
       } = this.c.model;
-      slots.event = ({
-        data
-      }) => {
-        const targetCalendarItem = sysCalendarItems == null ? void 0 : sysCalendarItems.find((item) => {
-          return item.id === data.itemType;
-        });
-        if (targetCalendarItem && targetCalendarItem.layoutPanel) {
-          return renderPanelItem(data, targetCalendarItem.layoutPanel);
+      return {
+        event: ({
+          data
+        }) => {
+          const model = sysCalendarItems.find((item) => data.itemType === item.itemType);
+          if (model == null ? void 0 : model.layoutPanel)
+            return renderPanelItem(data, model.layoutPanel);
+          return renderDefaultItem(data);
         }
-        return renderDefaultItem(data);
       };
+    };
+    const renderWeekDay = () => {
+      let _slot6;
       return vue.createVNode("div", {
         "class": this.ns.b("content")
       }, [vue.createVNode(index.IBizCustomCalendar, {
@@ -626,7 +628,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         "ref": "calendarRef",
         "viewType": this.c.model.calendarStyle,
         "events": this.c.state.items,
-        "legends": this.legendItems,
+        "legends": this.legends,
         "multiple": !this.c.state.singleSelect,
         "selectedData": this.c.state.selectedData,
         "onEventClick": (value) => {
@@ -654,8 +656,8 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
           if (item && evt)
             this.onNodeContextmenu(item, evt);
         }
-      }, _isSlot(slots) ? slots : {
-        default: () => [slots]
+      }, _isSlot(_slot6 = renderSlots()) ? _slot6 : {
+        default: () => [_slot6]
       })]);
     };
     const renderTimeLine = () => {
@@ -683,6 +685,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       })]);
     };
     const renderCalendar = () => {
+      let _slot7;
       switch (this.c.model.calendarStyle) {
         case "TIMELINE":
           return renderTimeLine();
@@ -690,6 +693,17 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         case "DAY":
         case "USER":
           return renderWeekDay();
+        case "USER2":
+          return vue.createVNode(index$1.IBizCalendarFlatten, {
+            "legends": this.legends,
+            "items": this.c.state.items,
+            "timeRange": this.c.state.timeRange,
+            "title": this.c.state.calendarTitle,
+            "onLegendClick": this.onLegendClick,
+            "onTimeRangeChange": this.onTimeRangeChange
+          }, _isSlot(_slot7 = renderSlots()) ? _slot7 : {
+            default: () => [_slot7]
+          });
         case "MONTH":
         default:
           return renderElCalender();

package/lib/control/calendar/components/calendar-flatten/calendar-flatten.cjs

@@ -0,0 +1,202 @@
+'use strict';
+
+var vue = require('vue');
+var dayjs = require('dayjs');
+var vue3Util = require('@ibiz-template/vue3-util');
+var quarterOfYear = require('dayjs/plugin/quarterOfYear');
+require('./calendar-flatten.css');
+
+"use strict";
+dayjs.extend(quarterOfYear);
+const CalendarFlatten = /* @__PURE__ */ vue.defineComponent({
+  name: "CalendarFlatten",
+  props: {
+    title: {
+      type: String,
+      default: () => ibiz.i18n.t("control.calendar.title")
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    legends: {
+      type: Array,
+      default: () => []
+    },
+    timeRange: {
+      required: true,
+      type: Array,
+      validator: (range) => range.length === 2
+    }
+  },
+  emits: {
+    legendClick: (_legend) => true,
+    timeRangeChange: (_range) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("calendar-flatten");
+    const range = vue.computed({
+      get() {
+        return props.timeRange;
+      },
+      set(date) {
+        emit("timeRangeChange", date);
+      }
+    });
+    const legends = vue.computed(() => {
+      return props.legends.filter((legend) => legend.isShow);
+    });
+    const itemsByDate = vue.computed(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const item of props.items) {
+        if (!item.beginTime && !item.endTime)
+          continue;
+        const start = dayjs(item.beginTime || item.endTime);
+        const end = dayjs(item.endTime || item.beginTime);
+        const daysDiff = end.diff(start, "day") + 1;
+        for (let i = 0; i < daysDiff; i++) {
+          const dateKey = start.add(i, "day").format("YYYY-MM-DD");
+          if (!map.has(dateKey))
+            map.set(dateKey, []);
+          map.get(dateKey).push(item);
+        }
+      }
+      return map;
+    });
+    const dateMarkersMap = vue.computed(() => {
+      const map = /* @__PURE__ */ new Map();
+      if (!props.timeRange.length)
+        return map;
+      const [startDate, endDate] = props.timeRange;
+      let current = dayjs(startDate);
+      while (current.isBefore(endDate) || current.isSame(endDate, "day")) {
+        const dateKey = current.format("YYYY-MM-DD");
+        const dateItems = itemsByDate.value.get(dateKey) || [];
+        if (dateItems.length > 0) {
+          const marks = legends.value.map((legend) => ({
+            ...legend,
+            items: dateItems.filter((item) => item.itemType === legend.id)
+          })).filter((legend) => legend.items.length);
+          if (marks.length) {
+            map.set(dateKey, marks);
+          }
+        }
+        current = current.add(1, "day");
+      }
+      return map;
+    });
+    const months = vue.computed(() => {
+      if (!props.timeRange.length)
+        return [];
+      const [startDate, endDate] = props.timeRange;
+      const monthsList = [];
+      let current = dayjs(startDate).startOf("month");
+      while (current.isBefore(endDate) || current.isSame(endDate, "month")) {
+        monthsList.push(current.toDate());
+        current = current.add(1, "month");
+      }
+      return monthsList;
+    });
+    return {
+      ns,
+      range,
+      months,
+      dateMarkersMap
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("header")
+    }, [vue.createVNode("div", {
+      "class": this.ns.em("header", "left")
+    }, [this.title]), vue.createVNode("div", {
+      "class": this.ns.em("header", "centre")
+    }, [this.legends.length > 1 && this.legends.map((legend) => {
+      return vue.createVNode("div", {
+        "class": this.ns.e("legend"),
+        "onClick": () => this.$emit("legendClick", legend)
+      }, [vue.createVNode("div", {
+        "class": this.ns.em("legend", "dot"),
+        "style": {
+          backgroundColor: legend.isShow ? legend == null ? void 0 : legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")")
+        }
+      }, null), vue.createVNode("div", {
+        "class": this.ns.em("legend", "text")
+      }, [legend.name])]);
+    })]), vue.createVNode("div", {
+      "class": this.ns.em("header", "right")
+    }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
+      "type": "monthrange",
+      "clearable": false,
+      "modelValue": this.range,
+      "onUpdate:modelValue": ($event) => this.range = $event,
+      "class": this.ns.e("data-picker")
+    }, null)])]), vue.createVNode("div", {
+      "class": this.ns.e("body")
+    }, [this.months.map((month) => {
+      return vue.createVNode(vue.resolveComponent("el-calendar"), {
+        "modelValue": month,
+        "class": this.ns.e("month-calendar"),
+        "key": "".concat(month.getFullYear(), "-").concat(month.getMonth())
+      }, {
+        header: ({
+          date
+        }) => {
+          return vue.createVNode("div", {
+            "class": this.ns.em("month-calendar", "header")
+          }, [date]);
+        },
+        dateCell: ({
+          data
+        }) => {
+          const {
+            date
+          } = data;
+          const marks = this.dateMarkersMap.get(dayjs(date).format("YYYY-MM-DD")) || [];
+          return vue.createVNode(vue.resolveComponent("el-popover"), {
+            "trigger": "click",
+            "persistent": false,
+            "disabled": !marks.length,
+            "popperClass": this.ns.e("popover")
+          }, {
+            default: () => {
+              return vue.createVNode("div", {
+                "class": this.ns.em("popover", "content")
+              }, [marks.map((mark) => {
+                return vue.createVNode("div", {
+                  "class": [this.ns.e("event"), this.ns.em("event", mark.id)]
+                }, [mark.items.map((item) => {
+                  var _a, _b;
+                  return (_b = (_a = this.$slots).event) == null ? void 0 : _b.call(_a, {
+                    data: item
+                  });
+                })]);
+              })]);
+            },
+            reference: () => vue.createVNode("div", {
+              "class": this.ns.e("date")
+            }, [vue.createVNode("div", {
+              "class": this.ns.em("date", "day")
+            }, [date.getDate()]), vue.createVNode("div", {
+              "class": this.ns.em("date", "mark")
+            }, [marks.map((mark) => {
+              if (mark.isShow)
+                return vue.createVNode("div", {
+                  "class": this.ns.e("dot"),
+                  "style": {
+                    backgroundColor: mark.bkcolor
+                  }
+                }, null);
+            })])])
+          });
+        }
+      });
+    })])]);
+  }
+});
+
+exports.CalendarFlatten = CalendarFlatten;

package/lib/control/calendar/components/calendar-flatten/calendar-flatten.css

@@ -0,0 +1 @@
+.ibiz-calendar-flatten{display:flex;flex-direction:column;gap:var(--ibiz-spacing-tight);width:100%;height:100%}.ibiz-calendar-flatten__header{display:flex;flex-shrink:0;align-items:center;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-flatten__header--left{flex-shrink:0;min-width:300px}.ibiz-calendar-flatten__header--centre{display:flex;flex-grow:1;gap:var(--ibiz-spacing-tight);align-items:center;justify-content:center}.ibiz-calendar-flatten__header--right{flex-shrink:0}.ibiz-calendar-flatten__body{display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--ibiz-spacing-tight);overflow:auto}.ibiz-calendar-flatten__month-calendar{width:366px;border:1px solid var(--ibiz-color-border)}.ibiz-calendar-flatten__month-calendar .el-calendar__header{display:flex;justify-content:center}.ibiz-calendar-flatten__month-calendar .el-calendar__body{padding:var(--ibiz-spacing-tight)}.ibiz-calendar-flatten__month-calendar .el-calendar-table .el-calendar-day{width:50px;height:50px;padding:0}.ibiz-calendar-flatten__month-calendar .el-calendar-table td.is-selected{background-color:transparent}.ibiz-calendar-flatten__date{display:flex;flex-direction:column;gap:var(--ibiz-spacing-extra-tight);align-items:center;justify-content:center;width:100%;height:100%;padding:4px}.ibiz-calendar-flatten__date--day{flex-shrink:0}.ibiz-calendar-flatten__date--mark{display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--ibiz-spacing-extra-tight);justify-content:center;overflow:hidden}.ibiz-calendar-flatten__dot{width:4px;height:4px;border-radius:50%}.ibiz-calendar-flatten__legend{display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center;cursor:pointer}.ibiz-calendar-flatten__legend--dot{width:16px;height:16px;border-radius:50%}.ibiz-calendar-flatten__popover{max-height:300px;overflow:auto}.ibiz-calendar-flatten__event .ibiz-control-calendar-item{width:126px;height:auto}.ibiz-calendar-flatten__event .ibiz-control-calendar-item.is-active{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}

package/lib/control/calendar/components/calendar-flatten/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue3Util = require('@ibiz-template/vue3-util');
+var calendarFlatten = require('./calendar-flatten.cjs');
+
+"use strict";
+const IBizCalendarFlatten = vue3Util.withInstall(calendarFlatten.CalendarFlatten, (v) => {
+  v.component(calendarFlatten.CalendarFlatten.name, calendarFlatten.CalendarFlatten);
+});
+
+exports.IBizCalendarFlatten = IBizCalendarFlatten;
+exports.default = IBizCalendarFlatten;

package/lib/control/calendar/components/custom-calendar/custom-calendar.cjs

@@ -8,8 +8,8 @@ var index$1 = require('../calendar-daily/index.cjs');
 var index = require('../calendar-week/index.cjs');
 var index$2 = require('../calendar-user/index.cjs');
 var useCustomCalendar = require('./use-custom-calendar.cjs');
-require('./custom-calendar.css');
 require('../interface/index.cjs');
+require('./custom-calendar.css');
 var customCalendar = require('../interface/custom-calendar.cjs');
 
 "use strict";

package/lib/control/calendar/components/custom-calendar/use-custom-calendar.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var vue = require('vue');
 var dayjs = require('dayjs');
 var ElementPlus = require('element-plus');
-require('../util/index.cjs');
+var vue = require('vue');
 require('../constant/index.cjs');
+require('../util/index.cjs');
 var util = require('../util/util.cjs');
 var event = require('../constant/event.cjs');
 

package/lib/control/dashboard/portlet/menu-portlet/app-menu-portlet/app-menu-portlet.cjs

@@ -50,6 +50,9 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
       if (!state.visible) {
         return null;
       }
+      const {
+        counterId
+      } = item;
       return vue.createVNode("div", {
         "class": [ns.b("item"), ns.is("disabled", !item.appFuncId)],
         "title": core.showTitle(item.tooltip || item.caption),
@@ -61,7 +64,10 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
         "class": ns.be("item", "icon"),
         "icon": item.sysImage
-      }, null), vue.createVNode("span", {
+      }, null), counterId ? vue.createVNode(vue.resolveComponent("iBizBadge"), {
+        "class": ns.e("counter"),
+        "value": c.state.counterData[counterId]
+      }, null) : null, vue.createVNode("span", {
         "class": ns.be("item", "label")
       }, [item.caption])]);
     };
@@ -73,16 +79,27 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
       if (!item.appMenuItems) {
         return renderItem(item);
       }
+      const {
+        counterId
+      } = item;
       return vue.createVNode(vue.resolveComponent("el-collapse-item"), {
         "class": ns.b("group"),
         "name": item.id,
         "title": core.showTitle(item.caption)
       }, {
+        title: () => {
+          return [vue.createVNode("span", {
+            "class": ns.be("group", "label")
+          }, [item.caption]), counterId ? vue.createVNode(vue.resolveComponent("iBizBadge"), {
+            "class": ns.e("counter"),
+            "value": c.state.counterData[counterId]
+          }, null) : null];
+        },
         default: () => {
           var _a2;
-          return [(_a2 = item.appMenuItems) == null ? void 0 : _a2.map((child) => {
+          return (_a2 = item.appMenuItems) == null ? void 0 : _a2.map((child) => {
             return renderItem(child);
-          })];
+          });
         }
       });
     };

package/lib/control/dashboard/portlet/menu-portlet/app-menu-portlet/app-menu-portlet.css

@@ -1 +1 @@
-.ibiz-control-appmenu-portlet{--ibiz-control-appmenu-portlet-margin:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-border-color:var(--ibiz-color-primary);--ibiz-control-appmenu-portlet-bg-color:var(--ibiz-color-bg-0);--ibiz-control-appmenu-portlet-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-content-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);padding:var(--ibiz-control-appmenu-portlet-content-padding)}.ibiz-control-appmenu-portlet__content{display:flex;flex-wrap:wrap;width:100%}.ibiz-control-appmenu-portlet-item{position:relative;display:flex;flex-direction:column;flex-shrink:0;align-items:flex-start;justify-content:center;width:calc(25% - var(--ibiz-control-appmenu-portlet-margin) * 2);padding:var(--ibiz-control-appmenu-portlet-padding);margin:var(--ibiz-control-appmenu-portlet-margin);cursor:pointer;background-color:var(--ibiz-control-appmenu-portlet-bg-color)}.ibiz-control-appmenu-portlet-item::before{position:absolute;left:0;width:4px;height:100%;content:"";background-color:var(--ibiz-control-appmenu-portlet-border-color)}.ibiz-control-appmenu-portlet-group{width:100%}.ibiz-control-appmenu-portlet-group .el-collapse-item__content{display:flex;flex-wrap:wrap}
+.ibiz-control-appmenu-portlet{--ibiz-control-appmenu-portlet-margin:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-border-color:var(--ibiz-color-primary);--ibiz-control-appmenu-portlet-bg-color:var(--ibiz-color-bg-0);--ibiz-control-appmenu-portlet-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-content-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-portlet-counter-gap:var(--ibiz-spacing-tight);padding:var(--ibiz-control-appmenu-portlet-content-padding)}.ibiz-control-appmenu-portlet__content{display:flex;flex-wrap:wrap;width:100%}.ibiz-control-appmenu-portlet-item{position:relative;display:flex;flex-direction:column;flex-shrink:0;align-items:flex-start;justify-content:center;width:calc(25% - var(--ibiz-control-appmenu-portlet-margin) * 2);padding:var(--ibiz-control-appmenu-portlet-padding);margin:var(--ibiz-control-appmenu-portlet-margin);cursor:pointer;background-color:var(--ibiz-control-appmenu-portlet-bg-color)}.ibiz-control-appmenu-portlet-item::before{position:absolute;left:0;width:4px;height:100%;content:"";background-color:var(--ibiz-control-appmenu-portlet-border-color)}.ibiz-control-appmenu-portlet-item .ibiz-control-appmenu-portlet__counter{position:absolute;top:var(--ibiz-control-appmenu-portlet-counter-gap);right:var(--ibiz-control-appmenu-portlet-counter-gap)}.ibiz-control-appmenu-portlet-group{width:100%}.ibiz-control-appmenu-portlet-group .el-collapse-item__header .ibiz-control-appmenu-portlet__counter{margin-left:var(--ibiz-control-appmenu-portlet-counter-gap)}.ibiz-control-appmenu-portlet-group .el-collapse-item__content{display:flex;flex-wrap:wrap}

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

@@ -2,7 +2,6 @@
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
-var runtime = require('@ibiz-template/runtime');
 
 "use strict";
 function _isSlot(s) {
@@ -16,17 +15,42 @@ const RawItemPortlet = /* @__PURE__ */ vue.defineComponent({
       required: true
     },
     controller: {
-      type: runtime.RawItemPortletController,
+      type: Object,
       required: true
     }
   },
   setup(props) {
     var _a;
-    const ns = vue3Util.useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
-    const rawItem = props.modelData;
+    const c = props.controller;
+    const ns = vue3Util.useNamespace("portlet-".concat((_a = c.model.portletType) == null ? void 0 : _a.toLowerCase()));
+    const content = vue.ref();
+    const onInit = async () => {
+      const rawItemModel = c.model.rawItem;
+      if (!rawItemModel)
+        return;
+      let rawItemContent;
+      if (rawItemModel.contentType === "RAW") {
+        rawItemContent = rawItemModel.caption;
+      } else if (rawItemModel.contentType === "HTML") {
+        rawItemContent = rawItemModel.content;
+      }
+      const data = c.dashboard.view.srfactiveviewdata || {};
+      if (rawItemContent && rawItemModel.templateMode)
+        rawItemContent = await ibiz.util.hbs.render(rawItemContent.replaceAll("//n", "\n"), {
+          data: {
+            ...data
+          },
+          context: props.controller.context,
+          params: props.controller.params
+        });
+      content.value = rawItemContent;
+    };
+    vue.onMounted(() => {
+      onInit();
+    });
     return {
       ns,
-      rawItem
+      content
     };
   },
   render() {
@@ -36,7 +60,8 @@ const RawItemPortlet = /* @__PURE__ */ vue.defineComponent({
       "controller": this.controller,
       "class": classArr
     }, _isSlot(_slot = vue.h(vue.resolveComponent("iBizRawItem"), {
-      rawItem: this.rawItem
+      rawItem: this.modelData,
+      content: this.content
     })) ? _slot : {
       default: () => [_slot]
     });

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

@@ -526,13 +526,13 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }
       return icon;
     };
-    const ITEM_HEIGHT = 30;
+    const ITEM_HEIGHT = 24;
     const calcSkeletonRows = () => {
       const {
         cardHeight
       } = c.model;
       if (cardHeight) {
-        return Math.max(1, Math.floor(cardHeight / ITEM_HEIGHT));
+        return Math.max(1, Math.floor((cardHeight - 32 + 4) / ITEM_HEIGHT));
       }
       return 2;
     };

package/lib/control/form/form-detail/form-page/form-page.cjs

@@ -71,7 +71,7 @@ const FormPage = /* @__PURE__ */ vue.defineComponent({
         default: () => slot,
         label: () => {
           return vue.createVNode("span", {
-            "class": c.labelClass
+            "class": [c.labelClass, this.ns.b("tab-label")]
           }, [c.model.sysImage ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
             "icon": c.model.sysImage
           }, null) : null, c.model.caption]);

package/lib/control/form/form-detail/form-rawitem/form-rawitem.cjs

@@ -172,7 +172,9 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
           rawItemContent = await ibiz.util.hbs.render(rawItemContent.replaceAll("//n", "\n"), Object.assign(obj, {
             data: {
               ...newVal
-            }
+            },
+            context: c.context,
+            params: c.params
           }));
         }
         content.value = rawItemContent;

package/lib/control/grid/grid/grid-control.util.cjs

@@ -731,7 +731,7 @@ function useGridHeaderStyle(tableRef, ns) {
           const height = entries[0].contentRect.height;
           if (height !== lastGridHeaderHeight) {
             const tempCssVars = {
-              "now-header-height": "".concat(height, "px")
+              "setting-height": "".concat(height, "px")
             };
             headerCssVars.value = ns.cssVarBlock(tempCssVars);
             lastGridHeaderHeight = height;