@uzum-tech/ui 1.12.13 → 1.12.15

package/lib/config-provider/src/ConfigProvider.js

@@ -32,6 +32,10 @@ exports.configProviderProps = {
     breakpoints: Object,
     breakpointProps: Object,
     breakpointThemeOverrides: Object,
+    breakpointMode: {
+        type: String,
+        default: 'desktop-first'
+    },
     preflightStyleDisabled: Boolean,
     inlineThemeDisabled: {
         type: Boolean,
@@ -56,7 +60,7 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedThemeRef = (0, vue_1.computed)(() => {
             const { theme } = props;
             if (theme === null)
-                return undefined;
+                return;
             const inheritedTheme = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeRef.value;
             return theme === undefined
                 ? inheritedTheme
@@ -64,30 +68,68 @@ exports.default = (0, vue_1.defineComponent)({
                     ? theme
                     : Object.assign({}, inheritedTheme, theme);
         });
-        const getActiveBreakpointValue = (breakpointMap) => {
-            if (!breakpointMap || !_utils_1.isBrowser) {
-                return undefined;
+        const mergedBreakpointModeRef = (0, vue_1.computed)(() => {
+            const { breakpointMode } = props;
+            return (breakpointMode ||
+                (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointModeRef.value) ||
+                'desktop-first');
+        });
+        const getMergedBreakpointValues = (breakpointMap) => {
+            if (!breakpointMap)
+                return;
+            const breakpointWidths = Object.keys(breakpointMap)
+                .map(Number)
+                .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+            const mergedMap = {};
+            let previousValue;
+            for (const width of breakpointWidths) {
+                if (previousValue !== undefined) {
+                    mergedMap[width] = (0, lodash_1.merge)({}, previousValue, breakpointMap[width]);
+                }
+                else {
+                    mergedMap[width] = breakpointMap[width];
+                }
+                previousValue = mergedMap[width];
             }
+            return mergedMap;
+        };
+        const getActiveBreakpointValue = (breakpointMap, mode = 'desktop-first') => {
+            if (!breakpointMap || !_utils_1.isBrowser)
+                return;
+            const mergedMap = getMergedBreakpointValues(breakpointMap);
+            if (!mergedMap)
+                return;
             const currentWidth = windowWidthRef.value;
-            const breakpointWidths = Object.keys(breakpointMap)
+            const breakpointWidths = Object.keys(mergedMap)
                 .map(Number)
-                .filter((width) => width <= currentWidth)
-                .sort((a, b) => b - a);
-            if (breakpointWidths.length === 0) {
-                return undefined;
+                .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+            let matchingBreakpoints;
+            if (mode === 'mobile-first') {
+                matchingBreakpoints = breakpointWidths.filter((width) => width >= currentWidth);
+                if (matchingBreakpoints.length === 0) {
+                    matchingBreakpoints = [breakpointWidths[breakpointWidths.length - 1]];
+                }
+            }
+            else {
+                matchingBreakpoints = breakpointWidths
+                    .filter((width) => width <= currentWidth)
+                    .reverse();
+                if (matchingBreakpoints.length === 0) {
+                    matchingBreakpoints = [breakpointWidths[0]];
+                }
             }
-            const activeBreakpoint = breakpointWidths[0];
-            return breakpointMap[activeBreakpoint];
+            const activeBreakpoint = matchingBreakpoints[0];
+            return mergedMap[activeBreakpoint];
         };
-        const activeBreakPointThemeOverridesRef = (0, vue_1.computed)(() => {
+        const activeBreakpointThemeOverridesRef = (0, vue_1.computed)(() => {
             const { breakpointThemeOverrides } = props;
             const breakpointThemeOverridesToUse = breakpointThemeOverrides !== null && breakpointThemeOverrides !== void 0 ? breakpointThemeOverrides : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointThemeOverridesRef.value;
-            return getActiveBreakpointValue(breakpointThemeOverridesToUse);
+            return getActiveBreakpointValue(breakpointThemeOverridesToUse, mergedBreakpointModeRef.value);
         });
         const mergedThemeOverridesRef = (0, vue_1.computed)(() => {
             const { themeOverrides } = props;
             if (themeOverrides === null)
-                return undefined;
+                return;
             let baseThemeOverrides;
             if (themeOverrides === undefined) {
                 baseThemeOverrides = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedThemeOverridesRef.value;
@@ -101,14 +143,14 @@ exports.default = (0, vue_1.defineComponent)({
                     baseThemeOverrides = (0, lodash_1.merge)({}, inheritedThemeOverrides, themeOverrides);
                 }
             }
-            const activeBreakPointThemeOverrides = activeBreakPointThemeOverridesRef.value;
-            if (!activeBreakPointThemeOverrides) {
+            const activeBreakpointThemeOverrides = activeBreakpointThemeOverridesRef.value;
+            if (!activeBreakpointThemeOverrides) {
                 return baseThemeOverrides;
             }
             if (!baseThemeOverrides) {
-                return activeBreakPointThemeOverrides;
+                return activeBreakpointThemeOverrides;
             }
-            return (0, lodash_1.merge)({}, baseThemeOverrides, activeBreakPointThemeOverrides);
+            return (0, lodash_1.merge)({}, baseThemeOverrides, activeBreakpointThemeOverrides);
         });
         const mergedNamespaceRef = (0, vooks_1.useMemo)(() => {
             const { namespace } = props;
@@ -143,24 +185,24 @@ exports.default = (0, vue_1.defineComponent)({
                 window.removeEventListener('resize', updateWindowWidth);
             }
         });
-        const activeBreakPointPropsRef = (0, vue_1.computed)(() => {
+        const activeBreakpointPropsRef = (0, vue_1.computed)(() => {
             const { breakpointProps } = props;
             const breakpointPropsToUse = breakpointProps !== null && breakpointProps !== void 0 ? breakpointProps : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointPropsRef.value;
-            return getActiveBreakpointValue(breakpointPropsToUse);
+            return getActiveBreakpointValue(breakpointPropsToUse, mergedBreakpointModeRef.value);
         });
         const mergedComponentPropsRef = (0, vue_1.computed)(() => {
             const { componentOptions } = props;
             const baseComponentOptions = componentOptions !== undefined
                 ? componentOptions
                 : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef.value;
-            const activeBreakPointProps = activeBreakPointPropsRef.value;
-            if (!activeBreakPointProps) {
+            const activeBreakpointProps = activeBreakpointPropsRef.value;
+            if (!activeBreakpointProps) {
                 return baseComponentOptions;
             }
             if (!baseComponentOptions) {
-                return activeBreakPointProps;
+                return activeBreakpointProps;
             }
-            return (0, lodash_1.merge)({}, baseComponentOptions, activeBreakPointProps);
+            return (0, lodash_1.merge)({}, baseComponentOptions, activeBreakpointProps);
         });
         const mergedClsPrefixRef = (0, vue_1.computed)(() => {
             const { clsPrefix } = props;
@@ -230,13 +272,16 @@ exports.default = (0, vue_1.defineComponent)({
             mergedComponentPropsRef,
             mergedBreakpointPropsRef,
             mergedBreakpointThemeOverridesRef,
+            mergedBreakpointModeRef,
+            activeBreakpointPropsRef,
+            activeBreakpointThemeOverridesRef,
             mergedBorderedRef,
             mergedNamespaceRef,
             mergedClsPrefixRef,
             mergedLocaleRef: (0, vue_1.computed)(() => {
                 const { locale } = props;
                 if (locale === null)
-                    return undefined;
+                    return;
                 return locale === undefined
                     ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedLocaleRef.value
                     : locale;
@@ -244,7 +289,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedDateLocaleRef: (0, vue_1.computed)(() => {
                 const { dateLocale } = props;
                 if (dateLocale === null)
-                    return undefined;
+                    return;
                 return dateLocale === undefined
                     ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedDateLocaleRef.value
                     : dateLocale;

package/lib/config-provider/src/interface.d.ts

@@ -13,4 +13,4 @@ export type GlobalThemeOverrides = {
 } & {
     [key in keyof GlobalThemeWithoutCommon]?: ExtractThemeOverrides<GlobalThemeWithoutCommon[key]>;
 };
-export type { GlobalIconConfig, GlobalComponentConfig, BreakpointProps, BreakpointThemeOverrides } from './internal-interface';
+export type { GlobalIconConfig, GlobalComponentConfig, BreakpointProps, BreakpointThemeOverrides, BreakpointMode } from './internal-interface';

package/lib/config-provider/src/internal-interface.d.ts

@@ -429,6 +429,7 @@ export type RtlEnabledState = Partial<Record<keyof GlobalThemeWithoutCommon, Rtl
 export type Breakpoints = Record<string, number> | undefined;
 export type BreakpointProps = Record<number, GlobalComponentConfig> | undefined;
 export type BreakpointThemeOverrides = Record<number, GlobalThemeOverrides> | undefined;
+export type BreakpointMode = 'mobile-first' | 'desktop-first';
 export interface ConfigProviderInjection {
     mergedBreakpointsRef: Ref<Breakpoints | undefined>;
     mergedClsPrefixRef: Ref<string>;
@@ -446,6 +447,9 @@ export interface ConfigProviderInjection {
     mergedThemeHashRef: Ref<string>;
     mergedBreakpointPropsRef: Ref<BreakpointProps | undefined>;
     mergedBreakpointThemeOverridesRef: Ref<BreakpointThemeOverrides | undefined>;
+    mergedBreakpointModeRef: Ref<BreakpointMode>;
+    activeBreakpointPropsRef: Ref<GlobalComponentConfig | undefined>;
+    activeBreakpointThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     inlineThemeDisabled: boolean;
     preflightStyleDisabled: boolean;
 }

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

@@ -43,6 +43,10 @@ export declare const headerProps: {
         type: PropType<HeaderPropsInterface["responsive"]>;
         default: boolean;
     };
+    isMobile: {
+        type: PropType<HeaderPropsInterface["isMobile"]>;
+        default: boolean;
+    };
     mobileMenuType: {
         type: PropType<"drawer" | "dropdown">;
         default: string;
@@ -213,6 +217,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["responsive"]>;
         default: boolean;
     };
+    isMobile: {
+        type: PropType<HeaderPropsInterface["isMobile"]>;
+        default: boolean;
+    };
     mobileMenuType: {
         type: PropType<"drawer" | "dropdown">;
         default: string;
@@ -388,7 +396,7 @@ declare const _default: import("vue").DefineComponent<{
         key: string | number;
         icon?: (() => import("vue").VNodeChild) | undefined;
     }>;
-    isMobile: ComputedRef<boolean>;
+    isMobile: boolean | undefined;
     mobileMenuVisible: import("vue").Ref<boolean>;
     searchVisible: import("vue").Ref<boolean>;
     handleSelectLang: (key: string | number) => void;
@@ -448,6 +456,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HeaderPropsInterface["responsive"]>;
         default: boolean;
     };
+    isMobile: {
+        type: PropType<HeaderPropsInterface["isMobile"]>;
+        default: boolean;
+    };
     mobileMenuType: {
         type: PropType<"drawer" | "dropdown">;
         default: string;
@@ -596,6 +608,7 @@ declare const _default: import("vue").DefineComponent<{
     menuCardMinColumnWidth: string | number | undefined;
     logoSrc: string | undefined;
     logoAlt: string | undefined;
+    isMobile: boolean | undefined;
     mobileActionsCollapse: boolean | undefined;
     mobileShowFooterActions: boolean | undefined;
     mobilePrimaryActionText: string | undefined;

package/lib/header/src/Header.js

@@ -43,7 +43,6 @@ const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
-const composables_1 = require("../../_utils/composable/composables");
 const icon_1 = require("../../icon");
 const HeaderNavigation_1 = __importDefault(require("./HeaderNavigation"));
 const HeaderMobile_1 = __importDefault(require("./mobile/HeaderMobile"));
@@ -96,6 +95,9 @@ exports.headerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, responsive: {
         type: Boolean,
         default: true
+    }, isMobile: {
+        type: Boolean,
+        default: true
     }, mobileMenuType: {
         type: String,
         default: 'drawer'
@@ -132,7 +134,7 @@ exports.default = (0, vue_1.defineComponent)({
         var _a, _b, _c;
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Header', '-header', index_cssr_1.default, styles_1.headerLight, props, mergedClsPrefixRef);
-        const isMobileRef = (0, composables_1.useIsMobile)();
+        const isMobileRef = props.isMobile;
         const mobileMenuVisibleRef = (0, vue_1.ref)(false);
         const searchVisibleRef = (0, vue_1.ref)(false);
         (0, vue_1.onBeforeMount)(() => {

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

@@ -114,7 +114,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSearchResultSelect: PropType<(result: HeaderSearchResult) => void>;
 }>>, {
     readonly responsive: boolean;
-    readonly mobileActionsCollapse: boolean;
     readonly isMobile: boolean;
+    readonly mobileActionsCollapse: boolean;
 }, {}>;
 export default _default;

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

@@ -16,6 +16,7 @@ export interface HeaderProps {
     logoAlt?: string;
     logoProps?: Partial<ImageProps>;
     responsive?: boolean;
+    isMobile?: boolean;
     mobileMenuType?: 'drawer' | 'dropdown';
     mobileActionsCollapse?: boolean;
     mobileShowFooterActions?: boolean;

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

@@ -23,12 +23,12 @@ exports.default = (0, cssr_1.cB)('header', `
  `), (0, cssr_1.cE)('logo', [(0, cssr_1.c)('img', `
  max-height: 24px;
  `)])]), (0, cssr_1.cM)('desktop', [(0, cssr_1.cE)('inner-wrapper', `
- width: 1300px;
+ width: 100%;
+ max-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;
@@ -37,12 +37,14 @@ exports.default = (0, cssr_1.cB)('header', `
  display: flex;
  align-items: center;
  justify-content: space-between;
- gap: 60px;
+ flex: 1;
  height: 100%;
  `)]), (0, cssr_1.cE)('inner', `
+ width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
+ justify-content: center;
  gap: var(--u-header-navigation-gap);
  padding: 0;
  position: relative;
@@ -79,7 +81,6 @@ exports.default = (0, cssr_1.cB)('header', `
  position: relative;
  display: inline-flex;
  align-items: center;
- gap: var(--u-header-action-gap);
  flex-shrink: 0;
  height: 100%;
  `, [(0, cssr_1.cE)('actions-block', `

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.13";
+declare const _default: "1.12.15";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.12.13';
+exports.default = '1.12.15';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.12.13",
+  "version": "1.12.15",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "1.12.13",
+  "version": "1.12.15",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -3701,6 +3701,13 @@
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
               "type": "object"
             },
+            {
+              "name": "breakpoint-mode",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
+              "type": "'mobile-first' | 'desktop-first'",
+              "description": "Controls how breakpoints are applied. In `desktop-first` mode (default), applies the largest breakpoint ≤ current width. In `mobile-first` mode, applies the smallest breakpoint ≥ current width.",
+              "default": "'desktop-first'"
+            },
             {
               "name": "preflight-style-disabled",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
@@ -3730,14 +3737,14 @@
               "name": "break-point-props",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
               "type": "{ [width: number]: GlobalComponentConfig }",
-              "description": "Component props configuration based on screen width. When screen width is less than or equal to the specified width, the corresponding component props will be applied. Useful for responsive design (e.g., smaller button size on mobile).",
+              "description": "Component props configuration based on screen width. The behavior depends on `breakpoint-mode`. Values from previous breakpoints are inherited by default unless explicitly overridden.",
               "default": "undefined"
             },
             {
               "name": "break-point-theme-overrides",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/config-provider",
               "type": "{ [width: number]: GlobalThemeOverrides }",
-              "description": "Theme variables configuration based on screen width. When screen width is less than or equal to the specified width, the corresponding theme overrides will be applied. Useful for responsive theming (e.g., different colors on mobile vs desktop).",
+              "description": "Theme variables configuration based on screen width. The behavior depends on `breakpoint-mode`. Values from previous breakpoints are inherited by default unless explicitly overridden.",
               "default": "undefined"
             },
             {
@@ -18368,6 +18375,11 @@
               "description": "Enable responsive/mobile adaptation.",
               "default": "true"
             },
+            {
+              "name": "is-mobile",
+              "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",
+              "type": "boolean"
+            },
             {
               "name": "mobile-menu-type",
               "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/header",