@uzum-tech/ui 1.11.1 → 1.12.0

package/es/header/src/HeaderMobileLayout.js

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

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

@@ -0,0 +1,128 @@
+import { type PropType } from 'vue';
+import { type MaybeArray } from '../../_utils';
+import type { HeaderMenuOption, HeaderMenuPlacement, HeaderMenuTabsProps } from './interface';
+interface InternalMenuItem {
+    key: string | number;
+    option: HeaderMenuOption;
+}
+export declare const headerNavigationProps: {
+    readonly menuOptions: {
+        readonly type: PropType<HeaderMenuOption[]>;
+        readonly default: () => never[];
+    };
+    readonly menuPlacement: {
+        readonly type: PropType<HeaderMenuPlacement>;
+        readonly default: "horizontal";
+    };
+    readonly menuTrigger: {
+        readonly type: PropType<"click" | "hover">;
+        readonly default: "hover";
+    };
+    readonly menuValue: PropType<string | number | null>;
+    readonly menuTabsProps: {
+        readonly type: PropType<HeaderMenuTabsProps>;
+        readonly default: () => {};
+    };
+    readonly menuCardMinColumnWidth: {
+        readonly type: PropType<string | number>;
+        readonly default: 220;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly menuPaneClass: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly menuPaneWrapperClass: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly 'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
+    readonly onUpdateMenuValue: PropType<MaybeArray<(value: string | number | null) => void>>;
+};
+declare const _default: import("vue").DefineComponent<{
+    readonly menuOptions: {
+        readonly type: PropType<HeaderMenuOption[]>;
+        readonly default: () => never[];
+    };
+    readonly menuPlacement: {
+        readonly type: PropType<HeaderMenuPlacement>;
+        readonly default: "horizontal";
+    };
+    readonly menuTrigger: {
+        readonly type: PropType<"click" | "hover">;
+        readonly default: "hover";
+    };
+    readonly menuValue: PropType<string | number | null>;
+    readonly menuTabsProps: {
+        readonly type: PropType<HeaderMenuTabsProps>;
+        readonly default: () => {};
+    };
+    readonly menuCardMinColumnWidth: {
+        readonly type: PropType<string | number>;
+        readonly default: 220;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly menuPaneClass: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly menuPaneWrapperClass: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly 'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
+    readonly onUpdateMenuValue: PropType<MaybeArray<(value: string | number | null) => void>>;
+}, {
+    normalizedMenuItems: import("vue").ComputedRef<InternalMenuItem[]>;
+    resolvedMenuPlacement: import("vue").ComputedRef<"left" | "right" | "top" | "bottom" | undefined>;
+    handleMenuValueUpdate: (value: string | number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly menuOptions: {
+        readonly type: PropType<HeaderMenuOption[]>;
+        readonly default: () => never[];
+    };
+    readonly menuPlacement: {
+        readonly type: PropType<HeaderMenuPlacement>;
+        readonly default: "horizontal";
+    };
+    readonly menuTrigger: {
+        readonly type: PropType<"click" | "hover">;
+        readonly default: "hover";
+    };
+    readonly menuValue: PropType<string | number | null>;
+    readonly menuTabsProps: {
+        readonly type: PropType<HeaderMenuTabsProps>;
+        readonly default: () => {};
+    };
+    readonly menuCardMinColumnWidth: {
+        readonly type: PropType<string | number>;
+        readonly default: 220;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly menuPaneClass: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly menuPaneWrapperClass: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly 'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
+    readonly onUpdateMenuValue: PropType<MaybeArray<(value: string | number | null) => void>>;
+}>>, {
+    readonly menuOptions: HeaderMenuOption[];
+    readonly menuPlacement: HeaderMenuPlacement;
+    readonly menuTrigger: "hover" | "click";
+    readonly menuTabsProps: Partial<import("../../tabs").TabsProps>;
+    readonly menuCardMinColumnWidth: string | number;
+}, {}>;
+export default _default;

package/es/header/src/HeaderNavigation.js

@@ -0,0 +1,172 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { h, defineComponent, computed } from 'vue';
+import { call } from '../../_utils';
+import { UTabs, UTabPane } from '../../tabs';
+import { renderOptionLabel, renderBadge, getMenuItemKey, isDividerOption, isGroupOption, isColumnOption, isNotNull, resolvePlacement } from './utils';
+export const headerNavigationProps = {
+    menuOptions: {
+        type: Array,
+        default: () => []
+    },
+    menuPlacement: {
+        type: String,
+        default: 'horizontal'
+    },
+    menuTrigger: {
+        type: String,
+        default: 'hover'
+    },
+    menuValue: [String, Number],
+    menuTabsProps: {
+        type: Object,
+        default: () => ({})
+    },
+    menuCardMinColumnWidth: {
+        type: [Number, String],
+        default: 220
+    },
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    menuPaneClass: {
+        type: String,
+        required: true
+    },
+    menuPaneWrapperClass: {
+        type: String,
+        required: true
+    },
+    'onUpdate:menuValue': [Function, Array],
+    onUpdateMenuValue: [Function, Array]
+};
+export default defineComponent({
+    name: 'HeaderNavigation',
+    props: headerNavigationProps,
+    setup(props) {
+        const normalizedMenuItemsRef = computed(() => {
+            return props.menuOptions.map((option, index) => ({
+                option,
+                key: getMenuItemKey(option, index)
+            }));
+        });
+        const resolvedMenuPlacementRef = computed(() => resolvePlacement(props.menuPlacement));
+        function handleMenuValueUpdate(value) {
+            const { onUpdateMenuValue } = props;
+            const { 'onUpdate:menuValue': _onUpdateMenuValue } = props;
+            if (onUpdateMenuValue)
+                call(onUpdateMenuValue, value);
+            if (_onUpdateMenuValue)
+                call(_onUpdateMenuValue, value);
+        }
+        return {
+            normalizedMenuItems: normalizedMenuItemsRef,
+            resolvedMenuPlacement: resolvedMenuPlacementRef,
+            handleMenuValueUpdate
+        };
+    },
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const mergedClsPrefix = this.mergedClsPrefix;
+        const blockClass = `${mergedClsPrefix}-header`;
+        const { $props } = this;
+        const renderMenuItem = (option, key) => {
+            if (isDividerOption(option)) {
+                return (h("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" }));
+            }
+            if (isGroupOption(option)) {
+                return renderMenuColumn(option, key);
+            }
+            const icon = typeof option.icon === 'function' ? option.icon() : null;
+            return (h("div", Object.assign({ key: key, class: [
+                    `${blockClass}__menu-item`,
+                    option.disabled && `${blockClass}__menu-item--disabled`
+                ], role: "button", tabindex: option.disabled ? undefined : 0, onClick: option.onClick }, $props),
+                h("span", { class: `${blockClass}__menu-item-main` },
+                    icon ? (h("span", { class: `${blockClass}__menu-item-icon` }, icon)) : null,
+                    h("span", { class: `${blockClass}__menu-item-label` }, renderOptionLabel(option))),
+                renderBadge(option, `${blockClass}__badge`)));
+        };
+        const renderMenuColumn = (option, key, asSection = false) => {
+            var _a, _b, _c, _d;
+            if (isDividerOption(option)) {
+                return asSection ? (h("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" })) : (h("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" }));
+            }
+            if (isColumnOption(option)) {
+                const sections = (_b = (_a = option.children) === null || _a === void 0 ? void 0 : _a.map((child, index) => renderMenuColumn(child, `${key}-section-${index}`, true))) !== null && _b !== void 0 ? _b : [];
+                const content = sections.filter(isNotNull);
+                if (!content.length)
+                    return null;
+                return (h("div", { key: key, class: `${blockClass}__menu-column` }, content));
+            }
+            if (isGroupOption(option)) {
+                const children = (_d = (_c = option.children) === null || _c === void 0 ? void 0 : _c.map((child, index) => renderMenuItem(child, `${key}-item-${index}`))) !== null && _d !== void 0 ? _d : [];
+                const content = children.filter(isNotNull);
+                if (!content.length)
+                    return null;
+                if (asSection) {
+                    return (h("div", { key: key, class: `${blockClass}__menu-column-section` },
+                        h("div", { class: `${blockClass}__menu-column-title` }, renderOptionLabel(option)),
+                        h("div", { class: `${blockClass}__menu-column-list` }, content)));
+                }
+                return (h("div", { key: key, class: `${blockClass}__menu-column` },
+                    h("div", { class: `${blockClass}__menu-column-title` }, renderOptionLabel(option)),
+                    h("div", { class: `${blockClass}__menu-column-list` }, content)));
+            }
+            return (h("div", { key: key, class: [
+                    asSection
+                        ? `${blockClass}__menu-column-section ${blockClass}__menu-column-section--single`
+                        : `${blockClass}__menu-column ${blockClass}__menu-column--single`
+                ] },
+                h("div", { class: `${blockClass}__menu-column-list` }, renderMenuItem(option, `${key}-single`))));
+        };
+        const renderMenuCard = (item) => {
+            var _a, _b, _c;
+            const option = item.option;
+            if (!((_a = option.children) === null || _a === void 0 ? void 0 : _a.length))
+                return null;
+            const columns = (_c = (_b = option.children) === null || _b === void 0 ? void 0 : _b.map((child, index) => renderMenuColumn(child, `${item.key}-column-${index}`)).filter(isNotNull)) !== null && _c !== void 0 ? _c : [];
+            if (!columns.length)
+                return null;
+            // Подсчитываем количество колонок (children с type: 'column')
+            const columnCount = option.children.filter((child) => isColumnOption(child) || !isDividerOption(child)).length;
+            return (h("div", { class: `${blockClass}__menu-card` },
+                h("div", { class: `${blockClass}__menu-grid`, style: {
+                        gridTemplateColumns: `repeat(${columnCount}, minmax(var(--u-header-card-min-col-width), 1fr))`
+                    } }, columns)));
+        };
+        const menuItems = this.normalizedMenuItems;
+        const activeValue = (_a = this.menuValue) !== null && _a !== void 0 ? _a : undefined;
+        const menuTabsProps = this.menuTabsProps;
+        const _h = menuTabsProps || {}, { class: tabsClass, paneClass, paneWrapperClass, 'onUpdate:value': userOnUpdateValue, onUpdateValue: userOnUpdateValueCompat } = _h, restTabsProps = __rest(_h, ["class", "paneClass", "paneWrapperClass", 'onUpdate:value', "onUpdateValue"]);
+        const tabsNode = menuItems.length > 0 ? (h(UTabs, Object.assign({}, restTabsProps, { value: activeValue !== null && activeValue !== void 0 ? activeValue : undefined, type: (_b = restTabsProps.type) !== null && _b !== void 0 ? _b : 'bar', animated: (_c = restTabsProps.animated) !== null && _c !== void 0 ? _c : true, trigger: (_d = restTabsProps.trigger) !== null && _d !== void 0 ? _d : this.menuTrigger, placement: (_e = restTabsProps.placement) !== null && _e !== void 0 ? _e : this.resolvedMenuPlacement, tabsPadding: (_f = restTabsProps.tabsPadding) !== null && _f !== void 0 ? _f : 0, justifyContent: (_g = restTabsProps.justifyContent) !== null && _g !== void 0 ? _g : 'center', paneClass: [this.menuPaneClass, paneClass].filter(Boolean).join(' ') ||
+                undefined, paneWrapperClass: [this.menuPaneWrapperClass, paneWrapperClass]
+                .filter(Boolean)
+                .join(' ') || undefined, class: [`${blockClass}__tabs`, tabsClass], "onUpdate:value": (value) => {
+                this.handleMenuValueUpdate(value);
+                if (userOnUpdateValue)
+                    call(userOnUpdateValue, value);
+                if (userOnUpdateValueCompat) {
+                    call(userOnUpdateValueCompat, value);
+                }
+            } }), {
+            default: () => menuItems.map((item) => (h(UTabPane, { key: item.key, name: item.key, disabled: !!item.option.disabled, "display-directive": "show", tab: h("div", { class: `${blockClass}__tab` },
+                    item.option.icon ? (h("span", { class: `${blockClass}__tab-icon` }, typeof item.option.icon === 'function'
+                        ? item.option.icon()
+                        : item.option.icon)) : null,
+                    h("span", { class: `${blockClass}__tab-label` }, renderOptionLabel(item.option)),
+                    renderBadge(item.option, `${blockClass}__badge`)) }, { default: () => renderMenuCard(item) })))
+        })) : null;
+        return tabsNode;
+    }
+});

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

@@ -0,0 +1,79 @@
+import { type PropType, type CSSProperties } from 'vue';
+import type { HeaderSearchResult } from './interface';
+export declare const headerSearchDesktopProps: {
+    readonly searchValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly searchResults: {
+        readonly type: PropType<HeaderSearchResult[]>;
+        readonly default: () => never[];
+    };
+    readonly searchLoading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly onSearchInput: PropType<(value: string) => void>;
+    readonly onSearchClose: PropType<() => void>;
+    readonly onSearchSubmit: PropType<() => void>;
+    readonly onResultSelect: PropType<(result: HeaderSearchResult) => void>;
+};
+declare const _default: import("vue").DefineComponent<{
+    readonly searchValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly searchResults: {
+        readonly type: PropType<HeaderSearchResult[]>;
+        readonly default: () => never[];
+    };
+    readonly searchLoading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly onSearchInput: PropType<(value: string) => void>;
+    readonly onSearchClose: PropType<() => void>;
+    readonly onSearchSubmit: PropType<() => void>;
+    readonly onResultSelect: PropType<(result: HeaderSearchResult) => void>;
+}, {
+    search: import("vue").Ref<string>;
+    searchText: import("vue").ComputedRef<string>;
+    placeholder: import("vue").ComputedRef<string>;
+}, 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;
+        readonly default: "";
+    };
+    readonly searchResults: {
+        readonly type: PropType<HeaderSearchResult[]>;
+        readonly default: () => never[];
+    };
+    readonly searchLoading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly onSearchInput: PropType<(value: string) => void>;
+    readonly onSearchClose: PropType<() => void>;
+    readonly onSearchSubmit: PropType<() => void>;
+    readonly onResultSelect: PropType<(result: HeaderSearchResult) => void>;
+}>>, {
+    readonly searchValue: string;
+    readonly searchResults: HeaderSearchResult[];
+    readonly searchLoading: boolean;
+}, {}>;
+export default _default;

package/es/header/src/HeaderSearchDesktop.js

@@ -0,0 +1,77 @@
+import { h, defineComponent, computed, ref } from 'vue';
+import { UButton } from '../../button';
+import { UIcon } from '../../icon';
+import { UInput } from '../../input';
+import { UFlex } from '../../flex';
+import HeaderSearchResults from './HeaderSearchResults';
+import { useLocale } from '../../_mixins';
+import { UText } from '../../typography';
+import { SearchIcon, CloseIcon } from '../../_internal/icons';
+export const headerSearchDesktopProps = {
+    searchValue: {
+        type: String,
+        default: ''
+    },
+    searchResults: {
+        type: Array,
+        default: () => []
+    },
+    searchLoading: {
+        type: Boolean,
+        default: false
+    },
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    cssVars: Object,
+    onSearchInput: Function,
+    onSearchClose: Function,
+    onSearchSubmit: Function,
+    onResultSelect: Function
+};
+export default defineComponent({
+    name: 'HeaderSearchDesktop',
+    props: headerSearchDesktopProps,
+    setup() {
+        const { localeRef } = useLocale('Header');
+        const search = ref('');
+        const searchText = computed(() => localeRef.value.desktopSearchTitle);
+        const placeholder = computed(() => localeRef.value.searchPlaceholder);
+        return {
+            search,
+            searchText,
+            placeholder
+        };
+    },
+    render() {
+        const blockClass = `${this.mergedClsPrefix}-header-search-desktop`;
+        return (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) }))
+            }),
+            h(UFlex, { class: `${blockClass}__title`, justify: "space-between" },
+                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) => {
+                            var _a, _b;
+                            if (e.key === 'Enter') {
+                                (_a = this.onSearchSubmit) === null || _a === void 0 ? void 0 : _a.call(this);
+                            }
+                            else if (e.key === 'Escape') {
+                                (_b = this.onSearchClose) === null || _b === void 0 ? void 0 : _b.call(this);
+                            }
+                        }, onUpdateValue: this.onSearchInput }, {
+                        prefix: () => (h(UIcon, { size: 20 }, { default: () => h(SearchIcon, null) }))
+                    }))),
+            h(HeaderSearchResults, {
+                results: this.searchResults,
+                loading: this.searchLoading,
+                query: this.searchValue,
+                mergedClsPrefix: this.mergedClsPrefix,
+                cssVars: this.cssVars,
+                onSelect: this.onResultSelect
+            })));
+    }
+});

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

@@ -0,0 +1,73 @@
+import { type PropType, CSSProperties } from 'vue';
+import type { HeaderSearchResult, HeaderSearchHandler } from './interface';
+export declare const headerSearchMobileProps: {
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly cssVars: {
+        readonly type: PropType<CSSProperties>;
+        readonly default: () => {};
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly onClose: PropType<() => void>;
+    readonly onSearch: PropType<HeaderSearchHandler>;
+    readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
+};
+declare const _default: import("vue").DefineComponent<{
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly cssVars: {
+        readonly type: PropType<CSSProperties>;
+        readonly default: () => {};
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly onClose: PropType<() => void>;
+    readonly onSearch: PropType<HeaderSearchHandler>;
+    readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
+}, {
+    placeholder: import("vue").ComputedRef<string>;
+    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>;
+    handleSearchInput: (value: string) => void;
+    handleSearch: () => Promise<void>;
+    handleClose: () => 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 show: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly cssVars: {
+        readonly type: PropType<CSSProperties>;
+        readonly default: () => {};
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly onClose: PropType<() => void>;
+    readonly onSearch: PropType<HeaderSearchHandler>;
+    readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
+}>>, {
+    readonly show: boolean;
+    readonly cssVars: CSSProperties;
+}, {}>;
+export default _default;

package/es/header/src/HeaderSearchMobile.js

@@ -0,0 +1,126 @@
+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, watch, computed } from 'vue';
+import { UDrawer } from '../../drawer';
+import { UButton } from '../../button';
+import { UIcon } from '../../icon';
+import { UInput } from '../../input';
+import HeaderSearchResults from './HeaderSearchResults';
+import { useLocale } from '../../_mixins';
+import { SEARCH_DEBOUNCE_MS } from './constants';
+import { SearchIcon, ChevronLeftIcon } from '../../_internal/icons';
+export const headerSearchMobileProps = {
+    show: {
+        type: Boolean,
+        default: false
+    },
+    cssVars: {
+        type: Object,
+        default: () => ({})
+    },
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    onClose: Function,
+    onSearch: Function,
+    onSearchResultSelect: Function
+};
+export default defineComponent({
+    name: 'HeaderSearchMobile',
+    props: headerSearchMobileProps,
+    setup(props) {
+        const { localeRef } = useLocale('Header');
+        const searchValue = ref('');
+        const searchResults = ref([]);
+        const searchLoading = ref(false);
+        const placeholder = computed(() => localeRef.value.searchPlaceholder);
+        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 handleSearchInput = (value) => {
+            searchValue.value = value;
+        };
+        const handleClose = () => {
+            var _a;
+            searchValue.value = '';
+            searchResults.value = [];
+            searchLoading.value = false;
+            (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        };
+        const handleResultSelect = (result) => {
+            var _a;
+            (_a = props.onSearchResultSelect) === null || _a === void 0 ? void 0 : _a.call(props, result);
+            handleClose();
+        };
+        let searchTimeout = null;
+        watch(searchValue, () => {
+            if (searchTimeout) {
+                clearTimeout(searchTimeout);
+            }
+            searchTimeout = setTimeout(() => {
+                void handleSearch();
+            }, SEARCH_DEBOUNCE_MS);
+        });
+        return {
+            placeholder,
+            searchValue,
+            searchResults,
+            searchLoading,
+            handleSearchInput,
+            handleSearch,
+            handleClose,
+            handleResultSelect
+        };
+    },
+    render() {
+        const blockClass = `${this.mergedClsPrefix}-header-search-mobile`;
+        return (h(UDrawer, { show: this.show, width: "84%", placement: "right", "auto-focus": false, onUpdateShow: (show) => {
+                if (!show) {
+                    this.handleClose();
+                }
+            } }, () => (h("div", { class: blockClass, style: this.cssVars },
+            h("div", { class: `${blockClass}__header` },
+                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) => {
+                            if (e.key === 'Enter') {
+                                void this.handleSearch();
+                            }
+                        }, onUpdateValue: this.handleSearchInput }, {
+                        prefix: () => (h(UIcon, { size: 20 }, () => h(SearchIcon, null)))
+                    }))),
+            h(HeaderSearchResults, {
+                version: 'mobile',
+                results: this.searchResults,
+                loading: this.searchLoading,
+                query: this.searchValue,
+                mergedClsPrefix: this.mergedClsPrefix,
+                cssVars: this.cssVars,
+                onSelect: this.handleResultSelect
+            })))));
+    }
+});