@opendesign-plus/components 0.0.1-rc.80 → 0.0.1-rc.82

package/dist/treeshaking/components/brand/OBrandLogo.css

@@ -1,105 +1,99 @@
-.hover-icon-rotate .o-icon[data-v-6db02a96] {
+.hover-icon-rotate .o-icon[data-v-e7014221] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-6db02a96] {
+.hover-icon-rotate:hover .o-icon[data-v-e7014221] {
     transform: rotate(-180deg);
 }
 }
-.o-brand-logo[data-v-6db02a96] .o-row {
+.o-brand-logo[data-v-e7014221] .o-row {
   --row-gap-x: var(--o-gap-6);
   --row-gap-y: var(--o-gap-6);
 }
 @media (max-width: 1680px) {
-.o-brand-logo[data-v-6db02a96] .o-row {
+.o-brand-logo[data-v-e7014221] .o-row {
     --row-gap-x: var(--o-gap-5);
     --row-gap-y: var(--o-gap-5);
 }
 }
 @media (min-width: ) {
-.o-brand-logo[data-v-6db02a96] .o-row {
+.o-brand-logo[data-v-e7014221] .o-row {
     --row-gap-x: var(--o-gap-4);
     --row-gap-y: var(--o-gap-4);
 }
 }
 @media (max-width: 840px) {
-.o-brand-logo[data-v-6db02a96] .o-row {
+.o-brand-logo[data-v-e7014221] .o-row {
     --row-gap-x: var(--o-gap-3);
     --row-gap-y: var(--o-gap-3);
 }
 }
-.o-brand-logo[data-v-6db02a96] .o-card {
+.o-brand-logo[data-v-e7014221] .o-card {
   --card-main-padding: var(--o-gap-5) var(--o-gap-5) var(--o-gap-4) var(--o-gap-5);
   --card-content-gap: var(--o-gap-5);
 }
 @media (max-width: 1680px) {
-.o-brand-logo[data-v-6db02a96] .o-card {
+.o-brand-logo[data-v-e7014221] .o-card {
     --card-main-padding: var(--o-gap-4) var(--o-gap-4) var(--o-gap-3) var(--o-gap-4);
     --card-content-gap: var(--o-gap-4);
 }
 }
 @media (min-width: ) {
-.o-brand-logo[data-v-6db02a96] .o-card {
+.o-brand-logo[data-v-e7014221] .o-card {
     --card-main-padding: var(--o-gap-3) var(--o-gap-3) var(--o-gap-2) var(--o-gap-3);
     --card-content-gap: var(--o-gap-3);
 }
 }
-.o-brand-logo[data-v-6db02a96] .o-card.type-dark {
-  color: red;
-}
-.o-brand-logo[data-v-6db02a96] .o-card.type-dark .o-card-cover .o-figure {
-  background-color: rgb(43, 43, 47);
-}
-.o-brand-logo[data-v-6db02a96] .o-card .o-card-cover {
+.o-brand-logo[data-v-e7014221] .o-card .o-card-cover {
   --card-cover-padding: var(--o-gap-5) var(--o-gap-5) 0;
 }
 @media (max-width: 1680px) {
-.o-brand-logo[data-v-6db02a96] .o-card .o-card-cover {
+.o-brand-logo[data-v-e7014221] .o-card .o-card-cover {
     --card-cover-padding: var(--o-gap-4) var(--o-gap-4) 0;
 }
 }
 @media (min-width: ) {
-.o-brand-logo[data-v-6db02a96] .o-card .o-card-cover {
+.o-brand-logo[data-v-e7014221] .o-card .o-card-cover {
     --card-cover-padding: var(--o-gap-3) var(--o-gap-3) 0;
 }
 }
-.o-brand-logo[data-v-6db02a96] .o-card .o-card-cover .o-figure {
+.o-brand-logo[data-v-e7014221] .o-card .o-card-cover .o-figure {
   height: 100px;
   background-color: rgba(237, 237, 240, 0.9);
   padding: var(--o-gap-4);
 }
 @media (max-width: 1680px) {
-.o-brand-logo[data-v-6db02a96] .o-card .o-card-cover .o-figure {
+.o-brand-logo[data-v-e7014221] .o-card .o-card-cover .o-figure {
     padding: var(--o-gap-3);
 }
 }
 @media (min-width: ) {
-.o-brand-logo[data-v-6db02a96] .o-card .o-card-cover .o-figure {
+.o-brand-logo[data-v-e7014221] .o-card .o-card-cover .o-figure {
     padding: var(--o-gap-2);
 }
 }
-.o-brand-logo[data-v-6db02a96] .o-card .o-card-cover .o-figure img {
+.o-brand-logo[data-v-e7014221] .o-card .o-card-cover .o-figure img {
   height: 56px;
 }
-.o-brand-logo .o-brand-logo-btn[data-v-6db02a96] {
+.o-brand-logo .o-brand-logo-btn[data-v-e7014221] {
   display: flex;
   align-items: center;
   gap: var(--o-gap-3) var(--o-gap-7);
 }
-.o-brand-logo .o-brand-logo-btn .o-btn:hover .o-icon[data-v-6db02a96], .o-brand-logo .o-brand-logo-btn .o-btn:active .o-icon[data-v-6db02a96] {
+.o-brand-logo .o-brand-logo-btn .o-btn:hover .o-icon[data-v-e7014221], .o-brand-logo .o-brand-logo-btn .o-btn:active .o-icon[data-v-e7014221] {
   transform: rotate(180deg);
 }
-.o-brand-logo .o-brand-logo-btn .o-btn .o-icon[data-v-6db02a96] {
+.o-brand-logo .o-brand-logo-btn .o-btn .o-icon[data-v-e7014221] {
   font-size: 24px;
   transition: rotate var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (max-width: 1680px) {
-.o-brand-logo .o-brand-logo-btn .o-btn .o-icon[data-v-6db02a96] {
+.o-brand-logo .o-brand-logo-btn .o-btn .o-icon[data-v-e7014221] {
     font-size: 20px;
 }
 }
 @media (max-width: 840px) {
-.o-brand-logo .o-brand-logo-btn .o-btn .o-icon[data-v-6db02a96] {
+.o-brand-logo .o-brand-logo-btn .o-btn .o-icon[data-v-e7014221] {
     font-size: 24px;
 }
 }

package/dist/treeshaking/components/brand/OBrandLogo.vue.mjs

@@ -2,7 +2,7 @@ import _sfc_main from "./OBrandLogo.vue2.mjs";
 import './OBrandLogo.css';
 import './OBrandLogo2.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _OBrandLogo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6db02a96"]]);
+const _OBrandLogo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e7014221"]]);
 export {
   _OBrandLogo as default
 };

package/dist/treeshaking/components/brand/OBrandLogo.vue2.mjs

@@ -52,7 +52,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     title: item.title,
                     cover: getCover(item),
                     "cover-fit": "contain",
-                    class: normalizeClass(["o-brand-logo-card", `type-${item.type}`])
+                    class: normalizeClass(["o-brand-logo-card", item.coverClass])
                   }, {
                     default: withCtx(() => [
                       createElementVNode("div", _hoisted_2, [

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-939aa46d] {
   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-939aa46d] {
     transform: rotate(-180deg);
 }
 }
-.header[data-v-bd55d99c] {
+.header[data-v-939aa46d] {
   --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-939aa46d] {
     --o-header-content-max-width: 100%;
     --o-header-content-padding: 64px;
 }
 }
 @media (max-width: 1440px) {
-.header[data-v-bd55d99c] {
+.header[data-v-939aa46d] {
     --o-header-height: 64px;
     --o-header-content-padding: 40px;
 }
 }
 @media (max-width: 1200px) {
-.header[data-v-bd55d99c] {
+.header[data-v-939aa46d] {
     --o-header-height: 56px;
     --o-header-content-padding: 32px;
 }
 }
-.header-wrap[data-v-bd55d99c] {
+.header-wrap[data-v-939aa46d] {
   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-939aa46d] {
   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-939aa46d] {
   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-939aa46d] {
     margin-right: 12px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.header-logo[data-v-bd55d99c] {
+.header-logo[data-v-939aa46d] {
     margin-right: 8px;
 }
 }
-.logo[data-v-bd55d99c] {
+.logo[data-v-939aa46d] {
   height: 32px;
 }
-.header-nav-top[data-v-bd55d99c] {
+.header-nav-top[data-v-939aa46d] {
   flex: 1;
   height: 100%;
   min-width: 0;
   overflow: hidden;
   position: relative;
 }
-.header-nav-flatten[data-v-bd55d99c] {
+.header-nav-flatten[data-v-939aa46d] {
   flex: 1;
   height: 100%;
   min-width: 0;
   position: relative;
 }
-.header-toolbar[data-v-bd55d99c] {
+.header-toolbar[data-v-939aa46d] {
   height: 100%;
   position: relative;
 }
-.header-nav-content[data-v-bd55d99c] {
+.header-nav-content[data-v-939aa46d] {
   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-939aa46d] {
   border-bottom: 1px solid var(--o-color-control4);
 }

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-939aa46d"]]);
 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, computed, provide, readonly, 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,7 +36,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const hoverIndex = ref();
     const hoverId = ref();
     const itemData = ref();
     const itemVisible = ref(false);
@@ -45,6 +44,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return (_a = itemData.value) == null ? void 0 : _a.label;
     });
     provide("hoveringNavLiName", hoveringNavLiName);
+    const navsWithChildren = computed(() => (props.navData ?? []).filter((nav) => {
+      var _a;
+      return (_a = nav.children) == null ? void 0 : _a.length;
+    }));
     const closeTimer = ref(null);
     const contentRef = ref();
     const lastMousePos = ref({ x: 0, y: 0 });
@@ -117,7 +120,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;
       }
@@ -220,16 +222,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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(navsWithChildren.value, (nav) => {
+            var _a;
+            return openBlock(), createBlock(HeaderContent, {
+              key: nav.id,
+              itemData: nav,
+              "item-visible": itemVisible.value,
+              "item-active": ((_a = itemData.value) == null ? void 0 : _a.id) === nav.id,
+              "bg-left": props.bgLeft,
+              "bg-right": props.bgRight,
+              community: props.community,
+              "hover-index": nav.id,
+              onHandleMouseenterSub: handleMouseenterSub,
+              onHandleMouseleaveSub: handleMouseleaveSub
+            }, null, 8, ["itemData", "item-visible", "item-active", "bg-left", "bg-right", "community", "hover-index"]);
+          }), 128))
         ], 544)) : createCommentVNode("", true)
       ]);
     };