wave-ui 2.34.0 → 2.36.1

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

@@ -22,17 +22,25 @@ component(
     :aria-checked="isOn || 'false'"
     role="switch")
   template(v-if="hasLabel && labelOnLeft")
-    label.w-switch__label.w-form-el-shakable(v-if="$slots.default" :for="`w-switch--${_.uid}`")
-      slot
-    label.w-switch__label.w-form-el-shakable(v-else-if="label" :for="`w-switch--${_.uid}`" v-html="label")
+    label.w-switch__label.w-switch__label--left.w-form-el-shakable(
+      v-if="$slots.default || label"
+      :for="`w-switch--${_.uid}`"
+      :class="labelClasses")
+      slot {{ label }}
   .w-switch__input(
     @click="$refs.input.focus();$refs.input.click()"
     v-on="$attrs"
     :class="inputClasses")
+    .w-switch__track(v-if="$slots.track")
+      slot(name="track")
+    .w-switch__thumb(v-if="$slots.thumb")
+      slot(name="thumb")
   template(v-if="hasLabel && !labelOnLeft")
-    label.w-switch__label.w-form-el-shakable(v-if="$slots.default" :for="`w-switch--${_.uid}`")
-      slot
-    label.w-switch__label.w-form-el-shakable(v-else-if="label" :for="`w-switch--${_.uid}`" v-html="label")
+    label.w-switch__label.w-switch__label--right.w-form-el-shakable(
+      v-if="$slots.default || label"
+      :for="`w-switch--${_.uid}`"
+      :class="labelClasses")
+      slot {{ label }}
 </template>
 
 <script>
@@ -47,6 +55,7 @@ export default {
     label: { type: String, default: '' },
     labelOnLeft: { type: Boolean },
     color: { type: String, default: 'primary' },
+    labelColor: { type: String, default: 'primary' },
     thin: { type: Boolean },
     noRipple: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
@@ -77,6 +86,8 @@ export default {
         'w-switch--disabled': this.isDisabled,
         'w-switch--readonly': this.isReadonly,
         'w-switch--ripple': this.ripple.start,
+        'w-switch--custom-thumb': this.$slots.thumb,
+        'w-switch--custom-track': this.$slots.track,
         'w-switch--rippled': this.ripple.end
       }
     },
@@ -186,8 +197,18 @@ $disabled-color: #ddd;
     }
   }
 
-  // Thumb.
-  &__input:after {
+  // Track slot, if any.
+  &__track {
+    position: absolute;
+    left: 100%;
+    padding: 0 4px;
+    transform: translateX(-100%);
+    @include default-transition;
+  }
+  .w-switch--on &__track {left: 0;transform: translateX(0);}
+
+  // Thumb: show either the thumb slot if any, or :after otherwise.
+  &__thumb, &__input:after {
     content: '';
     position: absolute;
     left: 0;
@@ -196,22 +217,28 @@ $disabled-color: #ddd;
     height: $small-form-el-size;
     background-color: #fff;
     border-radius: 100%;
+    text-align: center;
     @include default-transition;
 
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
 
-    :checked ~ & {transform: translateX(100%);}
+    .w-switch--on & {left: 100%;transform: translateX(-100%);}
 
     .w-switch--thin & {
       top: - round(0.15 * $small-form-el-size);
       transform: scale(1.1);
       box-shadow: $box-shadow;
     }
-    .w-switch--thin :checked ~ & {
-      transform: translateX(100%) scale(1.1);
+    .w-switch--thin.w-switch--on & {
+      transform: translateX(-100%) scale(1.1);
       background-color: currentColor;
     }
   }
+  &--custom-thumb &__input:after {display: none;}
+  &__thumb > * {
+    width: inherit;
+    height: inherit;
+  }
 
   // The focus outline & ripple on switch activation.
   &__input:before {
@@ -223,11 +250,12 @@ $disabled-color: #ddd;
     height: $small-form-el-size;
     background-color: currentColor;
     border-radius: 100%;
-    transform: translateX(100%) scale(0);
     opacity: 0;
     pointer-events: none;
     transition: 0.25s ease-in-out;
 
+    :checked ~ & {transform: translateX(-100%) scale(0);left: 100%;}
+
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
     .w-switch--thin & {top: - round(0.15 * $small-form-el-size);}
   }
@@ -242,14 +270,14 @@ $disabled-color: #ddd;
     opacity: 0.2;
   }
   :focus:checked ~ &__input:before {
-    transform: translateX(100%) scale(1.8);
+    transform: translateX(-100%) scale(1.8);
   }
 
   // After ripple reset to default state, then remove the class via js and the
   // `:focus ~ &__input:before` will re-transition to normal focused outline.
   &--rippled &__input:before {
     transition: none;
-    transform: translateX(100%) scale(0);
+    transform: translateX(-100%) scale(0);
     opacity: 0;
   }
 
@@ -264,7 +292,7 @@ $disabled-color: #ddd;
 }
 
 @keyframes w-switch-ripple {
-  0% {opacity: 0.8;transform: translateX(100%) scale(1);background-color: currentColor;} // Start with visible ripple.
-  100% {opacity: 0;transform: translateX(100%) scale(2.8);} // Propagate ripple to max radius and fade out.
+  0% {opacity: 0.8;transform: translateX(-100%) scale(1);background-color: currentColor;} // Start with visible ripple.
+  100% {opacity: 0;transform: translateX(-100%) scale(2.8);} // Propagate ripple to max radius and fade out.
 }
 </style>

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-tooltip.vue

@@ -1,26 +1,16 @@
 <template lang="pug">
-.w-tooltip-wrap
-  slot(name="activator" :on="activatorEventHandlers")
-  transition(:name="transitionName" appear)
-    .w-tooltip(
-      v-if="detachableVisible"
-      ref="detachable"
-      :key="_.uid"
-      :class="classes"
-      :style="styles")
-      slot
+slot(name="activator" :on="activatorEventHandlers")
+transition(:name="transitionName" appear)
+  .w-tooltip(
+    v-if="detachableVisible"
+    ref="detachable"
+    :key="_.uid"
+    :class="classes"
+    :style="styles")
+    slot
 </template>
 
 <script>
-/**
- * Complexity of this component: Vue 2.x can only mount 1 single root element, but we don't
- * want to wrap the activator as it may break the layout.
- * Another simpler way would be to append the tooltip inside the activator, but some HTML tags
- * can't have children like <input>.
- * So a solution is to mount both the activator element and the tooltip in a wrapper then unwrap
- * and move the tooltip elsewhere in the DOM.
- */
-
 import { objectifyClasses } from '../utils/index'
 import DetachableMixin from '../mixins/detachable'
 
@@ -193,8 +183,6 @@ export default {
 </script>
 
 <style lang="scss">
-.w-tooltip-wrap {display: none;}
-
 .w-tooltip {
   // Fix Safari where `width: max-content` does not take padding and border into consideration.
   display: table;

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
@@ -84,7 +88,7 @@ export default {
           if (activator instanceof HTMLElement) return activator
           return document.querySelector(this.activator)
         }
-        return this.$el.firstElementChild
+        return this.$el.nextElementSibling
       },
       set () {}
     },
@@ -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()
         })
@@ -315,33 +323,25 @@ export default {
   },
 
   mounted () {
-    const wrapper = this.$el
-
-    // Unwrap the activator element if the activator is in the activator slot.
-    if (this.$slots.activator) wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
-
     // If the activator is external.
-    else if (this.activator) this.bindActivatorEvents()
+    if (this.activator) this.bindActivatorEvents()
 
     // If the activator seems to be undefined, it is probably a DOM node or Vue ref,
     // so check it on nextTick.
     else {
       this.$nextTick(() => {
-        this.activator && this.bindActivatorEvents()
+        if (this.activator) this.bindActivatorEvents()
         if (this.modelValue) this.toggle({ type: 'click', target: this.activatorEl })
       })
     }
 
     // Unwrap the overlay if any.
-    if (this.overlay) {
-      this.overlayEl = this.$refs.overlay?.$el
-      wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
-    }
+    if (this.overlay) this.overlayEl = this.$refs.overlay?.$el
 
     if (this.modelValue && this.activator) this.toggle({ type: 'click', target: this.activatorEl })
   },
 
-  beforeUnmount () {
+  unmounted () {
     this.close()
 
     this.removeFromDOM()
@@ -353,19 +353,12 @@ export default {
         document.removeEventListener(eventName, handler)
       })
     }
-
-    if (this.overlay && this.overlayEl.parentNode) this.overlayEl.remove()
-    if (this.activatorEl?.parentNode && this.$slots.activator) this.activatorEl.remove()
   },
 
   watch: {
     modelValue (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
+      }
     }
   },