v-clipboard - npm Package Compare versions

Comparing version 1.0.4 to 2.0.0

package.json

 {
   "name": "v-clipboard",
   "description": "Vue.js Clipboard Plugin",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "author": "euvl <[e-mail]>",
@@ -20,3 +20,6 @@ "private": false,
     "vue",
-    "clipboard"
+    "clipboard",
+    "vue clipboard",
+    "copy",
+    "vue copy"
   ],
@@ -23,0 +26,0 @@ "devDependencies": {

README.md

 [![npm version](https://badge.fury.io/js/v-clipboard.svg)](https://badge.fury.io/js/v-clipboard)
 
-## Vue.js Clipboard plugin
+<p align="center">
+<img width="628" 
+     alt="Version 2.0.0" 
+     src="https://user-images.githubusercontent.com/1577802/40780578-8c68459a-64e1-11e8-9e5c-ce147eb042cd.png">
+</p>
 
-(No dependencies, less than **2kb** minified)
+## Vue.js Clipboard
 
@@ -13,26 +17,52 @@ ### Install
 
-### Use
+```javascript
+import Vue       from 'vue'
+import Clipboard from 'v-clipboard'
 
-Option 1: *Using template only*.
+Vue.use(Clipboard)
+```
 
+### Using
+
+> When an element that contains `v-clipboard` directive is clicked, the value of `value` will be copied into clipboard.
+
+Copying **static** value (directive should receive actual value):
 ```vue
-<input v-model="foo">
+<button v-clipboard="value">
+  Copy to clipboard
+</button>
+```
 
-<button v-clipboard="foo">
+Copying **dynamic** value (directive should recieve a function that returns value):
+```vue
+<button v-clipboard="() => value">
   Copy to clipboard
-</button> 
+</button>
 ```
 
-Option 2: *Using javascript call*.
+Copying **anything** in your methods:
+```js
+this.$clipboard(value)
+```
 
+### Events
+
 ```vue
-<button @click="copy">
+<button v-clipboard="foo"
+        v-clipboard:success="clipboardSuccessHandler" // Success event handler 
+        v-clipboard:error="clipboardErrorHandler">    // Error event handler
   Copy to clipboard
 </button> 
+```
 
-...
+```js
+{
+  methods: {
+    clipboardSuccessHandler ({ value, event }) {
+      console.log('success', value)
+    },
 
-methods: {
-  copy () {
-    this.$clipboard("Baaaaaaaaar")
+    clipboardErrorHandler ({ value, event }) {
+      console.log('error', value)
+    }
   }
@@ -42,10 +72,6 @@ }
 
-### Events
+### Compatibility
 
-```vue
-<button v-clipboard="foo"
-        @copy="clipboardSuccessHandler"
-        @copy-error="clipboardErrorHandler">
-  Copy to clipboard
-</button> 
-```
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/1577802/28269902-8ae0e01e-6afb-11e7-9981-d4965bac69d1.png">
+</p>

src/index.js

 /**
-  * Copyright (c) 2017 - Yev Vlasenko
-  */
-const cssText =
-  'position:fixed;pointer-events:none;z-index:-9999;opacity:0;'
+ * Copyright (c) 2017 - 2018 - Yev Vlasenko
+ */
+const cssText = "position:fixed;pointer-events:none;z-index:-9999;opacity:0;";
+const copyErrorMessage = "Failed to copy value to clipboard. Unknown type.";
 
-const copy = (text) => {
-  let textArea = document.createElement("textarea")
-  let success = false
+const $clipboard = text => {
+  if (typeof text !== "string") {
+    try {
+      text = JSON.stringify(text);
+    } catch (e) {
+      throw copyErrorMessage;
+    }
+  }
 
-  textArea.value = text
-  textArea.style.cssText = cssText
+  const textArea = document.createElement("textarea");
+  let success = false;
 
-  document.body.appendChild(textArea)
-  textArea.select()
+  textArea.value = text;
+  textArea.style.cssText = cssText;
 
+  document.body.appendChild(textArea);
+  textArea.select();
+
   try {
-    success = document.execCommand('copy')
+    success = document.execCommand("copy");
   } catch (err) {
-    // success = false
+    console.warn(err);
   }
 
-  document.body.removeChild(textArea)
-  return success
-}
+  document.body.removeChild(textArea);
 
+  return success;
+};
+
 export default {
-  install (Vue) {
-    Vue.prototype.$clipboard = copy
+  install(Vue) {
+    Vue.prototype.$clipboard = $clipboard;
 
-    Vue.directive('clipboard', {
-      bind (el, binding, vnode) {
-        el.addEventListener('click', (event) => {
-          if (binding.hasOwnProperty('value')) {
-            let { value } = binding
-            let payload = { value, srcEvent: event }
-            let context = vnode.context
+    const generateId = (id => () => "$" + id++)(1);
+    const handlers = {};
 
-            copy(value)
-              ? context.$emit('copy', payload)
-              : context.$emit('copyError', payload)
-          }
-        })
+    const removeHandler = id => {
+      if (id) {
+        handlers[id] = null;
+        delete handlers[id];
       }
-    })
+    };
+
+    const addHandler = func => {
+      const id = generateId();
+      handlers[id] = func;
+
+      return id;
+    };
+
+    Vue.directive("clipboard", {
+      bind(el, binding, vnode) {
+        const { arg, value } = binding;
+
+        switch (arg) {
+          case "error":
+            const errorHandlerId = addHandler(value);
+            el.dataset.clipboardErrorHandler = errorHandlerId;
+            return;
+
+          case "success":
+            const successHandlerId = addHandler(value);
+            el.dataset.clipboardSuccessHandler = successHandlerId;
+            return;
+
+          default:
+            const clickEventHandler = event => {
+              if (binding.hasOwnProperty("value")) {
+                const payload = {
+                  value: typeof value === "function" ? value() : value,
+                  event
+                };
+
+                const handlerId = $clipboard(payload.value)
+                  ? el.dataset.clipboardSuccessHandler
+                  : el.dataset.clipboardErrorHandler;
+
+                const handler = handlers[handlerId];
+
+                if (handler) {
+                  handler(payload);
+                }
+              }
+            };
+
+            const clickEventHandlerId = addHandler(clickEventHandler);
+
+            el.dataset.clipboardClickHandler = clickEventHandlerId;
+            el.addEventListener("click", handlers[clickEventHandlerId]);
+
+            return;
+        }
+      },
+
+      unbind(el, binding, vnode) {
+        const {
+          clipboardSuccessHandler,
+          clipboardErrorHandler,
+          clipboardClickHandler
+        } = el.dataset;
+
+        removeHandler(clipboardSuccessHandler);
+        removeHandler(clipboardErrorHandler);
+
+        if (clipboardClickHandler) {
+          el.removeEventListener("click", handlers[clipboardClickHandler]);
+          removeHandler(clipboardClickHandler);
+        }
+      }
+    });
   }
-}
+};

No alert changes

Improved metrics

Total package byte prevSize

18789

increased by17.52%

Lines of code

131

increased by70.13%

Number of lines in readme file

76

increased by52%

Worsened metrics

Number of package files

8

decreased by-11.11%

No dependency changes