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

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

@@ -0,0 +1,214 @@
+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 = { 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({
+  __name: "OHeader",
+  props: {
+    logo: {},
+    community: {},
+    navData: {},
+    bgLeft: {},
+    bgRight: {},
+    activeIndex: {},
+    codeData: {},
+    langData: {},
+    isSimpleHeader: { type: Boolean },
+    headerTitle: {},
+    isFlatten: { type: Boolean, default: false }
+  },
+  emits: ["go-home", "handle-click", "nav-layout"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const hoverIndex = ref();
+    const hoverId = ref();
+    const itemData = ref();
+    const itemVisible = ref(false);
+    const closeTimer = ref(null);
+    const contentRef = ref();
+    const lastMousePos = ref({ x: 0, y: 0 });
+    let safetyTracker = null;
+    const cancelClose = () => {
+      if (closeTimer.value !== null) {
+        clearTimeout(closeTimer.value);
+        closeTimer.value = null;
+      }
+      removeSafetyTracker();
+    };
+    const removeSafetyTracker = () => {
+      if (safetyTracker) {
+        document.removeEventListener("mousemove", safetyTracker);
+        safetyTracker = null;
+      }
+    };
+    const isInTriangle = (px, py, ax, ay, bx, by, cx, cy) => {
+      const d1 = (px - bx) * (ay - by) - (ax - bx) * (py - by);
+      const d2 = (px - cx) * (by - cy) - (bx - cx) * (py - cy);
+      const d3 = (px - ax) * (cy - ay) - (cx - ax) * (py - ay);
+      const hasNeg = d1 < 0 || d2 < 0 || d3 < 0;
+      const hasPos = d1 > 0 || d2 > 0 || d3 > 0;
+      return !(hasNeg && hasPos);
+    };
+    const scheduleClose = (useTriangle = true) => {
+      cancelClose();
+      const exitPos = { ...lastMousePos.value };
+      const startTimer = () => {
+        closeTimer.value = window.setTimeout(() => {
+          removeSafetyTracker();
+          itemVisible.value = false;
+          closeTimer.value = null;
+        }, 100);
+      };
+      if (useTriangle && contentRef.value && itemVisible.value) {
+        const rect = contentRef.value.getBoundingClientRect();
+        safetyTracker = (e) => {
+          const mx = e.clientX;
+          const my = e.clientY;
+          if (mx >= rect.left && mx <= rect.right && my >= rect.top && my <= rect.bottom) {
+            cancelClose();
+            return;
+          }
+          const inTriangle = isInTriangle(mx, my, exitPos.x, exitPos.y, rect.left, rect.top, rect.right, rect.top);
+          if (!inTriangle) {
+            cancelClose();
+            itemVisible.value = false;
+          } else {
+            if (closeTimer.value !== null) {
+              clearTimeout(closeTimer.value);
+            }
+            startTimer();
+          }
+        };
+        document.addEventListener("mousemove", safetyTracker);
+      }
+      startTimer();
+    };
+    const onMousemoveHeader = (e) => {
+      lastMousePos.value = { x: e.clientX, y: e.clientY };
+    };
+    const navLayout = (val) => {
+      emit("nav-layout", val);
+    };
+    const goHome = () => {
+      emit("go-home");
+    };
+    const handleMouseenter = (val) => {
+      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;
+      }
+    };
+    const handleMouseleave = () => {
+      scheduleClose(true);
+    };
+    const handleClick = (val) => {
+      emit("handle-click", val);
+    };
+    const handleMouseenterSub = (val) => {
+      cancelClose();
+      hoverId.value = val;
+    };
+    const handleMouseleaveSub = (val) => {
+      hoverId.value = val;
+      scheduleClose(false);
+    };
+    onUnmounted(() => {
+      cancelClose();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: "header-wrap",
+          onMousemove: onMousemoveHeader
+        }, [
+          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)
+            ]),
+            !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),
+        !props.isFlatten ? (openBlock(), createElementBlock("div", {
+          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"])
+        ], 544)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,106 @@
+.hover-icon-rotate .o-icon[data-v-9c0f44cf] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-9c0f44cf] {
+    transform: rotate(-180deg);
+}
+}
+.header[data-v-9c0f44cf] {
+  --o-header-height: 56px;
+}
+.header-box[data-v-9c0f44cf] {
+  background-color: var(--o-color-fill2);
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 999;
+  box-shadow: var(--o-shadow-1);
+  backdrop-filter: blur(5px);
+}
+.header-wrap[data-v-9c0f44cf] {
+  display: flex;
+  align-items: center;
+  height: var(--o-header-height);
+  justify-content: space-between;
+  position: relative;
+}
+.header-simple[data-v-9c0f44cf] {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.header-simple .o-icon[data-v-9c0f44cf] {
+  font-size: 24px;
+}
+.header-simple .simple-header-left[data-v-9c0f44cf] {
+  display: flex;
+  gap: 16px;
+  color: var(--o-color-info1);
+  overflow: hidden;
+  flex-grow: 1;
+}
+.header-simple .simple-header-left .header-title[data-v-9c0f44cf] {
+  color: var(--o-color-info1);
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.header-simple .simple-header-left .header-title[data-v-9c0f44cf] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.header-simple .simple-header-left .header-title[data-v-9c0f44cf] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.header-simple .simple-header-left .header-title[data-v-9c0f44cf] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.header-simple .simple-header-left .header-title[data-v-9c0f44cf] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.header-simple .simple-header-right[data-v-9c0f44cf] {
+  flex-shrink: 0;
+  color: var(--o-color-info1);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
+.header-left[data-v-9c0f44cf] {
+  display: flex;
+  align-items: center;
+}
+.header-left .o-icon[data-v-9c0f44cf] {
+  --icon-size: 24px;
+}
+.logo[data-v-9c0f44cf] {
+  height: 24px;
+  width: auto;
+}
+.header-content-mb[data-v-9c0f44cf] {
+  position: fixed;
+  top: var(--o-header-height);
+  left: 0;
+  height: 0;
+  z-index: 998;
+}
+.header-content-active[data-v-9c0f44cf] {
+  width: 100%;
+  height: calc(100vh - var(--o-header-height));
+}

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

@@ -0,0 +1,170 @@
+import { NavT, LangItemT } from './types.ts';
+export interface OHeaderT {
+    (e: 'go-back'): void;
+    (e: 'lang-click', val: LangItemT): void;
+    (e: 'go-home'): void;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        rightConfig?(_: {}): any;
+        logo?(_: {}): any;
+        toolbar?(_: {}): any;
+        tool?(_: {}): any;
+    };
+    refs: {
+        mobileNav: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $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 "onHandle-click"?: ((val: any) => any) | undefined;
+                readonly "onOn-click"?: (() => any) | undefined;
+                readonly "onLang-click"?: ((val: LangItemT) => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: import('vue').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "handle-click", val: any) => void) & ((event: "on-click") => void) & ((event: "lang-click", val: LangItemT) => void);
+            $el: HTMLDivElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('./types.ts').NavMobileItemT> & Readonly<{
+                "onHandle-click"?: ((val: any) => any) | undefined;
+                "onOn-click"?: (() => any) | undefined;
+                "onLang-click"?: ((val: LangItemT) => any) | undefined;
+            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+                "handle-click": (val: any) => any;
+                "on-click": () => any;
+                "lang-click": (val: LangItemT) => any;
+            }, string, {
+                navData: import('./types.ts').NavItemT[];
+                menuShow: boolean;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $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[];
+            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" | "menuShow"> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                tool?(_: {}): any;
+            };
+        }) | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<NavT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "go-home": () => any;
+    "lang-click": (val: LangItemT) => any;
+    "go-back": () => any;
+}, string, import('vue').PublicProps, Readonly<NavT> & Readonly<{
+    "onGo-home"?: (() => any) | undefined;
+    "onLang-click"?: ((val: LangItemT) => any) | undefined;
+    "onGo-back"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    mobileNav: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $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 "onHandle-click"?: ((val: any) => any) | undefined;
+            readonly "onOn-click"?: (() => any) | undefined;
+            readonly "onLang-click"?: ((val: LangItemT) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "handle-click", val: any) => void) & ((event: "on-click") => void) & ((event: "lang-click", val: LangItemT) => void);
+        $el: HTMLDivElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('./types.ts').NavMobileItemT> & Readonly<{
+            "onHandle-click"?: ((val: any) => any) | undefined;
+            "onOn-click"?: (() => any) | undefined;
+            "onLang-click"?: ((val: LangItemT) => any) | undefined;
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            "handle-click": (val: any) => any;
+            "on-click": () => any;
+            "lang-click": (val: LangItemT) => any;
+        }, string, {
+            navData: import('./types.ts').NavItemT[];
+            menuShow: boolean;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $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[];
+        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" | "menuShow"> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            tool?(_: {}): any;
+        };
+    }) | null;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1,142 @@
+import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, unref, toDisplayString, createCommentVNode, renderSlot, Fragment, createBlock, normalizeClass } from "vue";
+import { OIcon, OIconArrowLeft } from "@opensig/opendesign";
+import ContentWrapper from "../common/ContentWrapper.vue.mjs";
+import HeaderNavMobile from "./components/HeaderNavMobile.vue.mjs";
+import IconClose from "../../_virtual/icon-close.mjs";
+import IconMenu from "../../_virtual/icon-header-menu.mjs";
+const _hoisted_1 = { class: "header" };
+const _hoisted_2 = { class: "header-box" };
+const _hoisted_3 = {
+  key: 0,
+  class: "header-simple"
+};
+const _hoisted_4 = { class: "simple-header-left" };
+const _hoisted_5 = {
+  key: 0,
+  class: "header-title"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "simple-header-right"
+};
+const _hoisted_7 = { class: "header-left" };
+const _hoisted_8 = { class: "header-center" };
+const _hoisted_9 = ["src"];
+const _hoisted_10 = { class: "header-right" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OHeaderMobile",
+  props: {
+    logo: {},
+    community: {},
+    navData: {},
+    bgLeft: {},
+    bgRight: {},
+    activeIndex: {},
+    codeData: {},
+    langData: {},
+    isSimpleHeader: { type: Boolean },
+    headerTitle: {},
+    isFlatten: { type: Boolean }
+  },
+  emits: ["go-back", "lang-click", "go-home"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const goBack = () => {
+      emit("go-back");
+    };
+    const goHome = () => {
+      emit("go-home");
+    };
+    const menuShow = ref(false);
+    const menuPanel = () => {
+      setTimeout(() => {
+        menuShow.value = !menuShow.value;
+      }, 200);
+    };
+    const mobileClick = () => {
+      menuPanel();
+    };
+    const handleClick = () => {
+      menuPanel();
+    };
+    const langClick = (val) => {
+      emit("lang-click", val);
+      menuPanel();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(ContentWrapper, { class: "header-wrap" }, {
+            default: withCtx(() => [
+              __props.isSimpleHeader ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                createElementVNode("div", _hoisted_4, [
+                  createVNode(unref(OIcon), { onClick: goBack }, {
+                    default: withCtx(() => [
+                      createVNode(unref(OIconArrowLeft))
+                    ]),
+                    _: 1
+                  }),
+                  __props.headerTitle ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.headerTitle), 1)) : createCommentVNode("", true)
+                ]),
+                _ctx.$slots.rightConfig ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                  renderSlot(_ctx.$slots, "rightConfig", {}, void 0, true)
+                ])) : createCommentVNode("", true)
+              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createElementVNode("div", _hoisted_7, [
+                  createVNode(unref(OIcon), { onClick: menuPanel }, {
+                    default: withCtx(() => [
+                      !menuShow.value ? (openBlock(), createBlock(unref(IconMenu), { key: 0 })) : (openBlock(), createBlock(unref(IconClose), { key: 1 }))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                createElementVNode("div", _hoisted_8, [
+                  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_9)) : createCommentVNode("", true)
+                    ], true)
+                  ])
+                ]),
+                createElementVNode("div", _hoisted_10, [
+                  renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
+                ])
+              ], 64))
+            ]),
+            _: 3
+          })
+        ]),
+        createElementVNode("div", {
+          class: normalizeClass(["header-content-mb", { "header-content-active": menuShow.value }])
+        }, [
+          createVNode(HeaderNavMobile, {
+            ref: "mobileNav",
+            "nav-data": __props.navData,
+            "code-data": __props.codeData,
+            "lang-data": __props.langData,
+            "menu-show": menuShow.value,
+            onHandleClick: handleClick,
+            onOnClick: mobileClick,
+            onLangClick: langClick
+          }, {
+            tool: withCtx(() => [
+              renderSlot(_ctx.$slots, "tool", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["nav-data", "code-data", "lang-data", "menu-show"])
+        ], 2)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};