From abbd34a87bb925e61b4556cee598abed903601e7 Mon Sep 17 00:00:00 2001
From: Jerry Bendy <jerry@icewingcc.com>
Date: Thu, 18 Feb 2021 10:44:22 +0800
Subject: [PATCH] Add a `namespace` option to avoid conflicts

---
 README.md    | 8 ++++++--
 index.d.ts   | 2 ++
 index.js     | 9 +++++----
 package.json | 2 +-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index a9ad96a..802eda0 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ Features:
 * Binding multiple touch events on one DOM element
 * Customizable events with native-likely events handler
 * Allow splitting configurations for different DOM elements by `v-touch-options` directive
+* Directive names can be customized to avoid namespace conflict
 
 ## Install
 
@@ -80,7 +81,7 @@ In your `.vue` file:
 <span v-touch:tap="tapHandler" v-touch-options="{touchClass: 'active'}">Customize touch class</span>
 ```
 
-If you use vue and this plugin in UMD way (in a script tag) , this plugin is auto used. So it's not necessary to wirte `Vue.use(Vue2TouchEvents)`.
+If you use vue and this plugin in UMD way (in a script tag) , this plugin is auto used. So it's not necessary to write `Vue.use(Vue2TouchEvents)`.
 
 ```html
 <script src="path/to/vue.js"></script>
@@ -98,7 +99,8 @@ Vue.use(Vue2TouchEvents, {
     tapTolerance: 10,
     touchHoldTolerance: 400,
     swipeTolerance: 30,
-    longTapTimeInterval: 400
+    longTapTimeInterval: 400,
+    namespace: 'touch'
 })
 ```
 
@@ -120,6 +122,8 @@ Vue.use(Vue2TouchEvents, {
 
 * `longTapTimeInterval` default `400` in millisecond. The minimum time interval to detect whether long tap event effective or not.
 
+* `namespace` default `touch`(v3.2.0). Customize the directive names to avoid namespace conflict. By default, the `touch` means `v-touch` and `v-touch-class` are available, and you can use `v-click` and `v-click-class` by change `namespace` to `click`.
+
 ### Directives
 
 #### v-touch
diff --git a/index.d.ts b/index.d.ts
index 0efb48d..93df285 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -8,6 +8,8 @@ export interface Vue2TouchEventsOptions {
   tapTolerance?: number;
   swipeTolerance?: number;
   longTapTimeInterval?: number;
+  touchHoldTolerance?: number;
+  namespace?: string;
 }
 
 export default Vue2TouchEvents;
diff --git a/index.js b/index.js
index b4e4a9b..5313831 100644
--- a/index.js
+++ b/index.js
@@ -45,7 +45,8 @@ var vueTouchEvents = {
             swipeTolerance: 30,  // px
             touchHoldTolerance: 400,  // ms
             longTapTimeInterval: 400,  // ms
-            touchClass: ''
+            touchClass: '',
+            namespace: 'touch'
         }, constructorOptions);
 
         function touchStartEvent(event) {
@@ -271,7 +272,7 @@ var vueTouchEvents = {
             return $el.$$touchObj;
         }
 
-        Vue.directive('touch', {
+        Vue.directive(globalOptions.namespace, {
             bind: function ($el, binding) {
                 // build a touch configuration object
                 var $this = buildTouchObj($el);
@@ -349,7 +350,7 @@ var vueTouchEvents = {
             }
         });
 
-        Vue.directive('touch-class', {
+        Vue.directive(globalOptions.namespace + '-class', {
             bind: function ($el, binding) {
                 buildTouchObj($el, {
                     touchClass: binding.value
@@ -357,7 +358,7 @@ var vueTouchEvents = {
             }
         });
 
-        Vue.directive('touch-options', {
+        Vue.directive(globalOptions.namespace + '-options', {
             bind: function($el, binding) {
                 buildTouchObj($el, binding.value);
             }
diff --git a/package.json b/package.json
index 50652a9..08d399d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue2-touch-events",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Simple touch events support for vueJS2",
   "main": "index.js",
   "types": "index.d.ts",