@uzum-tech/ui 1.12.13 → 1.12.14

package/dist/index.js

@@ -61999,6 +61999,10 @@
       breakpoints: Object,
       breakpointProps: Object,
       breakpointThemeOverrides: Object,
+      breakpointMode: {
+        type: String,
+        default: "desktop-first"
+      },
       preflightStyleDisabled: Boolean,
       inlineThemeDisabled: {
         type: Boolean,
@@ -62024,34 +62028,59 @@
           const {
             theme
           } = props;
-          if (theme === null) return void 0;
+          if (theme === null) return;
           const inheritedTheme = UConfigProvider?.mergedThemeRef.value;
           return theme === void 0 ? inheritedTheme : inheritedTheme === void 0 ? theme : Object.assign({}, inheritedTheme, theme);
         });
-        const getActiveBreakpointValue = breakpointMap => {
-          if (!breakpointMap || !isBrowser$2) {
-            return void 0;
+        const mergedBreakpointModeRef = vue.computed(() => {
+          const {
+            breakpointMode
+          } = props;
+          return breakpointMode || 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 !== void 0) {
+              mergedMap[width] = lodashExports.merge({}, previousValue, breakpointMap[width]);
+            } else {
+              mergedMap[width] = breakpointMap[width];
+            }
+            previousValue = mergedMap[width];
           }
+          return mergedMap;
+        };
+        const getActiveBreakpointValue = (breakpointMap, mode = "desktop-first") => {
+          if (!breakpointMap || !isBrowser$2) return;
+          const mergedMap = getMergedBreakpointValues(breakpointMap);
+          if (!mergedMap) return;
           const currentWidth = windowWidthRef.value;
-          const breakpointWidths = Object.keys(breakpointMap).map(Number).filter(width => width <= currentWidth).sort((a, b) => b - a);
-          if (breakpointWidths.length === 0) {
-            return void 0;
+          const breakpointWidths = Object.keys(mergedMap).map(Number);
+          let matchingBreakpoints;
+          if (mode === "mobile-first") {
+            matchingBreakpoints = breakpointWidths.filter(width => width >= currentWidth).sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+          } else {
+            matchingBreakpoints = breakpointWidths.filter(width => width <= currentWidth).sort((leftWidth, rightWidth) => rightWidth - leftWidth);
           }
-          const activeBreakpoint = breakpointWidths[0];
-          return breakpointMap[activeBreakpoint];
+          if (matchingBreakpoints.length === 0) return;
+          const activeBreakpoint = matchingBreakpoints[0];
+          return mergedMap[activeBreakpoint];
         };
-        const activeBreakPointThemeOverridesRef = vue.computed(() => {
+        const activeBreakpointThemeOverridesRef = vue.computed(() => {
           const {
             breakpointThemeOverrides
           } = props;
           const breakpointThemeOverridesToUse = breakpointThemeOverrides ?? UConfigProvider?.mergedBreakpointThemeOverridesRef.value;
-          return getActiveBreakpointValue(breakpointThemeOverridesToUse);
+          return getActiveBreakpointValue(breakpointThemeOverridesToUse, mergedBreakpointModeRef.value);
         });
         const mergedThemeOverridesRef = vue.computed(() => {
           const {
             themeOverrides
           } = props;
-          if (themeOverrides === null) return void 0;
+          if (themeOverrides === null) return;
           let baseThemeOverrides;
           if (themeOverrides === void 0) {
             baseThemeOverrides = UConfigProvider?.mergedThemeOverridesRef.value;
@@ -62063,14 +62092,14 @@
               baseThemeOverrides = lodashExports.merge({}, inheritedThemeOverrides, themeOverrides);
             }
           }
-          const activeBreakPointThemeOverrides = activeBreakPointThemeOverridesRef.value;
-          if (!activeBreakPointThemeOverrides) {
+          const activeBreakpointThemeOverrides = activeBreakpointThemeOverridesRef.value;
+          if (!activeBreakpointThemeOverrides) {
             return baseThemeOverrides;
           }
           if (!baseThemeOverrides) {
-            return activeBreakPointThemeOverrides;
+            return activeBreakpointThemeOverrides;
           }
-          return lodashExports.merge({}, baseThemeOverrides, activeBreakPointThemeOverrides);
+          return lodashExports.merge({}, baseThemeOverrides, activeBreakpointThemeOverrides);
         });
         const mergedNamespaceRef = useMemo(() => {
           const {
@@ -62107,26 +62136,26 @@
             window.removeEventListener("resize", updateWindowWidth);
           }
         });
-        const activeBreakPointPropsRef = vue.computed(() => {
+        const activeBreakpointPropsRef = vue.computed(() => {
           const {
             breakpointProps
           } = props;
           const breakpointPropsToUse = breakpointProps ?? UConfigProvider?.mergedBreakpointPropsRef.value;
-          return getActiveBreakpointValue(breakpointPropsToUse);
+          return getActiveBreakpointValue(breakpointPropsToUse, mergedBreakpointModeRef.value);
         });
         const mergedComponentPropsRef = vue.computed(() => {
           const {
             componentOptions
           } = props;
           const baseComponentOptions = componentOptions !== void 0 ? componentOptions : UConfigProvider?.mergedComponentPropsRef.value;
-          const activeBreakPointProps = activeBreakPointPropsRef.value;
-          if (!activeBreakPointProps) {
+          const activeBreakpointProps = activeBreakpointPropsRef.value;
+          if (!activeBreakpointProps) {
             return baseComponentOptions;
           }
           if (!baseComponentOptions) {
-            return activeBreakPointProps;
+            return activeBreakpointProps;
           }
-          return lodashExports.merge({}, baseComponentOptions, activeBreakPointProps);
+          return lodashExports.merge({}, baseComponentOptions, activeBreakpointProps);
         });
         const mergedClsPrefixRef = vue.computed(() => {
           const {
@@ -62200,6 +62229,9 @@
           mergedComponentPropsRef,
           mergedBreakpointPropsRef,
           mergedBreakpointThemeOverridesRef,
+          mergedBreakpointModeRef,
+          activeBreakpointPropsRef,
+          activeBreakpointThemeOverridesRef,
           mergedBorderedRef,
           mergedNamespaceRef,
           mergedClsPrefixRef,
@@ -62207,14 +62239,14 @@
             const {
               locale
             } = props;
-            if (locale === null) return void 0;
+            if (locale === null) return;
             return locale === void 0 ? UConfigProvider?.mergedLocaleRef.value : locale;
           }),
           mergedDateLocaleRef: vue.computed(() => {
             const {
               dateLocale
             } = props;
-            if (dateLocale === null) return void 0;
+            if (dateLocale === null) return;
             return dateLocale === void 0 ? UConfigProvider?.mergedDateLocaleRef.value : dateLocale;
           }),
           mergedHljsRef: vue.computed(() => {
@@ -128561,7 +128593,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.12.13";
+    var version = "1.12.14";
 
     function useExposeProxy(targetRef) {
       return new Proxy({}, {