@opendesign-plus-test/components 0.0.1-rc.165 → 0.0.1-rc.167

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

@@ -1,77 +1,73 @@
-.hover-icon-rotate .o-icon[data-v-2c2c1736] {
+.hover-icon-rotate .o-icon[data-v-00cffd0d] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-2c2c1736] {
+.hover-icon-rotate:hover .o-icon[data-v-00cffd0d] {
     transform: rotate(-180deg);
 }
 }
-.header-nav-wrap[data-v-2c2c1736] {
+.header-nav-wrap[data-v-00cffd0d] {
   height: 100%;
   --nav-right: 64px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.header-nav-wrap[data-v-2c2c1736] {
+.header-nav-wrap[data-v-00cffd0d] {
     --nav-right: 48px;
 }
 }
 @media (max-width: 1200px) {
-.header-nav-wrap[data-v-2c2c1736] {
+.header-nav-wrap[data-v-00cffd0d] {
     --nav-right: 32px;
 }
 }
-.header-nav-wrap .header-nav[data-v-2c2c1736] {
-  position: relative;
+.header-nav-wrap .header-nav[data-v-00cffd0d] {
   height: 100%;
   display: flex;
   justify-content: space-between;
   width: calc(100% - var(--nav-right));
   align-items: center;
 }
-.o-nav[data-v-2c2c1736] {
+.header-nav-wrap .header-nav-scroll[data-v-00cffd0d] {
+  width: calc(100% - var(--nav-right) - 24px);
+}
+.o-nav[data-v-00cffd0d] {
   height: 100%;
   position: relative;
   overflow-y: hidden;
   overflow-x: auto;
   z-index: 8;
 }
-.o-nav[data-v-2c2c1736]::-webkit-scrollbar {
+.o-nav[data-v-00cffd0d]::-webkit-scrollbar {
   display: none;
 }
-.left-icon[data-v-2c2c1736],
-.right-icon[data-v-2c2c1736] {
+.left-icon[data-v-00cffd0d],
+.right-icon[data-v-00cffd0d] {
   display: flex;
-  background-color: var(--o-color-fill2);
   align-items: center;
   cursor: pointer;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
+  position: relative;
   width: 16px;
-  height: 100%;
+  height: 16px;
+  border-radius: var(--o-radius-xs);
 }
-.left-icon .o-icon[data-v-2c2c1736],
-.right-icon .o-icon[data-v-2c2c1736] {
+.left-icon .o-icon[data-v-00cffd0d],
+.right-icon .o-icon[data-v-00cffd0d] {
   --icon-size: 16px;
   position: relative;
   z-index: 11;
 }
 @media (hover: hover) {
-.left-icon[data-v-2c2c1736]:hover,
-  .right-icon[data-v-2c2c1736]:hover {
+.left-icon[data-v-00cffd0d]:hover,
+  .right-icon[data-v-00cffd0d]:hover {
     background-color: var(--o-color-control2-light);
     color: var(--o-color-link2);
 }
 }
-.left-icon[data-v-2c2c1736]:active,
-.right-icon[data-v-2c2c1736]:active {
+.left-icon[data-v-00cffd0d]:active,
+.right-icon[data-v-00cffd0d]:active {
   color: var(--o-color-link3);
 }
-.left-icon[data-v-2c2c1736] {
-  left: 0;
-}
-.left-icon[data-v-2c2c1736]::before {
+.left-icon[data-v-00cffd0d]::before {
   content: "";
   position: absolute;
   width: 50px;
@@ -83,19 +79,16 @@
   cursor: default;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.left-icon[data-v-2c2c1736]::before {
+.left-icon[data-v-00cffd0d]::before {
     top: -24px;
 }
 }
 @media (max-width: 1200px) {
-.left-icon[data-v-2c2c1736]::before {
+.left-icon[data-v-00cffd0d]::before {
     top: -20px;
 }
 }
-.right-icon[data-v-2c2c1736] {
-  right: 0;
-}
-.right-icon[data-v-2c2c1736]::before {
+.right-icon[data-v-00cffd0d]::before {
   content: "";
   position: absolute;
   width: 50px;
@@ -107,25 +100,25 @@
   cursor: default;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.right-icon[data-v-2c2c1736]::before {
+.right-icon[data-v-00cffd0d]::before {
     top: -24px;
 }
 }
 @media (max-width: 1200px) {
-.right-icon[data-v-2c2c1736]::before {
+.right-icon[data-v-00cffd0d]::before {
     top: -20px;
 }
 }
-[data-o-theme*=dark] .left-icon[data-v-2c2c1736]::before {
+[data-o-theme*=dark] .left-icon[data-v-00cffd0d]::before {
   background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 1) 0%, rgba(var(--o-grey-4), 0) 100%);
 }
-[data-o-theme*=dark] .right-icon[data-v-2c2c1736]::before {
+[data-o-theme*=dark] .right-icon[data-v-00cffd0d]::before {
   background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 100%);
 }
-.o-nav-scroll[data-v-2c2c1736]::after {
+.o-nav-scroll[data-v-00cffd0d]::after {
   display: none;
 }
-.o-nav-list[data-v-2c2c1736] {
+.o-nav-list[data-v-00cffd0d] {
   display: flex;
   height: 100%;
   width: fit-content;
@@ -134,13 +127,7 @@
   padding: 0;
   margin: 0;
 }
-.o-nav-list .nav-sentinel[data-v-2c2c1736] {
-  flex: 0 0 2px;
-  width: 2px;
-  padding: 0;
-  pointer-events: none;
-}
-.o-nav-list li[data-v-2c2c1736] {
+.o-nav-list li[data-v-00cffd0d] {
   position: relative;
   display: flex;
   align-items: center;
@@ -148,10 +135,10 @@
   color: var(--o-color-info1);
   transition: all var(--o-duration-s) var(--o-easing-standard);
 }
-.o-nav-list li .nav-text[data-v-2c2c1736] {
+.o-nav-list li .nav-text[data-v-00cffd0d] {
   position: relative;
 }
-.o-nav-list li .nav-text[data-v-2c2c1736]::after {
+.o-nav-list li .nav-text[data-v-00cffd0d]::after {
   content: "";
   position: absolute;
   left: 0;
@@ -164,32 +151,32 @@
   transition: all var(--o-duration-s) var(--o-easing-standard);
 }
 @media (max-width: 1440px) {
-.o-nav-list li .nav-text[data-v-2c2c1736]::after {
+.o-nav-list li .nav-text[data-v-00cffd0d]::after {
     bottom: -21px;
 }
 }
 @media (max-width: 1200px) {
-.o-nav-list li .nav-text[data-v-2c2c1736]::after {
+.o-nav-list li .nav-text[data-v-00cffd0d]::after {
     bottom: -17px;
 }
 }
-.o-nav-list li.is-selected .nav-text[data-v-2c2c1736] {
+.o-nav-list li.is-selected .nav-text[data-v-00cffd0d] {
   color: var(--o-color-primary2);
 }
-.o-nav-list li.is-active .nav-text[data-v-2c2c1736] {
+.o-nav-list li.is-active .nav-text[data-v-00cffd0d] {
   color: var(--o-color-primary1);
   z-index: 99;
   font-weight: 600;
 }
-.o-nav-list li.is-active .nav-text[data-v-2c2c1736]::after {
+.o-nav-list li.is-active .nav-text[data-v-00cffd0d]::after {
   content: "";
   opacity: 1;
 }
-.o-nav-list li.is-disabled[data-v-2c2c1736] {
+.o-nav-list li.is-disabled[data-v-00cffd0d] {
   color: var(--o-color-info4);
   pointer-events: none;
 }
-.o-nav-list .nav-item[data-v-2c2c1736] {
+.o-nav-list .nav-item[data-v-00cffd0d] {
   cursor: default;
   display: flex;
   align-items: center;
@@ -198,60 +185,60 @@
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-nav-list .nav-item[data-v-2c2c1736] {
+.o-nav-list .nav-item[data-v-00cffd0d] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-nav-list .nav-item[data-v-2c2c1736] {
+.o-nav-list .nav-item[data-v-00cffd0d] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-nav-list .nav-item[data-v-2c2c1736] {
+.o-nav-list .nav-item[data-v-00cffd0d] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.o-nav-list .nav-item[data-v-2c2c1736] {
+.o-nav-list .nav-item[data-v-00cffd0d] {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 1440px) {
-.o-nav-list .nav-item[data-v-2c2c1736] {
+.o-nav-list .nav-item[data-v-00cffd0d] {
     padding: 18px 12px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-nav-list .nav-item[data-v-2c2c1736] {
+.o-nav-list .nav-item[data-v-00cffd0d] {
     padding: 14px 8px;
 }
 }
 @media (min-width: 841px) and (max-width: 1000px) {
-.o-nav-list .nav-item.en[data-v-2c2c1736] {
+.o-nav-list .nav-item.en[data-v-00cffd0d] {
     padding: var(--o-gap-2);
 }
 }
-.o-nav-list .item-other[data-v-2c2c1736] {
+.o-nav-list .item-other[data-v-00cffd0d] {
   cursor: pointer;
 }
-.o-nav-list .item-other .content-tag[data-v-2c2c1736] {
+.o-nav-list .item-other .content-tag[data-v-00cffd0d] {
   margin-left: var(--o-gap-2);
   --layout-pkg-radius: var(--o-radius-xs);
 }
-.o-nav-list .item-other:active .nav-text[data-v-2c2c1736] {
+.o-nav-list .item-other:active .nav-text[data-v-00cffd0d] {
   color: var(--o-color-primary1);
   z-index: 99;
   font-weight: 600;
 }
-.o-nav-list .item-other:active .nav-text[data-v-2c2c1736]::after {
+.o-nav-list .item-other:active .nav-text[data-v-00cffd0d]::after {
   content: "";
   opacity: 1;
 }
-.mindspore .item-other .content-tag[data-v-2c2c1736] {
+.mindspore .item-other .content-tag[data-v-00cffd0d] {
   --layout-pkg-radius: 100vh;
 }

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

@@ -3,28 +3,20 @@ export interface OHeaderEmitsT {
     (e: 'handle-mouseenter', val: any): void;
     (e: 'handle-mouseleave', val: any): void;
     (e: 'handle-click', val: any): void;
-    (e: 'nav-compress', val: boolean): void;
     (e: 'nav-layout', val: any): void;
-    (e: 'update:hoverId', val: NavLiT['hoverId']): 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-compress": (val: boolean) => any;
     "nav-layout": (val: any) => any;
-    "update:hoverId": (val: string | number) => 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-compress"?: ((val: boolean) => any) | undefined;
     "onNav-layout"?: ((val: any) => any) | undefined;
-    "onUpdate:hoverId"?: ((val: string | number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    headerNavRef: HTMLDivElement;
+    navRef: HTMLDivElement;
     navListRef: HTMLUListElement;
-    navStartRef: HTMLLIElement;
-    navEndRef: HTMLLIElement;
 }, HTMLDivElement>;
 export default _default;

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

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

@@ -1,8 +1,8 @@
-import { defineComponent, ref, inject, resolveDirective, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, createCommentVNode, normalizeClass, Fragment, renderList, withDirectives, toDisplayString, createBlock, createTextVNode } from "vue";
+import { defineComponent, ref, inject, onMounted, nextTick, onUnmounted, resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createCommentVNode, 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 { useVModel, useElementSize, watchDebounced, useIntersectionObserver } from "@vueuse/core";
+import { useDebounceFn } from "@vueuse/core";
 const _hoisted_1 = { class: "header-nav-wrap" };
 const _hoisted_2 = {
   key: 0,
@@ -25,59 +25,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     activeIndex: {},
     hoverId: {}
   },
-  emits: ["handle-mouseenter", "handle-mouseleave", "handle-click", "nav-compress", "nav-layout", "update:hoverId"],
+  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();
     const navVisibleRight = ref(false);
     const navVisibleLeft = ref(false);
-    const hoverIdVModel = useVModel(props, "hoverId");
-    const toggle = (item, id) => {
-      hoverIdVModel.value = item.id;
+    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") {
-        hoverIdVModel.value = "";
+        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"
+      navVisibleLeft.value = true;
+      nextTick(() => {
+        navRef.value.scrollTo({
+          left: navRef.value.clientWidth,
+          behavior: "smooth"
+        });
       });
     };
     const scrollNavLeft = () => {
@@ -85,30 +62,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         left: 0,
         behavior: "smooth"
       });
+      navVisibleLeft.value = false;
     };
-    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);
+    const calculateLayout = () => {
+      var _a, _b;
+      if (((_a = navRef.value) == null ? void 0 : _a.clientWidth) < ((_b = navListRef.value) == null ? void 0 : _b.clientWidth)) {
+        if (!navVisibleRight.value) {
+          emit("nav-layout", true);
         }
-      },
-      {
-        root: navRef,
-        threshold: 0
+        setTimeout(() => {
+          navVisibleRight.value = true;
+        }, 200);
+      } else {
+        if (navVisibleRight.value) {
+          emit("nav-layout", false);
+        }
+        setTimeout(() => {
+          navVisibleRight.value = false;
+        }, 200);
       }
-    );
+    };
     const navFirstHoverTime = inject("navFirstHoverTime");
     const navStepCount = inject("navStepCount");
     const increNavStepCount = inject("increNavStepCount");
@@ -140,14 +113,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
       return res;
     };
+    onMounted(() => {
+      window.addEventListener("resize", calculateLayout);
+      nextTick(() => {
+        calculateLayout();
+        resizeTimer.value = setTimeout(() => {
+          calculateLayout();
+        }, 1e3);
+      });
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", calculateLayout);
+      clearTimeout(resizeTimer.value);
+    });
     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"
+          class: normalizeClass(["header-nav", { "header-nav-scroll": navVisibleLeft.value }])
         }, [
           navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
             createVNode(unref(OIcon), { onClick: scrollNavLeft }, {
@@ -158,6 +142,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             })
           ])) : createCommentVNode("", true),
           createElementVNode("div", {
+            ref_key: "navRef",
+            ref: navRef,
             class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value }])
           }, [
             createElementVNode("ul", {
@@ -166,23 +152,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               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": unref(hoverIdVModel) === item.id,
+                    "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) => toggle(item, "mouseenter"),
-                  onMouseleave: ($event) => toggle(item, "mouseleave")
+                  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,
@@ -213,16 +193,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   [_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)
+              }), 128))
             ], 34)
           ], 2),
-          navVisibleRight.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          navVisibleRight.value && !navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
             createVNode(unref(OIcon), { onClick: scrollNavRight }, {
               default: withCtx(() => [
                 createVNode(unref(IconCaretRight))
@@ -230,7 +204,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _: 1
             })
           ])) : createCommentVNode("", true)
-        ], 512)
+        ], 2)
       ]);
     };
   }

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('../types.ts').NavItemT[];
+    navData: import('../../../index.ts').NavItemT[];
     menuShow: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;