@uzum-tech/ui 1.11.2 → 1.12.1

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

@@ -0,0 +1,604 @@
+import { type PropType, type ExtractPropTypes, ComputedRef } from 'vue';
+import { type MaybeArray } from '../../_utils';
+import type { HeaderProps as HeaderPropsInterface, HeaderMenuOption, LangOption, HeaderSearchResult } from './interface';
+export type HeaderSetupProps = ExtractPropTypes<typeof headerProps>;
+export type HeaderProps = Partial<HeaderSetupProps>;
+export declare const headerProps: {
+    menuOptions: {
+        type: PropType<HeaderPropsInterface["menuOptions"]>;
+        default: () => never[];
+    };
+    langOptions: {
+        type: PropType<HeaderPropsInterface["langOptions"]>;
+        default: () => LangOption[];
+    };
+    defaultLang: PropType<HeaderPropsInterface["defaultLang"]>;
+    menuPlacement: {
+        type: PropType<HeaderPropsInterface["menuPlacement"]>;
+        default: string;
+    };
+    menuTrigger: {
+        type: PropType<HeaderPropsInterface["menuTrigger"]>;
+        default: string;
+    };
+    menuValue: PropType<HeaderPropsInterface["menuValue"]>;
+    defaultMenuValue: PropType<HeaderPropsInterface["defaultMenuValue"]>;
+    menuTabsProps: {
+        type: PropType<HeaderPropsInterface["menuTabsProps"]>;
+        default: () => {};
+    };
+    menuCardMinColumnWidth: {
+        type: PropType<HeaderPropsInterface["menuCardMinColumnWidth"]>;
+        default: number;
+    };
+    logoSrc: {
+        type: PropType<HeaderPropsInterface["logoSrc"]>;
+        default: () => string;
+    };
+    logoAlt: {
+        type: PropType<HeaderPropsInterface["logoAlt"]>;
+        default: string;
+    };
+    responsive: {
+        type: PropType<HeaderPropsInterface["responsive"]>;
+        default: boolean;
+    };
+    mobileMenuType: {
+        type: PropType<"drawer" | "dropdown">;
+        default: string;
+    };
+    mobileActionsCollapse: {
+        type: PropType<HeaderPropsInterface["mobileActionsCollapse"]>;
+        default: boolean;
+    };
+    mobileShowFooterActions: {
+        type: PropType<HeaderPropsInterface["mobileShowFooterActions"]>;
+        default: boolean;
+    };
+    mobilePrimaryActionText: {
+        type: PropType<HeaderPropsInterface["mobilePrimaryActionText"]>;
+        default: undefined;
+    };
+    mobileSecondaryActionText: {
+        type: PropType<HeaderPropsInterface["mobileSecondaryActionText"]>;
+        default: undefined;
+    };
+    mobileShowHeaderActions: {
+        type: PropType<HeaderPropsInterface["mobileShowHeaderActions"]>;
+        default: boolean;
+    };
+    onSearch: PropType<HeaderPropsInterface["onSearch"]>;
+    'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
+    onUpdateMenuValue: PropType<MaybeArray<HeaderPropsInterface["onUpdateMenuValue"]>>;
+    theme: PropType<import("../../_mixins").Theme<"Header", {
+        fontSize: string;
+        fontBodyLarge: string;
+        fontTitleSmall: string;
+        backgroundColor: string;
+        textColor: string;
+        mutedTextColor: string;
+        borderRadius: string;
+        shadow: string;
+        navigationGap: string;
+        actionGap: string;
+        tabTextColor: string;
+        tabTextColorHover: string;
+        tabTextColorActive: string;
+        tabIndicatorColor: string;
+        cardBackgroundColor: string;
+        cardShadow: string;
+        cardBorderRadius: string;
+        cardTitleColor: string;
+        cardItemColor: string;
+        cardItemHoverColor: string;
+        cardDividerColor: string;
+        cardGap: string;
+        cardPadding: string;
+        badgeBackgroundColor: string;
+        badgeTextColor: string;
+        actionIconColor: string;
+        actionIconColorHover: string;
+        mobileBorderColor: string;
+        mobileItemHoverColor: string;
+        mobileItemPressedColor: string;
+        mobileItemActiveColor: string;
+        mobileGroupItemColor: string;
+    }, unknown>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Header", {
+        fontSize: string;
+        fontBodyLarge: string;
+        fontTitleSmall: string;
+        backgroundColor: string;
+        textColor: string;
+        mutedTextColor: string;
+        borderRadius: string;
+        shadow: string;
+        navigationGap: string;
+        actionGap: string;
+        tabTextColor: string;
+        tabTextColorHover: string;
+        tabTextColorActive: string;
+        tabIndicatorColor: string;
+        cardBackgroundColor: string;
+        cardShadow: string;
+        cardBorderRadius: string;
+        cardTitleColor: string;
+        cardItemColor: string;
+        cardItemHoverColor: string;
+        cardDividerColor: string;
+        cardGap: string;
+        cardPadding: string;
+        badgeBackgroundColor: string;
+        badgeTextColor: string;
+        actionIconColor: string;
+        actionIconColorHover: string;
+        mobileBorderColor: string;
+        mobileItemHoverColor: string;
+        mobileItemPressedColor: string;
+        mobileItemActiveColor: string;
+        mobileGroupItemColor: string;
+    }, unknown>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Header", {
+        fontSize: string;
+        fontBodyLarge: string;
+        fontTitleSmall: string;
+        backgroundColor: string;
+        textColor: string;
+        mutedTextColor: string;
+        borderRadius: string;
+        shadow: string;
+        navigationGap: string;
+        actionGap: string;
+        tabTextColor: string;
+        tabTextColorHover: string;
+        tabTextColorActive: string;
+        tabIndicatorColor: string;
+        cardBackgroundColor: string;
+        cardShadow: string;
+        cardBorderRadius: string;
+        cardTitleColor: string;
+        cardItemColor: string;
+        cardItemHoverColor: string;
+        cardDividerColor: string;
+        cardGap: string;
+        cardPadding: string;
+        badgeBackgroundColor: string;
+        badgeTextColor: string;
+        actionIconColor: string;
+        actionIconColorHover: string;
+        mobileBorderColor: string;
+        mobileItemHoverColor: string;
+        mobileItemPressedColor: string;
+        mobileItemActiveColor: string;
+        mobileGroupItemColor: string;
+    }, unknown>>>;
+};
+declare const _default: import("vue").DefineComponent<{
+    menuOptions: {
+        type: PropType<HeaderPropsInterface["menuOptions"]>;
+        default: () => never[];
+    };
+    langOptions: {
+        type: PropType<HeaderPropsInterface["langOptions"]>;
+        default: () => LangOption[];
+    };
+    defaultLang: PropType<HeaderPropsInterface["defaultLang"]>;
+    menuPlacement: {
+        type: PropType<HeaderPropsInterface["menuPlacement"]>;
+        default: string;
+    };
+    menuTrigger: {
+        type: PropType<HeaderPropsInterface["menuTrigger"]>;
+        default: string;
+    };
+    menuValue: PropType<HeaderPropsInterface["menuValue"]>;
+    defaultMenuValue: PropType<HeaderPropsInterface["defaultMenuValue"]>;
+    menuTabsProps: {
+        type: PropType<HeaderPropsInterface["menuTabsProps"]>;
+        default: () => {};
+    };
+    menuCardMinColumnWidth: {
+        type: PropType<HeaderPropsInterface["menuCardMinColumnWidth"]>;
+        default: number;
+    };
+    logoSrc: {
+        type: PropType<HeaderPropsInterface["logoSrc"]>;
+        default: () => string;
+    };
+    logoAlt: {
+        type: PropType<HeaderPropsInterface["logoAlt"]>;
+        default: string;
+    };
+    responsive: {
+        type: PropType<HeaderPropsInterface["responsive"]>;
+        default: boolean;
+    };
+    mobileMenuType: {
+        type: PropType<"drawer" | "dropdown">;
+        default: string;
+    };
+    mobileActionsCollapse: {
+        type: PropType<HeaderPropsInterface["mobileActionsCollapse"]>;
+        default: boolean;
+    };
+    mobileShowFooterActions: {
+        type: PropType<HeaderPropsInterface["mobileShowFooterActions"]>;
+        default: boolean;
+    };
+    mobilePrimaryActionText: {
+        type: PropType<HeaderPropsInterface["mobilePrimaryActionText"]>;
+        default: undefined;
+    };
+    mobileSecondaryActionText: {
+        type: PropType<HeaderPropsInterface["mobileSecondaryActionText"]>;
+        default: undefined;
+    };
+    mobileShowHeaderActions: {
+        type: PropType<HeaderPropsInterface["mobileShowHeaderActions"]>;
+        default: boolean;
+    };
+    onSearch: PropType<HeaderPropsInterface["onSearch"]>;
+    'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
+    onUpdateMenuValue: PropType<MaybeArray<HeaderPropsInterface["onUpdateMenuValue"]>>;
+    theme: PropType<import("../../_mixins").Theme<"Header", {
+        fontSize: string;
+        fontBodyLarge: string;
+        fontTitleSmall: string;
+        backgroundColor: string;
+        textColor: string;
+        mutedTextColor: string;
+        borderRadius: string;
+        shadow: string;
+        navigationGap: string;
+        actionGap: string;
+        tabTextColor: string;
+        tabTextColorHover: string;
+        tabTextColorActive: string;
+        tabIndicatorColor: string;
+        cardBackgroundColor: string;
+        cardShadow: string;
+        cardBorderRadius: string;
+        cardTitleColor: string;
+        cardItemColor: string;
+        cardItemHoverColor: string;
+        cardDividerColor: string;
+        cardGap: string;
+        cardPadding: string;
+        badgeBackgroundColor: string;
+        badgeTextColor: string;
+        actionIconColor: string;
+        actionIconColorHover: string;
+        mobileBorderColor: string;
+        mobileItemHoverColor: string;
+        mobileItemPressedColor: string;
+        mobileItemActiveColor: string;
+        mobileGroupItemColor: string;
+    }, unknown>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Header", {
+        fontSize: string;
+        fontBodyLarge: string;
+        fontTitleSmall: string;
+        backgroundColor: string;
+        textColor: string;
+        mutedTextColor: string;
+        borderRadius: string;
+        shadow: string;
+        navigationGap: string;
+        actionGap: string;
+        tabTextColor: string;
+        tabTextColorHover: string;
+        tabTextColorActive: string;
+        tabIndicatorColor: string;
+        cardBackgroundColor: string;
+        cardShadow: string;
+        cardBorderRadius: string;
+        cardTitleColor: string;
+        cardItemColor: string;
+        cardItemHoverColor: string;
+        cardDividerColor: string;
+        cardGap: string;
+        cardPadding: string;
+        badgeBackgroundColor: string;
+        badgeTextColor: string;
+        actionIconColor: string;
+        actionIconColorHover: string;
+        mobileBorderColor: string;
+        mobileItemHoverColor: string;
+        mobileItemPressedColor: string;
+        mobileItemActiveColor: string;
+        mobileGroupItemColor: string;
+    }, unknown>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Header", {
+        fontSize: string;
+        fontBodyLarge: string;
+        fontTitleSmall: string;
+        backgroundColor: string;
+        textColor: string;
+        mutedTextColor: string;
+        borderRadius: string;
+        shadow: string;
+        navigationGap: string;
+        actionGap: string;
+        tabTextColor: string;
+        tabTextColorHover: string;
+        tabTextColorActive: string;
+        tabIndicatorColor: string;
+        cardBackgroundColor: string;
+        cardShadow: string;
+        cardBorderRadius: string;
+        cardTitleColor: string;
+        cardItemColor: string;
+        cardItemHoverColor: string;
+        cardDividerColor: string;
+        cardGap: string;
+        cardPadding: string;
+        badgeBackgroundColor: string;
+        badgeTextColor: string;
+        actionIconColor: string;
+        actionIconColorHover: string;
+        mobileBorderColor: string;
+        mobileItemHoverColor: string;
+        mobileItemPressedColor: string;
+        mobileItemActiveColor: string;
+        mobileGroupItemColor: string;
+    }, unknown>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    cssVars: ComputedRef<{
+        '--u-bezier': string;
+        '--u-font-size': string;
+        '--u-font-title-small': string;
+        '--u-header-text-color': string;
+        '--u-header-bg-color': string;
+        '--u-header-radius': string;
+        '--u-header-shadow': string;
+        '--u-header-navigation-gap': string;
+        '--u-header-action-gap': string;
+        '--u-header-tab-text-color': string;
+        '--u-header-tab-text-color-hover': string;
+        '--u-header-tab-text-color-active': string;
+        '--u-header-tab-indicator-color': string;
+        '--u-header-card-bg-color': string;
+        '--u-header-card-radius': string;
+        '--u-header-card-title-color': string;
+        '--u-header-card-item-color': string;
+        '--u-header-card-item-hover-color': string;
+        '--u-header-card-divider-color': string;
+        '--u-header-card-gap': string;
+        '--u-header-card-padding': string;
+        '--u-header-badge-bg-color': string;
+        '--u-header-badge-text-color': string;
+        '--u-header-action-icon-color': string;
+        '--u-header-action-icon-hover-color': string;
+        '--u-header-card-min-col-width': string | undefined;
+        '--u-header-mobile-border-color': string;
+        '--u-header-mobile-item-hover-color': string;
+        '--u-header-mobile-item-pressed-color': string;
+        '--u-header-mobile-item-active-color': string;
+        '--u-header-mobile-group-item-color': string;
+    }>;
+    themeClass: import("vue").Ref<string>;
+    normalizedMenuItems: ComputedRef<{
+        option: HeaderMenuOption;
+        key: string | number;
+    }[] | undefined>;
+    mergedMenuValue: ComputedRef<string | number | null>;
+    currentLang: import("vue").Ref<{
+        label: string | (() => import("vue").VNodeChild);
+        key: string | number;
+        icon?: (() => import("vue").VNodeChild) | undefined;
+    }>;
+    isMobile: ComputedRef<boolean>;
+    mobileMenuVisible: import("vue").Ref<boolean>;
+    searchVisible: import("vue").Ref<boolean>;
+    handleSelectLang: (key: string | number) => void;
+    handleMenuValueUpdate: (value: string | number | null) => void;
+    handleSearchClick: () => void;
+    handleSearchClose: () => void;
+    handleSearch: (query: string) => Promise<HeaderSearchResult[]>;
+    handleSearchResultSelect: (result: HeaderSearchResult) => void;
+    handlePreviewClick: () => void;
+    handleLogoutClick: () => void;
+    toggleMobileMenu: () => void;
+    closeMobileMenu: () => void;
+    handleMobileMenuItemClick: (option: HeaderMenuOption) => void;
+    handleMobilePrimaryAction: () => void;
+    handleMobileSecondaryAction: () => void;
+    menuPaneClass: ComputedRef<string>;
+    menuPaneWrapperClass: ComputedRef<string>;
+    onRender: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ["search", "search-result-select", "preview", "logout", "language-select", "mobile-primary-action", "mobile-secondary-action"], "search" | "logout" | "preview" | "search-result-select" | "language-select" | "mobile-primary-action" | "mobile-secondary-action", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    menuOptions: {
+        type: PropType<HeaderPropsInterface["menuOptions"]>;
+        default: () => never[];
+    };
+    langOptions: {
+        type: PropType<HeaderPropsInterface["langOptions"]>;
+        default: () => LangOption[];
+    };
+    defaultLang: PropType<HeaderPropsInterface["defaultLang"]>;
+    menuPlacement: {
+        type: PropType<HeaderPropsInterface["menuPlacement"]>;
+        default: string;
+    };
+    menuTrigger: {
+        type: PropType<HeaderPropsInterface["menuTrigger"]>;
+        default: string;
+    };
+    menuValue: PropType<HeaderPropsInterface["menuValue"]>;
+    defaultMenuValue: PropType<HeaderPropsInterface["defaultMenuValue"]>;
+    menuTabsProps: {
+        type: PropType<HeaderPropsInterface["menuTabsProps"]>;
+        default: () => {};
+    };
+    menuCardMinColumnWidth: {
+        type: PropType<HeaderPropsInterface["menuCardMinColumnWidth"]>;
+        default: number;
+    };
+    logoSrc: {
+        type: PropType<HeaderPropsInterface["logoSrc"]>;
+        default: () => string;
+    };
+    logoAlt: {
+        type: PropType<HeaderPropsInterface["logoAlt"]>;
+        default: string;
+    };
+    responsive: {
+        type: PropType<HeaderPropsInterface["responsive"]>;
+        default: boolean;
+    };
+    mobileMenuType: {
+        type: PropType<"drawer" | "dropdown">;
+        default: string;
+    };
+    mobileActionsCollapse: {
+        type: PropType<HeaderPropsInterface["mobileActionsCollapse"]>;
+        default: boolean;
+    };
+    mobileShowFooterActions: {
+        type: PropType<HeaderPropsInterface["mobileShowFooterActions"]>;
+        default: boolean;
+    };
+    mobilePrimaryActionText: {
+        type: PropType<HeaderPropsInterface["mobilePrimaryActionText"]>;
+        default: undefined;
+    };
+    mobileSecondaryActionText: {
+        type: PropType<HeaderPropsInterface["mobileSecondaryActionText"]>;
+        default: undefined;
+    };
+    mobileShowHeaderActions: {
+        type: PropType<HeaderPropsInterface["mobileShowHeaderActions"]>;
+        default: boolean;
+    };
+    onSearch: PropType<HeaderPropsInterface["onSearch"]>;
+    'onUpdate:menuValue': PropType<MaybeArray<(value: string | number | null) => void>>;
+    onUpdateMenuValue: PropType<MaybeArray<HeaderPropsInterface["onUpdateMenuValue"]>>;
+    theme: PropType<import("../../_mixins").Theme<"Header", {
+        fontSize: string;
+        fontBodyLarge: string;
+        fontTitleSmall: string;
+        backgroundColor: string;
+        textColor: string;
+        mutedTextColor: string;
+        borderRadius: string;
+        shadow: string;
+        navigationGap: string;
+        actionGap: string;
+        tabTextColor: string;
+        tabTextColorHover: string;
+        tabTextColorActive: string;
+        tabIndicatorColor: string;
+        cardBackgroundColor: string;
+        cardShadow: string;
+        cardBorderRadius: string;
+        cardTitleColor: string;
+        cardItemColor: string;
+        cardItemHoverColor: string;
+        cardDividerColor: string;
+        cardGap: string;
+        cardPadding: string;
+        badgeBackgroundColor: string;
+        badgeTextColor: string;
+        actionIconColor: string;
+        actionIconColorHover: string;
+        mobileBorderColor: string;
+        mobileItemHoverColor: string;
+        mobileItemPressedColor: string;
+        mobileItemActiveColor: string;
+        mobileGroupItemColor: string;
+    }, unknown>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Header", {
+        fontSize: string;
+        fontBodyLarge: string;
+        fontTitleSmall: string;
+        backgroundColor: string;
+        textColor: string;
+        mutedTextColor: string;
+        borderRadius: string;
+        shadow: string;
+        navigationGap: string;
+        actionGap: string;
+        tabTextColor: string;
+        tabTextColorHover: string;
+        tabTextColorActive: string;
+        tabIndicatorColor: string;
+        cardBackgroundColor: string;
+        cardShadow: string;
+        cardBorderRadius: string;
+        cardTitleColor: string;
+        cardItemColor: string;
+        cardItemHoverColor: string;
+        cardDividerColor: string;
+        cardGap: string;
+        cardPadding: string;
+        badgeBackgroundColor: string;
+        badgeTextColor: string;
+        actionIconColor: string;
+        actionIconColorHover: string;
+        mobileBorderColor: string;
+        mobileItemHoverColor: string;
+        mobileItemPressedColor: string;
+        mobileItemActiveColor: string;
+        mobileGroupItemColor: string;
+    }, unknown>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Header", {
+        fontSize: string;
+        fontBodyLarge: string;
+        fontTitleSmall: string;
+        backgroundColor: string;
+        textColor: string;
+        mutedTextColor: string;
+        borderRadius: string;
+        shadow: string;
+        navigationGap: string;
+        actionGap: string;
+        tabTextColor: string;
+        tabTextColorHover: string;
+        tabTextColorActive: string;
+        tabIndicatorColor: string;
+        cardBackgroundColor: string;
+        cardShadow: string;
+        cardBorderRadius: string;
+        cardTitleColor: string;
+        cardItemColor: string;
+        cardItemHoverColor: string;
+        cardDividerColor: string;
+        cardGap: string;
+        cardPadding: string;
+        badgeBackgroundColor: string;
+        badgeTextColor: string;
+        actionIconColor: string;
+        actionIconColorHover: string;
+        mobileBorderColor: string;
+        mobileItemHoverColor: string;
+        mobileItemPressedColor: string;
+        mobileItemActiveColor: string;
+        mobileGroupItemColor: string;
+    }, unknown>>>;
+}>> & {
+    onSearch?: ((...args: any[]) => any) | undefined;
+    onPreview?: ((...args: any[]) => any) | undefined;
+    onLogout?: ((...args: any[]) => any) | undefined;
+    "onSearch-result-select"?: ((...args: any[]) => any) | undefined;
+    "onLanguage-select"?: ((...args: any[]) => any) | undefined;
+    "onMobile-primary-action"?: ((...args: any[]) => any) | undefined;
+    "onMobile-secondary-action"?: ((...args: any[]) => any) | undefined;
+}, {
+    responsive: boolean | undefined;
+    menuOptions: HeaderMenuOption[] | undefined;
+    langOptions: LangOption[] | undefined;
+    menuPlacement: import("./interface").HeaderMenuPlacement | undefined;
+    menuTrigger: import("./interface").HeaderMenuTrigger | undefined;
+    menuTabsProps: Partial<import("../..").TabsProps> | undefined;
+    menuCardMinColumnWidth: string | number | undefined;
+    logoSrc: string | undefined;
+    logoAlt: string | undefined;
+    mobileActionsCollapse: boolean | undefined;
+    mobileShowFooterActions: boolean | undefined;
+    mobilePrimaryActionText: string | undefined;
+    mobileSecondaryActionText: string | undefined;
+    mobileShowHeaderActions: boolean | undefined;
+    mobileMenuType: "drawer" | "dropdown";
+}, {}>;
+export default _default;