@opendesign-plus/components 0.0.1-rc.44 → 0.0.1-rc.45

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

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

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

@@ -1,79 +1,116 @@
-.hover-icon-rotate .o-icon[data-v-acf019fb] {
+.hover-icon-rotate .o-icon[data-v-a8d77468] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-acf019fb] {
+.hover-icon-rotate:hover .o-icon[data-v-a8d77468] {
     transform: rotate(-180deg);
 }
 }
-.header-nav-wrap[data-v-acf019fb] {
+.header-nav-wrap[data-v-a8d77468] {
   height: 100%;
 }
-.header-nav-wrap .header-nav[data-v-acf019fb] {
+.header-nav-wrap .header-nav[data-v-a8d77468] {
   height: 100%;
   display: flex;
   justify-content: space-between;
   width: calc(100% - 64px);
   align-items: center;
 }
-.header-nav-wrap .header-nav-scroll[data-v-acf019fb] {
+.header-nav-wrap .header-nav-scroll[data-v-a8d77468] {
   width: calc(100% - 64px - 24px);
 }
-.o-nav[data-v-acf019fb] {
+.o-nav[data-v-a8d77468] {
   --o-before-left: 0;
   height: 100%;
   position: relative;
+  z-index: 8;
 }
-.o-nav[data-v-acf019fb]::after, .o-nav[data-v-acf019fb]::before {
-  content: "";
-  position: absolute;
-  width: 50px;
-  height: 100%;
-  top: 0;
-  z-index: 9;
-}
-.o-nav[data-v-acf019fb]::after {
-  right: 0;
-  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
-}
-.o-nav[data-v-acf019fb]::before {
-  background-image: linear-gradient(0, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
-  display: none;
-}
-.o-nav[data-v-acf019fb]::-webkit-scrollbar {
+.o-nav[data-v-a8d77468]::-webkit-scrollbar {
   display: none;
 }
-.right-icon[data-v-acf019fb] {
+.left-icon[data-v-a8d77468],
+.right-icon[data-v-a8d77468] {
   display: flex;
   align-items: center;
   cursor: pointer;
+  position: relative;
   width: 16px;
   height: 16px;
   border-radius: var(--o-radius-xs);
 }
-.right-icon .o-icon[data-v-acf019fb] {
+.left-icon .o-icon[data-v-a8d77468],
+.right-icon .o-icon[data-v-a8d77468] {
   --icon-size: 16px;
+  position: relative;
+  z-index: 11;
 }
 @media (hover: hover) {
-.right-icon[data-v-acf019fb]:hover {
+.left-icon[data-v-a8d77468]:hover,
+  .right-icon[data-v-a8d77468]:hover {
     background-color: var(--o-color-control2-light);
     color: var(--o-color-link2);
 }
 }
-.right-icon[data-v-acf019fb]:active {
+.left-icon[data-v-a8d77468]:active,
+.right-icon[data-v-a8d77468]:active {
   color: var(--o-color-link3);
 }
-[data-o-theme*=dark] .o-nav[data-v-acf019fb]::after, [data-o-theme*=dark] .o-nav[data-v-acf019fb]::before {
+.left-icon[data-v-a8d77468]::before {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: var(--o-header-height);
+  top: -28px;
+  left: 16px;
+  z-index: 9;
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 1) 0%, rgba(var(--o-grey-1), 0) 100%);
+  cursor: default;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.left-icon[data-v-a8d77468]::before {
+    top: -24px;
+}
+}
+@media (max-width: 1200px) {
+.left-icon[data-v-a8d77468]::before {
+    top: -20px;
+}
+}
+.right-icon[data-v-a8d77468]::before {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: var(--o-header-height);
+  top: -28px;
+  right: 16px;
+  z-index: 9;
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
+  cursor: default;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.right-icon[data-v-a8d77468]::before {
+    top: -24px;
+}
+}
+@media (max-width: 1200px) {
+.right-icon[data-v-a8d77468]::before {
+    top: -20px;
+}
+}
+[data-o-theme*=dark] .left-icon[data-v-a8d77468] {
+  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-a8d77468] {
   background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 100%);
 }
-.o-nav-scroll[data-v-acf019fb]::after {
+.o-nav-scroll[data-v-a8d77468]::after {
   display: none;
 }
-.o-nav-scroll[data-v-acf019fb]::before {
+.o-nav-scroll[data-v-a8d77468]::before {
   left: var(--o-before-left);
   display: block;
 }
-.nav-list[data-v-acf019fb] {
+.nav-list[data-v-a8d77468] {
   display: flex;
   height: 100%;
   width: fit-content;
@@ -82,7 +119,7 @@
   padding: 0;
   margin: 0;
 }
-.nav-item-li[data-v-acf019fb] {
+.nav-item-li[data-v-a8d77468] {
   position: relative;
   display: flex;
   align-items: center;
@@ -91,7 +128,7 @@
   pointer-events: auto;
   transition: color var(--o-duration-s) var(--o-easing-standard);
 }
-.nav-item-li .nav-item[data-v-acf019fb] {
+.nav-item-li .nav-item[data-v-a8d77468] {
   cursor: default;
   display: flex;
   align-items: center;
@@ -100,43 +137,43 @@
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.nav-item-li .nav-item[data-v-acf019fb] {
+.nav-item-li .nav-item[data-v-a8d77468] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.nav-item-li .nav-item[data-v-acf019fb] {
+.nav-item-li .nav-item[data-v-a8d77468] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.nav-item-li .nav-item[data-v-acf019fb] {
+.nav-item-li .nav-item[data-v-a8d77468] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.nav-item-li .nav-item[data-v-acf019fb] {
+.nav-item-li .nav-item[data-v-a8d77468] {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 1440px) {
-.nav-item-li .nav-item[data-v-acf019fb] {
+.nav-item-li .nav-item[data-v-a8d77468] {
     padding: 18px 12px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.nav-item-li .nav-item[data-v-acf019fb] {
+.nav-item-li .nav-item[data-v-a8d77468] {
     padding: 14px 8px;
 }
 }
-.nav-item-li .nav-text[data-v-acf019fb] {
+.nav-item-li .nav-text[data-v-a8d77468] {
   position: relative;
 }
-.nav-item-li .nav-text[data-v-acf019fb]::after {
+.nav-item-li .nav-text[data-v-a8d77468]::after {
   content: "";
   position: absolute;
   left: 0;
@@ -149,31 +186,31 @@
   transition: all var(--o-duration-s) var(--o-easing-standard);
 }
 @media (max-width: 1440px) {
-.nav-item-li .nav-text[data-v-acf019fb]::after {
+.nav-item-li .nav-text[data-v-a8d77468]::after {
     bottom: -21px;
 }
 }
 @media (max-width: 1200px) {
-.nav-item-li .nav-text[data-v-acf019fb]::after {
+.nav-item-li .nav-text[data-v-a8d77468]::after {
     bottom: -17px;
 }
 }
-.nav-item-li .nav-item-link[data-v-acf019fb] {
+.nav-item-li .nav-item-link[data-v-a8d77468] {
   cursor: pointer;
 }
-.nav-item-li.is-selected .nav-text[data-v-acf019fb], .nav-item-li.is-active .nav-text[data-v-acf019fb] {
+.nav-item-li.is-selected .nav-text[data-v-a8d77468], .nav-item-li.is-active .nav-text[data-v-a8d77468] {
   color: var(--o-color-primary1);
   z-index: 99;
   font-weight: 600;
 }
-.nav-item-li.is-selected .nav-text[data-v-acf019fb]::after, .nav-item-li.is-active .nav-text[data-v-acf019fb]::after {
+.nav-item-li.is-selected .nav-text[data-v-a8d77468]::after, .nav-item-li.is-active .nav-text[data-v-a8d77468]::after {
   opacity: 1;
 }
-.nav-item-li.is-disabled[data-v-acf019fb] {
+.nav-item-li.is-disabled[data-v-a8d77468] {
   color: var(--o-color-info4);
   pointer-events: none;
 }
-.dropdown-wrapper[data-v-acf019fb] {
+.dropdown-wrapper[data-v-a8d77468] {
   position: absolute;
   top: calc(100% - 4px);
   left: 0;
@@ -181,13 +218,13 @@
   padding-top: 8px;
   transition: opacity var(--o-duration-s) var(--o-easing-standard);
 }
-.dropdown-wrapper .dropdown-body[data-v-acf019fb] {
+.dropdown-wrapper .dropdown-body[data-v-a8d77468] {
   padding: 6px;
   background-color: var(--o-color-fill2);
   border-radius: var(--o-radius-xs);
   box-shadow: var(--o-shadow-2);
 }
-.dropdown-wrapper .dropdown-item[data-v-acf019fb] {
+.dropdown-wrapper .dropdown-item[data-v-a8d77468] {
   font-weight: 400;
   white-space: nowrap;
   display: flex;
@@ -203,63 +240,63 @@
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.dropdown-wrapper .dropdown-item[data-v-acf019fb] {
+.dropdown-wrapper .dropdown-item[data-v-a8d77468] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.dropdown-wrapper .dropdown-item[data-v-acf019fb] {
+.dropdown-wrapper .dropdown-item[data-v-a8d77468] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.dropdown-wrapper .dropdown-item[data-v-acf019fb] {
+.dropdown-wrapper .dropdown-item[data-v-a8d77468] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.dropdown-wrapper .dropdown-item[data-v-acf019fb] {
+.dropdown-wrapper .dropdown-item[data-v-a8d77468] {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (hover: hover) {
-.dropdown-wrapper .dropdown-item[data-v-acf019fb]:hover {
+.dropdown-wrapper .dropdown-item[data-v-a8d77468]:hover {
     background-color: var(--o-color-control2-light);
     color: var(--o-color-primary1);
 }
 }
-.dropdown-wrapper .dropdown-item-disabled[data-v-acf019fb] {
+.dropdown-wrapper .dropdown-item-disabled[data-v-a8d77468] {
   color: var(--o-color-info4);
   pointer-events: none;
 }
-.dropdown-wrapper .dropdown-link[data-v-acf019fb] {
+.dropdown-wrapper .dropdown-link[data-v-a8d77468] {
   color: inherit;
   display: flex;
   align-items: center;
   width: 100%;
 }
-.dropdown-wrapper .dropdown-link .o-tag[data-v-acf019fb] {
+.dropdown-wrapper .dropdown-link .o-tag[data-v-a8d77468] {
   margin-left: var(--o-gap-2);
   transform: scale(0.75);
   transform-origin: left center;
 }
-.dropdown-wrapper[data-v-acf019fb] .jump-out-icon {
+.dropdown-wrapper[data-v-a8d77468] .jump-out-icon {
   font-size: 16px;
   margin-left: 4px;
 }
-.dropdown-wrapper[data-v-acf019fb] .jump-out-icon path {
+.dropdown-wrapper[data-v-a8d77468] .jump-out-icon path {
   fill: currentColor;
   stroke: transparent;
 }
-.dropdown-wrapper[data-v-acf019fb] .jump-out-icon path[fill=none] {
+.dropdown-wrapper[data-v-a8d77468] .jump-out-icon path[fill=none] {
   display: none;
 }
 @media (hover: hover) {
-.nav-item:hover .dropdown-wrapper[data-v-acf019fb] {
+.nav-item:hover .dropdown-wrapper[data-v-a8d77468] {
     display: block;
 }
 }

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

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

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, onMounted, nextTick, onUnmounted, resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createCommentVNode, normalizeStyle, Fragment, renderList, withDirectives, toDisplayString, createBlock, createTextVNode, resolveDynamicComponent } from "vue";
+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";
@@ -6,7 +6,7 @@ import { useDebounceFn } from "@vueuse/core";
 const _hoisted_1 = { class: "header-nav-wrap" };
 const _hoisted_2 = {
   key: 0,
-  class: "right-icon"
+  class: "left-icon"
 };
 const _hoisted_3 = ["id", "onMouseenter", "onMouseleave"];
 const _hoisted_4 = ["id", "onClick"];
@@ -20,10 +20,9 @@ const _hoisted_8 = {
 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 = {
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = ["href", "target", "rel"];
+const _hoisted_14 = {
   key: 1,
   class: "right-icon"
 };
@@ -58,7 +57,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const resizeTimer = ref();
     const navVisibleRight = ref(false);
     const navVisibleLeft = ref(false);
-    const left = ref(0);
     const scrollNavRight = () => {
       navVisibleLeft.value = true;
       nextTick(() => {
@@ -76,17 +74,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       navVisibleLeft.value = false;
     };
     const calculateLayout = () => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       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) => {
@@ -157,8 +151,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             ref_key: "navRef",
             ref: navRef,
-            class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value }]),
-            style: normalizeStyle(beforeStyle.value)
+            class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value }])
           }, [
             createElementVNode("ul", {
               ref_key: "navListRef",
@@ -213,12 +206,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       createElementVNode("div", _hoisted_11, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (childTab, index) => {
                           var _a2, _b2;
-                          return openBlock(), createElementBlock("div", {
-                            key: index,
-                            onMouseenter: ($event) => _ctx.onMouseEnter(idx),
-                            onMouseleave: _cache[0] || (_cache[0] = //@ts-ignore
-                            (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args))
-                          }, [
+                          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 }]),
@@ -237,7 +225,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 ]),
                                 _: 2
                               }, 1032, ["class"])) : createCommentVNode("", true)
-                            ], 10, _hoisted_13)) : withDirectives((openBlock(), createElementBlock("div", {
+                            ], 10, _hoisted_12)) : withDirectives((openBlock(), createElementBlock("div", {
                               key: 1,
                               class: normalizeClass(["dropdown-item", { "dropdown-item-disabled": childTab == null ? void 0 : childTab.disabled }])
                             }, [
@@ -266,11 +254,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   ]),
                                   _: 2
                                 }, 1032, ["class"])) : createCommentVNode("", true)
-                              ], 8, _hoisted_14)
+                              ], 8, _hoisted_13)
                             ], 2)), [
                               [_directive_analytics, () => onRedirect(childTab)]
                             ])
-                          ], 40, _hoisted_12);
+                          ]);
                         }), 128))
                       ])
                     ])
@@ -280,8 +268,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]);
               }), 128))
             ], 544)
-          ], 6),
-          navVisibleRight.value && !navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_15, [
+          ], 2),
+          navVisibleRight.value && !navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_14, [
             createVNode(unref(OIcon), { onClick: scrollNavRight }, {
               default: withCtx(() => [
                 createVNode(unref(IconCaretRight))