@thinkpixellab-public/px-vue 3.0.37 → 3.0.39

package/components/PxBalancedText.vue

@@ -7,14 +7,14 @@
         <!-- html -->
         <component
             v-if="hasHtml"
-            :class="bem('inner', { html: true })"
+            :class="[bem('inner', { html: true }), innerClass]"
             :is="innerTag"
             ref="text"
             v-html="html"
         />
 
         <!-- slot -->
-        <component v-else :class="bem('inner')" :is="innerTag" ref="text">
+        <component v-else :class="[bem('inner'), innerClass]" :is="innerTag" ref="text">
             <slot />
         </component>
     </component>
@@ -35,6 +35,9 @@ export default {
         // the inner tag element
         innerTag: { type: String, default: 'span' },
 
+        // the inner tag element
+        innerClass: { type: String, default: null },
+
         // html that gets set on the inner tag element
         html: { type: String, default: null },
 
@@ -91,6 +94,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 +119,7 @@ export default {
                 return;
             }
 
-            if (this.isSafari) {
+            if (this.isSafari || this.isHeadless) {
                 this.balanced = true;
                 return;
             }

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/components/PxFloat.vue

@@ -273,6 +273,13 @@ export default {
                 document.removeEventListener('keydown', this.onKey);
             }
 
+            if (nv) {
+                let reference = this.getReferenceElement();
+                let popup = this.$refs.popup;
+
+                this.updatePosition(reference, popup);
+            }
+
             // delayed actions (settimeout seems to work but $nextTick doesn't)
 
             setTimeout(() => {

package/components/PxSvg.vue

@@ -100,8 +100,8 @@ export default {
     },
     methods: {
         transform(svg) {
-            if (!svg) {
-                return;
+            if (!svg?.viewBox) {
+                return svg;
             }
             // only a valid viewbox if it has both width/height
             let viewBox =

package/package.json

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