wave-ui 3.9.2 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.9.2",
+  "version": "3.10.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",
@@ -41,44 +41,44 @@
     "vue framework",
     "ui"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build --base /wave-ui/",
-    "build-bundle": "BUNDLE=true vite build && mv ./dist/style.css ./dist/wave-ui.css",
-    "serve": "vite preview --base /wave-ui/",
-    "lint": "vite lint",
-    "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.7",
-    "@babel/eslint-parser": "^7.23.3",
-    "@faker-js/faker": "^8.3.1",
+    "@babel/core": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.10",
+    "@faker-js/faker": "^8.4.1",
     "@mdi/font": "^6.9.96",
-    "@vitejs/plugin-vue": "^5.0.2",
-    "@vue/compiler-sfc": "3.4.4",
-    "autoprefixer": "^10.4.16",
-    "axios": "^1.6.3",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "3.4.18",
+    "autoprefixer": "^10.4.17",
+    "axios": "^1.6.7",
     "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^9.21.1",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.12.4",
+    "gsap": "^3.12.5",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.35",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.69.7",
+    "sass": "^1.70.0",
     "simple-syntax-highlighter": "^3.0.2",
     "splitpanes": "^3.1.5",
     "standard": "^17.1.0",
-    "vite": "^5.0.10",
+    "vite": "^5.1.1",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.4",
+    "vue": "^3.4.18",
     "vue-router": "^4.2.5",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"
   },
   "peerDependencies": {
     "vue": "^2.6.14 || ^3.2.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --base /wave-ui/",
+    "build-bundle": "BUNDLE=true vite build && mv ./dist/style.css ./dist/wave-ui.css",
+    "serve": "vite preview --base /wave-ui/",
+    "lint": "vite lint",
+    "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   }
-}
+}

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

@@ -70,6 +70,7 @@ component(
       @update:model-value="onInput"
       @item-click="$emit('item-click', $event)"
       @item-select="onListItemSelect"
+      @keydown="onWListKeydown"
       @keydown:enter="noUnselect && !multiple && closeMenu()"
       @keydown:escape="showMenu && (showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
       :items="selectItems"
@@ -156,7 +157,10 @@ export default {
     showMenu: false,
     menuMinWidth: 0,
     isFocused: false,
-    selectionWrapRef: undefined
+    selectionWrapRef: undefined,
+    // Lookup a select list item from typing the first characters.
+    // If typing is too slow (> 1s), the lookup string is cleared.
+    quickLookup: { string: '', timeout: null }
   }),
 
   computed: {
@@ -299,6 +303,33 @@ export default {
           if (!allItemsAreDisabled) this.onInput(items[index])
         }
       }
+
+      // `e.key.length === 1`: only the keys that output a character.
+      else if (e.key.length === 1) this.focusItemOnQuickLookup(e)
+    },
+
+    onWListKeydown (e) {
+      // `e.key.length === 1`: only the keys that output a character.
+      if (e.key.length === 1) this.focusItemOnQuickLookup(e)
+    },
+
+    focusItemOnQuickLookup (e) {
+      // Reset the timer every time a new valid key is pressed so we concat the string of chars.
+      if (this.quickLookup.timeout) clearTimeout(this.quickLookup.timeout)
+      // On each keypress, wait for 1s and clear the lookup string unless a key is pressed again.
+      this.quickLookup.timeout = setTimeout(() => this.quickLookup.string = '', 1000)
+
+      // Form a lookup string that is tested (starting from the first char) on each list item until
+      // a match is found.
+      this.quickLookup.string += e.key
+      const re = new RegExp(`^${this.quickLookup.string}`, 'i')
+      const itemIndexToFocus = this.selectItems.findIndex(
+        item => !item.disabled && item[this.itemLabelKey].match(re)
+      ) + 1 // 0 if not found, more if found.
+      if (itemIndexToFocus) {
+        const selector = `.w-list__item:nth-child(${itemIndexToFocus}) .w-list__item-label`
+        this.$refs['w-list']?.$el?.querySelector(selector)?.focus()
+      }
     },
 
     // The items are given by the w-list component.
@@ -371,7 +402,7 @@ export default {
 
       this.showMenu = false
       // Set the focus back on the main w-select input.
-      setTimeout(() => this.$refs['selection-input'].focus(), 50)
+      setTimeout(() => this.$refs['selection-input']?.focus(), 50)
     }
   },
 

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

@@ -214,19 +214,19 @@ export default {
 
     onLabelKeydown (item, e) {
       // Keys: 13 enter, 32 space, 37 arrow left, 38 arrow up, 39 arrow right, 40 arrow down.
-      if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.which)) {
+      if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.keyCode)) {
         if (item.children || item.branch) {
-          if ([13, 32].includes(e.which)) this.expandDepth(item) && e.preventDefault()
-          else if (e.which === 37) this.expandDepth(item, false) && e.preventDefault()
-          else if (e.which === 39) this.expandDepth(item, true) && e.preventDefault()
+          if ([13, 32].includes(e.keyCode)) this.expandDepth(item) && e.preventDefault()
+          else if (e.keyCode === 37) this.expandDepth(item, false) && e.preventDefault()
+          else if (e.keyCode === 39) this.expandDepth(item, true) && e.preventDefault()
         }
 
         // On arrow up or down, focus the prev or next item.
-        if ([38, 40].includes(e.which)) {
+        if ([38, 40].includes(e.keyCode)) {
           const treeRoot = this.$el.closest('.w-tree--depth0')
           const treeTabbableItems = treeRoot.querySelectorAll('.w-tree__item-label[tabindex="0"]')
           const currLabel = e.target.closest('.w-tree__item-label')
-          const indexModifier = e.which === 38 ? -1 : 1;
+          const indexModifier = e.keyCode === 38 ? -1 : 1;
 
           ([...treeTabbableItems]).some((item, i) => {
             if (item.isSameNode(currLabel)) {
@@ -238,7 +238,7 @@ export default {
         }
       }
 
-      if (e.which === 13) {
+      if (e.keyCode === 13) {
         if (this.selectable) item.selected = !item.selected
         // Always emitting on enter keydown, but different event for selection.
         this.emitItemSelection(item, e)