@thinkpixellab-public/px-vue 4.0.24 → 4.0.25

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/package.json

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