@ibiz-template/vue3-components 0.7.26-alpha.1 → 0.7.26-alpha.2

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

@@ -0,0 +1,198 @@
+'use strict';
+
+var vue = require('vue');
+require('../util/index.cjs');
+var util = require('../util/util.cjs');
+
+"use strict";
+const useCalendarDaily = (props, emit) => {
+  const drawData = vue.ref([]);
+  const curTimeTimer = vue.ref();
+  const curTimeTop = vue.ref(0);
+  const curTimeVal = vue.ref("00:00");
+  const resizableHand = vue.ref();
+  const calendarDaily = vue.ref();
+  const legends = vue.computed(() => props.legends || []);
+  const multiple = vue.computed(() => props.multiple === true);
+  const selectedData = vue.ref([]);
+  let initialMouseY = 0;
+  let initialHeight = 0;
+  const handleDragStart = (event) => {
+    initialMouseY = event.clientY;
+    initialHeight = parseInt(
+      window.getComputedStyle(resizableHand.value).height,
+      10
+    );
+  };
+  const handleDrag = (event) => {
+    const heightChange = event.clientY - initialMouseY + initialHeight;
+    resizableHand.value.style.height = "".concat(heightChange, "px");
+  };
+  const events = vue.computed(() => {
+    return computeUIEvents(
+      props.events,
+      props == null ? void 0 : props.selectedDay,
+      legends.value,
+      calendarDaily.value
+    );
+  });
+  const computeUIEvents = (events2, curDate, legends2, calendarDaily2) => {
+    const tempEvents = [];
+    const tempColors = /* @__PURE__ */ new Map();
+    let contentWidth = 0;
+    if (calendarDaily2) {
+      contentWidth = parseInt(window.getComputedStyle(calendarDaily2).width, 10);
+    }
+    events2.sort((a, b) => {
+      const beginTimeDifference = new Date(a.beginTime).getTime() - new Date(b.beginTime).getTime();
+      let type;
+      if (beginTimeDifference === 0) {
+        type = new Date(a.endTime).getTime() - new Date(b.endTime).getTime();
+      } else {
+        type = beginTimeDifference;
+      }
+      return type;
+    });
+    const tempArray = events2.filter((event) => {
+      return event && event.beginTime && event.endTime && util.isToday(curDate, event.beginTime) && util.isToday(curDate, event.endTime);
+    });
+    tempArray.forEach((event, index) => {
+      const tempItem = {};
+      Object.assign(tempItem, event);
+      const targetLegend = legends2.find(
+        (legendItem) => Object.is(legendItem.id, event.itemType)
+      );
+      const targetEvent = selectedData.value.find(
+        (item) => item.id === event.id
+      );
+      Object.assign(tempItem, { zIndex: index + 1 });
+      const length = tempArray.length;
+      const itemWidth = (contentWidth - 90) / length;
+      const percentage = Number((100 / length).toFixed(3));
+      let width = "".concat(percentage, "%");
+      let styleLeft = "".concat(index * percentage, "%");
+      if (itemWidth < 100) {
+        width = "100px";
+        styleLeft = "".concat(index * 100, "px");
+      }
+      Object.assign(tempItem, { width, styleLeft });
+      if (event.beginTime && event.endTime) {
+        const height = handleEventHeight(
+          event.beginTime,
+          event.endTime,
+          curDate
+        );
+        const timeRange = util.handleTimeRange(
+          event.beginTime,
+          event.endTime,
+          "HH:mm"
+        );
+        Object.assign(tempItem, { height, timeRange });
+      }
+      if (event.beginTime) {
+        const { styleTop } = handleTopOrCurVal(new Date(event.beginTime));
+        Object.assign(tempItem, { styleTop });
+      }
+      if (!(event == null ? void 0 : event.bkColor)) {
+        const bkColor = targetLegend ? targetLegend.bkcolor : util.handleBkColor(tempColors, event.itemType);
+        Object.assign(tempItem, { bkColor });
+      }
+      if (tempItem.bkColor) {
+        const tempBkColor = util.fade(tempItem.bkColor, 10);
+        Object.assign(tempItem, {
+          bkColorFade: tempBkColor
+        });
+      }
+      if ((tempItem == null ? void 0 : tempItem.height) && (tempItem == null ? void 0 : tempItem.height) > 10) {
+        const border = "1px solid #FFF";
+        Object.assign(tempItem, { border });
+      } else {
+        Object.assign(tempItem, { border: "none" });
+      }
+      if (targetEvent) {
+        Object.assign(tempItem, { isSelectedEvent: true });
+      } else {
+        Object.assign(tempItem, { isSelectedEvent: false });
+      }
+      if (targetLegend && targetLegend.isShow || !targetLegend) {
+        tempEvents.push(tempItem);
+      }
+    });
+    tempColors.clear();
+    return tempEvents;
+  };
+  const handleEventHeight = (startTime, endTime, date) => {
+    let height = 1;
+    if (util.isToday(startTime, date) && util.isToday(endTime, date)) {
+      const difference = new Date(endTime).getTime() - new Date(startTime).getTime();
+      height = Math.floor(difference / (1e3 * 60));
+    }
+    if (height < 3) {
+      height = 3;
+    }
+    return height;
+  };
+  const handleTopOrCurVal = (date) => {
+    const currentHours = date.getHours();
+    const currentMinutes = date.getMinutes();
+    const hours = String(currentHours).padStart(2, "0");
+    const minutes = String(currentMinutes).padStart(2, "0");
+    let styleTop;
+    let timeVal;
+    if (currentHours === 0 && currentMinutes === 0) {
+      styleTop = 0;
+      timeVal = "00:00";
+    } else {
+      const topVal = currentHours * 60 + currentMinutes;
+      styleTop = topVal;
+      timeVal = "".concat(hours, ":").concat(minutes);
+    }
+    return { styleTop, timeVal };
+  };
+  const handleCurTime = () => {
+    const { styleTop, timeVal } = handleTopOrCurVal(/* @__PURE__ */ new Date());
+    curTimeTop.value = styleTop;
+    curTimeVal.value = timeVal;
+  };
+  const initDrawData = () => {
+    const tempDrawData = [];
+    for (let i = 1; i < 24; i++) {
+      const hours = String(i).padStart(2, "0");
+      const timescale = "".concat(hours, ":00");
+      tempDrawData.push(timescale);
+    }
+    return tempDrawData;
+  };
+  const eventClick = async (item, location) => {
+    const res = await util.handleEVentClick(
+      item,
+      location,
+      props.events,
+      multiple.value,
+      selectedData.value,
+      emit
+    );
+    const { tempSelectedData, isSelectedEvent } = res;
+    if (!isSelectedEvent) {
+      Object.assign(item, { isSelectedEvent });
+    }
+    selectedData.value = tempSelectedData;
+  };
+  return {
+    drawData,
+    curTimeTimer,
+    curTimeTop,
+    curTimeVal,
+    events,
+    resizableHand,
+    calendarDaily,
+    selectedData,
+    handleCurTime,
+    handleDrag,
+    handleDragStart,
+    eventClick,
+    initDrawData
+  };
+};
+
+exports.useCalendarDaily = useCalendarDaily;

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

@@ -0,0 +1,244 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var qxUtil = require('qx-util');
+require('../interface/index.cjs');
+var useCalendarMonth = require('./use-calendar-month.cjs');
+require('./calendar-month.css');
+require('../util/index.cjs');
+var calendarMonth = require('../interface/calendar-month.cjs');
+var util = require('../util/util.cjs');
+
+"use strict";
+const CalendarMonth = /* @__PURE__ */ vue.defineComponent({
+  name: "CalendarMonth",
+  props: calendarMonth.calendarMonthProps,
+  emits: calendarMonth.calendarMonthEmits,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns = vue3Util.useNamespace("calendar-month");
+    const {
+      isInRange,
+      rows,
+      weekDays,
+      hideHeader,
+      tableTd,
+      legends,
+      popVisible,
+      selectedDay,
+      selectedData,
+      getCellClass,
+      getSlotData,
+      handlePickDay,
+      eventClick,
+      handleMonthDraw,
+      handleEventsMoreData
+    } = useCalendarMonth.useCalendarMonth(props, emit);
+    props.controller._evt.on("onActive", () => {
+      vue.nextTick(() => {
+        popVisible.value = false;
+      });
+    });
+    vue.watch(() => props.selectedData, () => {
+      if (props.selectedData && props.selectedData.length > 0) {
+        const data = props.selectedData.length > selectedData.value.length ? props.selectedData : selectedData.value;
+        selectedData.value = data;
+      } else {
+        selectedData.value = [];
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    vue.onMounted(() => {
+      handleMonthDraw();
+    });
+    vue.watch(() => props.events, () => {
+      handleMonthDraw();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    vue.watch(() => props.legends, () => {
+      legends.value = props.legends || [];
+      handleMonthDraw();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    vue.watch(() => props.selectedDay, () => {
+      selectedDay.value = props.selectedDay;
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const renderPopover = (content, event) => {
+      return vue.createVNode(vue.resolveComponent("el-popover"), {
+        "show-after": 10,
+        "offset": 4,
+        "width": "auto",
+        "popper-class": ns.e("event-popover"),
+        "placement": "top"
+      }, {
+        reference: () => content,
+        default: () => {
+          var _a;
+          return vue.createVNode("div", {
+            "class": [ns.em("event-popover", "body")]
+          }, [vue.createVNode("div", {
+            "class": [ns.em("event-popover", "close")],
+            "onClick": (el) => util.handlePopClose(el),
+            "innerHTML": util.closeIcon
+          }, null), vue.createVNode("div", {
+            "class": [ns.em("event-popover", "scroll")]
+          }, [(slots == null ? void 0 : slots.event) ? (_a = slots.event) == null ? void 0 : _a.call(slots, {
+            data: event
+          }) : vue.createVNode("div", {
+            "class": [ns.em("event-popover", "content")]
+          }, ["".concat(event.text || "", " ").concat(event.timeRange || "")])])]);
+        }
+      });
+    };
+    const renderEvent = (event) => {
+      const node = vue.createVNode("div", {
+        "class": ns.em("event-content", "event-summary")
+      }, [event.text && vue.createVNode("span", {
+        "class": [ns.em("event-content", "event-name")]
+      }, [event.text]), event.timeRange && vue.createVNode("span", {
+        "class": [ns.em("event-content", "time-range")]
+      }, [event.timeRange])]);
+      if (!props.controller.state.showDetail) {
+        return node;
+      }
+      return renderPopover(node, event);
+    };
+    const renderEventItem = (event, eventIndex) => {
+      let node = null;
+      node = vue.createVNode("div", {
+        "key": eventIndex,
+        "class": [ns.e("event-box"), "event-box"],
+        "style": {
+          top: "".concat(Number(eventIndex * 24) + 30, "px"),
+          width: "".concat(event == null ? void 0 : event.width)
+        }
+      }, [vue.createVNode("button", {
+        "class": ["event-content", ns.e("event-content"), event.isSelectedEvent ? "is-selected-event" : "", event == null ? void 0 : event.classname],
+        "style": {
+          background: event == null ? void 0 : event.bkColor,
+          color: event == null ? void 0 : event.color
+        },
+        "onClick": (el) => {
+          el.stopPropagation();
+          eventClick(event, "content");
+        }
+      }, [renderEvent(event), event.isSelectedEvent ? vue.createVNode("span", {
+        "class": [ns.em("event-content", "check"), "fa fa-check"]
+      }, null) : ""])]);
+      return node;
+    };
+    const renderEvents = (cell) => {
+      const eventsNode = cell.events.map((event, eventIndex) => {
+        let node = null;
+        const uuid = qxUtil.createUUID();
+        Object.assign(event, {
+          popId: uuid
+        });
+        if (eventIndex < 3 && (event.isShow || event.isToday)) {
+          node = renderEventItem(event, eventIndex);
+        }
+        return node;
+      });
+      let moreNode = null;
+      if (cell.events.length > 3) {
+        const tempEvents = handleEventsMoreData(cell);
+        moreNode = tempEvents.length > 0 ? vue.createVNode(vue.resolveComponent("el-popover"), {
+          "visible": popVisible.value,
+          "onUpdate:visible": ($event) => popVisible.value = $event,
+          "placement": "top",
+          "width": 400,
+          "trigger": "click",
+          "popper-class": ns.e("more-popover")
+        }, {
+          reference: () => {
+            return vue.createVNode(vue.resolveComponent("el-button"), {
+              "class": ns.em("more-popover", "more-events"),
+              "type": "text",
+              "onClick": (event) => event.stopPropagation()
+            }, {
+              default: () => [vue.createTextVNode("+"), tempEvents.length, vue.createTextVNode(" \u66F4\u591A")]
+            });
+          },
+          default: () => {
+            return vue.createVNode("div", {
+              "class": [ns.em("more-popover", "body")]
+            }, [vue.createVNode("div", {
+              "class": ns.em("more-popover", "title")
+            }, [cell.curDate ? cell.curDate.format("YYYY-MM-DD") : cell.text]), vue.createVNode("div", {
+              "class": ns.em("more-popover", "events-content")
+            }, [tempEvents.map((event, eventIndex) => renderEventItem(event, eventIndex))])]);
+          }
+        }) : null;
+      }
+      return vue.createVNode("div", {
+        "class": [ns.e("container__events")]
+      }, [eventsNode, moreNode]);
+    };
+    const renderThead = () => {
+      if (hideHeader.value) {
+        return null;
+      }
+      return vue.createVNode("thead", null, [weekDays.value.map((day) => vue.createVNode("th", {
+        "key": day
+      }, [day]))]);
+    };
+    const renderTbody = () => {
+      return vue.createVNode("tbody", null, [rows.value.map((row, index) => vue.createVNode("tr", {
+        "key": index,
+        "class": [ns.e("row"), index === 0 && hideHeader.value ? "el-calendar-table__row--hide-border" : ""]
+      }, [row.map((cell, key) => {
+        var _a;
+        return vue.createVNode("td", {
+          "key": key,
+          "class": [...getCellClass(cell), ns.em("row", "td")],
+          "onClick": () => handlePickDay(cell),
+          "ref": (el) => {
+            tableTd.value = el;
+          }
+        }, [vue.createVNode("div", {
+          "class": [ns.e("cell")]
+        }, [vue.createVNode("div", {
+          "class": [ns.em("row", "calendar-day")]
+        }, [slots["date-cell"] ? (_a = slots["date-cell"]) == null ? void 0 : _a.call(slots, {
+          key,
+          data: getSlotData(cell)
+        }) : vue.createVNode("span", null, [cell.text])]), vue.createVNode("div", {
+          "class": ns.e("container")
+        }, [renderEvents(cell)])])]);
+      })]))]);
+    };
+    return {
+      ns,
+      isInRange,
+      renderThead,
+      renderTbody
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("table", {
+      "class": [this.ns.e("thead")]
+    }, [this.renderThead()]), vue.createVNode("div", {
+      "class": this.ns.e("table-body")
+    }, [vue.createVNode("div", {
+      "class": this.ns.em("table-body", "scroll")
+    }, [vue.createVNode("table", {
+      "class": [this.ns.e("tbody"), this.isInRange && "is-range"]
+    }, [this.renderTbody()])])])]);
+  }
+});
+
+exports.CalendarMonth = CalendarMonth;

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

@@ -0,0 +1 @@
+.ibiz-calendar-month{width:100%;height:100%;display:flex;flex-direction:column}.ibiz-calendar-month__thead{width:100%;height:46px}.ibiz-calendar-month__thead th{padding:12px 0;font-weight:400}.ibiz-calendar-month__tbody{width:100%;height:100%;table-layout:fixed;width:100%}.ibiz-calendar-month__tbody:not(.is-range) td.next,.ibiz-calendar-month__tbody:not(.is-range) td.prev{color:var(--el-text-color-placeholder)}.ibiz-calendar-month__table-body{width:100%;height:100%;flex:1;padding-bottom:8px;overflow:scroll}.ibiz-calendar-month__table-body--scroll{width:auto;height:auto;overflow:scroll}.ibiz-calendar-month__row{min-height:126px}.ibiz-calendar-month__row:first-child td{border-top:1px solid var(--ibiz-color-border)}.ibiz-calendar-month__row--td{width:auto;border-bottom:1px solid var(--ibiz-color-border);border-right:1px solid var(--ibiz-color-border);vertical-align:top;transition:background-color var(--ibiz-color-border) ease;cursor:pointer}.ibiz-calendar-month__row--td.is-today{color:var(--el-color-primary)}.ibiz-calendar-month__row--td.is-selected{background-color:#ecf5ff}.ibiz-calendar-month__row--td.is-selected .ibiz-calendar-month__cell{background:#ecf5ff}.ibiz-calendar-month__row--td:first-child{border-left:1px solid var(--ibiz-color-border)}.ibiz-calendar-month__row--calendar-day{position:relative;z-index:1;height:auto}.ibiz-calendar-month__row--calendar-day:hover{background:0 0}.ibiz-calendar-month__cell{height:126px;width:100%;min-height:126px;display:flex;flex-direction:column;position:relative}.ibiz-calendar-month__container{width:100%;height:100%;position:absolute;left:0;right:0}.ibiz-calendar-month__container__events{position:relative;z-index:2}.ibiz-calendar-month__event-box{width:100%;height:auto;min-height:24px;display:flex;align-items:center;position:absolute;left:0;top:0}.ibiz-calendar-month__event-content{width:100%;height:20px;line-height:20px;padding:0 4px;border:none;outline:0;text-align:left;border-radius:4px;background:var(--ibiz-color-primary);color:#fff;position:relative;overflow:hidden;cursor:pointer}.ibiz-calendar-month__event-content:active{animation:pulse 1s linear}.ibiz-calendar-month__event-content--btn-ripple{position:absolute;display:block;width:50px;height:20px;border-radius:10px;background:rgba(255,255,255,.4);animation:ripple 1s ease}.ibiz-calendar-month__event-content--event-summary{text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ibiz-calendar-month__event-content--event-name{margin-right:6px}.ibiz-calendar-month__event-content--time-range{margin-right:6px}.ibiz-calendar-month__event-content--check{color:var(--ibiz-color-primary);position:absolute;right:6px;top:50%;transform:translate(0,-50%)}.ibiz-calendar-month__more-popover.el-popper.el-popper{padding:0;border-radius:4px}.ibiz-calendar-month__more-popover--more-events{height:20px;padding:2px;position:absolute;left:0;top:106px}.ibiz-calendar-month__more-popover--body{width:100%;height:auto}.ibiz-calendar-month__more-popover--title{padding:6px 8px;font-size:16px;text-align:left;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-month__more-popover--events-content{width:100%;height:auto;max-height:380px;padding:8px 10px;overflow-x:hidden;overflow-y:scroll}.ibiz-calendar-month__more-popover .event-box{position:static}.ibiz-calendar-month__more-popover .event-box:nth-child(1){margin-top:0}.ibiz-calendar-month__event-popover{padding:0;width:auto;height:auto;position:relative}.ibiz-calendar-month__event-popover.el-popover.el-popper{padding:24px 12px 8px 12px}.ibiz-calendar-month__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-month__event-popover--scroll{width:auto;height:auto;min-width:450px;min-height:200px;overflow:auto}.ibiz-calendar-month__event-popover--close{position:absolute;right:8px;top:8px;cursor:pointer}.ibiz-calendar-month__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-month__event-popover--close:hover .el-icon svg{fill:#fff}.ibiz-calendar-month__event-popover .el-icon{font-size:20px;min-height:24px;min-width:24px;display:flex;justify-content:center;align-items:center}.ibiz-calendar-month__event-popover .el-icon svg{fill:var(--el-text-color-secondary)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

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

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