wave-ui 3.27.1 → 3.27.2

package/package.json

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

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-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/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,14 +14,6 @@ export default {
     formProps: { default: () => ({ disabled: false, readonly: false }) }
   },
 
-  setup () {
-    return {
-      // SSR-safe unique suffix (Vue 3.5+). Must not start with `_`/`$` or Vue omits it from the
-      // render context and template/slot access can warn or fail (see exposeSetupStateOnRenderContext).
-      waveUiUseId: useId()
-    }
-  },
-
   props: {
     /** When set, used as the DOM `id` and for associated labels (`for`). SSR-safe when provided. */
     id: { type: String },