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

package/dist/esm/components/header/components/HeaderContent.vue.mjs

@@ -0,0 +1,7 @@
+import o from "./HeaderContent.vue2.mjs";
+import './HeaderContent.css';
+import t from "../../../_plugin-vue_export-helper.mjs";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a2219e83"]]);
+export {
+  m as default
+};

package/dist/esm/components/header/components/HeaderContent.vue2.mjs

@@ -0,0 +1,191 @@
+import { defineComponent as J, ref as S, resolveDirective as K, openBlock as t, createElementBlock as n, normalizeClass as U, unref as c, createElementVNode as o, normalizeStyle as $, createVNode as E, withCtx as v, Fragment as g, renderList as h, toDisplayString as i, withDirectives as p, createBlock as _, resolveDynamicComponent as O, createCommentVNode as d, createTextVNode as X } from "vue";
+import { OScroller as Y, OIcon as T, OTag as Z } from "@opensig/opendesign";
+import I from "../../common/ContentWrapper.vue.mjs";
+import { useLocale as ee, useTheme as te } from "@opendesign-plus/composables";
+const ne = { class: "nav-sub-content" }, le = { class: "content-left" }, ae = { class: "content-label" }, re = { class: "content-container" }, oe = ["href", "target"], se = { class: "item-name" }, ie = {
+  key: 0,
+  class: "desc-container"
+}, ce = ["title"], de = {
+  key: 0,
+  class: "split-line"
+}, ve = {
+  key: 1,
+  class: "content-right"
+}, _e = { class: "content-label" }, ue = ["href", "target"], ge = ["href", "target"], he = ["src"], fe = { class: "review-content" }, me = { class: "review-label" }, pe = { class: "review-property" }, we = /* @__PURE__ */ J({
+  __name: "HeaderContent",
+  props: {
+    itemData: {},
+    itemVisible: { type: Boolean },
+    community: {},
+    bgLeft: {},
+    bgRight: {},
+    hoverIndex: {}
+  },
+  emits: ["handle-mouseenter-sub", "handle-mouseleave-sub"],
+  setup(Q, { emit: R }) {
+    const k = R, l = Q, { locale: f } = ee(), { theme: F } = te(), m = S(!1), P = () => {
+      var a;
+      k("handle-mouseenter-sub", (a = l.itemData) == null ? void 0 : a.id), m.value = !0;
+    }, W = () => {
+      k("handle-mouseenter-sub", ""), m.value = !1;
+    }, y = S(!1), j = (a) => {
+      if (!a || !a.target)
+        return;
+      const s = a.target;
+      y.value = s.clientHeight < s.scrollHeight;
+    }, q = (a, s) => ({
+      properties: {
+        module: "navigation",
+        level1: a.label,
+        level2: s.label,
+        target: s.label,
+        url: a.href
+      }
+    }), b = (a) => ({
+      properties: {
+        module: "navigation",
+        level1: f.value === "zh" ? "快捷链接" : "Quick Link",
+        level2: a.label,
+        target: a.label,
+        url: a.href
+      }
+    });
+    return (a, s) => {
+      var D, w, C;
+      const u = K("analytics");
+      return t(), n("div", {
+        onMouseenter: P,
+        onMouseleave: W
+      }, [
+        (l.itemVisible || m.value) && ((w = (D = l.itemData) == null ? void 0 : D.children) != null && w.length) ? (t(), n("div", {
+          key: 0,
+          class: U(["nav-content", [(C = l.community) == null ? void 0 : C.toLowerCase(), l.hoverIndex, c(F), `${l.hoverIndex}-${c(f)}`]])
+        }, [
+          o("div", {
+            class: "nav-background-left",
+            style: $({ backgroundImage: `url(${l.bgLeft})` })
+          }, null, 4),
+          o("div", {
+            class: "nav-background-right",
+            style: $({ backgroundImage: `url(${l.bgRight})` })
+          }, null, 4),
+          E(I, null, {
+            default: v(() => [
+              E(c(Y), {
+                class: "nav-scroller",
+                "show-type": "always",
+                size: "small",
+                "disabled-y": ""
+              }, {
+                default: v(() => {
+                  var L, x, V, z, M, N, B, H;
+                  return [
+                    o("div", ne, [
+                      o("div", le, [
+                        (t(!0), n(g, null, h((L = l.itemData) == null ? void 0 : L.children, (e, A) => (t(), n("div", {
+                          class: "item-sub",
+                          key: A
+                        }, [
+                          o("span", ae, i(e.label), 1),
+                          o("div", re, [
+                            (t(!0), n(g, null, h(e.children, (r) => (t(), n("div", {
+                              key: r.label,
+                              class: "content-item"
+                            }, [
+                              p((t(), n("a", {
+                                href: r.href,
+                                target: (r == null ? void 0 : r.target) || "_self",
+                                rel: "noopener noreferrer",
+                                class: "item-label"
+                              }, [
+                                o("span", se, i(r.label), 1),
+                                r.icon ? (t(), _(c(T), { key: 0 }, {
+                                  default: v(() => [
+                                    (t(), _(O(r.icon)))
+                                  ]),
+                                  _: 2
+                                }, 1024)) : d("", !0),
+                                r.tag ? (t(), _(c(Z), {
+                                  key: 1,
+                                  round: "pill",
+                                  color: "danger",
+                                  size: "small",
+                                  class: "content-tag"
+                                }, {
+                                  default: v(() => [
+                                    X(i(r.tag), 1)
+                                  ]),
+                                  _: 2
+                                }, 1024)) : d("", !0)
+                              ], 8, oe)), [
+                                [u, () => q(e, r)]
+                              ]),
+                              r.description ? (t(), n("div", ie, [
+                                o("p", {
+                                  class: "item-desc",
+                                  title: y.value ? r.description : void 0,
+                                  onMouseenter: s[0] || (s[0] = (G) => j(G))
+                                }, i(r.description), 41, ce)
+                              ])) : d("", !0)
+                            ]))), 128))
+                          ])
+                        ]))), 128))
+                      ]),
+                      (V = (x = l.itemData) == null ? void 0 : x.shortcut) != null && V.length ? (t(), n("div", de)) : d("", !0),
+                      (M = (z = l.itemData) == null ? void 0 : z.shortcut) != null && M.length ? (t(), n("div", ve, [
+                        o("span", _e, i(c(f) === "zh" ? "快捷链接" : "Quick Link"), 1),
+                        (N = l.itemData) != null && N.withPicture ? (t(!0), n(g, { key: 1 }, h((H = l.itemData) == null ? void 0 : H.shortcut, (e) => p((t(), n("a", {
+                          key: e.label,
+                          href: e.href,
+                          target: (e == null ? void 0 : e.target) || "_self",
+                          rel: "noopener noreferrer",
+                          class: "review"
+                        }, [
+                          o("img", {
+                            src: e.picture,
+                            class: "review-picture"
+                          }, null, 8, he),
+                          o("div", fe, [
+                            o("p", me, i(e.label), 1),
+                            o("div", pe, i(e.remark), 1)
+                          ])
+                        ], 8, ge)), [
+                          [u, () => b(e)]
+                        ])), 128)) : (t(!0), n(g, { key: 0 }, h((B = l.itemData) == null ? void 0 : B.shortcut, (e) => (t(), n("div", {
+                          key: e.label,
+                          class: "shortcut"
+                        }, [
+                          p((t(), n("a", {
+                            href: e.href,
+                            target: (e == null ? void 0 : e.target) || "_self",
+                            rel: "noopener noreferrer",
+                            class: "shortcut-link"
+                          }, [
+                            o("span", null, i(e.label), 1),
+                            e.icon ? (t(), _(c(T), { key: 0 }, {
+                              default: v(() => [
+                                (t(), _(O(e.icon)))
+                              ]),
+                              _: 2
+                            }, 1024)) : d("", !0)
+                          ], 8, ue)), [
+                            [u, () => b(e)]
+                          ])
+                        ]))), 128))
+                      ])) : d("", !0)
+                    ])
+                  ];
+                }),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ], 2)) : d("", !0)
+      ], 32);
+    };
+  }
+});
+export {
+  we as default
+};

package/dist/esm/components/header/components/HeaderNav.css

@@ -0,0 +1,141 @@
+.hover-icon-rotate .o-icon[data-v-fe042238] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-fe042238] {
+    transform: rotate(-180deg);
+}
+}
+.header-nav-wrap[data-v-fe042238] {
+  height: 100%;
+}
+.header-nav-wrap .header-nav[data-v-fe042238] {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 64px);
+  align-items: center;
+}
+.header-nav-wrap .header-nav-scroll[data-v-fe042238] {
+  width: calc(100% - 64px - 24px);
+}
+.o-nav[data-v-fe042238] {
+  height: 100%;
+  position: relative;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+.o-nav[data-v-fe042238]::after {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: 100%;
+  right: 0;
+  top: 0;
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
+  z-index: 0;
+}
+.o-nav[data-v-fe042238]::-webkit-scrollbar {
+  display: none;
+}
+.o-nav.dark[data-v-fe042238]::after {
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 100%);
+}
+.o-nav-scroll[data-v-fe042238]::after {
+  display: none;
+}
+.o-nav-list[data-v-fe042238] {
+  display: flex;
+  height: 100%;
+  width: fit-content;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  padding: 0;
+  margin: 0;
+}
+.o-nav-list li[data-v-fe042238] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  color: var(--o-color-info1);
+  transition: all var(--o-duration-s) var(--o-easing-standard);
+}
+.o-nav-list li .nav-text[data-v-fe042238] {
+  position: relative;
+}
+.o-nav-list li .nav-text[data-v-fe042238]::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  bottom: -24px;
+  width: 100%;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--o-color-primary1);
+  transition: all var(--o-duration-s) var(--o-easing-standard);
+}
+.o-nav-list li.is-selected .nav-text[data-v-fe042238], .o-nav-list li.is-active .nav-text[data-v-fe042238] {
+  color: var(--o-color-primary1);
+  z-index: 99;
+  font-weight: 500;
+}
+.o-nav-list li.is-selected .nav-text[data-v-fe042238]::after, .o-nav-list li.is-active .nav-text[data-v-fe042238]::after {
+  content: "";
+  opacity: 1;
+}
+.o-nav-list .nav-item[data-v-fe042238] {
+  cursor: default;
+  display: flex;
+  align-items: center;
+  padding: 22px var(--o-gap-4);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    padding: 22px 12px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    padding: 22px 8px;
+}
+}
+@media (min-width: 841px) and (max-width: 1000px) {
+.o-nav-list .nav-item.en[data-v-fe042238] {
+    padding: var(--o-gap-2);
+}
+}
+.o-nav-list .item-other[data-v-fe042238] {
+  cursor: pointer;
+}
+.o-nav-list .item-other .content-tag[data-v-fe042238] {
+  margin-left: var(--o-gap-2);
+  --layout-pkg-radius: var(--o-radius-xs);
+}

package/dist/esm/components/header/components/HeaderNav.vue.mjs

@@ -0,0 +1,7 @@
+import o from "./HeaderNav.vue2.mjs";
+import './HeaderNav.css';
+import r from "../../../_plugin-vue_export-helper.mjs";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-fe042238"]]);
+export {
+  f as default
+};

package/dist/esm/components/header/components/HeaderNav.vue2.mjs

@@ -0,0 +1,157 @@
+import { defineComponent as O, ref as r, onMounted as S, nextTick as L, onUnmounted as U, resolveDirective as j, openBlock as t, createElementBlock as l, createElementVNode as v, normalizeClass as k, createVNode as h, unref as a, withCtx as m, createCommentVNode as p, Fragment as q, renderList as A, withDirectives as G, toDisplayString as g, createBlock as J, createTextVNode as K } from "vue";
+import { OIcon as R, OTag as P } from "@opensig/opendesign";
+import Q from "../../../icons/icon-caret-left.mjs";
+import X from "../../../icons/icon-caret-right.mjs";
+import { useTheme as Y } from "@opendesign-plus/composables";
+import { useDebounceFn as Z } from "@vueuse/core";
+const ee = { class: "header-nav-wrap" }, oe = {
+  key: 0,
+  class: "right-icon"
+}, te = ["onMouseenter", "onMouseleave"], ae = ["id"], ne = { class: "nav-text" }, le = ["id", "onClick"], se = { class: "nav-text" }, re = {
+  key: 1,
+  class: "right-icon"
+}, fe = /* @__PURE__ */ O({
+  __name: "HeaderNav",
+  props: {
+    navData: {},
+    activeIndex: {},
+    hoverId: {}
+  },
+  emits: ["handle-mouseenter", "handle-mouseleave", "handle-click"],
+  setup(b, { emit: M }) {
+    const f = M, { isDark: V } = Y(), y = b, c = r(), C = r(), N = r(null), d = r(!1), s = r(!1), _ = r(), x = Z((e, n) => {
+      _.value = e == null ? void 0 : e.id, n === "mouseenter" && f("handle-mouseenter", e), n === "mouseleave" && (_.value = "", f("handle-mouseleave", e));
+    }, 100), z = (e) => {
+      f("handle-click", e);
+    }, B = () => {
+      s.value = !0, L(() => {
+        c.value.scrollTo({
+          left: c.value.clientWidth,
+          behavior: "smooth"
+        });
+      });
+    }, E = () => {
+      c.value.scrollTo({
+        left: 0,
+        behavior: "smooth"
+      }), s.value = !1;
+    }, u = () => {
+      var e, n;
+      ((e = c.value) == null ? void 0 : e.clientWidth) < ((n = C.value) == null ? void 0 : n.clientWidth) ? d.value = !0 : d.value = !1;
+    };
+    let D = 0, i = 0;
+    const H = () => i = 0, W = (e) => i > 0 ? void i++ : (i++, D = Date.now(), {
+      event: "hover",
+      properties: {
+        module: "navigation",
+        level1: e,
+        target: e
+      }
+    }), $ = (e) => ({
+      properties: {
+        module: "navigation",
+        level1: e.label,
+        target: e.label,
+        steps: i,
+        url: e.href,
+        duration: Date.now() - D
+      }
+    });
+    return S(() => {
+      window.addEventListener("resize", u), L(() => {
+        u(), N.value = setTimeout(() => {
+          u();
+        }, 1e3);
+      });
+    }), U(() => {
+      window.removeEventListener("resize", u), clearTimeout(N.value);
+    }), (e, n) => {
+      const T = j("analytics");
+      return t(), l("div", ee, [
+        v("div", {
+          class: k(["header-nav", { "header-nav-scroll": s.value }])
+        }, [
+          s.value ? (t(), l("div", oe, [
+            h(a(R), { onClick: E }, {
+              default: m(() => [
+                h(a(Q))
+              ]),
+              _: 1
+            })
+          ])) : p("", !0),
+          v("div", {
+            ref_key: "navRef",
+            ref: c,
+            class: k(["o-nav", { "o-nav-scroll": s.value || !d.value, dark: a(V) }])
+          }, [
+            v("ul", {
+              ref_key: "navListRef",
+              ref: C,
+              class: "o-nav-list",
+              onMouseenter: H
+            }, [
+              (t(!0), l(q, null, A(b.navData, (o, F) => {
+                var w;
+                return G((t(), l("li", {
+                  key: o.id,
+                  class: k({
+                    "is-selected": _.value === o.id || y.hoverId === o.id,
+                    "is-active": y.activeIndex === F
+                  }),
+                  onMouseenter: (I) => a(x)(o, "mouseenter"),
+                  onMouseleave: (I) => a(x)(o, "mouseleave")
+                }, [
+                  (w = o == null ? void 0 : o.children) != null && w.length ? (t(), l("div", {
+                    key: 0,
+                    id: "tour_headerNav_" + o.id,
+                    class: "nav-item"
+                  }, [
+                    v("span", ne, g(o.label), 1)
+                  ], 8, ae)) : (t(), l("div", {
+                    key: 1,
+                    id: "tour_headerNav_" + o.id,
+                    class: "nav-item item-other",
+                    onClick: (I) => z(o)
+                  }, [
+                    v("span", se, g(o.label), 1),
+                    o.tag ? (t(), J(a(P), {
+                      key: 0,
+                      round: "pill",
+                      color: "danger",
+                      size: "small",
+                      class: "content-tag"
+                    }, {
+                      default: m(() => [
+                        K(g(o.tag), 1)
+                      ]),
+                      _: 2
+                    }, 1024)) : p("", !0)
+                  ], 8, le))
+                ], 42, te)), [
+                  [T, W(o.label), "mouseenter"],
+                  [
+                    T,
+                    $(o),
+                    void 0,
+                    { catchBubble: !0 }
+                  ]
+                ]);
+              }), 128))
+            ], 544)
+          ], 2),
+          d.value && !s.value ? (t(), l("div", re, [
+            h(a(R), { onClick: B }, {
+              default: m(() => [
+                h(a(X))
+              ]),
+              _: 1
+            })
+          ])) : p("", !0)
+        ], 2)
+      ]);
+    };
+  }
+});
+export {
+  fe as default
+};