@opendesign-plus/components 0.0.1-rc.6 → 0.0.1-rc.60

package/dist/treeshaking/components/meeting/OMeetingSigCalendar.css

@@ -0,0 +1,230 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.o-sig-meeting-calendar {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
+  width: 100%;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--meeting-card-radius);
+  margin-top: var(--o-gap-5);
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .meeting-card-header .el-input {
+    flex-grow: 1;
+}
+.o-sig-meeting-calendar .meeting-divide {
+    width: calc(100% - 32px);
+}
+}
+.o-sig-meeting-calendar .phone-filter-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--o-gap-4);
+  padding: var(--o-gap-4) var(--o-gap-3) 0 var(--o-gap-3);
+  flex-wrap: nowrap;
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .phone-filter-wrapper {
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--o-gap-2);
+}
+}
+.o-sig-meeting-calendar .phone-filter-wrapper .date-select {
+  padding-bottom: var(--o-gap-2);
+  max-width: 240px;
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .phone-filter-wrapper .date-select {
+    max-width: 100%;
+    width: 100%;
+    padding-bottom: 0;
+}
+}
+.o-sig-meeting-calendar .phone-filter-wrapper .date-select .o-select {
+  width: 100%;
+}
+.o-sig-meeting-calendar .phone-filter-wrapper .o-tab {
+  flex-shrink: 0;
+  --tab-text-height: calc(var(--tab-nav-text-height) + var(--o-gap-2) + 2px);
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .phone-filter-wrapper .o-tab {
+    --tab-text-height: var(--tab-nav-text-height);
+}
+}
+.o-sig-meeting-calendar .phone-filter-wrapper .o-tab .o-tab-head {
+  line-height: var(--tab-text-height);
+}
+.o-sig-meeting-calendar .meeting-card-header {
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  padding: var(--o-gap-3) 0 0;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 1200px) {
+.o-sig-meeting-calendar .meeting-card-header {
+    padding: var(--o-gap-3) 0 0;
+}
+}
+.o-sig-meeting-calendar .meeting-card-header .date-meeting {
+  max-width: var(--el-date-editor-width);
+  width: auto;
+}
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+  width: 35%;
+  padding-left: var(--o-gap-5);
+  padding-bottom: var(--o-gap-3);
+  color: var(--o-color-info1);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 1200px) {
+.o-sig-meeting-calendar .meeting-card-header .header-left {
+    padding-left: var(--o-gap-4);
+}
+}
+.o-sig-meeting-calendar .meeting-card-header .o-tab {
+  width: 65%;
+}
+.o-sig-meeting-calendar .meeting-card-header .o-tab.full-width {
+  width: 100%;
+}
+.o-sig-meeting-calendar .meeting-card-header .o-tab .o-tab-nav {
+  padding-bottom: var(--o-gap-3);
+}
+.o-sig-meeting-calendar .meeting-card-header .o-tab .o-tab-nav .o-icon svg path {
+  fill: currentColor;
+}
+.o-sig-meeting-calendar .meeting-card-header .o-tab.hide-icons .o-tab-nav-list .o-icon {
+  display: none;
+}
+.o-sig-meeting-calendar .meeting-card-header .o-tab.measuring .o-tab-nav-list.width-measurement .o-icon {
+  display: inline-flex;
+}
+.o-sig-meeting-calendar .el-input__prefix {
+  display: none;
+}
+.o-sig-meeting-calendar .tips {
+  margin-left: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--o-color-info1);
+  position: relative;
+  top: 2px;
+}
+.o-sig-meeting-calendar .tips path {
+  opacity: 1;
+}
+.o-sig-meeting-calendar .meeting-divider {
+  width: 100%;
+  --o-divider-gap: 0;
+}
+.o-sig-meeting-calendar .meeting-card-content {
+  display: flex;
+}
+.o-sig-meeting-calendar .content-divider {
+  height: 400px;
+  --o-divider-label-gap: 0;
+}
+.o-sig-meeting-calendar .list-content {
+  min-width: 0;
+  flex-grow: 1;
+  height: calc(var(--height) * 1px);
+}
+@media (max-width: 840px) {
+.o-sig-meeting-calendar .list-content {
+    height: auto;
+}
+}
+.o-sig-meeting-calendar .empty-result {
+  --result-image-width: 200px;
+  --result-image-height: 175px;
+}
+.o-sig-meeting-calendar .empty-result .o-result-description {
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-sig-meeting-calendar .empty-result .o-result-description {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-sig-meeting-calendar .empty-result .o-result-description {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-sig-meeting-calendar .empty-result .o-result-description {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-sig-meeting-calendar .empty-result .o-result-description {
+    font-size: 12px;
+    line-height: 18px;
+}
+}

package/dist/treeshaking/components/meeting/OMeetingSigCalendar.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    sigName: String;
+    getMeetingListRequest: any;
+    getDateListRequest: any;
+    getEventsListRequest: any;
+    dates: String[];
+    emptyImg?: any;
+    emptyText?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        empty?(_: {}): any;
+    };
+    refs: {
+        rootRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,378 @@
+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-tips.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: "meeting-card-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OMeetingSigCalendar",
+  props: {
+    sigName: {},
+    getMeetingListRequest: {},
+    getDateListRequest: {},
+    getEventsListRequest: {},
+    dates: {},
+    emptyImg: {},
+    emptyText: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t, locale, meetingTabs } = useMeetingConfig();
+    const isEn = computed(() => locale.value === Locales.EN);
+    const { lePadV } = useScreen();
+    const selectDate = ref("");
+    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) => {
+      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) {
+        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
+            }, {
+              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"])
+          ]),
+          createElementVNode("div", null, [
+            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_5, [
+          !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, {
+                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, ["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
+};