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

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

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, inject, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString, withDirectives, createBlock, resolveDynamicComponent, createCommentVNode, createTextVNode } from "vue";
+import { defineComponent, computed, ref, inject, resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString, withDirectives, createBlock, resolveDynamicComponent, createCommentVNode, createTextVNode } from "vue";
 import { OScroller, OPopover, OIcon, OTag } from "@opensig/opendesign";
 import { useTheme } from "../../../shared/theme.mjs";
 import { useI18n } from "../../../i18n/index.mjs";
@@ -46,15 +46,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { locale, t } = useI18n();
     const { theme, isDark } = useTheme();
-    const navVisible = ref(false);
+    const navDisplay = computed(() => Boolean(props.hoverIndex === props.itemData.id && props.itemVisible && props.itemData.children.length));
     const onMouseEnter = () => {
       var _a;
       emit("handle-mouseenter-sub", (_a = props.itemData) == null ? void 0 : _a.id);
-      navVisible.value = true;
     };
     const onMouseLeave = () => {
       emit("handle-mouseleave-sub", "");
-      navVisible.value = false;
     };
     const showDesc = ref(false);
     const descMouseenter = (e) => {
@@ -76,7 +74,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const injectCloseNavPanel = inject("closeNavPanel");
     const closeNavPanel = () => {
       injectCloseNavPanel == null ? void 0 : injectCloseNavPanel();
-      navVisible.value = false;
     };
     const navFirstHoverTime = inject("navFirstHoverTime");
     const navStepCount = inject("navStepCount");
@@ -118,15 +115,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      var _a, _b, _c;
+      var _a;
       const _directive_analytics = resolveDirective("analytics");
       return openBlock(), createElementBlock("div", {
         onMouseenter: onMouseEnter,
         onMouseleave: onMouseLeave
       }, [
-        (props.itemVisible || navVisible.value) && ((_b = (_a = props.itemData) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(["nav-content", [(_c = props.community) == null ? void 0 : _c.toLowerCase(), props.hoverIndex, unref(theme), `${props.hoverIndex}-${unref(locale)}`]])
+        createElementVNode("div", {
+          class: normalizeClass(["nav-content", navDisplay.value ? "display" : "", (_a = props.community) == null ? void 0 : _a.toLowerCase(), props.hoverIndex, unref(theme), `${props.hoverIndex}-${unref(locale)}`])
         }, [
           createElementVNode("div", {
             class: "nav-background-left",
@@ -144,7 +140,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "disabled-y": ""
             }, {
               default: withCtx(() => {
-                var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+                var _a2, _b, _c, _d, _e, _f, _g, _h;
                 return [
                   createElementVNode("div", _hoisted_2, [
                     createElementVNode("div", _hoisted_3, [
@@ -240,7 +236,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ]);
                       }), 128))
                     ]),
-                    ((_c2 = (_b2 = props.itemData) == null ? void 0 : _b2.shortcut) == null ? void 0 : _c2.length) ? (openBlock(), createElementBlock("div", _hoisted_10)) : createCommentVNode("", true),
+                    ((_c = (_b = props.itemData) == null ? void 0 : _b.shortcut) == null ? void 0 : _c.length) ? (openBlock(), createElementBlock("div", _hoisted_10)) : createCommentVNode("", true),
                     ((_e = (_d = props.itemData) == null ? void 0 : _d.shortcut) == null ? void 0 : _e.length) ? (openBlock(), createElementBlock("div", _hoisted_11, [
                       createElementVNode("span", _hoisted_12, toDisplayString(unref(t)("header.quickLink")), 1),
                       !((_f = props.itemData) == null ? void 0 : _f.withPicture) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList((_g = props.itemData) == null ? void 0 : _g.shortcut, (shortcut) => {
@@ -357,7 +353,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _: 1
             })
           ])
-        ], 2)) : createCommentVNode("", true)
+        ], 2)
       ], 32);
     };
   }

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

@@ -1,35 +1,35 @@
-.hover-icon-rotate .o-icon[data-v-b3114456] {
+.hover-icon-rotate .o-icon[data-v-a31862a5] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-b3114456] {
+.hover-icon-rotate:hover .o-icon[data-v-a31862a5] {
     transform: rotate(-180deg);
 }
 }
-.header-nav-wrap[data-v-b3114456] {
+.header-nav-wrap[data-v-a31862a5] {
   height: 100%;
 }
-.header-nav-wrap .header-nav[data-v-b3114456] {
+.header-nav-wrap .header-nav[data-v-a31862a5] {
   height: 100%;
   display: flex;
   justify-content: space-between;
   width: calc(100% - 64px);
   align-items: center;
 }
-.header-nav-wrap .header-nav-scroll[data-v-b3114456] {
+.header-nav-wrap .header-nav-scroll[data-v-a31862a5] {
   width: calc(100% - 64px - 24px);
 }
-.o-nav[data-v-b3114456] {
+.o-nav[data-v-a31862a5] {
   --o-before-left: 0;
   height: 100%;
   position: relative;
   z-index: 8;
 }
-.o-nav[data-v-b3114456]::-webkit-scrollbar {
+.o-nav[data-v-a31862a5]::-webkit-scrollbar {
   display: none;
 }
-.left-icon[data-v-b3114456],
-.right-icon[data-v-b3114456] {
+.left-icon[data-v-a31862a5],
+.right-icon[data-v-a31862a5] {
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -38,24 +38,24 @@
   height: 16px;
   border-radius: var(--o-radius-xs);
 }
-.left-icon .o-icon[data-v-b3114456],
-.right-icon .o-icon[data-v-b3114456] {
+.left-icon .o-icon[data-v-a31862a5],
+.right-icon .o-icon[data-v-a31862a5] {
   --icon-size: 16px;
   position: relative;
   z-index: 11;
 }
 @media (hover: hover) {
-.left-icon[data-v-b3114456]:hover,
-  .right-icon[data-v-b3114456]:hover {
+.left-icon[data-v-a31862a5]:hover,
+  .right-icon[data-v-a31862a5]:hover {
     background-color: var(--o-color-control2-light);
     color: var(--o-color-link2);
 }
 }
-.left-icon[data-v-b3114456]:active,
-.right-icon[data-v-b3114456]:active {
+.left-icon[data-v-a31862a5]:active,
+.right-icon[data-v-a31862a5]:active {
   color: var(--o-color-link3);
 }
-.left-icon[data-v-b3114456]::before {
+.left-icon[data-v-a31862a5]::before {
   content: "";
   position: absolute;
   width: 50px;
@@ -67,16 +67,16 @@
   cursor: default;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.left-icon[data-v-b3114456]::before {
+.left-icon[data-v-a31862a5]::before {
     top: -24px;
 }
 }
 @media (max-width: 1200px) {
-.left-icon[data-v-b3114456]::before {
+.left-icon[data-v-a31862a5]::before {
     top: -20px;
 }
 }
-.right-icon[data-v-b3114456]::before {
+.right-icon[data-v-a31862a5]::before {
   content: "";
   position: absolute;
   width: 50px;
@@ -88,29 +88,29 @@
   cursor: default;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.right-icon[data-v-b3114456]::before {
+.right-icon[data-v-a31862a5]::before {
     top: -24px;
 }
 }
 @media (max-width: 1200px) {
-.right-icon[data-v-b3114456]::before {
+.right-icon[data-v-a31862a5]::before {
     top: -20px;
 }
 }
-[data-o-theme*=dark] .left-icon[data-v-b3114456] {
+[data-o-theme*=dark] .left-icon[data-v-a31862a5] {
   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-b3114456] {
+[data-o-theme*=dark] .right-icon[data-v-a31862a5] {
   background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 100%);
 }
-.o-nav-scroll[data-v-b3114456]::after {
+.o-nav-scroll[data-v-a31862a5]::after {
   display: none;
 }
-.o-nav-scroll[data-v-b3114456]::before {
+.o-nav-scroll[data-v-a31862a5]::before {
   left: var(--o-before-left);
   display: block;
 }
-.nav-list[data-v-b3114456] {
+.nav-list[data-v-a31862a5] {
   display: flex;
   height: 100%;
   width: fit-content;
@@ -119,7 +119,7 @@
   padding: 0;
   margin: 0;
 }
-.nav-item-li[data-v-b3114456] {
+.nav-item-li[data-v-a31862a5] {
   position: relative;
   display: flex;
   align-items: center;
@@ -128,7 +128,7 @@
   pointer-events: auto;
   transition: color var(--o-duration-s) var(--o-easing-standard);
 }
-.nav-item-li .nav-item[data-v-b3114456] {
+.nav-item-li .nav-item[data-v-a31862a5] {
   cursor: default;
   display: flex;
   align-items: center;
@@ -141,45 +141,45 @@
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.nav-item-li .nav-item[data-v-b3114456] {
+.nav-item-li .nav-item[data-v-a31862a5] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.nav-item-li .nav-item[data-v-b3114456] {
+.nav-item-li .nav-item[data-v-a31862a5] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.nav-item-li .nav-item[data-v-b3114456] {
+.nav-item-li .nav-item[data-v-a31862a5] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.nav-item-li .nav-item[data-v-b3114456] {
+.nav-item-li .nav-item[data-v-a31862a5] {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 1680px) {
-.nav-item-li .nav-item[data-v-b3114456] {
+.nav-item-li .nav-item[data-v-a31862a5] {
     --padding-x: var(--o-gap-4);
 }
 }
 @media (max-width: 1440px) {
-.nav-item-li .nav-item[data-v-b3114456] {
+.nav-item-li .nav-item[data-v-a31862a5] {
     --padding-x: var(--o-gap-3);
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.nav-item-li .nav-item[data-v-b3114456] {
+.nav-item-li .nav-item[data-v-a31862a5] {
     --padding-x: var(--o-gap-2);
 }
 }
-.nav-item-li .nav-item[data-v-b3114456]::after {
+.nav-item-li .nav-item[data-v-a31862a5]::after {
   content: "";
   position: absolute;
   left: var(--padding-x);
@@ -191,25 +191,25 @@
   background: var(--o-color-primary1);
   transition: all var(--o-duration-s) var(--o-easing-standard);
 }
-.nav-item-li .nav-item-link[data-v-b3114456] {
+.nav-item-li .nav-item-link[data-v-a31862a5] {
   cursor: pointer;
 }
-.nav-item-li.is-active .nav-item[data-v-b3114456]::after {
+.nav-item-li.is-active .nav-item[data-v-a31862a5]::after {
   opacity: 1;
 }
-.nav-item-li.is-active .nav-text[data-v-b3114456] {
+.nav-item-li.is-active .nav-text[data-v-a31862a5] {
   color: var(--o-color-primary1);
   font-weight: 600;
 }
-.nav-item-li.is-selected .nav-text[data-v-b3114456] {
+.nav-item-li.is-selected .nav-text[data-v-a31862a5] {
   color: var(--o-color-primary2);
   font-weight: 600;
 }
-.nav-item-li.is-disabled[data-v-b3114456] {
+.nav-item-li.is-disabled[data-v-a31862a5] {
   color: var(--o-color-info4);
   pointer-events: none;
 }
-.dropdown-wrapper[data-v-b3114456] {
+.dropdown-wrapper[data-v-a31862a5] {
   position: absolute;
   top: calc(100% - 4px);
   left: 0;
@@ -217,13 +217,13 @@
   padding-top: 8px;
   transition: opacity var(--o-duration-s) var(--o-easing-standard);
 }
-.dropdown-wrapper .dropdown-body[data-v-b3114456] {
+.dropdown-wrapper .dropdown-body[data-v-a31862a5] {
   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-b3114456] {
+.dropdown-wrapper .dropdown-item[data-v-a31862a5] {
   font-weight: 400;
   white-space: nowrap;
   display: flex;
@@ -239,63 +239,63 @@
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.dropdown-wrapper .dropdown-item[data-v-b3114456] {
+.dropdown-wrapper .dropdown-item[data-v-a31862a5] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.dropdown-wrapper .dropdown-item[data-v-b3114456] {
+.dropdown-wrapper .dropdown-item[data-v-a31862a5] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.dropdown-wrapper .dropdown-item[data-v-b3114456] {
+.dropdown-wrapper .dropdown-item[data-v-a31862a5] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.dropdown-wrapper .dropdown-item[data-v-b3114456] {
+.dropdown-wrapper .dropdown-item[data-v-a31862a5] {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (hover: hover) {
-.dropdown-wrapper .dropdown-item[data-v-b3114456]:hover {
+.dropdown-wrapper .dropdown-item[data-v-a31862a5]:hover {
     background-color: var(--o-color-control2-light);
     color: var(--o-color-primary1);
 }
 }
-.dropdown-wrapper .dropdown-item-disabled[data-v-b3114456] {
+.dropdown-wrapper .dropdown-item-disabled[data-v-a31862a5] {
   color: var(--o-color-info4);
   pointer-events: none;
 }
-.dropdown-wrapper .dropdown-link[data-v-b3114456] {
+.dropdown-wrapper .dropdown-link[data-v-a31862a5] {
   color: inherit;
   display: flex;
   align-items: center;
   width: 100%;
 }
-.dropdown-wrapper .dropdown-link .o-tag[data-v-b3114456] {
+.dropdown-wrapper .dropdown-link .o-tag[data-v-a31862a5] {
   margin-left: var(--o-gap-2);
   transform: scale(0.75);
   transform-origin: left center;
 }
-.dropdown-wrapper[data-v-b3114456] .jump-out-icon {
+.dropdown-wrapper[data-v-a31862a5] .jump-out-icon {
   font-size: 16px;
   margin-left: 4px;
 }
-.dropdown-wrapper[data-v-b3114456] .jump-out-icon path {
+.dropdown-wrapper[data-v-a31862a5] .jump-out-icon path {
   fill: currentColor;
   stroke: transparent;
 }
-.dropdown-wrapper[data-v-b3114456] .jump-out-icon path[fill=none] {
+.dropdown-wrapper[data-v-a31862a5] .jump-out-icon path[fill=none] {
   display: none;
 }
 @media (hover: hover) {
-.nav-item:hover .dropdown-wrapper[data-v-b3114456] {
+.nav-item:hover .dropdown-wrapper[data-v-a31862a5] {
     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-b3114456"]]);
+const HeaderFlatten = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a31862a5"]]);
 export {
   HeaderFlatten as default
 };

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

@@ -2,7 +2,7 @@ import { defineComponent, ref, onMounted, nextTick, onUnmounted, resolveDirectiv
 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";
+import { useVModel } from "@vueuse/core";
 const _hoisted_1 = { class: "header-nav-wrap" };
 const _hoisted_2 = {
   key: 0,
@@ -38,17 +38,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   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;
+    const hoverIdVModel = useVModel(props, "hoverId");
+    const toggle = (item, id) => {
+      hoverIdVModel.value = item == null ? void 0 : item.id;
       if (id === "mouseenter") {
         emit("handle-mouseenter", item);
       }
       if (id === "mouseleave") {
-        hoverIndex.value = "";
+        hoverIdVModel.value = "";
         emit("handle-mouseleave", item);
       }
-    }, 100);
+    };
     const handleClick = (item) => {
       emit("handle-click", item);
     };
@@ -165,12 +165,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: item.id,
                   id: item.id,
                   class: normalizeClass(["nav-item-li", {
-                    "is-selected": hoverIndex.value === item.id || props.hoverId === item.id,
+                    "is-selected": unref(hoverIdVModel) === 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")
+                  onMouseenter: ($event) => toggle(item, "mouseenter"),
+                  onMouseleave: ($event) => toggle(item, "mouseleave")
                 }, [
                   !item.href && !((_a = item.children) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", {
                     key: 0,