wave-ui 3.26.1 → 3.27.0

package/src/wave-ui/components/w-textarea.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"
   :wrap="hasLabel && labelPosition !== 'inside'"
   @reset="$emit('update:modelValue', inputValue = '');$emit('input', '')"
@@ -12,17 +12,17 @@ component(
   template(v-if="labelPosition === 'left'")
     label.w-textarea__label.w-textarea__label--left.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-textarea--${_.uid}`"
+      :for="inputId"
       :class="labelClasses")
       slot {{ label }}
 
   //- Input wrapper.
   .w-textarea__textarea-wrap(:class="inputWrapClasses")
-    slot(name="icon-left" :input-id="`w-textarea--${_.uid}`")
+    slot(name="icon-left" :input-id="inputId")
       w-icon.w-textarea__icon.w-textarea__icon--inner-left(
         v-if="innerIconLeft"
         tag="label"
-        :for="`w-textarea--${_.uid}`"
+        :for="inputId"
         @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
     textarea.w-textarea__textarea(
       ref="textarea"
@@ -31,7 +31,7 @@ component(
       @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
-      :id="`w-textarea--${_.uid}`"
+      :id="inputId"
       :name="inputName"
       :placeholder="placeholder || null"
       :rows="rows || null"
@@ -46,18 +46,18 @@ component(
         v-if="$slots.default || label"
         :class="labelClasses")
         slot {{ label }}
-    slot(name="icon-right" :input-id="`w-textarea--${_.uid}`")
+    slot(name="icon-right" :input-id="inputId")
       w-icon.w-textarea__icon.w-textarea__icon--inner-right(
         v-if="innerIconRight"
         tag="label"
-        :for="`w-textarea--${_.uid}`"
+        :for="inputId"
         @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
 
   //- Right label.
   template(v-if="labelPosition === 'right'")
     label.w-textarea__label.w-textarea__label--right.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-textarea--${_.uid}`"
+      :for="inputId"
       :class="labelClasses")
       slot {{ label }}
 </template>
@@ -95,8 +95,8 @@ export default {
     cols: { type: [Number, String] },
     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', 'click:inner-icon-left', 'click:inner-icon-right'],

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

@@ -4,13 +4,14 @@ transition(:name="transitionName" appear @after-leave="onAfterLeave")
   .w-tooltip(
     v-if="detachableVisible"
     ref="detachable"
-    :key="_.uid"
+    :key="_tooltipInstanceId"
     :class="classes"
     :style="styles")
     slot
 </template>
 
 <script>
+import { useId } from 'vue'
 import { objectifyClasses } from '../utils/index'
 import DetachableMixin from '../mixins/detachable'
 
@@ -18,6 +19,10 @@ export default {
   name: 'w-tooltip',
   mixins: [DetachableMixin],
 
+  setup () {
+    return { _tooltipInstanceId: useId() }
+  },
+
   props: {
     modelValue: {},
     showOnClick: { type: Boolean },

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

@@ -1,3 +1,5 @@
+import { useId } from 'vue'
+
 export default {
   inject: {
     // Used in each form component to determine whether to use the w-form-element wrap or not.
@@ -7,13 +9,24 @@ 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 },
     name: { type: String }, // When sending data through form.
     disabled: { type: Boolean },
     readonly: { type: Boolean },
     required: { type: Boolean },
     tabindex: { type: String },
-    validators: { type: Array }
+    validators: { type: Array },
+    /** Per-field blur validation: `true` skips blur, `false` forces blur even when `w-form` sets `no-blur-validation`, unset inherits the form. */
+    noBlurValidation: { type: Boolean }
   },
 
   data: () => ({
@@ -21,8 +34,14 @@ export default {
   }),
 
   computed: {
+    /** 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}`
+    },
+
     inputName () {
-      return this.name || `${this.$options.name}--${this._.uid}`
+      return this.name || `${this.$options.name}--${this._waveUiUseId}`
     },
     isDisabled () {
       return this.disabled || this.formProps.disabled