@opendesign-plus/components 0.0.1-rc.39 → 0.0.1-rc.40

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

@@ -1,15 +1,35 @@
-.hover-icon-rotate .o-icon[data-v-bfc2a089] {
+.hover-icon-rotate .o-icon[data-v-3512434a] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-bfc2a089] {
+.hover-icon-rotate:hover .o-icon[data-v-3512434a] {
     transform: rotate(-180deg);
 }
 }
-.header[data-v-bfc2a089] {
+.header[data-v-3512434a] {
   --o-header-height: 72px;
+  --o-header-content-max-width: 1488px;
+  --o-header-content-padding: 0;
 }
-.header-wrap[data-v-bfc2a089] {
+@media (max-width: 1680px) {
+.header[data-v-3512434a] {
+    --o-header-content-max-width: 100%;
+    --o-header-content-padding: 64px;
+}
+}
+@media (max-width: 1440px) {
+.header[data-v-3512434a] {
+    --o-header-height: 64px;
+    --o-header-content-padding: 40px;
+}
+}
+@media (max-width: 1200px) {
+.header[data-v-3512434a] {
+    --o-header-height: 56px;
+    --o-header-content-padding: 32px;
+}
+}
+.header-wrap[data-v-3512434a] {
   background-color: var(--o-color-fill2);
   position: fixed;
   left: 0;
@@ -20,13 +40,15 @@
   backdrop-filter: blur(5px);
   height: var(--o-header-height);
 }
-.header-content[data-v-bfc2a089] {
+.header-content[data-v-3512434a] {
   display: flex;
   align-items: center;
   height: 100%;
-  --layout-content-padding: 28px;
+  max-width: var(--o-header-content-max-width);
+  margin: 0 auto;
+  padding: 0 var(--o-header-content-padding);
 }
-.header-logo[data-v-bfc2a089] {
+.header-logo[data-v-3512434a] {
   height: 100%;
   display: flex;
   align-items: center;
@@ -34,21 +56,27 @@
   margin-right: 24px;
   flex-shrink: 0;
 }
-.logo[data-v-bfc2a089] {
+.logo[data-v-3512434a] {
   height: 32px;
 }
-.header-nav[data-v-bfc2a089] {
+.header-nav-top[data-v-3512434a] {
   flex: 1;
   height: 100%;
   min-width: 0;
   overflow: hidden;
   position: relative;
 }
-.header-toolbar[data-v-bfc2a089] {
+.header-nav-flatten[data-v-3512434a] {
+  flex: 1;
+  height: 100%;
+  min-width: 0;
+  position: relative;
+}
+.header-toolbar[data-v-3512434a] {
   height: 100%;
   position: relative;
 }
-.header-nav-content[data-v-bfc2a089] {
+.header-nav-content[data-v-3512434a] {
   position: fixed;
   top: var(--o-header-height);
   left: 0;
@@ -57,4 +85,7 @@
   z-index: 998;
   box-shadow: var(--o-shadow-1);
   overflow: hidden;
+}
+[data-o-theme*=dark] .header-wrap[data-v-3512434a] {
+  border-bottom: 1px solid var(--o-color-control4);
 }

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

@@ -2,12 +2,14 @@ import { NavT } from './types.ts';
 export interface OHeaderT {
     (e: 'go-home'): void;
     (e: 'handle-click', val: any): void;
+    (e: 'nav-layout', val: any): void;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         logo?(_: {}): any;
         nav?(_: {}): any;
+        nav?(_: {}): any;
         toolbar?(_: {}): any;
     };
     refs: {
@@ -18,11 +20,15 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<NavT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "handle-click": (val: any) => any;
+    "nav-layout": (val: any) => any;
     "go-home": () => any;
 }, string, import('vue').PublicProps, Readonly<NavT> & Readonly<{
     "onHandle-click"?: ((val: any) => any) | undefined;
+    "onNav-layout"?: ((val: any) => any) | undefined;
     "onGo-home"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+}>, {
+    isFlatten: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     contentRef: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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

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

@@ -1,12 +1,20 @@
-import { defineComponent, ref, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, renderSlot, createCommentVNode, createBlock } from "vue";
-import ContentWrapper from "../common/ContentWrapper.vue.mjs";
+import { defineComponent, ref, onUnmounted, openBlock, createElementBlock, createElementVNode, renderSlot, createCommentVNode, createBlock, createVNode } from "vue";
 import HeaderNav from "./components/HeaderNav.vue.mjs";
 import HeaderContent from "./components/HeaderContent.vue.mjs";
+import HeaderFlatten from "./components/HeaderFlatten.vue.mjs";
 const _hoisted_1 = { class: "header" };
-const _hoisted_2 = ["src"];
-const _hoisted_3 = { class: "header-nav" };
+const _hoisted_2 = { class: "header-content" };
+const _hoisted_3 = ["src"];
 const _hoisted_4 = {
   key: 0,
+  class: "header-nav-top"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "header-nav-flatten"
+};
+const _hoisted_6 = {
+  key: 2,
   class: "header-toolbar"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -21,9 +29,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     codeData: {},
     langData: {},
     isSimpleHeader: { type: Boolean },
-    headerTitle: {}
+    headerTitle: {},
+    isFlatten: { type: Boolean, default: false }
   },
-  emits: ["go-home", "handle-click"],
+  emits: ["go-home", "handle-click", "nav-layout"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -93,6 +102,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const onMousemoveHeader = (e) => {
       lastMousePos.value = { x: e.clientX, y: e.clientY };
     };
+    const navLayout = (val) => {
+      emit("nav-layout", val);
+    };
     const goHome = () => {
       emit("go-home");
     };
@@ -128,42 +140,55 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: "header-wrap",
           onMousemove: onMousemoveHeader
         }, [
-          createVNode(ContentWrapper, { class: "header-content" }, {
-            default: withCtx(() => [
-              createElementVNode("div", {
-                class: "header-logo",
-                onClick: goHome
-              }, [
-                renderSlot(_ctx.$slots, "logo", {}, () => [
-                  props.logo ? (openBlock(), createElementBlock("img", {
-                    key: 0,
-                    class: "logo",
-                    alt: "logo",
-                    src: props.logo
-                  }, null, 8, _hoisted_2)) : createCommentVNode("", true)
-                ], true)
-              ]),
-              createElementVNode("div", _hoisted_3, [
-                renderSlot(_ctx.$slots, "nav", {}, () => [
-                  props.navData ? (openBlock(), createBlock(HeaderNav, {
-                    key: 0,
-                    "nav-data": props.navData,
-                    hoverId: hoverId.value,
-                    "active-index": props.activeIndex,
-                    onHandleMouseenter: handleMouseenter,
-                    onHandleMouseleave: handleMouseleave,
-                    onHandleClick: handleClick
-                  }, null, 8, ["nav-data", "hoverId", "active-index"])) : createCommentVNode("", true)
-                ], true)
-              ]),
-              _ctx.$slots.toolbar ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
-              ])) : createCommentVNode("", true)
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", {
+              class: "header-logo",
+              onClick: goHome
+            }, [
+              renderSlot(_ctx.$slots, "logo", {}, () => [
+                props.logo ? (openBlock(), createElementBlock("img", {
+                  key: 0,
+                  class: "logo",
+                  alt: "logo",
+                  src: props.logo
+                }, null, 8, _hoisted_3)) : createCommentVNode("", true)
+              ], true)
             ]),
-            _: 3
-          })
+            !props.isFlatten ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              renderSlot(_ctx.$slots, "nav", {}, () => [
+                props.navData ? (openBlock(), createBlock(HeaderNav, {
+                  key: 0,
+                  "nav-data": props.navData,
+                  hoverId: hoverId.value,
+                  "active-index": props.activeIndex,
+                  onHandleMouseenter: handleMouseenter,
+                  onHandleMouseleave: handleMouseleave,
+                  onHandleClick: handleClick,
+                  onNavLayout: navLayout
+                }, null, 8, ["nav-data", "hoverId", "active-index"])) : createCommentVNode("", true)
+              ], true)
+            ])) : createCommentVNode("", true),
+            props.isFlatten ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              renderSlot(_ctx.$slots, "nav", {}, () => [
+                props.navData ? (openBlock(), createBlock(HeaderFlatten, {
+                  key: 0,
+                  "nav-data": props.navData,
+                  hoverId: hoverId.value,
+                  "active-index": props.activeIndex,
+                  onHandleMouseenter: handleMouseenter,
+                  onHandleMouseleave: handleMouseleave,
+                  onHandleClick: handleClick,
+                  onNavLayout: navLayout
+                }, null, 8, ["nav-data", "hoverId", "active-index"])) : createCommentVNode("", true)
+              ], true)
+            ])) : createCommentVNode("", true),
+            _ctx.$slots.toolbar ? (openBlock(), createElementBlock("div", _hoisted_6, [
+              renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
+            ])) : createCommentVNode("", true)
+          ])
         ], 32),
-        createElementVNode("div", {
+        !props.isFlatten ? (openBlock(), createElementBlock("div", {
+          key: 0,
           ref_key: "contentRef",
           ref: contentRef,
           class: "header-nav-content",
@@ -179,7 +204,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onHandleMouseenterSub: handleMouseenterSub,
             onHandleMouseleaveSub: handleMouseleaveSub
           }, null, 8, ["itemData", "item-visible", "bg-left", "bg-right", "community", "hover-index"])
-        ], 544)
+        ], 544)) : createCommentVNode("", true)
       ]);
     };
   }

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

@@ -19,8 +19,8 @@ declare function __VLS_template(): {
             $props: {
                 readonly menuShow: boolean;
                 readonly navData: import('./types.ts').NavItemT[];
-                readonly codeData?: import('./types.ts').CodeT[] | undefined;
-                readonly langData?: import('./types.ts').LangT[] | undefined;
+                readonly codeData?: import('./types.ts').CodeT | undefined;
+                readonly langData?: import('./types.ts').LangT | undefined;
                 readonly "onHandle-click"?: ((val: any) => any) | undefined;
                 readonly "onOn-click"?: (() => any) | undefined;
                 readonly "onLang-click"?: ((val: LangItemT) => any) | undefined;
@@ -47,8 +47,6 @@ declare function __VLS_template(): {
                 "lang-click": (val: LangItemT) => any;
             }, string, {
                 navData: import('./types.ts').NavItemT[];
-                codeData: import('./types.ts').CodeT[];
-                langData: import('./types.ts').LangT[];
                 menuShow: boolean;
             }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
@@ -72,14 +70,12 @@ declare function __VLS_template(): {
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
         } & Readonly<{
             navData: import('./types.ts').NavItemT[];
-            codeData: import('./types.ts').CodeT[];
-            langData: import('./types.ts').LangT[];
             menuShow: boolean;
         }> & Omit<Readonly<import('./types.ts').NavMobileItemT> & Readonly<{
             "onHandle-click"?: ((val: any) => any) | undefined;
             "onOn-click"?: (() => any) | undefined;
             "onLang-click"?: ((val: LangItemT) => any) | undefined;
-        }>, "navData" | "codeData" | "langData" | "menuShow"> & {} & import('vue').ComponentCustomProperties & {} & {
+        }>, "navData" | "menuShow"> & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
                 tool?(_: {}): any;
             };
@@ -103,8 +99,8 @@ declare const __VLS_component: import('vue').DefineComponent<NavT, {}, {}, {}, {
         $props: {
             readonly menuShow: boolean;
             readonly navData: import('./types.ts').NavItemT[];
-            readonly codeData?: import('./types.ts').CodeT[] | undefined;
-            readonly langData?: import('./types.ts').LangT[] | undefined;
+            readonly codeData?: import('./types.ts').CodeT | undefined;
+            readonly langData?: import('./types.ts').LangT | undefined;
             readonly "onHandle-click"?: ((val: any) => any) | undefined;
             readonly "onOn-click"?: (() => any) | undefined;
             readonly "onLang-click"?: ((val: LangItemT) => any) | undefined;
@@ -131,8 +127,6 @@ declare const __VLS_component: import('vue').DefineComponent<NavT, {}, {}, {}, {
             "lang-click": (val: LangItemT) => any;
         }, string, {
             navData: import('./types.ts').NavItemT[];
-            codeData: import('./types.ts').CodeT[];
-            langData: import('./types.ts').LangT[];
             menuShow: boolean;
         }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -156,14 +150,12 @@ declare const __VLS_component: import('vue').DefineComponent<NavT, {}, {}, {}, {
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
     } & Readonly<{
         navData: import('./types.ts').NavItemT[];
-        codeData: import('./types.ts').CodeT[];
-        langData: import('./types.ts').LangT[];
         menuShow: boolean;
     }> & Omit<Readonly<import('./types.ts').NavMobileItemT> & Readonly<{
         "onHandle-click"?: ((val: any) => any) | undefined;
         "onOn-click"?: (() => any) | undefined;
         "onLang-click"?: ((val: LangItemT) => any) | undefined;
-    }>, "navData" | "codeData" | "langData" | "menuShow"> & {} & import('vue').ComponentCustomProperties & {} & {
+    }>, "navData" | "menuShow"> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             tool?(_: {}): any;
         };

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

@@ -35,7 +35,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     codeData: {},
     langData: {},
     isSimpleHeader: { type: Boolean },
-    headerTitle: {}
+    headerTitle: {},
+    isFlatten: { type: Boolean }
   },
   emits: ["go-back", "lang-click", "go-home"],
   setup(__props, { emit: __emit }) {