@thinkpixellab-public/px-vue 3.0.55 → 3.0.56

package/package.json

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

package/plugins/common.js

@@ -11,6 +11,7 @@ import {
     cssPcnt,
     cssUrl,
     cssVar,
+    cssAspect,
     cssUnitFallback,
     cssEmFallback,
 } from '../utils/cssStr.js';
@@ -30,6 +31,7 @@ export default {
         Vue.prototype.cssPcnt = cssPcnt;
         Vue.prototype.cssUrl = cssUrl;
         Vue.prototype.cssVar = cssVar;
+        Vue.prototype.cssAspect = cssAspect;
         Vue.prototype.cssUnitFallback = cssUnitFallback;
         Vue.prototype.cssEmFallback = cssEmFallback;
 

package/utils/cssStr.js

@@ -93,6 +93,70 @@ function cssNum(val, nanValue = 0) {
     return isNaN(num) ? nanValue : num;
 }
 
+/*
+Attempts to convert multiple input styles into valid aspect-ratio property syntax (the number version)
+
+    cssAspect(1.5) => 1.5
+    cssAspect('1.5') => 1.5
+    cssAspect('3 / 2') => 1.5
+    cssAspect('3:2') => 1.5
+    cssAspect('3 : 2') => 1.5
+    this.cssAspect('3:2:1') => null
+    cssAspect('auto') => auto
+    cssAspect('blah') => null
+    cssAspect('auto', 1.5) => auto
+    cssAspect('blah', 1.5) => 1.5
+    cssAspect(null, 1.5) => 1.5
+
+*/
+function cssAspect(val, fallback = null) {
+    // number
+    if (typeof val == 'number') {
+        return val;
+    }
+
+    // null or empty (return fallback)
+    if (!val) {
+        return fallback;
+    }
+
+    // string
+    if (typeof val == 'string') {
+        val = val.trim();
+
+        // special case 'auto' since it's valid
+        if (val == 'auto') {
+            return val;
+        }
+
+        // look for a delimiter first
+
+        let delimiter = null;
+
+        if (val && val.indexOf(':') > -1) {
+            delimiter = ':';
+        }
+
+        if (val && val.indexOf('/') > -1) {
+            delimiter = '/';
+        }
+
+        if (delimiter) {
+            let parts = val.split(delimiter).map(s => cssNum(s.trim()));
+            if (parts && parts.length == 2) {
+                return parts[0] / parts[1];
+            }
+        }
+
+        // try to just parse the string
+        else {
+            return cssNum(val, fallback);
+        }
+    }
+
+    return fallback;
+}
+
 /*
 Add the specified unit if no other unit is specified.
 
@@ -133,4 +197,15 @@ function cssEmFallback(val, allowNumberless = false) {
     return cssUnitFallback(val, 'em', allowNumberless);
 }
 
-export { cssPx, cssEm, cssPcnt, cssUrl, cssVar, cssNum, cssUnit, cssUnitFallback, cssEmFallback };
+export {
+    cssPx,
+    cssEm,
+    cssPcnt,
+    cssUrl,
+    cssVar,
+    cssAspect,
+    cssNum,
+    cssUnit,
+    cssUnitFallback,
+    cssEmFallback,
+};