@opendesign-plus/components 0.0.1-rc.35 → 0.0.1-rc.36

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

@@ -0,0 +1,419 @@
+.hover-icon-rotate .o-icon[data-v-9169adf0] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-9169adf0] {
+    transform: rotate(-180deg);
+}
+}
+.header-nav[data-v-9169adf0] {
+  flex: 1;
+  justify-content: space-between;
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+  background-color: var(--o-color-fill2);
+  transform: translateX(-130%);
+  transition-duration: 0.333s;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.5, 0, 0.84, 0.25);
+  display: block;
+  opacity: 0;
+}
+.header-nav.active[data-v-9169adf0] {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+.o-nav[data-v-9169adf0] {
+  height: 100%;
+  position: relative;
+  width: 99px;
+  background: var(--o-color-fill1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.o-nav .o-nav-list[data-v-9169adf0] {
+  padding: 0;
+  margin: 0;
+  height: auto;
+}
+.o-nav .o-nav-list > li[data-v-9169adf0] {
+  position: relative;
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-nav .o-nav-list > li[data-v-9169adf0] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-nav .o-nav-list > li[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-nav .o-nav-list > li[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-nav .o-nav-list > li[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.o-nav .o-nav-list > li[data-v-9169adf0] {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: var(--o-gap-2);
+  color: var(--o-color-info1);
+}
+.o-nav .o-nav-list > li.active[data-v-9169adf0] {
+  color: var(--o-color-primary1);
+  background: var(--o-color-fill2);
+  font-weight: 500;
+}
+.nav-aside[data-v-9169adf0] {
+  position: fixed;
+  background-color: var(--o-color-fill2);
+  top: 0;
+  left: 0;
+  width: calc(100% - 99px);
+  transform: translateX(99px);
+  height: 100%;
+  z-index: 190;
+}
+.nav-aside .nav-aside-wrapper[data-v-9169adf0] {
+  overflow-y: auto;
+  padding: 16px 12px 32px;
+  height: 100%;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content[data-v-9169adf0] {
+  display: block;
+  flex: 0 1 auto;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content + .nav-aside-content[data-v-9169adf0] {
+  position: relative;
+  padding-top: var(--o-gap-3);
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content + .nav-aside-content[data-v-9169adf0]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  background-color: rgba(var(--o-grey-14), 0.1);
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-9169adf0] {
+  color: var(--o-color-info3);
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-9169adf0] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .item-not-children[data-v-9169adf0] {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .item-not-children .o-tag[data-v-9169adf0] {
+  margin-left: var(--o-gap-2);
+  --layout-pkg-radius: 100vh;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .item-not-children .o-icon[data-v-9169adf0] {
+  margin-left: var(--o-gap-2);
+}
+.nav-aside .nav-aside-wrapper .source-code-item[data-v-9169adf0] {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  color: var(--o-color-info1);
+}
+.nav-aside .nav-aside-wrapper .source-code-item.active[data-v-9169adf0] {
+  color: var(--o-color-primary1);
+}
+.nav-aside .nav-aside-wrapper .source-code-item + .source-code-item[data-v-9169adf0] {
+  border-top: 1px solid var(--o-color-control4);
+}
+.nav-aside .nav-aside-wrapper .source-code-item .icon[data-v-9169adf0] {
+  margin-left: var(--o-gap-2);
+}
+.nav-aside .nav-aside-wrapper[data-v-9169adf0]::-webkit-scrollbar-track {
+  border-radius: 3px;
+}
+.nav-aside .nav-aside-wrapper[data-v-9169adf0]::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+.nav-aside .nav-aside-wrapper[data-v-9169adf0]::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--o-color-control1);
+}
+.nav-aside .container-mobile[data-v-9169adf0] {
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .container-mobile[data-v-9169adf0] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .container-mobile[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .container-mobile[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .container-mobile[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .container-mobile .o-icon[data-v-9169adf0] {
+  --icon-size: 16px;
+  margin-left: var(--o-gap-2);
+}
+.nav-aside .content-container-mobile[data-v-9169adf0] {
+  margin-top: var(--o-gap-3);
+}
+.nav-aside .content-container-mobile[data-v-9169adf0]:first-child {
+  margin-top: 8px;
+}
+.nav-aside .content-container-mobile[data-v-9169adf0]:last-child {
+  margin-bottom: 12px;
+}
+.nav-aside .content-container-mobile .content-subtitle[data-v-9169adf0] {
+  color: var(--o-color-info1);
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-9169adf0] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .content-container-mobile .content-tag[data-v-9169adf0] {
+  margin-left: var(--o-gap-2);
+  --layout-pkg-radius: var(--o-radius-xs);
+}
+.nav-aside .content-container-mobile .desc-container[data-v-9169adf0] {
+  overflow: hidden;
+  position: relative;
+}
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+  color: var(--o-color-info2);
+  margin-top: var(--o-gap-1);
+  text-align: justify;
+  word-break: normal;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+@media (max-width: 600px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.header-tool[data-v-9169adf0] {
+  position: absolute;
+  bottom: 36px;
+  left: 0;
+  width: 99px;
+  display: flex;
+  height: auto;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.header-tool-item[data-v-9169adf0] {
+  width: 99px;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: var(--o-gap-2);
+  color: var(--o-color-info1);
+}
+.header-tool-item.active[data-v-9169adf0] {
+  color: var(--o-color-primary1);
+  background: var(--o-color-fill2);
+  font-weight: 500;
+}
+.header-tool-item[data-v-9169adf0] {
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.header-tool-item[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.header-tool-item[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.header-tool-item[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.header-tool-item[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.header-tool-item[data-v-9169adf0] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+.header-tool-item[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+.header-tool-item[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+.header-tool-item[data-v-9169adf0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+.header-tool-item[data-v-9169adf0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.other-tool[data-v-9169adf0] {
+  width: 99px;
+  margin-top: 8px;
+  text-align: center;
+}

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

@@ -0,0 +1,36 @@
+import { NavMobileItemT, LangItemT } from '../types.ts';
+export interface OHeaderEmitsT {
+    (e: 'on-click'): void;
+    (e: 'lang-click', val: LangItemT): void;
+    (e: 'handle-click', val: any): void;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        tool?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<NavMobileItemT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "handle-click": (val: any) => any;
+    "on-click": () => any;
+    "lang-click": (val: LangItemT) => any;
+}, string, import('vue').PublicProps, Readonly<NavMobileItemT> & Readonly<{
+    "onHandle-click"?: ((val: any) => any) | undefined;
+    "onOn-click"?: (() => any) | undefined;
+    "onLang-click"?: ((val: LangItemT) => any) | undefined;
+}>, {
+    navData: import('../../../index.ts').NavItemT[];
+    codeData: import('../../../index.ts').CodeT[];
+    langData: import('../../../index.ts').LangT[];
+    menuShow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, 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/components/HeaderNavMobile.vue.mjs

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

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

@@ -0,0 +1,229 @@
+import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, createBlock, unref, withCtx, resolveDynamicComponent, createCommentVNode, createTextVNode, renderSlot } from "vue";
+import { OIcon, OTag } from "@opensig/opendesign";
+import { NavType } from "../types.mjs";
+const _hoisted_1 = { class: "o-nav" };
+const _hoisted_2 = { class: "o-nav-list" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "nav-aside" };
+const _hoisted_5 = {
+  key: 0,
+  class: "nav-aside-wrapper"
+};
+const _hoisted_6 = ["value"];
+const _hoisted_7 = { class: "content-label" };
+const _hoisted_8 = { class: "container-mobile" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "item-label" };
+const _hoisted_11 = { class: "desc-container" };
+const _hoisted_12 = { class: "item-desc" };
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = { class: "item-label" };
+const _hoisted_15 = {
+  key: 1,
+  class: "nav-aside-wrapper"
+};
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = { class: "header-tool" };
+const _hoisted_18 = {
+  key: 2,
+  class: "other-tool"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderNavMobile",
+  props: {
+    menuShow: { type: Boolean, default: false },
+    navData: { default: () => [] },
+    codeData: { default: () => [] },
+    langData: { default: () => [] }
+  },
+  emits: ["on-click", "lang-click", "handle-click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const navActive = ref("");
+    const navInfo = ref({});
+    const handleNavClick = (item, val) => {
+      var _a;
+      if (val === NavType.NAV) {
+        if ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) {
+          navActive.value = item.id;
+          navInfo.value = item;
+        } else {
+          emit("handle-click", item);
+        }
+      } else if (val === NavType.CODE) {
+        navActive.value = val;
+        navInfo.value = props.codeData.list;
+      } else if (val === NavType.LANG) {
+        navActive.value = val;
+        navInfo.value = props.langData.list;
+      }
+    };
+    const onClick = (url, target) => {
+      window.open(url, target ? target : "_self");
+      emit("on-click");
+    };
+    const onClickNav = (val) => {
+      if (navActive.value === NavType.CODE) {
+        onClick(val.href, val == null ? void 0 : val.target);
+      } else if (navActive.value === NavType.LANG) {
+        emit("lang-click", val);
+      }
+    };
+    onMounted(() => {
+      navActive.value = props.navData[0].id;
+      navInfo.value = props.navData[0];
+    });
+    watch(
+      () => props.navData || props.codeData || props.langData,
+      () => {
+        if (navActive.value === NavType.CODE) {
+          navInfo.value = props.codeData.list;
+        } else if (navActive.value === NavType.LANG) {
+          navInfo.value = props.langData.list;
+        } else {
+          navInfo.value = props.navData.find((item) => item.id === navActive.value);
+        }
+      },
+      {
+        deep: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["header-nav", { active: __props.menuShow }])
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("ul", _hoisted_2, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.navData, (item) => {
+              return openBlock(), createElementBlock("li", {
+                key: item.id,
+                class: normalizeClass({
+                  active: navActive.value === item.id
+                })
+              }, [
+                createElementVNode("span", {
+                  onClick: ($event) => handleNavClick(item, "nav")
+                }, toDisplayString(item.label), 9, _hoisted_3)
+              ], 2);
+            }), 128))
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            navActive.value !== "code" && navActive.value !== "lang" ? (openBlock(), createElementBlock("ul", _hoisted_5, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(navInfo.value.children, (item) => {
+                return openBlock(), createElementBlock("li", {
+                  value: item.label,
+                  key: item.label,
+                  class: "nav-aside-content"
+                }, [
+                  (item == null ? void 0 : item.children) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    createElementVNode("p", _hoisted_7, toDisplayString(item.label), 1),
+                    createElementVNode("div", _hoisted_8, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(item == null ? void 0 : item.children, (subItem) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: subItem.label,
+                          class: "content-container-mobile"
+                        }, [
+                          createElementVNode("a", {
+                            onClick: ($event) => onClick(subItem.href, subItem == null ? void 0 : subItem.target),
+                            rel: "noopener noreferrer",
+                            class: "content-subtitle"
+                          }, [
+                            createElementVNode("span", _hoisted_10, toDisplayString(subItem.label), 1),
+                            subItem.icon ? (openBlock(), createBlock(unref(OIcon), { key: 0 }, {
+                              default: withCtx(() => [
+                                (openBlock(), createBlock(resolveDynamicComponent(subItem.icon), { class: "icon" }))
+                              ]),
+                              _: 2
+                            }, 1024)) : createCommentVNode("", true),
+                            subItem.tag ? (openBlock(), createBlock(unref(OTag), {
+                              key: 1,
+                              round: "pill",
+                              color: "danger",
+                              size: "small",
+                              class: "content-tag"
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(subItem.tag), 1)
+                              ]),
+                              _: 2
+                            }, 1024)) : createCommentVNode("", true)
+                          ], 8, _hoisted_9),
+                          createElementVNode("div", _hoisted_11, [
+                            createElementVNode("p", _hoisted_12, toDisplayString(subItem.description), 1)
+                          ])
+                        ]);
+                      }), 128))
+                    ])
+                  ], 64)) : (openBlock(), createElementBlock("a", {
+                    key: 1,
+                    onClick: ($event) => onClick(item.href, item == null ? void 0 : item.target),
+                    rel: "noopener noreferrer",
+                    class: "content-subtitle item-not-children"
+                  }, [
+                    createElementVNode("span", _hoisted_14, toDisplayString(item.label), 1),
+                    item.icon ? (openBlock(), createBlock(unref(OIcon), { key: 0 }, {
+                      default: withCtx(() => [
+                        (openBlock(), createBlock(resolveDynamicComponent(item.icon), { class: "icon" }))
+                      ]),
+                      _: 2
+                    }, 1024)) : createCommentVNode("", true),
+                    item.tag ? (openBlock(), createBlock(unref(OTag), {
+                      key: 1,
+                      round: "pill",
+                      color: "danger",
+                      size: "small"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.tag), 1)
+                      ]),
+                      _: 2
+                    }, 1024)) : createCommentVNode("", true)
+                  ], 8, _hoisted_13))
+                ], 8, _hoisted_6);
+              }), 128))
+            ])) : (openBlock(), createElementBlock("div", _hoisted_15, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(navInfo.value, (item) => {
+                return openBlock(), createElementBlock("a", {
+                  key: item.label,
+                  onClick: ($event) => onClickNav(item),
+                  class: "source-code-item"
+                }, [
+                  createElementVNode("span", null, toDisplayString(item.label), 1),
+                  item.icon ? (openBlock(), createBlock(unref(OIcon), { key: 0 }, {
+                    default: withCtx(() => [
+                      (openBlock(), createBlock(resolveDynamicComponent(item.icon), { class: "icon" }))
+                    ]),
+                    _: 2
+                  }, 1024)) : createCommentVNode("", true)
+                ], 8, _hoisted_16);
+              }), 128))
+            ]))
+          ])
+        ]),
+        createElementVNode("div", _hoisted_17, [
+          __props.codeData ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["header-tool-item", {
+              active: navActive.value === "code"
+            }]),
+            onClick: _cache[0] || (_cache[0] = ($event) => handleNavClick(null, "code"))
+          }, toDisplayString(__props.codeData.label), 3)) : createCommentVNode("", true),
+          __props.langData ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(["header-tool-item", {
+              active: navActive.value === "lang"
+            }]),
+            onClick: _cache[1] || (_cache[1] = ($event) => handleNavClick(null, "lang"))
+          }, toDisplayString(__props.langData.label), 3)) : createCommentVNode("", true),
+          _ctx.$slots.tool ? (openBlock(), createElementBlock("div", _hoisted_18, [
+            renderSlot(_ctx.$slots, "tool", {}, void 0, true)
+          ])) : createCommentVNode("", true)
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};