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

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

@@ -0,0 +1,228 @@
+import { defineComponent as P, ref as T, watch as z, openBlock as e, createElementBlock as o, unref as c, Fragment as _, renderList as y, createElementVNode as l, toDisplayString as i, createCommentVNode as M, createVNode as k, withCtx as m, createBlock as g, normalizeStyle as N, normalizeClass as V, mergeProps as F, createTextVNode as J, resolveDynamicComponent as $, withDirectives as H } from "vue";
+import { buildVueDompurifyHTMLDirective as U } from "vue-dompurify-html";
+import { OCollapse as W, OCollapseItem as j, OLink as O, OIcon as x, OIconChevronRight as R } from "@opensig/opendesign";
+import { useScreen as q } from "@opendesign-plus/composables";
+import { EVENTS_COLOR_MAP as G, EVENTS_ICON_MAP as K } from "./config.mjs";
+const Q = { class: "o-events-calendar" }, X = {
+  key: 0,
+  class: "month-list"
+}, Y = { class: "collapse-header" }, Z = { class: "collapse-title" }, ee = {
+  key: 0,
+  class: "collapse-desc"
+}, te = {
+  key: 0,
+  class: "month-content month-content-span"
+}, oe = {
+  key: 0,
+  class: "event-location"
+}, ne = { class: "event-name" }, ae = { key: 1 }, le = {
+  key: 0,
+  class: "month-content-row"
+}, se = { class: "month-name" }, re = { class: "event-name" }, ce = { class: "event-location" }, ie = { class: "event-name" }, de = { class: "event-location" }, ue = {
+  key: 1,
+  class: "month-content month-content-column"
+}, me = { class: "event-location" }, he = { class: "event-name" }, _e = { key: 1 }, ge = /* @__PURE__ */ P({
+  __name: "OEventsCalendar",
+  props: {
+    data: { default: () => [] }
+  },
+  setup(b) {
+    const S = U(), { lePadV: C } = q(), A = b, D = ["JAN", "FEB", "MAR", "Apr", "May", "JUN", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], v = T([]);
+    z(
+      [() => A.data, () => C.value],
+      () => {
+        var s;
+        A.data.length ? C.value ? v.value = [(s = A.data[0]) == null ? void 0 : s.name] : v.value = A.data.map((a) => a.name) : v.value = [];
+      },
+      {
+        immediate: !0
+      }
+    );
+    const f = (s) => {
+      const a = s.split("/");
+      return parseInt(a[1], 10);
+    }, I = (s) => {
+      const a = new Array(12).fill(0), t = [];
+      return s.forEach((d, r) => {
+        const [u, n] = Array.isArray(d.date) ? [f(d.date[0]), f(d.date[1])] : [f(d.date), f(d.date)];
+        let h = 0;
+        for (let p = u - 1; p < n; p++)
+          h = Math.max(h, a[p]);
+        const E = h + 1;
+        for (let p = u - 1; p < n; p++)
+          a[p] = E;
+        t.push({
+          event: d,
+          row: E,
+          eventIndex: r,
+          start: u,
+          end: n
+        });
+      }), t;
+    }, L = (s) => {
+      const a = Array.from({ length: 12 }, () => []);
+      return s.forEach((t) => {
+        const d = Array.isArray(t.date) ? f(t.date[0]) : f(t.date);
+        a[d - 1].push(t);
+      }), a;
+    }, w = (s) => {
+      const a = s.color || G[s.type];
+      return a != null && a.startsWith("--") ? `var(${a})` : a;
+    }, B = (s) => s.icon ? s.icon : K[s.type];
+    return (s, a) => (e(), o("div", Q, [
+      c(C) ? M("", !0) : (e(), o("div", X, [
+        (e(), o(_, null, y(D, (t) => l("div", {
+          class: "month-header",
+          key: t
+        }, i(t), 1)), 64))
+      ])),
+      k(c(W), {
+        modelValue: v.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (t) => v.value = t)
+      }, {
+        default: m(() => [
+          (e(!0), o(_, null, y(b.data, (t, d) => (e(), g(c(j), {
+            key: d,
+            value: t.name
+          }, {
+            title: m(() => [
+              l("div", Y, [
+                l("div", Z, [
+                  l("div", {
+                    class: "title-icon",
+                    style: N({
+                      "--bg-color": w(t)
+                    })
+                  }, [
+                    k(c(x), null, {
+                      default: m(() => [
+                        (e(), g($(B(t))))
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ], 4),
+                  l("span", null, i(t.name), 1)
+                ]),
+                t.desc ? (e(), o("div", ee, [
+                  H(l("div", null, null, 512), [
+                    [c(S), t.desc]
+                  ])
+                ])) : M("", !0)
+              ])
+            ]),
+            default: m(() => [
+              t.isSpanMonth ? (e(), o("div", te, [
+                (e(!0), o(_, null, y(I(t.data), ({ event: r, row: u, eventIndex: n, start: h, end: E }) => (e(), o("div", {
+                  key: n,
+                  class: V(["event-item", { "event-item-center": r.align === "center", "has-link": r.link }]),
+                  style: N({
+                    gridColumn: `${h} / ${E + 1}`,
+                    gridRow: u,
+                    "--bg-color": w(t) || void 0
+                  })
+                }, [
+                  r.location ? (e(), o("div", oe, i(r.location), 1)) : M("", !0),
+                  l("div", ne, [
+                    r.link ? (e(), g(c(O), F({
+                      key: 0,
+                      href: r.link,
+                      target: "_blank"
+                    }, { ref_for: !0 }, r.linkProps || {}), {
+                      default: m(() => [
+                        J(i(r.name), 1)
+                      ]),
+                      _: 2
+                    }, 1040, ["href"])) : (e(), o("span", ae, i(r.name), 1))
+                  ])
+                ], 6))), 128))
+              ])) : (e(), o(_, { key: 1 }, [
+                c(C) ? (e(), o("div", le, [
+                  (e(!0), o(_, null, y(L(t.data), (r, u) => (e(), o("div", {
+                    key: u,
+                    class: V(["month-row", {
+                      "empty-month": r.length === 0
+                    }])
+                  }, [
+                    l("div", se, i(D[u]), 1),
+                    (e(!0), o(_, null, y(r, (n, h) => (e(), o("div", {
+                      key: h,
+                      class: V(["event-item", n.link ? "has-link" : ""]),
+                      style: N({
+                        "--bd-color": w(t) || void 0
+                      })
+                    }, [
+                      n.link ? (e(), g(c(O), {
+                        key: 0,
+                        href: n.link,
+                        target: "_blank"
+                      }, {
+                        default: m(() => [
+                          l("div", null, [
+                            l("div", re, [
+                              l("span", null, i(n.name), 1)
+                            ]),
+                            l("div", ce, i(n.location), 1)
+                          ]),
+                          k(c(x), null, {
+                            default: m(() => [
+                              k(c(R))
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 2
+                      }, 1032, ["href"])) : (e(), o(_, { key: 1 }, [
+                        l("div", ie, i(n.name), 1),
+                        l("div", de, i(n.location), 1)
+                      ], 64))
+                    ], 6))), 128))
+                  ], 2))), 128))
+                ])) : (e(), o("div", ue, [
+                  (e(!0), o(_, null, y(L(t.data), (r, u) => (e(), o("div", {
+                    key: u,
+                    class: "month-column"
+                  }, [
+                    (e(!0), o(_, null, y(r, (n, h) => (e(), o("div", {
+                      key: h,
+                      class: V(["event-item", n.link ? "has-link" : ""]),
+                      style: N({
+                        "--bg-color": w(t) || void 0
+                      })
+                    }, [
+                      l("div", me, i(n.location), 1),
+                      l("div", he, [
+                        n.link ? (e(), g(c(O), {
+                          key: 0,
+                          href: n.link,
+                          target: "_blank"
+                        }, {
+                          suffix: m(() => [
+                            k(c(x), null, {
+                              default: m(() => [
+                                k(c(R))
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          default: m(() => [
+                            l("span", null, i(n.name), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["href"])) : (e(), o("span", _e, i(n.name), 1))
+                      ])
+                    ], 6))), 128))
+                  ]))), 128))
+                ]))
+              ], 64))
+            ]),
+            _: 2
+          }, 1032, ["value"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ]));
+  }
+});
+export {
+  ge as default
+};

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

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

package/dist/esm/components/events/OEventsList.css

@@ -0,0 +1,474 @@
+.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-events-list {
+  --events-card-radius: var(--o-radius-xs);
+  --events-tag-radius: var(--o-radius-xs);
+}
+.o-events-list .filter-slot-wrapper {
+  background-color: var(--o-color-fill2);
+  border-radius: var(--events-card-radius);
+  padding: var(--o-gap-5) var(--o-gap-6);
+  gap: var(--o-gap-3) var(--o-gap-2);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-4) var(--o-gap-5);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-4) var(--o-gap-5);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-3) var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-3) var(--o-gap-4);
+}
+}
+.o-events-list .filter-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.o-events-list .filter-wrapper .filter-left {
+  display: flex;
+  align-items: center;
+  gap: var(--o-gap-2);
+  flex-wrap: wrap;
+}
+.o-events-list .filter-wrapper .filter-left span:first-child {
+  flex-shrink: 0;
+  margin-right: var(--o-gap-5);
+  font-weight: 500;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-4);
+}
+}
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+  --toggle-size: 32px;
+  --toggle-padding: 3px 15px;
+  --toggle-radius: var(--events-tag-radius);
+  max-height: 32px;
+  --toggle-bg-color: var(--o-color-fill1);
+  --toggle-bg-color-hover: var(--o-color-control2-light);
+  --toggle-color: var(--o-color-info1);
+  --toggle-color-hover: var(--o-color-info1);
+  --toggle-color-active: var(--o-color-primary1);
+  --toggle-color-disabled: var(--o-color-info4);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-events-list .filter-wrapper .o-input .o-icon-search {
+  font-size: 24px;
+}
+@media (max-width: 840px) {
+.o-events-list .filter-wrapper .o-input .o-icon-search {
+    font-size: 16px;
+}
+}
+.o-events-list .list-content {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--o-gap-6);
+  margin-top: var(--o-gap-6);
+}
+@media (max-width: 840px) {
+.o-events-list .list-content {
+    grid-template-columns: repeat(1, 1fr);
+    container-type: inline-size;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-5);
+    gap: var(--o-gap-5);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-4);
+    gap: var(--o-gap-4);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-4);
+    gap: var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-4);
+    gap: var(--o-gap-3);
+}
+}
+.o-events-list .list-content .o-card {
+  aspect-ratio: 1/1;
+  position: relative;
+}
+@media (max-width: 840px) {
+.o-events-list .list-content .o-card {
+    aspect-ratio: 1/0.4;
+}
+}
+@container (max-width: 300px) {
+.o-events-list .list-content .o-card {
+    height: 140px;
+    width: 100%;
+    aspect-ratio: unset;
+}
+}
+.o-events-list .list-content .o-card .o-card-cover {
+  padding: 0;
+  height: 100%;
+}
+.o-events-list .list-content .o-card .o-card-main {
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.o-events-list .list-content .o-card .o-card-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--o-color-white);
+  text-align: center;
+  padding: var(--o-gap-6);
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content {
+    margin-top: var(--o-gap-4);
+}
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper {
+  position: absolute;
+  top: var(--o-gap-3);
+  right: var(--o-gap-3);
+  display: flex;
+  align-items: center;
+  column-gap: var(--o-gap-2);
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper {
+    top: var(--o-gap-2);
+    right: var(--o-gap-2);
+}
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag {
+  --tag-color: rgb(var(--o-white));
+  --tag-bg-color: rgba(var(--o-black), 0.25);
+  --tag-padding: var(--o-gap-1) var(--o-gap-3);
+  border: none;
+  border-radius: var(--events-tag-radius);
+}
+@media (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag {
+    --tag-padding: var(--o-gap-1);
+}
+}
+.o-events-list .list-content .o-card .o-card-content .event-name {
+  font-weight: 500;
+  text-align: center;
+  height: 3lh;
+  font-size: 24px;
+  line-height: 32px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.o-events-list .list-content .o-card .o-card-content .event-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 32px;
+    line-height: 44px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    height: 2lh;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+  text-align: center;
+  font-weight: 500;
+  margin-top: var(--o-gap-5);
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc .o-divider {
+  --o-divider-color: var(--o-color-info1-inverse);
+  --o-divider-bd-color: var(--o-color-info1-inverse);
+  display: none;
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-2);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-2);
+}
+}
+@media (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    display: flex;
+    align-items: center;
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc .o-divider {
+    display: block;
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 840px) and (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) and (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) and (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) and (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-events-list .list-content .event-card {
+  border-radius: var(--events-card-radius);
+  color: rgb(var(--o-white));
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.o-events-list .o-pagination {
+  margin-top: var(--o-gap-6);
+  --pagination-item-bg-color-current: var(--o-color-primary1);
+  --pagination-item-color-current: #fff;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-5);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-4);
+}
+}
+.o-events-list .o-pagination .o-pagination-wrap {
+  justify-content: flex-end;
+}