@thinkpixellab-public/px-vue 5.2.0 → 5.3.1

package/bases/PxBaseActiveTab.vue

@@ -13,7 +13,7 @@ export default {
         return { isBrowserTabActive: false, browserTabActivationCount: 0 };
     },
     mounted() {
-        if (typeof document == undefined) {
+        if (typeof document === 'undefined') {
             console.warn('Unable to create visibility change listener.  No document object.');
             return;
         }
@@ -21,7 +21,7 @@ export default {
         document.addEventListener('visibilitychange', this.onTabVisibilityChange);
         this.onTabVisibilityChange();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         document.removeEventListener('visibilitychange', this.onTabVisibilityChange);
     },
     methods: {

package/bases/PxBaseScroll.vue

@@ -13,7 +13,7 @@ export default {
     computed: {
         scrollingElement() {
             // derived classes can return something here to watch somethign other than document
-            return window !== undefined ? window : null;
+            return typeof window !== 'undefined' ? window : null;
         },
     },
     // watch: {},
@@ -22,7 +22,8 @@ export default {
             let scroller = this.scrollingElement;
             let ticking = false;
 
-            scroller.addEventListener('scroll', event => {
+            this._scroller = scroller;
+            this._scrollHandler = () => {
                 this.scrollPosition.x = scroller.scrollX;
                 this.scrollPosition.y = scroller.scrollY;
 
@@ -34,7 +35,16 @@ export default {
 
                     ticking = true;
                 }
-            });
+            };
+
+            scroller.addEventListener('scroll', this._scrollHandler);
+        }
+    },
+    beforeUnmount() {
+        if (this._scroller && this._scrollHandler) {
+            this._scroller.removeEventListener('scroll', this._scrollHandler);
+            this._scroller = null;
+            this._scrollHandler = null;
         }
     },
     methods: {

package/components/PxBackgroundFader.vue

@@ -75,7 +75,7 @@ export default {
                 return;
             }
 
-            this.fadeLeaveDelay == !!ov ? this.duration : 0;
+            this.fadeLeaveDelay = ov ? this.duration : 0;
 
             if (ov && this.backgrounds.length) {
                 this.backgrounds.shift();

package/components/PxCardGrid.vue

@@ -330,7 +330,7 @@ export default {
     mounted() {
         this.updateRowTemplates();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.resizeObserver.disconnect();
         delete this.resizeObserver;
     },

package/components/PxColorPanel.vue

@@ -105,7 +105,7 @@ export default {
             });
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.satvalDrag) {
             this.satvalDrag.destroy();
         }

package/components/PxGsapScrubber.vue

@@ -57,7 +57,7 @@ export default {
     },
     // watch: {},
     // mounted() {},
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.timeline) {
             this.timeline.eventCallback('onUpdate', null);
         }

package/components/PxMenu.vue

@@ -184,11 +184,11 @@ const menuDirective = createDirective('click');
 
 export {
     PxMenu as default,
-    PxMenu as PxMenu,
-    createDirective as createDirective,
-    contextMenuDirective as contextMenuDirective,
-    menuDirective as menuDirective,
-    clickDirective as clickDirective,
+    PxMenu,
+    createDirective,
+    contextMenuDirective,
+    menuDirective,
+    clickDirective,
 };
 </script>
 

package/components/PxSlides.vue

@@ -240,7 +240,7 @@ export default {
             disabled: !this.dragEnabled,
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.drag) {
             this.drag.destroy();
         }

package/components/PxSticky.vue

@@ -64,7 +64,7 @@ export default {
     mounted() {
         this.updateConnections();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.tryDisconnect();
     },
     methods: {

package/components/PxSyncHeight.vue

@@ -118,7 +118,7 @@ export default {
             );
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.group && this.isMounted) {
             GroupManager.removeFromGroup(this, this.group);
         }

package/components/PxToolPanel.vue

@@ -202,12 +202,12 @@ export default {
                 y: 0,
                 width: null,
                 height: null,
-                ...(this.bounds || {}),
+                ...this.bounds,
             };
             this.ready = true;
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.removeContainerResizeHandlers();
         if (this.dragHandler) {
             this.dragHandler.disabled = true;
@@ -306,7 +306,7 @@ export default {
 
         removeContainerResizeHandlers() {
             if (this.teleportToBody) {
-                window.removeEventListener('resize', this.handleWindowResize);
+                window.removeEventListener('resize', this.updateContainerSize);
             } else if (this.resizeObserver) {
                 this.resizeObserver.disconnect();
                 this.resizeObserver = null;

package/components/PxTransitionExpand.vue

@@ -55,7 +55,7 @@ export default {
             element.style.opacity = null;
 
             // force repaint
-            getComputedStyle(element).height;
+            void getComputedStyle(element).height;
 
             // trigger the animation
             //setTimeout(() => {
@@ -76,7 +76,7 @@ export default {
             element.style.opacity = 0;
 
             // force repaint
-            getComputedStyle(element).height;
+            void getComputedStyle(element).height;
 
             //setTimeout(() => {
             element.style.height = 0;

package/composables/useVModelRef.js

@@ -1,19 +1,18 @@
 import { ref, watch } from 'vue';
 
 export default function useVModelRef(props, propName, emit) {
-    if (!props[propName]) {
+    if (!(propName in props)) {
         console.error(`The prop ${propName} is required for the useVModel composable.`);
         return null;
     }
 
-    const prop = props[propName];
-    const propRef = ref(prop);
+    const propRef = ref(props[propName]);
     const emitName = `update:${propName}`;
 
     watch(
-        () => prop,
+        () => props[propName],
         nv => {
-            progress.value = nv;
+            propRef.value = nv;
         },
     );
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "5.2.0",
+    "version": "5.3.1",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"
@@ -44,7 +44,7 @@
     "dependencies": {
         "@floating-ui/dom": "^1.7.6",
         "@popperjs/core": "^2.11.8",
-        "@thinkpixellab-public/px-styles": "^4.2.1",
+        "@thinkpixellab-public/px-styles": "^4.2.2",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
         "body-scroll-lock": "^3.1.5",
         "chrono-node": "^2.9.1",
@@ -71,7 +71,7 @@
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/test-utils": "^2.4.11",
         "@vueless/storybook-dark-mode": "^10.0.8",
-        "chromatic": "^17.2.0",
+        "chromatic": "^17.3.0",
         "jsdom": "^29.1.1",
         "oxfmt": "^0.53.0",
         "oxlint": "^1.68.0",

package/plugins/common-client.js

@@ -10,12 +10,41 @@ export default {
             $eventBus.emit(eventName, values);
         };
 
+        // Track each handler against the component instance that registered it
+        // (when called as `this.$globalOn(...)`, `this` is that instance) so it
+        // can be removed automatically on unmount. Without this, component-scoped
+        // subscriptions leak — they survive unmount and keep firing on dead
+        // instances across client-side navigation. This plugin is client-only
+        // ($globalOn is undefined on the server), so none of this runs in SSR.
         app.config.globalProperties.$globalOn = function (eventName, fn) {
             $eventBus.on(eventName, fn);
+            if (this) {
+                (this.__globalBusHandlers ??= []).push([eventName, fn]);
+            }
         };
 
         app.config.globalProperties.$globalOff = function (eventName, fn) {
             $eventBus.off(eventName, fn);
+            // keep the per-instance tracking in sync with manual removals
+            if (this && this.__globalBusHandlers) {
+                this.__globalBusHandlers = this.__globalBusHandlers.filter(
+                    ([e, f]) => !(e === eventName && (fn === undefined || f === fn)),
+                );
+            }
         };
+
+        // Auto-remove a component's bus handlers when it unmounts, by reference,
+        // so only that instance's subscriptions are cleaned up.
+        app.mixin({
+            beforeUnmount() {
+                const handlers = this.__globalBusHandlers;
+                if (handlers) {
+                    for (const [eventName, fn] of handlers) {
+                        $eventBus.off(eventName, fn);
+                    }
+                    this.__globalBusHandlers = null;
+                }
+            },
+        });
     },
 };

package/plugins/filters/spacenator.js

@@ -2,6 +2,9 @@
 // orphans.
 
 export default (str, spaceLength = 8, ignoreLength = 12, nbsp = '\xA0') => {
+    if (!str || typeof str !== 'string') {
+        return str;
+    }
     if (str.length <= ignoreLength || !spaceLength) {
         return str;
     }

package/plugins/filters/striphtml.js

@@ -4,11 +4,14 @@ export default val => {
         val = val.replace(/<\/li>/g, '</li> ');
         val = val.replace(/<\/div>/g, '</div> ');
 
-        let div = document.createElement('div');
-        div.innerHTML = val;
-
-        let text = div.innerText || '';
-        text = text.replace(/(\n)+/g, ' ');
+        // Parse into a <template>: its content is an inert fragment, so
+        // <img onerror> and other resource loads never fire the way they do
+        // when innerHTML is set on a live element. Fragment parsing (unlike
+        // DOMParser's full-document parse) keeps leading/trailing whitespace,
+        // which callers rely on when stripping per-fragment and joining.
+        const tpl = document.createElement('template');
+        tpl.innerHTML = val;
+        const text = (tpl.content.textContent || '').replace(/(\n)+/g, ' ');
 
         return text;
     } else {

package/utils/balanceText.js

@@ -90,72 +90,4 @@ function textElementIsMultipleLines(element) {
     return actualHeight > expectedSingleLineHeight + buffer;
 }
 
-// Function to see if a headline is multiple lines we only want to break if the headline is multiple
-// lines. We achieve this by turning the first word into a span and then we compare the height of
-// that span to the height of the entire headline. If the headline is bigger than the span by 10px
-// we balance the headline.
-function textElementIsMultipleLinesLEGACY(element) {
-    if (!element) {
-        console.warn('textElementIsMultipleLines called with no element');
-        return false;
-    }
-
-    // try to move deeper into the element
-
-    try {
-        if (element.nodeType == 1) {
-            while (element.firstChild && element.firstChild.nodeType == 1) {
-                element = element.firstChild;
-            }
-        }
-    } catch {
-        return false;
-    }
-
-    var firstWordHeight;
-    var elementHeight;
-    var HEIGHT_OFFSET;
-    var elementWords;
-    var firstWord;
-    var ORIGINAL_ELEMENT_TEXT;
-
-    ORIGINAL_ELEMENT_TEXT = element.innerHTML;
-
-    // Usually there is around a 5px discrepency between the first word and the height of the whole
-    // headline so subtract the height of the headline by 10 px and we should be good
-    HEIGHT_OFFSET = 10;
-
-    // Get all the words in the headline as an array -- will include punctuatio. This is used to put
-    // the headline back together
-    elementWords = element.innerHTML.split(' ');
-
-    // Make span for first word and give it an id so we can access it in le dom
-    firstWord = document.createElement('span');
-    firstWord.id = 'element-first-word';
-    firstWord.innerHTML = elementWords[0];
-
-    // This is the entire headline as an array except for first word. We will append it to the
-    // headline after the span
-    elementWords = elementWords.slice(1);
-
-    // Empty the headline and append the span to it
-    element.innerHTML = '';
-    element.appendChild(firstWord);
-
-    // Add the rest of the element back to it
-    element.innerHTML += ' ' + elementWords.join(' ');
-
-    // Update the first word variable in the dom
-    firstWord = document.getElementById('element-first-word');
-
-    firstWordHeight = firstWord?.offsetHeight;
-    elementHeight = element?.offsetHeight;
-
-    // Restore the original element text
-    element.innerHTML = ORIGINAL_ELEMENT_TEXT;
-
-    // Compare the height of the element and the height of the first word
-    return elementHeight - HEIGHT_OFFSET > firstWordHeight;
-}
-
 export default balanceText;

package/utils/caretPosition.js

@@ -31,10 +31,8 @@ function createRange(node, endPos) {
 function canProceed(element) {
     if (
         !element ||
-        !window ||
-        typeof window == undefined ||
-        !document ||
-        typeof document == undefined ||
+        typeof window === 'undefined' ||
+        typeof document === 'undefined' ||
         !element.contains(document.activeElement)
     ) {
         return false;

package/utils/drag.js

@@ -48,7 +48,7 @@ function Drag(element, options) {
 
     // touch support test
     this.supportsTouch = !!(
-        typeof window !== undefined &&
+        typeof window !== 'undefined' &&
         window.TouchEvent &&
         'ontouchstart' in window
     );
@@ -170,8 +170,6 @@ function Drag(element, options) {
                 this.ops.onInertia(this.inertiaEv);
             }
 
-            console.log('inertia');
-
             // test for near zero velocity and end
             if (Math.abs(this.velocity.x) > 0.5 || Math.abs(this.velocity.y) > 0.5) {
                 requestAnimationFrame(this.inertiaUpdate.bind(this));

package/utils/scrollWatcher.js

@@ -265,6 +265,9 @@ class ScrollWatcher {
 
     static removeWatch(watcherElement) {
         var idx = this.elements.indexOf(watcherElement);
+        if (idx === -1) {
+            return;
+        }
         this.elements = this.elements
             .slice(0, idx)
             .concat(this.elements.slice(idx + 1, this.elements.length));

package/utils/svgIcons.js

@@ -60,7 +60,7 @@ function preparePoints(points, ops) {
     // shift to center
     bounds = getBoundingBox(points);
 
-    if (!!ops.naturalSizeFixed) {
+    if (ops.naturalSizeFixed) {
         points = shiftPoints(
             points,
             (bounds.width - ops.naturalSize) / 2,
@@ -101,30 +101,28 @@ const svgArrowDefaults = {
     // sizing, stroke, etc.
     ...sharedDefaults,
 
-    ...{
-        /**
-         * The angle in which the arrow is pointing. If a number is provide it will be interpreted
-         * in degrees (0 is up, 90 is pointing right, etc.). Alternatively one of the following
-         * strings can be provided as the direction in which it points: up, right, down, left.
-         */
-        angle: 0,
-
-        /**
-         * The aspect of the arrow (think of a rectangle that the arrow will fill), aspect is considered
-         * for an arrow that is pointing up
-         */
-        pointerAspect: 2,
-
-        /**
-         * The size of the arrow relative to the outer bounds.
-         */
-        pointerSize: 0.4,
-
-        /**
-         * If true, no stem will be generated
-         */
-        chevron: false,
-    },
+    /**
+     * The angle in which the arrow is pointing. If a number is provide it will be interpreted
+     * in degrees (0 is up, 90 is pointing right, etc.). Alternatively one of the following
+     * strings can be provided as the direction in which it points: up, right, down, left.
+     */
+    angle: 0,
+
+    /**
+     * The aspect of the arrow (think of a rectangle that the arrow will fill), aspect is considered
+     * for an arrow that is pointing up
+     */
+    pointerAspect: 2,
+
+    /**
+     * The size of the arrow relative to the outer bounds.
+     */
+    pointerSize: 0.4,
+
+    /**
+     * If true, no stem will be generated
+     */
+    chevron: false,
 };
 
 function svgArrow(options = {}) {
@@ -196,33 +194,31 @@ const svgCheckDefaults = {
     // sizing, stroke, etc.
     ...sharedDefaults,
 
-    ...{
-        /**
-         * The aspect of the checkmark (think of the checkmark as through drawn an angle of 0
-         * degrees so it is perfectly straight, this is the aspect between width and height of the
-         * rectangle that creates).
-         */
-        aspect: 0.4,
-
-        /**
-         * The rotational angle of the checkmark.
-         */
-        angle: 40,
-
-        /**
-         * Represents the amount of lift that bottom of the checkmark has relative to the total
-         * height (so a value of 0.5 would cause) the bottom line to be angle so much that it
-         * reaches the middle of the horizontal line. Normally this is often 0 (for a complete right
-         * angle) and almost always less than around 0.25.
-         */
-        lift: 0,
-    },
+    /**
+     * The aspect of the checkmark (think of the checkmark as through drawn an angle of 0
+     * degrees so it is perfectly straight, this is the aspect between width and height of the
+     * rectangle that creates).
+     */
+    aspect: 0.4,
+
+    /**
+     * The rotational angle of the checkmark.
+     */
+    angle: 40,
+
+    /**
+     * Represents the amount of lift that bottom of the checkmark has relative to the total
+     * height (so a value of 0.5 would cause) the bottom line to be angle so much that it
+     * reaches the middle of the horizontal line. Normally this is often 0 (for a complete right
+     * angle) and almost always less than around 0.25.
+     */
+    lift: 0,
 };
 
 function svgCheck(options = {}) {
     const ops = { ...svgCheckDefaults, ...options };
 
-    let points, bounds, viewBox;
+    let points, viewBox;
 
     const w = ops.aspect;
     const h = 0.9;

package/utils/tween.js

@@ -27,7 +27,7 @@ const easings = {
 };
 
 const isClient = () => {
-    return !process.server && typeof window !== 'undefined' && typeof document !== undefined;
+    return !process.server && typeof window !== 'undefined' && typeof document !== 'undefined';
 };
 
 const getActiveTweens = () => {
@@ -51,7 +51,8 @@ const getNextTweenId = () => {
         window.pxTween = window?.pxTween || {};
         window.pxTween.nextTweenId = 0;
     }
-    return window.pxTween.nextTweenId + 1;
+    window.pxTween.nextTweenId += 1;
+    return window.pxTween.nextTweenId;
 };
 
 const deleteTween = id => {
@@ -83,14 +84,15 @@ function tweenValue(from, to, cb, { time, done, easeFunc, delay } = {}) {
                 cb(from - ease(percentage) * diff);
             }
             if (elapsed < targetTime + delay) {
-                window && window.requestAnimationFrame(step);
+                if (window) window.requestAnimationFrame(step);
             } else {
                 cb(to);
-                done && done();
+                if (done) done();
+                deleteTween(id);
             }
         }
     }
-    window && window.requestAnimationFrame(step);
+    if (window) window.requestAnimationFrame(step);
     return id;
 }
 

package/utils/uniqueId.js

@@ -14,8 +14,4 @@ function uniqueId(prefix = null) {
     return id.toString();
 }
 
-function isServer() {
-    return (typeof process !== 'undefined' && process.server) || typeof window == 'undefined';
-}
-
 export default uniqueId;

package/utils/utils.js

@@ -33,7 +33,7 @@ export function ensureArray(value) {
  * @param {*} fn The function to be called to generate each item.
  */
 export function arrayFill(count, fn) {
-    return Array.from({ count }, (_, i) => fn(i));
+    return Array.from({ length: count }, (_, i) => fn(i));
 }
 
 /**
@@ -282,6 +282,11 @@ export function deepMerge(target, source, overwrite = true) {
 
     for (const key in source) {
         if (source.hasOwnProperty(key)) {
+            // Don't let attacker-controlled keys walk the prototype chain.
+            if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+                continue;
+            }
+
             const sourceValue = source[key];
             const targetValue = target[key];
 
@@ -386,7 +391,7 @@ export function getClientRect(element, relativeTo = null, scrollAdjust = true) {
     // TODO: do we need to adjust for other scroll containers?
 
     let scroll = { left: 0, top: 0 };
-    if (scrollAdjust && typeof window !== undefined) {
+    if (scrollAdjust && typeof window !== 'undefined') {
         scroll.left = window.scrollX;
         scroll.top = window.scrollY;
     }