wave-ui 3.27.0 → 3.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.27.0",
+  "version": "3.27.2",
   "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",

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

@@ -49,12 +49,16 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-checkbox',
   mixins: [FormElementMixin],
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   inject: {
     wCheckboxes: { default: null }
   },

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

@@ -31,12 +31,16 @@ component(
 
 <script>
 import { reactive } from 'vue'
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-checkboxes',
   mixins: [FormElementMixin],
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     items: { type: Array, required: true }, // All the possible options.
     modelValue: { type: Array }, // v-model on selected option.

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

@@ -128,7 +128,7 @@ component(
  * - option to fit to the content using contenteditable div
  **/
 
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 import { reactive } from 'vue'
 
 export default {
@@ -136,6 +136,10 @@ export default {
   mixins: [FormElementMixin],
   inheritAttrs: false, // The attrs should only be added to the input not the wrapper.
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     modelValue: { default: '' },
     type: { type: String, default: 'text' },

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

@@ -49,7 +49,7 @@ export default {
   name: 'w-list',
 
   setup () {
-    return { _waveUiUseId: useId() }
+    return { waveUiUseId: useId() }
   },
 
   props: {
@@ -96,7 +96,7 @@ export default {
 
     listId () {
       if (!this.addIds) return null
-      return typeof this.addIds === 'string' ? this.addIds : `w-list--${this._waveUiUseId}`
+      return typeof this.addIds === 'string' ? this.addIds : `w-list--${this.waveUiUseId}`
     },
 
     selectedItems () {

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

@@ -47,11 +47,16 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-radio',
   mixins: [FormElementMixin],
+
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   inject: { wRadios: { default: null } },
 
   props: {

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

@@ -30,12 +30,16 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-radios',
   mixins: [FormElementMixin],
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     items: { type: Array, required: true }, // All the possible options.
     modelValue: { type: [String, Number, Boolean] }, // v-model on selected option.

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

@@ -29,12 +29,16 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-rating',
   mixins: [FormElementMixin],
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     modelValue: {},
     max: { type: [Number, String], default: 5 },

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

@@ -108,12 +108,21 @@ component(
  * @todo Share the common parts between w-input, w-textarea & w-select.
  **/
 
-import FormElementMixin from '../mixins/form-elements'
+import { computed } from 'vue'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-select',
   mixins: [FormElementMixin],
 
+  setup (props) {
+    const { waveUiUseId } = useWaveUiFormIds()
+    const selectListId = computed(() =>
+      props.id ? `${props.id}__listbox` : `w-select-menu--${waveUiUseId}`
+    )
+    return { waveUiUseId, selectListId }
+  },
+
   props: {
     items: { type: Array, required: true },
     modelValue: {}, // v-model on selected item if any.
@@ -147,7 +156,7 @@ export default {
     light: { type: Boolean },
     fitToContent: { type: Boolean }
     // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
-    // Computed from mixin: inputId, selectListId, inputName, isDisabled & isReadonly.
+    // Computed from mixin: inputId, inputName, isDisabled & isReadonly. `selectListId` from setup.
   },
 
   emits: ['input', 'update:modelValue', 'focus', 'blur', 'item-click', 'item-select', 'click:inner-icon-left', 'click:inner-icon-right'],
@@ -166,11 +175,6 @@ 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 () {

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

@@ -78,12 +78,16 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-slider',
   mixins: [FormElementMixin],
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     modelValue: { type: Number, default: 0 },
     color: { type: String, default: 'primary' },
@@ -121,7 +125,7 @@ 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}`
+      return this.id ? `${this.id}__thumb` : `button--${this.waveUiUseId}`
     },
 
     minVal () {

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

@@ -53,13 +53,17 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-switch',
   mixins: [FormElementMixin],
   inheritAttrs: false, // The attrs should only be added to the input not the wrapper.
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     modelValue: { default: false }, // v-model.
     label: { type: String, default: '' },

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

@@ -79,7 +79,7 @@ export default {
   name: 'w-tabs',
 
   setup () {
-    return { _tabsStableId: useId() }
+    return { tabsStableId: useId() }
   },
 
   props: {
@@ -183,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._tabsStableId}-${this.tabs.length}`
+      if (!(item[this.itemIdKey] ?? item._uid ?? false)) item._uid = `${this.tabsStableId}-${this.tabs.length}`
 
       this.tabs.push({
         _uid: item[this.itemIdKey] ?? item._uid,
@@ -200,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._tabsStableId}-${_index}`
+        if (!(item[this.itemIdKey] ?? item._uid ?? false)) item._uid = `${this.tabsStableId}-${_index}`
 
         return {
           ...item,

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

@@ -67,13 +67,17 @@ component(
  * @todo Share the common parts between w-input, w-textarea & w-select.
  **/
 
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-textarea',
   mixins: [FormElementMixin],
   inheritAttrs: false, // The attrs should only be added to the textarea not the wrapper.
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     modelValue: { default: '' },
     label: { type: String },

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

@@ -4,7 +4,7 @@ transition(:name="transitionName" appear @after-leave="onAfterLeave")
   .w-tooltip(
     v-if="detachableVisible"
     ref="detachable"
-    :key="_tooltipInstanceId"
+    :key="tooltipInstanceId"
     :class="classes"
     :style="styles")
     slot
@@ -20,7 +20,8 @@ export default {
   mixins: [DetachableMixin],
 
   setup () {
-    return { _tooltipInstanceId: useId() }
+    // No leading `_`/`$`: Vue omits those from the render context (setup() reserved prefixes).
+    return { tooltipInstanceId: useId() }
   },
 
   props: {

package/src/wave-ui/mixins/form-elements.js

@@ -1,5 +1,10 @@
 import { useId } from 'vue'
 
+/** SSR-safe id suffix; call from each component's `setup()` (mixin `setup` is not reliably merged). */
+export function useWaveUiFormIds () {
+  return { waveUiUseId: useId() }
+}
+
 export default {
   inject: {
     // Used in each form component to determine whether to use the w-form-element wrap or not.
@@ -9,13 +14,6 @@ export default {
     formProps: { default: () => ({ disabled: false, readonly: false }) }
   },
 
-  setup () {
-    return {
-      // SSR-safe unique suffix (Vue 3.5+). Exposed on `this` for Options API templates.
-      _waveUiUseId: useId()
-    }
-  },
-
   props: {
     /** When set, used as the DOM `id` and for associated labels (`for`). SSR-safe when provided. */
     id: { type: String },
@@ -37,11 +35,11 @@ export default {
     /** Stable DOM id for the control (and labels), including SSR/hydration. */
     inputId () {
       const componentName = this.$options.name || 'w-field'
-      return this.id || `${componentName}--${this._waveUiUseId}`
+      return this.id || `${componentName}--${this.waveUiUseId}`
     },
 
     inputName () {
-      return this.name || `${this.$options.name}--${this._waveUiUseId}`
+      return this.name || `${this.$options.name}--${this.waveUiUseId}`
     },
     isDisabled () {
       return this.disabled || this.formProps.disabled