@thinkpixellab-public/px-vue 4.0.25 → 4.0.26

package/components/PxBalancedText.vue

@@ -11,6 +11,7 @@
         <component
             v-if="hasHtml"
             :class="[bem('inner', { html: true }), innerClass]"
+            :style="innerStyle"
             :is="calcInnerTag"
             ref="text"
             v-html="html"
@@ -47,8 +48,16 @@ export default {
          */
         innerTag: { type: String, default: null },
 
-        // the inner tag element
+        /**
+         * Class applied to the inner element.
+         */
         innerClass: { type: String, default: null },
+
+        /**
+         * Style applied to the inner element.
+         */
+        innerStyle: { type: [String, Object], default: null },
+
         /**
          * Html that gets set on the inner tag element
          */
@@ -131,6 +140,7 @@ export default {
             return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
         },
         isHeadless() {
+            // TODO: replace with isUnderTest
             if (isServer()) {
                 return false;
             }
@@ -182,6 +192,9 @@ export default {
                 }
             }
         },
+        getInnerTextRef() {
+            return this.$refs.text;
+        },
     },
 };
 </script>

package/components/PxCardGrid.vue

@@ -137,6 +137,7 @@ You can define a template using space notation like this:
 <script>
 import aspect from '../plugins/filters/aspect.js';
 import PxBaseItems from '../bases/PxBaseItems.vue';
+import PxBaseResize from '../bases/PxBaseResize.vue';
 
 // prettier-ignore
 const defaultTemplates = {
@@ -193,7 +194,7 @@ const cardCountInRowTemplate = rowTemplate => {
 
 export default {
     name: 'px-card-grid',
-    mixins: [PxBaseItems],
+    mixins: [PxBaseResize, PxBaseItems],
     props: {
         templates: { type: Object, default: () => defaultTemplates },
         maxColumns: { type: Number, default: 6 },
@@ -327,12 +328,6 @@ export default {
         },
     },
     mounted() {
-        this.resizeObserver = new ResizeObserver(() => {
-            this.resize();
-        });
-        this.resizeObserver.observe(this.$el);
-
-        this.resize();
         this.updateRowTemplates();
     },
     beforeDestroy() {

package/package.json

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

package/utils/textWidth.js

@@ -27,11 +27,21 @@ const getCssProp = (element, prop) => {
     return window.getComputedStyle(element, null).getPropertyValue(prop);
 };
 
-const getFontFromElement = element => {
+const getFontFromElement = (element, asObject = false) => {
     const fontWeight = getCssProp(element, 'font-weight') || 'normal';
     const fontSize = getCssProp(element, 'font-size') || '16px';
     const fontFamily = getCssProp(element, 'font-family') || 'sans-serif';
 
+    if (asObject) {
+        const lineHeight = getCssProp(element, 'line-height') || 1.2;
+        return {
+            fontWeight,
+            fontSize,
+            fontFamily,
+            lineHeight,
+        };
+    }
+
     return `${fontWeight} ${fontSize} ${fontFamily}`;
 };