@thinkpixellab-public/px-vue 3.0.34 → 3.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.34",
+    "version": "3.0.35",
     "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 };