wave-ui 3.7.1 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.7.1",
+  "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,32 +50,31 @@
     "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.22.10",
-    "@babel/eslint-parser": "^7.22.10",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@faker-js/faker": "^7.6.0",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.22.15",
+    "@faker-js/faker": "^8.2.0",
     "@mdi/font": "^6.9.96",
     "@vitejs/plugin-vue": "^3.2.0",
-    "@vue/compiler-sfc": "3.2.45",
-    "autoprefixer": "^10.4.15",
-    "axios": "^1.4.0",
-    "eslint": "^8.47.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "@vue/compiler-sfc": "3.3.4",
+    "autoprefixer": "^10.4.16",
+    "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",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.31",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.65.1",
-    "simple-syntax-highlighter": "^2.2.5",
+    "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-router": "^4.2.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-list.vue

@@ -160,8 +160,8 @@ export default {
         'w-list__item-label--focused': item._focused,
         'w-list__item-label--hoverable': this.hover,
         'w-list__item-label--selectable': this.isSelectable,
-        [item.color]: !!item.color,
-        [this.SelectionColor]: item._selected && !item.color && this.SelectionColor,
+        [item[this.itemColorKey]]: !!item[this.itemColorKey],
+        [this.SelectionColor]: item._selected && !item[this.itemColorKey] && this.SelectionColor,
         [item[this.itemClassKey] || this.itemClass]: item[this.itemClassKey] || this.itemClass
       }
     },