@uzum-tech/ui 1.11.1 → 1.12.0

package/lib/header/src/Header.js

@@ -0,0 +1,349 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerProps = void 0;
+const vue_1 = require("vue");
+const vooks_1 = require("vooks");
+const index_cssr_1 = __importStar(require("./styles/index.cssr"));
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const _utils_1 = require("../../_utils");
+const utils_1 = require("./utils");
+const composables_1 = require("../../_utils/composable/composables");
+const icon_1 = require("../../icon");
+const HeaderNavigation_1 = __importDefault(require("./HeaderNavigation"));
+const HeaderMobile_1 = __importDefault(require("./mobile/HeaderMobile"));
+const HeaderActions_1 = __importDefault(require("./HeaderActions"));
+const HeaderDesktopLayout_1 = __importDefault(require("./HeaderDesktopLayout"));
+const HeaderMobileLayout_1 = __importDefault(require("./HeaderMobileLayout"));
+const HeaderSearchMobile_1 = __importDefault(require("./HeaderSearchMobile"));
+const icons_1 = require("../../_internal/icons");
+const defaultLogoSrc = '/demo/assets/images/logo.svg';
+const defaultLangOptions = [
+    {
+        label: 'Русский',
+        key: 'ru',
+        icon: () => (0, vue_1.h)(icon_1.UIcon, { size: 18 }, {
+            default: () => (0, vue_1.h)(icons_1.RussiaFlag)
+        })
+    },
+    {
+        label: "O'zbek",
+        key: 'uz',
+        icon: () => (0, vue_1.h)(icon_1.UIcon, { size: 18 }, {
+            default: () => (0, vue_1.h)(icons_1.OzbekFlag)
+        })
+    }
+];
+exports.headerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { menuOptions: {
+        type: Array,
+        default: () => []
+    }, langOptions: {
+        type: Array,
+        default: () => defaultLangOptions
+    }, defaultLang: [String, Number], menuPlacement: {
+        type: String,
+        default: 'horizontal'
+    }, menuTrigger: {
+        type: String,
+        default: 'hover'
+    }, menuValue: [String, Number], defaultMenuValue: [String, Number], menuTabsProps: {
+        type: Object,
+        default: () => ({})
+    }, menuCardMinColumnWidth: {
+        type: [Number, String],
+        default: 220
+    }, logoSrc: {
+        type: String,
+        default: () => defaultLogoSrc
+    }, logoAlt: {
+        type: String,
+        default: 'Header logo'
+    }, responsive: {
+        type: Boolean,
+        default: true
+    }, mobileMenuType: {
+        type: String,
+        default: 'drawer'
+    }, mobileActionsCollapse: {
+        type: Boolean,
+        default: true
+    }, mobileShowFooterActions: {
+        type: Boolean,
+        default: true
+    }, mobilePrimaryActionText: {
+        type: String,
+        default: undefined
+    }, mobileSecondaryActionText: {
+        type: String,
+        default: undefined
+    }, mobileShowHeaderActions: {
+        type: Boolean,
+        default: true
+    }, onSearch: Function, 'onUpdate:menuValue': [Function, Array], onUpdateMenuValue: [Function, Array] });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Header',
+    props: exports.headerProps,
+    emits: [
+        'search',
+        'search-result-select',
+        'preview',
+        'logout',
+        'language-select',
+        'mobile-primary-action',
+        'mobile-secondary-action'
+    ],
+    setup(props, { emit }) {
+        var _a, _b, _c;
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Header', '-header', index_cssr_1.default, styles_1.headerLight, props, mergedClsPrefixRef);
+        const isMobileRef = (0, composables_1.useIsMobile)();
+        const mobileMenuVisibleRef = (0, vue_1.ref)(false);
+        const searchVisibleRef = (0, vue_1.ref)(false);
+        (0, vue_1.onBeforeMount)(() => {
+            index_cssr_1.headerMobileMenuStyle.mount({
+                id: `${mergedClsPrefixRef.value}-header-mobile-menu`,
+                head: true
+            });
+            index_cssr_1.headerSearchMobileStyle.mount({
+                id: `${mergedClsPrefixRef.value}-header-search-mobile`,
+                head: true
+            });
+            index_cssr_1.headerSearchDesktopStyle.mount({
+                id: `${mergedClsPrefixRef.value}-header-search-desktop`,
+                head: true
+            });
+            index_cssr_1.headerSearchResultsStyle.mount({
+                id: `${mergedClsPrefixRef.value}-header-search-results`,
+                head: true
+            });
+        });
+        const currentLang = (0, vue_1.ref)(((_a = props.langOptions) === null || _a === void 0 ? void 0 : _a.find((opt) => opt.key === props.defaultLang)) ||
+            ((_b = props.langOptions) === null || _b === void 0 ? void 0 : _b[0]) ||
+            defaultLangOptions[0]);
+        const controlledMenuValueRef = (0, vue_1.toRef)(props, 'menuValue');
+        const uncontrolledMenuValueRef = (0, vue_1.ref)((_c = props.defaultMenuValue) !== null && _c !== void 0 ? _c : null);
+        const mergedMenuValueRef = (0, vooks_1.useMergedState)(controlledMenuValueRef, uncontrolledMenuValueRef);
+        const normalizedMenuItemsRef = (0, vue_1.computed)(() => {
+            var _a;
+            return (_a = props.menuOptions) === null || _a === void 0 ? void 0 : _a.map((option, index) => ({
+                option,
+                key: (0, utils_1.getMenuItemKey)(option, index)
+            }));
+        });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-font-size': self.fontSize,
+                '--u-font-title-small': self.fontTitleSmall,
+                '--u-header-text-color': self.textColor,
+                '--u-header-bg-color': self.backgroundColor,
+                '--u-header-radius': self.borderRadius,
+                '--u-header-shadow': self.shadow,
+                '--u-header-navigation-gap': self.navigationGap,
+                '--u-header-action-gap': self.actionGap,
+                '--u-header-tab-text-color': self.tabTextColor,
+                '--u-header-tab-text-color-hover': self.tabTextColorHover,
+                '--u-header-tab-text-color-active': self.tabTextColorActive,
+                '--u-header-tab-indicator-color': self.tabIndicatorColor,
+                '--u-header-card-bg-color': self.cardBackgroundColor,
+                '--u-header-card-radius': self.cardBorderRadius,
+                '--u-header-card-title-color': self.cardTitleColor,
+                '--u-header-card-item-color': self.cardItemColor,
+                '--u-header-card-item-hover-color': self.cardItemHoverColor,
+                '--u-header-card-divider-color': self.cardDividerColor,
+                '--u-header-card-gap': self.cardGap,
+                '--u-header-card-padding': self.cardPadding,
+                '--u-header-badge-bg-color': self.badgeBackgroundColor,
+                '--u-header-badge-text-color': self.badgeTextColor,
+                '--u-header-action-icon-color': self.actionIconColor,
+                '--u-header-action-icon-hover-color': self.actionIconColorHover,
+                '--u-header-card-min-col-width': (0, _utils_1.formatLength)(props.menuCardMinColumnWidth),
+                '--u-header-mobile-border-color': self.mobileBorderColor,
+                '--u-header-mobile-item-hover-color': self.mobileItemHoverColor,
+                '--u-header-mobile-item-pressed-color': self.mobileItemPressedColor,
+                '--u-header-mobile-item-active-color': self.mobileItemActiveColor,
+                '--u-header-mobile-group-item-color': self.mobileGroupItemColor
+            };
+        });
+        const themeClassHandle = (0, _mixins_1.useThemeClass)('header', (0, vue_1.computed)(() => ''), cssVarsRef, props);
+        const menuPaneClass = (0, vue_1.computed)(() => `${mergedClsPrefixRef.value}-header__tab-pane`);
+        const menuPaneWrapperClass = (0, vue_1.computed)(() => `${mergedClsPrefixRef.value}-header__tab-pane-wrapper`);
+        function handleSelectLang(key) {
+            var _a;
+            const nextLang = (_a = props.langOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option.key === key);
+            if (nextLang) {
+                currentLang.value = nextLang;
+                emit('language-select', nextLang);
+            }
+        }
+        function doUpdateMenuValue(value) {
+            uncontrolledMenuValueRef.value = value;
+            const { onUpdateMenuValue } = props;
+            const { 'onUpdate:menuValue': _onUpdateMenuValue } = props;
+            if (onUpdateMenuValue)
+                (0, _utils_1.call)(onUpdateMenuValue, value);
+            if (_onUpdateMenuValue)
+                (0, _utils_1.call)(_onUpdateMenuValue, value);
+        }
+        function handleMenuValueUpdate(value) {
+            if (value !== null) {
+                doUpdateMenuValue(value);
+            }
+        }
+        function handleSearchClick() {
+            searchVisibleRef.value = true;
+        }
+        function handleSearchClose() {
+            searchVisibleRef.value = false;
+        }
+        function handleSearch(query) {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (props.onSearch) {
+                    const results = yield props.onSearch(query);
+                    return results;
+                }
+                emit('search', query);
+                return [];
+            });
+        }
+        function handleSearchResultSelect(result) {
+            emit('search-result-select', result);
+        }
+        function handlePreviewClick() {
+            emit('preview');
+        }
+        function handleLogoutClick() {
+            emit('logout');
+        }
+        function toggleMobileMenu() {
+            mobileMenuVisibleRef.value = !mobileMenuVisibleRef.value;
+        }
+        function closeMobileMenu() {
+            mobileMenuVisibleRef.value = false;
+        }
+        function handleMobileMenuItemClick(option) {
+            if (option.key !== undefined) {
+                doUpdateMenuValue(option.key);
+            }
+            closeMobileMenu();
+        }
+        function handleMobilePrimaryAction() {
+            emit('mobile-primary-action');
+        }
+        function handleMobileSecondaryAction() {
+            emit('mobile-secondary-action');
+        }
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            normalizedMenuItems: normalizedMenuItemsRef,
+            mergedMenuValue: mergedMenuValueRef,
+            currentLang,
+            isMobile: isMobileRef,
+            mobileMenuVisible: mobileMenuVisibleRef,
+            searchVisible: searchVisibleRef,
+            handleSelectLang,
+            handleMenuValueUpdate,
+            handleSearchClick,
+            handleSearchClose,
+            handleSearch,
+            handleSearchResultSelect,
+            handlePreviewClick,
+            handleLogoutClick,
+            toggleMobileMenu,
+            closeMobileMenu,
+            handleMobileMenuItemClick,
+            handleMobilePrimaryAction,
+            handleMobileSecondaryAction,
+            menuPaneClass,
+            menuPaneWrapperClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a;
+        const { mergedClsPrefix, $slots } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const blockClass = `${mergedClsPrefix}-header`;
+        const logoNode = (0, _utils_1.resolveWrappedSlot)($slots.logo, (children) => children ? (0, vue_1.h)("div", { class: `${blockClass}__logo` }, children) : null) || ((0, vue_1.h)("div", { class: `${blockClass}__logo` },
+            (0, vue_1.h)("img", { src: this.logoSrc, alt: this.logoAlt })));
+        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, onUpdateMenuValue: this.handleMenuValueUpdate }));
+        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']
+        })) : null;
+        const actionsNode = (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => children ? (0, vue_1.h)("div", { class: `${blockClass}__actions` }, children) : null) || ((0, vue_1.h)(HeaderActions_1.default, { langOptions: this.langOptions || defaultLangOptions, currentLang: this.currentLang, mergedClsPrefix: mergedClsPrefix, responsive: this.responsive, isMobile: this.isMobile, mobileActionsCollapse: this.mobileActionsCollapse, cssVars: this.cssVars, onSearch: this.handleSearch, onSearchResultSelect: this.handleSearchResultSelect, onPreview: this.handlePreviewClick, onLogout: this.handleLogoutClick, onLanguageSelect: this.handleSelectLang }, {
+            mobile: () => mobileNode
+        }));
+        const searchNode = this.responsive && this.isMobile && this.searchVisible
+            ? (0, vue_1.h)(HeaderSearchMobile_1.default, {
+                mergedClsPrefix,
+                show: this.searchVisible,
+                cssVars: this.cssVars,
+                onClose: this.handleSearchClose,
+                onSearch: this.handleSearch,
+                onSearchResultSelect: this.handleSearchResultSelect
+            })
+            : null;
+        if (this.responsive && this.isMobile) {
+            return (0, vue_1.h)(vue_1.Fragment, null, [
+                (0, vue_1.h)(HeaderMobileLayout_1.default, {
+                    mergedClsPrefix,
+                    themeClass: this.themeClass,
+                    cssVars: this.cssVars
+                }, {
+                    logo: () => logoNode,
+                    navigation: () => null,
+                    actions: () => actionsNode
+                }),
+                searchNode
+            ]);
+        }
+        return (0, vue_1.h)(HeaderDesktopLayout_1.default, {
+            mergedClsPrefix,
+            themeClass: this.themeClass,
+            cssVars: this.cssVars
+        }, {
+            logo: () => logoNode,
+            navigation: () => navigationNode,
+            actions: () => actionsNode
+        });
+    }
+});

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

@@ -0,0 +1,120 @@
+import { type PropType, type CSSProperties } from 'vue';
+import type { LangOption, HeaderSearchResult, HeaderSearchHandler } from './interface';
+export declare const headerActionsProps: {
+    readonly langOptions: {
+        readonly type: PropType<LangOption[]>;
+        readonly required: true;
+    };
+    readonly currentLang: {
+        readonly type: PropType<LangOption>;
+        readonly required: true;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly responsive: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isMobile: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly mobileActionsCollapse: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly onSearch: PropType<HeaderSearchHandler>;
+    readonly onPreview: PropType<() => void>;
+    readonly onLogout: PropType<() => void>;
+    readonly onLanguageSelect: PropType<(key: string | number) => void>;
+    readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
+};
+declare const _default: import("vue").DefineComponent<{
+    readonly langOptions: {
+        readonly type: PropType<LangOption[]>;
+        readonly required: true;
+    };
+    readonly currentLang: {
+        readonly type: PropType<LangOption>;
+        readonly required: true;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly responsive: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isMobile: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly mobileActionsCollapse: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly onSearch: PropType<HeaderSearchHandler>;
+    readonly onPreview: PropType<() => void>;
+    readonly onLogout: PropType<() => void>;
+    readonly onLanguageSelect: PropType<(key: string | number) => void>;
+    readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
+}, {
+    searchVisible: import("vue").Ref<boolean>;
+    searchValue: import("vue").Ref<string>;
+    searchResults: import("vue").Ref<{
+        key: string | number;
+        label: string;
+        description?: string | undefined;
+        icon?: (() => import("vue").VNodeChild) | undefined;
+        extra?: string | undefined;
+        onClick?: (() => void) | undefined;
+        disabled?: boolean | undefined;
+    }[]>;
+    searchLoading: import("vue").Ref<boolean>;
+    handleSearchClick: () => void;
+    handleSearchInput: (value: string) => void;
+    handleSearch: () => Promise<void>;
+    handleSearchClose: () => void;
+    handleResultSelect: (result: HeaderSearchResult) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly langOptions: {
+        readonly type: PropType<LangOption[]>;
+        readonly required: true;
+    };
+    readonly currentLang: {
+        readonly type: PropType<LangOption>;
+        readonly required: true;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly responsive: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isMobile: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly mobileActionsCollapse: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly onSearch: PropType<HeaderSearchHandler>;
+    readonly onPreview: PropType<() => void>;
+    readonly onLogout: PropType<() => void>;
+    readonly onLanguageSelect: PropType<(key: string | number) => void>;
+    readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
+}>>, {
+    readonly responsive: boolean;
+    readonly mobileActionsCollapse: boolean;
+    readonly isMobile: boolean;
+}, {}>;
+export default _default;

package/lib/header/src/HeaderActions.js

@@ -0,0 +1,172 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerActionsProps = void 0;
+const vue_1 = require("vue");
+const button_1 = require("../../button");
+const icon_1 = require("../../icon");
+const dropdown_1 = require("../../dropdown");
+const flex_1 = require("../../flex");
+const HeaderSearchDesktop_1 = __importDefault(require("./HeaderSearchDesktop"));
+const constants_1 = require("./constants");
+const icons_1 = require("../../_internal/icons");
+exports.headerActionsProps = {
+    langOptions: {
+        type: Array,
+        required: true
+    },
+    currentLang: {
+        type: Object,
+        required: true
+    },
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    responsive: {
+        type: Boolean,
+        default: false
+    },
+    isMobile: {
+        type: Boolean,
+        default: false
+    },
+    mobileActionsCollapse: {
+        type: Boolean,
+        default: true
+    },
+    cssVars: Object,
+    onSearch: Function,
+    onPreview: Function,
+    onLogout: Function,
+    onLanguageSelect: Function,
+    onSearchResultSelect: Function
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'HeaderActions',
+    props: exports.headerActionsProps,
+    setup(props) {
+        const searchVisible = (0, vue_1.ref)(false);
+        const searchValue = (0, vue_1.ref)('');
+        const searchResults = (0, vue_1.ref)([]);
+        const searchLoading = (0, vue_1.ref)(false);
+        const handleSearchClick = () => {
+            searchVisible.value = !searchVisible.value;
+            if (!searchVisible.value) {
+                searchValue.value = '';
+                searchResults.value = [];
+            }
+        };
+        const handleSearchInput = (value) => {
+            searchValue.value = value;
+        };
+        const handleSearch = () => __awaiter(this, void 0, void 0, function* () {
+            const query = searchValue.value.trim();
+            if (!query || !props.onSearch) {
+                searchResults.value = [];
+                return;
+            }
+            searchLoading.value = true;
+            try {
+                const results = yield props.onSearch(query);
+                searchResults.value = results;
+            }
+            catch (error) {
+                searchResults.value = [];
+            }
+            finally {
+                searchLoading.value = false;
+            }
+        });
+        const handleSearchClose = () => {
+            searchValue.value = '';
+            searchResults.value = [];
+            searchVisible.value = false;
+            searchLoading.value = false;
+        };
+        const handleResultSelect = (result) => {
+            var _a;
+            (_a = props.onSearchResultSelect) === null || _a === void 0 ? void 0 : _a.call(props, result);
+            handleSearchClose();
+        };
+        let searchTimeout = null;
+        (0, vue_1.watch)(searchValue, () => {
+            if (searchTimeout) {
+                clearTimeout(searchTimeout);
+            }
+            searchTimeout = setTimeout(() => {
+                void handleSearch();
+            }, constants_1.SEARCH_DEBOUNCE_MS);
+        });
+        return {
+            searchVisible,
+            searchValue,
+            searchResults,
+            searchLoading,
+            handleSearchClick,
+            handleSearchInput,
+            handleSearch,
+            handleSearchClose,
+            handleResultSelect
+        };
+    },
+    render() {
+        const blockClass = `${this.mergedClsPrefix}-header`;
+        if (this.responsive && this.isMobile && this.mobileActionsCollapse) {
+            return ((0, vue_1.h)("div", { class: `${blockClass}__actions` },
+                (0, vue_1.h)(flex_1.UFlex, { size: 32 }, { default: () => { var _a, _b; return (_b = (_a = this.$slots).mobile) === null || _b === void 0 ? void 0 : _b.call(_a); } })));
+        }
+        return ((0, vue_1.h)("div", { class: `${blockClass}__actions` },
+            (0, vue_1.h)(flex_1.UFlex, { class: `${blockClass}__actions-block`, size: 32 }, {
+                default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                    (0, vue_1.h)(dropdown_1.UDropdown, { options: this.langOptions, onSelect: this.onLanguageSelect }, {
+                        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;
+                                return ((0, vue_1.h)("span", { class: `${blockClass}__lang-trigger` },
+                                    (0, vue_1.h)("span", { class: `${blockClass}__lang-icon` }, (_b = (_a = this.currentLang) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.call(_a)),
+                                    (0, vue_1.h)("span", null, (_c = this.currentLang) === null || _c === void 0 ? void 0 : _c.label)));
+                            }
+                        }))
+                    }),
+                    (0, vue_1.h)("div", { class: `${blockClass}__search-wrapper` },
+                        (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.handleSearchClick }, {
+                            default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, { default: () => (0, vue_1.h)(icons_1.SearchIcon, null) }))
+                        }),
+                        (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up" }, {
+                            default: () => this.searchVisible
+                                ? (0, vue_1.h)(HeaderSearchDesktop_1.default, {
+                                    searchValue: this.searchValue,
+                                    searchResults: this.searchResults,
+                                    searchLoading: this.searchLoading,
+                                    mergedClsPrefix: this.mergedClsPrefix,
+                                    cssVars: this.cssVars,
+                                    onSearchInput: this.handleSearchInput,
+                                    onSearchClose: this.handleSearchClose,
+                                    onSearchSubmit: () => {
+                                        void this.handleSearch();
+                                    },
+                                    onResultSelect: this.handleResultSelect
+                                })
+                                : null
+                        })),
+                    (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onPreview }, {
+                        default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, { default: () => (0, vue_1.h)(icons_1.EyeIcon, null) }))
+                    }),
+                    (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onLogout }, {
+                        default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, { default: () => (0, vue_1.h)(icons_1.LogoutIcon, null) }))
+                    })))
+            })));
+    }
+});

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

@@ -0,0 +1,25 @@
+import { type PropType, type CSSProperties } from 'vue';
+export declare const headerDesktopLayoutProps: {
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly themeClass: StringConstructor;
+    readonly cssVars: PropType<CSSProperties>;
+};
+declare const _default: import("vue").DefineComponent<{
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly themeClass: StringConstructor;
+    readonly cssVars: PropType<CSSProperties>;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly themeClass: StringConstructor;
+    readonly cssVars: PropType<CSSProperties>;
+}>>, {}, {}>;
+export default _default;