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

Adding search feature, it's not polished yet just a starting point

Browse source
This commit is contained in:
Mosab Ibrahim 2020-05-05 03:05:53 +02:00
parent 151331770e
commit 748daa7d62
3 changed files with 74 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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">
<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 class="flex">
@ -19,24 +20,10 @@
</div>
<div class="w-full md:flex-1">
<div class="container mx-auto px-6">
<div class="pb-8">
<h1 class="text-2xl text-gray-800 font-semibold mb-6">Alert</h1>
<notification-pop></notification-pop>
</div>
<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 class="pb-8" v-for="category in list" :key="category.name">
<h1 class="text-2xl text-gray-800 font-semibold mb-6" v-text="category.name"></h1>
<component v-for="component in category.components" :key="component.name" :is="component.name"
class="mt-8"></component>
</div>
</div>
</div>
@ -45,25 +32,48 @@
</template>
<script>
import NotificationPop from "./UI/Alert/NotificationPop";
import UserDetails from "./UI/Cards/UserDetails";
import Testimonial from "./UI/Cards/Testimonial";
import Artical from "./UI/Cards/Artical";
import Product from "./UI/Cards/Product";
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
import Login from "./UI/Forms/Login";
import Subscribe from "./UI/Forms/Subscribe";
import NotificationPop from "./UI/Alert/NotificationPop";
import UserDetails from "./UI/Cards/UserDetails";
import Testimonial from "./UI/Cards/Testimonial";
import Article from "./UI/Cards/Article";
import Product from "./UI/Cards/Product";
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
import Login from "./UI/Forms/Login";
import Subscribe from "./UI/Forms/Subscribe";
import componentList from "./../components";
export default {
components: {
NotificationPop ,
UserDetails ,
Testimonial ,
Artical ,
Product ,
ProductEvaluation,
Login,
Subscribe
export default {
components: {
NotificationPop,
UserDetails,
Testimonial,
Article,
Product,
ProductEvaluation,
Login,
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>

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