@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.20

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

@@ -36,12 +36,10 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
       pickDay,
       handleEVentClick,
       handleEVentDblClick,
+      handleEventContextmenu,
       selectDate,
       selectLegend
     } = useCustomCalendar.useCustomCalendar(props, emit, "custom-calendar");
-    vue.onMounted(() => {
-      pickDay(dayjs(/* @__PURE__ */ new Date()));
-    });
     const renderWeek = () => {
       var _a;
       return vue.createVNode("div", {
@@ -66,13 +64,10 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         }, [vue.createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-tip"),
           "style": {
-            background: item.isShow ? item.bkcolor : "#CCCCCC"
+            background: item.isShow ? item.bkcolor : "var(".concat(ns.cssVarName("color-disabled-bg"), ")")
           }
         }, null), vue.createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-text"),
-          "style": {
-            color: item.isShow ? item.color : "#CCCCCC"
-          },
           "title": core.showTitle(item.name)
         }, [item.name])]);
       })]), vue.createVNode("div", {
@@ -91,7 +86,8 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         "multiple": multiple.value,
         "selectedData": selectedData.value,
         "onEventClick": (value) => handleEVentClick(value),
-        "onEventDblClick": (value) => handleEVentDblClick(value)
+        "onEventDblClick": (value) => handleEVentDblClick(value),
+        "onEventContextmenu": (value) => handleEventContextmenu(value)
       }, slots)]);
     };
     const renderDay = () => {
@@ -118,13 +114,10 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         }, [vue.createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-tip"),
           "style": {
-            background: item.isShow ? item.bkcolor : "#CCCCCC"
+            background: item.isShow ? item.bkcolor : "var(".concat(ns.cssVarName("color-disabled-bg"), ")")
           }
         }, null), vue.createVNode("div", {
           "class": ns.em("calendar-week", "legend-item-text"),
-          "style": {
-            color: item.isShow ? item.color : "#CCCCCC"
-          },
           "title": core.showTitle(item.name)
         }, [item.name])]);
       })]), vue.createVNode("div", {
@@ -133,28 +126,50 @@ const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
         "modelValue": realSelectedDay.value,
         "onUpdate:modelValue": ($event) => realSelectedDay.value = $event,
         "type": "date",
-        "placeholder": "\u9009\u62E9\u65E5\u671F",
+        "placeholder": ibiz.i18n.t("control.calendar.calendardaily.selectdate"),
         "shortcuts": shortcuts
       }, null)])]), vue.createVNode("div", {
         "class": ns.em("calendar-week", "text-secondary")
       }, [curWeek.value])]), vue.createVNode(index$1.IBizCalendarDaily, {
         "selected-day": realSelectedDay.value,
         "controller": props.controller,
+        "showDetail": props.showDetail,
         "events": events.value,
         "legends": legends.value,
         "multiple": multiple.value,
         "selectedData": selectedData.value,
         "onEventClick": (value) => handleEVentClick(value),
-        "onEventDblClick": (value) => handleEVentDblClick(value)
+        "onEventDblClick": (value) => handleEVentDblClick(value),
+        "onEventContextmenu": (value) => handleEventContextmenu(value)
       }, slots)]);
     };
     const renderUser = () => {
-      return vue.createVNode(index$2.IBizCalendarUser, {
+      const weekRange = useCustomCalendar.calcCurrentWeekRange(new Date(realSelectedDay.value));
+      return vue.createVNode("div", {
+        "class": [ns.e("calendar-user")]
+      }, [vue.createVNode("div", {
+        "class": [ns.e("calendar-user-header")]
+      }, [vue.createVNode("div", {
+        "class": ns.em("calendar-user-header", "left")
+      }, [weekRange.map((_date) => {
+        return dayjs(new Date(_date)).format("YYYY-MM-DD");
+      }).join(" ~ ")]), vue.createVNode("div", {
+        "class": ns.em("calendar-user-header", "right")
+      }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
+        "type": "week",
+        "clearable": false,
+        "popper-class": ns.em("calendar-user-header", "date-picker"),
+        "modelValue": realSelectedDay.value,
+        "onUpdate:modelValue": ($event) => realSelectedDay.value = $event,
+        "class": ns.em("calendar-user-header", "date-range"),
+        "placeholder": ibiz.i18n.t("control.calendar.calendarUser.selectWeekRange"),
+        "format": ibiz.i18n.t("control.calendar.calendarUser.weekFormat")
+      }, null)])]), vue.createVNode(index$2.IBizCalendarUser, {
         "selected-day": realSelectedDay.value,
         "events": events.value,
         "onEventClick": (value) => handleEVentClick(value),
         "onEventDblClick": (value) => handleEVentDblClick(value)
-      }, slots);
+      }, slots)]);
     };
     const renderContent = () => {
       switch (viewType.value) {

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

@@ -1 +1 @@
-.ibiz-custom-calendar{width:100%;height:100%}.ibiz-custom-calendar__calendar-day{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;min-height:900px;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-day--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-day--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-day--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-day--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-day--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-day--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 3px;cursor:pointer}.ibiz-custom-calendar__calendar-day--legend-item-tip{display:inline-block;width:26px;height:14px;margin-right:6px;border-radius:4px}.ibiz-custom-calendar__calendar-day--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-week{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-week--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-week--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-week--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-week--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-week--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-week--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 3px;cursor:pointer}.ibiz-custom-calendar__calendar-week--legend-item-tip{display:inline-block;width:26px;height:14px;margin-right:6px;border-radius:4px}.ibiz-custom-calendar__calendar-week--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-custom-calendar__calendar-month--body{flex-grow:1;width:100%;height:calc(100% - 58px)}.ibiz-custom-calendar__calendar-month--legend{display:flex;align-items:center;justify-content:center;width:auto;height:100%}.ibiz-custom-calendar__calendar-month--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 3px;cursor:pointer}.ibiz-custom-calendar__calendar-month--legend-item-tip{display:inline-block;width:26px;height:14px;margin-right:6px;border-radius:4px}.ibiz-custom-calendar__calendar-month--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month--header{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:12px 20px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-month--button-group{display:flex;align-items:center;justify-content:space-between;width:388px}.ibiz-custom-calendar__header--title{min-width:120px}.ibiz-custom-calendar .el-date-editor.el-input,.ibiz-custom-calendar .el-date-editor.el-input__wrapper{width:130px;height:32px}
+.ibiz-custom-calendar{width:100%;height:100%}.ibiz-custom-calendar__calendar-day{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;min-height:900px;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-day--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-day--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-day--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-day--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-day--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-day--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-day--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-day--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-week{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-week--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-week--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-week--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-week--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-week--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-week--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-week--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-week--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-custom-calendar__calendar-month--body{flex-grow:1;width:100%;height:calc(100% - 58px)}.ibiz-custom-calendar__calendar-month--legend{display:flex;align-items:center;justify-content:center;width:auto;height:100%}.ibiz-custom-calendar__calendar-month--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 var(--ibiz-spacing-tight);line-height:1em;cursor:pointer}.ibiz-custom-calendar__calendar-month--legend-item-tip{display:inline-block;width:1.5em;height:.9em;margin-right:var(--ibiz-spacing-extra-tight);border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-custom-calendar__calendar-month--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month--header{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:12px 20px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-month--button-group{display:flex;align-items:center;justify-content:space-between;width:388px}.ibiz-custom-calendar__header--title{min-width:120px}.ibiz-custom-calendar__calendar-user{display:flex;flex-direction:column;height:100%}.ibiz-custom-calendar__calendar-user-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 var(--ibiz-spacing-base)}.ibiz-custom-calendar__calendar-user-header--right .el-date-editor.el-date-editor--week.el-input{width:250px}.ibiz-custom-calendar .el-date-editor.el-input,.ibiz-custom-calendar .el-date-editor.el-input__wrapper{width:130px;height:32px}

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

@@ -213,6 +213,9 @@ const useCustomCalendar = (props, emit, _componentName) => {
   const handleEVentDblClick = (value) => {
     emit("eventDblClick", value);
   };
+  const handleEventContextmenu = (value) => {
+    emit("eventContextmenu", value);
+  };
   const curWeek = vue.computed(() => {
     let tempWeek = "";
     if (realSelectedDay.value) {
@@ -259,8 +262,29 @@ const useCustomCalendar = (props, emit, _componentName) => {
     selectDate,
     handleEVentClick,
     handleEVentDblClick,
+    handleEventContextmenu,
     selectLegend
   };
 };
+function calcCurrentWeekRange(date) {
+  let monday;
+  let sunday;
+  const day = date.getDay();
+  if (day === 0) {
+    monday = dayjs(new Date(date.getTime() - 6 * 864e5)).format(
+      "YYYY-MM-DD"
+    );
+    sunday = dayjs(date).format("YYYY-MM-DD");
+  } else {
+    monday = dayjs(new Date(date.getTime() - (day - 1) * 864e5)).format(
+      "YYYY-MM-DD"
+    );
+    sunday = dayjs(new Date(date.getTime() + (7 - day) * 864e5)).format(
+      "YYYY-MM-DD"
+    );
+  }
+  return [monday, sunday];
+}
 
+exports.calcCurrentWeekRange = calcCurrentWeekRange;
 exports.useCustomCalendar = useCustomCalendar;

package/lib/control/calendar/components/interface/calendar-daily.cjs

@@ -22,12 +22,17 @@ const calendarDailyProps = util.handleProps({
   },
   selectedData: {
     type: Object
+  },
+  showDetail: {
+    type: Boolean,
+    default: false
   }
 });
 const calendarDailyEmits = {
   pick: (value) => lodashEs.isObject(value),
   eventClick: (value) => value,
-  eventDblClick: (value) => value
+  eventDblClick: (value) => value,
+  eventContextmenu: (_value) => _value
 };
 
 exports.calendarDailyEmits = calendarDailyEmits;

package/lib/control/calendar/components/interface/calendar-week.cjs

@@ -31,7 +31,8 @@ const calendarWeekProps = util.handleProps({
 const calendarWeekEmits = {
   pick: (value) => lodashEs.isObject(value),
   eventClick: (value) => value,
-  eventDblClick: (value) => value
+  eventDblClick: (value) => value,
+  eventContextmenu: (_value) => _value
 };
 
 exports.calendarWeekEmits = calendarWeekEmits;

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

@@ -68,7 +68,8 @@ const customCalendarEmits = {
   [event.INPUT_EVENT]: (value) => lodashEs.isDate(value),
   [event.CHANGE_EVENT]: (value) => lodashEs.isDate(value),
   [event.EVENT_CLICK_EVENT]: (value) => value,
-  [event.EVENT_DBL_CLICK_EVENT]: (value) => value
+  [event.EVENT_DBL_CLICK_EVENT]: (value) => value,
+  [event.EVENT_CONTEXT_MENU]: (_value) => _value
 };
 
 exports.customCalendarEmits = customCalendarEmits;

package/lib/control/calendar/components/util/index.cjs

@@ -5,13 +5,17 @@ var lodashEs = require('lodash-es');
 
 "use strict";
 
+exports.checkDateRangeIncludes = util.checkDateRangeIncludes;
 exports.closeIcon = util.closeIcon;
+exports.createFollowElement = util.createFollowElement;
 exports.definePropType = util.definePropType;
 exports.epPropKey = util.epPropKey;
 exports.fade = util.fade;
+exports.followMouseMove = util.followMouseMove;
 exports.getCurWeekDates = util.getCurWeekDates;
 exports.handleBkColor = util.handleBkColor;
 exports.handleEVentClick = util.handleEVentClick;
+exports.handleEmit = util.handleEmit;
 exports.handlePopClose = util.handlePopClose;
 exports.handleProps = util.handleProps;
 exports.handleTimeRange = util.handleTimeRange;
@@ -19,7 +23,9 @@ exports.isDateInCurWeek = util.isDateInCurWeek;
 exports.isTimeGreaterThan = util.isTimeGreaterThan;
 exports.isToday = util.isToday;
 exports.isValidRange = util.isValidRange;
+exports.openPopover = util.openPopover;
 exports.rangeArr = util.rangeArr;
+exports.removeFollowElement = util.removeFollowElement;
 Object.defineProperty(exports, "get", {
 	enumerable: true,
 	get: function () { return lodashEs.get; }

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

@@ -36,7 +36,7 @@ const handlePopClose = (el) => {
     node.style.display = "none";
   }
 };
-const handleTimeRange = (startTime, endTime, format, partition = "-") => {
+const handleTimeRange = (startTime, endTime, format, partition = "~") => {
   var _a, _b;
   let timeRange = "";
   if (startTime && ((_a = dayjs(startTime)) == null ? void 0 : _a.isValid())) {
@@ -128,6 +128,14 @@ const isToday = (date, curDate) => {
   const state = dateToCheck.getDate() === currentDate.getDate() && dateToCheck.getMonth() === currentDate.getMonth() && dateToCheck.getFullYear() === currentDate.getFullYear();
   return state;
 };
+function checkDateRangeIncludes(start, end, curDate) {
+  const targetDate = dayjs(curDate);
+  const startDate = dayjs(start);
+  const endDate = dayjs(end);
+  if (!targetDate.isValid() || !startDate.isValid() || !endDate.isValid())
+    return false;
+  return targetDate.isSame(startDate, "day") || targetDate.isSame(endDate, "day") || startDate.isBefore(targetDate, "day") && endDate.isAfter(targetDate, "day");
+}
 function hasOwn(obj, key) {
   return Object.prototype.hasOwnProperty.call(obj, key);
 }
@@ -278,6 +286,36 @@ const handleProps = (props) => lodashEs.fromPairs(
     handleProp(option, key)
   ])
 );
+function openPopover(_component, _targetEvt, _opts) {
+  const overlay = ibiz.overlay.createPopover(
+    (modal) => {
+      return vue.h(_component, { modal });
+    },
+    void 0,
+    {
+      width: "auto",
+      height: "auto",
+      noArrow: true,
+      ..._opts
+    }
+  );
+  overlay == null ? void 0 : overlay.present(_targetEvt);
+  return overlay;
+}
+function followMouseMove(_event, _follow) {
+  _follow.style.left = "".concat(_event.clientX + 20, "px");
+  _follow.style.top = "".concat(_event.clientY + 20, "px");
+}
+const createFollowElement = () => {
+  var _a;
+  const followEl = document.createElement("div");
+  followEl.style = "position: fixed; height: 2px; width: 2px; z-index: -1;";
+  (_a = document.body) == null ? void 0 : _a.appendChild(followEl);
+  return followEl;
+};
+const removeFollowElement = (followEl) => {
+  document.body.removeChild(followEl);
+};
 
 Object.defineProperty(exports, "get", {
   enumerable: true,
@@ -299,13 +337,17 @@ Object.defineProperty(exports, "set", {
   enumerable: true,
   get: function () { return lodashEs.set; }
 });
+exports.checkDateRangeIncludes = checkDateRangeIncludes;
 exports.closeIcon = closeIcon;
+exports.createFollowElement = createFollowElement;
 exports.definePropType = definePropType;
 exports.epPropKey = epPropKey;
 exports.fade = fade;
+exports.followMouseMove = followMouseMove;
 exports.getCurWeekDates = getCurWeekDates;
 exports.handleBkColor = handleBkColor;
 exports.handleEVentClick = handleEVentClick;
+exports.handleEmit = handleEmit;
 exports.handlePopClose = handlePopClose;
 exports.handleProps = handleProps;
 exports.handleTimeRange = handleTimeRange;
@@ -313,4 +355,6 @@ exports.isDateInCurWeek = isDateInCurWeek;
 exports.isTimeGreaterThan = isTimeGreaterThan;
 exports.isToday = isToday;
 exports.isValidRange = isValidRange;
+exports.openPopover = openPopover;
 exports.rangeArr = rangeArr;
+exports.removeFollowElement = removeFollowElement;

package/lib/control/chart/chart.cjs

@@ -170,7 +170,7 @@ const ChartControl = /* @__PURE__ */ vue.defineComponent({
       }
       setHeight();
       let drillDetails = ((_b = (_a = props.modelData.controlParam) == null ? void 0 : _a.ctrlParams) == null ? void 0 : _b.ENABLEDRILLDETAIL) || c.controlParams.enabledrilldetail;
-      if (!lodashEs.isArray(drillDetails)) {
+      if (drillDetails && !lodashEs.isArray(drillDetails)) {
         try {
           drillDetails = JSON.parse(drillDetails);
         } catch (error) {
@@ -223,6 +223,7 @@ const ChartControl = /* @__PURE__ */ vue.defineComponent({
           width: "100%"
         },
         "max-height": maxHeight.value,
+        "span-method": c.spanMethod.bind(c),
         "header-row-class-name": ns.e("grid-header")
       }, _isSlot(_slot = c.state.gridHeaders.map((column) => {
         return vue.createVNode(vue.resolveComponent("el-table-column"), {

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{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);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}

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

@@ -4,6 +4,7 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 var qxUtil = require('qx-util');
+var draggable = require('vuedraggable');
 require('../../util/index.cjs');
 require('./data-view.css');
 var usePagination = require('../../util/pagination/use-pagination.cjs');
@@ -14,6 +15,9 @@ function _isSlot(s) {
 }
 const DataViewControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDataViewControl",
+  components: {
+    draggable
+  },
   props: {
     /**
      * @description 数据视图（卡片）模型数据
@@ -101,7 +105,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       return ((_b = (_a = c.model.controlParam) == null ? void 0 : _a.ctrlParams) == null ? void 0 : _b.CARDSTYLE) || c.controlParams.cardstyle || "default";
     });
     const showCollapseOrExpandIcon = vue.computed(() => {
-      return !c.model.enableGroup && (c.model.pagingMode === 2 || c.model.pagingMode === 3);
+      return !c.state.enableGroup && (c.model.pagingMode === 2 || c.model.pagingMode === 3);
     });
     const infiniteScroll = vue.ref();
     const infiniteScrollKey = vue.ref(qxUtil.createUUID());
@@ -166,6 +170,49 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       event.stopPropagation();
       return c.onDbRowClick(item);
     };
+    let cacheInfo = null;
+    const onDraggableChange = (evt, groupKey) => {
+      if (evt.moved) {
+        c.onDragChange({
+          from: groupKey,
+          to: groupKey,
+          fromIndex: evt.moved.oldIndex,
+          toIndex: evt.moved.newIndex
+        });
+      }
+      if (evt.added) {
+        cacheInfo = {
+          to: groupKey,
+          toIndex: evt.added.newIndex
+        };
+      }
+      if (evt.removed) {
+        if (cacheInfo) {
+          cacheInfo.from = groupKey;
+          cacheInfo.fromIndex = evt.removed.oldIndex;
+          c.onDragChange(cacheInfo);
+        }
+        cacheInfo = null;
+      }
+    };
+    const renderNewCard = (group) => {
+      return vue.createVNode(vue.resolveComponent("el-card"), {
+        "shadow": "hover",
+        "class": [ns.b("item"), ns.be("item", "new")],
+        "title": ibiz.i18n.t("app.newlyBuild"),
+        "body-style": {
+          width: c.model.cardWidth ? "".concat(c.model.cardWidth, "px") : "auto",
+          height: c.model.cardHeight ? "".concat(c.model.cardHeight, "px") : "auto"
+        },
+        "onClick": (event) => {
+          c.onClickNew(event, group == null ? void 0 : group.key);
+        }
+      }, {
+        default: () => [vue.createVNode("ion-icon", {
+          "name": "add-outline"
+        }, null)]
+      });
+    };
     const renderPanelItem = (item, modelData) => {
       const {
         context,
@@ -181,15 +228,15 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, null);
     };
     const renderItemAction = (item) => {
-      var _a;
       return vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
         "class": ns.bem("item-content", "bottom", "actions"),
-        "action-details": (_a = c.getOptItemModel().deuiactionGroup) == null ? void 0 : _a.uiactionGroupDetails,
-        "actions-state": c.getOptItemAction(item),
+        "action-details": c.getOptItemModel(),
+        "actions-state": c.state.uaState[item.srfkey],
         "onActionClick": (detail, event) => c.onActionClick(detail, item, event)
       }, null);
     };
     const renderDefaultItem = (item) => {
+      const actionModel = c.getOptItemModel();
       return vue.createVNode("div", {
         "class": ns.b("item-content")
       }, [vue.createVNode("div", {
@@ -198,7 +245,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "class": ns.bem("item-content", "top", "title")
       }, [item.srfmajortext]), vue.createVNode("div", {
         "class": ns.bem("item-content", "top", "description")
-      }, [item.content])]), c.getOptItemModel() ? vue.createVNode("div", {
+      }, [item.content])]), actionModel.length ? vue.createVNode("div", {
         "class": ns.be("item-content", "bottom")
       }, [renderItemAction(item)]) : null]);
     };
@@ -223,7 +270,23 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, {
         default: () => [vue.createVNode("div", {
           "class": ns.be("item", "content")
-        }, [cardStyle.value === "style2" && !c.state.singleSelect && vue.createVNode(vue.resolveComponent("el-checkbox"), {
+        }, [c.state.draggable && !c.state.readonly && vue.createVNode("svg", {
+          "viewBox": "0 0 16 16",
+          "xmlns": "http://www.w3.org/2000/svg",
+          "height": "1em",
+          "width": "1em",
+          "class": ns.e("drag-icon"),
+          "preserveAspectRatio": "xMidYMid meet",
+          "focusable": "false"
+        }, [vue.createVNode("g", {
+          "stroke-width": "1",
+          "fill-rule": "evenodd"
+        }, [vue.createVNode("g", {
+          "transform": "translate(5 1)",
+          "fill-rule": "nonzero"
+        }, [vue.createVNode("path", {
+          "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+        }, null)])])]), cardStyle.value === "style2" && !c.state.singleSelect && vue.createVNode(vue.resolveComponent("el-checkbox"), {
           "size": "large",
           "class": ns.bem("item", "content", "checkbox"),
           "modelValue": isSelected(item),
@@ -232,8 +295,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         }, null), panel ? renderPanelItem(item, panel) : renderDefaultItem(item)])]
       });
     };
-    const renderCardLayout = (items) => {
-      let _slot;
+    const renderCardLayout = (items, group, disabled = true) => {
       const {
         cardColXS,
         cardColSM,
@@ -241,10 +303,18 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         cardColLG
       } = c.model;
       if (cardColXS || cardColSM || cardColMD || cardColLG)
-        return vue.createVNode(vue.resolveComponent("el-row"), {
-          "class": ns.e("layout-row")
-        }, _isSlot(_slot = items.map((item) => {
-          return vue.createVNode(vue.resolveComponent("el-col"), {
+        return vue.createVNode(draggable, {
+          "itemKey": "srfkey",
+          "modelValue": items,
+          "group": c.model.id,
+          "handle": ".".concat(ns.e("drag-icon")),
+          "class": ["el-row", ns.e("layout-row")],
+          "disabled": disabled || c.state.updating || c.state.readonly,
+          "onChange": (evt) => onDraggableChange(evt, group == null ? void 0 : group.key)
+        }, {
+          item: ({
+            element
+          }) => vue.createVNode(vue.resolveComponent("el-col"), {
             "xs": cardColXS,
             "sm": cardColSM,
             "md": cardColMD,
@@ -253,18 +323,43 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
           }, {
             default: () => [vue.createVNode("div", {
               "class": ns.b("scroll-item")
-            }, [renderCard(item)])]
-          });
-        })) ? _slot : {
-          default: () => [_slot]
+            }, [renderCard(element)])]
+          }),
+          footer: () => {
+            if (c.enableNew && !c.state.readonly)
+              return vue.createVNode(vue.resolveComponent("el-col"), {
+                "xs": cardColXS,
+                "sm": cardColSM,
+                "md": cardColMD,
+                "lg": cardColLG,
+                "class": ns.e("layout-col")
+              }, {
+                default: () => [vue.createVNode("div", {
+                  "class": ns.b("scroll-item")
+                }, [renderNewCard(group)])]
+              });
+          }
         });
-      return vue.createVNode("div", {
-        "class": ns.e("layout-flex")
-      }, [items.map((item) => {
-        return vue.createVNode("div", {
+      return vue.createVNode(draggable, {
+        "itemKey": "srfkey",
+        "modelValue": items,
+        "group": c.model.id,
+        "class": [ns.e("layout-flex"), ns.em("layout-flex", "draggable")],
+        "disabled": disabled || c.state.updating || c.state.readonly,
+        "onChange": (evt) => onDraggableChange(evt, group == null ? void 0 : group.key)
+      }, {
+        item: ({
+          element
+        }) => vue.createVNode("div", {
           "class": ns.b("scroll-item")
-        }, [renderCard(item)]);
-      })]);
+        }, [renderCard(element)]),
+        footer: () => {
+          if (c.enableNew && !c.state.readonly)
+            return vue.createVNode("div", {
+              "class": ns.b("scroll-item")
+            }, [renderNewCard(group)]);
+        }
+      });
     };
     const renderGroup = (group) => {
       const {
@@ -285,19 +380,19 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "onActionClick": (detail, event) => {
           c.onGroupToolbarClick(detail, event, group);
         }
-      }, null)])]), group.children.length > 0 ? renderCardLayout(group.children) : vue.createVNode("div", {
+      }, null)])]), group.children.length > 0 ? renderCardLayout(group.children, group, !c.state.draggable) : vue.createVNode("div", {
         "class": ns.bem("group-content", "item", "empty")
       }, [ibiz.i18n.t("app.noData")])]);
     };
     const renderDataViewContent = () => {
-      if (c.model.enableGroup) {
+      if (c.state.enableGroup) {
         return vue.createVNode("div", {
           "class": ns.b("group-content")
         }, [c.state.groups.map((group) => {
           return renderGroup(group);
         })]);
       }
-      return renderCardLayout(isCollapse.value ? c.state.items.slice(0, c.state.size) : c.state.items);
+      return renderCardLayout(isCollapse.value ? c.state.items.slice(0, c.state.size) : c.state.items, void 0, !c.enableEditOrder);
     };
     const scrollToTop = () => {
       var _a;
@@ -355,12 +450,38 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "key": infiniteScrollKey.value
       }, [renderDataViewContent()]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
     };
+    const renderBatchToolBar = () => {
+      var _a;
+      const ctrlModel = (_a = c.model.controls) == null ? void 0 : _a.find((item) => {
+        return item.name === "".concat(c.model.name, "_batchtoolbar");
+      });
+      if (!ctrlModel)
+        return;
+      return vue.createVNode("div", {
+        "class": ns.e("batchtoolbar")
+      }, [vue.createVNode(vue.resolveComponent("iBizToolbarControl"), {
+        "modelData": ctrlModel,
+        "context": c.context,
+        "params": c.params
+      }, null)]);
+    };
     const renderNoData = () => {
+      var _a;
       const {
         isLoaded
       } = c.state;
-      if (!isLoaded) {
+      if (!isLoaded)
         return;
+      const ctrlModel = (_a = c.model.controls) == null ? void 0 : _a.find((item) => {
+        return item.name === "".concat(c.model.name, "_quicktoolbar");
+      });
+      if (ctrlModel) {
+        return vue.createVNode(vue.resolveComponent("iBizToolbarControl"), {
+          "modelData": ctrlModel,
+          "context": c.context,
+          "params": c.params,
+          "class": ns.e("quicktoolbar")
+        }, null);
       }
       const noDataSlots = {};
       if (vue3Util.hasEmptyPanelRenderer(c)) {
@@ -434,7 +555,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         }, null);
     };
     const renderContent = () => {
-      return [c.state.items.length > 0 ? renderHasData() : renderNoData(), renderNavIcon(), renderCollapseExpandIcon()];
+      return [c.state.items.length > 0 ? renderHasData() : renderNoData(), renderBatchToolBar(), renderNavIcon(), renderCollapseExpandIcon()];
     };
     const renderPagingBar = () => {
       if (c.state.enablePagingBar && c.model.pagingMode === 1)
@@ -491,15 +612,15 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
-    let _slot2;
+    let _slot;
     return vue.createVNode(vue.resolveComponent("iBizControlNavigation"), {
       "controller": this.c
     }, {
       default: () => [vue.createVNode(vue.resolveComponent("iBizControlBase"), {
         "class": [this.ns.is("enable-page", !!this.c.state.enablePagingBar)],
         "controller": this.c
-      }, _isSlot(_slot2 = this.renderLayoutByStyle()) ? _slot2 : {
-        default: () => [_slot2]
+      }, _isSlot(_slot = this.renderLayoutByStyle()) ? _slot : {
+        default: () => [_slot]
       })]
     });
   }