v5.0.0 update

resources/scripts/components/base-select/composables/useKeyboard.js

@@ -0,0 +1,140 @@
+import { toRefs } from 'vue'
+
+export default function useKeyboard(props, context, dep) {
+  const {
+    mode, addTagOn, createTag, openDirection, searchable,
+    showOptions, valueProp, groups: groupped,
+  } = toRefs(props)
+
+  // ============ DEPENDENCIES ============
+
+  const iv = dep.iv
+  const update = dep.update
+  const search = dep.search
+  const setPointer = dep.setPointer
+  const selectPointer = dep.selectPointer
+  const backwardPointer = dep.backwardPointer
+  const forwardPointer = dep.forwardPointer
+  const blur = dep.blur
+  const fo = dep.fo
+
+  // =============== METHODS ==============
+
+  // no export
+  const preparePointer = () => {
+    // When options are hidden and creating tags is allowed
+    // no pointer will be set (because options are hidden).
+    // In such case we need to set the pointer manually to the
+    // first option, which equals to the option created from
+    // the search value.
+    if (mode.value === 'tags' && !showOptions.value && createTag.value && searchable.value && !groupped.value) {
+      setPointer(fo.value[fo.value.map(o => o[valueProp.value]).indexOf(search.value)])
+    }
+  }
+
+  const handleKeydown = (e) => {
+    switch (e.keyCode) {
+      // backspace
+      case 8:
+        if (mode.value === 'single') {
+          return
+        }
+
+        if (searchable.value && [null, ''].indexOf(search.value) === -1) {
+          return
+        }
+
+        if (iv.value.length === 0) {
+          return
+        }
+
+        update([...iv.value].slice(0, -1))
+        break
+
+      // enter
+      case 13:
+        e.preventDefault()
+
+        if (mode.value === 'tags' && addTagOn.value.indexOf('enter') === -1 && createTag.value) {
+          return
+        }
+
+        preparePointer()
+        selectPointer()
+        break
+
+      // space
+      case 32:
+        if (searchable.value && mode.value !== 'tags' && !createTag.value) {
+          return
+        }
+
+        if (mode.value === 'tags' && ((addTagOn.value.indexOf('space') === -1 && createTag.value) || !createTag.value)) {
+          return
+        }
+
+        e.preventDefault()
+
+        preparePointer()
+        selectPointer()
+        break
+
+      // tab
+      // semicolon
+      // comma
+      case 9:
+      case 186:
+      case 188:
+        if (mode.value !== 'tags') {
+          return
+        }
+
+        const charMap = {
+          9: 'tab',
+          186: ';',
+          188: ','
+        }
+
+        if (addTagOn.value.indexOf(charMap[e.keyCode]) === -1 || !createTag.value) {
+          return
+        }
+
+        preparePointer()
+        selectPointer()
+        e.preventDefault()
+        break
+
+      // escape
+      case 27:
+        blur()
+        break
+
+      // up
+      case 38:
+        e.preventDefault()
+
+        if (!showOptions.value) {
+          return
+        }
+
+        openDirection.value === 'top' ? forwardPointer() : backwardPointer()
+        break
+
+      // down
+      case 40:
+        e.preventDefault()
+
+        if (!showOptions.value) {
+          return
+        }
+
+        openDirection.value === 'top' ? backwardPointer() : forwardPointer()
+        break
+    }
+  }
+
+  return {
+    handleKeydown,
+    preparePointer,
+  }
+}