Merge pull request #74 from dhershman1/development

v4.0.0

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## v4.0.0
+
+### Breaking Changes
+
+- Removed `getDirective` flow there is now a dedicated import for vue 2, and vue 3
+
+### Improved
+
+- Made usage easier, instead of trying to support complex backwards compatability, I simply separated the two into their own imports
+- Usage should be less convoluted
+
+### Fixed
+
+- Vue 3 compatability should be stabalized and working again
+
 ## v3.1.1
 
 ### Fixed

README.md

@@ -17,7 +17,8 @@ It attaches itself to an event for actions
 - [Modifiers](#modifiers)
 - [Options](#options)
 - [Option Defaults](#option-defaults)
-- [getDirective Usage](#getdirective-usage)
+- [Vue3 Setup](#vue3-setup)
+- [Vue2 Setup](#vue2-setup)
 - [Usage](#usage)
 - [Modifier Usage](#modifier-usage)
 - [Overwriting Events](#overwriting-events)
@@ -81,39 +82,36 @@ import debounce from 'https://unpkg.com/vue-debounce@3.0.2/dist/debounce.min.mjs
 import vueDebounce from 'https://unpkg.com/vue-debounce@3.0.2/dist/vue-debounce.min.mjs';
 ```
 
-## getDirective Usage
+## Vue3 Setup
 
-As of v3.0.0 a new function called `getDirective` is now exported, this allows you to import a function that lets you create the debounce directive at any level in your app instead of just globally.
+Usage has two flows based on which version of Vue you're currently using, if you use vue2 then those instructions are right below
 
-### Arguments
-
-This function takes in 2 arguments, they are:
-
-- `version` : `String` - This is the version of vue you're using, simply put `'2'` or `'3'` here
-  - Version automatically defaults to version 2
-  - This is so that backwards compatibility can still be supported, since I don't have access to the Vue context when you don't install globally
-- `opts` : `Object` - This is the options object, use it the same way you would use it if using vue-debounce globally
+With vue3 we simply need to import the new directive function `vue3Debounce` this function takes in an object of options (found above)
 
+Using `vue-debounce` Globally:
 ```js
-import { getDirective } from 'vue-debounce'
+import { vue3Debounce } from 'vue-debounce'
+import { createApp } from 'vue';
+import App from './App.vue';
+
+const app = createApp(App)
+app
+  .directive('debounce', vue3Debounce({ lock: true }))
+  .mount('#app');
+```
 
-const component = {
-  directives: {
-    // Please see above for arguments you can pass to this function
-    debounce: getDirective()
-  }
-}
+Using `vue-debounce` at a component level:
+```js
+import { vue3Debounce } from 'vue-debounce'
 
-// If you are using vue 3 you MUST tell the function this by passing in the first argument
-const component = {
+export default {
   directives: {
-    // Pass in 3 to tell the function you're using vue 3, I'm going to work on improving this in the future
-    debounce: getDirective(3)
+    debounce: vue3Debounce({ lock: true })
   }
 }
 ```
 
-## Usage
+## Vue2 Setup
 
 First make sure we tell vue to use it
 
@@ -144,6 +142,8 @@ Vue.use(vueDebounce, {
 })
 ```
 
+## Usage
+
 Then attach a time:format to the directive, and set the value to the function you want to call and attach it to your input element
 
 Example: