wave-ui 3.8.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",

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

@@ -213,10 +213,7 @@ export default {
     &:before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       background-color: currentColor;
       opacity: 0;
       transition: $fast-transition-duration;

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

@@ -162,10 +162,7 @@ export default {
   // ------------------------------------------------------
   &:before, &:after {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     background-color: currentColor;
     pointer-events: none;
   }

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

@@ -2,31 +2,41 @@
 .w-autocomplete(:class="classes" @click="onClick")
   template(v-if="selection.length")
     .w-autocomplete__selection(v-for="(item, i) in selection")
-      span(v-html="item[itemLabelKey]")
-      w-button(@click.stop="unselectItem(i)" icon="i-cross" xs text color="currentColor")
-  .w-autocomplete__placeholder(v-if="!selection.length && !keywords && placeholder" v-html="placeholder")
+      slot(name="selection" :item="item" :unselect="i => unselectItem(i)")
+        span(v-html="item[itemLabelKey]")
+        w-button(@click.stop="unselectItem(i)" icon="wi-cross" xs text color="currentColor")
+  .w-autocomplete__placeholder(
+    v-if="!selection.length && !keywords && placeholder"
+    v-html="placeholder")
   input.w-autocomplete__input(
     ref="input"
-    v-model="keywords"
-    @focus="onFocus"
-    @keydown="onKeydown"
-    @drop="onDrop"
-    @compositionstart="onCompositionStart"
-    @compositionupdate="onCompositionUpdate"
-    v-on="$listeners")
-  w-transition-slide-fade(y)
-    ul.w-autocomplete__menu(v-if="menuOpen" ref="menu")
+    :value="keywords"
+    v-on="inputEventListeners")
+  w-transition-slide-fade
+    ul.w-autocomplete__menu(
+      v-if="menuOpen"
+      ref="menu"
+      @mousedown="menuIsBeingClicked = true"
+      @mouseup="setEndOfMenuClick"
+      @touchstart="menuIsBeingClicked = true"
+      @touchend="setEndOfMenuClick")
       li(
         v-for="(item, i) in filteredItems"
         :key="i"
-        @click.stop="selectItem(item)"
+        @click.stop="selectItem(item), $emit('item-click', item)"
         :class="{ highlighted: highlightedItem === item.uid }")
-        span(v-html="item[itemLabelKey]")
+        slot(name="item" :item="item" :highlighted="highlightedItem === item.uid")
+          span(v-html="item[itemLabelKey]")
       li.w-autocomplete__no-match(
         v-if="!filteredItems.length"
         :class="{ 'w-autocomplete__no-match--default': !$slots.noMatch }")
         slot(name="no-match")
           .caption(v-html="noMatch ?? 'No match.'")
+      li.w-autocomplete__extra-item(
+        v-if="$slots['extra-item']"
+        @click="selectExtraItem"
+        :class="{ highlighted: highlightedItem === 'extra-item' }")
+        slot(name="extra-item")
 </template>
 
 <script>
@@ -52,13 +62,17 @@ export default {
     itemSearchableKey: { type: String, default: 'searchable' }
   },
 
-  emits: ['input'],
+  // item-select is also from keyboard, 'item-click' may be useful for mouseenter mouseleave events.
+  emits: ['update:modelValue', 'input', 'focus', 'blur', 'keydown', 'item-click', 'item-select', 'extra-item-select'],
 
   data: () => ({
     keywords: '',
     selection: [],
     menuOpen: false,
-    highlightedItem: null
+    highlightedItem: null,
+    // The focus-blur events occur more times than it should emit to the outside due to the menu
+    // item clicking. So keep the focus on as long as the user is interacting with the autocomplete.
+    menuIsBeingClicked: false
   }),
 
   computed: {
@@ -102,12 +116,40 @@ export default {
 
     highlightedItemIndex () {
       if (this.highlightedItem === null) return -1
+      else if (this.highlightedItem === 'extra-item') return this.filteredItems.length
       return this.filteredItems.findIndex(item => item.uid === this.highlightedItem)
     },
 
+    inputEventListeners () {
+      return {
+        ...this.$attrs,
+        input: e => {
+          this.keywords = e.target.value
+        },
+        focus: e => {
+          if (this.menuIsBeingClicked) return
+          this.onFocus(e)
+          this.$emit('focus', e)
+        },
+        blur: e => {
+          if (!this.menuIsBeingClicked) this.$emit('blur', e)
+        },
+        keydown: e => {
+          this.onKeydown(e)
+          this.$emit('keydown', e)
+        },
+        drop: this.onDrop,
+        compositionstart: this.onCompositionStart,
+        compositionupdate: this.onCompositionUpdate
+      }
+    },
+
     classes () {
       return {
-        'w-autocomplete--open': this.menuOpen
+        'w-autocomplete--open': this.menuOpen,
+        'w-autocomplete--filled': this.selection.length,
+        'w-autocomplete--has-keywords': this.keywords,
+        'w-autocomplete--empty': !this.selection.length && !this.keywords
       }
     }
   },
@@ -124,7 +166,11 @@ export default {
       this.selection.push(item)
       this.highlightedItem = item.uid
       this.keywords = ''
-      this.$emit('input', this.multiple ? this.selection.map(item => item[this.itemValueKey]) : item[this.itemValueKey])
+      const emitPayload = this.multiple ? this.selection.map(item => item[this.itemValueKey]) : item[this.itemValueKey]
+      // Unlike input, item-select is only emitted when selecting (not unselecting).
+      this.$emit('item-select', item)
+      this.$emit('update:modelValue', emitPayload)
+      this.$emit('input', emitPayload)
       this.$refs.input.focus()
       if (!this.multiple) this.closeMenu()
     },
@@ -132,10 +178,21 @@ export default {
     unselectItem (i) {
       this.selection.splice(i ?? this.selection.length - 1, 1)
       this.highlightedItem = null
+      this.$emit('update:modelValue', null)
       this.$emit('input', null)
       this.$refs.input.focus()
     },
 
+    selectExtraItem () {
+      this.keywords = ''
+      this.$emit('extra-item-select')
+      this.closeMenu()
+    },
+
+    setEndOfMenuClick () {
+      setTimeout(() => (this.menuIsBeingClicked = false), 100)
+    },
+
     onClick () {
       if (!this.openOnKeydown) this.openMenu()
       this.$refs.input.focus()
@@ -145,20 +202,31 @@ export default {
       if (!this.openOnKeydown) this.openMenu()
     },
 
+    // Can be triggered by a click outside the autocomplete, or by a tab key.
+    // It should not be simply triggered by input blur, because when we click a menu item it will
+    // blur the input for a few ms before we refocus it.
+    // onBlur () {
+    //   this.closeMenu()
+    // },
+
     onKeydown (e) {
-      const itemsCount = this.filteredItems.length
+      const itemsCount = this.filteredItems.length + (this.$slots['extra-item'] ? 1 : 0)
       // `e.key.length === 1`: is all the keyboard keys that generate a character.
       if (!this.openOnKeydown || ((this.keywords || e.key.length === 1) && !this.menuOpen)) this.openMenu()
 
+      // Tab key.
+      if (e.keyCode === 9) this.closeMenu()
+
       // Delete key.
-      if (e.keyCode === 8 && (!this.keywords || (!e.target.selectionStart && !e.target.selectionEnd))) {
+      else if (e.keyCode === 8 && (!this.keywords || (!e.target.selectionStart && !e.target.selectionEnd))) {
         this.unselectItem()
       }
 
       // Enter key.
       else if (e.keyCode === 13) {
         e.preventDefault() // Prevent form submissions.
-        if (this.highlightedItemIndex >= 0) this.selectItem(this.filteredItems[this.highlightedItemIndex])
+        if (this.highlightedItem === 'extra-item') this.selectExtraItem()
+        else if (this.highlightedItemIndex >= 0) this.selectItem(this.filteredItems[this.highlightedItemIndex])
       }
 
       // Up & down arrow keys.
@@ -168,16 +236,20 @@ export default {
         if (index === -1) index = e.keyCode === 38 ? itemsCount - 1 : 0
         else index = (index + (e.keyCode === 38 ? -1 : 1) + itemsCount) % itemsCount // Never out of range.
 
-        this.highlightedItem = this.filteredItems[index]?.uid || 0
+        if (this.$slots['extra-item'] && index === itemsCount - 1) this.highlightedItem = 'extra-item'
+        else this.highlightedItem = this.filteredItems[index]?.uid || 0
 
         // Scroll the container if highlighted item is not in view.
         const menuEl = this.$refs.menu
         if (menuEl) {
-          const { offsetHeight: itemElHeight, offsetTop: itemElTop } = menuEl.childNodes[index] || {}
-          if (menuEl.scrollTop + menuEl.offsetHeight - itemElHeight < itemElTop) {
-            menuEl.scrollTop = itemElTop - menuEl.offsetHeight + itemElHeight
+          if (this.$slots['extra-item'] && index === itemsCount - 1) menuEl.scrollTop = menuEl.scrollHeight
+          else {
+            const { offsetHeight: itemElHeight, offsetTop: itemElTop } = menuEl.childNodes[index] || {}
+            if (menuEl.scrollTop + menuEl.offsetHeight - itemElHeight < itemElTop) {
+              menuEl.scrollTop = itemElTop - menuEl.offsetHeight + itemElHeight
+            }
+            else if (menuEl.scrollTop > itemElTop) menuEl.scrollTop = itemElTop
           }
-          else if (menuEl.scrollTop > itemElTop) menuEl.scrollTop = itemElTop
         }
       }
 
@@ -226,6 +298,18 @@ export default {
 
   beforeUnmount () {
     document.removeEventListener('click', this.onDocumentClick)
+  },
+
+  watch: {
+    modelValue (value) {
+      this.selection = []
+      if (value) {
+        const arrayOfValues = Array.isArray(value) ? value : [value]
+        arrayOfValues.forEach(value => {
+          this.selection.push(this.optimizedItemsForSearch.find(item => item[this.itemValueKey] === +value))
+        })
+      }
+    }
   }
 }
 </script>
@@ -236,8 +320,8 @@ export default {
   flex-wrap: wrap;
   gap: 4px;
   position: relative;
-  border-radius: 4px;
-  border: 1px solid rgba(#000, 0.2);
+  border-radius: $border-radius;
+  border: $border;
   padding: 2px 4px;
   user-select: none;
 
@@ -249,9 +333,9 @@ export default {
   &__selection {
     display: flex;
     align-items: center;
-    background: rgba(#000, 0.035);
-    border: 1px solid rgba(#000, 0.05);
-    border-radius: 4px;
+    background: rgba(var(--w-contrast-bg-color-rgb), 0.035);
+    border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.05);
+    border-radius: $border-radius;
     padding: 0 2px 0 4px;
     flex-shrink: 0;
 
@@ -269,8 +353,7 @@ export default {
   }
 
   &__placeholder {
-    position: absolute;
-    color: #ccc;
+    color: rgba(var(--w-base-color-rgb), 0.5);
     pointer-events: none;
     line-height: 18px;
   }
@@ -281,25 +364,37 @@ export default {
     max-height: clamp(20px, 400px, 80vh);
     margin-top: -1px;
     margin-left: 0;
-    background-color: #fff;
-    border: 1px solid rgba(#000, 0.2);
+    background-color: $base-bg-color;
+    border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.2);
     border-top: none;
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
     overflow: auto;
     z-index: 10;
 
     li {
+      position: relative;
       list-style-type: none;
       margin: 0;
       padding: 4px 8px;
-      border-left: 2px solid transparent;
 
       &:hover {background-color: rgba($primary, 0.1);}
 
-      &.highlighted {
-        background-color: rgba($primary, 0.15);
-        border-left-color: rgba($primary, 0.75);
+      &:before, &:after {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
+
+      &.highlighted:before {
+        border-left: 2px solid transparent;
+        border-left-color: $primary;
+        opacity: 0.3;
+      }
+
+      &.highlighted:after {
+        background-color: $primary;
+        opacity: 0.1;
       }
     }
   }

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

@@ -236,10 +236,7 @@ $spinner-size: 40;
   &:before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     opacity: 0;
     background-color: #000;
     border-radius: inherit;
@@ -302,10 +299,7 @@ $spinner-size: 40;
 
   &__loader {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -204,10 +204,7 @@ export default {
 
   &--absolute {
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0;
     overflow: hidden;
   }
 
@@ -223,10 +220,7 @@ export default {
 
     .w-overlay {
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
       z-index: 2;
     }
     .w-drawer {position: absolute;}

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

@@ -196,19 +196,13 @@ export default {
   background-repeat: no-repeat;
   background-size: cover;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 
   &--contain {background-size: contain;}
 
   &__loader, &__content {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -449,10 +449,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-notification-manager.vue

@@ -50,9 +50,7 @@ export default {
 <style lang="scss">
 .w-notification-manager {
   position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
+  inset: 0 0 0 auto;
   z-index: 1000;
   pointer-events: none;
   width: 280px;

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

@@ -238,10 +238,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-slider.vue

@@ -395,10 +395,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;
     }

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

@@ -764,10 +764,7 @@ $tr-border-top: 1px;
     &:before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       z-index: -1;
       background-color: $base-bg-color;
     }
@@ -848,10 +845,7 @@ $tr-border-top: 1px;
   &__row--selected td:before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     background-color: var(--w-primary-color);
     opacity: 0.2;
     pointer-events: none;

package/src/wave-ui/components/w-tabs/index.vue

@@ -403,10 +403,7 @@ export default {
     &:before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       background-color: currentColor;
       opacity: 0;
       transition: $fast-transition-duration;

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

@@ -162,10 +162,7 @@ export default {
     &:before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       opacity: 0;
       background-color: transparent;
       // As this overlay is a smaller rectangle, the radius must be smaller to cover perfectly.

package/src/wave-ui/scss/_base.scss

@@ -42,7 +42,7 @@ a {text-decoration: none;}
   position: relative; // Make the .w-app a referential for tooltips / menus.
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 100dvh;
 
   &, *, :before, :after {box-sizing: border-box;}
 

package/src/wave-ui/scss/_variables.scss

@@ -47,7 +47,7 @@ $use-layout-classes: true !default;
 $base-font-size: 14px !default; // Must be a px unit.
 $base-increment: round(divide($base-font-size, 4)) !default;
 $layout-padding: $base-increment * 4 !default; // Applied on the .content-wrap tag.
-$border-radius: 3px !default;
+$border-radius: 4px !default;
 $border-color: rgba(var(--w-contrast-bg-color-rgb), 0.12) !default;
 $border: 1px solid $border-color !default;
 $transition-duration: 0.25s !default;