@uzum-tech/ui 1.11.2 → 1.12.0

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

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerMobileProps = void 0;
+const vue_1 = require("vue");
+const button_1 = require("../../../button");
+const icon_1 = require("../../../icon");
+const drawer_1 = require("../../../drawer");
+const dropdown_1 = require("../../../dropdown");
+const icons_1 = require("../../../_internal/icons");
+const flex_1 = require("../../../flex");
+const utils_1 = require("../utils");
+const _mixins_1 = require("../../../_mixins");
+exports.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
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'HeaderMobile',
+    props: exports.headerMobileProps,
+    setup(props) {
+        const { localeRef } = (0, _mixins_1.useLocale)('Header');
+        const blockClassRef = (0, vue_1.computed)(() => `${props.mergedClsPrefix}-header`);
+        const mobileMenuClassRef = (0, vue_1.computed)(() => `${props.mergedClsPrefix}-header-mobile-menu`);
+        const expandedKeysRef = (0, vue_1.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 = (0, vue_1.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 = (0, vue_1.computed)(() => { var _a; return (_a = props.primaryActionText) !== null && _a !== void 0 ? _a : localeRef.value.primaryActionText; });
+        const secondaryActionTextRef = (0, vue_1.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 ((0, vue_1.h)("div", { key: childKey, class: `${mobileMenuClass}__group` },
+                    (0, vue_1.h)("div", { class: `${mobileMenuClass}__group-title` }, (0, utils_1.renderOptionLabel)(child)),
+                    (0, vue_1.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 ((0, vue_1.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);
+                                }
+                            } },
+                            (0, vue_1.h)("span", { class: `${mobileMenuClass}__group-item-label` }, (0, utils_1.renderOptionLabel)(groupChild)),
+                            (0, utils_1.renderBadge)(groupChild, `${blockClass}__badge`)));
+                    }))));
+            }
+            return ((0, vue_1.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);
+                    }
+                } },
+                (0, vue_1.h)("span", { class: `${mobileMenuClass}__child-item-label` }, (0, utils_1.renderOptionLabel)(child)),
+                (0, utils_1.renderBadge)(child, `${blockClass}__badge`)));
+        };
+        const renderMobileMenuItem = (item) => {
+            const option = item.option;
+            const isExpandable = (0, utils_1.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 ((0, vue_1.h)("div", { key: item.key },
+                (0, vue_1.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 ? ((0, vue_1.h)("span", { class: `${mobileMenuClass}__item-icon` }, typeof option.icon === 'function'
+                        ? option.icon()
+                        : option.icon)) : null,
+                    (0, vue_1.h)("span", { class: `${mobileMenuClass}__item-label` }, (0, utils_1.renderOptionLabel)(option)),
+                    (0, utils_1.renderBadge)(option, `${blockClass}__badge`)),
+                isExpandable && isExpanded && option.children && ((0, vue_1.h)("div", { class: `${mobileMenuClass}__children` }, option.children.map((child, index) => renderGroupItem(child, item.key, index))))));
+        };
+        const mobileMenuContent = ((0, vue_1.h)("div", { class: mobileMenuClass, style: this.cssVars },
+            (0, vue_1.h)("div", { class: `${mobileMenuClass}__header` },
+                this.$slots.actions ? ((0, vue_1.h)("div", { class: `${mobileMenuClass}__actions` }, this.$slots.actions())) : this.showHeaderActions ? ((0, vue_1.h)("div", { class: `${mobileMenuClass}__actions` },
+                    (0, vue_1.h)(dropdown_1.UDropdown, { trigger: "click", options: this.langOptions, onSelect: this.onLanguageSelect }, {
+                        default: () => ((0, vue_1.h)(button_1.UButton, { text: true, size: "small", renderIcon: () => ((0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.ChevronDownIcon, null))), iconPlacement: "right" }, {
+                            default: () => ((0, vue_1.h)(flex_1.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) ? ((0, vue_1.h)(vue_1.Fragment, null,
+                                        (0, vue_1.h)(flex_1.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); }
+                                        }),
+                                        (0, vue_1.h)("span", null, (_b = this.currentLang) === null || _b === void 0 ? void 0 : _b.label))) : null;
+                                }
+                            }))
+                        }))
+                    }),
+                    (0, vue_1.h)(flex_1.UFlex, { size: 24 }, {
+                        default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                            (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onSearchClick }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.SearchIcon, null))),
+                            (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onPreview }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.EyeIcon, null))),
+                            (0, vue_1.h)(button_1.UButton, { text: true, onClick: this.onLogout }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.LogoutIcon, null)))))
+                    }))) : null,
+                (0, vue_1.h)(button_1.UButton, { text: true, class: `${mobileMenuClass}__close`, onClick: this.onClose }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.CloseIcon, null)))),
+            (0, vue_1.h)("div", { class: `${mobileMenuClass}__body` },
+                (0, vue_1.h)("div", { class: `${mobileMenuClass}__list` }, this.normalizeMobileMenuOptions.map(renderMobileMenuItem))),
+            this.$slots.footer ? ((0, vue_1.h)("div", { class: `${mobileMenuClass}__footer` }, this.$slots.footer())) : this.showFooterActions ? ((0, vue_1.h)("div", { class: `${mobileMenuClass}__footer` },
+                (0, vue_1.h)(button_1.UButton, { type: "primary", size: "large", block: true, round: true, onClick: this.onPrimaryAction }, () => this.primaryActionTextRef),
+                (0, vue_1.h)(button_1.UButton, { size: "large", block: true, round: true, onClick: this.onSecondaryAction }, () => this.secondaryActionTextRef))) : null));
+        const burgerButton = ((0, vue_1.h)(button_1.UButton, { text: true, class: `${blockClass}__burger`, onClick: this.onToggle }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.BurgerMenuIcon, null))));
+        return ((0, vue_1.h)(flex_1.UFlex, null, {
+            default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                burgerButton,
+                this.menuType === 'drawer' ? ((0, vue_1.h)(drawer_1.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))
+        }));
+    }
+});

package/lib/header/src/styles/index.cssr.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("css-render").CNode;
+export default _default;
+export declare const headerMobileMenuStyle: import("css-render").CNode;
+export declare const headerSearchMobileStyle: import("css-render").CNode;
+export declare const headerSearchDesktopStyle: import("css-render").CNode;
+export declare const headerSearchResultsStyle: import("css-render").CNode;