wave-ui 3.8.1 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.8.1",
+  "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,26 +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="wi-cross" xs text)
-  .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"
-    :model-value="keywords"
+    :value="keywords"
     v-on="inputEventListeners")
-  w-transition-slide-fade(y)
-    ul.w-autocomplete__menu(v-if="menuOpen" ref="menu")
+  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>
@@ -47,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: {
@@ -97,6 +116,7 @@ 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)
     },
 
@@ -105,10 +125,19 @@ export default {
         ...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,
+        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
@@ -137,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()
     },
@@ -145,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()
@@ -166,7 +210,7 @@ export default {
     // },
 
     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()
 
@@ -181,7 +225,8 @@ export default {
       // 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.
@@ -191,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
         }
       }
 
@@ -249,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>
@@ -259,7 +320,7 @@ export default {
   flex-wrap: wrap;
   gap: 4px;
   position: relative;
-  border-radius: 4px;
+  border-radius: $border-radius;
   border: $border;
   padding: 2px 4px;
   user-select: none;
@@ -274,7 +335,7 @@ export default {
     align-items: center;
     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;
+    border-radius: $border-radius;
     padding: 0 2px 0 4px;
     flex-shrink: 0;
 
@@ -306,8 +367,8 @@ export default {
     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;
 

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;