Merge pull request #36 from web-bee-ru/feature/copy-button-slot

feat: customize copy button with slot and timeout (updated README)

README.md

@@ -13,6 +13,8 @@ Support for incremental update components
 - [Installing](#installing)
 - [Example](#example)
 - [Options](#options)
+- [Listeners](#listeners)
+- [Slots](#slots)
 - [Theming](#theming)
 
 ## Installing
@@ -145,11 +147,23 @@ import 'vue-json-viewer/style.css'
 | ----------- |:------------- | ----------- |
 | `value` | JSON data (can be used with `v-model`) | **Required** |
 | `expand-depth` | Collapse blocs under this depth | `1`  |
-| `copyable` | Display the copy button, you can customize copy text just set `{copyText: 'copy', copiedText: 'copied'}` or set `true` use default copytext  | `false`  |
+| `copyable` | Display the copy button, you can customize copy text just set `{copyText: 'copy', copiedText: 'copied', timeout: 2000}` or set `true` use default copytext  | `false`  |
 | `sort` | Sort keys before displaying | `false` |
 | `boxed` | Add a fancy "boxed" style to component | `false` |
 | `theme` | Add a custom CSS class for theming purposes | `jv-light` |
 
+## Listeners
+
+| Listener | Description | Value |
+| ----------- |:------------- | ----------- |
+| `copied` | Emits copyEvent after text copied | Clipboard success event |
+
+## Slots
+
+| Name | Description | Scope |
+| ----------- |:------------- | ----------- |
+| `copy` | Custom content for copy button | `{copied: boolean}` |
+
 ## Theming
 
 To create custom theme, (e.g. `my-awesome-json-theme`), in two easy steps:

example/app.js

@@ -6,6 +6,15 @@ Vue.use(JsonViewer)
 new Vue({
   el: '#app',
   render() {
+    const scopedSlots = {
+      copy: ({ copied }) => {
+        if (copied) return <button disabled>Copied!</button>
+        return <button>Copy me!</button>
+      },
+    }
+    const onCopied = (copyEvent) => {
+      alert(`Text successfully copied!\n${copyEvent.text}`);
+    }
     return (
       <div>
         <json-viewer value={this.jsonData}></json-viewer>
@@ -19,6 +28,15 @@ new Vue({
           }}
           boxed
           sort></json-viewer>
+        <hr />
+        <json-viewer
+          value={this.jsonData}
+          expand-depth={1}
+          copyable={{
+            timeout: 4000
+          }}
+          scopedSlots={scopedSlots}
+          onCopied={onCopied}></json-viewer>
       </div>
     )
   },

lib/json-viewer.vue

@@ -8,7 +8,14 @@
         ref="clip" 
         class="jv-button"
         :class="{copied}"
-      >{{ copied ? copyText.copiedText : copyText.copyText }}</span>
+      >
+        <slot
+          name="copy"
+          :copied="copied"
+        >
+          {{ copied ? copyText.copiedText : copyText.copyText }}
+        </slot>
+      </span>
     </div>
     <div 
       class="jv-code" 
@@ -92,11 +99,12 @@ export default {
       return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
     },
     copyText() {
-      const { copyText, copiedText } = this.copyable
+      const { copyText, copiedText, timeout } = this.copyable
 
       return {
         copyText: copyText || 'copy',
-        copiedText: copiedText || 'copied!'
+        copiedText: copiedText || 'copied!',
+        timeout: timeout || 2000
       }
     }
   },
@@ -112,8 +120,8 @@ export default {
           return JSON.stringify(this.value, null, 2)
         }
       });
-      clipBoard.on('success', () => {
+      clipBoard.on('success', (e) => {
-        this.onCopied()
+        this.onCopied(e)
       })
     }
   },
@@ -131,15 +139,15 @@ export default {
         }
       })
     },
-    onCopied() {
+    onCopied(copyEvent) {
       if (this.copied) {
         return;
       }
       this.copied = true
       setTimeout(() => {
         this.copied = false
-      }, 2000)
+      }, this.copyText.timeout)
-      this.$emit('copied')
+      this.$emit('copied', copyEvent)
     },
     toggleExpandCode () {
       this.expandCode = !this.expandCode