@uzum-tech/ui 1.12.20 → 1.12.22

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

@@ -398,6 +398,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-header-card-divider-color': string;
         '--u-header-card-gap': string;
         '--u-header-card-padding': string;
+        '--u-header-card-shadow': string;
         '--u-header-badge-bg-color': string;
         '--u-header-badge-text-color': string;
         '--u-header-action-icon-color': string;

package/es/header/src/Header.js

@@ -176,6 +176,7 @@ export default defineComponent({
                 '--u-header-card-divider-color': self.cardDividerColor,
                 '--u-header-card-gap': self.cardGap,
                 '--u-header-card-padding': self.cardPadding,
+                '--u-header-card-shadow': self.cardShadow,
                 '--u-header-badge-bg-color': self.badgeBackgroundColor,
                 '--u-header-badge-text-color': self.badgeTextColor,
                 '--u-header-action-icon-color': self.actionIconColor,
@@ -317,7 +318,10 @@ export default defineComponent({
         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.mergedActiveMenuKey, onUpdateMenuValue: this.handleMenuValueUpdate, onUpdateActiveMenuKey: this.handleUpdateActiveMenuKey }));
         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']
+            footer: $slots['mobile-footer'],
+            search: $slots['mobile-search'],
+            preview: $slots['mobile-preview'],
+            logout: $slots['mobile-logout']
         })) : null;
         const langNode = resolveWrappedSlot($slots.lang, (children) => children);
         const searchNode = resolveWrappedSlot($slots.search, (children) => children);

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

@@ -30,6 +30,7 @@ export declare const headerActionsProps: {
         readonly required: false;
     };
     readonly cssVars: PropType<HeaderActionsProps["cssVars"]>;
+    readonly langDropdownThemeOverrides: PropType<HeaderActionsProps["langDropdownThemeOverrides"]>;
     readonly onSearch: PropType<HeaderActionsProps["onSearch"]>;
     readonly onPreview: PropType<HeaderActionsProps["onPreview"]>;
     readonly onLogout: PropType<HeaderActionsProps["onLogout"]>;
@@ -66,6 +67,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: false;
     };
     readonly cssVars: PropType<HeaderActionsProps["cssVars"]>;
+    readonly langDropdownThemeOverrides: PropType<HeaderActionsProps["langDropdownThemeOverrides"]>;
     readonly onSearch: PropType<HeaderActionsProps["onSearch"]>;
     readonly onPreview: PropType<HeaderActionsProps["onPreview"]>;
     readonly onLogout: PropType<HeaderActionsProps["onLogout"]>;
@@ -119,6 +121,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: false;
     };
     readonly cssVars: PropType<HeaderActionsProps["cssVars"]>;
+    readonly langDropdownThemeOverrides: PropType<HeaderActionsProps["langDropdownThemeOverrides"]>;
     readonly onSearch: PropType<HeaderActionsProps["onSearch"]>;
     readonly onPreview: PropType<HeaderActionsProps["onPreview"]>;
     readonly onLogout: PropType<HeaderActionsProps["onLogout"]>;

package/es/header/src/HeaderActions.js

@@ -45,6 +45,7 @@ export const headerActionsProps = {
         required: false
     },
     cssVars: Object,
+    langDropdownThemeOverrides: Object,
     onSearch: Function,
     onPreview: Function,
     onLogout: Function,
@@ -130,7 +131,7 @@ export default defineComponent({
             var _a;
             if (((_a = this.actionsVisibility) === null || _a === void 0 ? void 0 : _a.lang) === false)
                 return null;
-            return $slots.lang ? ($slots.lang()) : (h(UDropdown, { options: this.langOptions, onSelect: this.onLanguageSelect }, {
+            return $slots.lang ? ($slots.lang()) : (h(UDropdown, { options: this.langOptions, onSelect: this.onLanguageSelect, themeOverrides: this.langDropdownThemeOverrides }, {
                 default: () => (h(UButton, { "icon-placement": "right", text: true, renderIcon: () => (h(UIcon, null, { default: () => h(ChevronDownOutline, null) })) }, {
                     default: () => {
                         var _a, _b, _c;

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

@@ -49,6 +49,18 @@ declare const _default: import("vue").DefineComponent<{
     search: import("vue").Ref<string>;
     searchText: import("vue").ComputedRef<string>;
     placeholder: import("vue").ComputedRef<string>;
+    inputInstRef: import("vue").Ref<{
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly searchValue: {
         readonly type: StringConstructor;

package/es/header/src/HeaderSearchDesktop.js

@@ -1,4 +1,5 @@
-import { h, defineComponent, computed, ref } from 'vue';
+import { h, defineComponent, computed, ref, withDirectives, onMounted } from 'vue';
+import { clickoutside } from 'vdirs';
 import { UButton } from '../../button';
 import { UIcon } from '../../icon';
 import { UInput } from '../../input';
@@ -38,15 +39,21 @@ export default defineComponent({
         const search = ref('');
         const searchText = computed(() => localeRef.value.desktopSearchTitle);
         const placeholder = computed(() => localeRef.value.searchPlaceholder);
+        const inputInstRef = ref(null);
+        onMounted(() => {
+            var _a;
+            (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+        });
         return {
             search,
             searchText,
-            placeholder
+            placeholder,
+            inputInstRef
         };
     },
     render() {
         const blockClass = `${this.mergedClsPrefix}-header-search-desktop`;
-        return (h("div", { class: blockClass, style: this.cssVars },
+        const content = (h("div", { class: blockClass, style: this.cssVars },
             h(UButton, { text: true, class: `${blockClass}__close`, onClick: this.onSearchClose }, {
                 default: () => (h(UIcon, { size: 24, color: "#C5C7CA" }, { default: () => h(CloseIcon, null) }))
             }),
@@ -54,7 +61,7 @@ export default defineComponent({
                 h(UText, { variant: "title-l-medium", text: this.searchText })),
             h("div", { class: `${blockClass}__content` },
                 h("div", { class: `${blockClass}__input-wrapper` },
-                    h(UInput, { value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
+                    h(UInput, { ref: "inputInstRef", value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
                             var _a, _b;
                             if (e.key === 'Enter') {
                                 (_a = this.onSearchSubmit) === null || _a === void 0 ? void 0 : _a.call(this);
@@ -73,5 +80,15 @@ export default defineComponent({
                 cssVars: this.cssVars,
                 onSelect: this.onResultSelect
             })));
+        if (!this.onSearchClose)
+            return content;
+        return withDirectives(content, [
+            [
+                clickoutside,
+                this.onSearchClose,
+                undefined,
+                { capture: true }
+            ]
+        ]);
     }
 });

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

@@ -46,6 +46,18 @@ declare const _default: import("vue").DefineComponent<{
         disabled?: boolean | undefined;
     }[]>;
     searchLoading: import("vue").Ref<boolean>;
+    inputInstRef: import("vue").Ref<{
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null>;
     handleSearchInput: (value: string) => void;
     handleSearch: () => Promise<void>;
     handleClose: () => void;

package/es/header/src/HeaderSearchMobile.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { h, defineComponent, ref, watch, computed } from 'vue';
+import { h, defineComponent, ref, watch, computed, onMounted } from 'vue';
 import { UDrawer } from '../../drawer';
 import { UButton } from '../../button';
 import { UIcon } from '../../icon';
@@ -41,6 +41,7 @@ export default defineComponent({
         const searchValue = ref('');
         const searchResults = ref([]);
         const searchLoading = ref(false);
+        const inputInstRef = ref(null);
         const placeholder = computed(() => localeRef.value.searchPlaceholder);
         const handleSearch = () => __awaiter(this, void 0, void 0, function* () {
             const query = searchValue.value.trim();
@@ -84,11 +85,16 @@ export default defineComponent({
                 void handleSearch();
             }, SEARCH_DEBOUNCE_MS);
         });
+        onMounted(() => {
+            var _a;
+            (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+        });
         return {
             placeholder,
             searchValue,
             searchResults,
             searchLoading,
+            inputInstRef,
             handleSearchInput,
             handleSearch,
             handleClose,
@@ -106,7 +112,7 @@ export default defineComponent({
                 h(UButton, { text: true, class: `${blockClass}__back`, onClick: this.handleClose }, () => h(UIcon, { size: 24 }, () => h(ChevronLeftIcon, null))),
                 h("div", { class: `${blockClass}__input-wrapper` },
                     h(UIcon, { size: 20, class: `${blockClass}__input-icon` }, () => h(SearchIcon, null)),
-                    h(UInput, { value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
+                    h(UInput, { ref: "inputInstRef", value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
                             if (e.key === 'Enter') {
                                 void this.handleSearch();
                             }

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

@@ -1,4 +1,6 @@
 import { CSSProperties, type VNodeChild } from 'vue';
+import type { ExtractThemeOverrides } from '../../_mixins/use-theme';
+import type { DropdownTheme } from '../../dropdown/styles';
 import type { MenuOption as BaseMenuOption, MenuGroupOption, MenuDividerOption, Key } from '../../menu/src/interface';
 import type { TabsProps } from '../../tabs';
 import { ImageProps } from '../../image';
@@ -37,6 +39,7 @@ export interface HeaderActionsProps {
     mobileActionsCollapse?: boolean;
     actionsVisibility?: ActionsVisibility;
     cssVars?: CSSProperties;
+    langDropdownThemeOverrides?: ExtractThemeOverrides<DropdownTheme>;
     onSearch: HeaderSearchHandler;
     onPreview: VoidFunction;
     onLogout: VoidFunction;

package/es/header/src/mobile/HeaderMobile.js

@@ -197,6 +197,21 @@ export default defineComponent({
                     renderBadge(option, `${blockClass}__badge`)),
                 isExpandable && isExpanded && option.children && (h("div", { class: `${mobileMenuClass}__children` }, option.children.map((child, index) => renderGroupItem(child, item.key, index))))));
         };
+        const renderSearchAction = () => {
+            if (this.$slots.search)
+                return this.$slots.search();
+            return (h(UButton, { text: true, onClick: this.onSearchClick }, () => h(UIcon, { size: 24 }, () => h(SearchIcon, null))));
+        };
+        const renderPreviewAction = () => {
+            if (this.$slots.preview)
+                return this.$slots.preview();
+            return (h(UButton, { text: true, onClick: this.onPreview }, () => h(UIcon, { size: 24 }, () => h(EyeIcon, null))));
+        };
+        const renderLogoutAction = () => {
+            if (this.$slots.logout)
+                return this.$slots.logout();
+            return (h(UButton, { text: true, onClick: this.onLogout }, () => h(UIcon, { size: 24 }, () => h(LogoutIcon, null))));
+        };
         const mobileMenuContent = (h("div", { class: mobileMenuClass, style: this.cssVars },
             h("div", { class: `${mobileMenuClass}__header` },
                 this.$slots.actions ? (h("div", { class: `${mobileMenuClass}__actions` }, this.$slots.actions())) : this.showHeaderActions ? (h("div", { class: `${mobileMenuClass}__actions` },
@@ -216,9 +231,9 @@ export default defineComponent({
                     }),
                     h(UFlex, { size: 24 }, {
                         default: () => (h(Fragment, null,
-                            h(UButton, { text: true, onClick: this.onSearchClick }, () => h(UIcon, { size: 24 }, () => h(SearchIcon, null))),
-                            h(UButton, { text: true, onClick: this.onPreview }, () => h(UIcon, { size: 24 }, () => h(EyeIcon, null))),
-                            h(UButton, { text: true, onClick: this.onLogout }, () => h(UIcon, { size: 24 }, () => h(LogoutIcon, null)))))
+                            renderSearchAction(),
+                            renderPreviewAction(),
+                            renderLogoutAction()))
                     }))) : null,
                 h(UButton, { text: true, class: `${mobileMenuClass}__close`, onClick: this.onClose }, () => h(UIcon, { size: 24 }, () => h(CloseIcon, null)))),
             h("div", { class: `${mobileMenuClass}__body` },

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

@@ -128,6 +128,7 @@ export default cB('header', `
  opacity: .5;
  `), c('& .u-tabs-tab--checked', `
  color: var(--u-header-tab-text-color-active);
+ border-color: var(--u-header-tab-indicator-color);
  `), c('& .u-tabs-tab:hover', `
  color: var(--u-header-tab-text-color-hover);
  `), c('& .u-tabs-bar', `
@@ -182,6 +183,7 @@ export default cB('header', `
  background-color: var(--u-header-card-bg-color);
  border-radius: var(--u-header-card-radius);
  padding: var(--u-header-card-padding);
+ box-shadow: var(--u-header-card-shadow);
  `), cE('menu-grid', `
  display: grid;
  gap: var(--u-header-card-gap);

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.20";
+declare const _default: "1.12.22";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.12.20';
+export default '1.12.22';

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

@@ -398,6 +398,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-header-card-divider-color': string;
         '--u-header-card-gap': string;
         '--u-header-card-padding': string;
+        '--u-header-card-shadow': string;
         '--u-header-badge-bg-color': string;
         '--u-header-badge-text-color': string;
         '--u-header-action-icon-color': string;

package/lib/header/src/Header.js

@@ -205,6 +205,7 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-header-card-divider-color': self.cardDividerColor,
                 '--u-header-card-gap': self.cardGap,
                 '--u-header-card-padding': self.cardPadding,
+                '--u-header-card-shadow': self.cardShadow,
                 '--u-header-badge-bg-color': self.badgeBackgroundColor,
                 '--u-header-badge-text-color': self.badgeTextColor,
                 '--u-header-action-icon-color': self.actionIconColor,
@@ -346,7 +347,10 @@ exports.default = (0, vue_1.defineComponent)({
         const navigationNode = (0, _utils_1.resolveWrappedSlot)($slots.navigation, (children) => children !== null && children !== void 0 ? children : null) || ((0, vue_1.h)(HeaderNavigation_1.default, { 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.mergedActiveMenuKey, onUpdateMenuValue: this.handleMenuValueUpdate, onUpdateActiveMenuKey: this.handleUpdateActiveMenuKey }));
         const mobileNode = this.responsive && this.isMobile ? ((0, vue_1.h)(HeaderMobile_1.default, { 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']
+            footer: $slots['mobile-footer'],
+            search: $slots['mobile-search'],
+            preview: $slots['mobile-preview'],
+            logout: $slots['mobile-logout']
         })) : null;
         const langNode = (0, _utils_1.resolveWrappedSlot)($slots.lang, (children) => children);
         const searchNode = (0, _utils_1.resolveWrappedSlot)($slots.search, (children) => children);

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

@@ -30,6 +30,7 @@ export declare const headerActionsProps: {
         readonly required: false;
     };
     readonly cssVars: PropType<HeaderActionsProps["cssVars"]>;
+    readonly langDropdownThemeOverrides: PropType<HeaderActionsProps["langDropdownThemeOverrides"]>;
     readonly onSearch: PropType<HeaderActionsProps["onSearch"]>;
     readonly onPreview: PropType<HeaderActionsProps["onPreview"]>;
     readonly onLogout: PropType<HeaderActionsProps["onLogout"]>;
@@ -66,6 +67,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: false;
     };
     readonly cssVars: PropType<HeaderActionsProps["cssVars"]>;
+    readonly langDropdownThemeOverrides: PropType<HeaderActionsProps["langDropdownThemeOverrides"]>;
     readonly onSearch: PropType<HeaderActionsProps["onSearch"]>;
     readonly onPreview: PropType<HeaderActionsProps["onPreview"]>;
     readonly onLogout: PropType<HeaderActionsProps["onLogout"]>;
@@ -119,6 +121,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: false;
     };
     readonly cssVars: PropType<HeaderActionsProps["cssVars"]>;
+    readonly langDropdownThemeOverrides: PropType<HeaderActionsProps["langDropdownThemeOverrides"]>;
     readonly onSearch: PropType<HeaderActionsProps["onSearch"]>;
     readonly onPreview: PropType<HeaderActionsProps["onPreview"]>;
     readonly onLogout: PropType<HeaderActionsProps["onLogout"]>;

package/lib/header/src/HeaderActions.js

@@ -51,6 +51,7 @@ exports.headerActionsProps = {
         required: false
     },
     cssVars: Object,
+    langDropdownThemeOverrides: Object,
     onSearch: Function,
     onPreview: Function,
     onLogout: Function,
@@ -136,7 +137,7 @@ exports.default = (0, vue_1.defineComponent)({
             var _a;
             if (((_a = this.actionsVisibility) === null || _a === void 0 ? void 0 : _a.lang) === false)
                 return null;
-            return $slots.lang ? ($slots.lang()) : ((0, vue_1.h)(dropdown_1.UDropdown, { options: this.langOptions, onSelect: this.onLanguageSelect }, {
+            return $slots.lang ? ($slots.lang()) : ((0, vue_1.h)(dropdown_1.UDropdown, { options: this.langOptions, onSelect: this.onLanguageSelect, themeOverrides: this.langDropdownThemeOverrides }, {
                 default: () => ((0, vue_1.h)(button_1.UButton, { "icon-placement": "right", text: true, renderIcon: () => ((0, vue_1.h)(icon_1.UIcon, null, { default: () => (0, vue_1.h)(icons_1.ChevronDownOutline, null) })) }, {
                     default: () => {
                         var _a, _b, _c;

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

@@ -49,6 +49,18 @@ declare const _default: import("vue").DefineComponent<{
     search: import("vue").Ref<string>;
     searchText: import("vue").ComputedRef<string>;
     placeholder: import("vue").ComputedRef<string>;
+    inputInstRef: import("vue").Ref<{
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly searchValue: {
         readonly type: StringConstructor;

package/lib/header/src/HeaderSearchDesktop.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.headerSearchDesktopProps = void 0;
 const vue_1 = require("vue");
+const vdirs_1 = require("vdirs");
 const button_1 = require("../../button");
 const icon_1 = require("../../icon");
 const input_1 = require("../../input");
@@ -44,15 +45,21 @@ exports.default = (0, vue_1.defineComponent)({
         const search = (0, vue_1.ref)('');
         const searchText = (0, vue_1.computed)(() => localeRef.value.desktopSearchTitle);
         const placeholder = (0, vue_1.computed)(() => localeRef.value.searchPlaceholder);
+        const inputInstRef = (0, vue_1.ref)(null);
+        (0, vue_1.onMounted)(() => {
+            var _a;
+            (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+        });
         return {
             search,
             searchText,
-            placeholder
+            placeholder,
+            inputInstRef
         };
     },
     render() {
         const blockClass = `${this.mergedClsPrefix}-header-search-desktop`;
-        return ((0, vue_1.h)("div", { class: blockClass, style: this.cssVars },
+        const content = ((0, vue_1.h)("div", { class: blockClass, style: this.cssVars },
             (0, vue_1.h)(button_1.UButton, { text: true, class: `${blockClass}__close`, onClick: this.onSearchClose }, {
                 default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24, color: "#C5C7CA" }, { default: () => (0, vue_1.h)(icons_1.CloseIcon, null) }))
             }),
@@ -60,7 +67,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, vue_1.h)(typography_1.UText, { variant: "title-l-medium", text: this.searchText })),
             (0, vue_1.h)("div", { class: `${blockClass}__content` },
                 (0, vue_1.h)("div", { class: `${blockClass}__input-wrapper` },
-                    (0, vue_1.h)(input_1.UInput, { value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
+                    (0, vue_1.h)(input_1.UInput, { ref: "inputInstRef", value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
                             var _a, _b;
                             if (e.key === 'Enter') {
                                 (_a = this.onSearchSubmit) === null || _a === void 0 ? void 0 : _a.call(this);
@@ -79,5 +86,15 @@ exports.default = (0, vue_1.defineComponent)({
                 cssVars: this.cssVars,
                 onSelect: this.onResultSelect
             })));
+        if (!this.onSearchClose)
+            return content;
+        return (0, vue_1.withDirectives)(content, [
+            [
+                vdirs_1.clickoutside,
+                this.onSearchClose,
+                undefined,
+                { capture: true }
+            ]
+        ]);
     }
 });

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

@@ -46,6 +46,18 @@ declare const _default: import("vue").DefineComponent<{
         disabled?: boolean | undefined;
     }[]>;
     searchLoading: import("vue").Ref<boolean>;
+    inputInstRef: import("vue").Ref<{
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null>;
     handleSearchInput: (value: string) => void;
     handleSearch: () => Promise<void>;
     handleClose: () => void;

package/lib/header/src/HeaderSearchMobile.js

@@ -47,6 +47,7 @@ exports.default = (0, vue_1.defineComponent)({
         const searchValue = (0, vue_1.ref)('');
         const searchResults = (0, vue_1.ref)([]);
         const searchLoading = (0, vue_1.ref)(false);
+        const inputInstRef = (0, vue_1.ref)(null);
         const placeholder = (0, vue_1.computed)(() => localeRef.value.searchPlaceholder);
         const handleSearch = () => __awaiter(this, void 0, void 0, function* () {
             const query = searchValue.value.trim();
@@ -90,11 +91,16 @@ exports.default = (0, vue_1.defineComponent)({
                 void handleSearch();
             }, constants_1.SEARCH_DEBOUNCE_MS);
         });
+        (0, vue_1.onMounted)(() => {
+            var _a;
+            (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+        });
         return {
             placeholder,
             searchValue,
             searchResults,
             searchLoading,
+            inputInstRef,
             handleSearchInput,
             handleSearch,
             handleClose,
@@ -112,7 +118,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, vue_1.h)(button_1.UButton, { text: true, class: `${blockClass}__back`, onClick: this.handleClose }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.ChevronLeftIcon, null))),
                 (0, vue_1.h)("div", { class: `${blockClass}__input-wrapper` },
                     (0, vue_1.h)(icon_1.UIcon, { size: 20, class: `${blockClass}__input-icon` }, () => (0, vue_1.h)(icons_1.SearchIcon, null)),
-                    (0, vue_1.h)(input_1.UInput, { value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
+                    (0, vue_1.h)(input_1.UInput, { ref: "inputInstRef", value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
                             if (e.key === 'Enter') {
                                 void this.handleSearch();
                             }

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

@@ -1,4 +1,6 @@
 import { CSSProperties, type VNodeChild } from 'vue';
+import type { ExtractThemeOverrides } from '../../_mixins/use-theme';
+import type { DropdownTheme } from '../../dropdown/styles';
 import type { MenuOption as BaseMenuOption, MenuGroupOption, MenuDividerOption, Key } from '../../menu/src/interface';
 import type { TabsProps } from '../../tabs';
 import { ImageProps } from '../../image';
@@ -37,6 +39,7 @@ export interface HeaderActionsProps {
     mobileActionsCollapse?: boolean;
     actionsVisibility?: ActionsVisibility;
     cssVars?: CSSProperties;
+    langDropdownThemeOverrides?: ExtractThemeOverrides<DropdownTheme>;
     onSearch: HeaderSearchHandler;
     onPreview: VoidFunction;
     onLogout: VoidFunction;

package/lib/header/src/mobile/HeaderMobile.js

@@ -200,6 +200,21 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, utils_1.renderBadge)(option, `${blockClass}__badge`)),
                 isExpandable && isExpanded && option.children && ((0, vue_1.h)("div", { class: `${mobileMenuClass}__children` }, option.children.map((child, index) => renderGroupItem(child, item.key, index))))));
         };
+        const renderSearchAction = () => {
+            if (this.$slots.search)
+                return this.$slots.search();
+            return ((0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onSearchClick }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.SearchIcon, null))));
+        };
+        const renderPreviewAction = () => {
+            if (this.$slots.preview)
+                return this.$slots.preview();
+            return ((0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onPreview }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.EyeIcon, null))));
+        };
+        const renderLogoutAction = () => {
+            if (this.$slots.logout)
+                return this.$slots.logout();
+            return ((0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onLogout }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.LogoutIcon, null))));
+        };
         const mobileMenuContent = ((0, vue_1.h)("div", { class: mobileMenuClass, style: this.cssVars },
             (0, vue_1.h)("div", { class: `${mobileMenuClass}__header` },
                 this.$slots.actions ? ((0, vue_1.h)("div", { class: `${mobileMenuClass}__actions` }, this.$slots.actions())) : this.showHeaderActions ? ((0, vue_1.h)("div", { class: `${mobileMenuClass}__actions` },
@@ -219,9 +234,9 @@ exports.default = (0, vue_1.defineComponent)({
                     }),
                     (0, vue_1.h)(flex_1.UFlex, { size: 24 }, {
                         default: () => ((0, vue_1.h)(vue_1.Fragment, null,
-                            (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onSearchClick }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.SearchIcon, null))),
-                            (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onPreview }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.EyeIcon, null))),
-                            (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onLogout }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.LogoutIcon, null)))))
+                            renderSearchAction(),
+                            renderPreviewAction(),
+                            renderLogoutAction()))
                     }))) : null,
                 (0, vue_1.h)(button_1.UButton, { text: true, class: `${mobileMenuClass}__close`, onClick: this.onClose }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.CloseIcon, null)))),
             (0, vue_1.h)("div", { class: `${mobileMenuClass}__body` },

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

@@ -134,6 +134,7 @@ exports.default = (0, cssr_1.cB)('header', `
  opacity: .5;
  `), (0, cssr_1.c)('& .u-tabs-tab--checked', `
  color: var(--u-header-tab-text-color-active);
+ border-color: var(--u-header-tab-indicator-color);
  `), (0, cssr_1.c)('& .u-tabs-tab:hover', `
  color: var(--u-header-tab-text-color-hover);
  `), (0, cssr_1.c)('& .u-tabs-bar', `
@@ -188,6 +189,7 @@ exports.default = (0, cssr_1.cB)('header', `
  background-color: var(--u-header-card-bg-color);
  border-radius: var(--u-header-card-radius);
  padding: var(--u-header-card-padding);
+ box-shadow: var(--u-header-card-shadow);
  `), (0, cssr_1.cE)('menu-grid', `
  display: grid;
  gap: var(--u-header-card-gap);

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.20";
+declare const _default: "1.12.22";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.12.20';
+exports.default = '1.12.22';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.12.20",
+  "version": "1.12.22",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "1.12.20",
+  "version": "1.12.22",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -18290,6 +18290,21 @@
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
               "description": "Custom actions content for mobile menu header."
             },
+            {
+              "name": "mobile-search",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
+              "description": "Custom mobile search action button content."
+            },
+            {
+              "name": "mobile-preview",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
+              "description": "Custom mobile preview action button content."
+            },
+            {
+              "name": "mobile-logout",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
+              "description": "Custom mobile logout action button content."
+            },
             {
               "name": "mobile-footer",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
@@ -18760,6 +18775,13 @@
               "name": "css-vars",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
               "type": "object"
+            },
+            {
+              "name": "lang-dropdown-theme-overrides",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
+              "type": "ExtractThemeOverrides<DropdownTheme>",
+              "description": "Theme overrides for the language `u-dropdown` (e.g. Popover `boxShadow`).",
+              "default": "undefined"
             }
           ],
           "js": {