@uzum-tech/ui 1.11.2 → 1.12.0

package/lib/header/src/HeaderDesktopLayout.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerDesktopLayoutProps = void 0;
+const vue_1 = require("vue");
+exports.headerDesktopLayoutProps = {
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    themeClass: String,
+    cssVars: Object
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'HeaderDesktopLayout',
+    props: exports.headerDesktopLayoutProps,
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const blockClass = `${this.mergedClsPrefix}-header`;
+        return ((0, vue_1.h)("div", { class: [blockClass, `${blockClass}--desktop`, this.themeClass], style: this.cssVars },
+            (0, vue_1.h)("div", { class: `${blockClass}__inner` },
+                (0, vue_1.h)("div", { class: `${blockClass}__inner-wrapper` },
+                    (0, vue_1.h)("div", { class: `${blockClass}__inner-left` }, (_b = (_a = this.$slots).logo) === null || _b === void 0 ? void 0 :
+                        _b.call(_a),
+                        (0, vue_1.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/lib/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;

package/lib/header/src/HeaderMobileLayout.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerMobileLayoutProps = void 0;
+const vue_1 = require("vue");
+exports.headerMobileLayoutProps = {
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    themeClass: String,
+    cssVars: Object
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'HeaderMobileLayout',
+    props: exports.headerMobileLayoutProps,
+    render() {
+        var _a, _b, _c, _d;
+        const blockClass = `${this.mergedClsPrefix}-header`;
+        return ((0, vue_1.h)("div", { class: [blockClass, `${blockClass}--mobile`, this.themeClass], style: this.cssVars },
+            (0, vue_1.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/lib/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/lib/header/src/HeaderNavigation.js

@@ -0,0 +1,175 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerNavigationProps = void 0;
+const vue_1 = require("vue");
+const _utils_1 = require("../../_utils");
+const tabs_1 = require("../../tabs");
+const utils_1 = require("./utils");
+exports.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]
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'HeaderNavigation',
+    props: exports.headerNavigationProps,
+    setup(props) {
+        const normalizedMenuItemsRef = (0, vue_1.computed)(() => {
+            return props.menuOptions.map((option, index) => ({
+                option,
+                key: (0, utils_1.getMenuItemKey)(option, index)
+            }));
+        });
+        const resolvedMenuPlacementRef = (0, vue_1.computed)(() => (0, utils_1.resolvePlacement)(props.menuPlacement));
+        function handleMenuValueUpdate(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);
+        }
+        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 ((0, utils_1.isDividerOption)(option)) {
+                return ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" }));
+            }
+            if ((0, utils_1.isGroupOption)(option)) {
+                return renderMenuColumn(option, key);
+            }
+            const icon = typeof option.icon === 'function' ? option.icon() : null;
+            return ((0, vue_1.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),
+                (0, vue_1.h)("span", { class: `${blockClass}__menu-item-main` },
+                    icon ? ((0, vue_1.h)("span", { class: `${blockClass}__menu-item-icon` }, icon)) : null,
+                    (0, vue_1.h)("span", { class: `${blockClass}__menu-item-label` }, (0, utils_1.renderOptionLabel)(option))),
+                (0, utils_1.renderBadge)(option, `${blockClass}__badge`)));
+        };
+        const renderMenuColumn = (option, key, asSection = false) => {
+            var _a, _b, _c, _d;
+            if ((0, utils_1.isDividerOption)(option)) {
+                return asSection ? ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" })) : ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-divider`, role: "separator" }));
+            }
+            if ((0, utils_1.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(utils_1.isNotNull);
+                if (!content.length)
+                    return null;
+                return ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-column` }, content));
+            }
+            if ((0, utils_1.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(utils_1.isNotNull);
+                if (!content.length)
+                    return null;
+                if (asSection) {
+                    return ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-column-section` },
+                        (0, vue_1.h)("div", { class: `${blockClass}__menu-column-title` }, (0, utils_1.renderOptionLabel)(option)),
+                        (0, vue_1.h)("div", { class: `${blockClass}__menu-column-list` }, content)));
+                }
+                return ((0, vue_1.h)("div", { key: key, class: `${blockClass}__menu-column` },
+                    (0, vue_1.h)("div", { class: `${blockClass}__menu-column-title` }, (0, utils_1.renderOptionLabel)(option)),
+                    (0, vue_1.h)("div", { class: `${blockClass}__menu-column-list` }, content)));
+            }
+            return ((0, vue_1.h)("div", { key: key, class: [
+                    asSection
+                        ? `${blockClass}__menu-column-section ${blockClass}__menu-column-section--single`
+                        : `${blockClass}__menu-column ${blockClass}__menu-column--single`
+                ] },
+                (0, vue_1.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(utils_1.isNotNull)) !== null && _c !== void 0 ? _c : [];
+            if (!columns.length)
+                return null;
+            // Подсчитываем количество колонок (children с type: 'column')
+            const columnCount = option.children.filter((child) => (0, utils_1.isColumnOption)(child) || !(0, utils_1.isDividerOption)(child)).length;
+            return ((0, vue_1.h)("div", { class: `${blockClass}__menu-card` },
+                (0, vue_1.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 ? ((0, vue_1.h)(tabs_1.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)
+                    (0, _utils_1.call)(userOnUpdateValue, value);
+                if (userOnUpdateValueCompat) {
+                    (0, _utils_1.call)(userOnUpdateValueCompat, value);
+                }
+            } }), {
+            default: () => menuItems.map((item) => ((0, vue_1.h)(tabs_1.UTabPane, { key: item.key, name: item.key, disabled: !!item.option.disabled, "display-directive": "show", tab: (0, vue_1.h)("div", { class: `${blockClass}__tab` },
+                    item.option.icon ? ((0, vue_1.h)("span", { class: `${blockClass}__tab-icon` }, typeof item.option.icon === 'function'
+                        ? item.option.icon()
+                        : item.option.icon)) : null,
+                    (0, vue_1.h)("span", { class: `${blockClass}__tab-label` }, (0, utils_1.renderOptionLabel)(item.option)),
+                    (0, utils_1.renderBadge)(item.option, `${blockClass}__badge`)) }, { default: () => renderMenuCard(item) })))
+        })) : null;
+        return tabsNode;
+    }
+});

package/lib/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/lib/header/src/HeaderSearchDesktop.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerSearchDesktopProps = void 0;
+const vue_1 = require("vue");
+const button_1 = require("../../button");
+const icon_1 = require("../../icon");
+const input_1 = require("../../input");
+const flex_1 = require("../../flex");
+const HeaderSearchResults_1 = __importDefault(require("./HeaderSearchResults"));
+const _mixins_1 = require("../../_mixins");
+const typography_1 = require("../../typography");
+const icons_1 = require("../../_internal/icons");
+exports.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
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'HeaderSearchDesktop',
+    props: exports.headerSearchDesktopProps,
+    setup() {
+        const { localeRef } = (0, _mixins_1.useLocale)('Header');
+        const search = (0, vue_1.ref)('');
+        const searchText = (0, vue_1.computed)(() => localeRef.value.desktopSearchTitle);
+        const placeholder = (0, vue_1.computed)(() => localeRef.value.searchPlaceholder);
+        return {
+            search,
+            searchText,
+            placeholder
+        };
+    },
+    render() {
+        const blockClass = `${this.mergedClsPrefix}-header-search-desktop`;
+        return ((0, vue_1.h)("div", { class: blockClass, style: this.cssVars },
+            (0, vue_1.h)(button_1.UButton, { text: true, class: `${blockClass}__close`, onClick: this.onSearchClose }, {
+                default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24, color: "#C5C7CA" }, { default: () => (0, vue_1.h)(icons_1.CloseIcon, null) }))
+            }),
+            (0, vue_1.h)(flex_1.UFlex, { class: `${blockClass}__title`, justify: "space-between" },
+                (0, vue_1.h)(typography_1.UText, { variant: "title-l-medium", text: this.searchText })),
+            (0, vue_1.h)("div", { class: `${blockClass}__content` },
+                (0, vue_1.h)("div", { class: `${blockClass}__input-wrapper` },
+                    (0, vue_1.h)(input_1.UInput, { value: this.searchValue, class: `${blockClass}__input`, placeholder: this.placeholder, autofocus: true, onKeyup: (e) => {
+                            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: () => ((0, vue_1.h)(icon_1.UIcon, { size: 20 }, { default: () => (0, vue_1.h)(icons_1.SearchIcon, null) }))
+                    }))),
+            (0, vue_1.h)(HeaderSearchResults_1.default, {
+                results: this.searchResults,
+                loading: this.searchLoading,
+                query: this.searchValue,
+                mergedClsPrefix: this.mergedClsPrefix,
+                cssVars: this.cssVars,
+                onSelect: this.onResultSelect
+            })));
+    }
+});

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