wave-ui 3.26.1 → 3.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.26.1",
+  "version": "3.27.0",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -77,7 +77,7 @@
     "vuex": "^4.1.0"
   },
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": "^3.5.0"
   },
   "engines": {
     "node": ">=16.0.0",

package/src/wave-ui/components/w-accordion/item.vue

@@ -69,11 +69,16 @@
 </template>
 
 <script>
+import { useId } from 'vue'
 import AccordionContent from './accordion-content.vue'
 
 export default {
   name: 'w-accordion-item',
 
+  setup () {
+    return { accordionItemUid: useId() }
+  },
+
   components: { AccordionContent },
 
   props: {
@@ -100,7 +105,7 @@ export default {
   computed: {
     accordionItem: {
       get () {
-        return this.getAccordionItem(this._.uid)
+        return this.getAccordionItem(this.accordionItemUid)
       },
       set () {}
     },
@@ -130,7 +135,7 @@ export default {
   created () {
     // Register this item to the w-accordion component.
     this.registerItem({
-      _cuid: this._.uid,
+      _cuid: this.accordionItemUid,
       _index: 0,
       _expanded: this.expanded,
       _disabled: this.disabled,
@@ -140,7 +145,7 @@ export default {
   },
 
   beforeUnmount () {
-    this.unregisterItem(this._.uid)
+    this.unregisterItem(this.accordionItemUid)
   }
 }
 </script>

package/src/wave-ui/components/w-checkbox.vue

@@ -2,13 +2,13 @@
 component(
   ref="formEl"
   :is="formRegister && !wCheckboxes ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue: isChecked, disabled: isDisabled, readonly: isReadonly }"
+  v-bind="formRegister && { validators, inputValue: isChecked, disabled: isDisabled, readonly: isReadonly, noBlurValidation }"
   v-model:valid="valid"
   @reset="$emit('update:modelValue', isChecked = null);$emit('input', null)"
   :class="classes")
   input(
     ref="input"
-    :id="`w-checkbox--${_.uid}`"
+    :id="inputId"
     type="checkbox"
     :name="inputName"
     :checked="isChecked || null"
@@ -24,12 +24,12 @@ component(
   template(v-if="hasLabel && labelOnLeft")
     label.w-checkbox__label.w-form-el-shakable.pr2(
       v-if="$slots.default"
-      :for="`w-checkbox--${_.uid}`"
+      :for="inputId"
       :class="labelClasses")
       slot {{ label }}
     label.w-checkbox__label.w-form-el-shakable.pr2(
       v-else-if="label"
-      :for="`w-checkbox--${_.uid}`"
+      :for="inputId"
       :class="labelClasses"
       v-html="label")
   .w-checkbox__input(@click="$refs.input.focus();$refs.input.click()" :class="this.color")
@@ -38,12 +38,12 @@ component(
   template(v-if="hasLabel && !labelOnLeft")
     label.w-checkbox__label.w-form-el-shakable.pl2(
       v-if="$slots.default"
-      :for="`w-checkbox--${_.uid}`"
+      :for="inputId"
       :class="labelClasses")
       slot {{ label }}
     label.w-checkbox__label.w-form-el-shakable.pl2(
       v-else-if="label"
-      :for="`w-checkbox--${_.uid}`"
+      :for="inputId"
       :class="labelClasses"
       v-html="label")
 </template>
@@ -73,8 +73,8 @@ export default {
     round: { type: Boolean },
     dark: { type: Boolean },
     light: { type: Boolean }
-    // Props from mixin: name, disabled, readonly, required, tabindex, validators.
-    // Computed from mixin: inputName, isDisabled & isReadonly.
+    // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
+    // Computed from mixin: inputId, inputName, isDisabled & isReadonly.
   },
 
   emits: ['input', 'update:modelValue', 'focus', 'blur'],

package/src/wave-ui/components/w-checkboxes.vue

@@ -2,7 +2,7 @@
 component(
   ref="formEl"
   :is="formRegister ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue: checkboxItems.some(item => item._isChecked), disabled: isDisabled }"
+  v-bind="formRegister && { validators, inputValue: checkboxItems.some(item => item._isChecked), disabled: isDisabled, noBlurValidation }"
   v-model:valid="valid"
   @reset="reset"
   :column="!inline"
@@ -51,7 +51,7 @@ export default {
     round: { type: Boolean },
     color: { type: String, default: 'primary' },
     labelColor: { type: String, default: 'primary' }
-    // Props from mixin: name, disabled, readonly, required, validators.
+    // Props from mixin: id, name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
 

package/src/wave-ui/components/w-form-element.vue

@@ -20,6 +20,8 @@ export default {
     readonly: { type: Boolean },
     inputValue: { required: true }, // The form element's input value.
     validators: { type: Array },
+    /** When `true`, skip blur validation for this element. When `false`, force blur validation even if `w-form` has `no-blur-validation`. When unset, inherit from the form. */
+    noBlurValidation: { type: Boolean },
     isFocused: { default: false }, // Watched.
     column: { default: false }, // Flex direction of the embedded component: column or row by default.
     wrap: { default: false } // Flex-wrap if needed.
@@ -57,6 +59,13 @@ export default {
         'w-form-el',
         classes[this.Validation.isValid === null ? 2 : ~~this.Validation.isValid]
       ]
+    },
+
+    // Per-element `no-blur-validation` overrides the form when set; otherwise inherit `w-form`.
+    shouldSkipBlurValidation () {
+      if (this.noBlurValidation === true) return true
+      if (this.noBlurValidation === false) return false
+      return !!this.formProps.noBlurValidation
     }
   },
 
@@ -89,7 +98,7 @@ export default {
       // When focusing, reset the hasJustReset flag so the input value is watched again.
       if (val) this.hasJustReset = false
       // On blur, Update the form element's validity.
-      else if (!this.formProps.noBlurValidation && this.validators && !this.readonly) {
+      else if (!this.shouldSkipBlurValidation && this.validators && !this.readonly) {
         this.$emit('update:valid', await this.validateElement(this))
       }
     }

package/src/wave-ui/components/w-form.vue

@@ -49,7 +49,8 @@ export default {
       formUnregister: this.unregister,
       validateElement: this.validateElement,
       // Give access to the form params (like disabled) to all the form components.
-      // To keep it reactive, we need an object not a list of props (by design in Vue).
+      // Use the form instance (not `this.$props`): injected descendants must read reactive
+      // props (`no-blur-validation`, `no-keyup-validation`, etc.) through the instance proxy.
       formProps: this.$props
     }
   },
@@ -77,7 +78,7 @@ export default {
     },
 
     unregister (formElement) {
-      this.formElements = this.formElements.filter(item => item._.uid !== formElement._.uid)
+      this.formElements = this.formElements.filter(item => item !== formElement)
     },
 
     /**

package/src/wave-ui/components/w-input.vue

@@ -2,7 +2,7 @@
 component(
   ref="formEl"
   :is="formRegister ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue, disabled: isDisabled, readonly: isReadonly, isFocused }"
+  v-bind="formRegister && { validators, inputValue, disabled: isDisabled, readonly: isReadonly, isFocused, noBlurValidation }"
   v-model:valid="valid"
   @reset="$emit('update:modelValue', inputValue = '');$emit('input', '')"
   :wrap="hasLabel && labelPosition !== 'inside'"
@@ -15,17 +15,17 @@ component(
     template(v-if="labelPosition === 'left'")
       label.w-input__label.w-input__label--left.w-form-el-shakable(
         v-if="$slots.default || label"
-        :for="`w-input--${_.uid}`"
+        :for="inputId"
         :class="labelClasses")
         slot {{ label }}
 
     //- Input wrapper.
     .w-input__input-wrap(:class="inputWrapClasses")
-      slot(name="icon-left" :input-id="`w-input--${_.uid}`")
+      slot(name="icon-left" :input-id="inputId")
         w-icon.w-input__icon.w-input__icon--inner-left(
           v-if="innerIconLeft"
           tag="label"
-          :for="`w-input--${_.uid}`"
+          :for="inputId"
           @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
       //- All types of input except file.
       input.w-input__input(
@@ -35,7 +35,7 @@ component(
         @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
-        :id="`w-input--${_.uid}`"
+        :id="inputId"
         :type="type"
         :name="inputName"
         :placeholder="placeholder || null"
@@ -55,7 +55,7 @@ component(
       template(v-else)
         input(
           ref="input"
-          :id="`w-input--${_.uid}`"
+          :id="inputId"
           type="file"
           :name="name || null"
           @focus="onFocus"
@@ -68,7 +68,7 @@ component(
         transition-group.w-input__input.w-input__input--file(
           tag="label"
           name="fade"
-          :for="`w-input--${_.uid}`")
+          :for="inputId")
           span.w-input__no-file(v-if="!inputFiles.length && isFocused" key="no-file")
             slot(name="no-file")
               template(v-if="$slots['no-file'] === undefined") No file
@@ -83,11 +83,11 @@ component(
           :class="labelClasses")
           slot {{ label }}
 
-      slot(name="icon-right" :input-id="`w-input--${_.uid}`")
+      slot(name="icon-right" :input-id="inputId")
         w-icon.w-input__icon.w-input__icon--inner-right(
           v-if="innerIconRight"
           tag="label"
-          :for="`w-input--${_.uid}`"
+          :for="inputId"
           @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
 
       w-progress.fill-width(
@@ -97,7 +97,7 @@ component(
         :model-value="showProgress ? (uploadInProgress || uploadComplete) && overallFilesProgress : loadingValue")
 
     //- Files preview.
-    label.d-flex(v-if="type === 'file' && preview && inputFiles.length" :for="`w-input--${_.uid}`")
+    label.d-flex(v-if="type === 'file' && preview && inputFiles.length" :for="inputId")
       template(v-for="(file, i) in inputFiles")
         i.w-icon.wi-spinner.w-icon--spin.size--sm.w-input__file-preview.primary(
           v-if="file.progress < 100"
@@ -116,7 +116,7 @@ component(
     template(v-if="labelPosition === 'right'")
       label.w-input__label.w-input__label--right.w-form-el-shakable(
         v-if="$slots.default || label"
-        :for="`w-input--${_.uid}`"
+        :for="inputId"
         :class="labelClasses")
         slot {{ label }}
 </template>
@@ -168,8 +168,8 @@ export default {
     dark: { type: Boolean },
     light: { type: Boolean },
     inputClass: { type: String } // Additional classes for the input element.
-    // Props from mixin: name, disabled, readonly, required, tabindex, validators.
-    // Computed from mixin: inputName, isDisabled & isReadonly.
+    // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
+    // Computed from mixin: inputId, inputName, isDisabled & isReadonly.
   },
 
   emits: ['input', 'update:modelValue', 'focus', 'blur', 'click:inner-icon-left', 'click:inner-icon-right', 'update:overallProgress'],

package/src/wave-ui/components/w-list.vue

@@ -43,9 +43,15 @@ ul.w-list(:class="classes")
 </template>
 
 <script>
+import { useId } from 'vue'
+
 export default {
   name: 'w-list',
 
+  setup () {
+    return { _waveUiUseId: useId() }
+  },
+
   props: {
     items: { type: [Array, Number], required: true }, // All the possible options.
     modelValue: {}, // v-model on selected item if any.
@@ -89,7 +95,8 @@ export default {
     },
 
     listId () {
-      return this.addIds ? (typeof this.addIds === 'string' ? this.addIds : `w-list--${this._.uid}`) : null
+      if (!this.addIds) return null
+      return typeof this.addIds === 'string' ? this.addIds : `w-list--${this._waveUiUseId}`
     },
 
     selectedItems () {

package/src/wave-ui/components/w-radio.vue

@@ -2,13 +2,13 @@
 component(
   ref="formEl"
   :is="formRegister && !wRadios ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue, disabled: isDisabled, readonly: isReadonly }"
+  v-bind="formRegister && { validators, inputValue, disabled: isDisabled, readonly: isReadonly, noBlurValidation }"
   v-model:valid="valid"
   @reset="$emit('update:modelValue', inputValue = null);$emit('input', null)"
   :class="classes")
   input(
     ref="input"
-    :id="`w-radio--${_.uid}`"
+    :id="inputId"
     type="radio"
     :name="inputName"
     :checked="inputValue || null"
@@ -22,12 +22,12 @@ component(
   template(v-if="hasLabel && labelOnLeft")
     label.w-radio__label.w-form-el-shakable.pr2(
       v-if="$slots.default"
-      :for="`w-radio--${_.uid}`"
+      :for="inputId"
       :class="labelClasses")
       slot {{ label }}
     label.w-radio__label.w-form-el-shakable.pr2(
       v-else-if="label"
-      :for="`w-radio--${_.uid}`"
+      :for="inputId"
       :class="labelClasses"
       v-html="label")
   .w-radio__input(
@@ -36,12 +36,12 @@ component(
   template(v-if="hasLabel && !labelOnLeft")
     label.w-radio__label.w-form-el-shakable.pl2(
       v-if="$slots.default"
-      :for="`w-radio--${_.uid}`"
+      :for="inputId"
       :class="labelClasses")
       slot {{ label }}
     label.w-radio__label.w-form-el-shakable.pl2(
       v-else-if="label"
-      :for="`w-radio--${_.uid}`"
+      :for="inputId"
       :class="labelClasses"
       v-html="label")
 </template>
@@ -66,8 +66,8 @@ export default {
     noRipple: { type: Boolean },
     dark: { type: Boolean },
     light: { type: Boolean }
-    // Props from mixin: name, disabled, readonly, required, tabindex, validators.
-    // Computed from mixin: inputName, isDisabled & isReadonly.
+    // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
+    // Computed from mixin: inputId, inputName, isDisabled & isReadonly.
   },
 
   emits: ['input', 'update:modelValue', 'focus'],

package/src/wave-ui/components/w-radios.vue

@@ -2,7 +2,7 @@
 component(
   ref="formEl"
   :is="formRegister ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue, disabled: isDisabled }"
+  v-bind="formRegister && { validators, inputValue, disabled: isDisabled, noBlurValidation }"
   v-model:valid="valid"
   @reset="$emit('update:modelValue', inputValue = null);$emit('input', null)"
   :column="!inline"
@@ -46,7 +46,7 @@ export default {
     inline: { type: Boolean },
     color: { type: String, default: 'primary' },
     labelColor: { type: String, default: 'primary' }
-    // Props from mixin: name, disabled, readonly, required, validators.
+    // Props from mixin: id, name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
 

package/src/wave-ui/components/w-rating.vue

@@ -2,11 +2,11 @@
 component(
   ref="formEl"
   :is="formRegister ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue: rating, disabled: isDisabled, readonly: isReadonly }"
+  v-bind="formRegister && { validators, inputValue: rating, disabled: isDisabled, readonly: isReadonly, noBlurValidation }"
   v-model:valid="valid"
   @reset="$emit('update:modelValue', rating = null);$emit('input', null)"
   :class="classes")
-  input(:id="inputName" :name="inputName" type="hidden" :value="rating")
+  input(:id="inputId" :name="inputName" type="hidden" :value="rating")
   template(v-for="i in max" :key="i")
     slot(v-if="$slots.item" name="item" :index="i + 1")
     button.w-rating__button(
@@ -49,8 +49,8 @@ export default {
     noRipple: { type: Boolean },
     dark: { type: Boolean },
     light: { type: Boolean }
-    // Props from mixin: name, disabled, readonly, required, validators.
-    // Computed from mixin: inputName, isDisabled & isReadonly.
+    // Props from mixin: id, name, disabled, readonly, required, validators.
+    // Computed from mixin: inputId, inputName, isDisabled & isReadonly.
   },
 
   emits: ['input', 'update:modelValue', 'focus', 'blur'],

package/src/wave-ui/components/w-select.vue

@@ -2,7 +2,7 @@
 component(
   ref="formEl"
   :is="formRegister ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue: selectionString, disabled: isDisabled, readonly: isReadonly, isFocused }"
+  v-bind="formRegister && { validators, inputValue: selectionString, disabled: isDisabled, readonly: isReadonly, isFocused, noBlurValidation }"
   v-model:valid="valid"
   @reset="onReset"
   :wrap="hasLabel && labelPosition !== 'inside'"
@@ -31,8 +31,8 @@ component(
         role="button"
         aria-haspopup="listbox"
         :aria-expanded="showMenu ? 'true' : 'false'"
-        :aria-owns="`w-select-menu--${_.uid}`"
-        :aria-activedescendant="`w-select-menu--${_.uid}_item-1`"
+        :aria-owns="selectListId"
+        :aria-activedescendant="`${selectListId}_item-1`"
         :class="inputWrapClasses")
         slot(name="icon-left")
           w-icon.w-select__icon.w-select__icon--inner-left(
@@ -79,7 +79,7 @@ component(
       :multiple="multiple"
       arrows-navigation
       return-object
-      :add-ids="`w-select-menu--${_.uid}`"
+      :add-ids="selectListId"
       :no-unselect="noUnselect"
       :selection-color="selectionColor"
       :item-color-key="itemColorKey"
@@ -146,8 +146,8 @@ export default {
     dark: { type: Boolean },
     light: { type: Boolean },
     fitToContent: { type: Boolean }
-    // Props from mixin: name, disabled, readonly, required, tabindex, validators.
-    // Computed from mixin: inputName, isDisabled & isReadonly.
+    // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
+    // Computed from mixin: inputId, selectListId, inputName, isDisabled & isReadonly.
   },
 
   emits: ['input', 'update:modelValue', 'focus', 'blur', 'item-click', 'item-select', 'click:inner-icon-left', 'click:inner-icon-right'],
@@ -166,6 +166,11 @@ export default {
   }),
 
   computed: {
+    /** Prefix for w-list item ids (`id_item-N`) and ARIA listbox linkage; stable with SSR. */
+    selectListId () {
+      return this.id ? `${this.id}__listbox` : `w-select-menu--${this._waveUiUseId}`
+    },
+
     // Check all the items and add a `value` if missing, containing either: value, label or index
     // in this order.
     selectItems () {
@@ -394,7 +399,7 @@ export default {
       setTimeout(() => {
         const itemIndex = this.inputValue.length ? this.inputValue[0].index : 0 // Real index starts at 0.
         // User visible index starts at 1.
-        this.$refs['w-list'].$el.querySelector(`#w-select-menu--${this._.uid}_item-${itemIndex + 1}`)?.focus()
+        document.getElementById(`${this.selectListId}_item-${itemIndex + 1}`)?.focus()
       }, 100)
     },
 

package/src/wave-ui/components/w-slider.vue

@@ -2,19 +2,19 @@
 component(
   ref="formEl"
   :is="formRegister ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue: rangeValueScaled, disabled: isDisabled, readonly: isReadonly }"
+  v-bind="formRegister && { validators, inputValue: rangeValueScaled, disabled: isDisabled, readonly: isReadonly, noBlurValidation }"
   v-model:valid="valid"
   @reset="rangeValuePercent = 0;updateRangeValueScaled()"
   :wrap="formRegister || null"
   :class="wrapperClasses")
   label.w-slider__label.w-slider__label--left.w-form-el-shakable(
     v-if="$slots['label-left']"
-    :for="`button--${_.uid}`"
+    :for="thumbId"
     :class="labelClasses")
     slot(name="label-left")
   label.w-slider__label.w-slider__label--left.w-form-el-shakable(
     v-else-if="labelLeft"
-    :for="`button--${_.uid}`"
+    :for="thumbId"
     :class="labelClasses"
     v-html="labelLeft")
   .w-slider__track-wrap
@@ -34,7 +34,7 @@ component(
       .w-slider__thumb(:style="thumbStyles")
         button.w-slider__thumb-button(
           ref="thumb"
-          :id="`button--${_.uid}`"
+          :id="thumbId"
           :class="[color]"
           :name="inputName"
           :model-value="rangeValueScaled"
@@ -48,7 +48,7 @@ component(
           @click.prevent)
         label.w-slider__thumb-label(
           v-if="thumbLabel"
-          :for="`button--${_.uid}`"
+          :for="thumbId"
           :class="thumbClasses")
           div(v-if="thumbLabel === 'droplet'")
             slot(name="label" :value="rangeValueScaled") {{ ~~rangeValueScaled }}
@@ -67,12 +67,12 @@ component(
         style="left: 100%") {{ this.maxVal }}
   label.w-slider__label.w-slider__label--right.w-form-el-shakable(
     v-if="$slots['label-right']"
-    :for="`button--${_.uid}`"
+    :for="thumbId"
     :class="labelClasses")
     slot(name="label-right")
   label.w-slider__label.w-slider__label--right.w-form-el-shakable(
     v-else-if="labelRight"
-    :for="`button--${_.uid}`"
+    :for="thumbId"
     :class="labelClasses"
     v-html="labelRight")
 </template>
@@ -101,8 +101,8 @@ export default {
     labelRight: { type: String },
     dark: { type: Boolean },
     light: { type: Boolean }
-    // Props from mixin: name, disabled, readonly, required, validators.
-    // Computed from mixin: inputName, isDisabled & isReadonly.
+    // Props from mixin: id, name, disabled, readonly, required, validators.
+    // Computed from mixin: inputId, thumbId, inputName, isDisabled & isReadonly.
   },
 
   emits: ['input', 'update:modelValue', 'focus'],
@@ -119,6 +119,11 @@ export default {
   }),
 
   computed: {
+    /** DOM id for the thumb control and related labels (distinct from `inputId` on `w-slider`). */
+    thumbId () {
+      return this.id ? `${this.id}__thumb` : `button--${this._waveUiUseId}`
+    },
+
     minVal () {
       return parseFloat(this.min)
     },

package/src/wave-ui/components/w-switch.vue

@@ -2,7 +2,7 @@
 component(
   ref="formEl"
   :is="formRegister ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue: isOn, disabled: isDisabled, readonly: isReadonly }"
+  v-bind="formRegister && { validators, inputValue: isOn, disabled: isDisabled, readonly: isReadonly, noBlurValidation }"
   v-model:valid="valid"
   @mouseenter="$emit('mouseenter', $event)"
   @mouseleave="$emit('mouseleave', $event)"
@@ -11,7 +11,7 @@ component(
   :style="$attrs.style")
   input(
     ref="input"
-    :id="`w-switch--${_.uid}`"
+    :id="inputId"
     type="checkbox"
     :name="inputName"
     :checked="isOn"
@@ -29,7 +29,7 @@ component(
   template(v-if="hasLabel && labelOnLeft")
     label.w-switch__label.w-switch__label--left.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-switch--${_.uid}`"
+      :for="inputId"
       :class="labelClasses")
       slot {{ label }}
   .w-switch__input(
@@ -47,7 +47,7 @@ component(
   template(v-if="hasLabel && !labelOnLeft")
     label.w-switch__label.w-switch__label--right.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-switch--${_.uid}`"
+      :for="inputId"
       :class="labelClasses")
       slot {{ label }}
 </template>
@@ -71,8 +71,8 @@ export default {
     loading: { type: [Boolean, Number], default: false },
     dark: { type: Boolean },
     light: { type: Boolean }
-    // Props from mixin: name, disabled, readonly, required, tabindex, validators.
-    // Computed from mixin: inputName, isDisabled & isReadonly.
+    // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
+    // Computed from mixin: inputId, inputName, isDisabled & isReadonly.
   },
 
   emits: ['input', 'update:modelValue', 'focus', 'blur', 'mouseenter', 'mouseleave'],

package/src/wave-ui/components/w-tabs/index.vue

@@ -71,14 +71,17 @@
 </template>
 
 <script>
+import { useId } from 'vue'
 import { objectifyClasses } from '../../utils/index'
 import TabContent from './tab-content.vue'
 
-let uid = 0
-
 export default {
   name: 'w-tabs',
 
+  setup () {
+    return { _tabsStableId: useId() }
+  },
+
   props: {
     modelValue: { type: [Number, String] },
     color: { type: String },
@@ -180,7 +183,7 @@ export default {
     addTab (item) {
       // If there is no unique ID provided, inject one in each tab.
       // This will cause a single other update from watching the tabs items and stop there.
-      if (!(item[this.itemIdKey] ?? item._uid ?? false)) item._uid = +`${this._.uid}${++uid}`
+      if (!(item[this.itemIdKey] ?? item._uid ?? false)) item._uid = `${this._tabsStableId}-${this.tabs.length}`
 
       this.tabs.push({
         _uid: item[this.itemIdKey] ?? item._uid,
@@ -197,7 +200,7 @@ export default {
       this.tabs = items.map((item, _index) => {
         // If there is no unique ID provided, inject one in each tab.
         // This will cause a single other update from watching the tabs items and stop there.
-        if (!(item[this.itemIdKey] ?? item._uid ?? false)) item._uid = +`${this._.uid}${++uid}`
+        if (!(item[this.itemIdKey] ?? item._uid ?? false)) item._uid = `${this._tabsStableId}-${_index}`
 
         return {
           ...item,