@opendesign-plus/components 0.0.1-rc.6 → 0.0.1-rc.60

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-b3e261fa"]]);
+export {
+  HeaderContent as default
+};

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

@@ -0,0 +1,367 @@
+import { defineComponent, ref, inject, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString, withDirectives, createBlock, resolveDynamicComponent, createCommentVNode, createTextVNode } from "vue";
+import { OScroller, OPopover, OIcon, OTag } from "@opensig/opendesign";
+import { useTheme } from "../../../shared/theme.mjs";
+import { useI18n } from "../../../i18n/index.mjs";
+const _hoisted_1 = { class: "header-content-nav" };
+const _hoisted_2 = { class: "nav-sub-content" };
+const _hoisted_3 = { class: "content-left" };
+const _hoisted_4 = { class: "content-label" };
+const _hoisted_5 = { class: "content-container" };
+const _hoisted_6 = ["href", "target"];
+const _hoisted_7 = { class: "popover-shortcut" };
+const _hoisted_8 = {
+  key: 0,
+  class: "desc-container"
+};
+const _hoisted_9 = { class: "popover-item-desc" };
+const _hoisted_10 = {
+  key: 0,
+  class: "split-line"
+};
+const _hoisted_11 = {
+  key: 1,
+  class: "content-right"
+};
+const _hoisted_12 = { class: "content-label" };
+const _hoisted_13 = ["href", "target"];
+const _hoisted_14 = { class: "popover-shortcut" };
+const _hoisted_15 = ["href", "target"];
+const _hoisted_16 = ["src"];
+const _hoisted_17 = { class: "review-content" };
+const _hoisted_18 = { class: "popover-shortcut" };
+const _hoisted_19 = { class: "popover-shortcut" };
+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, t } = useI18n();
+    const { theme, isDark } = 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-mouseleave-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 showTitle = ref(false);
+    const titleMouseenter = (e) => {
+      if (!e || !e.target) {
+        return;
+      }
+      const target = e.target;
+      showTitle.value = target.clientHeight < target.scrollHeight;
+    };
+    const hoveringNavLiName = inject("hoveringNavLiName");
+    const injectCloseNavPanel = inject("closeNavPanel");
+    const closeNavPanel = () => {
+      injectCloseNavPanel == null ? void 0 : injectCloseNavPanel();
+      navVisible.value = false;
+    };
+    const navFirstHoverTime = inject("navFirstHoverTime");
+    const navStepCount = inject("navStepCount");
+    const onClickNavHref = (item, sub) => {
+      const res = {
+        properties: {
+          module: "navigation",
+          level1: (hoveringNavLiName == null ? void 0 : hoveringNavLiName.value) ?? "",
+          level2: item.label,
+          level3: sub.label,
+          target: sub.label,
+          url: item.href,
+          ...navStepCount && { steps: navStepCount.value },
+          ...(navFirstHoverTime == null ? void 0 : navFirstHoverTime.value) && { duration: Date.now() - navFirstHoverTime.value }
+        }
+      };
+      return res;
+    };
+    const onClickShortcut = (item) => {
+      const res = {
+        properties: {
+          module: "navigation",
+          level1: (hoveringNavLiName == null ? void 0 : hoveringNavLiName.value) ?? "",
+          level2: t("header.quickLink"),
+          level3: item.label,
+          target: item.label,
+          url: item.href,
+          ...navStepCount && { steps: navStepCount.value },
+          ...(navFirstHoverTime == null ? void 0 : navFirstHoverTime.value) && { duration: Date.now() - navFirstHoverTime.value }
+        }
+      };
+      return res;
+    };
+    const linkTarget = (url, target) => {
+      if (target) {
+        return target;
+      } else {
+        return (url == null ? void 0 : url.startsWith("http")) ? "_blank" : "_self";
+      }
+    };
+    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),
+          createElementVNode("div", _hoisted_1, [
+            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_2, [
+                    createElementVNode("div", _hoisted_3, [
+                      (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_4, toDisplayString(sub.label), 1),
+                          createElementVNode("div", _hoisted_5, [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(sub.children, (subItem) => {
+                              var _a3;
+                              return openBlock(), createElementBlock("div", {
+                                key: subItem.label,
+                                class: normalizeClass(["content-item", { "content-item-disabled": subItem == null ? void 0 : subItem.disabled }])
+                              }, [
+                                withDirectives((openBlock(), createElementBlock("a", {
+                                  href: subItem.href,
+                                  target: linkTarget(subItem.href, subItem == null ? void 0 : subItem.target),
+                                  rel: "noopener noreferrer",
+                                  class: "item-label",
+                                  onClick: closeNavPanel
+                                }, [
+                                  showTitle.value ? (openBlock(), createBlock(unref(OPopover), {
+                                    key: 0,
+                                    trigger: "hover",
+                                    position: "bottom",
+                                    "adjust-min-width": false,
+                                    "adjust-width": false
+                                  }, {
+                                    target: withCtx(() => [
+                                      createElementVNode("p", {
+                                        class: "item-name",
+                                        onMouseenter: _cache[0] || (_cache[0] = ($event) => titleMouseenter($event))
+                                      }, toDisplayString(subItem.label), 33)
+                                    ]),
+                                    default: withCtx(() => [
+                                      createElementVNode("p", _hoisted_7, toDisplayString(subItem.label), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1024)) : (openBlock(), createElementBlock("p", {
+                                    key: 1,
+                                    class: "item-name",
+                                    onMouseenter: _cache[1] || (_cache[1] = ($event) => titleMouseenter($event))
+                                  }, toDisplayString(subItem.label), 33)),
+                                  subItem.icon ? (openBlock(), createBlock(unref(OIcon), { key: 2 }, {
+                                    default: withCtx(() => [
+                                      (openBlock(), createBlock(resolveDynamicComponent(subItem.icon)))
+                                    ]),
+                                    _: 2
+                                  }, 1024)) : createCommentVNode("", true),
+                                  subItem.tag ? (openBlock(), createBlock(unref(OTag), {
+                                    key: 3,
+                                    color: "danger",
+                                    size: "small",
+                                    class: normalizeClass(["content-tag", `tag-${(_a3 = subItem == null ? void 0 : subItem.tag) == null ? void 0 : _a3.toLowerCase()}`])
+                                  }, {
+                                    default: withCtx(() => [
+                                      createTextVNode(toDisplayString(subItem.tag), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["class"])) : createCommentVNode("", true)
+                                ], 8, _hoisted_6)), [
+                                  [_directive_analytics, () => onClickNavHref(sub, subItem)]
+                                ]),
+                                subItem.description ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                                  showDesc.value ? (openBlock(), createBlock(unref(OPopover), {
+                                    key: 0,
+                                    trigger: "hover",
+                                    position: "bottom",
+                                    "adjust-min-width": false,
+                                    "adjust-width": false
+                                  }, {
+                                    target: withCtx(() => [
+                                      createElementVNode("p", {
+                                        class: normalizeClass(["item-desc", [`item-desc-line-${subItem == null ? void 0 : subItem.line}`]]),
+                                        onMouseenter: _cache[2] || (_cache[2] = ($event) => descMouseenter($event))
+                                      }, toDisplayString(subItem.description), 35)
+                                    ]),
+                                    default: withCtx(() => [
+                                      createElementVNode("p", _hoisted_9, toDisplayString(subItem.description), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1024)) : (openBlock(), createElementBlock("p", {
+                                    key: 1,
+                                    class: normalizeClass(["item-desc", [`item-desc-line-${subItem == null ? void 0 : subItem.line}`]]),
+                                    onMouseenter: _cache[3] || (_cache[3] = ($event) => descMouseenter($event))
+                                  }, toDisplayString(subItem.description), 35))
+                                ])) : createCommentVNode("", true)
+                              ], 2);
+                            }), 128))
+                          ])
+                        ]);
+                      }), 128))
+                    ]),
+                    ((_c2 = (_b2 = props.itemData) == null ? void 0 : _b2.shortcut) == null ? void 0 : _c2.length) ? (openBlock(), createElementBlock("div", _hoisted_10)) : createCommentVNode("", true),
+                    ((_e = (_d = props.itemData) == null ? void 0 : _d.shortcut) == null ? void 0 : _e.length) ? (openBlock(), createElementBlock("div", _hoisted_11, [
+                      createElementVNode("span", _hoisted_12, toDisplayString(unref(t)("header.quickLink")), 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: linkTarget(shortcut.href, shortcut == null ? void 0 : shortcut.target),
+                            rel: "noopener noreferrer",
+                            class: "shortcut-link",
+                            onClick: closeNavPanel
+                          }, [
+                            showDesc.value ? (openBlock(), createBlock(unref(OPopover), {
+                              key: 0,
+                              trigger: "hover",
+                              position: "bottom",
+                              "adjust-min-width": false,
+                              "adjust-width": false
+                            }, {
+                              target: withCtx(() => [
+                                createElementVNode("p", {
+                                  class: "shortcut-title",
+                                  onMouseenter: _cache[4] || (_cache[4] = ($event) => descMouseenter($event))
+                                }, toDisplayString(shortcut.label), 33)
+                              ]),
+                              default: withCtx(() => [
+                                createElementVNode("p", _hoisted_14, toDisplayString(shortcut.label), 1)
+                              ]),
+                              _: 2
+                            }, 1024)) : (openBlock(), createElementBlock("p", {
+                              key: 1,
+                              class: "shortcut-title",
+                              onMouseenter: _cache[5] || (_cache[5] = ($event) => descMouseenter($event))
+                            }, toDisplayString(shortcut.label), 33)),
+                            shortcut.icon ? (openBlock(), createBlock(unref(OIcon), { key: 2 }, {
+                              default: withCtx(() => [
+                                (openBlock(), createBlock(resolveDynamicComponent(shortcut.icon)))
+                              ]),
+                              _: 2
+                            }, 1024)) : createCommentVNode("", true)
+                          ], 8, _hoisted_13)), [
+                            [_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: linkTarget(shortcut.href, shortcut == null ? void 0 : shortcut.target),
+                          rel: "noopener noreferrer",
+                          class: "review",
+                          onClick: closeNavPanel
+                        }, [
+                          createElementVNode("img", {
+                            src: unref(isDark) && (shortcut == null ? void 0 : shortcut.pictureDark) ? shortcut == null ? void 0 : shortcut.pictureDark : shortcut.picture,
+                            class: "review-picture"
+                          }, null, 8, _hoisted_16),
+                          createElementVNode("div", _hoisted_17, [
+                            showDesc.value ? (openBlock(), createBlock(unref(OPopover), {
+                              key: 0,
+                              trigger: "hover",
+                              position: "bottom",
+                              "adjust-min-width": false,
+                              "adjust-width": false
+                            }, {
+                              target: withCtx(() => [
+                                createElementVNode("p", {
+                                  class: "review-label",
+                                  onMouseenter: _cache[6] || (_cache[6] = ($event) => descMouseenter($event))
+                                }, toDisplayString(shortcut.label), 33)
+                              ]),
+                              default: withCtx(() => [
+                                createElementVNode("p", _hoisted_18, toDisplayString(shortcut.label), 1)
+                              ]),
+                              _: 2
+                            }, 1024)) : (openBlock(), createElementBlock("p", {
+                              key: 1,
+                              class: "review-label",
+                              onMouseenter: _cache[7] || (_cache[7] = ($event) => descMouseenter($event))
+                            }, toDisplayString(shortcut.label), 33)),
+                            showTitle.value ? (openBlock(), createBlock(unref(OPopover), {
+                              key: 2,
+                              trigger: "hover",
+                              position: "bottom",
+                              "adjust-min-width": false,
+                              "adjust-width": false
+                            }, {
+                              target: withCtx(() => [
+                                createElementVNode("div", {
+                                  class: "review-property",
+                                  onMouseenter: _cache[8] || (_cache[8] = ($event) => titleMouseenter($event))
+                                }, toDisplayString(shortcut.remark), 33)
+                              ]),
+                              default: withCtx(() => [
+                                createElementVNode("div", _hoisted_19, toDisplayString(shortcut.remark), 1)
+                              ]),
+                              _: 2
+                            }, 1024)) : (openBlock(), createElementBlock("div", {
+                              key: 3,
+                              class: "review-property",
+                              onMouseenter: _cache[9] || (_cache[9] = ($event) => titleMouseenter($event))
+                            }, toDisplayString(shortcut.remark), 33))
+                          ])
+                        ], 8, _hoisted_15)), [
+                          [_directive_analytics, () => onClickShortcut(shortcut)]
+                        ]);
+                      }), 128))
+                    ])) : createCommentVNode("", true)
+                  ])
+                ];
+              }),
+              _: 1
+            })
+          ])
+        ], 2)) : createCommentVNode("", true)
+      ], 32);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,302 @@
+.hover-icon-rotate .o-icon[data-v-a4e11dfd] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-a4e11dfd] {
+    transform: rotate(-180deg);
+}
+}
+.header-nav-wrap[data-v-a4e11dfd] {
+  height: 100%;
+}
+.header-nav-wrap .header-nav[data-v-a4e11dfd] {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 64px);
+  align-items: center;
+}
+.header-nav-wrap .header-nav-scroll[data-v-a4e11dfd] {
+  width: calc(100% - 64px - 24px);
+}
+.o-nav[data-v-a4e11dfd] {
+  --o-before-left: 0;
+  height: 100%;
+  position: relative;
+  z-index: 8;
+}
+.o-nav[data-v-a4e11dfd]::-webkit-scrollbar {
+  display: none;
+}
+.left-icon[data-v-a4e11dfd],
+.right-icon[data-v-a4e11dfd] {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--o-radius-xs);
+}
+.left-icon .o-icon[data-v-a4e11dfd],
+.right-icon .o-icon[data-v-a4e11dfd] {
+  --icon-size: 16px;
+  position: relative;
+  z-index: 11;
+}
+@media (hover: hover) {
+.left-icon[data-v-a4e11dfd]:hover,
+  .right-icon[data-v-a4e11dfd]:hover {
+    background-color: var(--o-color-control2-light);
+    color: var(--o-color-link2);
+}
+}
+.left-icon[data-v-a4e11dfd]:active,
+.right-icon[data-v-a4e11dfd]:active {
+  color: var(--o-color-link3);
+}
+.left-icon[data-v-a4e11dfd]::before {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: var(--o-header-height);
+  top: -28px;
+  left: 16px;
+  z-index: 9;
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 1) 0%, rgba(var(--o-grey-1), 0) 100%);
+  cursor: default;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.left-icon[data-v-a4e11dfd]::before {
+    top: -24px;
+}
+}
+@media (max-width: 1200px) {
+.left-icon[data-v-a4e11dfd]::before {
+    top: -20px;
+}
+}
+.right-icon[data-v-a4e11dfd]::before {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: var(--o-header-height);
+  top: -28px;
+  right: 16px;
+  z-index: 9;
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
+  cursor: default;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.right-icon[data-v-a4e11dfd]::before {
+    top: -24px;
+}
+}
+@media (max-width: 1200px) {
+.right-icon[data-v-a4e11dfd]::before {
+    top: -20px;
+}
+}
+[data-o-theme*=dark] .left-icon[data-v-a4e11dfd] {
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 1) 0%, rgba(var(--o-grey-4), 0) 100%);
+}
+[data-o-theme*=dark] .right-icon[data-v-a4e11dfd] {
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 100%);
+}
+.o-nav-scroll[data-v-a4e11dfd]::after {
+  display: none;
+}
+.o-nav-scroll[data-v-a4e11dfd]::before {
+  left: var(--o-before-left);
+  display: block;
+}
+.nav-list[data-v-a4e11dfd] {
+  display: flex;
+  height: 100%;
+  width: fit-content;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  padding: 0;
+  margin: 0;
+}
+.nav-item-li[data-v-a4e11dfd] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  color: var(--o-color-info1);
+  pointer-events: auto;
+  transition: color var(--o-duration-s) var(--o-easing-standard);
+}
+.nav-item-li .nav-item[data-v-a4e11dfd] {
+  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) {
+.nav-item-li .nav-item[data-v-a4e11dfd] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-item-li .nav-item[data-v-a4e11dfd] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-item-li .nav-item[data-v-a4e11dfd] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-item-li .nav-item[data-v-a4e11dfd] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 1440px) {
+.nav-item-li .nav-item[data-v-a4e11dfd] {
+    padding: 18px 12px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-item-li .nav-item[data-v-a4e11dfd] {
+    padding: 14px 8px;
+}
+}
+.nav-item-li .nav-text[data-v-a4e11dfd] {
+  position: relative;
+}
+.nav-item-li .nav-text[data-v-a4e11dfd]::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);
+}
+@media (max-width: 1440px) {
+.nav-item-li .nav-text[data-v-a4e11dfd]::after {
+    bottom: -21px;
+}
+}
+@media (max-width: 1200px) {
+.nav-item-li .nav-text[data-v-a4e11dfd]::after {
+    bottom: -17px;
+}
+}
+.nav-item-li .nav-item-link[data-v-a4e11dfd] {
+  cursor: pointer;
+}
+.nav-item-li.is-selected .nav-text[data-v-a4e11dfd], .nav-item-li.is-active .nav-text[data-v-a4e11dfd] {
+  color: var(--o-color-primary1);
+  z-index: 99;
+  font-weight: 600;
+}
+.nav-item-li.is-selected .nav-text[data-v-a4e11dfd]::after, .nav-item-li.is-active .nav-text[data-v-a4e11dfd]::after {
+  opacity: 1;
+}
+.nav-item-li.is-disabled[data-v-a4e11dfd] {
+  color: var(--o-color-info4);
+  pointer-events: none;
+}
+.dropdown-wrapper[data-v-a4e11dfd] {
+  position: absolute;
+  top: calc(100% - 4px);
+  left: 0;
+  display: none;
+  padding-top: 8px;
+  transition: opacity var(--o-duration-s) var(--o-easing-standard);
+}
+.dropdown-wrapper .dropdown-body[data-v-a4e11dfd] {
+  padding: 6px;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  box-shadow: var(--o-shadow-2);
+}
+.dropdown-wrapper .dropdown-item[data-v-a4e11dfd] {
+  font-weight: 400;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  min-width: 100px;
+  border-radius: var(--o-radius-xs);
+  color: var(--o-color-info2);
+  background-color: transparent;
+  transition: background-color var(--o-duration-s) var(--o-easing-standard);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.dropdown-wrapper .dropdown-item[data-v-a4e11dfd] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.dropdown-wrapper .dropdown-item[data-v-a4e11dfd] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.dropdown-wrapper .dropdown-item[data-v-a4e11dfd] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.dropdown-wrapper .dropdown-item[data-v-a4e11dfd] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (hover: hover) {
+.dropdown-wrapper .dropdown-item[data-v-a4e11dfd]:hover {
+    background-color: var(--o-color-control2-light);
+    color: var(--o-color-primary1);
+}
+}
+.dropdown-wrapper .dropdown-item-disabled[data-v-a4e11dfd] {
+  color: var(--o-color-info4);
+  pointer-events: none;
+}
+.dropdown-wrapper .dropdown-link[data-v-a4e11dfd] {
+  color: inherit;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.dropdown-wrapper .dropdown-link .o-tag[data-v-a4e11dfd] {
+  margin-left: var(--o-gap-2);
+  transform: scale(0.75);
+  transform-origin: left center;
+}
+.dropdown-wrapper[data-v-a4e11dfd] .jump-out-icon {
+  font-size: 16px;
+  margin-left: 4px;
+}
+.dropdown-wrapper[data-v-a4e11dfd] .jump-out-icon path {
+  fill: currentColor;
+  stroke: transparent;
+}
+.dropdown-wrapper[data-v-a4e11dfd] .jump-out-icon path[fill=none] {
+  display: none;
+}
+@media (hover: hover) {
+.nav-item:hover .dropdown-wrapper[data-v-a4e11dfd] {
+    display: block;
+}
+}