wave-ui 2.35.0 → 2.36.2

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

@@ -13,15 +13,10 @@ component(
     //- Left label.
     template(v-if="labelPosition === 'left'")
       label.w-input__label.w-input__label--left.w-form-el-shakable(
-        v-if="$slots.default"
+        v-if="$slots.default || label"
         :for="`w-input--${_.uid}`"
-        :class="validationClasses")
-        slot
-      label.w-input__label.w-input__label--left.w-form-el-shakable(
-        v-else-if="label"
-        :for="`w-input--${_.uid}`"
-        :class="validationClasses"
-        v-html="label")
+        :class="labelClasses")
+        slot {{ label }}
 
     //- Input wrapper.
     .w-input__input-wrap(:class="inputWrapClasses")
@@ -81,15 +76,10 @@ component(
 
       template(v-if="labelPosition === 'inside' && showLabelInside")
         label.w-input__label.w-input__label--inside.w-form-el-shakable(
-          v-if="$slots.default"
-          :for="`w-input--${_.uid}`"
-          :class="validationClasses")
-          slot
-        label.w-input__label.w-input__label--inside.w-form-el-shakable(
-          v-else-if="label"
+          v-if="$slots.default || label"
           :for="`w-input--${_.uid}`"
-          v-html="label"
-          :class="validationClasses")
+          :class="labelClasses")
+          slot {{ label }}
       w-icon.w-input__icon.w-input__icon--inner-right(
         v-if="innerIconRight"
         tag="label"
@@ -121,15 +111,10 @@ component(
     //- Right label.
     template(v-if="labelPosition === 'right'")
       label.w-input__label.w-input__label--right.w-form-el-shakable(
-        v-if="$slots.default"
-        :for="`w-input--${_.uid}`"
-        :class="validationClasses")
-        slot
-      label.w-input__label.w-input__label--right.w-form-el-shakable(
-        v-else-if="label"
+        v-if="$slots.default || label"
         :for="`w-input--${_.uid}`"
-        :class="validationClasses"
-        v-html="label")
+        :class="labelClasses")
+        slot {{ label }}
 </template>
 
 <script>
@@ -151,12 +136,12 @@ export default {
     labelPosition: { type: String, default: 'inside' },
     innerIconLeft: { type: String },
     innerIconRight: { type: String },
-    // When label is inside, allows to move the label above on focus or when filled.
-    staticLabel: { type: Boolean },
+    staticLabel: { type: Boolean }, // When label is inside, fix the label above.
     placeholder: { type: String },
     color: { type: String, default: 'primary' },
-    progressColor: { type: String },
     bgColor: { type: String },
+    labelColor: { type: String, default: 'primary' },
+    progressColor: { type: String },
     minlength: { type: [Number, String] },
     maxlength: { type: [Number, String] },
     step: { type: [Number, String] },
@@ -248,7 +233,7 @@ export default {
     },
 
     overallFilesProgress () {
-      const progress = this.inputFiles.reduce((total, file) => total + file.progress, 0)
+      const progress = +this.inputFiles.reduce((total, file) => total + file.progress, 0)
       const total = progress / this.inputFiles.length
       this.$emit('update:overallProgress', this.inputFiles.length ? total : undefined)
 
@@ -280,15 +265,9 @@ export default {
       }
     },
 
-    validationClasses () {
-      return this.isFocused && {
-        [this.valid === false ? 'error' : this.color]: this.color || this.valid === false
-      }
-    },
-
     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-input__input-wrap--file': this.type === 'file',
         'w-input__input-wrap--round': this.round,
@@ -645,8 +624,6 @@ $inactive-color: #777;
     .w-input--filled.w-input--floating-label.w-input--inner-icon-left & {left: 0;}
     // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
     .w-input--floating-label.w-input--inner-icon-left .w-input__input:-webkit-autofill & {left: 0;}
-
-    .w-input--focused & {color: currentColor;}
   }
 }
 </style>

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

@@ -1,57 +1,47 @@
 <template lang="pug">
-.w-menu-wrap
-  slot(name="activator" :on="activatorEventHandlers")
-  transition(:name="transitionName" appear)
-    .w-menu(
-      v-if="custom && detachableVisible"
-      ref="detachable"
-      v-bind="$attrs"
-      @click="hideOnMenuClick && close(true)"
-      @mouseenter="showOnHover && (hoveringMenu = true)"
-      @mouseleave="showOnHover && ((hoveringMenu = false), close())"
-      :class="classes"
-      :style="styles")
-      slot
-    w-card.w-menu(
-      v-else-if="detachableVisible"
-      ref="detachable"
-      v-bind="$attrs"
-      @click.native="hideOnMenuClick && close(true)"
-      @mouseenter.native="showOnHover && (hoveringMenu = true)"
-      @mouseleave.native="showOnHover && ((hoveringMenu = false), close())"
-      :tile="tile"
-      :title-class="titleClasses"
-      :content-class="contentClasses"
-      :shadow="shadow"
-      :no-border="noBorder"
-      :class="classes"
-      :style="styles")
-      template(v-if="$slots.title" #title)
-        slot(name="title")
-      template(v-if="$slots.actions" #actions)
-        slot(name="actions")
-      slot
-  w-overlay(
-    v-if="overlay"
-    ref="overlay"
-    :model-value="detachableVisible"
-    :persistent="persistent"
-    :class="overlayClasses"
-    v-bind="overlayProps"
-    :z-index="(zIndex || 200) - 1"
-    @update:model-value="detachableVisible = false")
+slot(name="activator" :on="activatorEventHandlers")
+transition(:name="transitionName" appear)
+  .w-menu(
+    v-if="custom && detachableVisible"
+    ref="detachable"
+    v-bind="$attrs"
+    @click="hideOnMenuClick && close(true)"
+    @mouseenter="showOnHover && (hoveringMenu = true)"
+    @mouseleave="showOnHover && ((hoveringMenu = false), close())"
+    :class="classes"
+    :style="styles")
+    slot
+  w-card.w-menu(
+    v-else-if="detachableVisible"
+    ref="detachable"
+    v-bind="$attrs"
+    @click.native="hideOnMenuClick && close(true)"
+    @mouseenter.native="showOnHover && (hoveringMenu = true)"
+    @mouseleave.native="showOnHover && ((hoveringMenu = false), close())"
+    :tile="tile"
+    :title-class="titleClasses"
+    :content-class="contentClasses"
+    :shadow="shadow"
+    :no-border="noBorder"
+    :class="classes"
+    :style="styles")
+    template(v-if="$slots.title" #title)
+      slot(name="title")
+    template(v-if="$slots.actions" #actions)
+      slot(name="actions")
+    slot
+w-overlay(
+  v-if="overlay"
+  ref="overlay"
+  :model-value="detachableVisible"
+  :persistent="persistent"
+  :class="overlayClasses"
+  v-bind="overlayProps"
+  :z-index="(zIndex || 200) - 1"
+  @update:model-value="detachableVisible = false")
 </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 menu 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 menu in a wrapper then unwrap
- * and move the menu elsewhere in the DOM.
- */
-
 import { objectifyClasses } from '../utils/index'
 import DetachableMixin from '../mixins/detachable'
 
@@ -88,6 +78,14 @@ export default {
     // alignRight, noPosition, zIndex, activator.
   },
 
+  provide () {
+    return {
+      // If a detachable is used inside a w-menu without an appendTo, default to the menu element
+      // instead of the w-app.
+      detachableDefaultRoot: () => this.$refs.detachable?.$el || this.$refs.detachable || null
+    }
+  },
+
   emits: ['input', 'update:modelValue', 'open', 'close'],
 
   data: () => ({

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

@@ -1,7 +1,9 @@
 <template lang="pug">
 transition(:name="transitionName" appear)
   .w-notification(v-if="show" :class="classes" :style="styles")
-    w-alert.white--bg(v-bind="alertProps" @update:model-value="$emit('update:modelValue', false);$emit('input', false)")
+    w-alert.white--bg(
+      v-bind="alertProps"
+      @update:model-value="$emit('update:modelValue', false);$emit('input', false)")
       slot
 </template>
 

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

@@ -1,8 +1,9 @@
 <template lang="pug">
-transition(name="fade" appear @after-leave="onClosed")
+transition(name="fade" appear @after-leave="onClose")
   .w-overlay(
-    v-if="showOverlay"
-    v-show="modelValue"
+    v-if="modelValue"
+    v-show="showOverlay"
+    ref="overlay"
     :style="(modelValue && styles) || null"
     @keydown.escape.stop="onClick"
     @click="onClick"
@@ -25,7 +26,15 @@ export default {
     persistentNoAnimation: { type: Boolean }
   },
 
-  emits: ['input', 'update:modelValue', 'click', 'close', 'closed'],
+  provide () {
+    return {
+      // If a detachable is used inside a w-overlay without an appendTo, default to the overlay element
+      // instead of the w-app.
+      detachableDefaultRoot: () => this.$refs.overlay || null
+    }
+  },
+
+  emits: ['input', 'update:modelValue', 'click', 'before-close', 'close'],
 
   data: () => ({
     persistentAnimate: false,
@@ -60,21 +69,19 @@ export default {
         setTimeout(() => (this.persistentAnimate = false), 150) // Must match CSS animation duration.
       }
       else if (!this.persistent) {
-        this.$emit('update:modelValue', false)
-        this.$emit('input', false)
-        this.$emit('close')
+        this.showOverlay = false
+        this.$emit('before-close')
       }
 
       this.$emit('click', e)
     },
 
-    // Wait until the end of the closing transition to unmount the components it contains.
-    // This way, in case of w-select in w-dialog, the w-select will only remove its activator
-    // element from the DOM once the dialog is completely closed.
-    // https://github.com/antoniandre/wave-ui/issues/82
-    onClosed () {
-      this.showOverlay = false
-      this.$emit('closed')
+    // Wait until the end of the closing transition (v-show) to completely unmount (v-if).
+    // The onClose method is called twice from the transition: once for the v-show, and once for the v-if.
+    onClose () {
+      this.$emit('update:modelValue', false)
+      this.$emit('input', false)
+      if (!this.modelValue) this.$emit('close') // Only emit once.
     }
   },
 

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

@@ -20,16 +20,20 @@ component(
     :aria-checked="inputValue || 'false'"
     role="radio")
   template(v-if="hasLabel && labelOnLeft")
-    label.w-radio__label.w-form-el-shakable.pr2(v-if="$slots.default" :for="`w-radio--${_.uid}`")
-      slot
-    label.w-radio__label.w-form-el-shakable.pr2(v-else-if="label" :for="`w-radio--${_.uid}`" v-html="label")
+    label.w-radio__label.w-form-el-shakable.pr2(
+      v-if="$slots.default || label"
+      :for="`w-radio--${_.uid}`"
+      :class="labelClasses")
+      slot {{ label }}
   .w-radio__input(
     @click="$refs.input.focus();$refs.input.click()"
     :class="this.color")
   template(v-if="hasLabel && !labelOnLeft")
-    label.w-radio__label.w-form-el-shakable.pl2(v-if="$slots.default" :for="`w-radio--${_.uid}`")
-      slot
-    label.w-radio__label.w-form-el-shakable.pl2(v-else-if="label" :for="`w-radio--${_.uid}`" v-html="label")
+    label.w-radio__label.w-form-el-shakable.pl2(
+      v-if="$slots.default || label"
+      :for="`w-radio--${_.uid}`"
+      :class="labelClasses")
+      slot {{ label }}
 </template>
 
 <script>
@@ -48,6 +52,7 @@ export default {
     label: { type: String },
     labelOnLeft: { type: Boolean },
     color: { type: String, default: 'primary' },
+    labelColor: { type: String, default: 'primary' },
     noRipple: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.

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

@@ -15,22 +15,13 @@ component(
     @update:model-value="onInput(item)"
     @focus="$emit('focus', $event)"
     :name="inputName"
-    :label="item.label"
-    :label-on-left="labelOnLeft"
-    :color="item.color"
+    v-bind="{ label: item.label, color: item.color, labelOnLeft, labelColor }"
     :disabled="isDisabled || null"
     :readonly="isReadonly || null"
     :class="{ mt1: !inline && i }")
     slot(
-      v-if="$slots[`item.${i + 1}`]"
-      :name="`item.${i + 1}`"
-      :item="getOriginalItem(item)"
-      :index="i + 1"
-      :checked="item.value === modelValue"
-      v-html="item.label")
-    slot(
-      v-else-if="$slots.item"
-      name="item"
+      v-if="$slots[`item.${i + 1}`] || $slots.item"
+      :name="$slots[`item.${i + 1}`] ? `item.${i + 1}` : 'item'"
       :item="getOriginalItem(item)"
       :index="i + 1"
       :checked="item.value === modelValue"
@@ -53,7 +44,8 @@ export default {
     itemValueKey: { type: String, default: 'value' },
     itemColorKey: { type: String, default: 'color' }, // Support a different color per item.
     inline: { type: Boolean },
-    color: { type: String, default: 'primary' }
+    color: { type: String, default: 'primary' },
+    labelColor: { type: String, default: 'primary' }
     // Props from mixin: name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },

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

@@ -9,24 +9,19 @@ component(
   :class="classes")
   template(v-if="labelPosition === 'left'")
     label.w-select__label.w-select__label--left.w-form-el-shakable(
-      v-if="$slots.default"
-      :for="`w-select--${_.uid}`")
-      slot
-    label.w-select__label.w-select__label--left.w-form-el-shakable(
-      v-else-if="label"
+      v-if="$slots.default || label"
       :for="`w-select--${_.uid}`"
-      v-html="label")
+      :class="labelClasses")
+      slot {{ label }}
 
   w-menu(
     v-model="showMenu"
     :menu-class="`w-select__menu ${menuClass || ''}`"
     transition="slide-fade-down"
-    :append-to="(menuProps || {}).appendTo !== undefined ? (menuProps || {}).appendTo : '.w-app'"
+    :append-to="(menuProps || {}).appendTo !== undefined ? (menuProps || {}).appendTo : undefined"
     align-left
     custom
     min-width="activator"
-    @mousedown="isFocused = true, selectingItem = true"
-    @mouseup="isFocused = true, selectingItem = false"
     v-bind="menuProps || {}")
     template(#activator="{ on }")
       //- Input wrapper.
@@ -69,15 +64,10 @@ component(
           :name="inputName + (multiple ? '[]' : '')")
         template(v-if="labelPosition === 'inside' && showLabelInside")
           label.w-select__label.w-select__label--inside.w-form-el-shakable(
-            v-if="$slots.default"
-            :for="`w-select--${_.uid}`"
-            :class="isFocused && { [valid === false ? 'error' : color]: color || valid === false }")
-            slot
-          label.w-select__label.w-select__label--inside.w-form-el-shakable(
-            v-else-if="label"
+            v-if="$slots.default || label"
             :for="`w-select--${_.uid}`"
-            v-html="label"
-            :class="isFocused && { [valid === false ? 'error' : color]: color || valid === false }")
+            :class="labelClasses")
+            slot {{ label }}
         w-icon.w-select__icon.w-select__icon--inner-right(
           v-if="innerIconRight"
           tag="label"
@@ -112,13 +102,10 @@ component(
 
   template(v-if="labelPosition === 'right'")
     label.w-select__label.w-select__label--right.w-form-el-shakable(
-      v-if="$slots.default"
-      :for="`w-select--${_.uid}`")
-      slot
-    label.w-select__label.w-select__label--right.w-form-el-shakable(
-      v-else-if="label"
+      v-if="$slots.default || label"
       :for="`w-select--${_.uid}`"
-      v-html="label")
+      :class="labelClasses")
+      slot {{ label }}
 </template>
 
 <script>
@@ -149,8 +136,9 @@ export default {
     itemClass: { type: String },
     menuClass: { type: String },
     color: { type: String, default: 'primary' }, // Applies to all the items.
-    selectionColor: { type: String, default: 'primary' }, // Applies to the selected items only.
     bgColor: { type: String }, // Applies to all the items.
+    labelColor: { type: String, default: 'primary' },
+    selectionColor: { type: String, default: 'primary' }, // Applies to the selected items only.
     outline: { type: Boolean },
     round: { type: Boolean },
     shadow: { type: Boolean },
@@ -174,7 +162,6 @@ export default {
     showMenu: false,
     menuMinWidth: 0,
     isFocused: false,
-    selectingItem: false,
     selectionWrapRef: undefined
   }),
 
@@ -212,7 +199,7 @@ export default {
         'w-select--disabled': this.isDisabled,
         'w-select--readonly': this.isReadonly,
         [`w-select--${this.hasValue ? 'filled' : 'empty'}`]: true,
-        'w-select--focused': (this.isFocused || this.selectingItem) && !this.isReadonly,
+        'w-select--focused': (this.isFocused || this.showMenu) && !this.isReadonly,
         'w-select--dark': this.dark,
         'w-select--floating-label': this.hasLabel && this.labelPosition === 'inside' && !this.staticLabel,
         'w-select--no-padding': !this.outline && !this.bgColor && !this.shadow && !this.round,
@@ -578,8 +565,6 @@ export default {
     .w-select--filled.w-select--floating-label.w-select--inner-icon-left & {left: 0;}
     // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
     .w-select--floating-label.w-select--inner-icon-left .w-select__select:-webkit-autofill & {left: 0;}
-
-    .w-select--focused &, .w-select--open & {color: currentColor;}
   }
 
   // Menu.

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

@@ -5,15 +5,17 @@ component(
   v-bind="formRegister && { validators, inputValue: rangeValueScaled, disabled: isDisabled, readonly: isReadonly }"
   v-model:valid="valid"
   @reset="rangeValuePercent = 0;updateRangeValueScaled()"
-  wrap
+  :wrap="formRegister || null"
   :class="wrapperClasses")
   label.w-slider__label.w-slider__label--left.w-form-el-shakable(
     v-if="$slots['label-left']"
-    :for="`button--${_.uid}`")
+    :for="`button--${_.uid}`"
+    :class="labelClasses")
     slot(name="label-left")
   label.w-slider__label.w-slider__label--left.w-form-el-shakable(
     v-else-if="labelLeft"
     :for="`button--${_.uid}`"
+    :class="labelClasses"
     v-html="labelLeft")
   .w-slider__track-wrap
     .w-slider__track(
@@ -39,6 +41,7 @@ component(
           :disabled="isDisabled || null"
           :readonly="isReadonly || null"
           :aria-readonly="isReadonly ? 'true' : 'false'"
+          :tabindex="isDisabled || isReadonly ? -1 : null"
           @keydown.left="onKeyDown($event, -1)"
           @keydown.right="onKeyDown($event, 1)"
           @focus="$emit('focus', $event)"
@@ -64,11 +67,13 @@ component(
         style="left: 100%") {{ this.maxVal }}
   label.w-slider__label.w-slider__label--right.w-form-el-shakable(
     v-if="$slots['label-right']"
-    :for="`button--${_.uid}`")
+    :for="`button--${_.uid}`"
+    :class="labelClasses")
     slot(name="label-right")
   label.w-slider__label.w-slider__label--right.w-form-el-shakable(
     v-else-if="labelRight"
     :for="`button--${_.uid}`"
+    :class="labelClasses"
     v-html="labelRight")
 </template>
 
@@ -83,6 +88,7 @@ export default {
     modelValue: { type: Number, default: 0 },
     color: { type: String, default: 'primary' },
     bgColor: { type: String },
+    labelColor: { type: String, default: 'primary' },
     stepLabels: { type: [Boolean, Array] },
     thumbLabel: { type: [Boolean, String] }, // One of true, false, 'droplet'.
     thumbLabelClass: { type: String },
@@ -378,16 +384,17 @@ export default {
     &:before, &:after {
       content: '';
       position: absolute;
+      border-radius: inherit;
+      @include default-transition;
     }
+    // Colored border on thumb when hover and active - but with a transparency.
     &:before {
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       opacity: 0.5;
-      border-radius: inherit;
       border: 1px solid currentColor;
-      @include default-transition;
     }
     &:hover:before, &:focus:before {opacity: 0.7;}
     &:active:before, .w-slider--dragging &:before {
@@ -398,13 +405,17 @@ export default {
     .w-slider--disabled &:before,
     .w-slider--readonly &:before {box-shadow: none;opacity: 0.4;}
 
-    // For fat fingers.
+    // The outline when focused, but also a bigger reactive zone for fat fingers when not.
     &:after {
-      left: -6px;
-      right: -6px;
-      top: -6px;
-      bottom: -6px;
+      left: -2 * $base-increment;
+      right: -2 * $base-increment;
+      top: -2 * $base-increment;
+      bottom: -2 * $base-increment;
+      opacity: 0;
+      background-color: currentColor;
     }
+    &:focus:after {opacity: 0.15;}
+    .w-slider--dragging &:after, &:active:after {opacity: 0.1;transform: scale(1.2);}
   }
 
   // Thumb label.

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

@@ -22,9 +22,11 @@ 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"
@@ -34,9 +36,11 @@ component(
     .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>
@@ -51,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.