@uzum-tech/ui 1.11.1 → 1.12.0

package/es/header/src/Header.js

@@ -0,0 +1,320 @@
+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());
+    });
+};
+import { h, Fragment, defineComponent, computed, ref, toRef, onBeforeMount } from 'vue';
+import { useMergedState } from 'vooks';
+import style, { headerMobileMenuStyle, headerSearchMobileStyle, headerSearchDesktopStyle, headerSearchResultsStyle } from './styles/index.cssr';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { headerLight } from '../styles';
+import { formatLength, resolveWrappedSlot, call } from '../../_utils';
+import { getMenuItemKey } from './utils';
+import { useIsMobile } from '../../_utils/composable/composables';
+import { UIcon } from '../../icon';
+import HeaderNavigation from './HeaderNavigation';
+import HeaderMobile from './mobile/HeaderMobile';
+import HeaderActions from './HeaderActions';
+import HeaderDesktopLayout from './HeaderDesktopLayout';
+import HeaderMobileLayout from './HeaderMobileLayout';
+import HeaderSearchMobile from './HeaderSearchMobile';
+import { RussiaFlag, OzbekFlag } from '../../_internal/icons';
+const defaultLogoSrc = '/demo/assets/images/logo.svg';
+const defaultLangOptions = [
+    {
+        label: 'Русский',
+        key: 'ru',
+        icon: () => h(UIcon, { size: 18 }, {
+            default: () => h(RussiaFlag)
+        })
+    },
+    {
+        label: "O'zbek",
+        key: 'uz',
+        icon: () => h(UIcon, { size: 18 }, {
+            default: () => h(OzbekFlag)
+        })
+    }
+];
+export const headerProps = Object.assign(Object.assign({}, 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] });
+export default defineComponent({
+    name: 'Header',
+    props: 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 } = useConfig(props);
+        const themeRef = useTheme('Header', '-header', style, headerLight, props, mergedClsPrefixRef);
+        const isMobileRef = useIsMobile();
+        const mobileMenuVisibleRef = ref(false);
+        const searchVisibleRef = ref(false);
+        onBeforeMount(() => {
+            headerMobileMenuStyle.mount({
+                id: `${mergedClsPrefixRef.value}-header-mobile-menu`,
+                head: true
+            });
+            headerSearchMobileStyle.mount({
+                id: `${mergedClsPrefixRef.value}-header-search-mobile`,
+                head: true
+            });
+            headerSearchDesktopStyle.mount({
+                id: `${mergedClsPrefixRef.value}-header-search-desktop`,
+                head: true
+            });
+            headerSearchResultsStyle.mount({
+                id: `${mergedClsPrefixRef.value}-header-search-results`,
+                head: true
+            });
+        });
+        const currentLang = 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 = toRef(props, 'menuValue');
+        const uncontrolledMenuValueRef = ref((_c = props.defaultMenuValue) !== null && _c !== void 0 ? _c : null);
+        const mergedMenuValueRef = useMergedState(controlledMenuValueRef, uncontrolledMenuValueRef);
+        const normalizedMenuItemsRef = computed(() => {
+            var _a;
+            return (_a = props.menuOptions) === null || _a === void 0 ? void 0 : _a.map((option, index) => ({
+                option,
+                key: getMenuItemKey(option, index)
+            }));
+        });
+        const cssVarsRef = 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': 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 = useThemeClass('header', computed(() => ''), cssVarsRef, props);
+        const menuPaneClass = computed(() => `${mergedClsPrefixRef.value}-header__tab-pane`);
+        const menuPaneWrapperClass = 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)
+                call(onUpdateMenuValue, value);
+            if (_onUpdateMenuValue)
+                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 = resolveWrappedSlot($slots.logo, (children) => children ? h("div", { class: `${blockClass}__logo` }, children) : null) || (h("div", { class: `${blockClass}__logo` },
+            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 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']
+        })) : null;
+        const actionsNode = resolveWrappedSlot($slots.action, (children) => children ? h("div", { class: `${blockClass}__actions` }, children) : null) || (h(HeaderActions, { 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
+            ? h(HeaderSearchMobile, {
+                mergedClsPrefix,
+                show: this.searchVisible,
+                cssVars: this.cssVars,
+                onClose: this.handleSearchClose,
+                onSearch: this.handleSearch,
+                onSearchResultSelect: this.handleSearchResultSelect
+            })
+            : null;
+        if (this.responsive && this.isMobile) {
+            return h(Fragment, null, [
+                h(HeaderMobileLayout, {
+                    mergedClsPrefix,
+                    themeClass: this.themeClass,
+                    cssVars: this.cssVars
+                }, {
+                    logo: () => logoNode,
+                    navigation: () => null,
+                    actions: () => actionsNode
+                }),
+                searchNode
+            ]);
+        }
+        return h(HeaderDesktopLayout, {
+            mergedClsPrefix,
+            themeClass: this.themeClass,
+            cssVars: this.cssVars
+        }, {
+            logo: () => logoNode,
+            navigation: () => navigationNode,
+            actions: () => actionsNode
+        });
+    }
+});

package/es/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/es/header/src/HeaderActions.js

@@ -0,0 +1,166 @@
+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());
+    });
+};
+import { h, defineComponent, ref, Transition, Fragment, watch } from 'vue';
+import { UButton } from '../../button';
+import { UIcon } from '../../icon';
+import { UDropdown } from '../../dropdown';
+import { UFlex } from '../../flex';
+import HeaderSearchDesktop from './HeaderSearchDesktop';
+import { SEARCH_DEBOUNCE_MS } from './constants';
+import { SearchIcon, EyeIcon, LogoutIcon, ChevronDownOutline } from '../../_internal/icons';
+export const 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
+};
+export default defineComponent({
+    name: 'HeaderActions',
+    props: headerActionsProps,
+    setup(props) {
+        const searchVisible = ref(false);
+        const searchValue = ref('');
+        const searchResults = ref([]);
+        const searchLoading = 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;
+        watch(searchValue, () => {
+            if (searchTimeout) {
+                clearTimeout(searchTimeout);
+            }
+            searchTimeout = setTimeout(() => {
+                void handleSearch();
+            }, 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 (h("div", { class: `${blockClass}__actions` },
+                h(UFlex, { size: 32 }, { default: () => { var _a, _b; return (_b = (_a = this.$slots).mobile) === null || _b === void 0 ? void 0 : _b.call(_a); } })));
+        }
+        return (h("div", { class: `${blockClass}__actions` },
+            h(UFlex, { class: `${blockClass}__actions-block`, size: 32 }, {
+                default: () => (h(Fragment, null,
+                    h(UDropdown, { options: this.langOptions, onSelect: this.onLanguageSelect }, {
+                        default: () => (h(UButton, { "icon-placement": "right", text: true, renderIcon: () => (h(UIcon, null, { default: () => h(ChevronDownOutline, null) })) }, {
+                            default: () => {
+                                var _a, _b, _c;
+                                return (h("span", { class: `${blockClass}__lang-trigger` },
+                                    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)),
+                                    h("span", null, (_c = this.currentLang) === null || _c === void 0 ? void 0 : _c.label)));
+                            }
+                        }))
+                    }),
+                    h("div", { class: `${blockClass}__search-wrapper` },
+                        h(UButton, { text: true, onClick: this.handleSearchClick }, {
+                            default: () => (h(UIcon, { size: 24 }, { default: () => h(SearchIcon, null) }))
+                        }),
+                        h(Transition, { name: "fade-in-scale-up" }, {
+                            default: () => this.searchVisible
+                                ? h(HeaderSearchDesktop, {
+                                    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
+                        })),
+                    h(UButton, { text: true, onClick: this.onPreview }, {
+                        default: () => (h(UIcon, { size: 24 }, { default: () => h(EyeIcon, null) }))
+                    }),
+                    h(UButton, { text: true, onClick: this.onLogout }, {
+                        default: () => (h(UIcon, { size: 24 }, { default: () => h(LogoutIcon, null) }))
+                    })))
+            })));
+    }
+});

package/es/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;

package/es/header/src/HeaderDesktopLayout.js

@@ -0,0 +1,24 @@
+import { h, defineComponent } from 'vue';
+export const headerDesktopLayoutProps = {
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    themeClass: String,
+    cssVars: Object
+};
+export default defineComponent({
+    name: 'HeaderDesktopLayout',
+    props: headerDesktopLayoutProps,
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const blockClass = `${this.mergedClsPrefix}-header`;
+        return (h("div", { class: [blockClass, `${blockClass}--desktop`, this.themeClass], style: this.cssVars },
+            h("div", { class: `${blockClass}__inner` },
+                h("div", { class: `${blockClass}__inner-wrapper` },
+                    h("div", { class: `${blockClass}__inner-left` }, (_b = (_a = this.$slots).logo) === null || _b === void 0 ? void 0 :
+                        _b.call(_a),
+                        h("div", { class: `${blockClass}__navigation` }, (_d = (_c = this.$slots).navigation) === null || _d === void 0 ? void 0 : _d.call(_c))), (_f = (_e = this.$slots).actions) === null || _f === void 0 ? void 0 :
+                    _f.call(_e)))));
+    }
+});

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

@@ -0,0 +1,25 @@
+import { type PropType, type CSSProperties } from 'vue';
+export declare const headerMobileLayoutProps: {
+    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;