@uzum-tech/ui 1.11.1 → 1.12.0

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

package/es/header/src/styles/index.cssr.js

@@ -0,0 +1,519 @@
+import { c, cB, cE, cM } from '../../../_utils/cssr';
+export default cB('header', `
+ width: 100%;
+ box-sizing: border-box;
+ font-size: var(--u-font-size);
+ color: var(--u-header-text-color);
+ display: flex;
+ justify-content: center;
+ background-color: var(--u-header-bg-color);
+ border-bottom: 1px solid var(--u-header-mobile-border-color);
+`, [cM('mobile', [cE('inner', `
+ height: 56px;
+ padding: 0px 16px;
+ gap: 12px;
+ justify-content: space-between;
+ width: 100%;
+ `), cE('logo', [c('img', `
+ max-height: 24px;
+ `)])]), cM('desktop', [cE('inner-wrapper', `
+ width: 1300px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--u-header-navigation-gap);
+ padding: 0;
+ position: relative;
+ height: 80px;
+ transition: height 0.3s var(--u-bezier), padding 0.3s var(--u-bezier);
+ `), cE('inner-left', `
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 60px;
+ height: 100%;
+ `)]), cE('inner', `
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ gap: var(--u-header-navigation-gap);
+ padding: 0;
+ position: relative;
+ height: 80px;
+ transition: height 0.3s var(--u-bezier), padding 0.3s var(--u-bezier);
+ `), cE('burger', `
+ padding: 0;
+ color: var(--u-header-action-icon-color);
+ `, [c('&:hover', `
+ color: var(--u-header-action-icon-hover-color);
+ `)]), cE('logo', `
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ min-height: 40px;
+ `, [c('img', `
+ display: block;
+ max-height: 32px;
+ width: auto;
+ `)]), cE('navigation', `
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ justify-content: center;
+ height: 100%;
+ `), cE('actions', `
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ gap: var(--u-header-action-gap);
+ flex-shrink: 0;
+ height: 100%;
+ `, [cE('actions-block', `
+ height: 100%;
+ `), cE('search-wrapper', `
+ position: relative;
+ display: flex;
+ align-items: center;
+ `), c('& .u-button', `
+ color: var(--u-header-action-icon-color);
+ padding: 0;
+ `, [c('&:hover', `
+ color: var(--u-header-action-icon-hover-color);
+ `)])]), cE('tabs', `
+ width: 100%;
+ height: 100%;
+ `, [c('& .u-tabs-nav-scroll-content', `
+ gap: 40px;
+ height: 100%;
+ `), c('& .u-tabs-nav-scroll-wrapper', `
+ flex: unset;
+ align-items: center;
+ `), c('& .u-tabs-nav', `
+ height: 100%;
+ `), c('& .u-tabs-tab', `
+ padding: 0;
+ color: var(--u-header-tab-text-color);
+ `), c('& .u-tabs-tab--active', `
+ color: var(--u-header-tab-text-color-active);
+ `), c('& .u-tabs-tab:hover', `
+ color: var(--u-header-tab-text-color-hover);
+ `), c('& .u-tabs-bar', `
+ background-color: var(--u-header-tab-indicator-color);
+ `), c('& .u-tabs-pane-wrapper', `
+ position: absolute;
+ z-index: 1000;
+ width: max-content;
+ top: 100%;
+ `), c('& .v-x-scroll', `
+ height: 100%;
+ `)]), cE('tab', `
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-size: var(--u-font-size);
+ font-weight: 500;
+ `), cE('tab-icon', `
+ display: inline-flex;
+ font-size: 20px;
+ `), cE('tab-label', `
+ white-space: nowrap;
+ `, [c('& a', `
+ text-decoration: none;
+ color: inherit;
+ `)]), cE('badge', `
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 1px 10px 0;
+ border-radius: 16px;
+ font-size: 12px;
+ font-weight: 600;
+ height: auto;
+ background-color: var(--u-header-badge-bg-color);
+ color: var(--u-header-badge-text-color);
+ `), cE('tab-pane-wrapper', `
+ overflow: visible;
+ `), cE('tab-pane', `
+ padding: 0;
+ `), cE('menu-card', `
+ background-color: var(--u-header-card-bg-color);
+ border-radius: var(--u-header-card-radius);
+ padding: var(--u-header-card-padding);
+ `), cE('menu-grid', `
+ display: grid;
+ gap: var(--u-header-card-gap);
+ `), cE('menu-column', `
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ `, [cM('single', `
+ gap: 8px;
+ `)]), cE('menu-column-section', `
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ `, [c('& + &', `
+ margin-top: 16px;
+ `)]), cE('menu-column-section--single', `
+ gap: 8px;
+ `), cE('menu-column-title', `
+ font-size: var(--u-font-title-small);
+ font-weight: 600;
+ color: var(--u-header-card-title-color);
+ `), cE('menu-column-list', `
+ display: flex;
+ flex-direction: column;
+ gap: 0px;
+ `), cE('menu-item', `
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ color: var(--u-header-card-item-color);
+ transition: color .3s var(--u-bezier);
+ cursor: pointer;
+ padding: 8px 0;
+ `, [c('&:hover', `
+ color: var(--u-header-card-item-hover-color);
+ `), cM('disabled', `
+ pointer-events: none;
+ opacity: .5;
+ cursor: not-allowed;
+ `)]), cE('menu-item-main', `
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ `), cE('menu-item-icon', `
+ font-size: 16px;
+ display: inline-flex;
+ `), cE('menu-divider', `
+ width: 100%;
+ height: 1px;
+ background-color: var(--u-header-card-divider-color);
+ `), cE('lang-trigger', `
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ `), cE('lang-icon', `
+ width: 24px;
+ height: 24px;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ `)]);
+export const headerMobileMenuStyle = cB('header-mobile-menu', `
+ display: flex;
+ flex-direction: column;
+ background-color: var(--u-header-bg-color);
+`, [cE('header', `
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 24px;
+ border-bottom: 1px solid var(--u-header-mobile-border-color);
+ flex-shrink: 0;
+ min-height: 60px;
+ gap: 24px;
+ `), cE('close', `
+ flex-shrink: 0;
+ padding: 0;
+ `), cE('actions', `
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex: 1;
+ gap: 16px;
+ `, [c('& .u-button', `
+ color: var(--u-header-action-icon-color);
+ font-size: 16px;
+ font-weight: 500;
+ `, [c('&:hover', `
+ color: var(--u-header-action-icon-hover-color);
+ `)])]), cE('body', `
+ overflow-y: auto;
+ padding: 16px 0;
+ `), cE('list', `
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ padding: 0;
+ `), cE('item', `
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ padding: 24px;
+ box-sizing: border-box;
+ min-height: 72px;
+ color: var(--u-header-text-color);
+ cursor: pointer;
+ transition: background-color 0.3s var(--u-bezier), color 0.3s var(--u-bezier);
+ position: relative;
+ `, [cM('expandable', [c('&::after', `
+ content: '';
+ position: absolute;
+ right: 24px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 8px;
+ height: 8px;
+ border-right: 2px solid currentColor;
+ border-top: 2px solid currentColor;
+ transform: translateY(-50%) rotate(45deg);
+ opacity: 0.6;
+ transition: transform 0.3s var(--u-bezier);
+ `)]), cM('expanded', [c('&::after', `
+ transform: translateY(-50%) rotate(135deg);
+ `)]), c('&:hover', `
+ background-color: var(--u-header-mobile-item-hover-color);
+ `), c('&:active', `
+ background-color: var(--u-header-mobile-item-pressed-color);
+ `), cM('active', `
+ background-color: var(--u-header-mobile-item-active-color);
+ color: var(--u-header-tab-text-color-active);
+ font-weight: 500;
+ `), cM('disabled', `
+ opacity: 0.5;
+ cursor: not-allowed;
+ pointer-events: none;
+ `)]), cE('item-icon', `
+ display: inline-flex;
+ font-size: 20px;
+ flex-shrink: 0;
+ `), cE('item-label', `
+ flex: 1;
+ font-size: 16px;
+ font-weight: 600;
+ `, [c('& a', `
+ text-decoration: none;
+ color: inherit;
+ `)]), cE('footer', `
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ border-top: 1px solid var(--u-header-card-divider-color);
+ flex-shrink: 0;
+ background-color: var(--u-header-bg-color);
+ `), cE('children', `
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ overflow: hidden;
+ animation: expand 0.3s var(--u-bezier);
+ `, [c('@keyframes expand', `
+ from {
+ max-height: 0;
+ opacity: 0;
+ }
+ to {
+ max-height: 1000px;
+ opacity: 1;
+ }
+ `)]), cE('child-item', `
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 16px 24px 12px;
+ min-height: 32px;
+ cursor: pointer;
+ transition: background-color 0.3s var(--u-bezier);
+ `, [c('&:hover', `
+ background-color: var(--u-header-mobile-item-hover-color);
+ `), cM('active', `
+ background-color: var(--u-header-mobile-item-active-color);
+ color: var(--u-header-tab-text-color-active);
+ font-weight: 500;
+ `)]), cE('child-item-label', `
+ flex: 1;
+ font-size: 14px;
+ font-weight: 400;
+ color: var(--u-header-text-color);
+ `), cE('group', `
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ `), cE('group-title', `
+ padding: 16px 24px 12px;
+ font-size: 14px;
+ font-weight: 400;
+ color: var(--u-header-card-title-color);
+ `), cE('group-items', `
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ `), cE('group-item', `
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 4px 24px 4px 40px;
+ min-height: 32px;
+ cursor: pointer;
+ transition: background-color 0.3s var(--u-bezier);
+ `, [c('&:hover', `
+ background-color: var(--u-header-mobile-item-hover-color);
+ `), cM('active', `
+ background-color: var(--u-header-mobile-item-active-color);
+ color: var(--u-header-tab-text-color-active);
+ font-weight: 500;
+ `)]), cE('group-item-label', `
+ flex: 1;
+ font-size: 14px;
+ font-weight: 400;
+ color: var(--u-header-mobile-group-item-color);
+ `), cE('lang-content', `
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ `)]);
+export const headerSearchMobileStyle = cB('header-search-mobile', `
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ background-color: #fff;
+`, [cE('header', `
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 24px;
+ border-bottom: 1px solid var(--u-header-mobile-border-color);
+ flex-shrink: 0;
+ min-height: 60px;
+ gap: 24px;
+ `), cE('back', `
+ padding: 0 !important;
+ min-width: auto !important;
+ height: auto !important;
+ `), cE('input-wrapper', `
+ flex: 1;
+ position: relative;
+ display: flex;
+ align-items: center;
+ `), cE('input-icon', `
+ position: absolute;
+ left: 12px;
+ color: #666;
+ pointer-events: none;
+ `), cE('input', `
+ flex: 1;
+ width: 100%;
+ height: 40px;
+ padding: 0 12px 0 44px;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ font-size: 14px;
+ outline: none;
+ transition: border-color 0.3s;
+ `, [c('&:focus', `
+ border-color: #18a058;
+ `)])]);
+export const headerSearchDesktopStyle = cB('header-search-desktop', `
+ position: absolute;
+ top: calc(100% + 4px);
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 1000;
+ min-width: 400px;
+ background-color: var(--u-header-card-bg-color);
+ border-radius: var(--u-header-card-radius);
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+ transform-origin: top center;
+ padding: 40px;
+`, [cE('title', `
+ margin-bottom: 28px;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ `), cE('content', `
+ padding: 0;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ `), cE('input-wrapper', `
+ flex: 1;
+ position: relative;
+ display: flex;
+ align-items: center;
+ `), cE('input', `
+ flex: 1;
+ width: 100%;
+ `, [c('& .u-input__input-el', `
+ height: 44px;
+ font-size: 16px;
+ `)]), cE('close', `
+ position: absolute;
+ right: 16px;
+ top: 16px;
+ `)]);
+export const headerSearchResultsStyle = cB('header-search-results', `
+ overflow-y: auto;
+ z-index: 1001;
+`, [cM('desktop', `
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ margin-top: 8px;
+ background-color: var(--u-header-card-bg-color);
+ border-radius: var(--u-header-card-radius);
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+ max-height: 400px;
+ `), cM('mobile', `
+ position: static;
+ `), cE('loading', `
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ padding: 32px 24px;
+ color: #666;
+ font-size: 14px;
+ `), cE('empty', `
+ padding: 32px 24px;
+ `), cE('list', `
+ padding: 8px 0;
+ `), cE('item', `
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 24px;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ `, [c('&:hover', `
+ background-color: var(--u-header-mobile-item-hover-color);
+ `), c('&:active', `
+ background-color: var(--u-header-mobile-item-pressed-color);
+ `), cM('disabled', `
+ opacity: 0.5;
+ cursor: not-allowed;
+ `, [c('&:hover', `
+ background-color: transparent;
+ `), c('&:active', `
+ background-color: transparent;
+ `)])]), cE('item-icon', `
+ display: inline-flex;
+ font-size: 20px;
+ flex-shrink: 0;
+ color: #666;
+ `), cE('item-content', `
+ flex: 1;
+ min-width: 0;
+ `), cE('item-label', `
+ font-size: 14px;
+ font-weight: 500;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ `), cE('item-description', `
+ font-size: 12px;
+ margin-top: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--u-header-tab-text-color);
+ `), cE('item-extra', `
+ font-size: 12px;
+ flex-shrink: 0;
+ color: var(--u-header-tab-text-color);
+ `)]);

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

@@ -0,0 +1,12 @@
+import { type VNodeChild } from 'vue';
+import type { HeaderMenuOption, HeaderMenuGroupOption, HeaderMenuChildOption, HeaderMenuDividerOption, HeaderMenuColumnOption, HeaderMenuPlacement } from './interface';
+import { TabsProps } from '@uzum-tech/ui';
+export declare function renderOptionLabel(option: HeaderMenuOption | HeaderMenuGroupOption): VNodeChild;
+export declare function renderBadge(option: HeaderMenuOption | HeaderMenuGroupOption, className: string): VNodeChild | null;
+export declare function getMenuItemKey(option: HeaderMenuOption, index: number): string | number;
+export declare function hasChildren(option: HeaderMenuOption): boolean;
+export declare function isGroupOption(option: HeaderMenuOption): option is HeaderMenuGroupOption;
+export declare function isDividerOption(option: HeaderMenuChildOption): option is HeaderMenuDividerOption;
+export declare function isColumnOption(option: HeaderMenuChildOption): option is HeaderMenuColumnOption;
+export declare function isNotNull<T>(value: T | null): value is T;
+export declare function resolvePlacement(placement: HeaderMenuPlacement): TabsProps['placement'];

package/es/header/src/utils.js

@@ -0,0 +1,47 @@
+import { h } from 'vue';
+export function renderOptionLabel(option) {
+    var _a;
+    if (typeof option.label === 'function')
+        return option.label();
+    if (option.label !== undefined)
+        return option.label;
+    return ((_a = option.key) !== null && _a !== void 0 ? _a : '');
+}
+export function renderBadge(option, className) {
+    if (!option.extra)
+        return null;
+    const content = typeof option.extra === 'function' ? option.extra() : option.extra;
+    if (content === undefined || content === null || content === false) {
+        return null;
+    }
+    return h("span", { class: className }, content);
+}
+export function getMenuItemKey(option, index) {
+    var _a;
+    return (_a = option.key) !== null && _a !== void 0 ? _a : `header-menu-item-${index}`;
+}
+export function hasChildren(option) {
+    return Array.isArray(option.children) && option.children.length > 0;
+}
+export function isGroupOption(option) {
+    return option.type === 'group';
+}
+export function isDividerOption(option) {
+    return option.type === 'divider';
+}
+export function isColumnOption(option) {
+    return option.type === 'column';
+}
+export function isNotNull(value) {
+    return value !== null;
+}
+export function resolvePlacement(placement) {
+    switch (placement) {
+        case 'horizontal':
+            return 'top';
+        case 'vertical':
+            return 'left';
+        default:
+            return placement;
+    }
+}

package/es/header/styles/dark.d.ts

@@ -0,0 +1,36 @@
+declare const headerDark: 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>;
+export default headerDark;
+export type HeaderTheme = typeof headerDark;

package/es/header/styles/dark.js

@@ -0,0 +1,9 @@
+import { commonDark } from '../../_styles/common';
+import { createTheme } from '../../_mixins';
+import { self as selfLight } from './light';
+const headerDark = createTheme({
+    name: 'Header',
+    common: commonDark,
+    self: (vars) => selfLight(vars)
+});
+export default headerDark;

package/es/header/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as headerDark } from './dark';
+export { default as headerLight } from './light';
+export type { HeaderTheme, HeaderThemeVars } from './light';

package/es/header/styles/index.js

@@ -0,0 +1,2 @@
+export { default as headerDark } from './dark';
+export { default as headerLight } from './light';

package/es/header/styles/light.d.ts

@@ -0,0 +1,72 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+export declare const self: (vars: ThemeCommonVars) => {
+    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;
+};
+declare const headerLight: 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>;
+export default headerLight;
+export type HeaderThemeVars = ReturnType<typeof self>;
+export type HeaderTheme = typeof headerLight;