@thinkpixellab-public/px-vue 3.0.84 → 3.0.86

package/components/PxBaseMobileAware.vue

@@ -6,7 +6,7 @@
 export default {
     inject: {
         mediaQuery: {
-            default: { isMobile: null, currentBreakpoint: null },
+            default: { isMobile: null, currentBreakpoint: null, breakpoints: {} },
         },
     },
     computed: {
@@ -17,5 +17,26 @@ export default {
             return this.mediaQuery.currentBreakpoint;
         },
     },
+    mounted() {
+        // setTimeout(() => {
+        //     console.log(this.mediaQuery.breakpoints);
+        // }, 100);
+    },
+    methods: {
+        isBreakpointOrSmaller(breakpoint) {
+            if (this.currentBreakpoint === null) {
+                return false;
+            }
+
+            if (this.currentBreakpoint === breakpoint) {
+                return true;
+            }
+
+            return (
+                this.mediaQuery.breakpoints[breakpoint] >=
+                this.mediaQuery.breakpoints[this.currentBreakpoint]
+            );
+        },
+    },
 };
 </script>

package/components/PxBaseMobileProvide.vue

@@ -21,9 +21,38 @@ export default {
     },
     mixins: [PxBaseResize],
     data() {
-        return { mediaQuery: { isMobile: null, currentBreakpoint: null } };
+        return { mediaQuery: { isMobile: null, currentBreakpoint: null, breakpoints: {} } };
     },
+    mounted() {
+        const breakpointNames = getComputedStyle(document.documentElement)
+            .getPropertyValue('--breakpoint-names')
+            .trim()
+            .split(' ');
 
+        const breakpointSizes = getComputedStyle(document.documentElement)
+            .getPropertyValue('--breakpoint-sizes')
+            .trim()
+            .split(' ');
+
+        if (breakpointNames.length !== breakpointSizes.length) {
+            console.warn('Breakpoint names and sizes do not match');
+            return;
+        }
+
+        try {
+            this.mediaQuery.breakpoints = Object.fromEntries(
+                breakpointNames
+                    .map((name, index) => {
+                        return [name, parseInt(breakpointSizes[index])];
+                    })
+                    .sort((a, b) => a[1] - b[1])
+            );
+        } catch {
+            console.warn(
+                'Could not parse breakpoint sizes. Check the format of the breakpoint-sizes variable in the theme file.'
+            );
+        }
+    },
     methods: {
         updateMediaQuery() {
             this.mediaQuery.isMobile =

package/components/PxBaseVariants.vue

@@ -40,10 +40,6 @@ export default {
     methods: {
         // true if the given variant (string) or variants (array) are present
         isVariant(val) {
-            // if (val.includes && val.includes('offset')) {
-            //     debugger;
-            // }
-
             if (this.variants && this.variants.length && val) {
                 if (typeof val == 'string') {
                     return this.variants?.includes(val);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.84",
+    "version": "3.0.86",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",

package/utils/cssStr.js

@@ -99,10 +99,15 @@ function cssUnit(val) {
  * @example
  *      cssUnitScale('10px', 2) => '20px'
  */
-function cssUnitScale(val, scaler) {
-    const unit = cssUnit(val);
-    const num = cssNum(val);
-    return `${num * scaler}${unit}`;
+function cssUnitScale(val, scaler, min = null, max = null) {
+    let unit = cssUnit(val);
+    let num = cssNum(val);
+
+    num = num * scaler;
+    num = min !== null && num < min ? min : num;
+    num = max !== null && num > max ? max : num;
+
+    return `${num}${unit}`;
 }
 
 /*