@opendesign-plus/components 0.0.1-rc.35 → 0.0.1-rc.36

package/dist/treeshaking/components/events/OEventsCalendar.vue.mjs

@@ -0,0 +1,289 @@
+import { defineComponent, ref, watch, openBlock, createElementBlock, unref, Fragment, renderList, createElementVNode, toDisplayString, createCommentVNode, createVNode, withCtx, createBlock, normalizeStyle, normalizeClass, mergeProps, createTextVNode, resolveDynamicComponent, withDirectives } from "vue";
+import { buildVueDompurifyHTMLDirective } from "vue-dompurify-html";
+import { OCollapse, OCollapseItem, OLink, OIcon, OIconChevronRight } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+import { EVENTS_COLOR_MAP, EVENTS_ICON_MAP } from "./config.mjs";
+const _hoisted_1 = { class: "o-events-calendar" };
+const _hoisted_2 = {
+  key: 0,
+  class: "month-list"
+};
+const _hoisted_3 = { class: "collapse-header" };
+const _hoisted_4 = { class: "collapse-title" };
+const _hoisted_5 = {
+  key: 0,
+  class: "collapse-desc"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "month-content month-content-span"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "event-location"
+};
+const _hoisted_8 = { class: "event-name" };
+const _hoisted_9 = { key: 1 };
+const _hoisted_10 = {
+  key: 0,
+  class: "month-content-row"
+};
+const _hoisted_11 = { class: "month-name" };
+const _hoisted_12 = { class: "event-name" };
+const _hoisted_13 = { class: "event-location" };
+const _hoisted_14 = { class: "event-name" };
+const _hoisted_15 = { class: "event-location" };
+const _hoisted_16 = {
+  key: 1,
+  class: "month-content month-content-column"
+};
+const _hoisted_17 = { class: "event-location" };
+const _hoisted_18 = { class: "event-name" };
+const _hoisted_19 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OEventsCalendar",
+  props: {
+    data: { default: () => [] }
+  },
+  setup(__props) {
+    const vDompurifyHtml = buildVueDompurifyHTMLDirective();
+    const { lePadV } = useScreen();
+    const props = __props;
+    const monthList = ["JAN", "FEB", "MAR", "Apr", "May", "JUN", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    const expanded = ref([]);
+    watch(
+      [() => props.data, () => lePadV.value],
+      () => {
+        var _a;
+        if (props.data.length) {
+          if (lePadV.value) {
+            expanded.value = [(_a = props.data[0]) == null ? void 0 : _a.name];
+          } else {
+            expanded.value = props.data.map((v) => v.name);
+          }
+        } else {
+          expanded.value = [];
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    const getMonthFromDate = (dateStr) => {
+      const parts = dateStr.split("/");
+      return parseInt(parts[1], 10);
+    };
+    const calculateEventLayout = (events) => {
+      const columnMaxRow = new Array(12).fill(0);
+      const eventLayouts = [];
+      events.forEach((event, index) => {
+        const [start, end] = Array.isArray(event.date) ? [getMonthFromDate(event.date[0]), getMonthFromDate(event.date[1])] : [getMonthFromDate(event.date), getMonthFromDate(event.date)];
+        let maxRow = 0;
+        for (let col = start - 1; col < end; col++) {
+          maxRow = Math.max(maxRow, columnMaxRow[col]);
+        }
+        const assignedRow = maxRow + 1;
+        for (let col = start - 1; col < end; col++) {
+          columnMaxRow[col] = assignedRow;
+        }
+        eventLayouts.push({
+          event,
+          row: assignedRow,
+          eventIndex: index,
+          start,
+          end
+        });
+      });
+      return eventLayouts;
+    };
+    const organizeByMonth = (events) => {
+      const monthEvents = Array.from({ length: 12 }, () => []);
+      events.forEach((event) => {
+        const monthNum = Array.isArray(event.date) ? getMonthFromDate(event.date[0]) : getMonthFromDate(event.date);
+        monthEvents[monthNum - 1].push(event);
+      });
+      return monthEvents;
+    };
+    const getColor = (item) => {
+      const color = item.color || EVENTS_COLOR_MAP[item.type];
+      return (color == null ? void 0 : color.startsWith("--")) ? `var(${color})` : color;
+    };
+    const getIcon = (item) => {
+      if (item.icon) {
+        return item.icon;
+      }
+      return EVENTS_ICON_MAP[item.type];
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        !unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          (openBlock(), createElementBlock(Fragment, null, renderList(monthList, (m) => {
+            return createElementVNode("div", {
+              class: "month-header",
+              key: m
+            }, toDisplayString(m), 1);
+          }), 64))
+        ])) : createCommentVNode("", true),
+        createVNode(unref(OCollapse), {
+          modelValue: expanded.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expanded.value = $event)
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (t, tIdx) => {
+              return openBlock(), createBlock(unref(OCollapseItem), {
+                key: tIdx,
+                value: t.name
+              }, {
+                title: withCtx(() => [
+                  createElementVNode("div", _hoisted_3, [
+                    createElementVNode("div", _hoisted_4, [
+                      createElementVNode("div", {
+                        class: "title-icon",
+                        style: normalizeStyle({
+                          "--bg-color": getColor(t)
+                        })
+                      }, [
+                        createVNode(unref(OIcon), null, {
+                          default: withCtx(() => [
+                            (openBlock(), createBlock(resolveDynamicComponent(getIcon(t))))
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ], 4),
+                      createElementVNode("span", null, toDisplayString(t.name), 1)
+                    ]),
+                    t.desc ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                      withDirectives(createElementVNode("div", null, null, 512), [
+                        [unref(vDompurifyHtml), t.desc]
+                      ])
+                    ])) : createCommentVNode("", true)
+                  ])
+                ]),
+                default: withCtx(() => [
+                  t.isSpanMonth ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(calculateEventLayout(t.data), ({ event, row, eventIndex, start, end }) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: eventIndex,
+                        class: normalizeClass(["event-item", { "event-item-center": event.align === "center", "has-link": event.link }]),
+                        style: normalizeStyle({
+                          gridColumn: `${start} / ${end + 1}`,
+                          gridRow: row,
+                          "--bg-color": getColor(t) || void 0
+                        })
+                      }, [
+                        event.location ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(event.location), 1)) : createCommentVNode("", true),
+                        createElementVNode("div", _hoisted_8, [
+                          event.link ? (openBlock(), createBlock(unref(OLink), mergeProps({
+                            key: 0,
+                            href: event.link,
+                            target: "_blank"
+                          }, { ref_for: true }, event.linkProps || {}), {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(event.name), 1)
+                            ]),
+                            _: 2
+                          }, 1040, ["href"])) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(event.name), 1))
+                        ])
+                      ], 6);
+                    }), 128))
+                  ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(organizeByMonth(t.data), (monthEvents, monthIndex) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: monthIndex,
+                          class: normalizeClass(["month-row", {
+                            "empty-month": monthEvents.length === 0
+                          }])
+                        }, [
+                          createElementVNode("div", _hoisted_11, toDisplayString(monthList[monthIndex]), 1),
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(monthEvents, (event, eventIndex) => {
+                            return openBlock(), createElementBlock("div", {
+                              key: eventIndex,
+                              class: normalizeClass(["event-item", event.link ? "has-link" : ""]),
+                              style: normalizeStyle({
+                                "--bd-color": getColor(t) || void 0
+                              })
+                            }, [
+                              event.link ? (openBlock(), createBlock(unref(OLink), {
+                                key: 0,
+                                href: event.link,
+                                target: "_blank"
+                              }, {
+                                default: withCtx(() => [
+                                  createElementVNode("div", null, [
+                                    createElementVNode("div", _hoisted_12, [
+                                      createElementVNode("span", null, toDisplayString(event.name), 1)
+                                    ]),
+                                    createElementVNode("div", _hoisted_13, toDisplayString(event.location), 1)
+                                  ]),
+                                  createVNode(unref(OIcon), null, {
+                                    default: withCtx(() => [
+                                      createVNode(unref(OIconChevronRight))
+                                    ]),
+                                    _: 1
+                                  })
+                                ]),
+                                _: 2
+                              }, 1032, ["href"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                createElementVNode("div", _hoisted_14, toDisplayString(event.name), 1),
+                                createElementVNode("div", _hoisted_15, toDisplayString(event.location), 1)
+                              ], 64))
+                            ], 6);
+                          }), 128))
+                        ], 2);
+                      }), 128))
+                    ])) : (openBlock(), createElementBlock("div", _hoisted_16, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(organizeByMonth(t.data), (monthEvents, monthIndex) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: monthIndex,
+                          class: "month-column"
+                        }, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(monthEvents, (event, eventIndex) => {
+                            return openBlock(), createElementBlock("div", {
+                              key: eventIndex,
+                              class: normalizeClass(["event-item", event.link ? "has-link" : ""]),
+                              style: normalizeStyle({
+                                "--bg-color": getColor(t) || void 0
+                              })
+                            }, [
+                              createElementVNode("div", _hoisted_17, toDisplayString(event.location), 1),
+                              createElementVNode("div", _hoisted_18, [
+                                event.link ? (openBlock(), createBlock(unref(OLink), {
+                                  key: 0,
+                                  href: event.link,
+                                  target: "_blank"
+                                }, {
+                                  suffix: withCtx(() => [
+                                    createVNode(unref(OIcon), null, {
+                                      default: withCtx(() => [
+                                        createVNode(unref(OIconChevronRight))
+                                      ]),
+                                      _: 1
+                                    })
+                                  ]),
+                                  default: withCtx(() => [
+                                    createElementVNode("span", null, toDisplayString(event.name), 1)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["href"])) : (openBlock(), createElementBlock("span", _hoisted_19, toDisplayString(event.name), 1))
+                              ])
+                            ], 6);
+                          }), 128))
+                        ]);
+                      }), 128))
+                    ]))
+                  ], 64))
+                ]),
+                _: 2
+              }, 1032, ["value"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/events/OEventsCalendar.vue3.mjs

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