Merge pull request #9 from merakiui/Feature-alert-user

build copied pop

src/components/Master.vue

@@ -31,7 +31,9 @@
                 <h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>
                 <view-component v-for="component in category.components" :key="component.name" :name="component.name" class="mt-6">
                     <div slot="component">
-                        <component :is="component.name | toId" class="mb-10"></component>
+                        <div class="my-4">
+                            <component :is="component.name | toId"></component>
+                        </div>
                     </div>
                 </view-component>
             </div>

src/components/Utilities/CodeSnippet.vue

@@ -1,14 +1,6 @@
 <template>
-    <div class="relative rounded overflow-hidden">
+    <div class="rounded overflow-hidden">
         <pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden">{{ code }}</code></pre>
-        <div class="absolute right-0 top-0">
-            <button class="px-3 py-2 text-gray-600 hover:text-gray-400 focus:outline-none" v-clipboard:copy="code">
-                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                     viewBox="0 0 24 24" class="w-6 h-6">
-                    <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
-                </svg>
-            </button>
-        </div>
     </div>
 </template>
 
@@ -23,6 +15,7 @@
         mounted() {
             this.highlightCode();
         },
+
         methods: {
             highlightCode() {
                 this.$nextTick(() => {
@@ -31,6 +24,6 @@
                     });
                 });
             },
-        }
+        },
     }
-</script>
+</script>

src/components/Utilities/ViewComponent.vue

@@ -23,20 +23,30 @@
                             <path d="M16.3883 18.3608L15.0289 16.9124L15.0294 16.8933L20.1237 12.1121L15.3333 7.00798L16.7916 5.63928L22.9507 12.2017L16.3883 18.3608Z"/>
                         </svg>
                     </button>
-                    <button v-clipboard:copy="code"
+                    <button v-clipboard:success="onCopy" v-clipboard:copy="code"
                             class="bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
                         <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                              stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
                             <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                         </svg>
                     </button>
+                    
                 </div>
             </div>
         </div>
 
         <div class="flex justify-center items-center p-3 sm:p-6">
-            <div class="w-full" :dir="rtl? 'rtl' : 'ltr'">
+            <div class="w-full relative" :dir="rtl? 'rtl' : 'ltr'">
-                <slot name="component"></slot>
+                <slot class="w-full h-full absolute top-0 left-0" name="component"></slot>
+                <transition name="fade">
+                    <div v-if="copy">
+                        <div class="w-full h-full absolute top-0 left-0 z-10">
+                            <div class="bg-gray-300 h-full flex items-center justify-center">
+                                <p class="text-blue-500 text-2xl">Copied!</p>
+                            </div>
+                        </div>
+                    </div>
+                </transition>
             </div>
         </div>
 
@@ -63,7 +73,8 @@
             return {
                 viewCode: false,
                 rtl: false,
-                code: null
+                copy: false,
+                code: null,
             }
         },
         created() {
@@ -72,5 +83,23 @@
                 this.code = beautify_html(document.getElementById(id).innerHTML);
             });
         },
+        methods: {
+            onCopy() {
+                this.copy = ! this.copy;
+
+                setTimeout(() => {
+                    this.copy = false
+                }, 2000);
+            },
+        },
     }
-</script>
+</script>
+
+<style>
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .5s;
+    }
+    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+        opacity: 0;
+    }
+</style>