Merge pull request #25 from dhershman1/development

Development v2.5.0

.gitignore

@@ -1,3 +1,11 @@
+# Test HTML
+
+tests/test.html
+
+# Stupid Mac Files
+
+.DS_Store
+
 # Logs
 logs
 *.log

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## v2.5.0
+
+### New
+
+- Added `fireOnEmpty` modifier, which allow you to choose individual inputs you want to have fireOnEmpty
+- Added `cancelOnEmpty` modifier which cancels the debounce all together if the input value is empty
+
+### Improved
+
+- Drastic code cleanup
+
+### Fixed
+
+- Bug with `fireOnEmpty` where debounce function would fire twice even when input was empty
+
 ## v2.4.0
 
 ### New

README.md

@@ -42,6 +42,8 @@ npm i vue-debounce
 - `lock` : Used to lock the debounce and prevent the enter key from triggering the function when pressed
   - Example: `v-debounce:400ms.lock="cb"`
 - `unlock` : Used to unlock the enter key on a debounced input, useful if you want to use the `lock` option and only want a few debounced inputs unlocked
+- `fireOnEmpty` : Use to signify that when that specific input is emptied, you want the function to fire right away
+- `cancelOnEmpty` : Use this to specify that when the input is emptied you **DO NOT** want your debounced function to trigger at all
 
 ## Options
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-debounce",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "A simple vue directive for debounce",
   "main": "dist/vue-debounce.min.js",
   "types": "types/index.d.ts",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "chokidar": "3.3.1",
     "esm": "3.2.25",
-    "rollup": "1.29.0",
+    "rollup": "1.31.1",
     "rollup-plugin-buble": "0.19.8",
     "rollup-plugin-uglify": "6.0.4",
     "standard": "14.3.1",

src/index.js

@@ -1,38 +1,87 @@
 import debounce from './debounce'
 
+// Helper Functions
+/**
+ * Maps through an array of strings and lowercases all of them
+ * @param {Array} list an array of strings to map through
+ */
+function toLowerMap (list) {
+  return list.map(x => x.toLowerCase())
+}
+
+/**
+ * Takes in a value and ensures its wrapped within an array
+ * @param {Any} value The value to ensure is an array
+ */
+function ensureArray (value) {
+  if (Array.isArray(value)) {
+    return value
+  }
+
+  if (value == null) {
+    return []
+  }
+
+  return [value]
+}
+
 // Figures out the event we are using with the bound element
-function figureOutEvent (attrs, listenTo) {
+function mapOutListeningEvents (attrs, listenTo) {
   const { value = false } = attrs.getNamedItem('debounce-events') || {}
-  const toLowerMap = list => list.map(x => x.toLowerCase())
 
   // If they set an events attribute that overwrites everything
   if (value) {
     return toLowerMap(value.split(','))
   }
 
-  return Array.isArray(listenTo) ? toLowerMap(listenTo) : [listenTo]
+  return toLowerMap(ensureArray(listenTo))
+}
+
+function isEmpty (str) {
+  return str === ''
+}
+
+function isCanceled (inputValue, modifiers) {
+  return isEmpty(inputValue) && modifiers.cancelonempty
+}
+
+function isLocked (key, modifiers) {
+  return key === 'Enter' && (!modifiers.lock || modifiers.unlock)
+}
+
+function shouldFireOnEmpty (inputValue, modifiers) {
+  return isEmpty(inputValue) && modifiers.fireonempty
 }
 
 export { debounce }
 
 export default {
-  install (Vue, { lock, listenTo = 'keyup', defaultTime = '300ms', fireOnEmpty = false } = {}) {
+  install (Vue, {
+    lock = false,
+    listenTo = 'keyup',
+    defaultTime = '300ms',
+    fireOnEmpty = false,
+    cancelOnEmpty = false
+  } = {}) {
     Vue.directive('debounce', {
-      bind (el, { value, arg, modifiers }) {
-        const listener = figureOutEvent(el.attributes, listenTo)
+      bind (el, {
+        value: debouncedFn,
+        arg: timer = defaultTime,
+        modifiers
+      }) {
+        const combinedRules = Object.assign({ fireonempty: fireOnEmpty, cancelonempty: cancelOnEmpty, lock }, modifiers)
+        const listener = mapOutListeningEvents(el.attributes, listenTo)
         const fn = debounce(e => {
-          value(e.target.value, e)
-        }, arg || defaultTime)
+          debouncedFn(e.target.value, e)
+        }, timer)
 
         function handler (event) {
-          const isUnlocked = (!modifiers.lock && !lock) || modifiers.unlock
-
-          if ((event.key === 'Enter' && isUnlocked) || (!event.target.value && fireOnEmpty)) {
+          if (isCanceled(event.target.value, combinedRules)) {
             fn.cancel()
-            value(event.target.value, event)
-          }
-
-          if (event.key !== 'Enter') {
+          } else if (isLocked(event.key, combinedRules) || shouldFireOnEmpty(event.target.value, combinedRules)) {
+            fn.cancel()
+            debouncedFn(event.target.value, event)
+          } else {
             fn(event)
           }
         }

types/index.d.ts

@@ -14,6 +14,7 @@ export interface PluginConfig {
   lock?: boolean
   listenTo?: string | string[]
   defaultTime?: string | number
+  fireOnEmpty?: boolean
 }
 
 export interface PluginObject {