@thinkpixellab-public/px-vue 5.3.7 → 5.3.9

package/bases/PxBaseUniqueId.vue

@@ -1,19 +1,23 @@
 <script>
+import { useId } from 'vue';
+
 export default {
     beforeCreate() {
-        const id = this.$.uid || Math.floor(Math.random() * 1000);
-        this.$__uniqueId = String(id).padStart(4, '0');
+        // useId() (Vue 3.5+) yields an id that is stable across SSR and client
+        // renders, avoiding hydration mismatches. The old source (this.$.uid) is
+        // a per-render-pass counter that differs between server and client.
+        this.$__uniqueId = useId();
     },
     methods: {
         /**
-         * Get a unique id derived from vue's unique component identifier (this.$.uid) for use when
-         * an id is required for an inputs, labels, etc.
+         * Get a unique, SSR-stable id for use when an id is required for inputs,
+         * labels, etc. Optionally prefixed.
          *
          * @param {string} prefix = null
          * @returns {string}
          *
          * @example
-         *      this.uniqueId('label') => 'label-0003'
+         *      this.uniqueId('label') => 'label-v-3-0'
          */
 
         uniqueId(prefix = null) {

package/components/PxPivot.vue

@@ -129,21 +129,19 @@ export default {
             }
 
             const refName = this.getTabContentRefName(this.selectedItem);
+            const selected = this.$refs[refName]?.[0];
 
-            if (!this.$refs[refName]) {
+            // the selected tab may not be rendered yet (the items/selectedKeys
+            // watchers re-run this once it is)
+            if (!selected) {
+                this.selectorVisible = false;
                 return;
             }
 
-            const selected = this.$refs[refName][0];
             const selectedRect = getClientRect(selected, this.$refs.tabs);
-
-            if (selected) {
-                this.selectorVisible = true;
-                this.selectorOffset = selectedRect.left;
-                this.selectorWidth = selectedRect.width;
-            } else {
-                this.selectorVisible = false;
-            }
+            this.selectorVisible = true;
+            this.selectorOffset = selectedRect.left;
+            this.selectorWidth = selectedRect.width;
 
             if (this.scrolls && this.animated) {
                 selected.scrollIntoView({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "5.3.7",
+    "version": "5.3.9",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"
@@ -69,14 +69,14 @@
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/test-utils": "^2.4.11",
         "@vueless/storybook-dark-mode": "^10.0.8",
-        "chromatic": "^17.7.2",
+        "chromatic": "^18.0.0",
         "jsdom": "^29.1.1",
-        "oxfmt": "^0.56.0",
-        "oxlint": "^1.71.0",
+        "oxfmt": "^0.57.0",
+        "oxlint": "^1.72.0",
         "sass": "^1.101.0",
         "storybook": "^10.4.6",
         "storybook-addon-pseudo-states": "^10.4.6",
-        "vite": "^8.1.0",
+        "vite": "^8.1.3",
         "vitest": "^4.1.9",
         "vue": "^3.5.39"
     },

package/plugins/common.js

@@ -17,7 +17,6 @@ import slug from './filters/slug.js';
 import spacenator from './filters/spacenator.js';
 import date from './filters/date.js';
 import isServer from '../utils/isServer.js';
-import uniqueId from '../utils/uniqueId.js';
 
 import { nextTick } from 'vue';
 
@@ -36,7 +35,6 @@ export default {
         app.config.globalProperties.cssToNull = cssToNull;
         app.config.globalProperties.hasSlot = hasSlot;
         app.config.globalProperties.isServer = isServer;
-        app.config.globalProperties.uniqueId = uniqueId;
 
         /**
          * Collection of common filters.

package/utils/uniqueId.js

@@ -1,17 +0,0 @@
-/**
- * Get a unique id derived from vue's unique component identifier (this._uid) for use when
- * an id is required for an inputs, labels, etc.
- *
- * @example
- *   uniqueId('label') => 'label-0003'
- */
-
-function uniqueId(prefix = null) {
-    let id = this?.$?.uid;
-    if (prefix) {
-        return prefix + '-' + id;
-    }
-    return id.toString();
-}
-
-export default uniqueId;