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

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

@@ -1,35 +1,35 @@
-.hover-icon-rotate .o-icon[data-v-bd55d99c] {
+.hover-icon-rotate .o-icon[data-v-e03be8d3] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-bd55d99c] {
+.hover-icon-rotate:hover .o-icon[data-v-e03be8d3] {
     transform: rotate(-180deg);
 }
 }
-.header[data-v-bd55d99c] {
+.header[data-v-e03be8d3] {
   --o-header-height: 72px;
   --o-header-content-max-width: 1488px;
   --o-header-content-padding: 0;
 }
 @media (max-width: 1680px) {
-.header[data-v-bd55d99c] {
+.header[data-v-e03be8d3] {
     --o-header-content-max-width: 100%;
     --o-header-content-padding: 64px;
 }
 }
 @media (max-width: 1440px) {
-.header[data-v-bd55d99c] {
+.header[data-v-e03be8d3] {
     --o-header-height: 64px;
     --o-header-content-padding: 40px;
 }
 }
 @media (max-width: 1200px) {
-.header[data-v-bd55d99c] {
+.header[data-v-e03be8d3] {
     --o-header-height: 56px;
     --o-header-content-padding: 32px;
 }
 }
-.header-wrap[data-v-bd55d99c] {
+.header-wrap[data-v-e03be8d3] {
   background-color: var(--o-color-fill2);
   position: fixed;
   left: 0;
@@ -40,7 +40,7 @@
   backdrop-filter: blur(5px);
   height: var(--o-header-height);
 }
-.header-content[data-v-bd55d99c] {
+.header-content[data-v-e03be8d3] {
   display: flex;
   align-items: center;
   height: 100%;
@@ -48,7 +48,7 @@
   margin: 0 auto;
   padding: 0 var(--o-header-content-padding);
 }
-.header-logo[data-v-bd55d99c] {
+.header-logo[data-v-e03be8d3] {
   height: 100%;
   display: flex;
   align-items: center;
@@ -57,36 +57,36 @@
   flex-shrink: 0;
 }
 @media (min-width: 1201px) and (max-width: 1440px) {
-.header-logo[data-v-bd55d99c] {
+.header-logo[data-v-e03be8d3] {
     margin-right: 12px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.header-logo[data-v-bd55d99c] {
+.header-logo[data-v-e03be8d3] {
     margin-right: 8px;
 }
 }
-.logo[data-v-bd55d99c] {
+.logo[data-v-e03be8d3] {
   height: 32px;
 }
-.header-nav-top[data-v-bd55d99c] {
+.header-nav-top[data-v-e03be8d3] {
   flex: 1;
   height: 100%;
   min-width: 0;
   overflow: hidden;
   position: relative;
 }
-.header-nav-flatten[data-v-bd55d99c] {
+.header-nav-flatten[data-v-e03be8d3] {
   flex: 1;
   height: 100%;
   min-width: 0;
   position: relative;
 }
-.header-toolbar[data-v-bd55d99c] {
+.header-toolbar[data-v-e03be8d3] {
   height: 100%;
   position: relative;
 }
-.header-nav-content[data-v-bd55d99c] {
+.header-nav-content[data-v-e03be8d3] {
   position: fixed;
   top: var(--o-header-height);
   left: 0;
@@ -96,6 +96,6 @@
   box-shadow: var(--o-shadow-1);
   overflow: hidden;
 }
-[data-o-theme*=dark] .header-wrap[data-v-bd55d99c] {
+[data-o-theme*=dark] .header-wrap[data-v-e03be8d3] {
   border-bottom: 1px solid var(--o-color-control4);
 }

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

@@ -13,9 +13,9 @@ declare function __VLS_template(): {
         toolbar?(_: {}): any;
     };
     refs: {
-        contentRef: HTMLDivElement;
+        contentRef: HTMLElement;
     };
-    rootEl: HTMLDivElement;
+    rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<NavT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -29,8 +29,8 @@ declare const __VLS_component: import('vue').DefineComponent<NavT, {}, {}, {}, {
 }>, {
     isFlatten: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    contentRef: HTMLDivElement;
-}, HTMLDivElement>;
+    contentRef: HTMLElement;
+}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

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

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, provide, readonly, onUnmounted, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, createBlock, createVNode } from "vue";
+import { defineComponent, ref, provide, readonly, customRef, computed, onUnmounted, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, createBlock, Fragment, renderList } from "vue";
 import HeaderNav from "./components/HeaderNav.vue.mjs";
 import HeaderContent from "./components/HeaderContent.vue.mjs";
 import HeaderFlatten from "./components/HeaderFlatten.vue.mjs";
@@ -36,8 +36,47 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const hoverIndex = ref();
-    const hoverId = ref();
+    const headerUserFullWidth = ref(0);
+    provide("headerUserFullWidth", readonly(headerUserFullWidth));
+    provide("reportHeaderUserWidth", (val) => headerUserFullWidth.value = val);
+    const isUserHidden = ref(false);
+    const isSearchHidden = ref(false);
+    provide("isUserHidden", readonly(isUserHidden));
+    provide("isSearchHidden", readonly(isSearchHidden));
+    provide("shrinkUserOrSearch", () => {
+      if (headerUserFullWidth.value && !isUserHidden.value) {
+        isUserHidden.value = true;
+      } else if (!isSearchHidden.value) {
+        isSearchHidden.value = true;
+      }
+    });
+    provide("expandUser", () => {
+      if (headerUserFullWidth.value && isUserHidden.value && !isSearchHidden.value) {
+        isUserHidden.value = false;
+      }
+    });
+    provide("expandSearch", () => {
+      if (isSearchHidden.value) {
+        isSearchHidden.value = false;
+      }
+    });
+    const hoverId = customRef((track, trigger) => {
+      let value = "";
+      let timeout;
+      return {
+        get() {
+          track();
+          return value;
+        },
+        set(newValue) {
+          clearTimeout(timeout);
+          timeout = setTimeout(() => {
+            value = newValue;
+            trigger();
+          }, 100);
+        }
+      };
+    });
     const itemData = ref();
     const itemVisible = ref(false);
     const hoveringNavLiName = computed(() => {
@@ -117,7 +156,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a;
       cancelClose();
       itemData.value = val;
-      hoverIndex.value = val.id;
       if ((_a = val == null ? void 0 : val.children) == null ? void 0 : _a.length) {
         itemVisible.value = true;
       }
@@ -160,7 +198,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       cancelClose();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("header", _hoisted_1, [
         createElementVNode("div", {
           class: "header-wrap",
           onMousemove: onMousemoveHeader
@@ -184,14 +222,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 props.navData ? (openBlock(), createBlock(HeaderNav, {
                   key: 0,
                   "nav-data": props.navData,
-                  hoverId: hoverId.value,
+                  "hover-id": hoverId.value,
+                  "onUpdate:hoverId": _cache[0] || (_cache[0] = ($event) => hoverId.value = $event),
                   "active-index": props.activeIndex,
                   community: props.community,
                   onHandleMouseenter: handleMouseenter,
                   onHandleMouseleave: handleMouseleave,
                   onHandleClick: handleClick,
                   onNavLayout: navLayout
-                }, null, 8, ["nav-data", "hoverId", "active-index", "community"])) : createCommentVNode("", true)
+                }, null, 8, ["nav-data", "hover-id", "active-index", "community"])) : createCommentVNode("", true)
               ], true)
             ])) : createCommentVNode("", true),
             props.isFlatten ? (openBlock(), createElementBlock("div", _hoisted_5, [
@@ -200,6 +239,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: 0,
                   "nav-data": props.navData,
                   hoverId: hoverId.value,
+                  "onUpdate:hoverId": _cache[1] || (_cache[1] = ($event) => hoverId.value = $event),
                   "active-index": props.activeIndex,
                   onHandleMouseenter: handleMouseenter,
                   onHandleMouseleave: handleMouseleave,
@@ -213,23 +253,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ])
         ], 32),
-        !props.isFlatten ? (openBlock(), createElementBlock("div", {
+        !props.isFlatten ? (openBlock(), createElementBlock("nav", {
           key: 0,
           ref_key: "contentRef",
           ref: contentRef,
           class: "header-nav-content",
           onMousemove: onMousemoveHeader
         }, [
-          createVNode(HeaderContent, {
-            itemData: itemData.value,
-            "item-visible": itemVisible.value,
-            "bg-left": props.bgLeft,
-            "bg-right": props.bgRight,
-            community: props.community,
-            "hover-index": hoverIndex.value,
-            onHandleMouseenterSub: handleMouseenterSub,
-            onHandleMouseleaveSub: handleMouseleaveSub
-          }, null, 8, ["itemData", "item-visible", "bg-left", "bg-right", "community", "hover-index"])
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.navData, (navItem) => {
+            var _a;
+            return openBlock(), createElementBlock(Fragment, {
+              key: navItem.id
+            }, [
+              ((_a = navItem.children) == null ? void 0 : _a.length) > 0 ? (openBlock(), createBlock(HeaderContent, {
+                key: 0,
+                itemData: navItem,
+                "item-visible": itemVisible.value,
+                "bg-left": props.bgLeft,
+                "bg-right": props.bgRight,
+                community: props.community,
+                "hover-index": hoverId.value,
+                onHandleMouseenterSub: handleMouseenterSub,
+                onHandleMouseleaveSub: handleMouseleaveSub
+              }, null, 8, ["itemData", "item-visible", "bg-left", "bg-right", "community", "hover-index"])) : createCommentVNode("", true)
+            ], 64);
+          }), 128))
         ], 544)) : createCommentVNode("", true)
       ]);
     };