@thinkpixellab-public/px-vue 3.0.34 → 3.0.36

package/components/PxBalancedText.vue

@@ -85,6 +85,12 @@ export default {
             }
             return null;
         },
+        isSafari() {
+            if (isServer()) {
+                return false;
+            }
+            return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+        },
     },
     watch: {
         enabled() {
@@ -104,6 +110,11 @@ export default {
                 return;
             }
 
+            if (this.isSafari) {
+                this.balanced = true;
+                return;
+            }
+
             if (this.enabled) {
                 try {
                     this.balanceFailed = false;

package/package.json

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

package/utils/cssStr.js

@@ -65,22 +65,37 @@ Add the specified unit if no other unit is specified.
     cssUnitFallback('10', 'em') => '10em'
     cssUnitFallback(10, 'em') => '10em'
 */
-function cssUnitFallback(val, fallback) {
+function cssUnitFallback(val, fallback, allowNumberless = false) {
     if (!val) {
         return val;
     }
 
+    let num = typeof val == 'number' ? val : parseFloat(val.toString());
+
     val = val.toString().trim();
-    const num = typeof val == 'number' ? val : parseFloat(val.toString().trim());
-    const unit = val.replace(/[0-9]/g, '').trim() || fallback;
+
+    if (isNaN(num)) {
+        if (allowNumberless) {
+            num = '';
+        } else {
+            return null;
+        }
+    }
+
+    const unit =
+        val
+            .replace(num, '')
+            .replace(/[0-9]|-|\./g, '')
+            .trim() || fallback;
+
     return `${num}${unit}`;
 }
 
 /*
 Ems version of cssUnitFallback
 */
-function cssEmFallback(val) {
-    return cssUnitFallback(val, 'em');
+function cssEmFallback(val, allowNumberless = false) {
+    return cssUnitFallback(val, 'em', allowNumberless);
 }
 
 export { cssPx, cssEm, cssPcnt, cssUrl, cssVar, cssUnitFallback, cssEmFallback };