@opendesign-plus/components 0.0.1-rc.101 → 0.0.1-rc.103

package/dist/treeshaking/components/meeting/OMeetingCalendar.vue.mjs

@@ -0,0 +1,597 @@
+import { defineComponent, computed, ref, watch, onMounted, nextTick, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, createVNode, withCtx, createTextVNode, createCommentVNode, normalizeClass, createBlock, normalizeStyle, Fragment, renderList, resolveDynamicComponent, renderSlot } from "vue";
+import { isClient, OButton, OIcon, OIconChevronLeft, OIconChevronRight, OSelect, OOption, OTab, OTabPane, OScroller, OResult, OFigure } from "@opensig/opendesign";
+import dayjs from "dayjs";
+import { ElCalendar } from "element-plus";
+import "element-plus/es/components/calendar/style/css";
+import _sfc_main$1 from "./components/OMeetingCalendarList.vue.mjs";
+import './components/OMeetingCalendarList.css';
+import IconEvent from "../../_virtual/icon-event.mjs";
+import IconSummit from "../../_virtual/icon-summit.mjs";
+import IconMeeting from "../../_virtual/icon-meet.mjs";
+import emptyDefaultImg from "../../assets/meeting/empty.png.mjs";
+import { Locales } from "../../i18n/index.mjs";
+import { useMeetingConfig } from "./composables/useMeetingConfig.mjs";
+import { MeetingGroupType, CalendarDataType } from "./types.mjs";
+import { formatDate } from "./utils.mjs";
+import { useDebounceFn } from "@vueuse/core";
+const _hoisted_1 = {
+  key: 0,
+  class: "o-meeting-calendar-desc"
+};
+const _hoisted_2 = { class: "calendar-body" };
+const _hoisted_3 = { class: "calender-header-left" };
+const _hoisted_4 = { class: "left-title" };
+const _hoisted_5 = { class: "month-date" };
+const _hoisted_6 = { class: "right-title" };
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = { class: "day-box" };
+const _hoisted_9 = { class: "icon-box" };
+const _hoisted_10 = { class: "detail-list" };
+const _hoisted_11 = { class: "current-day" };
+const _hoisted_12 = { class: "right-title" };
+const _hoisted_13 = { class: "title-list" };
+const limitTime = "2021-01-01";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OMeetingCalendar",
+  props: {
+    getDateListRequest: {},
+    getMeetingListRequest: {},
+    getSummitListRequest: { default: async () => [] },
+    getSummitDatesRequest: {},
+    getEventsListRequest: { default: async () => [] },
+    getEventsDatesRequest: {},
+    hiddenEvents: { type: Boolean, default: false },
+    hiddenSummit: { type: Boolean, default: false },
+    groupType: { default: MeetingGroupType.SIG },
+    groups: { default: () => [] },
+    disableFormat: { type: Boolean },
+    emptyImg: {},
+    emptyText: {},
+    showDesc: { type: Boolean, default: false },
+    replayPath: { default: "video" }
+  },
+  emits: ["create"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const { t, locale, meetingTabs, getConfig } = useMeetingConfig();
+    const isEn = computed(() => locale.value === Locales.EN);
+    const dateList = ref([]);
+    const summitData = ref([]);
+    const summitDates = ref([]);
+    const eventsData = ref([]);
+    const eventsDates = ref([]);
+    const meetingData = ref([]);
+    const tabType = ref(CalendarDataType.ALL);
+    const tabs = computed(() => {
+      let list = meetingTabs.value;
+      if (props.hiddenEvents) {
+        list = list.filter((item) => item.value !== CalendarDataType.EVENTS);
+      }
+      if (props.hiddenSummit) {
+        list = list.filter((item) => item.value !== CalendarDataType.SUMMIT);
+      }
+      if (list.filter((v) => v.value !== CalendarDataType.ALL).length === 1) {
+        return [];
+      }
+      return list;
+    });
+    watch(() => tabs.value, () => {
+      var _a;
+      tabType.value = ((_a = tabs.value[0]) == null ? void 0 : _a.value) ?? CalendarDataType.MEETING;
+    });
+    const calendar = ref();
+    const calendarHeight = ref("407px");
+    const isLimit = ref(false);
+    const currentDay = ref("");
+    const isAutoClick = ref(false);
+    const group = ref("");
+    const getSummitData = async (date) => {
+      if (props.getSummitListRequest) {
+        summitData.value = [];
+        const list = await props.getSummitListRequest(date);
+        summitData.value = (list || []).map((v) => {
+          return {
+            ...v,
+            type: CalendarDataType.SUMMIT
+          };
+        });
+      } else {
+        summitData.value = [];
+      }
+    };
+    const getActivityData = async (date) => {
+      if (props.getEventsListRequest) {
+        eventsData.value = [];
+        const list = await props.getEventsListRequest(date);
+        eventsData.value = (list || []).map((v) => {
+          return {
+            ...v,
+            type: CalendarDataType.EVENTS
+          };
+        });
+      } else {
+        eventsData.value = [];
+      }
+    };
+    const datesLoadedStatus = ref([false, false, false]);
+    const allDatesLoaded = computed(() => datesLoadedStatus.value.every((v) => !!v));
+    const getDateList = async (date) => {
+      if (props.getDateListRequest) {
+        props.getDateListRequest(date, group.value || "").then((res) => {
+          dateList.value = res;
+        }).finally(() => {
+          datesLoadedStatus.value[0] = true;
+        });
+      } else {
+        datesLoadedStatus.value[0] = true;
+      }
+      if (props.getEventsDatesRequest) {
+        props.getEventsDatesRequest(date).then((res) => {
+          eventsDates.value = res;
+        }).finally(() => {
+          datesLoadedStatus.value[1] = true;
+        });
+      } else {
+        datesLoadedStatus.value[1] = true;
+      }
+      if (props.getSummitDatesRequest) {
+        props.getSummitDatesRequest(date).then((res) => {
+          summitDates.value = res;
+        }).finally(() => {
+          datesLoadedStatus.value[2] = true;
+        });
+      } else {
+        datesLoadedStatus.value[2] = true;
+      }
+    };
+    const paramGetDaysData = async (params) => {
+      if (!props.getMeetingListRequest) {
+        return;
+      }
+      if (!params.date) {
+        return;
+      }
+      try {
+        const res = await props.getMeetingListRequest(params.date, group.value, "");
+        meetingData.value = res.map((v) => {
+          return {
+            ...v,
+            time: `${v.start}-${v.end}`,
+            type: CalendarDataType.MEETING,
+            date: v.date || params.date
+          };
+        }).sort((a, b) => {
+          var _a, _b;
+          return parseInt((_a = a.start || a.cycle_start) == null ? void 0 : _a.replace(":", "")) - parseInt(b.end || ((_b = b.cycle_end) == null ? void 0 : _b.replace(":", "")));
+        });
+      } catch {
+        meetingData.value = [];
+      } finally {
+        getSummitData(params.date);
+        getActivityData(params.date);
+      }
+    };
+    const renderData = computed(() => {
+      return [
+        ...meetingData.value,
+        ...eventsData.value,
+        ...summitData.value
+      ].filter((v) => {
+        if (tabType.value === CalendarDataType.ALL) {
+          return true;
+        }
+        return v.type === tabType.value;
+      });
+    });
+    const getDateData = async (day) => {
+      const date = dayjs(day).format("YYYY-MM-DD");
+      currentDay.value = date;
+      getDateList(date);
+      paramGetDaysData({
+        date,
+        type: tabType.value
+      });
+    };
+    const allDates = computed(() => {
+      if (!allDatesLoaded.value) {
+        return [];
+      }
+      return [.../* @__PURE__ */ new Set([...dateList.value, ...summitDates.value, ...eventsDates.value])].flat().sort((a, b) => dayjs(a).isAfter(dayjs(b)) ? 1 : -1);
+    });
+    const latestDayLoaded = ref("");
+    const latestDay = computed(() => {
+      if (latestDayLoaded.value) {
+        return latestDayLoaded.value;
+      }
+      const dates = allDates.value;
+      if (!dates.length) return null;
+      const today = dayjs().format("YYYY-MM-DD");
+      let lo = 0, hi = dates.length - 1;
+      while (lo <= hi) {
+        const mid = lo + hi >> 1;
+        if (dates[mid] < today) {
+          lo = mid + 1;
+        } else {
+          hi = mid - 1;
+        }
+      }
+      return formatDate(lo < dates.length ? dates[lo] : dates[dates.length - 1]);
+    });
+    const changeMeetingDay = useDebounceFn((day, event) => {
+      if (isAutoClick.value) {
+        isAutoClick.value = false;
+        return;
+      }
+      if (new Date(day).getTime() / 1e3 < 1610380800) {
+        event == null ? void 0 : event.stopPropagation();
+        return;
+      }
+      getDateData(day);
+    }, 300);
+    watch(
+      () => latestDay.value,
+      () => {
+        var _a;
+        if (latestDay.value) {
+          if (latestDay.value !== latestDayLoaded.value) {
+            latestDayLoaded.value = latestDay.value;
+          }
+          (_a = calendar.value) == null ? void 0 : _a.pickDay(dayjs(latestDay.value));
+          changeMeetingDay(latestDay.value);
+        } else {
+          changeMeetingDay(formatDate());
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    const selectDate = (val, date) => {
+      if (formatDate(date) === formatDate(limitTime) && val === "prev-month") {
+        isLimit.value = true;
+        return;
+      }
+      isLimit.value = false;
+      calendar.value.selectDate(val);
+      changeMeetingDay(formatDate(calendar.value.selectedDay));
+    };
+    const changeGroup = () => {
+      nextTick(() => {
+        const date = formatDate(currentDay.value, "YYYY-MM-DD");
+        getDateList(date);
+        paramGetDaysData({
+          date,
+          type: tabType.value
+        });
+      });
+    };
+    const removeLeadingZero = (str) => {
+      return str.replace(/^0+(?=\d)/, "");
+    };
+    const watchChange = (element) => {
+      const observe = new MutationObserver(function() {
+        calendarHeight.value = `${element.offsetHeight - 2}px`;
+      });
+      observe.observe(element, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    };
+    const getCalendarHeight = async () => {
+      const tbody = document.querySelector(".calendar-body .el-calendar__body");
+      if (tbody) {
+        watchChange(tbody);
+        calendarHeight.value = `${tbody.offsetHeight - 2}px`;
+      }
+    };
+    const rootRef = ref(null);
+    let tabResizeObserver = null;
+    const evaluateTabIcons = useDebounceFn(() => {
+      const root = rootRef.value;
+      if (!root || !isClient) return;
+      if (props.hiddenSummit || props.hiddenEvents) return;
+      const tabEl = root.querySelector(".o-tab");
+      if (!tabEl) return;
+      const containerEl = tabEl.querySelector(".o-tab-navs-container");
+      if (!containerEl) return;
+      const containerWidth = containerEl.getBoundingClientRect().width;
+      if (!containerWidth) return;
+      const threshold = isEn.value ? 430 : 330;
+      tabEl.classList.toggle("hide-icons", containerWidth < threshold);
+    }, 120);
+    onMounted(() => {
+      getCalendarHeight();
+      nextTick(evaluateTabIcons);
+      if (isClient && typeof ResizeObserver !== "undefined" && rootRef.value) {
+        tabResizeObserver = new ResizeObserver(() => evaluateTabIcons());
+        tabResizeObserver.observe(rootRef.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      tabResizeObserver == null ? void 0 : tabResizeObserver.disconnect();
+      tabResizeObserver = null;
+    });
+    watch(() => tabs.value, () => nextTick(evaluateTabIcons));
+    const stopWatchData = watch(
+      () => allDates.value.length,
+      () => {
+        if (isClient && !currentDay.value) {
+          nextTick(() => {
+            const activeBoxes = document.querySelector(".is-today .out-box");
+            if (activeBoxes) {
+              isAutoClick.value = true;
+              activeBoxes.click();
+              stopWatchData();
+            }
+          });
+        }
+      }
+    );
+    const formatYearMonth = (date) => {
+      if (isEn.value) {
+        return date.split(" ").reverse().join(" ");
+      } else {
+        return date;
+      }
+    };
+    const checkSelectedDay = (type, date) => {
+      if (type === CalendarDataType.MEETING) {
+        return [CalendarDataType.ALL, CalendarDataType.MEETING].includes(tabType.value) && dateList.value.includes(date);
+      }
+      if (type === CalendarDataType.SUMMIT) {
+        return [CalendarDataType.ALL, CalendarDataType.SUMMIT].includes(tabType.value) && summitDates.value.includes(date);
+      }
+      if (type === CalendarDataType.EVENTS) {
+        return [CalendarDataType.ALL, CalendarDataType.EVENTS].includes(tabType.value) && eventsDates.value.includes(date);
+      }
+      return false;
+    };
+    const emits = __emit;
+    __expose({
+      refresh: getDateData
+    });
+    const create = () => {
+      emits("create");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "rootRef",
+        ref: rootRef,
+        class: "o-meeting-calendar"
+      }, [
+        __props.showDesc ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("span", null, toDisplayString(__props.groupType === unref(MeetingGroupType).GROUP ? unref(t)("meeting.meetingDescGroup") : unref(t)("meeting.meetingDesc")), 1),
+          createVNode(unref(OButton), {
+            color: "primary",
+            variant: "solid",
+            round: "pill",
+            onClick: create
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("meeting.meetingCreate")), 1)
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          createVNode(unref(ElCalendar), {
+            ref_key: "calendar",
+            ref: calendar,
+            class: "calender"
+          }, {
+            header: withCtx(({ date }) => {
+              var _a;
+              return [
+                createElementVNode("div", _hoisted_3, [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(unref(OIcon), {
+                      onClick: ($event) => selectDate("prev-month", date)
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(OIconChevronLeft), {
+                          class: normalizeClass({ disable: isLimit.value })
+                        }, null, 8, ["class"])
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"]),
+                    createElementVNode("span", _hoisted_5, toDisplayString(formatYearMonth(date)), 1),
+                    createVNode(unref(OIcon), {
+                      onClick: ($event) => selectDate("next-month", date)
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(OIconChevronRight))
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"])
+                  ]),
+                  ((_a = __props.groups) == null ? void 0 : _a.length) > 0 ? (openBlock(), createBlock(unref(OSelect), {
+                    key: 0,
+                    modelValue: group.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => group.value = $event),
+                    placeholder: unref(t)(__props.groupType === unref(MeetingGroupType).GROUP ? "meeting.allGroups" : "meeting.allSigs"),
+                    clearable: "",
+                    onChange: changeGroup
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.groups, (t2) => {
+                        return openBlock(), createBlock(unref(OOption), {
+                          value: t2,
+                          key: t2
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(t2), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]);
+                      }), 128))
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue", "placeholder"])) : createCommentVNode("", true)
+                ]),
+                createElementVNode("div", _hoisted_6, [
+                  createElementVNode("span", null, toDisplayString(unref(t)("meeting.latestMeeting")) + " ", 1),
+                  createElementVNode("span", null, toDisplayString(latestDay.value ? latestDay.value : unref(formatDate)()), 1)
+                ])
+              ];
+            }),
+            "date-cell": withCtx(({ data }) => [
+              createElementVNode("div", {
+                class: normalizeClass(["out-box", { "has-calender": allDates.value.includes(data.day) }]),
+                onClick: ($event) => unref(changeMeetingDay)(data.day, $event)
+              }, [
+                createElementVNode("div", _hoisted_8, [
+                  createElementVNode("p", {
+                    class: normalizeClass([data.isSelected ? "is-selected" : "", "date-calender"])
+                  }, toDisplayString(removeLeadingZero(data.day.split("-").at(-1) || "")), 3),
+                  createElementVNode("div", _hoisted_9, [
+                    checkSelectedDay(unref(CalendarDataType).MEETING, data.day) ? (openBlock(), createBlock(unref(OIcon), {
+                      key: 0,
+                      class: "meeting",
+                      style: normalizeStyle({
+                        zIndex: unref(getConfig)(unref(CalendarDataType).MEETING, "zIndex"),
+                        backgroundColor: unref(getConfig)(unref(CalendarDataType).MEETING, "color")
+                      })
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(IconMeeting))
+                      ]),
+                      _: 1
+                    }, 8, ["style"])) : createCommentVNode("", true),
+                    checkSelectedDay(unref(CalendarDataType).EVENTS, data.day) ? (openBlock(), createBlock(unref(OIcon), {
+                      key: 1,
+                      class: "events",
+                      style: normalizeStyle({
+                        zIndex: unref(getConfig)(unref(CalendarDataType).EVENTS, "zIndex"),
+                        backgroundColor: unref(getConfig)(unref(CalendarDataType).EVENTS, "color")
+                      })
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(IconEvent))
+                      ]),
+                      _: 1
+                    }, 8, ["style"])) : createCommentVNode("", true),
+                    checkSelectedDay(unref(CalendarDataType).SUMMIT, data.day) ? (openBlock(), createBlock(unref(OIcon), {
+                      key: 2,
+                      class: "summit",
+                      style: normalizeStyle({
+                        zIndex: unref(getConfig)(unref(CalendarDataType).SUMMIT, "zIndex"),
+                        backgroundColor: unref(getConfig)(unref(CalendarDataType).SUMMIT, "color")
+                      })
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(IconSummit))
+                      ]),
+                      _: 1
+                    }, 8, ["style"])) : createCommentVNode("", true)
+                  ])
+                ])
+              ], 10, _hoisted_7)
+            ]),
+            _: 1
+          }, 512),
+          createElementVNode("div", _hoisted_10, [
+            createElementVNode("div", _hoisted_11, [
+              createTextVNode(toDisplayString(unref(t)("meeting.latestMeeting")) + "  ", 1),
+              createElementVNode("span", null, toDisplayString(latestDay.value ? latestDay.value : unref(formatDate)()), 1)
+            ]),
+            createElementVNode("div", _hoisted_12, [
+              createElementVNode("div", _hoisted_13, [
+                createVNode(unref(OSelect), {
+                  modelValue: group.value,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => group.value = $event),
+                  placeholder: unref(t)(__props.groupType === unref(MeetingGroupType).GROUP ? "meeting.allGroups" : "meeting.allSigs"),
+                  clearable: "",
+                  onChange: changeGroup
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(__props.groups, (t2) => {
+                      return openBlock(), createBlock(unref(OOption), {
+                        value: t2,
+                        key: t2
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(t2), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "placeholder"]),
+                createVNode(unref(OTab), {
+                  modelValue: tabType.value,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tabType.value = $event),
+                  line: false,
+                  "max-show": 9999
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (item) => {
+                      return openBlock(), createBlock(unref(OTabPane), {
+                        key: item.value,
+                        value: item.value
+                      }, {
+                        nav: withCtx(() => [
+                          createVNode(unref(OIcon), null, {
+                            default: withCtx(() => [
+                              (openBlock(), createBlock(resolveDynamicComponent(item.icon)))
+                            ]),
+                            _: 2
+                          }, 1024),
+                          createTextVNode(" " + toDisplayString(item.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"])
+              ])
+            ]),
+            createElementVNode("div", null, [
+              createVNode(unref(OScroller), {
+                class: "meeting-list",
+                "show-type": "hover",
+                size: "small",
+                style: normalizeStyle({
+                  "--height": calendarHeight.value
+                })
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, {
+                    list: renderData.value,
+                    groupType: __props.groupType,
+                    disableFormat: __props.disableFormat,
+                    replayPath: __props.replayPath
+                  }, {
+                    empty: withCtx(() => [
+                      renderSlot(_ctx.$slots, "empty", {}, () => [
+                        createVNode(unref(OResult), { class: "empty-result" }, {
+                          image: withCtx(() => [
+                            createVNode(unref(OFigure), {
+                              class: "img",
+                              src: __props.emptyImg ?? unref(emptyDefaultImg)
+                            }, null, 8, ["src"])
+                          ]),
+                          description: withCtx(() => [
+                            createTextVNode(toDisplayString(__props.emptyText ?? unref(t)("meeting.meetingEmptyText")), 1)
+                          ]),
+                          _: 1
+                        })
+                      ])
+                    ]),
+                    _: 3
+                  }, 8, ["list", "groupType", "disableFormat", "replayPath"])
+                ]),
+                _: 3
+              }, 8, ["style"])
+            ])
+          ])
+        ])
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/meeting/OMeetingCalendar.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./OMeetingCalendar.vue.mjs";
+import './OMeetingCalendar.css';
+export {
+  _sfc_main as default
+};