@uzum-tech/ui 1.12.15 → 1.12.17

package/es/config-provider/src/internal-interface.d.ts

@@ -188,6 +188,7 @@ import { CropTheme } from '../../crop/styles';
 import { SafeTopScrollbarTheme } from '../../_internal/safe-top-scrollbar/styles';
 import { HeaderTheme } from '../../header/styles';
 import { QrCodeTheme } from '../../qr-code/styles';
+import { HeaderProps } from '../../header';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -385,6 +386,7 @@ export interface GlobalComponentConfig {
     CardList?: CardListProps;
     Chat?: ChatProps;
     Text?: TextProps;
+    Header?: HeaderProps;
     InputOtp?: InputOtpProps;
 }
 export interface GlobalIconConfig {

package/es/header/src/Header.d.ts

@@ -12,7 +12,9 @@ export declare const headerProps: {
         type: PropType<HeaderPropsInterface["langOptions"]>;
         default: () => LangOption[];
     };
-    defaultLang: PropType<HeaderPropsInterface["defaultLang"]>;
+    defaultLang: {
+        type: PropType<HeaderPropsInterface["defaultLang"]>;
+    };
     menuPlacement: {
         type: PropType<HeaderPropsInterface["menuPlacement"]>;
         default: string;
@@ -21,8 +23,13 @@ export declare const headerProps: {
         type: PropType<HeaderPropsInterface["menuTrigger"]>;
         default: string;
     };
-    menuValue: PropType<HeaderPropsInterface["menuValue"]>;
-    defaultMenuValue: PropType<HeaderPropsInterface["defaultMenuValue"]>;
+    menuValue: {
+        type: PropType<HeaderPropsInterface["menuValue"]>;
+    };
+    activeMenuKey: {
+        type: PropType<HeaderPropsInterface["activeMenuKey"]>;
+        default: null;
+    };
     menuTabsProps: {
         type: PropType<HeaderPropsInterface["menuTabsProps"]>;
         default: () => {};
@@ -186,7 +193,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["langOptions"]>;
         default: () => LangOption[];
     };
-    defaultLang: PropType<HeaderPropsInterface["defaultLang"]>;
+    defaultLang: {
+        type: PropType<HeaderPropsInterface["defaultLang"]>;
+    };
     menuPlacement: {
         type: PropType<HeaderPropsInterface["menuPlacement"]>;
         default: string;
@@ -195,8 +204,13 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["menuTrigger"]>;
         default: string;
     };
-    menuValue: PropType<HeaderPropsInterface["menuValue"]>;
-    defaultMenuValue: PropType<HeaderPropsInterface["defaultMenuValue"]>;
+    menuValue: {
+        type: PropType<HeaderPropsInterface["menuValue"]>;
+    };
+    activeMenuKey: {
+        type: PropType<HeaderPropsInterface["activeMenuKey"]>;
+        default: null;
+    };
     menuTabsProps: {
         type: PropType<HeaderPropsInterface["menuTabsProps"]>;
         default: () => {};
@@ -396,7 +410,7 @@ declare const _default: import("vue").DefineComponent<{
         key: string | number;
         icon?: (() => import("vue").VNodeChild) | undefined;
     }>;
-    isMobile: boolean | undefined;
+    isMobile: import("vue").Ref<boolean | undefined>;
     mobileMenuVisible: import("vue").Ref<boolean>;
     searchVisible: import("vue").Ref<boolean>;
     handleSelectLang: (key: string | number) => void;
@@ -425,7 +439,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["langOptions"]>;
         default: () => LangOption[];
     };
-    defaultLang: PropType<HeaderPropsInterface["defaultLang"]>;
+    defaultLang: {
+        type: PropType<HeaderPropsInterface["defaultLang"]>;
+    };
     menuPlacement: {
         type: PropType<HeaderPropsInterface["menuPlacement"]>;
         default: string;
@@ -434,8 +450,13 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["menuTrigger"]>;
         default: string;
     };
-    menuValue: PropType<HeaderPropsInterface["menuValue"]>;
-    defaultMenuValue: PropType<HeaderPropsInterface["defaultMenuValue"]>;
+    menuValue: {
+        type: PropType<HeaderPropsInterface["menuValue"]>;
+    };
+    activeMenuKey: {
+        type: PropType<HeaderPropsInterface["activeMenuKey"]>;
+        default: null;
+    };
     menuTabsProps: {
         type: PropType<HeaderPropsInterface["menuTabsProps"]>;
         default: () => {};
@@ -604,6 +625,7 @@ declare const _default: import("vue").DefineComponent<{
     langOptions: LangOption[] | undefined;
     menuPlacement: import("./interface").HeaderMenuPlacement | undefined;
     menuTrigger: import("./interface").HeaderMenuTrigger | undefined;
+    activeMenuKey: string | number | null | undefined;
     menuTabsProps: Partial<import("../..").TabsProps> | undefined;
     menuCardMinColumnWidth: string | number | undefined;
     logoSrc: string | undefined;

package/es/header/src/Header.js

@@ -45,13 +45,20 @@ export const headerProps = Object.assign(Object.assign({}, useTheme.props), { me
     }, langOptions: {
         type: Array,
         default: () => defaultLangOptions
-    }, defaultLang: [String, Number], menuPlacement: {
+    }, defaultLang: {
+        type: [String, Number]
+    }, menuPlacement: {
         type: String,
         default: 'horizontal'
     }, menuTrigger: {
         type: String,
         default: 'hover'
-    }, menuValue: [String, Number], defaultMenuValue: [String, Number], menuTabsProps: {
+    }, menuValue: {
+        type: [String, Number]
+    }, activeMenuKey: {
+        type: [String, Number],
+        default: null
+    }, menuTabsProps: {
         type: Object,
         default: () => ({})
     }, menuCardMinColumnWidth: {
@@ -102,10 +109,10 @@ export default defineComponent({
         'mobile-secondary-action'
     ],
     setup(props, { emit }) {
-        var _a, _b, _c;
+        var _a, _b;
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('Header', '-header', style, headerLight, props, mergedClsPrefixRef);
-        const isMobileRef = props.isMobile;
+        const isMobileRef = toRef(props, 'isMobile');
         const mobileMenuVisibleRef = ref(false);
         const searchVisibleRef = ref(false);
         onBeforeMount(() => {
@@ -130,7 +137,7 @@ export default defineComponent({
             ((_b = props.langOptions) === null || _b === void 0 ? void 0 : _b[0]) ||
             defaultLangOptions[0]);
         const controlledMenuValueRef = toRef(props, 'menuValue');
-        const uncontrolledMenuValueRef = ref((_c = props.defaultMenuValue) !== null && _c !== void 0 ? _c : null);
+        const uncontrolledMenuValueRef = ref(null);
         const mergedMenuValueRef = useMergedState(controlledMenuValueRef, uncontrolledMenuValueRef);
         const normalizedMenuItemsRef = computed(() => {
             var _a;
@@ -289,7 +296,7 @@ export default defineComponent({
                 this.logoSrc && `${blockClass}__logo--clickable`
             ].filter(Boolean), onClick: this.handleLogoClick },
             h("img", { src: this.logoSrc, alt: this.logoAlt })));
-        const navigationNode = resolveWrappedSlot($slots.navigation, (children) => children !== null && children !== void 0 ? children : null) || (h(HeaderNavigation, { menuOptions: this.menuOptions, menuPlacement: this.menuPlacement, menuTrigger: this.menuTrigger, menuValue: this.mergedMenuValue, menuTabsProps: this.menuTabsProps, menuCardMinColumnWidth: this.menuCardMinColumnWidth, mergedClsPrefix: mergedClsPrefix, menuPaneClass: this.menuPaneClass, menuPaneWrapperClass: this.menuPaneWrapperClass, onUpdateMenuValue: this.handleMenuValueUpdate }));
+        const navigationNode = resolveWrappedSlot($slots.navigation, (children) => children !== null && children !== void 0 ? children : null) || (h(HeaderNavigation, { menuOptions: this.menuOptions, menuPlacement: this.menuPlacement, menuTrigger: this.menuTrigger, menuValue: this.mergedMenuValue, menuTabsProps: this.menuTabsProps, menuCardMinColumnWidth: this.menuCardMinColumnWidth, mergedClsPrefix: mergedClsPrefix, menuPaneClass: this.menuPaneClass, menuPaneWrapperClass: this.menuPaneWrapperClass, activeMenuKey: this.activeMenuKey, onUpdateMenuValue: this.handleMenuValueUpdate }));
         const mobileNode = this.responsive && this.isMobile ? (h(HeaderMobile, { visible: this.mobileMenuVisible, menuOptions: this.normalizedMenuItems, activeMenuValue: this.mergedMenuValue, langOptions: this.langOptions || defaultLangOptions, currentLang: this.currentLang, mergedClsPrefix: mergedClsPrefix, cssVars: this.cssVars, menuType: this.mobileMenuType, showFooterActions: this.mobileShowFooterActions, showHeaderActions: this.mobileShowHeaderActions, primaryActionText: this.mobilePrimaryActionText, secondaryActionText: this.mobileSecondaryActionText, onToggle: this.toggleMobileMenu, onClose: this.closeMobileMenu, onMenuItemClick: this.handleMobileMenuItemClick, onLanguageSelect: this.handleSelectLang, onPrimaryAction: this.handleMobilePrimaryAction, onSecondaryAction: this.handleMobileSecondaryAction, onSearchClick: this.handleSearchClick, onPreview: this.handlePreviewClick, onLogout: this.handleLogoutClick }, {
             actions: $slots['mobile-actions'],
             footer: $slots['mobile-footer']

package/es/header/src/HeaderNavigation.d.ts

@@ -39,6 +39,10 @@ export declare const headerNavigationProps: {
         readonly type: StringConstructor;
         readonly required: true;
     };
+    readonly activeMenuKey: {
+        readonly type: PropType<string | number | null>;
+        readonly default: null;
+    };
     readonly 'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
     readonly onUpdateMenuValue: PropType<MaybeArray<(value: string | number | null) => void>>;
 };
@@ -76,6 +80,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly required: true;
     };
+    readonly activeMenuKey: {
+        readonly type: PropType<string | number | null>;
+        readonly default: null;
+    };
     readonly 'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
     readonly onUpdateMenuValue: PropType<MaybeArray<(value: string | number | null) => void>>;
 }, {
@@ -1679,6 +1687,10 @@ declare const _default: import("vue").DefineComponent<{
         "vector-effect"?: import("csstype").Property.VectorEffect | undefined;
     }>;
     hoveredKey: import("vue").Ref<string | number | null>;
+    activeMenuKey: import("vue").Ref<string> | import("vue").Ref<number> | import("vue").Ref<null>;
+    setActiveMenuKey: (key?: string | number | null) => void;
+    handleMenuItemClick: (option: HeaderMenuOption) => void;
+    checkedTopMenuKey: import("vue").ComputedRef<string | number | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly menuOptions: {
         readonly type: PropType<HeaderMenuOption[]>;
@@ -1713,12 +1725,17 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly required: true;
     };
+    readonly activeMenuKey: {
+        readonly type: PropType<string | number | null>;
+        readonly default: null;
+    };
     readonly 'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
     readonly onUpdateMenuValue: PropType<MaybeArray<(value: string | number | null) => void>>;
 }>>, {
     readonly menuOptions: HeaderMenuOption[];
     readonly menuPlacement: HeaderMenuPlacement;
     readonly menuTrigger: "click" | "hover";
+    readonly activeMenuKey: string | number | null;
     readonly menuTabsProps: Partial<import("../..").TabsProps>;
     readonly menuCardMinColumnWidth: string | number;
 }, {}>;

package/es/header/src/HeaderNavigation.js

@@ -18,9 +18,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { h, defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { h, defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount, toRef } from 'vue';
 import { call } from '../../_utils';
-import { renderOptionLabel, renderBadge, getMenuItemKey, isDividerOption, isGroupOption, isColumnOption, isNotNull, isLeafMenuOption } from './utils';
+import { renderOptionLabel, renderBadge, getMenuItemKey, resolveTopLevelMenuKey, isDividerOption, isGroupOption, isColumnOption, isNotNull, isLeafMenuOption } from './utils';
 export const headerNavigationProps = {
     menuOptions: {
         type: Array,
@@ -55,6 +55,10 @@ export const headerNavigationProps = {
         type: String,
         required: true
     },
+    activeMenuKey: {
+        type: [String, Number],
+        default: null
+    },
     'onUpdate:menuValue': [Function, Array],
     onUpdateMenuValue: [Function, Array]
 };
@@ -73,11 +77,16 @@ export default defineComponent({
             navRef.value = el;
         };
         const hoveredKeyRef = ref(null);
+        const activeMenuKeyRef = toRef(props.activeMenuKey);
         const tabRefs = ref({});
         const indicatorStyleRef = ref({
             width: '0px',
             transform: 'translateX(0)'
         });
+        const checkedTopMenuKey = computed(() => {
+            var _a;
+            return ((_a = resolveTopLevelMenuKey(props.menuOptions, activeMenuKeyRef.value)) !== null && _a !== void 0 ? _a : undefined);
+        });
         function updateIndicator() {
             var _a, _b;
             const navEl = navRef.value;
@@ -117,6 +126,14 @@ export default defineComponent({
             if (_onUpdateMenuValue)
                 call(_onUpdateMenuValue, value);
         }
+        function setActiveMenuKey(key = null) {
+            activeMenuKeyRef.value = key;
+        }
+        function handleMenuItemClick(option) {
+            setActiveMenuKey(option === null || option === void 0 ? void 0 : option.key);
+            if (option.onClick)
+                option === null || option === void 0 ? void 0 : option.onClick();
+        }
         onMounted(() => __awaiter(this, void 0, void 0, function* () {
             yield nextTick(updateIndicator);
             window.addEventListener('resize', updateIndicator);
@@ -148,7 +165,11 @@ export default defineComponent({
             navRef,
             setTabRef,
             indicatorStyle: indicatorStyleRef,
-            hoveredKey: hoveredKeyRef
+            hoveredKey: hoveredKeyRef,
+            activeMenuKey: activeMenuKeyRef,
+            setActiveMenuKey,
+            handleMenuItemClick,
+            checkedTopMenuKey
         };
     },
     render() {
@@ -167,7 +188,10 @@ export default defineComponent({
             return (h("div", Object.assign({ key: key, class: [
                     `${blockClass}__menu-item`,
                     option.disabled && `${blockClass}__menu-item--disabled`
-                ], role: "button", tabindex: option.disabled ? undefined : 0, onClick: option.onClick }, $props),
+                ], role: "button", tabindex: option.disabled ? undefined : 0, onClick: (event) => {
+                    event.stopPropagation();
+                    this.handleMenuItemClick(option);
+                } }, $props),
                 h("span", { class: `${blockClass}__menu-item-main` },
                     icon ? (h("span", { class: `${blockClass}__menu-item-icon` }, icon)) : null,
                     h("span", { class: `${blockClass}__menu-item-label` }, renderOptionLabel(option))),
@@ -201,7 +225,10 @@ export default defineComponent({
                 const hasChildren = option.children && option.children.length > 0;
                 if (!hasChildren) {
                     return (h("div", { key: key, class: `${blockClass}__menu-column-section` },
-                        h("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: option.onClick }, renderOptionLabel(option))));
+                        h("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: (event) => {
+                                event.stopPropagation();
+                                this.handleMenuItemClick(option);
+                            } }, renderOptionLabel(option))));
                 }
                 const children = (_e = (_d = option.children) === null || _d === void 0 ? void 0 : _d.map((child, index) => renderMenuItem(child, `${key}-item-${index}`))) !== null && _e !== void 0 ? _e : [];
                 const content = children.filter(isNotNull);
@@ -209,11 +236,17 @@ export default defineComponent({
                     return null;
                 if (asSection) {
                     return (h("div", { key: key, class: `${blockClass}__menu-column-section` },
-                        h("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: option.onClick }, renderOptionLabel(option)),
+                        h("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: (event) => {
+                                event.stopPropagation();
+                                this.handleMenuItemClick(option);
+                            } }, renderOptionLabel(option)),
                         h("div", { class: `${blockClass}__menu-column-list` }, content)));
                 }
                 return (h("div", { key: key, class: `${blockClass}__menu-column` },
-                    h("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: option.onClick }, renderOptionLabel(option)),
+                    h("div", { class: `${blockClass}__menu-column-title`, role: option.onClick ? 'button' : undefined, tabindex: option.onClick && !option.disabled ? 0 : undefined, onClick: (event) => {
+                            event.stopPropagation();
+                            this.handleMenuItemClick(option);
+                        } }, renderOptionLabel(option)),
                     h("div", { class: `${blockClass}__menu-column-list` }, content)));
             }
             return (h("div", { key: key, class: [
@@ -287,6 +320,7 @@ export default defineComponent({
                             h("div", { class: "u-tabs-pad", style: { width: tabsPaddingValue } }),
                             menuItems.map((item, index) => {
                                 const isActive = activeValue === item.key;
+                                const isChecked = this.checkedTopMenuKey === item.key;
                                 const isOpen = isHoverTrigger
                                     ? this.hoveredKey === item.key
                                     : isActive;
@@ -299,7 +333,8 @@ export default defineComponent({
                                         'u-tabs-tab',
                                         `${blockClass}__tab`,
                                         isActive && 'u-tabs-tab--active',
-                                        isDisabled && 'u-tabs-tab--disabled'
+                                        isDisabled && 'u-tabs-tab--disabled',
+                                        isChecked && 'u-tabs-tab--checked'
                                     ], ref: this.setTabRef(item.key), role: "tab", "aria-selected": isActive, "aria-disabled": isDisabled, tabindex: isDisabled ? -1 : isActive ? 0 : -1, onKeydown: (event) => {
                                         if (!isDisabled &&
                                             !isHoverTrigger &&
@@ -317,9 +352,7 @@ export default defineComponent({
                                             if (!isHoverTrigger) {
                                                 emitUpdate(item.key);
                                             }
-                                            if (item.option.onClick) {
-                                                item.option.onClick();
-                                            }
+                                            this.handleMenuItemClick(item.option);
                                         }
                                         : undefined },
                                     icon ? (h("span", { class: `${blockClass}__tab-icon` }, icon)) : null,

package/es/header/src/interface.d.ts

@@ -9,7 +9,7 @@ export interface HeaderProps {
     menuPlacement?: HeaderMenuPlacement;
     menuTrigger?: HeaderMenuTrigger;
     menuValue?: string | number | null;
-    defaultMenuValue?: string | number | null;
+    activeMenuKey?: string | number | null;
     menuTabsProps?: HeaderMenuTabsProps;
     menuCardMinColumnWidth?: string | number;
     logoSrc?: string;
@@ -52,9 +52,10 @@ export type HeaderMenuDividerOption = MenuDividerOption;
 export type HeaderSearchHandler = (query: string) => Promise<HeaderSearchResult[]> | HeaderSearchResult[];
 export type HeaderMenuChildOption = HeaderMenuColumnOption | HeaderMenuGroupOption | HeaderMenuDividerOption | HeaderMenuOption;
 export type HeaderMenuOption = Omit<BaseMenuOption, 'children'> & {
+    key?: string | number | null;
     children?: HeaderMenuChildOption[];
-    onClick?: () => void;
     hide?: boolean;
+    onClick?: () => void;
 };
 export type HeaderMenuPlacement = 'horizontal' | 'vertical' | 'top' | 'bottom' | 'left' | 'right';
 export type HeaderMenuTrigger = 'click' | 'hover';

package/es/header/src/mobile/HeaderMobile.d.ts

@@ -207,8 +207,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly primaryActionText: string;
     readonly secondaryActionText: string;
-    readonly visible: boolean;
     readonly menuOptions: NormalizedMenuItem[];
+    readonly visible: boolean;
     readonly menuType: "drawer" | "dropdown";
     readonly drawerPlacement: "left" | "right";
     readonly drawerWidth: string;

package/es/header/src/styles/index.cssr.js

@@ -126,6 +126,8 @@ export default cB('header', `
  cursor: not-allowed;
  pointer-events: none;
  opacity: .5;
+ `), c('& .u-tabs-tab--checked', `
+ color: var(--u-header-tab-text-color-active);
  `), c('& .u-tabs-tab:hover', `
  color: var(--u-header-tab-text-color-hover);
  `), c('& .u-tabs-bar', `

package/es/header/src/utils.d.ts

@@ -11,3 +11,4 @@ export declare function isColumnOption(option: HeaderMenuChildOption): option is
 export declare function isNotNull<T>(value: T | null): value is T;
 export declare function resolvePlacement(placement: HeaderMenuPlacement): TabsProps['placement'];
 export declare function isLeafMenuOption(option: HeaderMenuChildOption): option is Exclude<HeaderMenuChildOption, HeaderMenuColumnOption>;
+export declare function resolveTopLevelMenuKey(menuOptions: HeaderMenuOption[], activeMenuKey: string | number | null | undefined): string | number | null;

package/es/header/src/utils.js

@@ -48,3 +48,37 @@ export function resolvePlacement(placement) {
 export function isLeafMenuOption(option) {
     return option.type !== 'column';
 }
+function isMenuValueInChildren(children, value) {
+    if (!children || children.length === 0)
+        return false;
+    for (const child of children) {
+        if (isDividerOption(child))
+            continue;
+        if (isColumnOption(child)) {
+            if (isMenuValueInChildren(child.children, value))
+                return true;
+            continue;
+        }
+        if (child.key === value)
+            return true;
+        if (isGroupOption(child) || hasChildren(child)) {
+            if (isMenuValueInChildren(child.children, value))
+                return true;
+        }
+    }
+    return false;
+}
+export function resolveTopLevelMenuKey(menuOptions, activeMenuKey) {
+    if (activeMenuKey === null || activeMenuKey === undefined)
+        return null;
+    for (let index = 0; index < menuOptions.length; index += 1) {
+        const option = menuOptions[index];
+        const optionKey = getMenuItemKey(option, index);
+        if (optionKey === activeMenuKey)
+            return optionKey;
+        if (isMenuValueInChildren(option.children, activeMenuKey)) {
+            return optionKey;
+        }
+    }
+    return null;
+}

package/es/modal/src/Modal.js

@@ -1,4 +1,4 @@
-import { h, withDirectives, Transition, ref, computed, defineComponent, provide, toRef, inject } from 'vue';
+import { h, withDirectives, Transition, ref, computed, defineComponent, provide, toRef, inject, nextTick } from 'vue';
 import { zindexable } from 'vdirs';
 import { useIsMounted, useClicked, useClickPosition } from 'vooks';
 import { VLazyTeleport } from 'vueuc';
@@ -124,6 +124,13 @@ export default defineComponent({
             const { onBeforeLeave, onBeforeHide } = props;
             if (onBeforeLeave)
                 call(onBeforeLeave);
+            void nextTick(() => {
+                if (document.activeElement &&
+                    document.activeElement !== document.body) {
+                    ;
+                    document.activeElement.blur();
+                }
+            });
             // deprecated
             if (onBeforeHide)
                 onBeforeHide();
@@ -132,6 +139,13 @@ export default defineComponent({
             const { onAfterLeave, onAfterHide } = props;
             if (onAfterLeave)
                 call(onAfterLeave);
+            void nextTick(() => {
+                if (document.activeElement &&
+                    document.activeElement !== document.body) {
+                    ;
+                    document.activeElement.blur();
+                }
+            });
             // deprecated
             if (onAfterHide)
                 onAfterHide();

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.15";
+declare const _default: "1.12.17";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.12.15';
+export default '1.12.17';

package/lib/config-provider/src/internal-interface.d.ts

@@ -188,6 +188,7 @@ import { CropTheme } from '../../crop/styles';
 import { SafeTopScrollbarTheme } from '../../_internal/safe-top-scrollbar/styles';
 import { HeaderTheme } from '../../header/styles';
 import { QrCodeTheme } from '../../qr-code/styles';
+import { HeaderProps } from '../../header';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -385,6 +386,7 @@ export interface GlobalComponentConfig {
     CardList?: CardListProps;
     Chat?: ChatProps;
     Text?: TextProps;
+    Header?: HeaderProps;
     InputOtp?: InputOtpProps;
 }
 export interface GlobalIconConfig {

package/lib/header/src/Header.d.ts

@@ -12,7 +12,9 @@ export declare const headerProps: {
         type: PropType<HeaderPropsInterface["langOptions"]>;
         default: () => LangOption[];
     };
-    defaultLang: PropType<HeaderPropsInterface["defaultLang"]>;
+    defaultLang: {
+        type: PropType<HeaderPropsInterface["defaultLang"]>;
+    };
     menuPlacement: {
         type: PropType<HeaderPropsInterface["menuPlacement"]>;
         default: string;
@@ -21,8 +23,13 @@ export declare const headerProps: {
         type: PropType<HeaderPropsInterface["menuTrigger"]>;
         default: string;
     };
-    menuValue: PropType<HeaderPropsInterface["menuValue"]>;
-    defaultMenuValue: PropType<HeaderPropsInterface["defaultMenuValue"]>;
+    menuValue: {
+        type: PropType<HeaderPropsInterface["menuValue"]>;
+    };
+    activeMenuKey: {
+        type: PropType<HeaderPropsInterface["activeMenuKey"]>;
+        default: null;
+    };
     menuTabsProps: {
         type: PropType<HeaderPropsInterface["menuTabsProps"]>;
         default: () => {};
@@ -186,7 +193,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["langOptions"]>;
         default: () => LangOption[];
     };
-    defaultLang: PropType<HeaderPropsInterface["defaultLang"]>;
+    defaultLang: {
+        type: PropType<HeaderPropsInterface["defaultLang"]>;
+    };
     menuPlacement: {
         type: PropType<HeaderPropsInterface["menuPlacement"]>;
         default: string;
@@ -195,8 +204,13 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["menuTrigger"]>;
         default: string;
     };
-    menuValue: PropType<HeaderPropsInterface["menuValue"]>;
-    defaultMenuValue: PropType<HeaderPropsInterface["defaultMenuValue"]>;
+    menuValue: {
+        type: PropType<HeaderPropsInterface["menuValue"]>;
+    };
+    activeMenuKey: {
+        type: PropType<HeaderPropsInterface["activeMenuKey"]>;
+        default: null;
+    };
     menuTabsProps: {
         type: PropType<HeaderPropsInterface["menuTabsProps"]>;
         default: () => {};
@@ -396,7 +410,7 @@ declare const _default: import("vue").DefineComponent<{
         key: string | number;
         icon?: (() => import("vue").VNodeChild) | undefined;
     }>;
-    isMobile: boolean | undefined;
+    isMobile: import("vue").Ref<boolean | undefined>;
     mobileMenuVisible: import("vue").Ref<boolean>;
     searchVisible: import("vue").Ref<boolean>;
     handleSelectLang: (key: string | number) => void;
@@ -425,7 +439,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["langOptions"]>;
         default: () => LangOption[];
     };
-    defaultLang: PropType<HeaderPropsInterface["defaultLang"]>;
+    defaultLang: {
+        type: PropType<HeaderPropsInterface["defaultLang"]>;
+    };
     menuPlacement: {
         type: PropType<HeaderPropsInterface["menuPlacement"]>;
         default: string;
@@ -434,8 +450,13 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["menuTrigger"]>;
         default: string;
     };
-    menuValue: PropType<HeaderPropsInterface["menuValue"]>;
-    defaultMenuValue: PropType<HeaderPropsInterface["defaultMenuValue"]>;
+    menuValue: {
+        type: PropType<HeaderPropsInterface["menuValue"]>;
+    };
+    activeMenuKey: {
+        type: PropType<HeaderPropsInterface["activeMenuKey"]>;
+        default: null;
+    };
     menuTabsProps: {
         type: PropType<HeaderPropsInterface["menuTabsProps"]>;
         default: () => {};
@@ -604,6 +625,7 @@ declare const _default: import("vue").DefineComponent<{
     langOptions: LangOption[] | undefined;
     menuPlacement: import("./interface").HeaderMenuPlacement | undefined;
     menuTrigger: import("./interface").HeaderMenuTrigger | undefined;
+    activeMenuKey: string | number | null | undefined;
     menuTabsProps: Partial<import("../..").TabsProps> | undefined;
     menuCardMinColumnWidth: string | number | undefined;
     logoSrc: string | undefined;