wave-ui 1.52.0 → 1.53.0

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

@@ -9,9 +9,11 @@ component(
   :class="classes")
   //- Left label.
   template(v-if="labelPosition === 'left'")
-    label.w-textarea__label.w-textarea__label--left.w-form-el-shakable(v-if="$slots.default" :for="`w-textarea--${_uid}`")
-      slot
-    label.w-textarea__label.w-textarea__label--left.w-form-el-shakable(v-else-if="label" :for="`w-textarea--${_uid}`" v-html="label")
+    label.w-textarea__label.w-textarea__label--left.w-form-el-shakable(
+      v-if="$slots.default || label"
+      :for="`w-textarea--${_uid}`"
+      :class="labelClasses")
+      slot {{ label }}
 
   //- Input wrapper.
   .w-textarea__textarea-wrap(:class="inputWrapClasses")
@@ -39,15 +41,10 @@ component(
       :tabindex="tabindex || null")
     template(v-if="labelPosition === 'inside' && showLabelInside")
       label.w-textarea__label.w-textarea__label--inside.w-form-el-shakable(
-        v-if="$slots.default"
-        :for="`w-textarea--${_uid}`"
-        :class="isFocused && { [valid === false ? 'error' : this.color]: this.color || valid === false }")
-        slot
-      label.w-textarea__label.w-textarea__label--inside.w-form-el-shakable(
-        v-else-if="label"
+        v-if="$slots.default || label"
         :for="`w-textarea--${_uid}`"
-        v-html="label"
-        :class="isFocused && { [valid === false ? 'error' : color]: color || valid === false }")
+        :class="labelClasses")
+        slot {{ label }}
     w-icon.w-textarea__icon.w-textarea__icon--inner-right(
       v-if="innerIconRight"
       tag="label"
@@ -56,9 +53,11 @@ component(
 
   //- Right label.
   template(v-if="labelPosition === 'right'")
-    label.w-textarea__label.w-textarea__label--right.w-form-el-shakable(v-if="$slots.default" :for="`w-textarea--${_uid}`")
-      slot
-    label.w-textarea__label.w-textarea__label--right.w-form-el-shakable(v-else-if="label" :for="`w-textarea--${_uid}`" v-html="label")
+    label.w-textarea__label.w-textarea__label--right.w-form-el-shakable(
+      v-if="$slots.default || label"
+      :for="`w-textarea--${_uid}`"
+      :class="labelClasses")
+      slot {{ label }}
 </template>
 
 <script>
@@ -83,6 +82,7 @@ export default {
     placeholder: { type: String },
     color: { type: String, default: 'primary' },
     bgColor: { type: String },
+    labelColor: { type: String, default: 'primary' },
     dark: { type: Boolean },
     outline: { type: Boolean },
     shadow: { type: Boolean },
@@ -142,7 +142,7 @@ export default {
     },
     inputWrapClasses () {
       return {
-        [this.valid === false ? 'error' : this.color]: this.color || this.valid === false,
+        [this.valid === false ? this.validationColor : this.color]: this.color || this.valid === false,
         [`${this.bgColor}--bg`]: this.bgColor,
         'w-textarea__textarea-wrap--tile': this.tile,
         // Box adds a padding on input. If there is a bgColor or shadow, a padding is needed.
@@ -387,8 +387,6 @@ $inactive-color: #777;
     .w-textarea--filled.w-textarea--floating-label.w-textarea--inner-icon-left & {left: 0;}
     // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
     .w-textarea--floating-label.w-textarea--inner-icon-left .w-textarea__textarea:-webkit-autofill & {left: 0;}
-
-    .w-textarea--focused & {color: currentColor;}
   }
 }
 </style>

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

@@ -70,11 +70,11 @@ export default {
   z-index: 10;
 
   &--absolute, &--fixed {top: 0;left: 0;right: 0;}
+  &--absolute {position: absolute;}
+  &--fixed {position: fixed;}
   &--absolute.w-toolbar--vertical, &--fixed.w-toolbar--vertical {top: 0;bottom: 0;}
   &--absolute.w-toolbar--left, &--fixed.w-toolbar--left {left: 0;right: auto;}
   &--absolute.w-toolbar--right, &--fixed.w-toolbar--right {left: auto;right: 0;}
-  &--absolute {position: absolute;}
-  &--fixed {position: fixed;}
 
   // Horizontal.
   &--top {border-bottom: $border;}

package/src/wave-ui/mixins/detachable.js

@@ -9,7 +9,6 @@ import { consoleWarn } from '../utils/console'
 export default {
   props: {
     // Position.
-    detachTo: { type: [String, Boolean, Object], deprecated: true },
     appendTo: { type: [String, Boolean, Object] },
     fixed: { type: Boolean },
     top: { type: Boolean },
@@ -26,6 +25,10 @@ export default {
     activator: { type: [String, Object, HTMLElement] } // The activator can be a DOM string selector, a ref or a DOM node.
   },
 
+  inject: {
+    detachableDefaultRoot: { default: null }
+  },
+
   data: () => ({
     // The event listeners handlers have to be removed the exact same way they have been attached.
     // Since the handler functions have variables that change after hot-reload, keep them exactly
@@ -39,14 +42,15 @@ export default {
     // DOM element to attach tooltip/menu to.
     // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     appendToTarget () {
-      const defaultTarget = '.w-app'
+      let defaultTarget = '.w-app'
 
-      // Convert deprecated prop to renamed one.
-      if (this.detachTo && !this.appendTo) {
-        consoleWarn(`The ${this.$options.name} prop \`detach-to\` is deprecated. You can replace it with \`append-to\`.`, this)
+      // If used inside a w-dialog, w-drawer, or w-menu without an appendTo, default to that open
+      // element instead of the w-app.
+      if (typeof this.detachableDefaultRoot === 'function') {
+        defaultTarget = this.detachableDefaultRoot() || defaultTarget
       }
 
-      let target = this.appendTo || this.detachTo || defaultTarget
+      let target = this.appendTo || defaultTarget
       if (target === true) target = defaultTarget
       else if (this.appendTo === 'activator') target = this.$el.previousElementSibling
       else if (target && !['object', 'string'].includes(typeof target)) target = defaultTarget
@@ -145,7 +149,7 @@ export default {
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     getActivatorCoordinates () {
       // Get the activator coordinates relative to window.
-      const { top, left, width, height } = (this.activatorEl).getBoundingClientRect()
+      const { top, left, width, height } = this.activatorEl.getBoundingClientRect()
       let coords = { top, left, width, height }
 
       // If absolute position, adjust top & left.
@@ -167,6 +171,11 @@ export default {
       // Get the activator coordinates.
       let { top, left, width, height } = this.getActivatorCoordinates()
 
+      // Prevent error in case the detachable component unmounted hook is fired but the activator
+      // is still in the DOM until the end of a transition and the user toggles it.
+      // Unmounted is called straight away from beforeLeave: https://github.com/vuejs/core/issues/994
+      if (!this.detachableEl) return
+
       // 1. First display the menu but hide it (So we can get its dimension).
       // --------------------------------------------------
       this.detachableEl.style.visibility = 'hidden'
@@ -273,7 +282,6 @@ export default {
           this.detachableEl = this.$refs.detachable?.$el || this.$refs.detachable
 
           // Move the tooltip/menu elsewhere in the DOM.
-          // wrapper.parentNode.insertBefore(this.detachableEl, wrapper)
           if (this.detachableEl) this.appendToTarget.appendChild(this.detachableEl)
           resolve()
         })
@@ -327,7 +335,7 @@ export default {
     // so check it on nextTick.
     else {
       this.$nextTick(() => {
-        this.activator && this.bindActivatorEvents()
+        if (this.activator) this.bindActivatorEvents()
         if (this.value) this.toggle({ type: 'click', target: this.activatorEl })
       })
     }
@@ -362,10 +370,6 @@ export default {
     value (bool) {
       if (!!bool !== this.detachableVisible) this.toggle({ type: 'click', target: this.activatorEl })
     },
-    detachTo () {
-      this.removeFromDOM()
-      this.insertInDOM()
-    },
     appendTo () {
       this.removeFromDOM()
       this.insertInDOM()

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

@@ -29,6 +29,15 @@ export default {
     },
     isReadonly () {
       return this.readonly || this.formProps.readonly
+    },
+    validationColor () {
+      return this.formProps.validationColor
+    },
+    labelClasses () {
+      return {
+        [this.labelColor]: this.labelColor && this.valid !== false,
+        [this.validationColor]: this.valid === false
+      }
     }
   },