wave-ui 3.8.0 → 3.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "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-autocomplete.vue

@@ -3,17 +3,12 @@
   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-button(@click.stop="unselectItem(i)" icon="wi-cross" xs text)
   .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")
+    :model-value="keywords"
+    v-on="inputEventListeners")
   w-transition-slide-fade(y)
     ul.w-autocomplete__menu(v-if="menuOpen" ref="menu")
       li(
@@ -105,9 +100,27 @@ export default {
       return this.filteredItems.findIndex(item => item.uid === this.highlightedItem)
     },
 
+    inputEventListeners () {
+      return {
+        ...this.$attrs,
+        input: e => {
+          this.keywords = e.target.value
+          if (typeof this.$attrs.input === 'function') this.$attrs.input(this.keywords)
+        },
+        focus: this.onFocus,
+        keydown: this.onKeydown,
+        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
       }
     }
   },
@@ -145,13 +158,23 @@ 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
       // `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()
       }
 
@@ -237,7 +260,7 @@ export default {
   gap: 4px;
   position: relative;
   border-radius: 4px;
-  border: 1px solid rgba(#000, 0.2);
+  border: $border;
   padding: 2px 4px;
   user-select: none;
 
@@ -249,8 +272,8 @@ export default {
   &__selection {
     display: flex;
     align-items: center;
-    background: rgba(#000, 0.035);
-    border: 1px solid rgba(#000, 0.05);
+    background: rgba(var(--w-contrast-bg-color-rgb), 0.035);
+    border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.05);
     border-radius: 4px;
     padding: 0 2px 0 4px;
     flex-shrink: 0;
@@ -269,8 +292,7 @@ export default {
   }
 
   &__placeholder {
-    position: absolute;
-    color: #ccc;
+    color: rgba(var(--w-base-color-rgb), 0.5);
     pointer-events: none;
     line-height: 18px;
   }
@@ -281,8 +303,8 @@ 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;
@@ -290,16 +312,28 @@ export default {
     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;
       }
     }
   }