@uzum-tech/ui 1.11.2 → 1.12.0

package/lib/header/src/HeaderSearchMobile.js

@@ -0,0 +1,132 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerSearchMobileProps = void 0;
+const vue_1 = require("vue");
+const drawer_1 = require("../../drawer");
+const button_1 = require("../../button");
+const icon_1 = require("../../icon");
+const input_1 = require("../../input");
+const HeaderSearchResults_1 = __importDefault(require("./HeaderSearchResults"));
+const _mixins_1 = require("../../_mixins");
+const constants_1 = require("./constants");
+const icons_1 = require("../../_internal/icons");
+exports.headerSearchMobileProps = {
+    show: {
+        type: Boolean,
+        default: false
+    },
+    cssVars: {
+        type: Object,
+        default: () => ({})
+    },
+    mergedClsPrefix: {
+        type: String,
+        required: true
+    },
+    onClose: Function,
+    onSearch: Function,
+    onSearchResultSelect: Function
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'HeaderSearchMobile',
+    props: exports.headerSearchMobileProps,
+    setup(props) {
+        const { localeRef } = (0, _mixins_1.useLocale)('Header');
+        const searchValue = (0, vue_1.ref)('');
+        const searchResults = (0, vue_1.ref)([]);
+        const searchLoading = (0, vue_1.ref)(false);
+        const placeholder = (0, vue_1.computed)(() => localeRef.value.searchPlaceholder);
+        const handleSearch = () => __awaiter(this, void 0, void 0, function* () {
+            const query = searchValue.value.trim();
+            if (!query || !props.onSearch) {
+                searchResults.value = [];
+                return;
+            }
+            searchLoading.value = true;
+            try {
+                const results = yield props.onSearch(query);
+                searchResults.value = results;
+            }
+            catch (error) {
+                searchResults.value = [];
+            }
+            finally {
+                searchLoading.value = false;
+            }
+        });
+        const handleSearchInput = (value) => {
+            searchValue.value = value;
+        };
+        const handleClose = () => {
+            var _a;
+            searchValue.value = '';
+            searchResults.value = [];
+            searchLoading.value = false;
+            (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        };
+        const handleResultSelect = (result) => {
+            var _a;
+            (_a = props.onSearchResultSelect) === null || _a === void 0 ? void 0 : _a.call(props, result);
+            handleClose();
+        };
+        let searchTimeout = null;
+        (0, vue_1.watch)(searchValue, () => {
+            if (searchTimeout) {
+                clearTimeout(searchTimeout);
+            }
+            searchTimeout = setTimeout(() => {
+                void handleSearch();
+            }, constants_1.SEARCH_DEBOUNCE_MS);
+        });
+        return {
+            placeholder,
+            searchValue,
+            searchResults,
+            searchLoading,
+            handleSearchInput,
+            handleSearch,
+            handleClose,
+            handleResultSelect
+        };
+    },
+    render() {
+        const blockClass = `${this.mergedClsPrefix}-header-search-mobile`;
+        return ((0, vue_1.h)(drawer_1.UDrawer, { show: this.show, width: "84%", placement: "right", "auto-focus": false, onUpdateShow: (show) => {
+                if (!show) {
+                    this.handleClose();
+                }
+            } }, () => ((0, vue_1.h)("div", { class: blockClass, style: this.cssVars },
+            (0, vue_1.h)("div", { class: `${blockClass}__header` },
+                (0, vue_1.h)(button_1.UButton, { text: true, class: `${blockClass}__back`, onClick: this.handleClose }, () => (0, vue_1.h)(icon_1.UIcon, { size: 24 }, () => (0, vue_1.h)(icons_1.ChevronLeftIcon, null))),
+                (0, vue_1.h)("div", { class: `${blockClass}__input-wrapper` },
+                    (0, vue_1.h)(icon_1.UIcon, { size: 20, class: `${blockClass}__input-icon` }, () => (0, vue_1.h)(icons_1.SearchIcon, null)),
+                    (0, vue_1.h)(input_1.UInput, { value: this.searchValue, placeholder: this.placeholder, onKeyup: (e) => {
+                            if (e.key === 'Enter') {
+                                void this.handleSearch();
+                            }
+                        }, onUpdateValue: this.handleSearchInput }, {
+                        prefix: () => ((0, vue_1.h)(icon_1.UIcon, { size: 20 }, () => (0, vue_1.h)(icons_1.SearchIcon, null)))
+                    }))),
+            (0, vue_1.h)(HeaderSearchResults_1.default, {
+                version: 'mobile',
+                results: this.searchResults,
+                loading: this.searchLoading,
+                query: this.searchValue,
+                mergedClsPrefix: this.mergedClsPrefix,
+                cssVars: this.cssVars,
+                onSelect: this.handleResultSelect
+            })))));
+    }
+});

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

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerSearchResultsProps = void 0;
+const vue_1 = require("vue");
+const empty_1 = require("../../empty");
+const spin_1 = require("../../spin");
+const _mixins_1 = require("../../_mixins");
+exports.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
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'HeaderSearchResults',
+    props: exports.headerSearchResultsProps,
+    setup() {
+        const { localeRef } = (0, _mixins_1.useLocale)('Header');
+        const placeholder = (0, vue_1.computed)(() => localeRef.value.searchPlaceholder);
+        return {
+            placeholder
+        };
+    },
+    render() {
+        const blockClass = `${this.mergedClsPrefix}-header-search-results`;
+        const versionClass = `${blockClass}--${this.version}`;
+        if (this.loading) {
+            return ((0, vue_1.h)("div", { class: [blockClass, versionClass], style: this.cssVars },
+                (0, vue_1.h)("div", { class: `${blockClass}__loading` },
+                    (0, vue_1.h)(spin_1.USpin, { size: "small" }),
+                    (0, vue_1.h)("span", null, this.placeholder))));
+        }
+        if (!this.results.length && this.query) {
+            return ((0, vue_1.h)("div", { class: [blockClass, versionClass], style: this.cssVars },
+                (0, vue_1.h)("div", { class: `${blockClass}__empty` },
+                    (0, vue_1.h)(empty_1.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 ((0, vue_1.h)("div", { class: [blockClass, versionClass], style: this.cssVars },
+            (0, vue_1.h)("div", { class: `${blockClass}__list` }, this.results.map((result) => ((0, vue_1.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 ? ((0, vue_1.h)("span", { class: `${blockClass}__item-icon` }, typeof result.icon === 'function'
+                    ? result.icon()
+                    : result.icon)) : null,
+                (0, vue_1.h)("div", { class: `${blockClass}__item-content` },
+                    (0, vue_1.h)("div", { class: `${blockClass}__item-label` }, result.label),
+                    result.description ? ((0, vue_1.h)("div", { class: `${blockClass}__item-description` }, result.description)) : null),
+                result.extra ? ((0, vue_1.h)("span", { class: `${blockClass}__item-extra` }, result.extra)) : null))))));
+    }
+});

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

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

package/lib/header/src/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SEARCH_DEBOUNCE_MS = void 0;
+exports.SEARCH_DEBOUNCE_MS = 300;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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