@thinkpixellab-public/px-vue 3.0.36 → 3.0.38

package/components/PxBalancedText.vue

@@ -91,6 +91,12 @@ export default {
             }
             return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
         },
+        isHeadless() {
+            if (isServer()) {
+                return false;
+            }
+            return /HeadlessChrome/i.test(navigator.userAgent);
+        },
     },
     watch: {
         enabled() {
@@ -110,7 +116,7 @@ export default {
                 return;
             }
 
-            if (this.isSafari) {
+            if (this.isSafari || this.isHeadless) {
                 this.balanced = true;
                 return;
             }

package/components/PxBaseVariantsOverride.vue

@@ -18,7 +18,7 @@ export default {
         variantValue() {
             return (
                 (this.variantBase ? `${this.variantBase} ` : '') +
-                (this.variantDefault ? this.variantDefault : this.variant)
+                (this.variant ?? this.variantDefault)
             );
         },
     },

package/components/PxCardGrid.vue

@@ -109,8 +109,8 @@ You can define a template using space notation like this:
                     :key="spaceIndex"
                 >
                     <div
-                        v-for="(item, cardIndex) in space.cards"
-                        :key="cardIndex"
+                        v-for="item in space.cards"
+                        :key="getItemKey(item)"
                         :class="bem('card')"
                         :ref="cardRefFromItem(item)"
                     >

package/package.json

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

package/utils/cssStr.js

@@ -58,6 +58,41 @@ function cssVar(val) {
     return null;
 }
 
+/*
+Extract the unit from a css value
+    cssUnit('10px') => 'px'
+    cssUnit(10) => ''
+*/
+function cssUnit(val) {
+    if (!val) {
+        return '';
+    }
+    const allowedUnits = ['em', 'px', '%', 'rem', 'vw', 'vh', 'ex', 'ch', 'vmin', 'vmax'];
+
+    val = val
+        .toString()
+        .replace(/[0-9]|-|\./g, '')
+        .trim();
+
+    if (allowedUnits.includes(val)) {
+        return val;
+    }
+
+    return '';
+}
+
+/*
+Extract the number from a css value
+    cssNum('10px') => 10
+    cssNum(10) => 10
+    cssNum('auto') => 0
+    cssNum('auto', null) => null
+*/
+function cssNum(val, nanValue = 0) {
+    const num = parseFloat(val);
+    return isNaN(num) ? nanValue : num;
+}
+
 /*
 Add the specified unit if no other unit is specified.
 
@@ -98,4 +133,4 @@ function cssEmFallback(val, allowNumberless = false) {
     return cssUnitFallback(val, 'em', allowNumberless);
 }
 
-export { cssPx, cssEm, cssPcnt, cssUrl, cssVar, cssUnitFallback, cssEmFallback };
+export { cssPx, cssEm, cssPcnt, cssUrl, cssVar, cssNum, cssUnit, cssUnitFallback, cssEmFallback };

package/utils/variants.js

@@ -3,6 +3,10 @@
  * (e.g. 'rounded shadow-lg' becomes ['rounded', 'shadow-lg'])
  */
 const stringToVariants = str => {
+    if (!str) {
+        return [];
+    }
+
     if (typeof str != 'string') {
         str = str + '';
     }