wave-ui 1.51.0 → 1.53.0

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="$listeners"
     :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-tabs/index.vue

@@ -65,6 +65,7 @@ export default {
     titleClass: { type: String },
     activeClass: { type: String, default: 'primary' },
     noSlider: { type: Boolean },
+    pillSlider: { type: Boolean },
     sliderColor: { type: String, default: 'primary' },
     contentClass: { type: String },
     transition: { type: [String, Boolean], default: '' },
@@ -122,6 +123,7 @@ export default {
       return {
         'w-tabs--card': this.card,
         'w-tabs--no-slider': this.noSlider,
+        'w-tabs--pill-slider': this.pillSlider,
         'w-tabs--fill-bar': this.fillBar,
         'w-tabs--init': this.init
       }
@@ -252,11 +254,11 @@ export default {
   &__bar {
     position: relative;
     display: flex;
-    // align-items: center;
     overflow-x: auto;
 
     &--center {justify-content: center;}
     &--right {justify-content: flex-end;}
+    .w-tabs--pill-slider & {padding-left: $base-increment;}
 
     .w-tabs--card &:after {
       content: '';
@@ -310,6 +312,7 @@ export default {
     &:active:before {opacity: 0.08;}
     &--disabled:before {display: none;}
   }
+  &--pill-slider &__bar-item:before {display: none;}
 
   // Bar Extra.
   // ------------------------------------------------------
@@ -330,6 +333,13 @@ export default {
     background-color: currentColor;
     transition: $transition-duration ease-in-out;
   }
+  &--pill-slider &__slider {
+    opacity: 0.1;
+    bottom: 15%;
+    height: 70%;
+    border-radius: 99em;
+  }
+
   &--init &__slider {transition: none;}
 
   // Content.

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 ul.w-timeline
   li.w-timeline-item(v-for="(item, i) in items" :key="i")
-    .w-timeline-item__bullet(
+    component.w-timeline-item__bullet(
       :is="item[itemIconKey] || icon ? 'w-icon' : 'div'"
       :class="{ [item[itemColorKey] || color]: item[itemColorKey] || color }")
       | {{ item[itemIconKey] || icon }}

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

@@ -13,6 +13,10 @@ export default {
     absolute: { type: Boolean },
     fixed: { type: Boolean },
     bottom: { type: Boolean },
+    vertical: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    width: { type: [Number, String], default: null },
     height: { type: [Number, String], default: null },
     noBorder: { type: Boolean },
     shadow: { type: Boolean }
@@ -21,25 +25,35 @@ export default {
   emits: [],
 
   computed: {
-    // Return the width or height value if defined, or false otherwise.
+    // Return the height value if defined, or false otherwise.
     toolbarHeight () {
       const h = this.height
       // If a number is passed without units, append `px`.
       return h && parseInt(h) == h ? h + 'px' : h
     },
+    // Return the width value if defined, or false otherwise.
+    toolbarWidth () {
+      const w = this.width
+      // If a number is passed without units, append `px`.
+      return w && parseInt(w) == w ? w + 'px' : w
+    },
     classes () {
       return {
         [this.color]: !!this.color,
         [`${this.bgColor}--bg`]: !!this.bgColor,
         'w-toolbar--absolute': !!this.absolute,
         'w-toolbar--fixed': !!this.fixed,
-        [`w-toolbar--${this.bottom ? 'bottom' : 'top'}`]: true,
+        [`w-toolbar--${this.bottom ? 'bottom' : 'top'}`]: !this.vertical,
+        [`w-toolbar--vertical w-toolbar--${this.right ? 'right' : 'left'}`]: this.vertical,
         'w-toolbar--no-border': this.noBorder,
         'w-toolbar--shadow': !!this.shadow
       }
     },
     styles () {
-      return this.height ? `height: ${this.toolbarHeight}` : false
+      return {
+        height: this.height && !this.vertical ? this.toolbarHeight : null,
+        width: this.width && this.vertical ? this.toolbarWidth : null
+      }
     }
   }
 }
@@ -58,16 +72,34 @@ export default {
   &--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;}
+
+  // Horizontal.
   &--top {border-bottom: $border;}
   &--bottom {
     bottom: 0;
     top: auto;
     border-top: $border;
   }
-  &--no-border, &--shadow {
-    border-top-width: 0;
-    border-bottom-width: 0;
+
+  // Vertical.
+  &--vertical {
+    padding: (2 * $base-increment);
+    flex-direction: column;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  &--left {border-right: $border;}
+  &--right {
+    right: 0;
+    left: auto;
+    border-left: $border;
   }
+
+  &--no-border, &--shadow {border-width: 0;}
   &--shadow {box-shadow: $box-shadow;}
 
   .w-app > & {z-index: 200;}
@@ -81,5 +113,13 @@ export default {
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
   }
+  .w-card__content &--left {
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+  .w-card__content &--right {
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
 }
 </style>

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

@@ -2,7 +2,12 @@
 .w-tooltip-wrap
   slot(name="activator" :on="activatorEventHandlers")
   transition(:name="transitionName" appear)
-    .w-tooltip(v-if="detachableVisible" ref="detachable" :class="classes" :style="styles")
+    .w-tooltip(
+      v-if="detachableVisible"
+      ref="detachable"
+      :key="_uid"
+      :class="classes"
+      :style="styles")
       slot
 </template>
 

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 })
       })
     }
@@ -341,10 +349,7 @@ export default {
     if (this.value && this.activator) this.toggle({ type: 'click', target: this.activatorEl })
   },
 
-  // Must be on destroy and not before destroy, so that when used in a dialog, we wait for the end
-  // of the animation before removing the activator element.
-  // https://github.com/antoniandre/wave-ui/issues/82
-  destroy () {
+  beforeDestroy () {
     this.close()
 
     this.removeFromDOM()
@@ -365,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
+      }
     }
   },