@opendesign-plus-test/components 0.0.1-rc.98 → 0.0.1-rc.99

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

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

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-64df272e"]]);
+const HeaderNav = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2e8364bf"]]);
 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";
@@ -30,9 +30,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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,17 @@ 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)) {
+        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 hoverTime = 0;
     let steps = 0;
     const onHoverHeader = () => steps = 0;
@@ -130,7 +135,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 }]),
+            style: normalizeStyle(beforeStyle.value)
           }, [
             createElementVNode("ul", {
               ref_key: "navListRef",
@@ -144,7 +150,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 || props.activeIndex === 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")
@@ -186,7 +193,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(() => [