@thinkpixellab-public/px-vue 4.0.24 → 4.0.26

package/bases/PxBaseSvg.vue

@@ -1,6 +1,6 @@
 <script>
 import isServer from '../utils/isServer';
-import { cssEmFallback } from '../utils/cssStr.js';
+import { cssUnitScale, cssEmFallback } from '../utils/cssStr.js';
 
 export default {
     emits: [
@@ -106,8 +106,24 @@ export default {
         calcSrc() {
             return this.src;
         },
+        calcAspectRatio() {
+            if (this.svgViewBox) {
+                const viewBox = this.svgViewBox.split(' ');
+                const width = parseFloat(viewBox[2]);
+                const height = parseFloat(viewBox[3]);
+                if (width && height) {
+                    return width / height;
+                }
+            }
+            if (this.svgWidth && this.svgHeight) {
+                return this.svgWidth / this.svgHeight;
+            }
+
+            // fallback is 1:1
+            return 16 / 9;
+        },
         calcHeight() {
-            if (!this.size) {
+            if (!this.size && this.svgHeight) {
                 return this.svgHeight;
             }
 
@@ -115,11 +131,15 @@ export default {
                 return cssEmFallback(this.size);
             }
 
-            // equivalent of 'auto' (but needs to be a number or else the parse shows console errors)
-            return '100%';
+            if (this.size && this.calcAspectRatio) {
+                return cssUnitScale(cssEmFallback(this.size), 1 / this.calcAspectRatio);
+            }
+
+            //
+            return '100';
         },
         calcWidth() {
-            if (!this.size) {
+            if (!this.size && this.svgWidth) {
                 return this.svgWidth;
             }
 
@@ -127,8 +147,12 @@ export default {
                 return cssEmFallback(this.size);
             }
 
+            if (this.size && this.calcAspectRatio) {
+                return cssUnitScale(cssEmFallback(this.size), this.calcAspectRatio);
+            }
+
             // equivalent of 'auto' (but needs to be a number or else the parse shows console errors)
-            return '100%';
+            return '100';
         },
         calcStyle() {
             return null;
@@ -172,18 +196,20 @@ export default {
                 let width =
                     svg.width.baseVal.unitType == 1 || svg.width.baseVal.unitType == 5
                         ? parseFloat(svg.width.baseVal.value)
-                        : viewBox.width;
+                        : svg.viewBox?.width || 0;
                 let height =
                     svg.height.baseVal.unitType == 1 || svg.height.baseVal.unitType == 5
                         ? parseFloat(svg.height.baseVal.value)
-                        : viewBox.height;
+                        : svg.viewBox?.height || 0;
 
                 // save as data values
-                this.svgViewBox = viewBox
-                    ? `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`
-                    : `0 0 ${width} ${height}`;
-                this.svgWidth = width;
-                this.svgHeight = height;
+                if (viewBox?.width && viewBox?.height) {
+                    this.svgViewBox = viewBox
+                        ? `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`
+                        : `0 0 ${width} ${height}`;
+                    this.svgWidth = width;
+                    this.svgHeight = height;
+                }
             }
 
             // string replace

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.24",
+  "version": "4.0.26",
   "description": "General purpose Vue components and helpers that can be used across projects.",
   "author": {
     "name": "Pixel Lab"

package/stories/PxSvg.stories.js

@@ -2,6 +2,8 @@ import PxSvg from '@/components/PxSvg.vue';
 import { extractArgTypes } from '@/storybook/sb-utils.js';
 
 import alphaSvg from './assets/alpha.svg';
+import alphaSizeWidthSvg from './assets/alphaSizeWidth.svg';
+import alphaNoSizingSvg from './assets/alphaNoSizing.svg';
 
 export default {
     component: PxSvg,
@@ -29,11 +31,16 @@ export const Basic = {
         setup() {
             return { args };
         },
-        template: `<PxSvg v-bind="args" />`,
+        template: `<PxSvg v-bind="args" size="200px" />`,
     }),
 };
 
-export const Advanced = {
+export const WidthAndHeightNoViewBox = {
     ...Basic,
-    // args: { size: '2em' },
+    args: { src: alphaSizeWidthSvg },
+};
+
+export const NoSizing = {
+    ...Basic,
+    args: { src: alphaNoSizingSvg },
 };

package/stories/assets/alphaNoSizing.svg

@@ -0,0 +1,6 @@
+
+<svg id='svg1'  xmlns='http://www.w3.org/2000/svg'>
+  <circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
+  <circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
+  <circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
+</svg>

package/stories/assets/alphaSizeWidth.svg

@@ -0,0 +1,6 @@
+
+<svg id='svg1' width="100" height="100" xmlns='http://www.w3.org/2000/svg'>
+  <circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
+  <circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
+  <circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
+</svg>

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}`;
 };
 

package/vite.config.js

@@ -16,14 +16,8 @@ export default defineConfig({
 
             ...(USE_PX_LOCAL
                 ? {
-                      '@thinkpixellab-public/px-styles': path.resolve(
-                          __dirname,
-                          '../px-styles-vue3',
-                      ),
-                      '@thinkpixellab/px-edge-shared': path.resolve(
-                          __dirname,
-                          '../px-edge-shared-nuxt3',
-                      ),
+                      '@thinkpixellab-public/px-styles': path.resolve(__dirname, '../px-styles'),
+                      '@thinkpixellab/px-edge-shared': path.resolve(__dirname, '../px-edge-shared'),
                   }
                 : {}),
         },