@thinkpixellab-public/px-vue 3.0.33 → 3.0.34

package/package.json

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

package/plugins/common.js

@@ -5,7 +5,15 @@
 
 import bem from '../utils/bem';
 import isServer from '../utils/isServer.js';
-import { cssPx, cssEm, cssPcnt, cssUrl, cssVar } from '../utils/cssStr.js';
+import {
+    cssPx,
+    cssEm,
+    cssPcnt,
+    cssUrl,
+    cssVar,
+    cssUnitFallback,
+    cssEmFallback,
+} from '../utils/cssStr.js';
 import aspect from './filters/aspect.js';
 import kebab from './filters/kebab.js';
 import slug from './filters/slug.js';
@@ -22,6 +30,8 @@ export default {
         Vue.prototype.cssPcnt = cssPcnt;
         Vue.prototype.cssUrl = cssUrl;
         Vue.prototype.cssVar = cssVar;
+        Vue.prototype.cssUnitFallback = cssUnitFallback;
+        Vue.prototype.cssEmFallback = cssEmFallback;
 
         // filters
         // note: filters can be called as methods with something like

package/utils/cssStr.js

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