@opendesign-plus-test/components 0.0.1-rc.20 → 0.0.1-rc.201

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

@@ -0,0 +1,396 @@
+import { defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, unref, createElementVNode, toDisplayString, createVNode, withCtx, createCommentVNode, normalizeClass, Fragment, renderList, createBlock, resolveDynamicComponent, createTextVNode, renderSlot } from "vue";
+import { isClient, OPopover, OIcon, OTab, OTabPane, OSelect, OOption, ODivider, OScroller, OResult, OFigure } from "@opensig/opendesign";
+import dayjs from "dayjs";
+import IconTips from "../../_virtual/icon-tips2.mjs";
+import _sfc_main$1 from "./components/OMeetingSigAside.vue.mjs";
+import './components/OMeetingSigAside.css';
+import { CalendarDataType } from "./types.mjs";
+import { useScreen } from "@opendesign-plus/composables";
+import { useMeetingConfig } from "./composables/useMeetingConfig.mjs";
+import _sfc_main$2 from "./components/OMeetingCalendarList.vue.mjs";
+import './components/OMeetingCalendarList.css';
+import { formatDate } from "./utils.mjs";
+import emptyDefaultImg from "../../assets/meeting/empty.png.mjs";
+import { Locales } from "../../i18n/index.mjs";
+import { useDebounceFn } from "@vueuse/core";
+const _hoisted_1 = {
+  key: 0,
+  class: "meeting-card-header"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "header-left"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "phone-filter-wrapper"
+};
+const _hoisted_4 = { class: "date-select" };
+const _hoisted_5 = { class: "phone-filter-tab-wrapper" };
+const _hoisted_6 = { class: "meeting-card-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OMeetingSigCalendar",
+  props: {
+    sigName: {},
+    getMeetingListRequest: {},
+    isStreamDateList: { type: Boolean },
+    getDateListRequest: {},
+    getEventsListRequest: {},
+    emptyImg: {},
+    emptyText: {},
+    replayPath: { default: "video" }
+  },
+  emits: ["change-date"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const { t, locale, meetingTabs } = useMeetingConfig();
+    const isEn = computed(() => locale.value === Locales.EN);
+    const { lePadV } = useScreen();
+    const selectDate = ref("");
+    const emits = __emit;
+    const loading = ref(false);
+    const meetingData = ref([]);
+    const calendarRows = computed(() => lePadV.value ? 100 : 5);
+    const latestDate = ref("");
+    const meetingDates = ref([]);
+    const eventsDates = ref([]);
+    const eventsData = ref([]);
+    const monthIdx = ref(-1);
+    const clickDateCell2 = (date) => {
+      clickDateCell(date);
+    };
+    const changeSelect = (v) => {
+      clickDateCell(v);
+    };
+    const clickDateCell = async (date) => {
+      emits("change-date", date);
+      if (!props.getMeetingListRequest) {
+        return;
+      }
+      try {
+        loading.value = true;
+        selectDate.value = dayjs(date).format("YYYY-MM-DD");
+        const res = await props.getMeetingListRequest(selectDate.value, props.sigName);
+        meetingData.value = res.map((v) => {
+          return {
+            ...v,
+            time: `${v.start}-${v.end}`,
+            date: v.date || selectDate.value,
+            type: CalendarDataType.MEETING
+          };
+        });
+      } finally {
+        loading.value = false;
+      }
+    };
+    const getDates = async () => {
+      if (props.getDateListRequest) {
+        if (props.isStreamDateList) {
+          meetingDates.value = [];
+          for await (const dates of props.getDateListRequest()) {
+            if (Array.isArray(dates)) {
+              meetingDates.value.push(...dates);
+            } else if (typeof dates === "string") {
+              meetingDates.value.push(dates);
+            }
+          }
+        } else {
+          meetingDates.value = await props.getDateListRequest();
+        }
+      }
+      if (props.getEventsListRequest) {
+        eventsData.value = (await props.getEventsListRequest(selectDate.value, props.sigName)).map((v) => {
+          return {
+            ...v,
+            type: CalendarDataType.EVENTS
+          };
+        });
+        eventsDates.value = (eventsData.value || []).map((v) => v.dates || []).flat();
+      }
+    };
+    const tabType = ref(CalendarDataType.ALL);
+    const selectTab = () => {
+      getDates();
+    };
+    const getMonthAndDay = (date) => {
+      const dateStr = dayjs(date).format("YYYY-MM-DD");
+      return [dateStr.slice(0, 7), dateStr.slice(8, 10)];
+    };
+    const dateList = computed(() => {
+      let list2;
+      if (tabType.value === CalendarDataType.ALL) {
+        list2 = [...meetingDates.value || [], ...eventsDates.value];
+      } else if (tabType.value === CalendarDataType.MEETING) {
+        list2 = meetingDates.value || [];
+      } else if (tabType.value === CalendarDataType.EVENTS) {
+        list2 = eventsDates.value || [];
+      } else {
+        list2 = [];
+      }
+      return [...new Set(list2)].sort((a, b) => !dayjs(a).isAfter(dayjs(b)) ? -1 : 1).map((v) => dayjs(v).format("YYYY-MM-DD"));
+    });
+    const getLatestDate = () => {
+      let targetDate = dateList.value.find((date) => date === dayjs().format("YYYY-MM-DD"));
+      if (!targetDate) {
+        targetDate = dateList.value.find((date) => !dayjs().isAfter(dayjs(date))) || // 未来日期最近日期
+        [...dateList.value].reverse().find((date) => !dayjs(date).isAfter(dayjs()));
+      }
+      latestDate.value = targetDate;
+    };
+    watch(() => dateList.value, (val) => {
+      if (val.length) {
+        getLatestDate();
+        nextTick(() => {
+          clickDateCell(latestDate.value);
+        });
+      }
+    });
+    const groupDateList = computed(() => {
+      const obj = dateList.value.reduce((pre, cur) => {
+        var _a;
+        const [month, day] = getMonthAndDay(cur);
+        pre[month] = {
+          days: [...((_a = pre[month]) == null ? void 0 : _a.days) || [], day]
+        };
+        return pre;
+      }, {});
+      return Object.keys(obj).map((month) => {
+        var _a, _b;
+        let list2 = [];
+        (_b = (_a = obj[month]) == null ? void 0 : _a.days) == null ? void 0 : _b.map((day) => {
+          list2.push({ month, day });
+        });
+        return list2;
+      });
+    });
+    const dateMapList = computed(() => {
+      return groupDateList.value.map((group) => {
+        const obj = group.reduce((prev, cur) => {
+          prev[cur.month] = prev[cur.month] || [];
+          prev[cur.month].push(cur.day);
+          return prev;
+        }, {});
+        return Object.keys(obj).map((key) => {
+          return {
+            month: key,
+            days: obj[key] || []
+          };
+        });
+      });
+    });
+    const getMonthIdx = () => {
+      if (groupDateList.value.length) {
+        monthIdx.value = groupDateList.value.findIndex((v) => v.some((t2) => latestDate.value === `${t2.month}-${t2.day}`));
+        if (monthIdx.value === -1) {
+          monthIdx.value = groupDateList.value.findIndex((v) => v.some((t2) => latestDate.value.includes(t2.month)));
+        }
+      } else {
+        monthIdx.value = -1;
+      }
+    };
+    watch(
+      [() => groupDateList.value, () => latestDate.value],
+      () => {
+        getMonthIdx();
+      },
+      { deep: true }
+    );
+    const changeMonthIdx = (step) => {
+      monthIdx.value += step;
+    };
+    const rootRef = ref(null);
+    let tabResizeObserver = null;
+    const evaluateTabIcons = useDebounceFn(() => {
+      const root = rootRef.value;
+      if (!root || !isClient) return;
+      const tabEl = root.querySelector(".meeting-card-header .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 ? 130 : 120;
+      tabEl.classList.toggle("hide-icons", containerWidth < threshold);
+    }, 120);
+    onMounted(() => {
+      getDates();
+      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(() => meetingTabs.value, () => nextTick(evaluateTabIcons));
+    const list = computed(() => {
+      let list2;
+      if (tabType.value === CalendarDataType.ALL) {
+        list2 = [...meetingData.value || [], ...eventsData.value];
+      } else if (tabType.value === CalendarDataType.MEETING) {
+        list2 = meetingData.value || [];
+      } else if (tabType.value === CalendarDataType.EVENTS) {
+        list2 = eventsData.value || [];
+      } else {
+        list2 = [];
+      }
+      return list2;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "rootRef",
+        ref: rootRef,
+        class: "o-sig-meeting-calendar",
+        style: { "--height": 400 }
+      }, [
+        !unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          latestDate.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createElementVNode("span", null, toDisplayString(unref(t)("meeting.latestMeeting")), 1),
+            createElementVNode("span", null, toDisplayString(unref(dayjs)(latestDate.value).format("YYYY/MM/DD")), 1),
+            createVNode(unref(OPopover), null, {
+              target: withCtx(() => [
+                createVNode(unref(OIcon), { class: "tips" }, {
+                  default: withCtx(() => [
+                    createVNode(unref(IconTips))
+                  ]),
+                  _: 1
+                })
+              ]),
+              default: withCtx(() => [
+                createElementVNode("div", null, [
+                  createElementVNode("p", null, toDisplayString(unref(t)("meeting.detailHalfYearMeetings")), 1)
+                ])
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          createVNode(unref(OTab), {
+            modelValue: tabType.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabType.value = $event),
+            onChange: selectTab,
+            line: false,
+            "max-show": 9999,
+            class: normalizeClass({ "full-width": !latestDate.value })
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(meetingTabs).slice(0, -1), (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", "class"])
+        ])) : createCommentVNode("", true),
+        unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createElementVNode("div", _hoisted_4, [
+            createVNode(unref(OSelect), {
+              modelValue: selectDate.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectDate.value = $event),
+              onChange: changeSelect,
+              placeholder: unref(t)("meeting.selectDate")
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(dateList.value, (date) => {
+                  return openBlock(), createBlock(unref(OOption), {
+                    key: date,
+                    value: date,
+                    label: unref(formatDate)(date)
+                  }, null, 8, ["value", "label"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue", "placeholder"])
+          ]),
+          createElementVNode("div", _hoisted_5, [
+            createVNode(unref(OTab), {
+              modelValue: tabType.value,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tabType.value = $event),
+              onChange: selectTab,
+              line: false,
+              "max-show": 9999
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(meetingTabs).slice(0, -1), (item) => {
+                  return openBlock(), createBlock(unref(OTabPane), {
+                    key: item.value,
+                    value: item.value
+                  }, {
+                    nav: withCtx(() => [
+                      createTextVNode(toDisplayString(item.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ])
+        ])) : createCommentVNode("", true),
+        createVNode(unref(ODivider), { class: "meeting-divider" }),
+        createElementVNode("div", _hoisted_6, [
+          !unref(lePadV) && monthIdx.value !== -1 ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            data: dateMapList.value.slice(monthIdx.value, monthIdx.value + 1),
+            meetingDates: tabType.value !== unref(CalendarDataType).EVENTS ? meetingDates.value : [],
+            eventsDates: tabType.value !== unref(CalendarDataType).MEETING ? eventsDates.value : [],
+            onClickDate: clickDateCell2,
+            onChangeMonth: changeMonthIdx,
+            current: monthIdx.value,
+            total: dateMapList.value.length,
+            active: selectDate.value
+          }, null, 8, ["data", "meetingDates", "eventsDates", "current", "total", "active"])) : createCommentVNode("", true),
+          createVNode(unref(OScroller), {
+            class: "list-content",
+            "show-type": "hover",
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                replayPath: __props.replayPath,
+                list: list.value,
+                rows: calendarRows.value
+              }, {
+                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, ["replayPath", "list", "rows"])
+            ]),
+            _: 3
+          })
+        ])
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

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