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

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

@@ -0,0 +1,244 @@
+import { defineComponent, ref, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, createCommentVNode, renderSlot, createBlock, unref, withCtx, resolveDynamicComponent, createTextVNode } 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: "header-tool" };
+const _hoisted_5 = {
+  key: 2,
+  class: "other-tool"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "nav-aside-wrapper"
+};
+const _hoisted_7 = ["value"];
+const _hoisted_8 = { class: "content-label" };
+const _hoisted_9 = { class: "container-mobile" };
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = { class: "item-label" };
+const _hoisted_12 = { class: "desc-container" };
+const _hoisted_13 = { class: "item-desc" };
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = { class: "item-label" };
+const _hoisted_16 = {
+  key: 1,
+  class: "nav-aside-wrapper"
+};
+const _hoisted_17 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderNavMobile",
+  props: {
+    menuShow: { type: Boolean, default: false },
+    navData: { default: () => [] },
+    codeData: {},
+    langData: {},
+    activeIndex: {},
+    community: {}
+  },
+  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;
+      } else if (val === NavType.LANG) {
+        navActive.value = val;
+        navInfo.value = props.langData;
+      }
+    };
+    const onClick = (url, target) => {
+      window.open(url, target ? target : "_self");
+      emit("on-click");
+    };
+    const onClickNav = (val) => {
+      if ("href" in val) {
+        onClick(val.href, val == null ? void 0 : val.target);
+      } else {
+        emit("lang-click", val);
+      }
+    };
+    watch(
+      () => props.activeIndex,
+      (newVal) => {
+        var _a;
+        const activeItem = props.navData.find((item, index) => item.id === newVal || index === newVal);
+        navActive.value = activeItem ? activeItem.id : (_a = props.navData[0]) == null ? void 0 : _a.id;
+        navInfo.value = activeItem || props.navData[0];
+      },
+      { immediate: true }
+    );
+    watch(
+      () => [props.navData, props.codeData, props.langData],
+      () => {
+        var _a;
+        if (navActive.value === NavType.CODE) {
+          navInfo.value = props.codeData;
+        } else if (navActive.value === NavType.LANG) {
+          navInfo.value = props.langData;
+        } else {
+          const activeItem = props.navData.find((item, index) => item.id === props.activeIndex || index === props.activeIndex);
+          navActive.value = activeItem ? activeItem.id : (_a = props.navData[0]) == null ? void 0 : _a.id;
+          navInfo.value = activeItem || props.navData[0];
+        }
+      },
+      { deep: true }
+    );
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d, _e;
+      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,
+                  "is-disabled": item == null ? void 0 : item.disabled
+                })
+              }, [
+                createElementVNode("span", {
+                  class: "text-label",
+                  onClick: ($event) => handleNavClick(item, "nav")
+                }, toDisplayString(item.label), 9, _hoisted_3)
+              ], 2);
+            }), 128))
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            ((_a = __props.codeData) == null ? void 0 : _a.label) ? (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),
+            ((_b = __props.langData) == null ? void 0 : _b.label) ? (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_5, [
+              renderSlot(_ctx.$slots, "tool", {}, void 0, true)
+            ])) : createCommentVNode("", true)
+          ])
+        ]),
+        ((_d = (_c = navInfo.value) == null ? void 0 : _c.children) == null ? void 0 : _d.length) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["nav-aside", [(_e = props.community) == null ? void 0 : _e.toLowerCase()]])
+        }, [
+          navActive.value !== "code" && navActive.value !== "lang" ? (openBlock(), createElementBlock("ul", _hoisted_6, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(navInfo.value.children, (item) => {
+              var _a2;
+              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_8, toDisplayString(item.label), 1),
+                  createElementVNode("div", _hoisted_9, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(item == null ? void 0 : item.children, (subItem) => {
+                      var _a3;
+                      return openBlock(), createElementBlock("div", {
+                        key: subItem.label,
+                        class: normalizeClass(["content-container-mobile", { "content-item-disabled": subItem == null ? void 0 : subItem.disabled }])
+                      }, [
+                        createElementVNode("a", {
+                          onClick: ($event) => onClick(subItem.href, subItem == null ? void 0 : subItem.target),
+                          rel: "noopener noreferrer",
+                          class: "content-subtitle"
+                        }, [
+                          createElementVNode("span", _hoisted_11, 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,
+                            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_10),
+                        createElementVNode("div", _hoisted_12, [
+                          createElementVNode("p", _hoisted_13, toDisplayString(subItem.description), 1)
+                        ])
+                      ], 2);
+                    }), 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_15, 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,
+                    color: "danger",
+                    size: "small",
+                    class: normalizeClass(`tag-${(_a2 = item == null ? void 0 : item.tag) == null ? void 0 : _a2.toLowerCase()}`)
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(item.tag), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["class"])) : createCommentVNode("", true)
+                ], 8, _hoisted_14))
+              ], 8, _hoisted_7);
+            }), 128))
+          ])) : (openBlock(), createElementBlock("div", _hoisted_16, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(navInfo.value.children, (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_17);
+            }), 128))
+          ]))
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/header/index.d.ts

@@ -0,0 +1,170 @@
+import { App } from 'vue';
+declare const OHeader: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../index').NavT> & Readonly<{
+        "onHandle-click"?: ((val: any) => any) | undefined;
+        "onNav-layout"?: ((val: any) => any) | undefined;
+        "onGo-home"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        "handle-click": (val: any) => any;
+        "nav-layout": (val: any) => any;
+        "go-home": () => any;
+    }, import('vue').PublicProps, {
+        isFlatten: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        contentRef: HTMLDivElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('../../index').NavT> & Readonly<{
+        "onHandle-click"?: ((val: any) => any) | undefined;
+        "onNav-layout"?: ((val: any) => any) | undefined;
+        "onGo-home"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        isFlatten: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('../../index').NavT> & Readonly<{
+    "onHandle-click"?: ((val: any) => any) | undefined;
+    "onNav-layout"?: ((val: any) => any) | undefined;
+    "onGo-home"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "handle-click": (val: any) => any;
+    "nav-layout": (val: any) => any;
+    "go-home": () => any;
+}, string, {
+    isFlatten: boolean;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        logo?(_: {}): any;
+        nav?(_: {}): any;
+        nav?(_: {}): any;
+        toolbar?(_: {}): any;
+    };
+}) & {
+    install(app: App): void;
+};
+declare const OHeaderMobile: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../index').NavT> & Readonly<{
+        "onHandle-click"?: ((val: import('../../index').NavItemT) => any) | undefined;
+        "onGo-home"?: (() => any) | undefined;
+        "onLang-click"?: ((val: import('../../index').LangItemT) => any) | undefined;
+        "onGo-back"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        "handle-click": (val: import('../../index').NavItemT) => any;
+        "go-home": () => any;
+        "lang-click": (val: import('../../index').LangItemT) => any;
+        "go-back": () => any;
+    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        mobileNav: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly menuShow: boolean;
+                readonly navData: import('../../index').NavItemT[];
+                readonly codeData?: import('../../index').CodeT | undefined;
+                readonly langData?: import('../../index').LangT | undefined;
+                readonly activeIndex: string | number;
+                readonly community?: string | undefined;
+                readonly "onHandle-click"?: ((val: any) => any) | undefined;
+                readonly "onOn-click"?: (() => any) | undefined;
+                readonly "onLang-click"?: ((val: import('../../index').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: import('../../index').LangItemT) => void);
+            $el: HTMLDivElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('../../index').NavMobileItemT> & Readonly<{
+                "onHandle-click"?: ((val: any) => any) | undefined;
+                "onOn-click"?: (() => any) | undefined;
+                "onLang-click"?: ((val: import('../../index').LangItemT) => any) | undefined;
+            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+                "handle-click": (val: any) => any;
+                "on-click": () => any;
+                "lang-click": (val: import('../../index').LangItemT) => any;
+            }, string, {
+                navData: import('../../index').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('../../index').NavItemT[];
+            menuShow: boolean;
+        }> & Omit<Readonly<import('../../index').NavMobileItemT> & Readonly<{
+            "onHandle-click"?: ((val: any) => any) | undefined;
+            "onOn-click"?: (() => any) | undefined;
+            "onLang-click"?: ((val: import('../../index').LangItemT) => any) | undefined;
+        }>, "navData" | "menuShow"> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                tool?(_: {}): any;
+            };
+        }) | null;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('../../index').NavT> & Readonly<{
+        "onHandle-click"?: ((val: import('../../index').NavItemT) => any) | undefined;
+        "onGo-home"?: (() => any) | undefined;
+        "onLang-click"?: ((val: import('../../index').LangItemT) => any) | undefined;
+        "onGo-back"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('../../index').NavT> & Readonly<{
+    "onHandle-click"?: ((val: import('../../index').NavItemT) => any) | undefined;
+    "onGo-home"?: (() => any) | undefined;
+    "onLang-click"?: ((val: import('../../index').LangItemT) => any) | undefined;
+    "onGo-back"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "handle-click": (val: import('../../index').NavItemT) => any;
+    "go-home": () => any;
+    "lang-click": (val: import('../../index').LangItemT) => any;
+    "go-back": () => any;
+}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        rightConfig?(_: {}): any;
+        logo?(_: {}): any;
+        toolbar?(_: {}): any;
+        tool?(_: {}): any;
+    };
+}) & {
+    install(app: App): void;
+};
+export * from './types';
+export { OHeader, OHeaderMobile };

package/dist/treeshaking/components/header/index.mjs

@@ -0,0 +1,16 @@
+import _OHeader from "./OHeader.vue.mjs";
+import _OHeaderMobile from "./OHeaderMobile.vue.mjs";
+const OHeader = Object.assign(_OHeader, {
+  install(app) {
+    app.component("OHeader", _OHeader);
+  }
+});
+const OHeaderMobile = Object.assign(_OHeaderMobile, {
+  install(app) {
+    app.component("OHeaderMobile", _OHeaderMobile);
+  }
+});
+export {
+  OHeader,
+  OHeaderMobile
+};

package/dist/treeshaking/components/header/types.d.ts

@@ -0,0 +1,95 @@
+type tagT = 'HOT' | 'NEW';
+export declare enum NavType {
+    NAV = "nav",
+    CODE = "code",
+    LANG = "lang"
+}
+export interface ChildrenItemT {
+    label: string;
+    description?: string;
+    href?: string;
+    tag?: tagT;
+    icon?: any;
+    target?: string;
+    line?: number;
+    disabled?: boolean;
+    children?: ChildrenItemT[];
+}
+export interface ShortcutItemT {
+    label: string;
+    description?: string;
+    picture?: string;
+    pictureDark?: string;
+    href?: string;
+    tag?: tagT;
+    remark?: string;
+    type?: string;
+    target?: string;
+    icon?: string;
+}
+export interface NavItemT {
+    label: string;
+    id: string;
+    href?: string;
+    target?: string;
+    withPicture: boolean;
+    children: ChildrenItemT[];
+    shortcut: ShortcutItemT[];
+    tag?: string;
+    disabled?: boolean;
+}
+export interface CodeItemT {
+    label: string;
+    href: string;
+    icon?: string;
+    target?: string;
+}
+export interface LangItemT {
+    id: string;
+    label: string;
+    simple: string;
+}
+export interface CodeT {
+    label: string;
+    children: CodeItemT[];
+}
+export interface LangT {
+    label: string;
+    children: LangItemT[];
+}
+export interface NavT {
+    logo: string;
+    community?: string;
+    navData: NavItemT[];
+    bgLeft?: string;
+    bgRight?: string;
+    activeIndex: string | number;
+    codeData?: CodeT;
+    langData?: LangT;
+    isSimpleHeader?: boolean;
+    headerTitle?: string;
+    isFlatten?: boolean;
+}
+export interface NavLiT {
+    navData: NavItemT[];
+    community?: string;
+    activeIndex: string | number;
+    hoverId: string | number;
+}
+export interface NavLiItemT {
+    itemData: NavItemT;
+    itemVisible: boolean;
+    community?: string;
+    bgLeft?: string;
+    bgRight?: string;
+    hoverIndex: string | number;
+}
+export interface NavMobileItemT {
+    menuShow: boolean;
+    navData: NavItemT[];
+    codeData?: CodeT;
+    langData?: LangT;
+    activeIndex: string | number;
+    community?: string;
+}
+export {};

package/dist/treeshaking/components/header/types.mjs

@@ -0,0 +1,9 @@
+var NavType = /* @__PURE__ */ ((NavType2) => {
+  NavType2["NAV"] = "nav";
+  NavType2["CODE"] = "code";
+  NavType2["LANG"] = "lang";
+  return NavType2;
+})(NavType || {});
+export {
+  NavType
+};

package/dist/treeshaking/components/header-language-switcher/OHeaderLanguageSwitcher.css

@@ -0,0 +1,124 @@
+.hover-icon-rotate .o-icon[data-v-2620f484] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-2620f484] {
+    transform: rotate(-180deg);
+}
+}
+.hide-lang[data-v-2620f484] {
+  display: none;
+}
+.header-lang[data-v-2620f484] {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.header-lang .info-wrap[data-v-2620f484] {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.header-lang .info-wrap .icon[data-v-2620f484] {
+  font-size: var(--o-icon_size_control-m);
+  position: relative;
+  color: var(--o-color-info2);
+}
+@media (hover: hover) {
+.header-lang .info-wrap .icon[data-v-2620f484]:hover {
+    color: var(--o-color-primary2);
+    background-color: var(--o-color-control2-light);
+    border-radius: var(--o-radius-xs);
+}
+}
+@media (max-width: 1200px) {
+.header-lang .info-wrap .icon[data-v-2620f484] {
+    font-size: var(--o-icon_size_control-s);
+}
+}
+.header-lang .info-wrap .locale-tag[data-v-2620f484] {
+  position: absolute;
+  font-size: 10px;
+  height: 12px;
+  width: 12px;
+  background-color: var(--o-color-fill2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 12px;
+  top: 11px;
+}
+.header-lang .info-wrap .locale-tag.is-en[data-v-2620f484] {
+  width: 16px;
+}
+.header-lang.is-disabled .info-wrap[data-v-2620f484] {
+  color: var(--o-color-info4);
+  cursor: not-allowed;
+}
+.header-lang.is-disabled .info-wrap[data-v-2620f484]:hover {
+  color: var(--o-color-info4);
+}
+.header-lang.is-disabled .info-wrap .o-icon[data-v-2620f484] {
+  color: inherit;
+}
+@media (hover: hover) {
+.header-lang.is-disabled .info-wrap .o-icon[data-v-2620f484]:hover {
+    background-color: transparent;
+}
+}
+.o-dropdown[data-v-2620f484] {
+  height: 100%;
+}
+.o-dropdown-item[data-v-2620f484] {
+  background: var(--o-color-control5-light);
+  cursor: pointer;
+  --dropdown-item-color: var(--o-color-info2);
+  padding: var(--o-gap-1) var(--o-gap-3);
+  height: 32px;
+  --dropdown-item-text-size: 14px;
+  --dropdown-item-text-height: 22px;
+}
+@media (hover: hover) {
+.o-dropdown-item[data-v-2620f484]:hover {
+    background: var(--o-color-control2-light);
+}
+}
+.o-dropdown-item[data-v-2620f484]:active {
+  color: var(--o-color-primary1);
+  background: var(--o-color-control3-light);
+  font-weight: 600;
+}
+.o-dropdown-item.is-active[data-v-2620f484] {
+  color: var(--o-color-primary1);
+  background: var(--o-color-control3-light);
+}
+.mobile-change-language[data-v-2620f484] {
+  display: flex;
+  align-items: center;
+}
+.mobile-change-language .o-divider[data-v-2620f484] {
+  margin: 0 var(--o-gap-2);
+  height: 8px;
+  background-color: var(--o-color-control4);
+}
+.mobile-change-language span[data-v-2620f484] {
+  color: var(--o-color-info1);
+  text-align: center;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 22px;
+}
+.mobile-change-language span.active[data-v-2620f484] {
+  color: var(--o-color-primary1);
+  font-weight: 500;
+}
+.mobile-change-language.is-disabled span[data-v-2620f484] {
+  color: var(--o-color-info4);
+  cursor: not-allowed;
+}
+@media (hover: hover) {
+.mobile-change-language.is-disabled span[data-v-2620f484]:hover {
+    color: var(--o-color-info4);
+}
+}