beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

build copied pop

Browse source
This commit is contained in:
khatabwedaa 2020-05-06 14:34:27 +02:00
parent 85b0d684eb
commit 1d5b1f21a0
3 changed files with 41 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Master.vue
View file

@ -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>

15
src/components/Utilities/CodeSnippet.vue
View file

@ -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>

39
src/components/Utilities/ViewComponent.vue
View file

@ -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'">
<slot name="component"></slot>
<div class="w-full relative" :dir="rtl? 'rtl' : 'ltr'">
<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>