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

Merge pull request #2 from merakiui/refactoring

Browse Source 
Adding search feature, it's not polished yet just a starting point
This commit is contained in:
khatabWedaa
2020-05-05 10:15:20 +02:00
committed by GitHub
parent 60e8e74a0d 56ed169cfc
commit 93974cd92c
6 changed files with 96 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/tailwind.css
View File

@@ -17,4 +17,4 @@
background: #718096; background: #718096;
} }
@tailwind utilities @tailwind utilities;

26
src/components.js Normal file
View File

@@ -0,0 +1,26 @@
export default [
{
name: 'Alert',
components: [
{ name: 'notification-Pop' }
],
},
{
name: 'Cards',
components: [
{ name: 'article' },
{ name: 'product' },
{ name: 'product-evaluation' },
{ name: 'testimonial' },
{ name: 'user-details' },
],
},
{
name: 'Forms',
components: [
{ name: 'login' },
{ name: 'subscribe' },
],
},
];

86
src/components/Master.vue
View File

@@ -3,7 +3,8 @@
<div class="container mx-auto px-6 py-16 text-center"> <div class="container mx-auto px-6 py-16 text-center">
<h1 class="text-2xl md:text-3xl text-gray-800">Discover new components. Build amazing things 🔥</h1> <h1 class="text-2xl md:text-3xl text-gray-800">Discover new components. Build amazing things 🔥</h1>
<input class="w-11/12 mt-6 px-6 py-4 bg-gray-200 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-white placeholder-gray-700" type="text" placeholder="search.."> <input class="w-11/12 mt-6 px-6 py-4 bg-gray-200 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-white placeholder-gray-700"
type="text" placeholder="search.." v-model="searchText">
</div> </div>
<div class="flex"> <div class="flex">
@@ -19,24 +20,10 @@
</div> </div>
<div class="w-full md:flex-1"> <div class="w-full md:flex-1">
<div class="container mx-auto px-6"> <div class="container mx-auto px-6">
<div class="pb-8"> <div class="pb-8" v-for="category in list" :key="category.name">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Alert</h1> <h1 class="text-2xl text-gray-800 font-semibold mb-6" v-text="category.name"></h1>
<notification-pop></notification-pop> <component v-for="component in category.components" :key="component.name" :is="component.name"
</div> class="mt-8"></component>
<div class="py-8">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Cards</h1>
<user-details></user-details>
<testimonial class="mt-10"></testimonial>
<artical class="mt-10"></artical>
<product class="mt-10"></product>
<product-evaluation class="mt-10"></product-evaluation>
</div>
<div class="py-8">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Forms</h1>
<login></login>
<subscribe class="my-10"></subscribe>
</div> </div>
</div> </div>
</div> </div>
@@ -45,25 +32,48 @@
</template> </template>
<script> <script>
import NotificationPop from "./UI/Alert/NotificationPop"; import NotificationPop from "./UI/Alert/NotificationPop";
import UserDetails from "./UI/Cards/UserDetails"; import UserDetails from "./UI/Cards/UserDetails";
import Testimonial from "./UI/Cards/Testimonial"; import Testimonial from "./UI/Cards/Testimonial";
import Artical from "./UI/Cards/Artical"; import Article from "./UI/Cards/Article";
import Product from "./UI/Cards/Product"; import Product from "./UI/Cards/Product";
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation"; import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
import Login from "./UI/Forms/Login"; import Login from "./UI/Forms/Login";
import Subscribe from "./UI/Forms/Subscribe"; import Subscribe from "./UI/Forms/Subscribe";
import componentList from "./../components";
export default { export default {
components: { components: {
NotificationPop , NotificationPop,
UserDetails , UserDetails,
Testimonial , Testimonial,
Artical , Article,
Product , Product,
ProductEvaluation, ProductEvaluation,
Login, Login,
Subscribe Subscribe
},
data() {
return {
categories: componentList,
searchText: '',
}
},
computed: {
list() {
if (this.searchText.length === 0) return componentList;
return this.search(this.searchText);
},
},
methods: {
search(string) {
let pattern = new RegExp(`^${string}`, 'i');
return this.categories.filter(category => category.name.match(pattern));
}
},
} }
}
</script> </script>

0
src/components/UI/Cards/Artical.vue → src/components/UI/Cards/Article.vue
View File

6
src/views/ViewComponent.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="bg-gray-300 border rounded-md overflow-hidden"> <div class="bg-gray-300 border rounded-md overflow-hidden max-w-4xl">
<div class="bg-white p-4 border-b"> <div class="bg-white p-4 border-b">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="text-gray-700 font-medium text-sm md:text-lg">{{ name }}</div> <div class="text-gray-700 font-medium text-sm md:text-lg">{{ name }}</div>
@@ -22,14 +22,14 @@
<div class="flex justify-center items-center p-6"> <div class="flex justify-center items-center p-6">
<div class="w-full"> <div class="w-full">
<slot name="component"></slot> <slot name="component"></slot>
</div> </div>
</div> </div>
<div v-if="viewCode"> <div v-if="viewCode">
<code-snippet :code="code"></code-snippet> <code-snippet :code="code"></code-snippet>
</div> </div>
</div> </div>
</template> </template>
<script> <script>

34
tailwind.config.js
View File

@@ -1,19 +1,21 @@
module.exports = { module.exports = {
purge: [], purge: [
theme: { './src/**/*.vue',
extend: { ],
fontFamily: { theme: {
inter: [ extend: {
'Inter' fontFamily: {
], inter: [
}, 'Inter'
spacing: { ],
'7': '1.75rem', },
'9': '2.25rem', spacing: {
'96': '24rem', '7': '1.75rem',
}, '9': '2.25rem',
'96': '24rem',
},
},
}, },
}, variants: {},
variants: {}, plugins: [],
plugins: [],
} }