@opendesign-plus-test/components 0.0.1-rc.64 → 0.0.1-rc.66

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

@@ -0,0 +1,251 @@
+import { defineComponent as le, ref as m, computed as Y, watch as x, nextTick as ne, onMounted as se, openBlock as r, createElementBlock as T, createElementVNode as E, toDisplayString as L, unref as n, createVNode as h, withCtx as c, createCommentVNode as C, Fragment as G, renderList as B, createBlock as N, resolveDynamicComponent as oe, createTextVNode as P, renderSlot as ue } from "vue";
+import { OPopover as ie, OIcon as U, OTab as re, OTabPane as ce, ODivider as ve, OScroller as me } from "@opensig/opendesign";
+import { ElSelect as de, ElOption as fe } from "element-plus";
+import "element-plus/es/components/select/style/css";
+import "element-plus/es/components/option/style/css";
+import i from "dayjs";
+import ge from "../../icons/icon-tips.mjs";
+import he from "./components/OMeetingSigAside.vue.mjs";
+import './components/OMeetingSigAside.css';
+import { CalendarDataType as o } from "./types.mjs";
+import { useScreen as pe } from "@opendesign-plus/composables";
+import { useMeetingConfig as De } from "./composables/useMeetingConfig.mjs";
+import ye from "./components/OMeetingCalendarList.vue.mjs";
+import './components/OMeetingCalendarList.css';
+import { formatDate as z } from "./utils.mjs";
+const Me = { class: "o-sig-meeting-calendar" }, Ee = { class: "meeting-card-header" }, Le = {
+  key: 0,
+  class: "header-left"
+}, _e = {
+  key: 0,
+  class: "date-select"
+}, Ye = { class: "meeting-card-content" }, je = /* @__PURE__ */ le({
+  __name: "OMeetingSigCalendar",
+  props: {
+    sigName: {},
+    getMeetingListRequest: {},
+    getDateListRequest: {},
+    getEventsListRequest: {},
+    dates: {}
+  },
+  setup(F) {
+    const d = F, { t: S, meetingTabs: H } = De(), { lePadV: p } = pe(), f = m(""), O = m(!1), w = m([]), J = Y(() => p.value ? 100 : 5), D = m(""), V = m([]), k = m([]), b = m([]), v = m(-1), K = (e) => {
+      I(e);
+    }, Q = (e) => {
+      I(e);
+    }, I = async (e) => {
+      if (d.getMeetingListRequest)
+        try {
+          O.value = !0, f.value = i(e).format("YYYY-MM-DD");
+          const a = await d.getMeetingListRequest(f.value, d.sigName);
+          w.value = a.map((t) => ({
+            ...t,
+            time: `${t.start}-${t.end}`,
+            date: t.date || f.value,
+            type: o.MEETING
+          }));
+        } finally {
+          O.value = !1;
+        }
+    }, R = async () => {
+      d.getDateListRequest && (V.value = await d.getDateListRequest()), d.getEventsListRequest && (b.value = (await d.getEventsListRequest(f.value, d.sigName)).map((e) => ({
+        ...e,
+        type: o.EVENTS
+      })), k.value = (b.value || []).map((e) => e.dates || []).flat());
+    }, u = m(o.ALL), q = () => {
+      R();
+    };
+    x(
+      () => p.value,
+      () => {
+        p.value && (u.value = o.ALL, q());
+      }
+    );
+    const W = (e) => {
+      const a = i(e).format("YYYY-MM-DD");
+      return [a.slice(0, 7), a.slice(8, 10)];
+    }, g = Y(() => {
+      let e;
+      return u.value === o.ALL ? e = [...V.value || [], ...k.value] : u.value === o.MEETING ? e = V.value || [] : u.value === o.EVENTS ? e = k.value || [] : e = [], [...new Set(e)].sort((a, t) => i(a).isAfter(i(t)) ? 1 : -1).map((a) => i(a).format("YYYY-MM-DD"));
+    }), X = () => {
+      let e = g.value.find((a) => a === i().format("YYYY-MM-DD"));
+      e || (e = g.value.find((a) => i(a).isAfter(i())) || // 未来日期最近日期
+      [...g.value].reverse().find((a) => i().isAfter(i(a)))), D.value = e;
+    };
+    x(() => g.value, (e) => {
+      e.length && (X(), ne(() => {
+        I(D.value);
+      }));
+    });
+    const _ = Y(() => {
+      const e = g.value.reduce((s, y) => {
+        var $, j;
+        const [M, ae] = W(y);
+        return s[M] = {
+          count: ((($ = s[M]) == null ? void 0 : $.count) || 0) + 1,
+          days: [...((j = s[M]) == null ? void 0 : j.days) || [], ae]
+        }, s;
+      }, {}), a = Object.keys(e).map((s) => ({
+        ...e[s],
+        month: s
+      })), t = [];
+      let l = [];
+      return a.forEach((s) => {
+        for (; s.days.length; )
+          if (!l.length)
+            s.days.splice(0, 6).forEach((y) => {
+              l.push({
+                month: s.month,
+                day: y
+              });
+            }), l.length >= 5 && (t.push(l), l = []);
+          else {
+            let y = l.length;
+            y % 2 === 1 && (y += 1), s.days.length + l.length <= 6 ? (s.days.splice(0, 6).forEach((M) => {
+              l.push({
+                month: s.month,
+                day: M
+              });
+            }), l.length >= 5 && (t.push(l), l = [])) : (s.days.splice(0, 6 - y).forEach((M) => {
+              l.push({
+                month: s.month,
+                day: M
+              });
+            }), l.length >= 5 && (t.push(l), l = []));
+          }
+      }), l.length && (t.push(l), l = []), t;
+    }), A = Y(() => _.value.map((e) => {
+      const a = e.reduce((t, l) => (t[l.month] = t[l.month] || [], t[l.month].push(l.day), t), {});
+      return Object.keys(a).map((t) => ({
+        month: t,
+        days: a[t] || []
+      }));
+    })), Z = () => {
+      _.value.length ? (v.value = _.value.findIndex((e) => e.some((a) => D.value === `${a.month}-${a.day}`)), v.value === -1 && (v.value = _.value.findIndex((e) => e.some((a) => D.value.includes(a.month))))) : v.value = -1;
+    };
+    x(
+      [() => _.value, () => D.value],
+      () => {
+        Z();
+      },
+      { deep: !0 }
+    );
+    const ee = (e) => {
+      v.value += e;
+    };
+    se(() => {
+      R();
+    });
+    const te = Y(() => {
+      let e;
+      return u.value === o.ALL ? e = [...w.value || [], ...b.value] : u.value === o.MEETING ? e = w.value || [] : u.value === o.EVENTS ? e = b.value || [] : e = [], e;
+    });
+    return (e, a) => (r(), T("div", Me, [
+      E("div", Ee, [
+        D.value ? (r(), T("div", Le, [
+          E("span", null, L(n(S)("meeting.latestMeeting")), 1),
+          E("span", null, L(n(i)(D.value).format("YYYY/MM/DD")), 1),
+          h(n(ie), null, {
+            target: c(() => [
+              h(n(U), { class: "tips" }, {
+                default: c(() => [
+                  h(n(ge))
+                ]),
+                _: 1
+              })
+            ]),
+            default: c(() => [
+              E("div", null, [
+                E("p", null, L(n(S)("meeting.detailHalfYearMeetings")), 1)
+              ])
+            ]),
+            _: 1
+          })
+        ])) : C("", !0),
+        h(n(re), {
+          modelValue: u.value,
+          "onUpdate:modelValue": a[0] || (a[0] = (t) => u.value = t),
+          onChange: q,
+          line: !1,
+          "max-show": 9999
+        }, {
+          default: c(() => [
+            (r(!0), T(G, null, B(n(H).slice(0, -1), (t) => (r(), N(n(ce), {
+              key: t.value,
+              value: t.value
+            }, {
+              nav: c(() => [
+                h(n(U), null, {
+                  default: c(() => [
+                    (r(), N(oe(t.icon)))
+                  ]),
+                  _: 2
+                }, 1024),
+                P(" " + L(t.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["value"]))), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]),
+      n(p) && g.value.length ? (r(), T("div", _e, [
+        h(n(de), {
+          modelValue: f.value,
+          "onUpdate:modelValue": a[1] || (a[1] = (t) => f.value = t),
+          onChange: Q
+        }, {
+          label: c(() => [
+            P(L(n(S)("meeting.latestMeeting")) + " " + L(n(z)(f.value)), 1)
+          ]),
+          default: c(() => [
+            (r(!0), T(G, null, B(g.value, (t) => (r(), N(n(fe), {
+              key: t,
+              value: t,
+              label: n(z)(t)
+            }, null, 8, ["value", "label"]))), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ])) : C("", !0),
+      !n(p) || n(p) && g.value.length ? (r(), N(n(ve), {
+        key: 1,
+        class: "meeting-divider"
+      })) : C("", !0),
+      E("div", Ye, [
+        !n(p) && v.value !== -1 ? (r(), N(he, {
+          key: 0,
+          data: A.value.slice(v.value, v.value + 1),
+          meetingDates: u.value !== n(o).EVENTS ? V.value : [],
+          eventsDates: u.value !== n(o).MEETING ? k.value : [],
+          onClickDate: K,
+          onChangeMonth: ee,
+          current: v.value,
+          total: A.value.length,
+          active: f.value
+        }, null, 8, ["data", "meetingDates", "eventsDates", "current", "total", "active"])) : C("", !0),
+        h(n(me), {
+          class: "list-content",
+          "show-type": "hover",
+          size: "small"
+        }, {
+          default: c(() => [
+            h(ye, {
+              list: te.value,
+              rows: J.value
+            }, {
+              empty: c(() => [
+                ue(e.$slots, "empty")
+              ]),
+              _: 3
+            }, 8, ["list", "rows"])
+          ]),
+          _: 3
+        })
+      ])
+    ]));
+  }
+});
+export {
+  je as default
+};

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

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

package/dist/esm/components/meeting/components/OMeetingCalendarList.css

@@ -0,0 +1,391 @@
+.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-meeting-calendar-list.is-empty {
+  min-height: 400px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.o-meeting-calendar-list .o-collapse {
+  --icon-size2: 24px;
+  --icon-right: 12px;
+}
+@media (max-width: 1200px) {
+.o-meeting-calendar-list .o-collapse {
+    --icon-size2: 20px;
+}
+}
+@media (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse {
+    --icon-right: 8px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-calendar-list .o-collapse {
+    --icon-right: 4px;
+}
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item {
+  position: relative;
+  border-top: none;
+  border-bottom: none;
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item::after {
+  position: absolute;
+  content: "";
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 48px);
+  height: 1px;
+  background-color: var(--collapse-division-color);
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item:last-child::after {
+  display: none;
+}
+@media (hover: hover) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item:hover .text {
+    color: var(--o-color-primary1);
+}
+}
+@media (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item::after {
+    width: calc(100% - 32px);
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item:last-child::after {
+    display: none;
+}
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item.o-collapse-item-expanded .o-collapse-item-header {
+  padding-bottom: var(--o-gap-2);
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item.o-collapse-item-expanded .o-collapse-item-header .o-collapse-item-title .copy-icon {
+  opacity: 1;
+  visibility: visible;
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-icon {
+  height: min-content;
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-header {
+  align-items: center;
+  padding: var(--o-gap-4) var(--o-gap-5);
+  position: relative;
+}
+@media (min-width: 841px) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item-header:hover .o-collapse-item-title .copy-icon {
+    opacity: 1;
+    visibility: visible;
+}
+}
+@media (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item-header {
+    padding: 12px 16px;
+}
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-header .o-collapse-item-title {
+  flex-grow: 1;
+  min-width: 0;
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--o-gap-4);
+  padding-right: var(--o-gap-5);
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-header .o-collapse-item-title .meet-title-left {
+  flex-grow: 1;
+  min-width: 0;
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  opacity: 0;
+  visibility: hidden;
+  color: var(--o-color-info1);
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon:hover {
+  color: var(--o-color-primary1);
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon svg path {
+  fill: currentColor;
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-header .o-collapse-item-icon .o-svg-icon:hover {
+  color: var(--o-color-primary1);
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body {
+  margin-bottom: 0;
+  padding: 0 12px 16px 12px;
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body a {
+  word-break: break-all;
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info {
+  display: flex;
+  color: var(--o-color-info3);
+  flex-direction: column;
+  background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+  padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + var(--o-gap-5) - 12px);
+  border-radius: var(--meeting-card-radius);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info {
+    padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + 16px - 12px);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info {
+    padding: 12px 16px;
+}
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info .info-item {
+  display: flex;
+  margin-top: 8px;
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info .info-item .item-title {
+  min-width: 110px;
+}
+.o-meeting-calendar-list .o-collapse .o-collapse-item-body .calendar-info .info-item:first-child {
+  margin-top: 0;
+}
+.o-meeting-calendar-list .o-collapse .jump-detail-link {
+  padding-left: calc(var(--icon-right) + var(--icon-size2));
+  margin-top: var(--o-gap-1);
+  color: var(--o-color-info2);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-calendar-list .o-collapse .jump-detail-link {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-calendar-list .o-collapse .jump-detail-link {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .jump-detail-link {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-calendar-list .o-collapse .jump-detail-link {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-meeting-calendar-list .o-collapse .jump-detail-link:hover {
+  color: var(--o-color-primary1);
+}
+.o-meeting-calendar-list .o-collapse .jump-detail-link .o-icon {
+  font-size: 16px;
+}
+.o-meeting-calendar-list .o-collapse .jump-detail-link .o-icon svg path {
+  fill: currentColor;
+}
+.o-meeting-calendar-list .o-collapse .jump-detail-link + .jump-detail-link {
+  padding-left: 24px;
+}
+.o-meeting-calendar-list .o-collapse .meet-title {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  color: var(--o-color-info2);
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-calendar-list .o-collapse .meet-title {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-calendar-list .o-collapse .meet-title {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .meet-title {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-calendar-list .o-collapse .meet-title {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .meet-title {
+    font-size: 22px;
+    line-height: 30px;
+}
+}
+@media (max-width: 840px) and (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-calendar-list .o-collapse .meet-title {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 840px) and (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-calendar-list .o-collapse .meet-title {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 840px) and (min-width: 601px) and (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .meet-title {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 840px) and (max-width: 600px) {
+.o-meeting-calendar-list .o-collapse .meet-title {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.o-meeting-calendar-list .o-collapse .meet-title .tag-wrapper {
+  margin-left: var(--o-gap-2);
+}
+.o-meeting-calendar-list .o-collapse .meet-title .tag-wrapper .o-tag {
+  background-color: var(--o-color-control2-light);
+  border: none;
+  font-weight: 400;
+}
+.o-meeting-calendar-list .o-collapse .meet-title .o-icon {
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  color: var(--o-color-white);
+  margin-right: var(--icon-right);
+  width: var(--icon-size2);
+  height: var(--icon-size2);
+  font-size: calc(var(--icon-size2) - 2px);
+}
+.o-meeting-calendar-list .o-collapse .meet-title .o-icon svg path {
+  fill: currentColor;
+}
+.o-meeting-calendar-list .o-collapse .meet-title .text {
+  display: block;
+  font-weight: 600;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.o-meeting-calendar-list .o-collapse .meet-info {
+  display: flex;
+  margin-left: calc(var(--icon-right) + var(--icon-size2));
+  margin-top: var(--o-gap-2);
+  flex-wrap: wrap;
+  align-items: center;
+  color: var(--o-color-info3);
+  text-decoration: none;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-calendar-list .o-collapse .meet-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-calendar-list .o-collapse .meet-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .meet-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-calendar-list .o-collapse .meet-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-meeting-calendar-list .o-collapse .meet-info .o-divider {
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-calendar-list .o-collapse .meet-info .o-divider {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-calendar-list .o-collapse .meet-info .o-divider {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-calendar-list .o-collapse .meet-info .o-divider {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-calendar-list .o-collapse .meet-info .o-divider {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-meeting-calendar-list .o-collapse .meet-info.hidden-divider .start-time {
+  padding-right: 24px;
+}
+.o-meeting-calendar-list .o-collapse .meet-info.hidden-divider .o-divider {
+  display: none;
+}