@opendesign-plus/components 0.0.1-rc.102 → 0.0.1-rc.103

package/dist/treeshaking/components/header/components/HeaderFlatten.vue2.mjs

@@ -0,0 +1,288 @@
+import { defineComponent, ref, onMounted, nextTick, onUnmounted, resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createCommentVNode, Fragment, renderList, withDirectives, toDisplayString, createBlock, createTextVNode, resolveDynamicComponent } from "vue";
+import { OIcon, OTag } from "@opensig/opendesign";
+import IconCaretLeft from "../../../_virtual/icon-caret-left.mjs";
+import IconCaretRight from "../../../_virtual/icon-caret-right.mjs";
+import { isTagExpired } from "../utils.mjs";
+import { useDebounceFn } from "@vueuse/core";
+const _hoisted_1 = { class: "header-nav-wrap" };
+const _hoisted_2 = {
+  key: 0,
+  class: "left-icon"
+};
+const _hoisted_3 = ["id", "onMouseenter", "onMouseleave"];
+const _hoisted_4 = ["id", "onClick"];
+const _hoisted_5 = { class: "nav-text" };
+const _hoisted_6 = ["id", "href", "target", "rel"];
+const _hoisted_7 = { class: "nav-text" };
+const _hoisted_8 = {
+  key: 2,
+  class: "nav-item"
+};
+const _hoisted_9 = { class: "nav-text" };
+const _hoisted_10 = { class: "dropdown-wrapper" };
+const _hoisted_11 = { class: "dropdown-body" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = ["href", "target", "rel"];
+const _hoisted_14 = {
+  key: 1,
+  class: "right-icon"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderFlatten",
+  props: {
+    navData: {},
+    community: {},
+    activeIndex: {},
+    hoverId: {}
+  },
+  emits: ["handle-mouseenter", "handle-mouseleave", "handle-click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const hoverIndex = ref();
+    const toggleDebounced = useDebounceFn((item, id) => {
+      hoverIndex.value = item == null ? void 0 : item.id;
+      if (id === "mouseenter") {
+        emit("handle-mouseenter", item);
+      }
+      if (id === "mouseleave") {
+        hoverIndex.value = "";
+        emit("handle-mouseleave", item);
+      }
+    }, 100);
+    const handleClick = (item) => {
+      emit("handle-click", item);
+    };
+    const navRef = ref();
+    const navListRef = ref();
+    const resizeTimer = ref();
+    const navVisibleRight = ref(false);
+    const navVisibleLeft = ref(false);
+    const scrollNavRight = () => {
+      navVisibleLeft.value = true;
+      nextTick(() => {
+        navRef.value.scrollTo({
+          left: navRef.value.clientWidth,
+          behavior: "smooth"
+        });
+      });
+    };
+    const scrollNavLeft = () => {
+      navRef.value.scrollTo({
+        left: 0,
+        behavior: "smooth"
+      });
+      navVisibleLeft.value = false;
+    };
+    const calculateLayout = () => {
+      var _a, _b;
+      if (((_a = navRef.value) == null ? void 0 : _a.clientWidth) < ((_b = navListRef.value) == null ? void 0 : _b.clientWidth)) {
+        navVisibleRight.value = true;
+      } else {
+        navVisibleRight.value = false;
+      }
+    };
+    let lastHoverTime = 0;
+    let steps = 0;
+    const onRedirect = (navItem) => {
+      const timeUsed = Date.now() - lastHoverTime;
+      const _steps = steps + 1;
+      lastHoverTime = 0;
+      steps = 0;
+      if (navItem._path) {
+        const levels = {};
+        navItem._path.forEach((name, idx) => {
+          levels[`level${idx + 1}`] = name;
+        });
+        return {
+          properties: {
+            module: "navigation",
+            timeUsed,
+            steps: _steps,
+            ...levels
+          }
+        };
+      }
+    };
+    const onNavHover = (navItem) => {
+      steps++;
+      if (lastHoverTime) {
+        return;
+      }
+      lastHoverTime = Date.now();
+      return {
+        event: "hover",
+        properties: {
+          module: "navigation",
+          target: navItem.label
+        }
+      };
+    };
+    const onCancelNav = () => {
+      lastHoverTime = 0;
+      steps = 0;
+    };
+    onMounted(() => {
+      window.addEventListener("resize", calculateLayout);
+      nextTick(() => {
+        calculateLayout();
+        resizeTimer.value = setTimeout(() => {
+          calculateLayout();
+        }, 1e3);
+      });
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", calculateLayout);
+      clearTimeout(resizeTimer.value);
+    });
+    return (_ctx, _cache) => {
+      const _directive_analytics = resolveDirective("analytics");
+      return openBlock(), createElementBlock("nav", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass(["header-nav", { "header-nav-scroll": navVisibleLeft.value }])
+        }, [
+          navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createVNode(unref(OIcon), { onClick: scrollNavLeft }, {
+              default: withCtx(() => [
+                createVNode(unref(IconCaretLeft))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            ref_key: "navRef",
+            ref: navRef,
+            class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value }])
+          }, [
+            createElementVNode("ul", {
+              ref_key: "navListRef",
+              ref: navListRef,
+              class: "nav-list",
+              onMouseleave: onCancelNav
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.navData, (item, idx) => {
+                var _a, _b, _c, _d;
+                return withDirectives((openBlock(), createElementBlock("li", {
+                  key: item.id,
+                  id: item.id,
+                  class: normalizeClass(["nav-item-li", {
+                    "is-selected": hoverIndex.value === item.id || props.hoverId === item.id,
+                    "is-active": props.activeIndex === idx || props.activeIndex === item.id,
+                    "is-disabled": item == null ? void 0 : item.disabled
+                  }]),
+                  onMouseenter: ($event) => unref(toggleDebounced)(item, "mouseenter"),
+                  onMouseleave: ($event) => unref(toggleDebounced)(item, "mouseleave")
+                }, [
+                  !item.href && !((_a = item.children) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    id: "tour_headerNav_" + item.id,
+                    class: "nav-item",
+                    onClick: ($event) => handleClick(item)
+                  }, [
+                    createElementVNode("span", _hoisted_5, toDisplayString(item.label), 1),
+                    item.tag && !unref(isTagExpired)(item.tagExpire) ? (openBlock(), createBlock(unref(OTag), {
+                      key: 0,
+                      color: "danger",
+                      size: "small",
+                      round: "pill",
+                      class: normalizeClass(`tag-${(_b = item == null ? void 0 : item.tag) == null ? void 0 : _b.toLowerCase()}`)
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.tag), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["class"])) : createCommentVNode("", true)
+                  ], 8, _hoisted_4)) : !((_c = item.children) == null ? void 0 : _c.length) && item.href ? (openBlock(), createElementBlock("a", {
+                    key: 1,
+                    id: "tour_headerNav_" + item.id,
+                    class: "nav-item nav-item-link",
+                    href: item.href,
+                    target: (item == null ? void 0 : item.target) || (((_d = item.href) == null ? void 0 : _d.startsWith("http")) ? "_blank" : void 0),
+                    rel: item.href.startsWith("http") ? "noopener noreferrer" : ""
+                  }, [
+                    createElementVNode("span", _hoisted_7, toDisplayString(item.label), 1)
+                  ], 8, _hoisted_6)) : (openBlock(), createElementBlock("div", _hoisted_8, [
+                    createElementVNode("span", _hoisted_9, toDisplayString(item.label), 1),
+                    createElementVNode("div", _hoisted_10, [
+                      createElementVNode("div", _hoisted_11, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (childTab, index) => {
+                          var _a2, _b2, _c2;
+                          return openBlock(), createElementBlock("div", { key: index }, [
+                            !childTab.href ? (openBlock(), createElementBlock("div", {
+                              key: 0,
+                              class: normalizeClass(["dropdown-item", { "dropdown-item-disabled": childTab == null ? void 0 : childTab.disabled }]),
+                              onClick: ($event) => handleClick(childTab)
+                            }, [
+                              createElementVNode("span", null, toDisplayString(childTab.label), 1),
+                              childTab.tag && !unref(isTagExpired)(childTab.tagExpire) ? (openBlock(), createBlock(unref(OTag), {
+                                key: 0,
+                                color: "danger",
+                                size: "small",
+                                round: "pill",
+                                class: normalizeClass(`tag-${(_a2 = childTab == null ? void 0 : childTab.tag) == null ? void 0 : _a2.toLowerCase()}`)
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(childTab.tag), 1)
+                                ]),
+                                _: 2
+                              }, 1032, ["class"])) : createCommentVNode("", true)
+                            ], 10, _hoisted_12)) : withDirectives((openBlock(), createElementBlock("div", {
+                              key: 1,
+                              class: normalizeClass(["dropdown-item", { "dropdown-item-disabled": childTab == null ? void 0 : childTab.disabled }])
+                            }, [
+                              createElementVNode("a", {
+                                href: childTab.href,
+                                class: "dropdown-link",
+                                target: (childTab == null ? void 0 : childTab.target) || (((_b2 = childTab.href) == null ? void 0 : _b2.startsWith("http")) ? "_blank" : void 0),
+                                rel: childTab.href.startsWith("http") ? "noopener noreferrer" : ""
+                              }, [
+                                createElementVNode("span", null, toDisplayString(childTab.label), 1),
+                                childTab.icon ? (openBlock(), createBlock(unref(OIcon), { key: 0 }, {
+                                  default: withCtx(() => [
+                                    (openBlock(), createBlock(resolveDynamicComponent(childTab.icon)))
+                                  ]),
+                                  _: 2
+                                }, 1024)) : createCommentVNode("", true),
+                                childTab.tag && !unref(isTagExpired)(childTab.tagExpire) ? (openBlock(), createBlock(unref(OTag), {
+                                  key: 1,
+                                  color: "danger",
+                                  size: "small",
+                                  round: "pill",
+                                  class: normalizeClass(`tag-${(_c2 = childTab == null ? void 0 : childTab.tag) == null ? void 0 : _c2.toLowerCase()}`)
+                                }, {
+                                  default: withCtx(() => [
+                                    createTextVNode(toDisplayString(childTab.tag), 1)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["class"])) : createCommentVNode("", true)
+                              ], 8, _hoisted_13)
+                            ], 2)), [
+                              [_directive_analytics, () => onRedirect(childTab)]
+                            ])
+                          ]);
+                        }), 128))
+                      ])
+                    ])
+                  ]))
+                ], 42, _hoisted_3)), [
+                  [_directive_analytics, () => onNavHover(item), "mouseenter"]
+                ]);
+              }), 128))
+            ], 544)
+          ], 2),
+          navVisibleRight.value && !navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_14, [
+            createVNode(unref(OIcon), { onClick: scrollNavRight }, {
+              default: withCtx(() => [
+                createVNode(unref(IconCaretRight))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true)
+        ], 2)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

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

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

@@ -0,0 +1,244 @@
+import { defineComponent, ref, inject, resolveDirective, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, createCommentVNode, normalizeClass, Fragment, renderList, withDirectives, toDisplayString, createBlock, createTextVNode } from "vue";
+import { OIcon, OTag } from "@opensig/opendesign";
+import IconCaretLeft from "../../../_virtual/icon-caret-left.mjs";
+import IconCaretRight from "../../../_virtual/icon-caret-right.mjs";
+import { isTagExpired } from "../utils.mjs";
+import { useDebounceFn, useElementSize, watchDebounced, useIntersectionObserver } from "@vueuse/core";
+const _hoisted_1 = { class: "header-nav-wrap" };
+const _hoisted_2 = {
+  key: 0,
+  class: "left-icon"
+};
+const _hoisted_3 = ["onMouseenter", "onMouseleave"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = { class: "nav-text" };
+const _hoisted_6 = ["id", "onClick"];
+const _hoisted_7 = { class: "nav-text" };
+const _hoisted_8 = {
+  key: 1,
+  class: "right-icon"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderNav",
+  props: {
+    navData: {},
+    community: {},
+    activeIndex: {},
+    hoverId: {}
+  },
+  emits: ["handle-mouseenter", "handle-mouseleave", "handle-click", "nav-layout"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const navRef = ref();
+    const navVisibleRight = ref(false);
+    const navVisibleLeft = ref(false);
+    const hoverIndex = ref();
+    const toggleDebounced = useDebounceFn((item, id) => {
+      hoverIndex.value = item == null ? void 0 : item.id;
+      if (id === "mouseenter") {
+        emit("handle-mouseenter", item);
+      }
+      if (id === "mouseleave") {
+        hoverIndex.value = "";
+        emit("handle-mouseleave", item);
+      }
+    }, 100);
+    const handleClick = (item) => {
+      emit("handle-click", item);
+    };
+    const headerNavRef = ref();
+    const navListRef = ref();
+    const { width: headerNavWidth } = useElementSize(headerNavRef);
+    const { width: navListWidth } = useElementSize(navListRef);
+    const headerUserFullWidth = inject("headerUserFullWidth");
+    const isSearchHidden = inject("isSearchHidden");
+    const shrinkUserOrSearch = inject("shrinkUserOrSearch");
+    const expandUser = inject("expandUser");
+    const expandSearch = inject("expandSearch");
+    watchDebounced(
+      () => Math.floor(headerNavWidth.value - navListWidth.value),
+      (diffWidth) => {
+        if (diffWidth <= 0) {
+          shrinkUserOrSearch == null ? void 0 : shrinkUserOrSearch();
+          return;
+        }
+        if (diffWidth > 161 && (isSearchHidden == null ? void 0 : isSearchHidden.value)) {
+          expandSearch == null ? void 0 : expandSearch();
+          return;
+        }
+        if ((headerUserFullWidth == null ? void 0 : headerUserFullWidth.value) && diffWidth > headerUserFullWidth.value) {
+          expandUser == null ? void 0 : expandUser();
+        }
+      },
+      { debounce: 100, immediate: true }
+    );
+    const navStartRef = ref();
+    const navEndRef = ref();
+    const scrollNavRight = () => {
+      navRef.value.scrollTo({
+        left: navRef.value.clientWidth,
+        behavior: "smooth"
+      });
+    };
+    const scrollNavLeft = () => {
+      navRef.value.scrollTo({
+        left: 0,
+        behavior: "smooth"
+      });
+    };
+    let hasEmittedOverflow = false;
+    useIntersectionObserver(
+      [navStartRef, navEndRef],
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.target === navStartRef.value) {
+            navVisibleLeft.value = !entry.isIntersecting;
+          }
+          if (entry.target === navEndRef.value) {
+            navVisibleRight.value = !entry.isIntersecting;
+          }
+        });
+        const hasOverflow = navVisibleLeft.value || navVisibleRight.value;
+        if (hasOverflow !== hasEmittedOverflow) {
+          hasEmittedOverflow = hasOverflow;
+          emit("nav-layout", hasOverflow);
+        }
+      },
+      {
+        root: navRef,
+        threshold: 0
+      }
+    );
+    const navFirstHoverTime = inject("navFirstHoverTime");
+    const navStepCount = inject("navStepCount");
+    const increNavStepCount = inject("increNavStepCount");
+    const updateNavFirstHoverTime = inject("updateNavFirstHoverTime");
+    const clearNavHandleTrace = inject("clearNavHandleTrace");
+    const onHoverHeader = () => clearNavHandleTrace == null ? void 0 : clearNavHandleTrace();
+    const onHoverNav = (name) => {
+      updateNavFirstHoverTime == null ? void 0 : updateNavFirstHoverTime();
+      increNavStepCount == null ? void 0 : increNavStepCount();
+      return {
+        event: "hover",
+        properties: {
+          module: "navigation",
+          level1: name,
+          target: name
+        }
+      };
+    };
+    const onClickNavItem = (item) => {
+      const res = {
+        properties: {
+          module: "navigation",
+          level1: item.label,
+          target: item.label,
+          ...navStepCount && { steps: navStepCount.value },
+          url: item.href,
+          ...(navFirstHoverTime == null ? void 0 : navFirstHoverTime.value) && { duration: Date.now() - navFirstHoverTime.value }
+        }
+      };
+      return res;
+    };
+    return (_ctx, _cache) => {
+      var _a;
+      const _directive_analytics = resolveDirective("analytics");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          ref_key: "headerNavRef",
+          ref: headerNavRef,
+          class: "header-nav"
+        }, [
+          navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createVNode(unref(OIcon), { onClick: scrollNavLeft }, {
+              default: withCtx(() => [
+                createVNode(unref(IconCaretLeft))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            ref_key: "navRef",
+            ref: navRef,
+            class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value }])
+          }, [
+            createElementVNode("ul", {
+              ref_key: "navListRef",
+              ref: navListRef,
+              class: normalizeClass(["o-nav-list", [(_a = props.community) == null ? void 0 : _a.toLowerCase()]]),
+              onMouseenter: onHoverHeader
+            }, [
+              createElementVNode("li", {
+                ref_key: "navStartRef",
+                ref: navStartRef,
+                class: "nav-sentinel",
+                "aria-hidden": "true"
+              }, null, 512),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.navData, (item, idx) => {
+                var _a2, _b;
+                return withDirectives((openBlock(), createElementBlock("li", {
+                  key: item.id,
+                  class: normalizeClass({
+                    "is-selected": hoverIndex.value === item.id || props.hoverId === item.id,
+                    "is-active": props.activeIndex === idx || props.activeIndex === item.id,
+                    "is-disabled": item == null ? void 0 : item.disabled
+                  }),
+                  onMouseenter: ($event) => unref(toggleDebounced)(item, "mouseenter"),
+                  onMouseleave: ($event) => unref(toggleDebounced)(item, "mouseleave")
+                }, [
+                  ((_a2 = item == null ? void 0 : item.children) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    id: "tour_headerNav_" + item.id,
+                    class: "nav-item"
+                  }, [
+                    createElementVNode("span", _hoisted_5, toDisplayString(item.label), 1)
+                  ], 8, _hoisted_4)) : (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    id: "tour_headerNav_" + item.id,
+                    class: "nav-item item-other",
+                    onClick: ($event) => handleClick(item)
+                  }, [
+                    createElementVNode("span", _hoisted_7, toDisplayString(item.label), 1),
+                    item.tag && !unref(isTagExpired)(item.tagExpire) ? (openBlock(), createBlock(unref(OTag), {
+                      key: 0,
+                      color: "danger",
+                      size: "small",
+                      round: "pill",
+                      class: normalizeClass(["content-tag", `tag-${(_b = item == null ? void 0 : item.tag) == null ? void 0 : _b.toLowerCase()}`])
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.tag), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["class"])) : createCommentVNode("", true)
+                  ], 8, _hoisted_6))
+                ], 42, _hoisted_3)), [
+                  [_directive_analytics, () => onHoverNav(item.label), "mouseenter"],
+                  [_directive_analytics, () => onClickNavItem(item)]
+                ]);
+              }), 128)),
+              createElementVNode("li", {
+                ref_key: "navEndRef",
+                ref: navEndRef,
+                class: "nav-sentinel",
+                "aria-hidden": "true"
+              }, null, 512)
+            ], 34)
+          ], 2),
+          navVisibleRight.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
+            createVNode(unref(OIcon), { onClick: scrollNavRight }, {
+              default: withCtx(() => [
+                createVNode(unref(IconCaretRight))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true)
+        ], 512)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/header/components/HeaderNavMobile.vue.d.ts

@@ -22,7 +22,7 @@ declare const __VLS_component: import('vue').DefineComponent<NavMobileItemT, {},
     "onOn-click"?: (() => any) | undefined;
     "onLang-click"?: ((val: LangItemT) => any) | undefined;
 }>, {
-    navData: import('../../../index.ts').NavItemT[];
+    navData: import('../types.ts').NavItemT[];
     menuShow: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/treeshaking/components/header/components/HeaderNavMobile.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./HeaderNavMobile.vue2.mjs";
+import './HeaderNavMobile.css';
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const HeaderNavMobile = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5c72051b"]]);
+export {
+  HeaderNavMobile as default
+};