@opendesign-plus/components 0.0.1-rc.39 → 0.0.1-rc.40

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

@@ -0,0 +1,298 @@
+import { defineComponent, ref, computed, onMounted, nextTick, onUnmounted, resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createCommentVNode, normalizeStyle, 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 { useDebounceFn } from "@vueuse/core";
+const _hoisted_1 = { class: "header-nav-wrap" };
+const _hoisted_2 = {
+  key: 0,
+  class: "right-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 = ["onMouseenter"];
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = ["href", "target", "rel"];
+const _hoisted_15 = {
+  key: 1,
+  class: "right-icon"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderFlatten",
+  props: {
+    navData: {},
+    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 left = ref(0);
+    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, _c, _d;
+      if (((_a = navRef.value) == null ? void 0 : _a.clientWidth) < ((_b = navListRef.value) == null ? void 0 : _b.clientWidth)) {
+        left.value = ((_c = navListRef.value) == null ? void 0 : _c.clientWidth) - ((_d = navRef.value) == null ? void 0 : _d.clientWidth);
+        navVisibleRight.value = true;
+      } else {
+        navVisibleRight.value = false;
+      }
+    };
+    const beforeStyle = computed(() => ({
+      "--o-before-left": left.value ? `${left.value + 16}px` : void 0
+    }));
+    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 _component_IconOutlink = resolveComponent("IconOutlink");
+      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 }]),
+            style: normalizeStyle(beforeStyle.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;
+                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 ? (openBlock(), createBlock(unref(OTag), {
+                      key: 0,
+                      color: "danger",
+                      size: "small",
+                      round: "pill"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.tag), 1)
+                      ]),
+                      _: 2
+                    }, 1024)) : createCommentVNode("", true)
+                  ], 8, _hoisted_4)) : !((_b = item.children) == null ? void 0 : _b.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) || "_self",
+                    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) => {
+                          return openBlock(), createElementBlock("div", {
+                            key: index,
+                            onMouseenter: ($event) => _ctx.onMouseEnter(idx),
+                            onMouseleave: _cache[0] || (_cache[0] = //@ts-ignore
+                            (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args))
+                          }, [
+                            !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 ? (openBlock(), createBlock(unref(OTag), {
+                                key: 0,
+                                color: "danger",
+                                size: "small",
+                                round: "pill"
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(childTab.tag), 1)
+                                ]),
+                                _: 2
+                              }, 1024)) : createCommentVNode("", true)
+                            ], 10, _hoisted_13)) : 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) || "_self",
+                                rel: childTab.href.startsWith("http") ? "noopener noreferrer" : ""
+                              }, [
+                                createElementVNode("span", null, toDisplayString(childTab.label), 1),
+                                childTab.tag ? (openBlock(), createBlock(unref(OTag), {
+                                  key: 0,
+                                  color: "danger",
+                                  size: "small",
+                                  round: "pill"
+                                }, {
+                                  default: withCtx(() => [
+                                    createTextVNode(toDisplayString(childTab.tag), 1)
+                                  ]),
+                                  _: 2
+                                }, 1024)) : createCommentVNode("", true),
+                                childTab.jumpOut ? (openBlock(), createBlock(unref(OIcon), {
+                                  key: 1,
+                                  class: "jump-out-icon"
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode(_component_IconOutlink)
+                                  ]),
+                                  _: 1
+                                })) : createCommentVNode("", true)
+                              ], 8, _hoisted_14)
+                            ], 2)), [
+                              [_directive_analytics, () => onRedirect(childTab)]
+                            ])
+                          ], 40, _hoisted_12);
+                        }), 128))
+                      ])
+                    ])
+                  ]))
+                ], 42, _hoisted_3)), [
+                  [_directive_analytics, () => onNavHover(item), "mouseenter"]
+                ]);
+              }), 128))
+            ], 544)
+          ], 6),
+          navVisibleRight.value && !navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_15, [
+            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.css

@@ -1,50 +1,95 @@
-.hover-icon-rotate .o-icon[data-v-7e0de1ab] {
+.hover-icon-rotate .o-icon[data-v-e2459cc3] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-7e0de1ab] {
+.hover-icon-rotate:hover .o-icon[data-v-e2459cc3] {
     transform: rotate(-180deg);
 }
 }
-.header-nav-wrap[data-v-7e0de1ab] {
+.header-nav-wrap[data-v-e2459cc3] {
   height: 100%;
+  --nav-right: 64px;
 }
-.header-nav-wrap .header-nav[data-v-7e0de1ab] {
+@media (min-width: 1201px) and (max-width: 1680px) {
+.header-nav-wrap[data-v-e2459cc3] {
+    --nav-right: 48px;
+}
+}
+@media (max-width: 1200px) {
+.header-nav-wrap[data-v-e2459cc3] {
+    --nav-right: 32px;
+}
+}
+.header-nav-wrap .header-nav[data-v-e2459cc3] {
   height: 100%;
   display: flex;
   justify-content: space-between;
-  width: calc(100% - 64px);
+  width: calc(100% - var(--nav-right));
   align-items: center;
 }
-.header-nav-wrap .header-nav-scroll[data-v-7e0de1ab] {
-  width: calc(100% - 64px - 24px);
+.header-nav-wrap .header-nav-scroll[data-v-e2459cc3] {
+  width: calc(100% - var(--nav-right) - 24px);
 }
-.o-nav[data-v-7e0de1ab] {
+.o-nav[data-v-e2459cc3] {
+  --o-before-left: 0;
   height: 100%;
   position: relative;
   overflow-y: hidden;
   overflow-x: auto;
 }
-.o-nav[data-v-7e0de1ab]::after {
+.o-nav[data-v-e2459cc3]::after, .o-nav[data-v-e2459cc3]::before {
   content: "";
   position: absolute;
   width: 50px;
   height: 100%;
-  right: 0;
   top: 0;
+  z-index: 9;
+}
+.o-nav[data-v-e2459cc3]::after {
+  right: 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-7e0de1ab]::-webkit-scrollbar {
+.o-nav[data-v-e2459cc3]::before {
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 1) 0%, rgba(var(--o-grey-1), 0) 100%);
+  display: none;
+}
+.o-nav[data-v-e2459cc3]::-webkit-scrollbar {
   display: none;
 }
-[data-o-theme*=dark] .o-nav[data-v-7e0de1ab]::after {
+.right-icon[data-v-e2459cc3] {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--o-radius-xs);
+}
+.right-icon .o-icon[data-v-e2459cc3] {
+  --icon-size: 16px;
+}
+@media (hover: hover) {
+.right-icon[data-v-e2459cc3]:hover {
+    background-color: var(--o-color-control2-light);
+    color: var(--o-color-link2);
+}
+}
+.right-icon[data-v-e2459cc3]:active {
+  color: var(--o-color-link3);
+}
+[data-o-theme*=dark] .o-nav[data-v-e2459cc3]::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-7e0de1ab]::after {
+[data-o-theme*=dark] .o-nav[data-v-e2459cc3]::before {
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 1) 0%, rgba(var(--o-grey-4), 0) 100%);
+}
+.o-nav-scroll[data-v-e2459cc3]::after {
   display: none;
 }
-.o-nav-list[data-v-7e0de1ab] {
+.nav-left-arrow[data-v-e2459cc3]::before {
+  left: var(--o-before-left);
+  display: block;
+}
+.o-nav-list[data-v-e2459cc3] {
   display: flex;
   height: 100%;
   width: fit-content;
@@ -53,7 +98,7 @@
   padding: 0;
   margin: 0;
 }
-.o-nav-list li[data-v-7e0de1ab] {
+.o-nav-list li[data-v-e2459cc3] {
   position: relative;
   display: flex;
   align-items: center;
@@ -61,10 +106,10 @@
   color: var(--o-color-info1);
   transition: all var(--o-duration-s) var(--o-easing-standard);
 }
-.o-nav-list li .nav-text[data-v-7e0de1ab] {
+.o-nav-list li .nav-text[data-v-e2459cc3] {
   position: relative;
 }
-.o-nav-list li .nav-text[data-v-7e0de1ab]::after {
+.o-nav-list li .nav-text[data-v-e2459cc3]::after {
   content: "";
   position: absolute;
   left: 0;
@@ -76,16 +121,30 @@
   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-7e0de1ab], .o-nav-list li.is-active .nav-text[data-v-7e0de1ab] {
+@media (max-width: 1440px) {
+.o-nav-list li .nav-text[data-v-e2459cc3]::after {
+    bottom: -21px;
+}
+}
+@media (max-width: 1200px) {
+.o-nav-list li .nav-text[data-v-e2459cc3]::after {
+    bottom: -17px;
+}
+}
+.o-nav-list li.is-selected .nav-text[data-v-e2459cc3], .o-nav-list li.is-active .nav-text[data-v-e2459cc3] {
   color: var(--o-color-primary1);
   z-index: 99;
-  font-weight: 500;
+  font-weight: 600;
 }
-.o-nav-list li.is-selected .nav-text[data-v-7e0de1ab]::after, .o-nav-list li.is-active .nav-text[data-v-7e0de1ab]::after {
+.o-nav-list li.is-selected .nav-text[data-v-e2459cc3]::after, .o-nav-list li.is-active .nav-text[data-v-e2459cc3]::after {
   content: "";
   opacity: 1;
 }
-.o-nav-list .nav-item[data-v-7e0de1ab] {
+.o-nav-list li.is-disabled[data-v-e2459cc3] {
+  color: var(--o-color-info4);
+  pointer-events: none;
+}
+.o-nav-list .nav-item[data-v-e2459cc3] {
   cursor: default;
   display: flex;
   align-items: center;
@@ -94,48 +153,48 @@
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-nav-list .nav-item[data-v-7e0de1ab] {
+.o-nav-list .nav-item[data-v-e2459cc3] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-nav-list .nav-item[data-v-7e0de1ab] {
+.o-nav-list .nav-item[data-v-e2459cc3] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-nav-list .nav-item[data-v-7e0de1ab] {
+.o-nav-list .nav-item[data-v-e2459cc3] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.o-nav-list .nav-item[data-v-7e0de1ab] {
+.o-nav-list .nav-item[data-v-e2459cc3] {
     font-size: 12px;
     line-height: 18px;
 }
 }
-@media (min-width: 1201px) and (max-width: 1680px) {
-.o-nav-list .nav-item[data-v-7e0de1ab] {
-    padding: 22px 12px;
+@media (max-width: 1440px) {
+.o-nav-list .nav-item[data-v-e2459cc3] {
+    padding: 18px 12px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-nav-list .nav-item[data-v-7e0de1ab] {
-    padding: 22px 8px;
+.o-nav-list .nav-item[data-v-e2459cc3] {
+    padding: 14px 8px;
 }
 }
 @media (min-width: 841px) and (max-width: 1000px) {
-.o-nav-list .nav-item.en[data-v-7e0de1ab] {
+.o-nav-list .nav-item.en[data-v-e2459cc3] {
     padding: var(--o-gap-2);
 }
 }
-.o-nav-list .item-other[data-v-7e0de1ab] {
+.o-nav-list .item-other[data-v-e2459cc3] {
   cursor: pointer;
 }
-.o-nav-list .item-other .content-tag[data-v-7e0de1ab] {
+.o-nav-list .item-other .content-tag[data-v-e2459cc3] {
   margin-left: var(--o-gap-2);
   --layout-pkg-radius: var(--o-radius-xs);
 }

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

@@ -3,15 +3,18 @@ export interface OHeaderEmitsT {
     (e: 'handle-mouseenter', val: any): void;
     (e: 'handle-mouseleave', val: any): void;
     (e: 'handle-click', val: any): void;
+    (e: 'nav-layout', val: any): void;
 }
 declare const _default: import('vue').DefineComponent<NavLiT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "handle-mouseenter": (val: any) => any;
     "handle-mouseleave": (val: any) => any;
     "handle-click": (val: any) => any;
+    "nav-layout": (val: any) => any;
 }, string, import('vue').PublicProps, Readonly<NavLiT> & Readonly<{
     "onHandle-mouseenter"?: ((val: any) => any) | undefined;
     "onHandle-mouseleave"?: ((val: any) => any) | undefined;
     "onHandle-click"?: ((val: any) => any) | undefined;
+    "onNav-layout"?: ((val: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     navRef: HTMLDivElement;
     navListRef: HTMLUListElement;

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

@@ -1,7 +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-7e0de1ab"]]);
+const HeaderNav = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e2459cc3"]]);
 export {
   HeaderNav as default
 };

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, nextTick, onUnmounted, resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createCommentVNode, Fragment, renderList, withDirectives, toDisplayString, createBlock, createTextVNode } from "vue";
+import { defineComponent, ref, computed, onMounted, nextTick, onUnmounted, resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createCommentVNode, normalizeStyle, 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";
@@ -24,15 +24,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     activeIndex: {},
     hoverId: {}
   },
-  emits: ["handle-mouseenter", "handle-mouseleave", "handle-click"],
+  emits: ["handle-mouseenter", "handle-mouseleave", "handle-click", "nav-layout"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
     const navRef = ref();
     const navListRef = ref();
-    const resizeTimer = ref(null);
+    const resizeTimer = ref();
     const navVisibleRight = ref(false);
     const navVisibleLeft = ref(false);
+    const left = ref(0);
     const hoverIndex = ref();
     const toggleDebounced = useDebounceFn((item, id) => {
       hoverIndex.value = item == null ? void 0 : item.id;
@@ -64,13 +65,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       navVisibleLeft.value = false;
     };
     const calculateLayout = () => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       if (((_a = navRef.value) == null ? void 0 : _a.clientWidth) < ((_b = navListRef.value) == null ? void 0 : _b.clientWidth)) {
+        if (!navVisibleRight.value) {
+          emit("nav-layout", true);
+        }
+        left.value = ((_c = navListRef.value) == null ? void 0 : _c.clientWidth) - ((_d = navRef.value) == null ? void 0 : _d.clientWidth);
         navVisibleRight.value = true;
       } else {
+        if (navVisibleRight.value) {
+          emit("nav-layout", false);
+        }
         navVisibleRight.value = false;
       }
     };
+    const beforeStyle = computed(() => ({
+      "--o-before-left": left.value ? `${left.value + 16}px` : void 0
+    }));
     let hoverTime = 0;
     let steps = 0;
     const onHoverHeader = () => steps = 0;
@@ -130,7 +141,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             ref_key: "navRef",
             ref: navRef,
-            class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value }])
+            class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value, "nav-left-arrow": navVisibleLeft.value }]),
+            style: normalizeStyle(beforeStyle.value)
           }, [
             createElementVNode("ul", {
               ref_key: "navListRef",
@@ -144,7 +156,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: item.id,
                   class: normalizeClass({
                     "is-selected": hoverIndex.value === item.id || props.hoverId === item.id,
-                    "is-active": props.activeIndex === idx
+                    "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")
@@ -186,7 +199,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]);
               }), 128))
             ], 544)
-          ], 2),
+          ], 6),
           navVisibleRight.value && !navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
             createVNode(unref(OIcon), { onClick: scrollNavRight }, {
               default: withCtx(() => [