From 76ccd75ac059cc611441533c3d83429f24b8a0ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B3=B0?= <feng.chen@yoho.cn>
Date: Wed, 18 Oct 2017 14:07:58 +0800
Subject: [PATCH] add icon prefix

---
 examples/app.js       |  3 ++-
 json-box.vue          |  6 ++++--
 json-icon.vue         | 28 ++++++++++++++++++++++++++++
 json-viewer.vue       | 26 ++++++++++++++++++++------
 types/json-array.vue  |  2 +-
 types/json-object.vue |  6 +++++-
 6 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 json-icon.vue

diff --git a/examples/app.js b/examples/app.js
index 6d37c0c..764c306 100644
--- a/examples/app.js
+++ b/examples/app.js
@@ -16,7 +16,8 @@ new Vue({
                     a: 1
                 }
             },
-            showCopy: true
+            showCopy: true,
+            iconPrefix: 'ive-'
         }
     })
 })
\ No newline at end of file
diff --git a/json-box.vue b/json-box.vue
index edf1a2f..ce533ca 100644
--- a/json-box.vue
+++ b/json-box.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="node">
         <span class="key" v-if="keyName">
-            <i class="icon" v-if="isObject" :class="{'ion-arrow-down-b': toggle, 'ion-arrow-up-b': !toggle}" @click.stop="toggleNode"></i>
+            <j-icon v-if="isObject" :type="value ? 'ion-arrow-down-b' : 'ion-arrow-up-b'" @click.stop="toggleNode"></j-icon>
             {{keyName}}:
         </span>
         <commponent :is="`Json${valueType}`" :json-value="value" v-model="toggle" :key-name="keyName"></commponent>
@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import JIcon from './json-icon'
 import JsonString from './types/json-string';
 import JsonNumber from './types/json-number';
 import JsonBoolean from './types/json-boolean';
@@ -54,7 +55,8 @@ export default {
         JsonNumber,
         JsonBoolean,
         JsonObject,
-        JsonArray
+        JsonArray,
+        JIcon
     }
 };
 </script>
diff --git a/json-icon.vue b/json-icon.vue
new file mode 100644
index 0000000..70cc0e5
--- /dev/null
+++ b/json-icon.vue
@@ -0,0 +1,28 @@
+<template>
+    <i :class="{
+        [`${iconPrefix}icon`]: true,
+        [`${iconPrefix}${type}`]: true
+    }" @click="iconClick"></i>
+</template>
+
+<script>
+export default {
+    name: 'JsonIcon',
+    inject: ['iconPrefix'],
+    props: {
+        iconPrefix: {
+            type: String,
+            default: ''
+        },
+        type: {
+            type: String,
+            default: ''
+        }
+    },
+    methods: {
+        iconClick(e) {
+            this.$emit('click', e);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/json-viewer.vue b/json-viewer.vue
index 13b8276..abb7a4a 100644
--- a/json-viewer.vue
+++ b/json-viewer.vue
@@ -1,21 +1,22 @@
 <template>
     <div class="json-viewer">
         <div class="tooltip">
-            <i class="icon ion-qr-scanner" @click.native="bigger" v-if="showBigger"></i>
-            <i class="icon ion-checkmark copied" v-if="copied"></i>
-            <i class="icon ion-md-clipboard copy" @click.native="clip" v-if="showCopy && !copied"></i>
+            <j-icon v-if="showBigger" type="ion-qr-scanner" @click="bigger"></j-icon>
+            <j-icon v-if="copied" class="copied" type="ion-checkmark"></j-icon>
+            <j-icon v-if="showCopy && !copied" class="copy" type="ion-md-clipboard" @click="clip"></j-icon>
         </div>
         <div class="code-box" :class="{'more': moreCode}">
             <json-box :value="value" :key-name="keyName"></json-box>
         </div>
         <div class="more-code" @click="toggleMoreCode">
-            <i class="icon" :class="{'ion-ios-arrow-up': moreCode, 'ion-ios-arrow-down': !moreCode}"></i>
+            <j-icon :type="moreCode ? 'ion-ios-arrow-up' : 'ion-ios-arrow-down'"></j-icon>
         </div>
     </div>
 </template>
 
 <script>
 import Vue from 'vue';
+import JIcon from './json-icon'
 import JsonBox from './json-box';
 import Clipboard from 'clipboard';
 
@@ -33,6 +34,15 @@ export default {
         showBigger: {
             type: Boolean,
             default: false
+        },
+        iconPrefix: {
+            type: String,
+            default: ''
+        }
+    },
+    provide() {
+        return {
+            iconPrefix: this.iconPrefix
         }
     },
     data() {
@@ -46,7 +56,7 @@ export default {
         clip() {
             const clipBoard = new Clipboard('.copy', {
                 text: () => {
-                    return JSON.stringify(this.$attrs.value, null, 2);
+                    return JSON.stringify(this.value, null, 2);
                 }
             });
 
@@ -55,7 +65,7 @@ export default {
                 setTimeout(() => {
                     this.copied = false;
                 }, 2000);
-                this.$Message.success('Code copied');
+                this.$emit('copied');
                 clipBoard.destroy();
             });
         },
@@ -65,6 +75,10 @@ export default {
         toggleMoreCode() {
             this.moreCode = !this.moreCode;
         }
+    },
+    components: {
+        JsonBox,
+        JIcon
     }
 };
 </script>
diff --git a/types/json-array.vue b/types/json-array.vue
index 80b248f..4217268 100644
--- a/types/json-array.vue
+++ b/types/json-array.vue
@@ -1,6 +1,6 @@
 <template>
     <span>
-        <i v-if="!keyName" class="icon" :class="{'ion-arrow-down-b': value, 'ion-arrow-up-b': !value}" @click.stop="toggle"></i>
+        <j-icon v-if="!keyName" :type="value ? 'ion-arrow-down-b' : 'ion-arrow-up-b'" @click.stop="toggle"></j-icon>
         <span>[</span>
         <template v-if="jsonValue.length">
             <json-box v-show="value" v-for="(val, index) in jsonValue" :key="index" :value="val"></json-box>
diff --git a/types/json-object.vue b/types/json-object.vue
index 5e1c7b5..962ae81 100644
--- a/types/json-object.vue
+++ b/types/json-object.vue
@@ -1,6 +1,6 @@
 <template>
     <span>
-        <i v-if="!keyName" class="icon" :class="{'ion-arrow-down-b': value, 'ion-arrow-up-b': !value}" @click.stop="toggle"></i>
+        <j-icon v-if="!keyName" :type="value ? 'ion-arrow-down-b' : 'ion-arrow-up-b'" @click.stop="toggle"></j-icon>
         <span>{</span>
         <template v-if="Object.keys(jsonValue).length">
             <json-box v-show="value" v-for="(v, k) in jsonValue" :key="k" :key-name="k" :value="v"></json-box>
@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import JIcon from '../json-icon'
 export default {
     name: 'JsonObject',
     props: {
@@ -23,6 +24,9 @@ export default {
             console.log('toggle')
             this.$emit('input', !this.value);
         }
+    },
+    components: {
+        JIcon
     }
 };
 </script>