@uzum-tech/ui 1.11.2 → 1.12.0

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

@@ -0,0 +1,81 @@
+import { type PropType, type CSSProperties } from 'vue';
+import type { HeaderSearchResult } from './interface';
+export declare const headerSearchResultsProps: {
+    readonly version: {
+        readonly type: PropType<"desktop" | "mobile">;
+        readonly default: "desktop";
+    };
+    readonly results: {
+        readonly type: PropType<HeaderSearchResult[]>;
+        readonly default: () => never[];
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly query: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly onSelect: PropType<(result: HeaderSearchResult) => void>;
+};
+declare const _default: import("vue").DefineComponent<{
+    readonly version: {
+        readonly type: PropType<"desktop" | "mobile">;
+        readonly default: "desktop";
+    };
+    readonly results: {
+        readonly type: PropType<HeaderSearchResult[]>;
+        readonly default: () => never[];
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly query: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly onSelect: PropType<(result: HeaderSearchResult) => void>;
+}, {
+    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 version: {
+        readonly type: PropType<"desktop" | "mobile">;
+        readonly default: "desktop";
+    };
+    readonly results: {
+        readonly type: PropType<HeaderSearchResult[]>;
+        readonly default: () => never[];
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly query: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly onSelect: PropType<(result: HeaderSearchResult) => void>;
+}>>, {
+    readonly loading: boolean;
+    readonly results: HeaderSearchResult[];
+    readonly version: "mobile" | "desktop";
+    readonly query: string;
+}, {}>;
+export default _default;

package/es/header/src/HeaderSearchResults.js

@@ -0,0 +1,74 @@
+import { h, defineComponent, computed } from 'vue';
+import { UEmpty } from '../../empty';
+import { USpin } from '../../spin';
+import { useLocale } from '../../_mixins';
+export const headerSearchResultsProps = {
+    version: {
+        type: String,
+        default: 'desktop'
+    },
+    results: {
+        type: Array,
+        default: () => []
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    query: {
+        type: String,
+        default: ''
+    },
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    cssVars: Object,
+    onSelect: Function
+};
+export default defineComponent({
+    name: 'HeaderSearchResults',
+    props: headerSearchResultsProps,
+    setup() {
+        const { localeRef } = useLocale('Header');
+        const placeholder = computed(() => localeRef.value.searchPlaceholder);
+        return {
+            placeholder
+        };
+    },
+    render() {
+        const blockClass = `${this.mergedClsPrefix}-header-search-results`;
+        const versionClass = `${blockClass}--${this.version}`;
+        if (this.loading) {
+            return (h("div", { class: [blockClass, versionClass], style: this.cssVars },
+                h("div", { class: `${blockClass}__loading` },
+                    h(USpin, { size: "small" }),
+                    h("span", null, this.placeholder))));
+        }
+        if (!this.results.length && this.query) {
+            return (h("div", { class: [blockClass, versionClass], style: this.cssVars },
+                h("div", { class: `${blockClass}__empty` },
+                    h(UEmpty, { size: "small", description: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" }))));
+        }
+        if (!this.results.length) {
+            return null;
+        }
+        return (h("div", { class: [blockClass, versionClass], style: this.cssVars },
+            h("div", { class: `${blockClass}__list` }, this.results.map((result) => (h("div", { key: result.key, class: [
+                    `${blockClass}__item`,
+                    result.disabled && `${blockClass}__item--disabled`
+                ], onClick: () => {
+                    var _a;
+                    if (!result.disabled) {
+                        (_a = this.onSelect) === null || _a === void 0 ? void 0 : _a.call(this, result);
+                    }
+                } },
+                result.icon ? (h("span", { class: `${blockClass}__item-icon` }, typeof result.icon === 'function'
+                    ? result.icon()
+                    : result.icon)) : null,
+                h("div", { class: `${blockClass}__item-content` },
+                    h("div", { class: `${blockClass}__item-label` }, result.label),
+                    result.description ? (h("div", { class: `${blockClass}__item-description` }, result.description)) : null),
+                result.extra ? (h("span", { class: `${blockClass}__item-extra` }, result.extra)) : null))))));
+    }
+});

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

@@ -0,0 +1 @@
+export declare const SEARCH_DEBOUNCE_MS = 300;

package/es/header/src/constants.js

@@ -0,0 +1 @@
+export const SEARCH_DEBOUNCE_MS = 300;

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

@@ -0,0 +1,58 @@
+import { type VNodeChild } from 'vue';
+import type { MenuOption as BaseMenuOption, MenuGroupOption, MenuDividerOption, Key } from '../../menu/src/interface';
+import type { TabsProps } from '../../tabs';
+import { ImageProps } from '../../image';
+export type HeaderMenuGroupOption = MenuGroupOption;
+export type HeaderMenuDividerOption = MenuDividerOption;
+export interface HeaderProps {
+    menuOptions?: HeaderMenuOption[];
+    langOptions?: LangOption[];
+    defaultLang?: string | number;
+    menuPlacement?: HeaderMenuPlacement;
+    menuTrigger?: HeaderMenuTrigger;
+    menuValue?: string | number | null;
+    defaultMenuValue?: string | number | null;
+    menuTabsProps?: HeaderMenuTabsProps;
+    menuCardMinColumnWidth?: string | number;
+    logoSrc?: string;
+    logoAlt?: string;
+    logoProps?: Partial<ImageProps>;
+    responsive?: boolean;
+    mobileMenuType?: 'drawer' | 'dropdown';
+    mobileActionsCollapse?: boolean;
+    mobileShowFooterActions?: boolean;
+    mobilePrimaryActionText?: string;
+    mobileSecondaryActionText?: string;
+    mobileShowHeaderActions?: boolean;
+    onSearch?: HeaderSearchHandler;
+    onUpdateMenuValue: (value: string | number | null) => void;
+}
+export interface HeaderMenuColumnOption {
+    type: 'column';
+    key?: Key;
+    children?: HeaderMenuChildOption[];
+}
+export interface LangOption {
+    label: string | (() => VNodeChild);
+    key: string | number;
+    icon?: () => VNodeChild;
+}
+export interface HeaderSearchResult {
+    key: string | number;
+    label: string;
+    description?: string;
+    icon?: () => VNodeChild;
+    extra?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+export type HeaderSearchHandler = (query: string) => Promise<HeaderSearchResult[]> | HeaderSearchResult[];
+export type HeaderMenuChildOption = HeaderMenuColumnOption | HeaderMenuGroupOption | HeaderMenuDividerOption | HeaderMenuOption;
+export type HeaderMenuOption = Omit<BaseMenuOption, 'children'> & {
+    children?: HeaderMenuChildOption[];
+    onClick?: () => void;
+    hide?: boolean;
+};
+export type HeaderMenuPlacement = 'horizontal' | 'vertical' | 'top' | 'bottom' | 'left' | 'right';
+export type HeaderMenuTrigger = 'click' | 'hover';
+export type HeaderMenuTabsProps = Partial<TabsProps>;

package/es/header/src/interface.js

@@ -0,0 +1 @@
+export {};

package/es/header/src/mobile/HeaderMobile.d.ts

@@ -0,0 +1,218 @@
+import { type PropType, type VNodeChild, type CSSProperties } from 'vue';
+import type { HeaderMenuOption, HeaderSearchHandler, HeaderSearchResult } from '../interface';
+interface LangOption {
+    label: string | (() => VNodeChild);
+    key: string | number;
+    icon?: () => VNodeChild;
+}
+interface NormalizedMenuItem {
+    key: string | number;
+    option: HeaderMenuOption;
+}
+export declare const headerMobileProps: {
+    readonly visible: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly menuOptions: {
+        readonly type: PropType<NormalizedMenuItem[]>;
+        readonly default: () => never[];
+    };
+    readonly activeMenuValue: PropType<string | number | null>;
+    readonly langOptions: {
+        readonly type: PropType<LangOption[]>;
+        readonly required: true;
+    };
+    readonly currentLang: {
+        readonly type: PropType<LangOption>;
+        readonly required: true;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly menuType: {
+        readonly type: PropType<"drawer" | "dropdown">;
+        readonly default: "drawer";
+    };
+    readonly drawerPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+    };
+    readonly drawerWidth: {
+        readonly type: StringConstructor;
+        readonly default: "84%";
+    };
+    readonly showFooterActions: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly primaryActionText: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly secondaryActionText: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly showHeaderActions: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly onToggle: PropType<() => void>;
+    readonly onClose: PropType<() => void>;
+    readonly onMenuItemClick: PropType<(option: HeaderMenuOption) => void>;
+    readonly onLanguageSelect: PropType<(key: string | number) => void>;
+    readonly onPrimaryAction: PropType<() => void>;
+    readonly onSecondaryAction: PropType<() => void>;
+    readonly onSearchClick: PropType<() => void>;
+    readonly onSearch: PropType<HeaderSearchHandler>;
+    readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
+    readonly onPreview: PropType<() => void>;
+    readonly onLogout: PropType<() => void>;
+};
+declare const _default: import("vue").DefineComponent<{
+    readonly visible: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly menuOptions: {
+        readonly type: PropType<NormalizedMenuItem[]>;
+        readonly default: () => never[];
+    };
+    readonly activeMenuValue: PropType<string | number | null>;
+    readonly langOptions: {
+        readonly type: PropType<LangOption[]>;
+        readonly required: true;
+    };
+    readonly currentLang: {
+        readonly type: PropType<LangOption>;
+        readonly required: true;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly menuType: {
+        readonly type: PropType<"drawer" | "dropdown">;
+        readonly default: "drawer";
+    };
+    readonly drawerPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+    };
+    readonly drawerWidth: {
+        readonly type: StringConstructor;
+        readonly default: "84%";
+    };
+    readonly showFooterActions: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly primaryActionText: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly secondaryActionText: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly showHeaderActions: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly onToggle: PropType<() => void>;
+    readonly onClose: PropType<() => void>;
+    readonly onMenuItemClick: PropType<(option: HeaderMenuOption) => void>;
+    readonly onLanguageSelect: PropType<(key: string | number) => void>;
+    readonly onPrimaryAction: PropType<() => void>;
+    readonly onSecondaryAction: PropType<() => void>;
+    readonly onSearchClick: PropType<() => void>;
+    readonly onSearch: PropType<HeaderSearchHandler>;
+    readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
+    readonly onPreview: PropType<() => void>;
+    readonly onLogout: PropType<() => void>;
+}, {
+    blockClass: import("vue").ComputedRef<string>;
+    mobileMenuClass: import("vue").ComputedRef<string>;
+    expandedKeys: import("vue").Ref<Set<string | number>>;
+    normalizeMobileMenuOptions: import("vue").ComputedRef<NormalizedMenuItem[]>;
+    primaryActionTextRef: import("vue").ComputedRef<string>;
+    secondaryActionTextRef: import("vue").ComputedRef<string>;
+    toggleExpand: (key: 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 visible: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly menuOptions: {
+        readonly type: PropType<NormalizedMenuItem[]>;
+        readonly default: () => never[];
+    };
+    readonly activeMenuValue: PropType<string | number | null>;
+    readonly langOptions: {
+        readonly type: PropType<LangOption[]>;
+        readonly required: true;
+    };
+    readonly currentLang: {
+        readonly type: PropType<LangOption>;
+        readonly required: true;
+    };
+    readonly mergedClsPrefix: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    readonly cssVars: PropType<CSSProperties>;
+    readonly menuType: {
+        readonly type: PropType<"drawer" | "dropdown">;
+        readonly default: "drawer";
+    };
+    readonly drawerPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+    };
+    readonly drawerWidth: {
+        readonly type: StringConstructor;
+        readonly default: "84%";
+    };
+    readonly showFooterActions: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly primaryActionText: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly secondaryActionText: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly showHeaderActions: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly onToggle: PropType<() => void>;
+    readonly onClose: PropType<() => void>;
+    readonly onMenuItemClick: PropType<(option: HeaderMenuOption) => void>;
+    readonly onLanguageSelect: PropType<(key: string | number) => void>;
+    readonly onPrimaryAction: PropType<() => void>;
+    readonly onSecondaryAction: PropType<() => void>;
+    readonly onSearchClick: PropType<() => void>;
+    readonly onSearch: PropType<HeaderSearchHandler>;
+    readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
+    readonly onPreview: PropType<() => void>;
+    readonly onLogout: PropType<() => void>;
+}>>, {
+    readonly primaryActionText: string;
+    readonly secondaryActionText: string;
+    readonly visible: boolean;
+    readonly menuOptions: NormalizedMenuItem[];
+    readonly menuType: "drawer" | "dropdown";
+    readonly drawerPlacement: "left" | "right";
+    readonly drawerWidth: string;
+    readonly showFooterActions: boolean;
+    readonly showHeaderActions: boolean;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,241 @@
+import { h, defineComponent, computed, ref, Fragment } from 'vue';
+import { UButton } from '../../../button';
+import { UIcon } from '../../../icon';
+import { UDrawer } from '../../../drawer';
+import { UDropdown } from '../../../dropdown';
+import { EyeIcon, CloseIcon, LogoutIcon, SearchIcon, ChevronDownIcon, BurgerMenuIcon } from '../../../_internal/icons';
+import { UFlex } from '../../../flex';
+import { renderOptionLabel, renderBadge, hasChildren } from '../utils';
+import { useLocale } from '../../../_mixins';
+export const headerMobileProps = {
+    visible: {
+        type: Boolean,
+        default: false
+    },
+    menuOptions: {
+        type: Array,
+        default: () => []
+    },
+    activeMenuValue: [String, Number],
+    langOptions: {
+        type: Array,
+        required: true
+    },
+    currentLang: {
+        type: Object,
+        required: true
+    },
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    cssVars: Object,
+    menuType: {
+        type: String,
+        default: 'drawer'
+    },
+    drawerPlacement: {
+        type: String,
+        default: 'right'
+    },
+    drawerWidth: {
+        type: String,
+        default: '84%'
+    },
+    showFooterActions: {
+        type: Boolean,
+        default: true
+    },
+    primaryActionText: {
+        type: String,
+        default: undefined
+    },
+    secondaryActionText: {
+        type: String,
+        default: undefined
+    },
+    showHeaderActions: {
+        type: Boolean,
+        default: true
+    },
+    onToggle: Function,
+    onClose: Function,
+    onMenuItemClick: Function,
+    onLanguageSelect: Function,
+    onPrimaryAction: Function,
+    onSecondaryAction: Function,
+    onSearchClick: Function,
+    onSearch: Function,
+    onSearchResultSelect: Function,
+    onPreview: Function,
+    onLogout: Function
+};
+export default defineComponent({
+    name: 'HeaderMobile',
+    props: headerMobileProps,
+    setup(props) {
+        const { localeRef } = useLocale('Header');
+        const blockClassRef = computed(() => `${props.mergedClsPrefix}-header`);
+        const mobileMenuClassRef = computed(() => `${props.mergedClsPrefix}-header-mobile-menu`);
+        const expandedKeysRef = ref(new Set());
+        const toggleExpand = (key) => {
+            const newSet = new Set(expandedKeysRef.value);
+            if (newSet.has(key)) {
+                newSet.delete(key);
+            }
+            else {
+                newSet.add(key);
+            }
+            expandedKeysRef.value = newSet;
+        };
+        const normalizeMobileMenuOptions = computed(() => {
+            return props.menuOptions.map((item) => {
+                const option = item.option;
+                if (!option.children || !Array.isArray(option.children)) {
+                    return item;
+                }
+                const hasColumns = option.children.some((child) => child.type === 'column');
+                if (!hasColumns) {
+                    return item;
+                }
+                const flattenedChildren = [];
+                option.children.forEach((child) => {
+                    if (child.type === 'column' && Array.isArray(child.children)) {
+                        flattenedChildren.push(...child.children);
+                    }
+                    else {
+                        flattenedChildren.push(child);
+                    }
+                });
+                return Object.assign(Object.assign({}, item), { option: Object.assign(Object.assign({}, option), { children: flattenedChildren }) });
+            });
+        });
+        const primaryActionTextRef = computed(() => { var _a; return (_a = props.primaryActionText) !== null && _a !== void 0 ? _a : localeRef.value.primaryActionText; });
+        const secondaryActionTextRef = computed(() => { var _a; return (_a = props.secondaryActionText) !== null && _a !== void 0 ? _a : localeRef.value.secondaryActionText; });
+        return {
+            blockClass: blockClassRef,
+            mobileMenuClass: mobileMenuClassRef,
+            expandedKeys: expandedKeysRef,
+            normalizeMobileMenuOptions,
+            primaryActionTextRef,
+            secondaryActionTextRef,
+            toggleExpand
+        };
+    },
+    render() {
+        const blockClass = this.blockClass;
+        const mobileMenuClass = this.mobileMenuClass;
+        const renderGroupItem = (child, parentKey, index) => {
+            const childKey = typeof child.key === 'string' || typeof child.key === 'number'
+                ? child.key
+                : `${parentKey}-child-${index}`;
+            const isGroup = child.type === 'group';
+            const hasGroupChildren = isGroup && Array.isArray(child.children) && child.children.length > 0;
+            if (isGroup && hasGroupChildren && child.children) {
+                return (h("div", { key: childKey, class: `${mobileMenuClass}__group` },
+                    h("div", { class: `${mobileMenuClass}__group-title` }, renderOptionLabel(child)),
+                    h("div", { class: `${mobileMenuClass}__group-items` }, child.children.map((groupChild, groupIndex) => {
+                        const groupChildKey = typeof groupChild.key === 'string' ||
+                            typeof groupChild.key === 'number'
+                            ? groupChild.key
+                            : `${childKey}-item-${groupIndex}`;
+                        return (h("div", { key: groupChildKey, class: [
+                                `${mobileMenuClass}__group-item`,
+                                this.activeMenuValue === groupChild.key &&
+                                    `${mobileMenuClass}__group-item--active`
+                            ], onClick: () => {
+                                var _a;
+                                if (!groupChild.disabled) {
+                                    (_a = this.onMenuItemClick) === null || _a === void 0 ? void 0 : _a.call(this, groupChild);
+                                }
+                            } },
+                            h("span", { class: `${mobileMenuClass}__group-item-label` }, renderOptionLabel(groupChild)),
+                            renderBadge(groupChild, `${blockClass}__badge`)));
+                    }))));
+            }
+            return (h("div", { key: childKey, class: [
+                    `${mobileMenuClass}__child-item`,
+                    this.activeMenuValue === child.key &&
+                        `${mobileMenuClass}__child-item--active`
+                ], onClick: () => {
+                    var _a;
+                    if (!child.disabled) {
+                        (_a = this.onMenuItemClick) === null || _a === void 0 ? void 0 : _a.call(this, child);
+                    }
+                } },
+                h("span", { class: `${mobileMenuClass}__child-item-label` }, renderOptionLabel(child)),
+                renderBadge(child, `${blockClass}__badge`)));
+        };
+        const renderMobileMenuItem = (item) => {
+            const option = item.option;
+            const isExpandable = hasChildren(option);
+            const isExpanded = this.expandedKeys.has(item.key);
+            const handleClick = () => {
+                var _a;
+                if (option.disabled)
+                    return;
+                if (isExpandable) {
+                    this.toggleExpand(item.key);
+                }
+                else {
+                    (_a = this.onMenuItemClick) === null || _a === void 0 ? void 0 : _a.call(this, option);
+                }
+            };
+            return (h("div", { key: item.key },
+                h("div", { class: [
+                        `${mobileMenuClass}__item`,
+                        isExpandable && `${mobileMenuClass}__item--expandable`,
+                        isExpanded && `${mobileMenuClass}__item--expanded`,
+                        this.activeMenuValue === item.key &&
+                            `${mobileMenuClass}__item--active`,
+                        option.disabled && `${mobileMenuClass}__item--disabled`
+                    ], onClick: handleClick },
+                    option.icon ? (h("span", { class: `${mobileMenuClass}__item-icon` }, typeof option.icon === 'function'
+                        ? option.icon()
+                        : option.icon)) : null,
+                    h("span", { class: `${mobileMenuClass}__item-label` }, renderOptionLabel(option)),
+                    renderBadge(option, `${blockClass}__badge`)),
+                isExpandable && isExpanded && option.children && (h("div", { class: `${mobileMenuClass}__children` }, option.children.map((child, index) => renderGroupItem(child, item.key, index))))));
+        };
+        const mobileMenuContent = (h("div", { class: mobileMenuClass, style: this.cssVars },
+            h("div", { class: `${mobileMenuClass}__header` },
+                this.$slots.actions ? (h("div", { class: `${mobileMenuClass}__actions` }, this.$slots.actions())) : this.showHeaderActions ? (h("div", { class: `${mobileMenuClass}__actions` },
+                    h(UDropdown, { trigger: "click", options: this.langOptions, onSelect: this.onLanguageSelect }, {
+                        default: () => (h(UButton, { text: true, size: "small", renderIcon: () => (h(UIcon, { size: 24 }, () => h(ChevronDownIcon, null))), iconPlacement: "right" }, {
+                            default: () => (h(UFlex, { size: 14, align: "center", class: `${mobileMenuClass}__lang-content` }, {
+                                default: () => {
+                                    var _a, _b;
+                                    return ((_a = this.currentLang) === null || _a === void 0 ? void 0 : _a.icon) ? (h(Fragment, null,
+                                        h(UFlex, null, {
+                                            default: () => { var _a, _b; return (_b = (_a = this.currentLang) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                                        }),
+                                        h("span", null, (_b = this.currentLang) === null || _b === void 0 ? void 0 : _b.label))) : null;
+                                }
+                            }))
+                        }))
+                    }),
+                    h(UFlex, { size: 24 }, {
+                        default: () => (h(Fragment, null,
+                            h(UButton, { text: true, onClick: this.onSearchClick }, () => h(UIcon, { size: 24 }, () => h(SearchIcon, null))),
+                            h(UButton, { text: true, onClick: this.onPreview }, () => h(UIcon, { size: 24 }, () => h(EyeIcon, null))),
+                            h(UButton, { text: true, onClick: this.onLogout }, () => h(UIcon, { size: 24 }, () => h(LogoutIcon, null)))))
+                    }))) : null,
+                h(UButton, { text: true, class: `${mobileMenuClass}__close`, onClick: this.onClose }, () => h(UIcon, { size: 24 }, () => h(CloseIcon, null)))),
+            h("div", { class: `${mobileMenuClass}__body` },
+                h("div", { class: `${mobileMenuClass}__list` }, this.normalizeMobileMenuOptions.map(renderMobileMenuItem))),
+            this.$slots.footer ? (h("div", { class: `${mobileMenuClass}__footer` }, this.$slots.footer())) : this.showFooterActions ? (h("div", { class: `${mobileMenuClass}__footer` },
+                h(UButton, { type: "primary", size: "large", block: true, round: true, onClick: this.onPrimaryAction }, () => this.primaryActionTextRef),
+                h(UButton, { size: "large", block: true, round: true, onClick: this.onSecondaryAction }, () => this.secondaryActionTextRef))) : null));
+        const burgerButton = (h(UButton, { text: true, class: `${blockClass}__burger`, onClick: this.onToggle }, () => h(UIcon, { size: 24 }, () => h(BurgerMenuIcon, null))));
+        return (h(UFlex, null, {
+            default: () => (h(Fragment, null,
+                burgerButton,
+                this.menuType === 'drawer' ? (h(UDrawer, { show: this.visible, width: this.drawerWidth, placement: this.drawerPlacement, "auto-focus": false, onUpdateShow: (show) => {
+                        var _a;
+                        if (!show) {
+                            (_a = this.onClose) === null || _a === void 0 ? void 0 : _a.call(this);
+                        }
+                    } }, () => mobileMenuContent)) : null))
+        }));
+    }
+});