@opendesign-plus-test/components 0.0.1-rc.79 → 0.0.1-rc.81

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

@@ -0,0 +1,509 @@
+"use strict";
+const vue = require("vue");
+const opendesign = require("@opensig/opendesign");
+const dayjs = require("dayjs");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/calendar/style/css");
+const OMeetingCalendarList_vue_vue_type_script_setup_true_lang = require("./components/OMeetingCalendarList.vue.cjs");
+;require('./components/OMeetingCalendarList.css');
+const iconEvent = require("../../_virtual/icon-event.cjs");
+const iconSummit = require("../../_virtual/icon-summit.cjs");
+const iconMeet = require("../../_virtual/icon-meet.cjs");
+const empty = require("../../assets/meeting/empty.png.cjs");
+const index = require("../../i18n/index.cjs");
+const useMeetingConfig = require("./composables/useMeetingConfig.cjs");
+const types = require("./types.cjs");
+const utils = require("./utils.cjs");
+const core = require("@vueuse/core");
+const _hoisted_1 = { class: "o-meeting-calendar" };
+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__ */ vue.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: types.MeetingGroupType.SIG },
+    groups: { default: () => [] },
+    disableFormat: { type: Boolean },
+    emptyImg: {},
+    emptyText: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const { t, locale, meetingTabs, getConfig } = useMeetingConfig.useMeetingConfig();
+    const isEn = vue.computed(() => locale.value === index.Locales.EN);
+    const dateList = vue.ref([]);
+    const summitData = vue.ref([]);
+    const summitDates = vue.ref([]);
+    const eventsData = vue.ref([]);
+    const eventsDates = vue.ref([]);
+    const meetingData = vue.ref([]);
+    const tabType = vue.ref(types.CalendarDataType.ALL);
+    const tabs = vue.computed(() => {
+      let list = meetingTabs.value;
+      if (props.hiddenEvents) {
+        list = list.filter((item) => item.value !== types.CalendarDataType.EVENTS);
+      }
+      if (props.hiddenSummit) {
+        list = list.filter((item) => item.value !== types.CalendarDataType.SUMMIT);
+      }
+      if (list.filter((v) => v.value !== types.CalendarDataType.ALL).length === 1) {
+        return [];
+      }
+      return list;
+    });
+    vue.watch(() => tabs.value, () => {
+      var _a;
+      tabType.value = ((_a = tabs.value[0]) == null ? void 0 : _a.value) ?? types.CalendarDataType.MEETING;
+    });
+    const calendar = vue.ref();
+    const calendarHeight = vue.ref("407px");
+    const isLimit = vue.ref(false);
+    const currentDay = vue.ref("");
+    const isAutoClick = vue.ref(false);
+    const group = vue.ref("");
+    const getSummitData = async (date) => {
+      if (props.getSummitListRequest) {
+        summitData.value = [];
+        const list = await props.getSummitListRequest(date);
+        summitData.value = (list || []).map((v) => {
+          return {
+            ...v,
+            type: types.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: types.CalendarDataType.EVENTS
+          };
+        });
+      } else {
+        eventsData.value = [];
+      }
+    };
+    const getDateList = async (date) => {
+      if (props.getDateListRequest) {
+        props.getDateListRequest(date, group.value || "").then((res) => {
+          dateList.value = res;
+        });
+      }
+      if (props.getEventsDatesRequest) {
+        props.getEventsDatesRequest(date).then((res) => {
+          eventsDates.value = res;
+        });
+      }
+      if (props.getSummitDatesRequest) {
+        props.getSummitDatesRequest(date).then((res) => {
+          summitDates.value = res;
+        });
+      }
+    };
+    const paramGetDaysData = async (params) => {
+      if (!props.getMeetingListRequest) {
+        return;
+      }
+      if (!params.date) {
+        return;
+      }
+      try {
+        meetingData.value = [];
+        const res = await props.getMeetingListRequest(params.date, group.value, "");
+        meetingData.value = res.map((v) => {
+          return {
+            ...v,
+            time: `${v.start}-${v.end}`,
+            type: types.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 = [];
+      }
+    };
+    const renderData = vue.computed(() => {
+      return [
+        ...meetingData.value,
+        ...eventsData.value,
+        ...summitData.value
+      ].filter((v) => {
+        if (tabType.value === types.CalendarDataType.ALL) {
+          return true;
+        }
+        return v.type === tabType.value;
+      });
+    });
+    const getDateData = async (day) => {
+      const date = dayjs(day).format("YYYY-MM-DD");
+      currentDay.value = date;
+      getSummitData(date);
+      getActivityData(date);
+      getDateList(date);
+      paramGetDaysData({
+        date,
+        type: tabType.value
+      });
+    };
+    const allDates = vue.computed(() => {
+      return [.../* @__PURE__ */ new Set([...dateList.value, ...summitDates.value, ...eventsDates.value])].flat().sort((a, b) => dayjs(a).isAfter(dayjs(b)) ? 1 : -1);
+    });
+    const latestDay = vue.computed(() => {
+      if (!allDates.value.length) {
+        return utils.formatDate(/* @__PURE__ */ new Date());
+      } else {
+        let find = allDates.value.find((v) => dayjs(v).isAfter(dayjs()));
+        if (!find) {
+          find = [...allDates.value].reverse().find((v) => dayjs().isAfter(dayjs(v)));
+        }
+        return utils.formatDate(find);
+      }
+    });
+    const changeMeetingDay = core.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);
+    vue.watch(
+      () => latestDay.value,
+      () => {
+        var _a;
+        (_a = calendar.value) == null ? void 0 : _a.pickDay(dayjs(latestDay.value));
+        changeMeetingDay(latestDay.value);
+      },
+      {
+        immediate: true
+      }
+    );
+    const selectDate = (val, date) => {
+      if (utils.formatDate(date) === utils.formatDate(limitTime) && val === "prev-month") {
+        isLimit.value = true;
+        return;
+      }
+      isLimit.value = false;
+      calendar.value.selectDate(val);
+      changeMeetingDay(utils.formatDate(calendar.value.selectedDay));
+    };
+    const changeGroup = () => {
+      vue.nextTick(() => {
+        paramGetDaysData({
+          date: currentDay.value,
+          type: tabType.value
+        });
+        getDateList(currentDay.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`;
+      }
+    };
+    vue.onMounted(() => {
+      getCalendarHeight();
+    });
+    const stopWatchData = vue.watch(
+      () => allDates.value.length,
+      () => {
+        if (opendesign.isClient && !currentDay.value) {
+          vue.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 === types.CalendarDataType.MEETING) {
+        return [types.CalendarDataType.ALL, types.CalendarDataType.MEETING].includes(tabType.value) && dateList.value.includes(date);
+      }
+      if (type === types.CalendarDataType.SUMMIT) {
+        return [types.CalendarDataType.ALL, types.CalendarDataType.SUMMIT].includes(tabType.value) && summitDates.value.includes(date);
+      }
+      if (type === types.CalendarDataType.EVENTS) {
+        return [types.CalendarDataType.ALL, types.CalendarDataType.EVENTS].includes(tabType.value) && eventsDates.value.includes(date);
+      }
+      return false;
+    };
+    __expose({
+      refresh: getDateData
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(vue.unref(elementPlus.ElCalendar), {
+            ref_key: "calendar",
+            ref: calendar,
+            class: "calender"
+          }, {
+            header: vue.withCtx(({ date }) => {
+              var _a;
+              return [
+                vue.createElementVNode("div", _hoisted_3, [
+                  vue.createElementVNode("div", _hoisted_4, [
+                    vue.createVNode(vue.unref(opendesign.OIcon), {
+                      onClick: ($event) => selectDate("prev-month", date)
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(opendesign.OIconChevronLeft), {
+                          class: vue.normalizeClass({ disable: isLimit.value })
+                        }, null, 8, ["class"])
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"]),
+                    vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(formatYearMonth(date)), 1),
+                    vue.createVNode(vue.unref(opendesign.OIcon), {
+                      onClick: ($event) => selectDate("next-month", date)
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(opendesign.OIconChevronRight))
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"])
+                  ]),
+                  ((_a = __props.groups) == null ? void 0 : _a.length) > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(opendesign.OSelect), {
+                    key: 0,
+                    modelValue: group.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => group.value = $event),
+                    placeholder: vue.unref(t)(__props.groupType === vue.unref(types.MeetingGroupType).GROUP ? "meeting.allGroups" : "meeting.allSigs"),
+                    clearable: "",
+                    onChange: changeGroup
+                  }, {
+                    default: vue.withCtx(() => [
+                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.groups, (t2) => {
+                        return vue.openBlock(), vue.createBlock(vue.unref(opendesign.OOption), {
+                          value: t2,
+                          key: t2
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(vue.toDisplayString(t2), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]);
+                      }), 128))
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue", "placeholder"])) : vue.createCommentVNode("", true)
+                ]),
+                vue.createElementVNode("div", _hoisted_6, [
+                  vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(t)("meeting.latestMeeting")) + " ", 1),
+                  vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(utils.formatDate)(vue.unref(dayjs)(latestDay.value))), 1)
+                ])
+              ];
+            }),
+            "date-cell": vue.withCtx(({ data }) => [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["out-box", { "has-calender": allDates.value.includes(data.day) }]),
+                onClick: ($event) => vue.unref(changeMeetingDay)(data.day, $event)
+              }, [
+                vue.createElementVNode("div", _hoisted_8, [
+                  vue.createElementVNode("p", {
+                    class: vue.normalizeClass([data.isSelected ? "is-selected" : "", "date-calender"])
+                  }, vue.toDisplayString(removeLeadingZero(data.day.split("-").at(-1) || "")), 3),
+                  vue.createElementVNode("div", _hoisted_9, [
+                    checkSelectedDay(vue.unref(types.CalendarDataType).MEETING, data.day) ? (vue.openBlock(), vue.createBlock(vue.unref(opendesign.OIcon), {
+                      key: 0,
+                      class: "meeting",
+                      style: vue.normalizeStyle({
+                        zIndex: vue.unref(getConfig)(vue.unref(types.CalendarDataType).MEETING, "zIndex"),
+                        backgroundColor: vue.unref(getConfig)(vue.unref(types.CalendarDataType).MEETING, "color")
+                      })
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconMeet))
+                      ]),
+                      _: 1
+                    }, 8, ["style"])) : vue.createCommentVNode("", true),
+                    checkSelectedDay(vue.unref(types.CalendarDataType).EVENTS, data.day) ? (vue.openBlock(), vue.createBlock(vue.unref(opendesign.OIcon), {
+                      key: 1,
+                      class: "events",
+                      style: vue.normalizeStyle({
+                        zIndex: vue.unref(getConfig)(vue.unref(types.CalendarDataType).EVENTS, "zIndex"),
+                        backgroundColor: vue.unref(getConfig)(vue.unref(types.CalendarDataType).EVENTS, "color")
+                      })
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconEvent))
+                      ]),
+                      _: 1
+                    }, 8, ["style"])) : vue.createCommentVNode("", true),
+                    checkSelectedDay(vue.unref(types.CalendarDataType).SUMMIT, data.day) ? (vue.openBlock(), vue.createBlock(vue.unref(opendesign.OIcon), {
+                      key: 2,
+                      class: "summit",
+                      style: vue.normalizeStyle({
+                        zIndex: vue.unref(getConfig)(vue.unref(types.CalendarDataType).SUMMIT, "zIndex"),
+                        backgroundColor: vue.unref(getConfig)(vue.unref(types.CalendarDataType).SUMMIT, "color")
+                      })
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconSummit))
+                      ]),
+                      _: 1
+                    }, 8, ["style"])) : vue.createCommentVNode("", true)
+                  ])
+                ])
+              ], 10, _hoisted_7)
+            ]),
+            _: 1
+          }, 512),
+          vue.createElementVNode("div", _hoisted_10, [
+            vue.createElementVNode("div", _hoisted_11, [
+              vue.createTextVNode(vue.toDisplayString(vue.unref(t)("meeting.latestMeeting")) + "  ", 1),
+              vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(utils.formatDate)(vue.unref(dayjs)(latestDay.value))), 1)
+            ]),
+            vue.createElementVNode("div", _hoisted_12, [
+              vue.createElementVNode("div", _hoisted_13, [
+                vue.createVNode(vue.unref(opendesign.OSelect), {
+                  modelValue: group.value,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => group.value = $event),
+                  placeholder: vue.unref(t)(__props.groupType === vue.unref(types.MeetingGroupType).GROUP ? "meeting.allGroups" : "meeting.allSigs"),
+                  clearable: "",
+                  onChange: changeGroup
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.groups, (t2) => {
+                      return vue.openBlock(), vue.createBlock(vue.unref(opendesign.OOption), {
+                        value: t2,
+                        key: t2
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(t2), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "placeholder"]),
+                vue.createVNode(vue.unref(opendesign.OTab), {
+                  modelValue: tabType.value,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tabType.value = $event),
+                  line: false,
+                  "max-show": 9999
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabs.value, (item) => {
+                      return vue.openBlock(), vue.createBlock(vue.unref(opendesign.OTabPane), {
+                        key: item.value,
+                        value: item.value
+                      }, {
+                        nav: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(opendesign.OIcon), null, {
+                            default: vue.withCtx(() => [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon)))
+                            ]),
+                            _: 2
+                          }, 1024),
+                          vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"])
+              ])
+            ]),
+            vue.createElementVNode("div", null, [
+              vue.createVNode(vue.unref(opendesign.OScroller), {
+                class: "meeting-list",
+                "show-type": "hover",
+                size: "small",
+                style: vue.normalizeStyle({
+                  "--height": calendarHeight.value
+                })
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(OMeetingCalendarList_vue_vue_type_script_setup_true_lang, {
+                    list: renderData.value,
+                    groupType: __props.groupType,
+                    disableFormat: __props.disableFormat
+                  }, {
+                    empty: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+                        vue.createVNode(vue.unref(opendesign.OResult), { class: "empty-result" }, {
+                          image: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(opendesign.OFigure), {
+                              class: "img",
+                              src: __props.emptyImg ?? vue.unref(empty)
+                            }, null, 8, ["src"])
+                          ]),
+                          description: vue.withCtx(() => [
+                            vue.createTextVNode(vue.toDisplayString(__props.emptyText ?? vue.unref(t)("meeting.meetingEmptyText")), 1)
+                          ]),
+                          _: 1
+                        })
+                      ])
+                    ]),
+                    _: 3
+                  }, 8, ["list", "groupType", "disableFormat"])
+                ]),
+                _: 3
+              }, 8, ["style"])
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,4 @@
+"use strict";
+const OMeetingCalendar_vue_vue_type_script_setup_true_lang = require("./OMeetingCalendar.vue.cjs");
+;require('./OMeetingCalendar.css');
+module.exports = OMeetingCalendar_vue_vue_type_script_setup_true_lang;