wave-ui 1.51.0 → 1.53.0

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

@@ -1,12 +1,12 @@
 <template lang="pug">
 component.w-icon(
   :is="tag || 'i'"
-  :class="classes"
   v-on="$listeners"
+  :class="classes"
   role="icon"
   aria-hidden="true"
-  :style="styles")
-  template(v-if="ligature") {{ ligature.icon }}
+  :style="readIcon() /* Always reacting to slot change when called from template. */ && styles")
+  template(v-if="hasLigature") {{ icon }}
 </template>
 
 <script>
@@ -41,15 +41,13 @@ export default {
   emits: [],
 
   data: () => ({
-    icon: ''
+    icon: '',
+    fontName: ''
   }),
 
   computed: {
-    ligature () {
-      if (!config.iconsLigature) return false
-
-      const [fontName, icon] = this.icon.split(' ')
-      return fontName === config.iconsLigature && { fontName, icon }
+    hasLigature () {
+      return config.iconsLigature === this.fontName
     },
     forcedSize () {
       return this.size && (!isNaN(this.size) ? `${this.size}px` : this.size)
@@ -66,7 +64,8 @@ export default {
     },
     classes () {
       return {
-        [this.icon]: true,
+        [this.fontName]: true,
+        [!this.hasLigature && this.icon]: !this.hasLigature && this.icon,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: this.presetSize && !this.forcedSize,
@@ -80,8 +79,7 @@ export default {
         'w-icon--rotate-90': this.rotate90a,
         'w-icon--rotate-135': this.rotate135a,
         'w-icon--flip-x': this.flipX,
-        'w-icon--flip-y': this.flipY,
-        [this.ligature && this.ligature.fontName]: this.ligature
+        'w-icon--flip-y': this.flipY
       }
     },
     styles () {
@@ -89,12 +87,15 @@ export default {
     }
   },
 
-  created () {
-    this.icon = this.$slots.default[0].text.trim() || ''
-  },
+  methods: {
+    readIcon () {
+      const { default: slot } = this.$slots
+      const [fontName = '', icon = ''] = slot[0].text.trim().split(' ') || []
+      this.fontName = fontName
+      this.icon = icon
 
-  beforeUpdate () {
-    this.icon = this.$slots.default[0].text.trim()
+      return true // Always return true for styles to be applied (c.f. template styles).
+    }
   }
 }
 </script>
@@ -108,6 +109,7 @@ export default {
   justify-content: center;
   vertical-align: middle;
   user-select: none;
+  speak: never;
   line-height: 1;
   font-size: 1.2em;
   width: 1em;

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"
@@ -117,15 +107,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>
@@ -146,12 +131,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] },
@@ -237,7 +222,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)
 
@@ -269,15 +254,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,
@@ -635,8 +614,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

@@ -88,6 +88,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" @input="$emit('update:modelValue', false);$emit('input', false)")
+    w-alert.white--bg(
+      v-bind="alertProps"
+      @input="$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="$emit('closed')")
+transition(name="fade" appear @after-leave="onClose")
   .w-overlay(
-    v-if="value"
-    :style="(value && styles) || null"
+    v-if="showOverlay"
+    ref="overlay"
+    :style="styles || null"
     @keydown.escape.stop="onClick"
     @click="onClick"
     v-focus
@@ -24,10 +25,19 @@ 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
+    persistentAnimate: false,
+    showOverlay: false
   }),
 
   computed: {
@@ -58,12 +68,29 @@ 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 (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)
+      this.$emit('close') // Only emit once.
+    }
+  },
+
+  created () {
+    this.showOverlay = this.value
+  },
+
+  watch: {
+    value (bool) {
+      if (this.showOverlay !== bool) this.showOverlay = bool
     }
   }
 }

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,26 +15,16 @@ component(
     @focus="$emit('focus', $event)"
     :name="inputName"
     :value="item.value === value"
-    :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="$scopedSlots[`item.${i + 1}`]"
-      :name="`item.${i + 1}`"
+      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 === value"
-      v-html="item.label")
-    slot(
-      v-else-if="$scopedSlots.item"
-      name="item"
-      :item="getOriginalItem(item)"
-      :index="i + 1"
-      :checked="item.value === value"
-      v-html="item.label")
+      :checked="item.value === value")
 </template>
 
 <script>
@@ -52,7 +42,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"
@@ -113,13 +103,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>
@@ -150,8 +137,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 },
@@ -175,7 +163,6 @@ export default {
     showMenu: false,
     menuMinWidth: 0,
     isFocused: false,
-    selectingItem: false,
     selectionWrapRef: undefined
   }),
 
@@ -213,7 +200,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,
@@ -579,8 +566,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 }"
   :valid.sync="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 {
     value: { 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.