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

176
src/components/Main.vue
View File

@@ -13,16 +13,16 @@
</div> </div>
</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>
<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"> <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> <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"> <view-component v-for="component in category.components" :key="component.name" :name="component.name" class="mt-6">
<div slot="component"> <div slot="component">
<div class="my-4"> <div class="my-6">
<component :is="component.name | toId"></component> <component :is="component.name | toId"></component>
</div> </div>
</div> </div>
@@ -33,100 +33,100 @@
</template> </template>
<script> <script>
// Alerts // Alerts
import SuccessAlert from "./UI/Alert/SuccessAlert"; import SuccessAlert from "./UI/Alert/SuccessAlert";
import InfoAlert from "./UI/Alert/InfoAlert"; import InfoAlert from "./UI/Alert/InfoAlert";
import WarningAlert from "./UI/Alert/WarningAlert"; import WarningAlert from "./UI/Alert/WarningAlert";
import ErrorAlert from "./UI/Alert/ErrorAlert"; import ErrorAlert from "./UI/Alert/ErrorAlert";
import NotificationPop from "./UI/Alert/NotificationPop"; import NotificationPop from "./UI/Alert/NotificationPop";
// Cards // Cards
import ArticleCard from "./UI/Cards/ArticleCard"; import ArticleCard from "./UI/Cards/ArticleCard";
import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage"; import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
import SimpleProductCard from "./UI/Cards/SimpleProductCard"; import SimpleProductCard from "./UI/Cards/SimpleProductCard";
import ProductCard from "./UI/Cards/ProductCard"; import ProductCard from "./UI/Cards/ProductCard";
import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation"; import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation";
import TestimonialCard from "./UI/Cards/TestimonialCard"; import TestimonialCard from "./UI/Cards/TestimonialCard";
import UserCard from "./UI/Cards/UserCard"; import UserCard from "./UI/Cards/UserCard";
import UserCardWithDetails from "./UI/Cards/UserCardWithDetails"; import UserCardWithDetails from "./UI/Cards/UserCardWithDetails";
// Forms // Forms
import InputsForm from "./UI/Forms/InputsForm"; import InputsForm from "./UI/Forms/InputsForm";
import NewsletterForm from "./UI/Forms/NewsletterForm"; import NewsletterForm from "./UI/Forms/NewsletterForm";
import SignInForm from "./UI/Forms/SignInForm"; import SignInForm from "./UI/Forms/SignInForm";
import SignInFormWithImage from "./UI/Forms/SignInFormWithImage"; import SignInFormWithImage from "./UI/Forms/SignInFormWithImage";
// Header // Header
import HeaderWithImage from "./UI/Header/HeaderWithImage"; import HeaderWithImage from "./UI/Header/HeaderWithImage";
import HeaderWithPattern from "./UI/Header/HeaderWithPattern"; import HeaderWithPattern from "./UI/Header/HeaderWithPattern";
// Navbars // Navbars
import Navbar from "./UI/Navbars/Navbar"; import Navbar from "./UI/Navbars/Navbar";
import NavbarWithSearch from "./UI/Navbars/NavbarWithSearch"; import NavbarWithSearch from "./UI/Navbars/NavbarWithSearch";
import NavbarWithAvatar from "./UI/Navbars/NavbarWithAvatar"; import NavbarWithAvatar from "./UI/Navbars/NavbarWithAvatar";
// Sections // Sections
import AboutMe from "./UI/Sections/AboutMe"; import AboutMe from "./UI/Sections/AboutMe";
import CardsList from "./UI/Sections/CardsList"; import CardsList from "./UI/Sections/CardsList";
import ParagraphWithImage from "./UI/Sections/ParagraphWithImage"; import ParagraphWithImage from "./UI/Sections/ParagraphWithImage";
// Pagination // Pagination
import Pagination from "./UI/Paginations/Pagination"; import Pagination from "./UI/Paginations/Pagination";
// Footers // Footers
import SimpleFooter from "./UI/Footers/SimpleFooter"; import SimpleFooter from "./UI/Footers/SimpleFooter";
import FooterWithSubscribeForm from "./UI/Footers/FooterWithSubscribeForm"; import FooterWithSubscribeForm from "./UI/Footers/FooterWithSubscribeForm";
import Component from "../Models/Component"; import Component from "../Models/Component";
import ViewComponent from "./Utilities/ViewComponent"; import ViewComponent from "./Utilities/ViewComponent";
export default { export default {
components: { components: {
SuccessAlert, SuccessAlert,
InfoAlert, InfoAlert,
WarningAlert, WarningAlert,
ErrorAlert, ErrorAlert,
NotificationPop, NotificationPop,
ArticleCard, ArticleCard,
ArticleCardWithImage, ArticleCardWithImage,
SimpleProductCard, SimpleProductCard,
ProductCard, ProductCard,
ProductCardWithEvaluation, ProductCardWithEvaluation,
TestimonialCard, TestimonialCard,
UserCard, UserCard,
UserCardWithDetails, UserCardWithDetails,
InputsForm, InputsForm,
NewsletterForm, NewsletterForm,
SignInForm, SignInForm,
SignInFormWithImage, SignInFormWithImage,
HeaderWithImage, HeaderWithImage,
HeaderWithPattern, HeaderWithPattern,
Navbar, Navbar,
NavbarWithSearch, NavbarWithSearch,
NavbarWithAvatar, NavbarWithAvatar,
AboutMe, AboutMe,
CardsList, CardsList,
ParagraphWithImage, ParagraphWithImage,
Pagination, Pagination,
SimpleFooter, SimpleFooter,
FooterWithSubscribeForm, FooterWithSubscribeForm,
ViewComponent, ViewComponent,
},
data() {
return {
categories: [],
searchText: 'Alert',
component: new Component(),
}
},
created() {
this.categories = this.component.all();
},
computed: {
list() {
return this.component.whereCategory(this.searchText);
}, },
data() { },
return { }
categories: [],
searchText: 'Alert',
component: new Component(),
}
},
created() {
this.categories = this.component.all();
},
computed: {
list() {
return this.component.whereCategory(this.searchText);
},
},
}
</script> </script>

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

@@ -1,36 +1,30 @@
<template> <template>
<div class="bg-gray-300 border rounded-md overflow-hidden"> <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="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="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</div>
<div class="mt-4 md:mt-0"> <div class="mt-4 md:mt-0">
<button @click="rtl =! rtl" <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'">
class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="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">
<path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" /> <path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
<path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" /> <path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
</svg> </svg>
</button> </button>
<button @click="viewCode =! viewCode"
class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" <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'">
: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">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M13.3252 3.05011L8.66765 20.4323L10.5995 20.9499L15.257 3.56775L13.3252 3.05011Z"/> <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="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"/> <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> </svg>
</button> </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" <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"> 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> <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> </svg>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
@@ -57,49 +51,48 @@
</template> </template>
<script> <script>
import CodeSnippet from "./CodeSnippet";
import CodeSnippet from "./CodeSnippet"; let beautify_html = require('js-beautify').html;
let beautify_html = require('js-beautify').html; export default {
props: ['name'],
export default { components: {
props: ['name'], CodeSnippet
},
components: { data() {
CodeSnippet return {
viewCode: false,
rtl: false,
copied: false,
code: null,
}
},
created() {
this.$nextTick(() => {
let id = this.$options.filters.toId(this.name);
this.code = beautify_html(document.getElementById(id).innerHTML);
});
},
methods: {
onCopy() {
this.copied = ! this.copied;
setTimeout(() => {
this.copied = false
}, 800);
}, },
},
data() { }
return {
viewCode: false,
rtl: false,
copied: false,
code: null,
}
},
created() {
this.$nextTick(() => {
let id = this.$options.filters.toId(this.name);
this.code = beautify_html(document.getElementById(id).innerHTML);
});
},
methods: {
onCopy() {
this.copied = ! this.copied;
setTimeout(() => {
this.copied = false
}, 800);
},
},
}
</script> </script>
<style> <style>
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition: opacity .5s; transition: opacity .5s;
} }
.fade-enter, .fade-leave-to { .fade-enter, .fade-leave-to {
opacity: 0; opacity: 0;
} }
</style> </style>