@uzum-tech/ui 1.12.17 → 1.12.19

package/lib/data-table/src/TableParts/Cell.js

@@ -30,7 +30,8 @@ exports.default = (0, vue_1.defineComponent)({
             type: Object,
             required: true
         },
-        renderCell: Function
+        renderCell: Function,
+        defaultEmptyValue: [String, Function]
     },
     render() {
         var _a;
@@ -43,12 +44,28 @@ exports.default = (0, vue_1.defineComponent)({
         const isEditable = typeof editable === 'function' ? editable(row) : editable;
         if (render && !isSummary) {
             let cellValue = render(row, this.index);
-            if (mask && cellValue !== null && cellValue !== undefined) {
-                if (typeof cellValue === 'string' || typeof cellValue === 'number') {
-                    cellValue = (0, use_mask_1.processMaskedValue)(cellValue, mask);
+            if (cellValue == null || cellValue === false) {
+                const { defaultEmptyValue } = this;
+                if (defaultEmptyValue !== undefined) {
+                    if (typeof defaultEmptyValue === 'function') {
+                        cell = defaultEmptyValue();
+                    }
+                    else {
+                        cell = defaultEmptyValue;
+                    }
+                }
+                else {
+                    cell = '';
                 }
             }
-            cell = cellValue;
+            else {
+                if (mask && cellValue !== null && cellValue !== undefined) {
+                    if (typeof cellValue === 'string' || typeof cellValue === 'number') {
+                        cellValue = (0, use_mask_1.processMaskedValue)(cellValue, mask);
+                    }
+                }
+                cell = cellValue;
+            }
         }
         else if (isEditable && !isSummary) {
             const { placeholder } = column;
@@ -162,7 +179,25 @@ exports.default = (0, vue_1.defineComponent)({
                 if (mask && cellValue !== null && cellValue !== undefined) {
                     cellValue = (0, use_mask_1.processMaskedValue)(String(cellValue), mask);
                 }
-                cell = String(cellValue);
+                if (cellValue === null ||
+                    cellValue === undefined ||
+                    cellValue === false) {
+                    const { defaultEmptyValue } = this;
+                    if (defaultEmptyValue !== undefined) {
+                        if (typeof defaultEmptyValue === 'function') {
+                            cell = defaultEmptyValue();
+                        }
+                        else {
+                            cell = defaultEmptyValue;
+                        }
+                    }
+                    else {
+                        cell = '';
+                    }
+                }
+                else {
+                    cell = String(cellValue);
+                }
             }
             else {
                 let cellValue = renderCell
@@ -172,10 +207,28 @@ exports.default = (0, vue_1.defineComponent)({
                     cell = cellValue;
                 }
                 else {
-                    if (mask && cellValue !== null && cellValue !== undefined) {
-                        cellValue = (0, use_mask_1.processMaskedValue)(cellValue, mask);
+                    if (cellValue === null ||
+                        cellValue === undefined ||
+                        cellValue === false) {
+                        const { defaultEmptyValue } = this;
+                        if (defaultEmptyValue !== undefined) {
+                            if (typeof defaultEmptyValue === 'function') {
+                                cell = defaultEmptyValue();
+                            }
+                            else {
+                                cell = defaultEmptyValue;
+                            }
+                        }
+                        else {
+                            cell = '';
+                        }
+                    }
+                    else {
+                        if (mask && cellValue !== null && cellValue !== undefined) {
+                            cellValue = (0, use_mask_1.processMaskedValue)(cellValue, mask);
+                        }
+                        cell = String(cellValue);
                     }
-                    cell = String(cellValue);
                 }
             }
         }

package/lib/data-table/src/interface.d.ts

@@ -97,6 +97,7 @@ export declare const dataTableProps: {
     };
     readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly renderCell: PropType<(value: any, rowData: object, column: TableBaseColumn) => VNodeChild>;
+    readonly defaultEmptyValue: PropType<string | (() => VNodeChild) | undefined>;
     readonly renderExpandIcon: PropType<RenderExpandIcon>;
     readonly spinProps: {
         readonly type: PropType<BaseLoadingExposedProps>;
@@ -3175,6 +3176,7 @@ export interface DataTableInjection {
     syncScrollState: (deltaX?: number, deltaY?: number) => void;
     setHeaderScrollLeft: (scrollLeft: number) => void;
     renderCell: Ref<undefined | ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild)>;
+    defaultEmptyValueRef: Ref<string | (() => VNodeChild) | undefined>;
     emptyPropsRef: Ref<Partial<EmptyProps> | undefined>;
     handleEdit: (value: any, row: any, key: string) => void;
 }

package/lib/data-table/src/interface.js

@@ -53,7 +53,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, emptyProps: Object, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    }, scrollbarProps: Object, renderCell: Function, defaultEmptyValue: [String, Function], renderExpandIcon: Function, spinProps: { type: Object, default: {} }, emptyProps: Object, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 exports.dataTableInjectionKey = (0, _utils_1.createInjectionKey)('u-data-table');

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

@@ -1,4 +1,4 @@
-import { type PropType, type ExtractPropTypes, ComputedRef } from 'vue';
+import { type PropType, type ExtractPropTypes, ComputedRef, VNodeChild } from 'vue';
 import { type MaybeArray } from '../../_utils';
 import type { HeaderProps as HeaderPropsInterface, HeaderMenuOption, LangOption, HeaderSearchResult } from './interface';
 export type HeaderSetupProps = ExtractPropTypes<typeof headerProps>;
@@ -78,9 +78,14 @@ export declare const headerProps: {
         type: PropType<HeaderPropsInterface["mobileShowHeaderActions"]>;
         default: boolean;
     };
+    actionsProps: {
+        type: PropType<HeaderPropsInterface["actionsProps"]>;
+    };
     onSearch: PropType<HeaderPropsInterface["onSearch"]>;
     'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
     onUpdateMenuValue: PropType<MaybeArray<HeaderPropsInterface["onUpdateMenuValue"]>>;
+    'onUpdate:activeMenuKey': PropType<MaybeArray<(value: string | number | null) => void>>;
+    onUpdateActiveMenuKey: PropType<MaybeArray<(value: string | number | null) => void>>;
     theme: PropType<import("../../_mixins").Theme<"Header", {
         fontSize: string;
         fontBodyLarge: string;
@@ -259,9 +264,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["mobileShowHeaderActions"]>;
         default: boolean;
     };
+    actionsProps: {
+        type: PropType<HeaderPropsInterface["actionsProps"]>;
+    };
     onSearch: PropType<HeaderPropsInterface["onSearch"]>;
     'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
     onUpdateMenuValue: PropType<MaybeArray<HeaderPropsInterface["onUpdateMenuValue"]>>;
+    'onUpdate:activeMenuKey': PropType<MaybeArray<(value: string | number | null) => void>>;
+    onUpdateActiveMenuKey: PropType<MaybeArray<(value: string | number | null) => void>>;
     theme: PropType<import("../../_mixins").Theme<"Header", {
         fontSize: string;
         fontBodyLarge: string;
@@ -406,13 +416,16 @@ declare const _default: import("vue").DefineComponent<{
     }[] | undefined>;
     mergedMenuValue: ComputedRef<string | number | null>;
     currentLang: import("vue").Ref<{
-        label: string | (() => import("vue").VNodeChild);
+        label: string | (() => VNodeChild);
         key: string | number;
-        icon?: (() => import("vue").VNodeChild) | undefined;
+        icon?: (() => VNodeChild) | undefined;
     }>;
     isMobile: import("vue").Ref<boolean | undefined>;
     mobileMenuVisible: import("vue").Ref<boolean>;
     searchVisible: import("vue").Ref<boolean>;
+    menuPaneClass: ComputedRef<string>;
+    menuPaneWrapperClass: ComputedRef<string>;
+    mergedActiveMenuKey: ComputedRef<string | number | null>;
     handleSelectLang: (key: string | number) => void;
     handleMenuValueUpdate: (value: string | number | null) => void;
     handleSearchClick: () => void;
@@ -427,10 +440,9 @@ declare const _default: import("vue").DefineComponent<{
     handleMobileMenuItemClick: (option: HeaderMenuOption) => void;
     handleMobilePrimaryAction: () => void;
     handleMobileSecondaryAction: () => void;
-    menuPaneClass: ComputedRef<string>;
-    menuPaneWrapperClass: ComputedRef<string>;
+    handleUpdateActiveMenuKey: (value: string | number | null) => void;
     onRender: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ["search", "search-result-select", "preview", "logout", "language-select", "logo-click", "mobile-primary-action", "mobile-secondary-action"], "search" | "logout" | "preview" | "search-result-select" | "language-select" | "logo-click" | "mobile-primary-action" | "mobile-secondary-action", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ["search", "search-result-select", "preview", "logout", "language-select", "logo-click", "mobile-primary-action", "mobile-secondary-action", "update:activeMenuKey"], "search" | "logout" | "preview" | "search-result-select" | "language-select" | "logo-click" | "mobile-primary-action" | "mobile-secondary-action" | "update:activeMenuKey", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     menuOptions: {
         type: PropType<HeaderPropsInterface["menuOptions"]>;
         default: () => never[];
@@ -505,9 +517,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["mobileShowHeaderActions"]>;
         default: boolean;
     };
+    actionsProps: {
+        type: PropType<HeaderPropsInterface["actionsProps"]>;
+    };
     onSearch: PropType<HeaderPropsInterface["onSearch"]>;
     'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
     onUpdateMenuValue: PropType<MaybeArray<HeaderPropsInterface["onUpdateMenuValue"]>>;
+    'onUpdate:activeMenuKey': PropType<MaybeArray<(value: string | number | null) => void>>;
+    onUpdateActiveMenuKey: PropType<MaybeArray<(value: string | number | null) => void>>;
     theme: PropType<import("../../_mixins").Theme<"Header", {
         fontSize: string;
         fontBodyLarge: string;
@@ -614,6 +631,7 @@ declare const _default: import("vue").DefineComponent<{
     onSearch?: ((...args: any[]) => any) | undefined;
     onPreview?: ((...args: any[]) => any) | undefined;
     onLogout?: ((...args: any[]) => any) | undefined;
+    "onUpdate:activeMenuKey"?: ((...args: any[]) => any) | undefined;
     "onSearch-result-select"?: ((...args: any[]) => any) | undefined;
     "onLanguage-select"?: ((...args: any[]) => any) | undefined;
     "onLogo-click"?: ((...args: any[]) => any) | undefined;

package/lib/header/src/Header.js

@@ -123,7 +123,9 @@ exports.headerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, mobileShowHeaderActions: {
         type: Boolean,
         default: true
-    }, onSearch: Function, 'onUpdate:menuValue': [Function, Array], onUpdateMenuValue: [Function, Array] });
+    }, actionsProps: {
+        type: Object
+    }, onSearch: Function, 'onUpdate:menuValue': [Function, Array], onUpdateMenuValue: [Function, Array], 'onUpdate:activeMenuKey': [Function, Array], onUpdateActiveMenuKey: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Header',
     props: exports.headerProps,
@@ -135,7 +137,8 @@ exports.default = (0, vue_1.defineComponent)({
         'language-select',
         'logo-click',
         'mobile-primary-action',
-        'mobile-secondary-action'
+        'mobile-secondary-action',
+        'update:activeMenuKey'
     ],
     setup(props, { emit }) {
         var _a, _b;
@@ -144,6 +147,9 @@ exports.default = (0, vue_1.defineComponent)({
         const isMobileRef = (0, vue_1.toRef)(props, 'isMobile');
         const mobileMenuVisibleRef = (0, vue_1.ref)(false);
         const searchVisibleRef = (0, vue_1.ref)(false);
+        const controlledActiveMenuKeyRef = (0, vue_1.toRef)(props, 'activeMenuKey');
+        const uncontrolledActiveMenuKeyRef = (0, vue_1.ref)(null);
+        const mergedActiveMenuKeyRef = (0, vooks_1.useMergedState)(controlledActiveMenuKeyRef, uncontrolledActiveMenuKeyRef);
         (0, vue_1.onBeforeMount)(() => {
             index_cssr_1.headerMobileMenuStyle.mount({
                 id: `${mergedClsPrefixRef.value}-header-mobile-menu`,
@@ -283,6 +289,16 @@ exports.default = (0, vue_1.defineComponent)({
         function handleLogoClick() {
             emit('logo-click');
         }
+        function handleUpdateActiveMenuKey(value) {
+            uncontrolledActiveMenuKeyRef.value = value;
+            emit('update:activeMenuKey', value);
+            const { onUpdateActiveMenuKey } = props;
+            const { 'onUpdate:activeMenuKey': _onUpdateActiveMenuKey } = props;
+            if (onUpdateActiveMenuKey)
+                (0, _utils_1.call)(onUpdateActiveMenuKey, value);
+            if (_onUpdateActiveMenuKey)
+                (0, _utils_1.call)(_onUpdateActiveMenuKey, value);
+        }
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: cssVarsRef,
@@ -293,6 +309,9 @@ exports.default = (0, vue_1.defineComponent)({
             isMobile: isMobileRef,
             mobileMenuVisible: mobileMenuVisibleRef,
             searchVisible: searchVisibleRef,
+            menuPaneClass,
+            menuPaneWrapperClass,
+            mergedActiveMenuKey: mergedActiveMenuKeyRef,
             handleSelectLang,
             handleMenuValueUpdate,
             handleSearchClick,
@@ -307,8 +326,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleMobileMenuItemClick,
             handleMobilePrimaryAction,
             handleMobileSecondaryAction,
-            menuPaneClass,
-            menuPaneWrapperClass,
+            handleUpdateActiveMenuKey,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
@@ -325,15 +343,22 @@ exports.default = (0, vue_1.defineComponent)({
                 this.logoSrc && `${blockClass}__logo--clickable`
             ].filter(Boolean), onClick: this.handleLogoClick },
             (0, vue_1.h)("img", { src: this.logoSrc, alt: this.logoAlt })));
-        const navigationNode = (0, _utils_1.resolveWrappedSlot)($slots.navigation, (children) => children !== null && children !== void 0 ? children : null) || ((0, vue_1.h)(HeaderNavigation_1.default, { menuOptions: this.menuOptions, menuPlacement: this.menuPlacement, menuTrigger: this.menuTrigger, menuValue: this.mergedMenuValue, menuTabsProps: this.menuTabsProps, menuCardMinColumnWidth: this.menuCardMinColumnWidth, mergedClsPrefix: mergedClsPrefix, menuPaneClass: this.menuPaneClass, menuPaneWrapperClass: this.menuPaneWrapperClass, activeMenuKey: this.activeMenuKey, onUpdateMenuValue: this.handleMenuValueUpdate }));
+        const navigationNode = (0, _utils_1.resolveWrappedSlot)($slots.navigation, (children) => children !== null && children !== void 0 ? children : null) || ((0, vue_1.h)(HeaderNavigation_1.default, { menuOptions: this.menuOptions, menuPlacement: this.menuPlacement, menuTrigger: this.menuTrigger, menuValue: this.mergedMenuValue, menuTabsProps: this.menuTabsProps, menuCardMinColumnWidth: this.menuCardMinColumnWidth, mergedClsPrefix: mergedClsPrefix, menuPaneClass: this.menuPaneClass, menuPaneWrapperClass: this.menuPaneWrapperClass, activeMenuKey: this.mergedActiveMenuKey, onUpdateMenuValue: this.handleMenuValueUpdate, onUpdateActiveMenuKey: this.handleUpdateActiveMenuKey }));
         const mobileNode = this.responsive && this.isMobile ? ((0, vue_1.h)(HeaderMobile_1.default, { visible: this.mobileMenuVisible, menuOptions: this.normalizedMenuItems, activeMenuValue: this.mergedMenuValue, langOptions: this.langOptions || defaultLangOptions, currentLang: this.currentLang, mergedClsPrefix: mergedClsPrefix, cssVars: this.cssVars, menuType: this.mobileMenuType, showFooterActions: this.mobileShowFooterActions, showHeaderActions: this.mobileShowHeaderActions, primaryActionText: this.mobilePrimaryActionText, secondaryActionText: this.mobileSecondaryActionText, onToggle: this.toggleMobileMenu, onClose: this.closeMobileMenu, onMenuItemClick: this.handleMobileMenuItemClick, onLanguageSelect: this.handleSelectLang, onPrimaryAction: this.handleMobilePrimaryAction, onSecondaryAction: this.handleMobileSecondaryAction, onSearchClick: this.handleSearchClick, onPreview: this.handlePreviewClick, onLogout: this.handleLogoutClick }, {
             actions: $slots['mobile-actions'],
             footer: $slots['mobile-footer']
         })) : null;
-        const actionsNode = (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => children ? (0, vue_1.h)("div", { class: `${blockClass}__actions` }, children) : null) || ((0, vue_1.h)(HeaderActions_1.default, { langOptions: this.langOptions || defaultLangOptions, currentLang: this.currentLang, mergedClsPrefix: mergedClsPrefix, responsive: this.responsive, isMobile: this.isMobile, mobileActionsCollapse: this.mobileActionsCollapse, cssVars: this.cssVars, onSearch: this.handleSearch, onSearchResultSelect: this.handleSearchResultSelect, onPreview: this.handlePreviewClick, onLogout: this.handleLogoutClick, onLanguageSelect: this.handleSelectLang }, {
-            mobile: () => mobileNode
-        }));
-        const searchNode = this.responsive && this.isMobile && this.searchVisible
+        const langNode = (0, _utils_1.resolveWrappedSlot)($slots.lang, (children) => children);
+        const searchNode = (0, _utils_1.resolveWrappedSlot)($slots.search, (children) => children);
+        const accessibilityNode = (0, _utils_1.resolveWrappedSlot)($slots.accessibility, (children) => children !== null && children !== void 0 ? children : null);
+        const logoutNode = (0, _utils_1.resolveWrappedSlot)($slots.logout, (children) => children);
+        const resolveActionSlots = () => {
+            return Object.assign(Object.assign(Object.assign(Object.assign({}, ($slots.lang ? { lang: () => langNode } : {})), ($slots.search ? { search: () => searchNode } : {})), ($slots.accessibility
+                ? { accessibility: () => accessibilityNode }
+                : {})), ($slots.logout ? { logout: () => logoutNode } : {}));
+        };
+        const actionsNode = (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => children ? (0, vue_1.h)("div", { class: `${blockClass}__actions` }, children) : null) || ((0, vue_1.h)(HeaderActions_1.default, Object.assign({ 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 }, (0, vue_1.mergeProps)(this.$attrs, this.actionsProps)), Object.assign({ mobile: () => mobileNode }, resolveActionSlots())));
+        const searchMobileNode = this.responsive && this.isMobile && this.searchVisible
             ? (0, vue_1.h)(HeaderSearchMobile_1.default, {
                 mergedClsPrefix,
                 show: this.searchVisible,
@@ -354,7 +379,7 @@ exports.default = (0, vue_1.defineComponent)({
                     navigation: () => null,
                     actions: () => actionsNode
                 }),
-                searchNode
+                searchMobileNode
             ]);
         }
         return (0, vue_1.h)(HeaderDesktopLayout_1.default, {

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

@@ -1,68 +1,76 @@
-import { type PropType, type CSSProperties } from 'vue';
-import type { LangOption, HeaderSearchResult, HeaderSearchHandler } from './interface';
+import { type PropType, VNodeChild } from 'vue';
+import type { HeaderSearchResult, HeaderActionsProps } from './interface';
 export declare const headerActionsProps: {
     readonly langOptions: {
-        readonly type: PropType<LangOption[]>;
+        readonly type: PropType<HeaderActionsProps["langOptions"]>;
         readonly required: true;
     };
     readonly currentLang: {
-        readonly type: PropType<LangOption>;
+        readonly type: PropType<HeaderActionsProps["currentLang"]>;
         readonly required: true;
     };
     readonly mergedClsPrefix: {
-        readonly type: StringConstructor;
+        readonly type: PropType<HeaderActionsProps["mergedClsPrefix"]>;
         readonly required: true;
     };
     readonly responsive: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<HeaderActionsProps["responsive"]>;
         readonly default: false;
     };
     readonly isMobile: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<HeaderActionsProps["isMobile"]>;
         readonly default: false;
     };
     readonly mobileActionsCollapse: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<HeaderActionsProps["mobileActionsCollapse"]>;
         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 actionsVisibility: {
+        readonly type: PropType<HeaderActionsProps["actionsVisibility"]>;
+        readonly required: false;
+    };
+    readonly cssVars: PropType<HeaderActionsProps["cssVars"]>;
+    readonly onSearch: PropType<HeaderActionsProps["onSearch"]>;
+    readonly onPreview: PropType<HeaderActionsProps["onPreview"]>;
+    readonly onLogout: PropType<HeaderActionsProps["onLogout"]>;
+    readonly onLanguageSelect: PropType<HeaderActionsProps["onLanguageSelect"]>;
+    readonly onSearchResultSelect: PropType<HeaderActionsProps["onSearchResultSelect"]>;
 };
 declare const _default: import("vue").DefineComponent<{
     readonly langOptions: {
-        readonly type: PropType<LangOption[]>;
+        readonly type: PropType<HeaderActionsProps["langOptions"]>;
         readonly required: true;
     };
     readonly currentLang: {
-        readonly type: PropType<LangOption>;
+        readonly type: PropType<HeaderActionsProps["currentLang"]>;
         readonly required: true;
     };
     readonly mergedClsPrefix: {
-        readonly type: StringConstructor;
+        readonly type: PropType<HeaderActionsProps["mergedClsPrefix"]>;
         readonly required: true;
     };
     readonly responsive: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<HeaderActionsProps["responsive"]>;
         readonly default: false;
     };
     readonly isMobile: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<HeaderActionsProps["isMobile"]>;
         readonly default: false;
     };
     readonly mobileActionsCollapse: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<HeaderActionsProps["mobileActionsCollapse"]>;
         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 actionsVisibility: {
+        readonly type: PropType<HeaderActionsProps["actionsVisibility"]>;
+        readonly required: false;
+    };
+    readonly cssVars: PropType<HeaderActionsProps["cssVars"]>;
+    readonly onSearch: PropType<HeaderActionsProps["onSearch"]>;
+    readonly onPreview: PropType<HeaderActionsProps["onPreview"]>;
+    readonly onLogout: PropType<HeaderActionsProps["onLogout"]>;
+    readonly onLanguageSelect: PropType<HeaderActionsProps["onLanguageSelect"]>;
+    readonly onSearchResultSelect: PropType<HeaderActionsProps["onSearchResultSelect"]>;
 }, {
     searchVisible: import("vue").Ref<boolean>;
     searchValue: import("vue").Ref<string>;
@@ -70,7 +78,7 @@ declare const _default: import("vue").DefineComponent<{
         key: string | number;
         label: string;
         description?: string | undefined;
-        icon?: (() => import("vue").VNodeChild) | undefined;
+        icon?: (() => VNodeChild) | undefined;
         extra?: string | undefined;
         onClick?: (() => void) | undefined;
         disabled?: boolean | undefined;
@@ -83,38 +91,42 @@ declare const _default: import("vue").DefineComponent<{
     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 type: PropType<HeaderActionsProps["langOptions"]>;
         readonly required: true;
     };
     readonly currentLang: {
-        readonly type: PropType<LangOption>;
+        readonly type: PropType<HeaderActionsProps["currentLang"]>;
         readonly required: true;
     };
     readonly mergedClsPrefix: {
-        readonly type: StringConstructor;
+        readonly type: PropType<HeaderActionsProps["mergedClsPrefix"]>;
         readonly required: true;
     };
     readonly responsive: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<HeaderActionsProps["responsive"]>;
         readonly default: false;
     };
     readonly isMobile: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<HeaderActionsProps["isMobile"]>;
         readonly default: false;
     };
     readonly mobileActionsCollapse: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<HeaderActionsProps["mobileActionsCollapse"]>;
         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 actionsVisibility: {
+        readonly type: PropType<HeaderActionsProps["actionsVisibility"]>;
+        readonly required: false;
+    };
+    readonly cssVars: PropType<HeaderActionsProps["cssVars"]>;
+    readonly onSearch: PropType<HeaderActionsProps["onSearch"]>;
+    readonly onPreview: PropType<HeaderActionsProps["onPreview"]>;
+    readonly onLogout: PropType<HeaderActionsProps["onLogout"]>;
+    readonly onLanguageSelect: PropType<HeaderActionsProps["onLanguageSelect"]>;
+    readonly onSearchResultSelect: PropType<HeaderActionsProps["onSearchResultSelect"]>;
 }>>, {
-    readonly responsive: boolean;
-    readonly isMobile: boolean;
-    readonly mobileActionsCollapse: boolean;
+    readonly responsive: boolean | undefined;
+    readonly isMobile: boolean | undefined;
+    readonly mobileActionsCollapse: boolean | undefined;
 }, {}>;
 export default _default;

package/lib/header/src/HeaderActions.js

@@ -46,6 +46,10 @@ exports.headerActionsProps = {
         type: Boolean,
         default: true
     },
+    actionsVisibility: {
+        type: Object,
+        required: false
+    },
     cssVars: Object,
     onSearch: Function,
     onPreview: Function,
@@ -122,51 +126,76 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
+        const { $slots } = this;
         const blockClass = `${this.mergedClsPrefix}-header`;
         if (this.responsive && this.isMobile && this.mobileActionsCollapse) {
             return ((0, vue_1.h)("div", { class: `${blockClass}__actions` },
-                (0, vue_1.h)(flex_1.UFlex, { size: 32 }, { default: () => { var _a, _b; return (_b = (_a = this.$slots).mobile) === null || _b === void 0 ? void 0 : _b.call(_a); } })));
+                (0, vue_1.h)(flex_1.UFlex, { size: 32 }, { default: () => { var _a; return (_a = $slots.mobile) === null || _a === void 0 ? void 0 : _a.call($slots); } })));
         }
+        const langNode = () => {
+            var _a;
+            if (((_a = this.actionsVisibility) === null || _a === void 0 ? void 0 : _a.lang) === false)
+                return null;
+            return $slots.lang ? ($slots.lang()) : ((0, vue_1.h)(dropdown_1.UDropdown, { options: this.langOptions, onSelect: this.onLanguageSelect }, {
+                default: () => ((0, vue_1.h)(button_1.UButton, { "icon-placement": "right", text: true, renderIcon: () => ((0, vue_1.h)(icon_1.UIcon, null, { default: () => (0, vue_1.h)(icons_1.ChevronDownOutline, null) })) }, {
+                    default: () => {
+                        var _a, _b, _c;
+                        return ((0, vue_1.h)("span", { class: `${blockClass}__lang-trigger` },
+                            (0, vue_1.h)("span", { class: `${blockClass}__lang-icon` }, (_b = (_a = this.currentLang) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.call(_a)),
+                            (0, vue_1.h)("span", null, (_c = this.currentLang) === null || _c === void 0 ? void 0 : _c.label)));
+                    }
+                }))
+            }));
+        };
+        const searchNode = () => {
+            var _a;
+            if (((_a = this.actionsVisibility) === null || _a === void 0 ? void 0 : _a.search) === false)
+                return null;
+            return $slots.search ? ($slots.search()) : ((0, vue_1.h)("div", { class: `${blockClass}__search-wrapper` },
+                (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.handleSearchClick }, {
+                    default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, { default: () => (0, vue_1.h)(icons_1.SearchIcon, null) }))
+                }),
+                (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up" }, {
+                    default: () => this.searchVisible
+                        ? (0, vue_1.h)(HeaderSearchDesktop_1.default, {
+                            searchValue: this.searchValue,
+                            searchResults: this.searchResults,
+                            searchLoading: this.searchLoading,
+                            mergedClsPrefix: this.mergedClsPrefix,
+                            cssVars: this.cssVars,
+                            onSearchInput: this.handleSearchInput,
+                            onSearchClose: this.handleSearchClose,
+                            onSearchSubmit: () => {
+                                void this.handleSearch();
+                            },
+                            onResultSelect: this.handleResultSelect
+                        })
+                        : null
+                })));
+        };
+        const accessibilityNode = () => {
+            var _a;
+            if (((_a = this.actionsVisibility) === null || _a === void 0 ? void 0 : _a.accessibility) === false)
+                return null;
+            return $slots.accessibility ? ($slots.accessibility()) : ((0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onPreview }, {
+                default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, { default: () => (0, vue_1.h)(icons_1.EyeIcon, null) }))
+            }));
+        };
+        const logoutNode = () => {
+            var _a;
+            if (((_a = this.actionsVisibility) === null || _a === void 0 ? void 0 : _a.logout) === false)
+                return null;
+            return $slots.logout ? ($slots.logout()) : ((0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onLogout }, {
+                default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, { default: () => (0, vue_1.h)(icons_1.LogoutIcon, null) }))
+            }));
+        };
         return ((0, vue_1.h)("div", { class: `${blockClass}__actions` },
             (0, vue_1.h)(flex_1.UFlex, { class: `${blockClass}__actions-block`, size: 32 }, {
                 default: () => ((0, vue_1.h)(vue_1.Fragment, null,
-                    (0, vue_1.h)(dropdown_1.UDropdown, { options: this.langOptions, onSelect: this.onLanguageSelect }, {
-                        default: () => ((0, vue_1.h)(button_1.UButton, { "icon-placement": "right", text: true, renderIcon: () => ((0, vue_1.h)(icon_1.UIcon, null, { default: () => (0, vue_1.h)(icons_1.ChevronDownOutline, null) })) }, {
-                            default: () => {
-                                var _a, _b, _c;
-                                return ((0, vue_1.h)("span", { class: `${blockClass}__lang-trigger` },
-                                    (0, vue_1.h)("span", { class: `${blockClass}__lang-icon` }, (_b = (_a = this.currentLang) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.call(_a)),
-                                    (0, vue_1.h)("span", null, (_c = this.currentLang) === null || _c === void 0 ? void 0 : _c.label)));
-                            }
-                        }))
-                    }),
-                    (0, vue_1.h)("div", { class: `${blockClass}__search-wrapper` },
-                        (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.handleSearchClick }, {
-                            default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, { default: () => (0, vue_1.h)(icons_1.SearchIcon, null) }))
-                        }),
-                        (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up" }, {
-                            default: () => this.searchVisible
-                                ? (0, vue_1.h)(HeaderSearchDesktop_1.default, {
-                                    searchValue: this.searchValue,
-                                    searchResults: this.searchResults,
-                                    searchLoading: this.searchLoading,
-                                    mergedClsPrefix: this.mergedClsPrefix,
-                                    cssVars: this.cssVars,
-                                    onSearchInput: this.handleSearchInput,
-                                    onSearchClose: this.handleSearchClose,
-                                    onSearchSubmit: () => {
-                                        void this.handleSearch();
-                                    },
-                                    onResultSelect: this.handleResultSelect
-                                })
-                                : null
-                        })),
-                    (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onPreview }, {
-                        default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, { default: () => (0, vue_1.h)(icons_1.EyeIcon, null) }))
-                    }),
-                    (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onLogout }, {
-                        default: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, { default: () => (0, vue_1.h)(icons_1.LogoutIcon, null) }))
-                    })))
+                    langNode(),
+                    searchNode(),
+                    accessibilityNode(),
+                    logoutNode()))
             })));
     }
 });