@uzum-tech/ui 1.12.13 → 1.12.15

package/dist/index.js

@@ -2194,19 +2194,6 @@
       });
     }
 
-    function useBreakpoint(screens) {
-      if (!isBrowser$1) return vue.computed(() => undefined);
-      // pass ts check
-      const breakpointsRef = screens !== undefined ? useBreakpoints(screens) : useBreakpoints();
-      return vue.computed(() => {
-        const {
-          value
-        } = breakpointsRef;
-        if (value.length === 0) return undefined;
-        return value[value.length - 1];
-      });
-    }
-
     function useKeyboard$1(options = {}, enabledRef) {
       const state = vue.reactive({
         ctrl: false,
@@ -18224,7 +18211,7 @@
           "path",
           {
             d: "M16 17L21 12M21 12L16 7M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9",
-            stroke: "#101010",
+            stroke: "currentColor",
             "stroke-width": "1.66667",
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
@@ -61999,6 +61986,10 @@
       breakpoints: Object,
       breakpointProps: Object,
       breakpointThemeOverrides: Object,
+      breakpointMode: {
+        type: String,
+        default: "desktop-first"
+      },
       preflightStyleDisabled: Boolean,
       inlineThemeDisabled: {
         type: Boolean,
@@ -62024,34 +62015,64 @@
           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).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 = 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 +62084,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 +62128,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 +62221,9 @@
           mergedComponentPropsRef,
           mergedBreakpointPropsRef,
           mergedBreakpointThemeOverridesRef,
+          mergedBreakpointModeRef,
+          activeBreakpointPropsRef,
+          activeBreakpointThemeOverridesRef,
           mergedBorderedRef,
           mergedNamespaceRef,
           mergedClsPrefixRef,
@@ -62207,14 +62231,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(() => {
@@ -124563,12 +124587,12 @@
     `), cE("logo", [c$1("img", `
         max-height: 24px;
       `)])]), cM("desktop", [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;
@@ -124577,12 +124601,14 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 60px;
+      flex: 1;
       height: 100%;
     `)]), 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;
@@ -124619,7 +124645,6 @@
     position: relative;
     display: inline-flex;
     align-items: center;
-    gap: var(--u-header-action-gap);
     flex-shrink: 0;
     height: 100%;
   `, [cE("actions-block", `
@@ -125214,13 +125239,6 @@
       return option.type !== "column";
     }
 
-    function useIsMobile() {
-      const breakpointRef = useBreakpoint();
-      return useMemo(() => {
-        return breakpointRef.value === "xs";
-      });
-    }
-
     const headerNavigationProps = {
       menuOptions: {
         type: Array,
@@ -126495,6 +126513,10 @@
         type: Boolean,
         default: true
       },
+      isMobile: {
+        type: Boolean,
+        default: true
+      },
       mobileMenuType: {
         type: String,
         default: "drawer"
@@ -126546,7 +126568,7 @@
           props,
           mergedClsPrefixRef
         );
-        const isMobileRef = useIsMobile();
+        const isMobileRef = props.isMobile;
         const mobileMenuVisibleRef = vue.ref(false);
         const searchVisibleRef = vue.ref(false);
         vue.onBeforeMount(() => {
@@ -128561,7 +128583,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.12.13";
+    var version = "1.12.15";
 
     function useExposeProxy(targetRef) {
       return new Proxy({}, {