@thinkpixellab-public/px-vue 5.3.6 → 5.3.8

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

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "5.3.6",
+    "version": "5.3.8",
     "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;