wave-ui 1.69.0 → 1.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.69.0",
+  "version": "1.70.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",
@@ -50,38 +50,38 @@
     "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/eslint-parser": "^7.22.15",
+    "@babel/core": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@faker-js/faker": "^8.2.0",
+    "@faker-js/faker": "^8.4.1",
     "@mdi/font": "^6.9.96",
     "@vitejs/plugin-vue": "^1.10.2",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "axios": "^0.21.4",
-    "core-js": "^3.33.2",
+    "core-js": "^3.36.0",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-vue": "^7.20.0",
     "font-awesome": "^4.7.0",
     "ghspa": "^1.0.0",
-    "gsap": "^3.12.2",
+    "gsap": "^3.12.5",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.35",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.69.5",
+    "sass": "^1.71.0",
     "simple-syntax-highlighter": "^1.6.2",
     "splitpanes": "^2.4.1",
-    "vite": "^2.9.16",
+    "vite": "^2.9.17",
     "vite-plugin-vue2": "^1.9.3",
-    "vue": "^2.7.15",
+    "vue": "^2.7.16",
     "vue-router": "^3.6.5",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.7.15",
+    "vue-template-compiler": "^2.7.16",
     "vueperslides": "^2.16.0",
     "vuex": "^3.6.2"
   }

package/src/wave-ui/components/index.js

@@ -1,5 +1,6 @@
 export { default as WAccordion } from './w-accordion.vue'
 export { default as WAlert } from './w-alert.vue'
+export { default as WAutocomplete } from './w-autocomplete.vue'
 export { default as WApp } from './w-app.vue'
 export { default as WBadge } from './w-badge.vue'
 export { default as WBreadcrumbs } from './w-breadcrumbs.vue'

package/src/wave-ui/components/transitions/w-transition-expand.vue

@@ -162,19 +162,17 @@ export default {
       // Keep any original inline styles to restore them after transition.
       this.el.originalStyles = el.style.cssText
     },
-    show (el, done) {
+    show (el) {
       this.saveComputedStyles(el)
       this.applyHideStyles(el)
 
       setTimeout(() => this.applyShowStyles(el), 20)
-      setTimeout(done, this.duration)
     },
     beforeHide (el) {
       this.applyShowStyles(el)
     },
-    hide (el, done) {
+    hide (el) {
       setTimeout(() => this.applyHideStyles(el), 20)
-      setTimeout(done, this.duration)
     },
     saveComputedStyles (el) {
       const computedStyles = window.getComputedStyle(el, null)

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

@@ -207,10 +207,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

@@ -156,10 +156,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

@@ -0,0 +1,404 @@
+<template lang="pug">
+.w-autocomplete(:class="classes" @click="onClick")
+  template(v-if="selection.length")
+    .w-autocomplete__selection(v-for="(item, i) in selection")
+      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"
+    :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), $emit('item-click', item)"
+        :class="{ highlighted: highlightedItem === item.uid }")
+        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 !== undefined ? 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>
+export default {
+  name: 'w-autocomplete',
+
+  props: {
+    items: { type: Array, required: true },
+    value: { type: [String, Number, Array] }, // String or Number if single selections, Array if multiple.
+    placeholder: { type: String },
+    openOnKeydown: { type: Boolean }, // By default the menu is always open for selection.
+    multiple: { type: Boolean },
+    // When multiple is on, prevents duplicate items selections by default, unless this is set to true.
+    allowDuplicates: { type: Boolean },
+    noMatch: { type: String },
+    // Contains the unique selection value for each item.
+    // Can be a numeric ID, a slug, etc. (outside of Wave UI)
+    itemValueKey: { type: String, default: 'value' },
+    // Contains the string to display for each item.
+    itemLabelKey: { type: String, default: 'label' },
+    // Contains the string to search keywords into for each item.
+    // This can for instance be an aggregation of multiple fields (outside of Wave UI).
+    itemSearchableKey: { type: String, default: 'searchable' }
+  },
+
+  // 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,
+    // 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: {
+    // Keep the autocomplete matching as fast as possible by caching optimized search strings.
+    normalizedKeywords () {
+      return this.normalize(this.keywords)
+    },
+
+    // Keep the autocomplete matching as fast as possible by caching optimized search strings.
+    // An array of optimized strings.
+    normalizedSelection () {
+      return this.selection.map(item => this.normalize(item?.searchable))
+    },
+
+    // Keep the autocomplete matching as fast as possible by caching optimized search strings.
+    optimizedItemsForSearch () {
+      return this.items.map((item, i) => ({
+        ...item,
+        uid: i,
+        searchable: this.normalize(item[this.itemSearchableKey] || '')
+      }))
+    },
+
+    filteredItems () {
+      let items = this.optimizedItemsForSearch // Array of objects.
+      const selection = this.normalizedSelection.join(',') // Optimized string of coma separated words.
+      const isItemNotSelected = item => !selection.includes(item.searchable)
+
+      if (this.keywords) {
+        items = items.filter(item => {
+          if (!item.searchable.includes(this.normalizedKeywords)) return false
+          else if (this.multiple && !this.allowDuplicates) return isItemNotSelected(item)
+          else return true
+        })
+      }
+
+      else if (this.multiple && !this.allowDuplicates) items = items.filter(isItemNotSelected)
+
+      return items
+    },
+
+    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--filled': this.selection.length,
+        'w-autocomplete--has-keywords': this.keywords,
+        'w-autocomplete--empty': !this.selection.length && !this.keywords
+      }
+    }
+  },
+
+  methods: {
+    // Replace all the accents and non-latin characters with equivalent letters. E.g. é -> e.
+    normalize (string) {
+      return string.toLowerCase().normalize('NFKD').replace(/\p{Diacritic}/gu, '').replace(/œ/g, 'oe')
+    },
+
+    // Selection can be made from click or enter key.
+    selectItem (item) {
+      if (!this.multiple) this.selection = []
+      this.selection.push(item)
+      this.highlightedItem = item.uid
+      this.keywords = ''
+      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()
+    },
+
+    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()
+    },
+
+    onFocus () {
+      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 + (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.
+      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.highlightedItem === 'extra-item') this.selectExtraItem()
+        else if (this.highlightedItemIndex >= 0) this.selectItem(this.filteredItems[this.highlightedItemIndex])
+      }
+
+      // Up & down arrow keys.
+      else if ([38, 40].includes(e.keyCode)) {
+        e.preventDefault() // Prevent moving the cursor to the left of the text while selecting item.
+        let index = this.highlightedItemIndex
+        if (index === -1) index = e.keyCode === 38 ? itemsCount - 1 : 0
+        else index = (index + (e.keyCode === 38 ? -1 : 1) + itemsCount) % itemsCount // Never out of range.
+
+        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) {
+          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
+          }
+        }
+      }
+
+      // `e.key.length === 1`: allow all control keys but no character creation.
+      else if (!this.multiple && this.selection.length && (e.key.length === 1)) e.preventDefault()
+    },
+
+    // On drag & drop of a text in the input field, don't paste if single selection and already selected.
+    onDrop (e) {
+      if (!this.multiple && this.selection.length) e.preventDefault()
+    },
+
+    // When starting a sequence of keys that produces a character.
+    onCompositionStart (e) {
+      // e.preventDefault() does not work. https://stackoverflow.com/a/77556830/2012407
+      if (!this.multiple && this.selection.length) e.target.setAttribute('readonly', true)
+    },
+    onCompositionUpdate (e) {
+      if (!this.multiple && this.selection.length) setTimeout(() => e.target.removeAttribute('readonly'), 200)
+    },
+
+    openMenu () {
+      if (this.menuOpen) return
+      this.menuOpen = true
+      document.addEventListener('click', this.onDocumentClick)
+    },
+
+    closeMenu () {
+      this.menuOpen = false
+      document.removeEventListener('click', this.onDocumentClick)
+    },
+
+    onDocumentClick (e) {
+      if (!this.$el.contains(e.target) && !this.$el.isSameNode(e.target)) this.closeMenu()
+    }
+  },
+
+  created () {
+    if (this.value) {
+      const arrayOfValues = Array.isArray(this.value) ? this.value : [this.value]
+      arrayOfValues.forEach(value => {
+        this.selection.push(this.optimizedItemsForSearch.find(item => item[this.itemValueKey] === +value))
+      })
+    }
+  },
+
+  beforeDestroy () {
+    document.removeEventListener('click', this.onDocumentClick)
+  },
+
+  watch: {
+    value (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>
+
+<style lang="scss">
+.w-autocomplete {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  position: relative;
+  border-radius: $border-radius;
+  border: $border;
+  padding: 2px 4px;
+  user-select: none;
+
+  &--open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &__selection {
+    display: flex;
+    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: $border-radius;
+    padding: 0 2px 0 4px;
+    flex-shrink: 0;
+
+    span {margin-top: -1px;line-height: 1;}
+    .w-button .w-icon:before {font-size: 0.8em;line-height: 0;}
+  }
+
+  &__input {
+    min-width: 0;
+    flex: 1 1 0;
+    color: inherit;
+    border: none;
+    background-color: transparent;
+    line-height: 18px;
+  }
+
+  &__placeholder {
+    color: rgba(var(--w-base-color-rgb), 0.5);
+    pointer-events: none;
+    line-height: 18px;
+  }
+
+  &__menu {
+    position: absolute;
+    inset: 100% -1px auto;
+    max-height: clamp(20px, 400px, 80vh);
+    margin-top: -1px;
+    margin-left: 0;
+    background-color: $base-bg-color;
+    border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.2);
+    border-top: none;
+    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;
+
+      &:hover {background-color: rgba($primary, 0.1);}
+
+      &: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;
+      }
+    }
+  }
+}
+
+li.w-autocomplete__no-match--default:hover {background-color: transparent;}
+</style>

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

@@ -113,6 +113,7 @@ export default {
 
   &--round {
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     padding: 0;
   }
 

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

@@ -199,6 +199,7 @@ $spinner-size: 40;
     aspect-ratio: 1;
     border-radius: 99em;
     padding: 0;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
   }
   &--tile {border-radius: initial;}
   &--shadow {box-shadow: $box-shadow;}
@@ -235,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;
@@ -301,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-card.vue

@@ -97,6 +97,8 @@ export default {
     padding: (2 * $base-increment) (3 * $base-increment);
     font-size: 1.3em;
     border-bottom: $border;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
 
     &--has-toolbar {padding: 0;border-bottom: none;}
   }

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

@@ -199,10 +199,7 @@ export default {
 
   &--absolute {
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0;
     overflow: hidden;
   }
 
@@ -218,10 +215,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-icon.vue

@@ -111,7 +111,7 @@ export default {
   line-height: 1;
   font-size: 1.2em;
   width: 1em;
-  // The aspect ratio will not work if the content is the content overflows.
+  // The aspect ratio will not work if the content overflows (needs overflow hidden, but we don't want that in the library).
   height: 1em;
 
   &.size--xs {font-size: round(0.85 * $base-font-size);}

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-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'"
@@ -75,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))"
@@ -229,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
     },