@thinkpixellab-public/px-vue 4.0.23 → 4.0.25

package/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+    "semi": true,
+    "arrowParens": "avoid",
+    "singleQuote": true,
+    "tabWidth": 4,
+    "printWidth": 100,
+    "bracketSpacing": true,
+    "htmlWhitespaceSensitivity": "ignore",
+    "endOfLine": "auto"
+}

package/bases/PxBaseItemsSelect.vue

@@ -25,7 +25,7 @@ export default {
 
     props: {
         // TEMP-MIGRATION
-        value: { default: null },
+        modelValue: { default: null },
 
         /**
          * Set the selection as either a single item key or an array of item keys.
@@ -116,11 +116,11 @@ export default {
     },
 
     watch: {
-        // TEMP-MIGRATION
-        value: {
+        // VUE3 MIGRATION, can remove once complete
+        modelValue: {
             immediate: true,
             handler(nv) {
-                if (nv != null) {
+                if (nv) {
                     const name =
                         'bem' in this ? this.bem() : this.$options?.name || 'UnknownComponent';
                     console.error(

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/PxDatePicker.vue

@@ -44,7 +44,7 @@
             <div ref="dialog" :class="bem('dialog')">
                 <px-calendar :class="bem('calendar')" v-model:date="dateValue" />
                 <div :class="bem('clock')" v-if="clock">
-                    <px-clock v-model="dateValue" />
+                    <px-clock v-model:date="dateValue" />
                 </div>
             </div>
         </template>

package/components/PxGsapScrubber.vue

@@ -7,7 +7,7 @@
         <px-icon-button :class="bem('button')" :src="currentButtonIcon" @click="buttonClick" />
         <px-scrubber
             :class="bem('scrubber')"
-            v-model="progress"
+            v-model:progress="progress"
             @seek="seek"
             @dragstart="dragStart"
             @dragend="dragEnd"

package/components/PxRadioButton.vue

@@ -4,7 +4,7 @@
     Creates a toggle button (a control with the appearance of a normal button that can be toggle
     between an on/off state).
 
-    <px-radio-button v-model="checked" />
+    <px-radio-button v-model:checked="checked" />
 -->
 
 <template>

package/components/PxToggleButton.vue

@@ -4,7 +4,7 @@
     Creates a toggle button (a control with the appearance of a normal button that can be toggle
     between an on/off state).
 
-    <px-toggle :v-model="isChecked" variant="sm" />
+    <px-toggle v-model:checked="isChecked" variant="sm" />
 -->
 
 <template>

package/components/PxVueTest.vue

@@ -109,7 +109,7 @@
                         }"
                     >
                         <px-dropdown
-                            v-model="validateThree"
+                            v-model:selected="validateThree"
                             tag="button"
                             trigger="click"
                             :items="fruits"
@@ -214,20 +214,20 @@
             <px-test test-id="px-date-picker" name="px-date-picker">
                 <px-flex vertical align="center" gap="1">
                     <span>Selected Date: {{ currentDateNull }}</span>
-                    <px-date-picker mode="textbox" v-model="currentDateNull" />
-                    <px-date-picker mode="textbox" clock v-model="currentDateNull" />
-                    <px-date-picker v-model="currentDateNull" />
-                    <px-date-picker time v-model="currentDateNull" />
+                    <px-date-picker mode="textbox" v-model:date="currentDateNull" />
+                    <px-date-picker mode="textbox" clock v-model:date="currentDateNull" />
+                    <px-date-picker v-model:date="currentDateNull" />
+                    <px-date-picker time v-model:date="currentDateNull" />
                 </px-flex>
             </px-test>
 
             <px-test test-id="px-clock" name="px-clock">
-                <px-clock v-model="currentDate" />
+                <px-clock v-model:date="currentDate" />
                 Selected Date: {{ currentDate }}
             </px-test>
 
             <px-test test-id="px-calendar" name="px-calendar">
-                <px-calendar v-model="currentDate" />
+                <px-calendar v-model:date="currentDate" />
                 Selected Date: {{ currentDate }}
             </px-test>
 
@@ -241,10 +241,10 @@
                         items-key-property="id"
                         items-value-property="id"
                         items-label-property="name"
-                        v-model="currentFruitOrFruits"
+                        v-model:selected="currentFruitOrFruits"
                     ></px-toggle-button-list>
 
-                    <px-toggle v-model="supportsMultiSelect">Multi-select</px-toggle>
+                    <px-toggle v-model:checked="supportsMultiSelect">Multi-select</px-toggle>
                     <span>{{ currentFruitOrFruits }}</span>
                 </px-flex>
             </px-test>
@@ -257,7 +257,7 @@
 
                     <px-textbox
                         multiline
-                        v-model="currentText"
+                        v-model:text="currentText"
                         rows="5"
                         placeholder="Say it longer..."
                     />
@@ -270,7 +270,7 @@
             <px-test test-id="px-dropdown" name="px-dropdown">
                 <px-flex gap="1" align="center" justify="center">
                     <px-dropdown
-                        v-model="currentFruit"
+                        v-model:selected="currentFruit"
                         tag="button"
                         trigger="click"
                         :items="fruits"

package/dev/demos/Demo-PxPivot.vue

@@ -3,8 +3,8 @@
 -->
 <template>
     <div :class="bem()">
-        <px-pivot :items="tabs" v-model="selectedTab" />
-        <px-slides :items="tabs" v-model="selectedTab" :drag-enabled="false">
+        <px-pivot :items="tabs" v-model:selected="selectedTab" />
+        <px-slides :items="tabs" v-model:selected="selectedTab" :drag-enabled="false">
             <template #slide="{ item }">
                 <div :class="bem('slide')">
                     <h1>{{ item.label }}</h1>

package/dev/demos/Demo-PxSlides.vue

@@ -6,7 +6,7 @@
         <px-flex justify="center" gap="1">
             <button @click="clickPrev">Previous</button>
             <button @click="clickNext">Next</button>
-            <px-toggle v-model="nested">Nested</px-toggle>
+            <px-toggle v-model:checked="nested">Nested</px-toggle>
         </px-flex>
         <px-slides :style="{ flex: 1 }" ref="slides" :items="fruits" items-key-property="id">
             <template #slide="{ item, index }">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thinkpixellab-public/px-vue",
-  "version": "4.0.23",
+  "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/PxTextbox.stories.js

@@ -28,7 +28,7 @@ export const Basic = {
         data() {
             return { sampleText: '' };
         },
-        template: `<input v-model="sampleText" /> <br><br> <PxTextbox v-model:value="sampleText" v-bind="args"/> <br> <br> <PxTextbox :multiline="true" v-model:value="sampleText" v-bind="args"/> <br> <br> {{sampleText}}`,
+        template: `<input v-model="sampleText" /> <br><br> <PxTextbox v-model:text="sampleText" v-bind="args"/> <br> <br> <PxTextbox :multiline="true" v-model:text="sampleText" v-bind="args"/> <br> <br> {{sampleText}}`,
         args: {},
     }),
 };

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'),
                   }
                 : {}),
         },

package/.prettierrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-    semi: true,
-    arrowParens: 'avoid',
-    singleQuote: true,
-    tabWidth: 4,
-    printWidth: 100,
-    bracketSpacing: true,
-    htmlWhitespaceSensitivity: 'ignore',
-    endOfLine: 'auto',
-};