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

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

@@ -0,0 +1,13 @@
+import { NavLiItemT } from '../types.ts';
+export interface OHeaderEmitsT {
+    (e: 'handle-mouseenter-sub', val: any): void;
+    (e: 'handle-mouseleave-sub', val: any): void;
+}
+declare const _default: import('vue').DefineComponent<NavLiItemT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "handle-mouseenter-sub": (val: any) => any;
+    "handle-mouseleave-sub": (val: any) => any;
+}, string, import('vue').PublicProps, Readonly<NavLiItemT> & Readonly<{
+    "onHandle-mouseenter-sub"?: ((val: any) => any) | undefined;
+    "onHandle-mouseleave-sub"?: ((val: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

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

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

@@ -0,0 +1,235 @@
+import { defineComponent, ref, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString, withDirectives, createBlock, resolveDynamicComponent, createCommentVNode, createTextVNode } from "vue";
+import { OScroller, OIcon, OTag } from "@opensig/opendesign";
+import ContentWrapper from "../../common/ContentWrapper.vue.mjs";
+import { useLocale, useTheme } from "@opendesign-plus/composables";
+const _hoisted_1 = { class: "nav-sub-content" };
+const _hoisted_2 = { class: "content-left" };
+const _hoisted_3 = { class: "content-label" };
+const _hoisted_4 = { class: "content-container" };
+const _hoisted_5 = ["href", "target"];
+const _hoisted_6 = { class: "item-name" };
+const _hoisted_7 = {
+  key: 0,
+  class: "desc-container"
+};
+const _hoisted_8 = ["title"];
+const _hoisted_9 = {
+  key: 0,
+  class: "split-line"
+};
+const _hoisted_10 = {
+  key: 1,
+  class: "content-right"
+};
+const _hoisted_11 = { class: "content-label" };
+const _hoisted_12 = ["href", "target"];
+const _hoisted_13 = ["href", "target"];
+const _hoisted_14 = ["src"];
+const _hoisted_15 = { class: "review-content" };
+const _hoisted_16 = { class: "review-label" };
+const _hoisted_17 = { class: "review-property" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderContent",
+  props: {
+    itemData: {},
+    itemVisible: { type: Boolean },
+    community: {},
+    bgLeft: {},
+    bgRight: {},
+    hoverIndex: {}
+  },
+  emits: ["handle-mouseenter-sub", "handle-mouseleave-sub"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const { locale } = useLocale();
+    const { theme } = useTheme();
+    const navVisible = ref(false);
+    const onMouseEnter = () => {
+      var _a;
+      emit("handle-mouseenter-sub", (_a = props.itemData) == null ? void 0 : _a.id);
+      navVisible.value = true;
+    };
+    const onMouseLeave = () => {
+      emit("handle-mouseenter-sub", "");
+      navVisible.value = false;
+    };
+    const showDesc = ref(false);
+    const descMouseenter = (e) => {
+      if (!e || !e.target) {
+        return;
+      }
+      const target = e.target;
+      showDesc.value = target.clientHeight < target.scrollHeight;
+    };
+    const onClickNavHref = (item, sub) => {
+      const res = {
+        properties: {
+          module: "navigation",
+          level1: item.label,
+          level2: sub.label,
+          target: sub.label,
+          url: item.href
+        }
+      };
+      return res;
+    };
+    const onClickShortcut = (item) => {
+      const res = {
+        properties: {
+          module: "navigation",
+          level1: locale.value === "zh" ? "快捷链接" : "Quick Link",
+          level2: item.label,
+          target: item.label,
+          url: item.href
+        }
+      };
+      return res;
+    };
+    return (_ctx, _cache) => {
+      var _a, _b, _c;
+      const _directive_analytics = resolveDirective("analytics");
+      return openBlock(), createElementBlock("div", {
+        onMouseenter: onMouseEnter,
+        onMouseleave: onMouseLeave
+      }, [
+        (props.itemVisible || navVisible.value) && ((_b = (_a = props.itemData) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["nav-content", [(_c = props.community) == null ? void 0 : _c.toLowerCase(), props.hoverIndex, unref(theme), `${props.hoverIndex}-${unref(locale)}`]])
+        }, [
+          createElementVNode("div", {
+            class: "nav-background-left",
+            style: normalizeStyle({ backgroundImage: `url(${props.bgLeft})` })
+          }, null, 4),
+          createElementVNode("div", {
+            class: "nav-background-right",
+            style: normalizeStyle({ backgroundImage: `url(${props.bgRight})` })
+          }, null, 4),
+          createVNode(ContentWrapper, null, {
+            default: withCtx(() => [
+              createVNode(unref(OScroller), {
+                class: "nav-scroller",
+                "show-type": "always",
+                size: "small",
+                "disabled-y": ""
+              }, {
+                default: withCtx(() => {
+                  var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+                  return [
+                    createElementVNode("div", _hoisted_1, [
+                      createElementVNode("div", _hoisted_2, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList((_a2 = props.itemData) == null ? void 0 : _a2.children, (sub, s) => {
+                          return openBlock(), createElementBlock("div", {
+                            class: "item-sub",
+                            key: s
+                          }, [
+                            createElementVNode("span", _hoisted_3, toDisplayString(sub.label), 1),
+                            createElementVNode("div", _hoisted_4, [
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(sub.children, (subItem) => {
+                                return openBlock(), createElementBlock("div", {
+                                  key: subItem.label,
+                                  class: "content-item"
+                                }, [
+                                  withDirectives((openBlock(), createElementBlock("a", {
+                                    href: subItem.href,
+                                    target: (subItem == null ? void 0 : subItem.target) || "_self",
+                                    rel: "noopener noreferrer",
+                                    class: "item-label"
+                                  }, [
+                                    createElementVNode("span", _hoisted_6, toDisplayString(subItem.label), 1),
+                                    subItem.icon ? (openBlock(), createBlock(unref(OIcon), { key: 0 }, {
+                                      default: withCtx(() => [
+                                        (openBlock(), createBlock(resolveDynamicComponent(subItem.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_5)), [
+                                    [_directive_analytics, () => onClickNavHref(sub, subItem)]
+                                  ]),
+                                  subItem.description ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                                    createElementVNode("p", {
+                                      class: "item-desc",
+                                      title: showDesc.value ? subItem.description : void 0,
+                                      onMouseenter: _cache[0] || (_cache[0] = ($event) => descMouseenter($event))
+                                    }, toDisplayString(subItem.description), 41, _hoisted_8)
+                                  ])) : createCommentVNode("", true)
+                                ]);
+                              }), 128))
+                            ])
+                          ]);
+                        }), 128))
+                      ]),
+                      ((_c2 = (_b2 = props.itemData) == null ? void 0 : _b2.shortcut) == null ? void 0 : _c2.length) ? (openBlock(), createElementBlock("div", _hoisted_9)) : createCommentVNode("", true),
+                      ((_e = (_d = props.itemData) == null ? void 0 : _d.shortcut) == null ? void 0 : _e.length) ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                        createElementVNode("span", _hoisted_11, toDisplayString(unref(locale) === "zh" ? "快捷链接" : "Quick Link"), 1),
+                        !((_f = props.itemData) == null ? void 0 : _f.withPicture) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList((_g = props.itemData) == null ? void 0 : _g.shortcut, (shortcut) => {
+                          return openBlock(), createElementBlock("div", {
+                            key: shortcut.label,
+                            class: "shortcut"
+                          }, [
+                            withDirectives((openBlock(), createElementBlock("a", {
+                              href: shortcut.href,
+                              target: (shortcut == null ? void 0 : shortcut.target) || "_self",
+                              rel: "noopener noreferrer",
+                              class: "shortcut-link"
+                            }, [
+                              createElementVNode("span", null, toDisplayString(shortcut.label), 1),
+                              shortcut.icon ? (openBlock(), createBlock(unref(OIcon), { key: 0 }, {
+                                default: withCtx(() => [
+                                  (openBlock(), createBlock(resolveDynamicComponent(shortcut.icon)))
+                                ]),
+                                _: 2
+                              }, 1024)) : createCommentVNode("", true)
+                            ], 8, _hoisted_12)), [
+                              [_directive_analytics, () => onClickShortcut(shortcut)]
+                            ])
+                          ]);
+                        }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList((_h = props.itemData) == null ? void 0 : _h.shortcut, (shortcut) => {
+                          return withDirectives((openBlock(), createElementBlock("a", {
+                            key: shortcut.label,
+                            href: shortcut.href,
+                            target: (shortcut == null ? void 0 : shortcut.target) || "_self",
+                            rel: "noopener noreferrer",
+                            class: "review"
+                          }, [
+                            createElementVNode("img", {
+                              src: shortcut.picture,
+                              class: "review-picture"
+                            }, null, 8, _hoisted_14),
+                            createElementVNode("div", _hoisted_15, [
+                              createElementVNode("p", _hoisted_16, toDisplayString(shortcut.label), 1),
+                              createElementVNode("div", _hoisted_17, toDisplayString(shortcut.remark), 1)
+                            ])
+                          ], 8, _hoisted_13)), [
+                            [_directive_analytics, () => onClickShortcut(shortcut)]
+                          ]);
+                        }), 128))
+                      ])) : createCommentVNode("", true)
+                    ])
+                  ];
+                }),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ], 2)) : createCommentVNode("", true)
+      ], 32);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,141 @@
+.hover-icon-rotate .o-icon[data-v-fe042238] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-fe042238] {
+    transform: rotate(-180deg);
+}
+}
+.header-nav-wrap[data-v-fe042238] {
+  height: 100%;
+}
+.header-nav-wrap .header-nav[data-v-fe042238] {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 64px);
+  align-items: center;
+}
+.header-nav-wrap .header-nav-scroll[data-v-fe042238] {
+  width: calc(100% - 64px - 24px);
+}
+.o-nav[data-v-fe042238] {
+  height: 100%;
+  position: relative;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+.o-nav[data-v-fe042238]::after {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: 100%;
+  right: 0;
+  top: 0;
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
+  z-index: 0;
+}
+.o-nav[data-v-fe042238]::-webkit-scrollbar {
+  display: none;
+}
+.o-nav.dark[data-v-fe042238]::after {
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 100%);
+}
+.o-nav-scroll[data-v-fe042238]::after {
+  display: none;
+}
+.o-nav-list[data-v-fe042238] {
+  display: flex;
+  height: 100%;
+  width: fit-content;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  padding: 0;
+  margin: 0;
+}
+.o-nav-list li[data-v-fe042238] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  color: var(--o-color-info1);
+  transition: all var(--o-duration-s) var(--o-easing-standard);
+}
+.o-nav-list li .nav-text[data-v-fe042238] {
+  position: relative;
+}
+.o-nav-list li .nav-text[data-v-fe042238]::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  bottom: -24px;
+  width: 100%;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--o-color-primary1);
+  transition: all var(--o-duration-s) var(--o-easing-standard);
+}
+.o-nav-list li.is-selected .nav-text[data-v-fe042238], .o-nav-list li.is-active .nav-text[data-v-fe042238] {
+  color: var(--o-color-primary1);
+  z-index: 99;
+  font-weight: 500;
+}
+.o-nav-list li.is-selected .nav-text[data-v-fe042238]::after, .o-nav-list li.is-active .nav-text[data-v-fe042238]::after {
+  content: "";
+  opacity: 1;
+}
+.o-nav-list .nav-item[data-v-fe042238] {
+  cursor: default;
+  display: flex;
+  align-items: center;
+  padding: 22px var(--o-gap-4);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    padding: 22px 12px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-nav-list .nav-item[data-v-fe042238] {
+    padding: 22px 8px;
+}
+}
+@media (min-width: 841px) and (max-width: 1000px) {
+.o-nav-list .nav-item.en[data-v-fe042238] {
+    padding: var(--o-gap-2);
+}
+}
+.o-nav-list .item-other[data-v-fe042238] {
+  cursor: pointer;
+}
+.o-nav-list .item-other .content-tag[data-v-fe042238] {
+  margin-left: var(--o-gap-2);
+  --layout-pkg-radius: var(--o-radius-xs);
+}

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

@@ -0,0 +1,19 @@
+import { NavLiT } from '../types.ts';
+export interface OHeaderEmitsT {
+    (e: 'handle-mouseenter', val: any): void;
+    (e: 'handle-mouseleave', val: any): void;
+    (e: 'handle-click', val: any): void;
+}
+declare const _default: import('vue').DefineComponent<NavLiT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "handle-mouseenter": (val: any) => any;
+    "handle-mouseleave": (val: any) => any;
+    "handle-click": (val: any) => any;
+}, string, import('vue').PublicProps, Readonly<NavLiT> & Readonly<{
+    "onHandle-mouseenter"?: ((val: any) => any) | undefined;
+    "onHandle-mouseleave"?: ((val: any) => any) | undefined;
+    "onHandle-click"?: ((val: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    navRef: HTMLDivElement;
+    navListRef: HTMLUListElement;
+}, HTMLDivElement>;
+export default _default;

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

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

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

@@ -0,0 +1,207 @@
+import { defineComponent, ref, onMounted, nextTick, onUnmounted, resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createCommentVNode, Fragment, renderList, withDirectives, toDisplayString, createBlock, createTextVNode } from "vue";
+import { OIcon, OTag } from "@opensig/opendesign";
+import IconCaretLeft from "../../../_virtual/icon-caret-left.mjs";
+import IconCaretRight from "../../../_virtual/icon-caret-right.mjs";
+import { useTheme } from "@opendesign-plus/composables";
+import { useDebounceFn } from "@vueuse/core";
+const _hoisted_1 = { class: "header-nav-wrap" };
+const _hoisted_2 = {
+  key: 0,
+  class: "right-icon"
+};
+const _hoisted_3 = ["onMouseenter", "onMouseleave"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = { class: "nav-text" };
+const _hoisted_6 = ["id", "onClick"];
+const _hoisted_7 = { class: "nav-text" };
+const _hoisted_8 = {
+  key: 1,
+  class: "right-icon"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderNav",
+  props: {
+    navData: {},
+    activeIndex: {},
+    hoverId: {}
+  },
+  emits: ["handle-mouseenter", "handle-mouseleave", "handle-click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const { isDark } = useTheme();
+    const props = __props;
+    const navRef = ref();
+    const navListRef = ref();
+    const resizeTimer = ref(null);
+    const navVisibleRight = ref(false);
+    const navVisibleLeft = ref(false);
+    const hoverIndex = ref();
+    const toggleDebounced = useDebounceFn((item, id) => {
+      hoverIndex.value = item == null ? void 0 : item.id;
+      if (id === "mouseenter") {
+        emit("handle-mouseenter", item);
+      }
+      if (id === "mouseleave") {
+        hoverIndex.value = "";
+        emit("handle-mouseleave", item);
+      }
+    }, 100);
+    const handleClick = (item) => {
+      emit("handle-click", item);
+    };
+    const scrollNavRight = () => {
+      navVisibleLeft.value = true;
+      nextTick(() => {
+        navRef.value.scrollTo({
+          left: navRef.value.clientWidth,
+          behavior: "smooth"
+        });
+      });
+    };
+    const scrollNavLeft = () => {
+      navRef.value.scrollTo({
+        left: 0,
+        behavior: "smooth"
+      });
+      navVisibleLeft.value = false;
+    };
+    const calculateLayout = () => {
+      var _a, _b;
+      if (((_a = navRef.value) == null ? void 0 : _a.clientWidth) < ((_b = navListRef.value) == null ? void 0 : _b.clientWidth)) {
+        navVisibleRight.value = true;
+      } else {
+        navVisibleRight.value = false;
+      }
+    };
+    let hoverTime = 0;
+    let steps = 0;
+    const onHoverHeader = () => steps = 0;
+    const onHoverNav = (name) => {
+      if (steps > 0) return void steps++;
+      steps++;
+      hoverTime = Date.now();
+      return {
+        event: "hover",
+        properties: {
+          module: "navigation",
+          level1: name,
+          target: name
+        }
+      };
+    };
+    const onClickNavItem = (item) => {
+      const res = {
+        properties: {
+          module: "navigation",
+          level1: item.label,
+          target: item.label,
+          steps,
+          url: item.href,
+          duration: Date.now() - hoverTime
+        }
+      };
+      return res;
+    };
+    onMounted(() => {
+      window.addEventListener("resize", calculateLayout);
+      nextTick(() => {
+        calculateLayout();
+        resizeTimer.value = setTimeout(() => {
+          calculateLayout();
+        }, 1e3);
+      });
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", calculateLayout);
+      clearTimeout(resizeTimer.value);
+    });
+    return (_ctx, _cache) => {
+      const _directive_analytics = resolveDirective("analytics");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass(["header-nav", { "header-nav-scroll": navVisibleLeft.value }])
+        }, [
+          navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createVNode(unref(OIcon), { onClick: scrollNavLeft }, {
+              default: withCtx(() => [
+                createVNode(unref(IconCaretLeft))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            ref_key: "navRef",
+            ref: navRef,
+            class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value, dark: unref(isDark) }])
+          }, [
+            createElementVNode("ul", {
+              ref_key: "navListRef",
+              ref: navListRef,
+              class: "o-nav-list",
+              onMouseenter: onHoverHeader
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.navData, (item, idx) => {
+                var _a;
+                return withDirectives((openBlock(), createElementBlock("li", {
+                  key: item.id,
+                  class: normalizeClass({
+                    "is-selected": hoverIndex.value === item.id || props.hoverId === item.id,
+                    "is-active": props.activeIndex === idx
+                  }),
+                  onMouseenter: ($event) => unref(toggleDebounced)(item, "mouseenter"),
+                  onMouseleave: ($event) => unref(toggleDebounced)(item, "mouseleave")
+                }, [
+                  ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    id: "tour_headerNav_" + item.id,
+                    class: "nav-item"
+                  }, [
+                    createElementVNode("span", _hoisted_5, toDisplayString(item.label), 1)
+                  ], 8, _hoisted_4)) : (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    id: "tour_headerNav_" + item.id,
+                    class: "nav-item item-other",
+                    onClick: ($event) => handleClick(item)
+                  }, [
+                    createElementVNode("span", _hoisted_7, toDisplayString(item.label), 1),
+                    item.tag ? (openBlock(), createBlock(unref(OTag), {
+                      key: 0,
+                      round: "pill",
+                      color: "danger",
+                      size: "small",
+                      class: "content-tag"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.tag), 1)
+                      ]),
+                      _: 2
+                    }, 1024)) : createCommentVNode("", true)
+                  ], 8, _hoisted_6))
+                ], 42, _hoisted_3)), [
+                  [_directive_analytics, onHoverNav(item.label), "mouseenter"],
+                  [
+                    _directive_analytics,
+                    onClickNavItem(item),
+                    void 0,
+                    { catchBubble: true }
+                  ]
+                ]);
+              }), 128))
+            ], 544)
+          ], 2),
+          navVisibleRight.value && !navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
+            createVNode(unref(OIcon), { onClick: scrollNavRight }, {
+              default: withCtx(() => [
+                createVNode(unref(IconCaretRight))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true)
+        ], 2)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};