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

package/dist/esm/components/cookie-notice/OCookieNotice.vue2.mjs

@@ -0,0 +1,253 @@
+import { defineComponent as J, computed as w, ref as O, onMounted as W, watch as q, openBlock as u, createBlock as U, withCtx as r, Teleport as Q, unref as e, createElementBlock as b, createElementVNode as o, normalizeClass as X, Fragment as ee, createVNode as d, createTextVNode as f, toDisplayString as n, createCommentVNode as $, nextTick as oe } from "vue";
+import te from "../common/ClientOnly.vue.mjs";
+import { useScreen as ie } from "@opendesign-plus/composables";
+import { useI18n as le } from "../../i18n/index.mjs";
+import { OIcon as T, OIconClose as ne, OButton as z, ODialog as ae, OSwitch as se } from "@opensig/opendesign";
+import { useVModel as ce } from "@vueuse/core";
+const re = { class: "cookie-notice-content" }, de = ["type"], ue = { class: "cookie-title" }, me = {
+  style: { transform: "rotate(180deg)" },
+  xmlns: "http://www.w3.org/2000/svg",
+  version: "1.1",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+}, ve = {
+  class: "cookie-zh-title",
+  style: { "margin-top": "0" }
+}, ke = ["href"], pe = {
+  key: 1,
+  class: "cookie-en-title"
+}, fe = {
+  key: 0,
+  class: "cookie-en-content"
+}, _e = { class: "cookie-en-desc" }, he = ["href"], ge = { class: "cookie-notice-right" }, ye = { class: "cookie-dlg-title" }, Ce = { class: "cookie-dlg-content" }, be = { class: "content-item" }, we = { class: "item-header" }, xe = { class: "item-title" }, Ae = { class: "item-extra" }, De = { class: "item-detail" }, Ee = { class: "content-item" }, Ve = { class: "item-header" }, Ne = { class: "item-title" }, Oe = { class: "item-extra" }, ze = { class: "item-detail" }, Ie = "0", B = "1", Re = "2", x = "3", Se = "agreed-cookiepolicy-zh", Ue = "agreed-cookiepolicy-en", Le = /* @__PURE__ */ J({
+  __name: "OCookieNotice",
+  props: {
+    visible: { type: Boolean },
+    community: {},
+    detailUrl: {},
+    wrapper: {},
+    cookieDomain: {}
+  },
+  emits: ["update:visible"],
+  setup(_, { expose: G, emit: M }) {
+    const m = _, K = M, { lePadV: L, leLaptop: P, isPhone: Y } = ie(), { locale: A, t: i } = le(), v = w(() => A.value === "zh"), D = O(), E = w(() => D.value ? !!getComputedStyle(D.value).getPropertyValue("--grid-content-width") : !1), a = w(() => v.value ? Se : Ue), s = O(!1), k = ce(m, "visible", K, { defaultValue: !1 }), h = (l) => {
+      const t = document.cookie.split(";").find((c) => c.split("=")[0].trim() === encodeURIComponent(l));
+      return t ? decodeURIComponent(t.split("=")[1]) : null;
+    }, V = (l, t, c, Z) => {
+      const F = `; max-age=${c * 24 * 60 * 60}`;
+      document.cookie = `${encodeURIComponent(l)}=${encodeURIComponent(t)}${F}; path=/; domain=${Z}`;
+    }, I = (l, t) => {
+      document.cookie = `${encodeURIComponent(l)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=${t}`;
+    }, p = (l) => {
+      typeof l == "boolean" ? k.value = l : k.value = !k.value, oe(() => {
+        !k.value && v.value && h(a.value) !== x && V(a.value, x, 180, m.cookieDomain ?? location.hostname);
+      });
+    }, g = O(!1), y = (l) => {
+      typeof l == "boolean" ? g.value = l : g.value = !g.value;
+    }, R = () => v.value ? h(a.value) !== x : (h(a.value) ?? "0") === Ie, S = () => v.value ? h(a.value) === x : h(a.value) === B;
+    W(() => {
+      R() && p(!0);
+    }), q(A, () => {
+      p(R());
+    });
+    const C = () => {
+      s.value = !0, I(a.value, m.cookieDomain ?? location.hostname), V(a.value, B, 180, m.cookieDomain ?? location.hostname), p(!1);
+    }, N = () => {
+      s.value = !1, I(a.value, m.cookieDomain ?? location.hostname), V(a.value, Re, 180, m.cookieDomain ?? location.hostname), p(!1);
+    }, j = w(() => Y.value ? [
+      {
+        id: "save",
+        label: i("cookie.saveSetting"),
+        variant: "text",
+        onClick: () => {
+          s.value ? C() : N(), y(!1);
+        }
+      },
+      {
+        id: "allowAll",
+        label: i("cookie.acceptAll"),
+        variant: "text",
+        onClick: () => {
+          s.value = !0, C(), y(!1);
+        }
+      }
+    ] : [
+      {
+        id: "save",
+        color: "primary",
+        label: i("cookie.saveSetting"),
+        variant: "outline",
+        size: "medium",
+        round: "pill",
+        onClick: () => {
+          s.value ? C() : N(), y(!1);
+        }
+      },
+      {
+        id: "allowAll",
+        color: "primary",
+        label: i("cookie.acceptAll"),
+        variant: "outline",
+        size: "medium",
+        round: "pill",
+        onClick: () => {
+          s.value = !0, C(), y(!1);
+        }
+      }
+    ]), H = (l) => {
+      l && (s.value = S());
+    };
+    return G({
+      check() {
+        S() === k.value && p();
+      }
+    }), (l, t) => (u(), U(te, null, {
+      default: r(() => [
+        (u(), U(Q, {
+          to: _.wrapper || "#app"
+        }, [
+          e(k) ? (u(), b("div", {
+            key: 0,
+            ref_key: "cookieNoticeRef",
+            ref: D,
+            class: "cookie-notice"
+          }, [
+            o("div", re, [
+              o("div", {
+                type: e(A),
+                class: X({ "cookie-notice-wrap-grid": E.value, "cookie-notice-wrap": !E.value })
+              }, [
+                o("div", ue, [
+                  v.value ? (u(), b(ee, { key: 0 }, [
+                    d(e(T), { style: { display: "inline-block", "font-size": "24px", "margin-right": "4px" } }, {
+                      default: r(() => [
+                        (u(), b("svg", me, [...t[4] || (t[4] = [
+                          o("path", {
+                            fill: "#002fa7",
+                            d: "M21 12c0 4.971-4.029 9-9 9s-9-4.029-9-9c0-4.971 4.029-9 9-9s9 4.029 9 9z"
+                          }, null, -1),
+                          o("path", {
+                            fill: "#fff",
+                            d: "M12 9.4c0.552 0 1-0.448 1-1s-0.448-1-1-1c-0.552 0-1 0.448-1 1s0.448 1 1 1zM12.492 10.943c-0.042-0.233-0.246-0.41-0.492-0.41-0.276 0-0.5 0.224-0.5 0.5v5.5l0.008 0.090c0.042 0.233 0.246 0.41 0.492 0.41 0.276 0 0.5-0.224 0.5-0.5v-5.5l-0.008-0.090z"
+                          }, null, -1)
+                        ])]))
+                      ]),
+                      _: 1
+                    }),
+                    o("p", ve, [
+                      f(n(e(i)("cookie.desc")) + " ", 1),
+                      o("a", {
+                        href: _.detailUrl,
+                        target: "_blank",
+                        rel: "noopener noreferrer"
+                      }, n(e(i)("cookie.about")), 9, ke)
+                    ])
+                  ], 64)) : (u(), b("p", pe, n(e(i)("cookie.title", [_.community])), 1)),
+                  d(e(T), {
+                    class: "cookie-notice-close",
+                    onClick: t[0] || (t[0] = (c) => p(!1))
+                  }, {
+                    default: r(() => [
+                      d(e(ne))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                v.value ? $("", !0) : (u(), b("div", fe, [
+                  o("p", _e, [
+                    f(n(e(i)("cookie.desc")) + " ", 1),
+                    o("a", {
+                      href: _.detailUrl,
+                      target: "_blank",
+                      rel: "noopener noreferrer"
+                    }, n(e(i)("cookie.about")), 9, he),
+                    t[5] || (t[5] = f(". ", -1))
+                  ]),
+                  o("div", ge, [
+                    d(e(z), {
+                      round: "pill",
+                      variant: "outline",
+                      color: "primary",
+                      onClick: C
+                    }, {
+                      default: r(() => [
+                        f(n(e(i)("cookie.acceptAll")), 1)
+                      ]),
+                      _: 1
+                    }),
+                    d(e(z), {
+                      round: "pill",
+                      variant: "outline",
+                      color: "primary",
+                      onClick: N
+                    }, {
+                      default: r(() => [
+                        f(n(e(i)("cookie.rejectAll")), 1)
+                      ]),
+                      _: 1
+                    }),
+                    d(e(z), {
+                      round: "pill",
+                      variant: "outline",
+                      color: "primary",
+                      onClick: t[1] || (t[1] = (c) => y(!0))
+                    }, {
+                      default: r(() => [
+                        f(n(e(i)("cookie.manage")), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]))
+              ], 10, de)
+            ]),
+            d(e(ae), {
+              visible: g.value,
+              "onUpdate:visible": t[3] || (t[3] = (c) => g.value = c),
+              size: e(P) ? "medium" : "large",
+              "phone-half-full": e(L),
+              "main-class": E.value ? "o-cookie-notice-dlg-main" : "",
+              class: "cookie-dlg",
+              actions: j.value,
+              onChange: H,
+              style: { "--dlg-radius": "4px" }
+            }, {
+              header: r(() => [
+                o("span", ye, n(e(i)("cookie.manage")), 1)
+              ]),
+              default: r(() => [
+                o("div", Ce, [
+                  o("div", be, [
+                    o("div", we, [
+                      o("span", xe, n(e(i)("cookie.necessaryCookie")), 1),
+                      o("span", Ae, n(e(i)("cookie.alwaysOn")), 1)
+                    ]),
+                    o("div", De, n(e(i)("cookie.necessaryCookieDetail")), 1)
+                  ]),
+                  o("div", Ee, [
+                    o("div", Ve, [
+                      o("span", Ne, n(e(i)("cookie.analyticalCookie")), 1),
+                      o("span", Oe, [
+                        d(e(se), {
+                          modelValue: s.value,
+                          "onUpdate:modelValue": t[2] || (t[2] = (c) => s.value = c)
+                        }, null, 8, ["modelValue"])
+                      ])
+                    ]),
+                    o("div", ze, n(e(i)("cookie.analyticalCookieDetail")), 1)
+                  ])
+                ])
+              ]),
+              _: 1
+            }, 8, ["visible", "size", "phone-half-full", "main-class", "actions"])
+          ], 512)) : $("", !0)
+        ], 8, ["to"]))
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  Le as default
+};

package/dist/esm/components/cookie-notice/OCookieNotice2.css

@@ -0,0 +1,309 @@
+.hover-icon-rotate .o-icon[data-v-b731c798] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-b731c798] {
+    transform: rotate(-180deg);
+}
+}
+.o-btn[data-v-b731c798] {
+  --btn-bd-color-hover: var(--o-color-primary2);
+  --btn-bd-color-active: var(--o-color-primary3);
+  --btn-color-hover: var(--o-color-primary2);
+  --btn-color-active: var(--o-color-primary3);
+  --btn-bg-color-hover: transparent;
+  --btn-bg-color-active: transparent;
+}
+.cookie-notice[data-v-b731c798] {
+  position: fixed;
+  bottom: 0;
+  z-index: 999;
+  width: 100%;
+}
+.cookie-notice .o-button[data-v-b731c798] {
+  --o-button-font-size-mini: 14px;
+}
+.cookie-notice .o-button + .o-button[data-v-b731c798] {
+  margin-left: 16px;
+}
+@media (max-width: 840px) {
+.cookie-notice .o-button + .o-button[data-v-b731c798] {
+    margin-left: 0;
+    margin-top: 12px;
+}
+}
+.cookie-notice-content[data-v-b731c798] {
+  background-color: rgba(var(--o-grey-1), 0.9);
+  backdrop-filter: blur(5px);
+  box-shadow: var(--o-shadow-1);
+}
+.cookie-notice-wrap[data-v-b731c798] {
+  position: relative;
+  margin: 0 auto;
+  padding: 16px var(--layout-content-padding);
+  max-width: var(--layout-content-max-width);
+}
+@media (1680px >= width >= 1201px) {
+.cookie-notice-wrap[data-v-b731c798] {
+    padding: 12px var(--layout-content-padding);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.cookie-notice-wrap[data-v-b731c798] {
+    padding: 8px var(--layout-content-padding);
+}
+}
+@media (max-width: 840px) {
+.cookie-notice-wrap[data-v-b731c798] {
+    padding: 16px var(--layout-content-padding);
+}
+}
+@media (max-width: 600px) {
+.cookie-notice-wrap[data-v-b731c798] {
+    padding: 16px var(--layout-content-padding);
+}
+}
+@media (max-width: 840px) {
+.cookie-notice-wrap[data-v-b731c798]:not([type=zh]) {
+    flex-direction: column;
+}
+}
+.cookie-notice-wrap-grid[data-v-b731c798] {
+  width: var(--grid-content-width);
+  padding: 16px 0;
+  margin: 0 auto;
+}
+@media (1680px >= width >= 1201px) {
+.cookie-notice-wrap-grid[data-v-b731c798] {
+    padding: 12px 0;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.cookie-notice-wrap-grid[data-v-b731c798] {
+    padding: 8px 0;
+}
+}
+@media (max-width: 840px) {
+.cookie-notice-wrap-grid[data-v-b731c798] {
+    padding: 16px 0;
+}
+}
+@media (max-width: 600px) {
+.cookie-notice-wrap-grid[data-v-b731c798] {
+    padding: 16px 0;
+}
+}
+@media (max-width: 840px) {
+.cookie-notice-wrap-grid[data-v-b731c798]:not([type=zh]) {
+    padding: 16px 0;
+    flex-direction: column;
+}
+}
+.cookie-title[data-v-b731c798] {
+  display: flex;
+  font-size: 16px;
+  line-height: calc(1em + 8px);
+  color: var(--o-color-info1);
+  font-weight: 500;
+}
+@media (max-width: 1680px) {
+.cookie-title[data-v-b731c798] {
+    font-size: 14px;
+}
+}
+@media (max-width: 840px) {
+.cookie-title[data-v-b731c798] {
+    text-align: center;
+}
+}
+@media (max-width: 840px) {
+.cookie-en-title[data-v-b731c798] {
+    margin-left: auto;
+}
+}
+.cookie-zh-title[data-v-b731c798] {
+  font-size: 14px;
+  line-height: 22px;
+  margin-right: 8px;
+  text-align: start;
+}
+@media (max-width: 840px) {
+.cookie-zh-title[data-v-b731c798] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.cookie-en-content[data-v-b731c798] {
+  display: flex;
+  width: 100%;
+  margin-top: 8px;
+}
+@media (max-width: 840px) {
+.cookie-en-content[data-v-b731c798] {
+    flex-direction: column;
+}
+}
+.cookie-en-desc[data-v-b731c798] {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--o-color-info2);
+}
+@media (min-width: 1681px) {
+.cookie-en-desc[data-v-b731c798] {
+    margin-right: 48px;
+}
+}
+@media (1680px >= width >= 1201px) {
+.cookie-en-desc[data-v-b731c798] {
+    margin-right: 40px;
+}
+}
+@media (min-width: 601px) and (max-width: 1200px) {
+.cookie-en-desc[data-v-b731c798] {
+    margin-right: 24px;
+}
+}
+@media (max-width: 840px) {
+.cookie-en-desc[data-v-b731c798] {
+    margin: 0;
+}
+}
+.cookie-notice-right[data-v-b731c798] {
+  display: flex;
+  margin-left: auto;
+}
+.cookie-notice-right .o-btn[data-v-b731c798]:not(:first-child) {
+  margin-left: 16px;
+}
+@media (1680px >= width >= 1201px) {
+.cookie-notice-right .o-btn[data-v-b731c798]:not(:first-child) {
+    margin-left: 12px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.cookie-notice-right .o-btn[data-v-b731c798]:not(:first-child) {
+    margin-left: 8px;
+}
+}
+@media (min-width: 841px) {
+.cookie-notice-right .o-btn[data-v-b731c798]:not(:first-child) {
+    margin-left: 12px;
+}
+}
+@media (max-width: 840px) {
+.cookie-notice-right[data-v-b731c798] {
+    margin-top: 16px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    gap: 12px;
+}
+.cookie-notice-right .o-btn[data-v-b731c798] {
+    margin: 0;
+}
+.cookie-notice-right .o-btn[data-v-b731c798]:nth-child(1) {
+    grid-column: 1;
+    grid-row: 1;
+}
+.cookie-notice-right .o-btn[data-v-b731c798]:nth-child(2) {
+    grid-column: 2;
+    grid-row: 1;
+}
+.cookie-notice-right .o-btn[data-v-b731c798]:nth-child(3) {
+    grid-column: 1/span 2;
+    grid-row: 2;
+}
+}
+.cookie-notice-close[data-v-b731c798] {
+  display: block;
+  overflow: visible !important;
+  margin-left: auto;
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 24px;
+}
+.cookie-notice-close[data-v-b731c798]:hover {
+  color: var(--o-color-primary2);
+}
+.cookie-notice-close[data-v-b731c798] {
+  overflow: hidden;
+}
+.cookie-notice-close svg[data-v-b731c798] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.cookie-notice-close:hover svg[data-v-b731c798] {
+    transform: rotate(180deg);
+}
+}
+.cookie-dlg-content .content-item + .content-item[data-v-b731c798] {
+  margin-top: 24px;
+}
+@media (1680px >= width >= 1201px) {
+.cookie-dlg-content .content-item + .content-item[data-v-b731c798] {
+    margin-top: 16px;
+}
+}
+@media (max-width: 1200px) {
+.cookie-dlg-content .content-item + .content-item[data-v-b731c798] {
+    margin-top: 12px;
+}
+}
+.cookie-dlg-content .content-item .item-header[data-v-b731c798] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cookie-dlg-content .content-item .item-header .item-title[data-v-b731c798] {
+  font-size: 20px;
+  line-height: calc(1em + 8px);
+  color: var(--o-color-info1);
+  font-weight: 500;
+}
+@media (1680px >= width >= 1201px) {
+.cookie-dlg-content .content-item .item-header .item-title[data-v-b731c798] {
+    font-size: 18px;
+}
+}
+@media (max-width: 1200px) {
+.cookie-dlg-content .content-item .item-header .item-title[data-v-b731c798] {
+    font-size: 16px;
+}
+}
+.cookie-dlg-content .content-item .item-header .item-extra[data-v-b731c798] {
+  font-size: 14px;
+  color: var(--o-color-info3);
+  margin-left: 24px;
+}
+@media (max-width: 1200px) {
+.cookie-dlg-content .content-item .item-header .item-extra[data-v-b731c798] {
+    font-size: 12px;
+}
+}
+.cookie-dlg-content .content-item .item-detail[data-v-b731c798] {
+  font-size: 16px;
+  line-height: calc(1em + 8px);
+  color: var(--o-color-info2);
+  margin-top: 16px;
+}
+@media (max-width: 1680px) {
+.cookie-dlg-content .content-item .item-detail[data-v-b731c798] {
+    margin-top: 12px;
+    font-size: 14px;
+}
+}
+@media (max-width: 1200px) {
+.cookie-dlg-content .content-item .item-detail[data-v-b731c798] {
+    margin-top: 8px;
+}
+}
+@media (max-width: 840px) {
+.cookie-dlg-content .content-item .item-detail[data-v-b731c798] {
+    margin-top: 8px;
+}
+}
+.cookie-dlg-content .content-item:nth-child(2) .item-detail[data-v-b731c798] {
+  font-size: 16px !important;
+  line-height: calc(1em + 8px);
+}

package/dist/esm/components/cookie-notice/index.mjs

@@ -0,0 +1,9 @@
+import o from "./OCookieNotice.vue.mjs";
+const t = Object.assign(o, {
+  install(e) {
+    e.component("OCookieNotice", o);
+  }
+});
+export {
+  t as OCookieNotice
+};