wave-ui 3.7.2 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.7.2",
+  "version": "3.8.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,16 +50,16 @@
     "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.0",
+    "@babel/core": "^7.23.2",
     "@babel/eslint-parser": "^7.22.15",
-    "@faker-js/faker": "^8.1.0",
+    "@faker-js/faker": "^8.2.0",
     "@mdi/font": "^6.9.96",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/compiler-sfc": "3.3.4",
     "autoprefixer": "^10.4.16",
-    "axios": "^1.5.1",
-    "eslint": "^8.51.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "axios": "^1.6.0",
+    "eslint": "^8.52.0",
+    "eslint-plugin-vue": "^9.18.1",
     "font-awesome": "^4.7.0",
     "gsap": "^3.12.2",
     "ionicons": "^4.6.3",
@@ -67,13 +67,13 @@
     "postcss": "^8.4.31",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.69.0",
+    "sass": "^1.69.5",
     "simple-syntax-highlighter": "^3.0.2",
     "splitpanes": "^3.1.5",
     "standard": "^17.1.0",
     "vite": "^3.2.7",
     "vite-svg-loader": "^4.0.0",
-    "vue": "^3.3.4",
+    "vue": "^3.3.7",
     "vue-router": "^4.2.5",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"

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/w-autocomplete.vue

@@ -0,0 +1,309 @@
+<template lang="pug">
+.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")
+  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")
+      li(
+        v-for="(item, i) in filteredItems"
+        :key="i"
+        @click.stop="selectItem(item)"
+        :class="{ 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.'")
+</template>
+
+<script>
+export default {
+  name: 'w-autocomplete',
+
+  props: {
+    items: { type: Array, required: true },
+    modelValue: { 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' }
+  },
+
+  emits: ['input'],
+
+  data: () => ({
+    keywords: '',
+    selection: [],
+    menuOpen: false,
+    highlightedItem: null
+  }),
+
+  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
+      return this.filteredItems.findIndex(item => item.uid === this.highlightedItem)
+    },
+
+    classes () {
+      return {
+        'w-autocomplete--open': this.menuOpen
+      }
+    }
+  },
+
+  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 = ''
+      this.$emit('input', this.multiple ? this.selection.map(item => item[this.itemValueKey]) : item[this.itemValueKey])
+      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('input', null)
+      this.$refs.input.focus()
+    },
+
+    onClick () {
+      if (!this.openOnKeydown) this.openMenu()
+      this.$refs.input.focus()
+    },
+
+    onFocus () {
+      if (!this.openOnKeydown) this.openMenu()
+    },
+
+    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()
+
+      // Delete key.
+      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])
+      }
+
+      // 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.
+
+        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
+          }
+          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.modelValue) {
+      const arrayOfValues = Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]
+      arrayOfValues.forEach(value => {
+        this.selection.push(this.optimizedItemsForSearch.find(item => item[this.itemValueKey] === +value))
+      })
+    }
+  },
+
+  beforeUnmount () {
+    document.removeEventListener('click', this.onDocumentClick)
+  }
+}
+</script>
+
+<style lang="scss">
+.w-autocomplete {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid rgba(#000, 0.2);
+  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(#000, 0.035);
+    border: 1px solid rgba(#000, 0.05);
+    border-radius: 4px;
+    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 {
+    position: absolute;
+    color: #ccc;
+    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: #fff;
+    border: 1px solid rgba(#000, 0.2);
+    border-top: none;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    overflow: auto;
+    z-index: 10;
+
+    li {
+      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);
+      }
+    }
+  }
+}
+
+li.w-autocomplete__no-match--default:hover {background-color: transparent;}
+</style>

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

@@ -103,6 +103,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-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'"
@@ -78,14 +79,15 @@ component(
       template(v-if="labelPosition === 'inside' && showLabelInside")
         label.w-input__label.w-input__label--inside.w-form-el-shakable(
           v-if="$slots.default || 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 }}
+
+      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}`"
+          @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
 
       w-progress.fill-width(
         v-if="hasLoading || (showProgress && (uploadInProgress || uploadComplete))"

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

@@ -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,16 +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)"
-          :class="{ 'w-select__selection--placeholder': !$slots.selection && !selectionString && placeholder }"
-          :disabled="isDisabled || null"
-          readonly
-          aria-readonly="true"
-          :tabindex="tabindex || null"
-          v-html="$slots.selection ? '' : selectionString || placeholder")
+          v-bind="selectionAttributes"
+          v-html="selectionHtml")
         //- For standard HTML form submission.
         input(
           v-for="(val, i) in (inputValue.length ? inputValue : [{}])"
@@ -76,7 +71,7 @@ component(
       @item-click="$emit('item-click', $event)"
       @item-select="onListItemSelect"
       @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). */"
       :items="selectItems"
       :multiple="multiple"
       arrows-navigation
@@ -87,7 +82,7 @@ component(
       :item-color-key="itemColorKey"
       role="listbox"
       tabindex="-1")
-      template(v-for="i in items.length" v-slot:[`item.${i}`]="{ item, selected, index }")
+      template(v-for="i in items.length" #[`item.${i}`]="{ item, selected, index }")
         slot(
           v-if="$slots[`item.${i}`] && $slots[`item.${i}`](item, selected, index)"
           :name="`item.${i}`"
@@ -178,20 +173,32 @@ 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.$slots.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.$slots.selection) return ''
+      return this.selectionString
+    },
     classes () {
       return {
         'w-select': true,
@@ -200,7 +207,7 @@ export default {
         '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--floating-label': this.hasLabel && this.labelPosition === 'inside' && !this.staticLabel,
         'w-select--no-padding': !this.outline && !this.bgColor && !this.shadow && !this.round,
@@ -298,7 +305,7 @@ export default {
     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.
@@ -307,6 +314,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()
@@ -339,7 +347,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)]
@@ -474,6 +482,9 @@ export default {
     align-items: center;
     cursor: pointer;
     caret-color: transparent;
+    border-radius: inherit;
+
+    &--placeholder {color: #888;}
 
     .w-select__selection-slot + & {
       position: absolute;
@@ -500,8 +511,6 @@ export default {
     }
 
     .w-select--readonly & {cursor: auto;}
-
-    &--placeholder {color: #888;}
   }
 
   &__selection-slot {
@@ -563,14 +572,12 @@ 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: 26px;}
@@ -594,21 +601,15 @@ export default {
     .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--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--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-textarea.vue

@@ -42,7 +42,6 @@ component(
     template(v-if="labelPosition === 'inside' && showLabelInside")
       label.w-textarea__label.w-textarea__label--inside.w-form-el-shakable(
         v-if="$slots.default || label"
-        :for="`w-textarea--${_.uid}`"
         :class="labelClasses")
         slot {{ label }}
     w-icon.w-textarea__icon.w-textarea__icon--inner-right(