Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-09 23:15:35 +00:00
Code Issues Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
khatabwedaa
2020-05-30 23:09:46 +02:00
parent 20f8d8dbf8
commit c824ba828d
2 changed files with 132 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Main.vue
View File

@@ -13,16 +13,16 @@
</div>
</div>
<p class="mt-8 text-gray-700">Header components require simple(don't panic please 😎) <a class="text-blue-600 hover:underline" href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank">configuration</a></p>
<p class="mt-8 text-gray-700">Header components require simple <span class="font-semibold">- don't panic please 😎 -</span> <a class="text-blue-600 hover:underline" href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank">configuration</a></p>
</div>
<div class="w-full max-w-6xl mx-auto">
<div class="w-full max-w-5xl mx-auto">
<div class="mb-16" v-for="category in list" :key="category.name">
<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">
<div class="my-4">
<div class="my-6">
<component :is="component.name | toId"></component>
</div>
</div>

23
src/components/Utilities/ViewComponent.vue
View File

@@ -1,36 +1,30 @@
<template>
<div class="bg-gray-300 border rounded-md overflow-hidden">
<div class="bg-white p-4 border-b">
<div class="bg-white px-4 py-2 border-b">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</div>
<div class="mt-4 md:mt-0">
<button @click="rtl =! rtl"
class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none"
:class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
<path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
<path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
</svg>
</button>
<button @click="viewCode =! viewCode"
class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none"
:class="viewCode? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<button @click="viewCode =! viewCode" class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
<path d="M13.3252 3.05011L8.66765 20.4323L10.5995 20.9499L15.257 3.56775L13.3252 3.05011Z"/>
<path d="M7.61222 18.3608L8.97161 16.9124L8.9711 16.8933L3.87681 12.1121L8.66724 7.00798L7.20892 5.63928L1.0498 12.2017L7.61222 18.3608Z"/>
<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: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">
<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>
@@ -57,7 +51,6 @@
</template>
<script>
import CodeSnippet from "./CodeSnippet";
let beautify_html = require('js-beautify').html;