wave-ui 1.68.1 → 1.70.0

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

@@ -20,11 +20,12 @@ component(
 
     //- Input wrapper.
     .w-input__input-wrap(:class="inputWrapClasses")
-      w-icon.w-input__icon.w-input__icon--inner-left(
-        v-if="innerIconLeft"
-        tag="label"
-        :for="`w-input--${_uid}`"
-        @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
+      slot(name="icon-left" :input-id="`w-input--${_uid}`")
+        w-icon.w-input__icon.w-input__icon--inner-left(
+          v-if="innerIconLeft"
+          tag="label"
+          :for="`w-input--${_uid}`"
+          @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
       //- All types of input except file.
       input.w-input__input(
         v-if="type !== 'file'"
@@ -61,6 +62,7 @@ component(
           @change="onFileChange"
           :multiple="multiple || null"
           v-bind="attrs"
+          :disabled="isDisabled || null"
           :data-progress="overallFilesProgress /* Needed to emit the overallProgress. */")
         transition-group.w-input__input.w-input__input--file(
           tag="label"
@@ -74,17 +76,17 @@ component(
             span.filename(:key="`${i}b`") {{ file.base }}
             | {{ file.extension ? `.${file.extension}` : '' }}
 
-      template(v-if="labelPosition === 'inside' && showLabelInside")
-        label.w-input__label.w-input__label--inside.w-form-el-shakable(
-          v-if="$slots.default || label"
+      label.w-input__label.w-input__label--inside.w-form-el-shakable(
+        v-if="labelPosition === 'inside' && showLabelInside && ($slots.default || label)"
+        :class="labelClasses")
+        slot {{ label }}
+
+      slot(name="icon-right" :input-id="`w-input--${_uid}`")
+        w-icon.w-input__icon.w-input__icon--inner-right(
+          v-if="innerIconRight"
+          tag="label"
           :for="`w-input--${_uid}`"
-          :class="labelClasses")
-          slot {{ label }}
-      w-icon.w-input__icon.w-input__icon--inner-right(
-        v-if="innerIconRight"
-        tag="label"
-        :for="`w-input--${_uid}`"
-        @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
+          @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
 
       w-progress.fill-width(
         v-if="hasLoading || (showProgress && (uploadInProgress || uploadComplete))"
@@ -228,7 +230,7 @@ export default {
     overallFilesProgress () {
       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)
+      this.$emit('update:overallProgress', this.inputFiles.length ? total : 0)
 
       return total
     },
@@ -558,6 +560,7 @@ $inactive-color: #777;
   &__label {
     transition: color $transition-duration;
     cursor: pointer;
+    user-select: none;
 
     &--left {margin-right: 2 * $base-increment;}
     &--right {margin-left: 2 * $base-increment;}

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

@@ -229,8 +229,8 @@ export default {
         'w-list__item-label--focused': item._focused,
         'w-list__item-label--hoverable': this.hover,
         'w-list__item-label--selectable': this.isSelectable,
-        [item.color]: !!item.color,
-        [this.SelectionColor]: item._selected && !item.color && this.SelectionColor,
+        [item[this.itemColorKey]]: !!item[this.itemColorKey],
+        [this.SelectionColor]: item._selected && !item[this.itemColorKey] && this.SelectionColor,
         [item[this.itemClassKey] || this.itemClass]: item[this.itemClassKey] || this.itemClass
       }
     },
@@ -406,11 +406,11 @@ export default {
       // Reset the selections when single selection allowed for w-select.
       if (!this.isMultipleSelect) this.listItems.forEach(item => (item._selected = false))
 
-      this.checkSelection(selection) // Create an array with the selected values.
-        .forEach(val => {
-          const foundItem = this.listItems.find(item => item._value === val)
-          if (foundItem) foundItem._selected = true
-        })
+      const selectedItems = this.checkSelection(selection) // Create an array with the selected values.
+      // Update which items are selected or not.
+      this.listItems.forEach(item => {
+        item._selected = selectedItems.find(val => item._value === val) !== undefined
+      })
     }
   },
 
@@ -508,10 +508,7 @@ export default {
       &:before {
         content: '';
         position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
+        inset: 0;
         background-color: currentColor;
         opacity: 0;
         transition: 0.2s;

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

@@ -79,6 +79,7 @@ export default {
     contentClass: { type: [String, Object, Array] },
     arrow: { type: Boolean }, // The small triangle pointing toward the activator.
     minWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
+    maxWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
     overlay: { type: Boolean },
     overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object }, // Allow passing down an object of props to the w-overlay component.
@@ -132,6 +133,11 @@ export default {
       else return isNaN(this.minWidth) ? this.minWidth : (this.minWidth ? `${this.minWidth}px` : 0)
     },
 
+    menuMaxWidth () {
+      if (this.maxWidth === 'activator') return this.activatorWidth ? `${this.activatorWidth}px` : 0
+      else return isNaN(this.maxWidth) ? this.maxWidth : (this.maxWidth ? `${this.maxWidth}px` : 0)
+    },
+
     menuClasses () {
       return objectifyClasses(this.menuClass)
     },
@@ -174,7 +180,8 @@ export default {
         top: (this.detachableCoords.top && `${~~this.detachableCoords.top}px`) || null,
         left: (this.detachableCoords.left && `${~~this.detachableCoords.left}px`) || null,
         minWidth: (this.minWidth && this.menuMinWidth) || null,
-        '--w-menu-bg-color': this.arrow && this.$waveui.colors[this.bgColor || 'white']
+        maxWidth: (this.maxWidth && this.menuMaxWidth) || null,
+        '--w-menu-bg-color': this.arrow && (this.$waveui.colors[this.bgColor] || 'rgb(var(--w-base-bg-color-rgb))')
       }
     },
 
@@ -254,6 +261,10 @@ export default {
      *                        even while hovering the menu.
      */
     async close (force = false) {
+      // The user may open and close the detachable so fast (like when toggling on hover) that it
+      // should not show up at all. This cancels the opening timer (if there is a set delay prop).
+      this.openTimeout = clearTimeout(this.openTimeout)
+
       // Might be already closed.
       // E.g. showOnHover & hideOnMenuClick: on click, force hide then mouseleave is also firing.
       if (!this.detachableVisible) return

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

@@ -47,10 +47,9 @@ export default {
 <style lang="scss">
 .w-notification-manager {
   position: fixed;
-  top: 0;
-  max-height: 100%;
-  right: 0;
+  inset: 0 0 0 auto;
   z-index: 1000;
+  pointer-events: none;
   width: 280px;
   overflow-x: hidden;
   overflow-y: auto;
@@ -64,6 +63,7 @@ export default {
     right: 0;
     margin: 8px;
     flex-grow: 1;
+    pointer-events: all;
   }
 }
 </style>

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

@@ -154,10 +154,7 @@ $circle-size: 40;
     &.w-progress--default-bg:after {
       content: '';
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
       border-radius: inherit;
       background-color: currentColor;
       opacity: 0.15;
@@ -188,10 +185,7 @@ $circle-size: 40;
       &:before, &:after {
         content: '';
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: -5%;
+        inset: 0 -5% 0 0;
         background: currentColor;
         z-index: 1;
         will-change: transform;

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

@@ -232,10 +232,7 @@ export default {
   &__button:after {
     content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     background-color: currentColor;
     border-radius: 100%;
     transform: translateX(100%) scale(0);

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

@@ -10,13 +10,13 @@ component(
   template(v-if="labelPosition === 'left'")
     label.w-select__label.w-select__label--left.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-select--${_uid}`"
+      @click="$refs['selection-input'].click()"
       :class="labelClasses")
       slot {{ label }}
 
   w-menu(
     v-model="showMenu"
-    @close="!$event && closeMenu()"
+    @close="closeMenu"
     :menu-class="`w-select__menu ${menuClass || ''}`"
     transition="slide-fade-down"
     :append-to="(menuProps || {}).appendTo !== undefined ? (menuProps || {}).appendTo : undefined"
@@ -24,7 +24,7 @@ component(
     custom
     min-width="activator"
     v-bind="menuProps || {}")
-    template(#activator="{ on }")
+    template(#activator)
       //- Input wrapper.
       .w-select__selection-wrap(
         @click="!isDisabled && !isReadonly && onInputFieldClick()"
@@ -43,17 +43,11 @@ component(
           slot(name="selection" :item="multiple ? inputValue : inputValue[0]")
         .w-select__selection(
           ref="selection-input"
-          :contenteditable="isDisabled || isReadonly ? 'false' : 'true'"
           @focus="!isDisabled && !isReadonly && onFocus($event)"
           @blur="onBlur"
           @keydown="!isDisabled && !isReadonly && onKeydown($event)"
-          :id="`w-select--${_uid}`"
-          :class="{ 'w-select__selection--placeholder': !$scopedSlots.selection && !selectionString && placeholder }"
-          :disabled="isDisabled || null"
-          readonly
-          aria-readonly="true"
-          :tabindex="tabindex || null"
-          v-html="($scopedSlots.selection ? '' : selectionString) || placeholder")
+          v-bind="selectionAttributes"
+          v-html="selectionHtml")
         //- For standard HTML form submission.
         input(
           v-for="(val, i) in (inputValue.length ? inputValue : [{}])"
@@ -64,7 +58,6 @@ component(
         template(v-if="labelPosition === 'inside' && showLabelInside")
           label.w-select__label.w-select__label--inside.w-form-el-shakable(
             v-if="$slots.default || label"
-            :for="`w-select--${_uid}`"
             :class="labelClasses")
             slot {{ label }}
         w-icon.w-select__icon.w-select__icon--inner-right(
@@ -76,8 +69,9 @@ component(
       @input="onInput"
       @item-click="$emit('item-click', $event)"
       @item-select="onListItemSelect"
+      @keydown.native="onWListKeydown"
       @keydown:enter="noUnselect && !multiple && closeMenu()"
-      @keydown:escape="showMenu && (this.showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
+      @keydown:escape="showMenu && (showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
       :value="inputValue"
       :items="selectItems"
       :multiple="multiple"
@@ -103,7 +97,7 @@ component(
   template(v-if="labelPosition === 'right'")
     label.w-select__label.w-select__label--right.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-select--${_uid}`"
+      @click="$refs['selection-input'].click()"
       :class="labelClasses")
       slot {{ label }}
 </template>
@@ -163,7 +157,10 @@ export default {
     showMenu: false,
     menuMinWidth: 0,
     isFocused: false,
-    selectionWrapRef: undefined
+    selectionWrapRef: undefined,
+    // Lookup a select list item from typing the first characters.
+    // If typing is too slow (> 1s), the lookup string is cleared.
+    quickLookup: { string: '', timeout: null }
   }),
 
   computed: {
@@ -180,27 +177,39 @@ export default {
         return obj
       })
     },
-    hasValue () {
-      return Array.isArray(this.inputValue) ? this.inputValue.length : (this.inputValue !== null)
-    },
     hasLabel () {
       return this.label || this.$slots.default
     },
     showLabelInside () {
-      return !this.staticLabel || (!this.hasValue && !this.placeholder)
+      return !this.staticLabel || (!this.inputValue.length && !this.placeholder)
+    },
+    selectionAttributes () {
+      return {
+        class: { 'w-select__selection--placeholder': !this.$scopedSlots.selection && !this.selectionString && this.placeholder },
+        disabled: this.isDisabled || null,
+        readonly: true,
+        ariareadonly: 'true',
+        tabindex: this.tabindex ?? null,
+        contenteditable: this.isDisabled || this.isReadonly ? 'false' : 'true'
+      }
     },
     selectionString () {
-      return this.inputValue && this.inputValue.map(
+      return this.inputValue.map(
         item => item[this.itemValueKey] !== undefined ? item[this.itemLabelKey] : (item[this.itemLabelKey] ?? item)
       ).join(', ')
     },
+    selectionHtml () {
+      if (!this.inputValue.length) return this.placeholder || ''
+      if (this.$scopedSlots.selection) return ''
+      return this.selectionString
+    },
     classes () {
       return {
         'w-select': true,
         'w-select--disabled': this.isDisabled,
         'w-select--fit-to-content': this.fitToContent,
         'w-select--readonly': this.isReadonly,
-        [`w-select--${this.hasValue ? 'filled' : 'empty'}`]: true,
+        [`w-select--${this.inputValue.length ? 'filled' : 'empty'}`]: true,
         '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,
@@ -272,16 +281,61 @@ export default {
             index = (index + items.length + direction) % items.length
           }
 
-          this.onInput(items[index])
+          // If the current item is disabled, find the next one enabled (forward or backward).
+          let allItemsAreDisabled = false
+          if (items[index].disabled) {
+            const direction = e.keyCode === 38 ? -1 : 1 // Prev or next.
+
+            // Modulo to prevent out of range; + items.length to also work with negative values.
+            let newIndex = (index + direction + items.length) % items.length
+            const itemsCount = items.length
+            let loop = 0 // While-safety: will always end at least after 1 full array cycle.
+            while (loop < itemsCount && items[newIndex].disabled) {
+              // Circle through the array of items forward or backward, and reloop when out of range.
+              newIndex = (newIndex + items.length + direction) % items.length
+              loop++
+            }
+            if (loop >= itemsCount) allItemsAreDisabled = true
+            index = newIndex
+          }
+
+          if (!allItemsAreDisabled) this.onInput(items[index])
         }
       }
+
+      // `e.key.length === 1`: only the keys that output a character.
+      else if (e.key.length === 1) this.focusItemOnQuickLookup(e)
+    },
+
+    onWListKeydown (e) {
+      // `e.key.length === 1`: only the keys that output a character.
+      if (e.key.length === 1) this.focusItemOnQuickLookup(e)
+    },
+
+    focusItemOnQuickLookup (e) {
+      // Reset the timer every time a new valid key is pressed so we concat the string of chars.
+      if (this.quickLookup.timeout) clearTimeout(this.quickLookup.timeout)
+      // On each keypress, wait for 1s and clear the lookup string unless a key is pressed again.
+      this.quickLookup.timeout = setTimeout(() => this.quickLookup.string = '', 1000)
+
+      // Form a lookup string that is tested (starting from the first char) on each list item until
+      // a match is found.
+      this.quickLookup.string += e.key
+      const re = new RegExp(`^${this.quickLookup.string}`, 'i')
+      const itemIndexToFocus = this.selectItems.findIndex(
+        item => !item.disabled && item[this.itemLabelKey].match(re)
+      ) + 1 // 0 if not found, more if found.
+      if (itemIndexToFocus) {
+        const selector = `.w-list__item:nth-child(${itemIndexToFocus}) .w-list__item-label`
+        this.$refs['w-list']?.$el?.querySelector(selector)?.focus()
+      }
     },
 
     // The items are given by the w-list component.
     onInput (items) {
       this.inputValue = items === null ? [] : (this.multiple ? items : [items])
       // Return the original items when returnObject is true (no `value` if there wasn't),
-      // or the the item value otherwise.
+      // or the item value otherwise.
       items = this.inputValue.map(item => this.returnObject ? this.items[item.index] : item.value)
 
       // Emit the selection to the v-model.
@@ -290,6 +344,7 @@ export default {
       this.$emit('update:modelValue', selection)
       this.$emit('input', selection)
     },
+
     onInputFieldClick () {
       if (this.showMenu) this.showMenu = false // Will call `closeMenu()` from w-menu(@close).
       else this.openMenu()
@@ -322,7 +377,7 @@ export default {
       return items.map(item => {
         let value = item
         if (item && typeof item === 'object') { // `null` is also an object!
-          value = item[this.itemValueKey] !== undefined ? item[this.itemValueKey] : (item[this.itemLabelKey] !== undefined ? item[this.itemLabelKey] : item)
+          value = item[this.itemValueKey] ?? item[this.itemLabelKey] ?? item
         }
 
         return this.selectItems[allValues.indexOf(value)]
@@ -346,7 +401,7 @@ export default {
 
       this.showMenu = false
       // Set the focus back on the main w-select input.
-      setTimeout(() => this.$refs['selection-input'].focus(), 50)
+      setTimeout(() => this.$refs['selection-input']?.focus(), 50)
     }
   },
 
@@ -455,6 +510,9 @@ export default {
     align-items: center;
     cursor: pointer;
     caret-color: transparent;
+    border-radius: inherit;
+
+    &--placeholder {color: #888;}
 
     .w-select__selection-slot + & {
       position: absolute;
@@ -481,8 +539,6 @@ export default {
     }
 
     .w-select--readonly & {cursor: auto;}
-
-    &--placeholder {color: #888;}
   }
 
   &__selection-slot {
@@ -508,8 +564,8 @@ export default {
       -webkit-tap-highlight-color: transparent;
     }
 
-    &--inner-left {left: 6px;}
-    &--inner-right {right: 6px;}
+    &--inner-left {left: $base-increment;}
+    &--inner-right {right: $base-increment;}
     .w-select--no-padding &--inner-left {left: 1px;}
     .w-select--no-padding &--inner-right {right: 1px;}
 
@@ -526,6 +582,7 @@ export default {
     align-items: center;
     transition: color $transition-duration;
     cursor: pointer;
+    user-select: none;
 
     &--left {margin-right: 2 * $base-increment;}
     &--right {margin-left: 2 * $base-increment;}
@@ -543,17 +600,15 @@ export default {
 
   &__label--inside {
     position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
+    inset: 0 0 auto;
+    min-height: inherit;
     white-space: nowrap;
     // Use margin instead of padding as the scale transformation below decreases the real padding
     // size and misaligns the label.
     margin-left: 2 * $base-increment;
-    transform: translateY(-50%);
     pointer-events: none;
 
-    .w-select--inner-icon-right & {padding-right: 22px;}
+    .w-select--inner-icon-right & {padding-right: 26px;}
 
     .w-select--no-padding & {
       left: 0;
@@ -570,28 +625,19 @@ export default {
       transition: $transition-duration ease;
     }
 
-    // move label with underline style.
-    .w-select--focused.w-select--floating-label &,
+    // Move label with underline style.
     .w-select--open.w-select--floating-label &,
     .w-select--filled.w-select--floating-label &,
     .w-select--has-placeholder.w-select--floating-label & {
-      transform: translateY(-160%) scale(0.85);
+      transform: translateY(-80%) scale(0.85);
     }
-    // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
+    // Chrome & Safari - Must stay a separated rule or Firefox discards the whole rule seeing -webkit-.
     .w-select--floating-label .w-select__select:-webkit-autofill & {
-      transform: translateY(-160%) scale(0.85);
-    }
-    // Move label with outline style or with shadow.
-    .w-select--focused.w-select--floating-label .w-select__selection-wrap--box &,
-    .w-select--open.w-select--floating-label .w-select__selection-wrap--box &,
-    .w-select--filled.w-select--floating-label .w-select__selection-wrap--box &,
-    .w-select--has-placeholder.w-select--floating-label .w-select__selection-wrap--box & {
-      transform: translateY(-180%) scale(0.85);
+      transform: translateY(-80%) scale(0.85);
     }
-    .w-select--focused.w-select--floating-label.w-select--inner-icon-left &,
     .w-select--open.w-select--floating-label.w-select--inner-icon-left &,
     .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-.
+    // Chrome & Safari - Must stay a separated rule or Firefox discards the whole rule seeing -webkit-.
     .w-select--floating-label.w-select--inner-icon-left .w-select__select:-webkit-autofill & {left: 0;}
   }
 

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

@@ -296,7 +296,8 @@ export default {
       top: 0;
       width: $base-increment;
       aspect-ratio: 1;
-      background-color: rgba(0, 0, 0, 0.2);
+      min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
+      background-color: $slider-step-label-bg-color;
       border-radius: 99em;
       // box-shadow: 0 0 0 1px #fff;
       box-sizing: border-box;
@@ -359,6 +360,7 @@ export default {
     position: absolute;
     width: 3 * $base-increment;
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     left: 100%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -374,6 +376,7 @@ export default {
     top: 0;
     width: 100%;
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     border: none;
     border-radius: 99em;
     cursor: pointer;
@@ -389,10 +392,7 @@ export default {
     }
     // Colored border on thumb when hover and active - but with a transparency.
     &:before {
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
+      inset: 0;
       opacity: 0.5;
       border: 1px solid currentColor;
     }
@@ -453,6 +453,7 @@ export default {
       border-radius: 99em 99em 99em 0;
       width: 2.8em;
       aspect-ratio: 1;
+      min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
 
       & > div {
         position: absolute;

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

@@ -62,6 +62,7 @@ export default {
   font-size: 2rem;
   width: 1em;
   aspect-ratio: 1;
+  min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
 
   &.size--xs {font-size: round(0.9 * divide($base-font-size, 2)) * 2;}
   &.size--sm {font-size: round(1.5 * $base-font-size);}
@@ -74,6 +75,7 @@ export default {
     position: absolute;
     width: 100%;
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     top: 0;
     left: 0;
     background-color: currentColor;

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

@@ -252,7 +252,7 @@ $disabled-color: #ddd;
 
   // The focus outline & ripple on switch activation.
   &__input:before {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     top: 0;