Add form search, simple newsletter & fix forms components

src/components/Header.vue

@@ -70,7 +70,7 @@
 export default {
     data() {
         return {
-            components_count: 46,
+            components_count: 49,
             SHARE_LINK: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
             'Check out Meraki UI Awesome @tailwindcss Components that support RTL and fully responsive by @khatabwedaa and @miaababikir 🔥.'
             )}&url=${encodeURIComponent('https://merakiui.com')}`

src/components/Main.vue

@@ -68,7 +68,9 @@ import DropdownsSimple from "./ui/Dropdowns/Simple";
 import DropdownsNotification from "./ui/Dropdowns/Notification";
 // Forms
 import FormsNewsletter from "./ui/Forms/Newsletter";
+import FormsSimpleNewsletter from "./ui/Forms/SimpleNewsletter";
 import FormsSimple from "./ui/Forms/Simple";
+import FormsSearch from "./ui/Forms/Search";
 import FormsContact from "./ui/Forms/Contact";
 // Navbars
 import NavbarsECommerce from "./ui/Navbars/ECommerce";
@@ -127,7 +129,9 @@ export default {
         DropdownsSimple,
         DropdownsNotification,
         FormsNewsletter,
+        FormsSimpleNewsletter,
         FormsSimple,
+        FormsSearch,
         FormsContact,
         NavbarsECommerce,
         NavbarsWithAvatar,

src/components/ui/Forms/Contact.vue

@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
+            <section class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
                 <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
                 <p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                 
@@ -57,7 +57,7 @@
                         <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
                     </div>
                 </div>
-            </div>
+            </section>
         </div>   
     </view-component>
 </template>
@@ -68,7 +68,7 @@
             return {
                 name: 'Contact',
                 code: `
-        <div class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
+        <section class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
             <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
             <p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
             
@@ -124,7 +124,7 @@
                     <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
                 </div>
             </div>
-        </div>`
+        </section>`
             }
         }
     }

src/components/ui/Forms/Newsletter.vue

@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+            <section class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
                 <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
                     <div class="py-6 px-6 md:px-8 md:py-0">
                         <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
@@ -19,7 +19,7 @@
                         </div>
                     </form>
                 </div>
-            </div>
+            </section>
         </div>   
     </view-component>
 </template>
@@ -30,7 +30,7 @@
             return {
                 name: 'Newsletter',
                 code: `
-        <div class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+        <section class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
             <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
                 <div class="py-6 px-6 md:px-8 md:py-0">
                     <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
@@ -48,7 +48,7 @@
                     </div>
                 </form>
             </div>
-        </div>`
+        </section>`
             }
         }
     }

src/components/ui/Forms/Search.vue

@@ -0,0 +1,96 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 pt-6 pb-80" slot="component">
+            <section class="max-w-md w-full mx-auto px-5 py-4 relative rounded-md">
+                <div class="relative">
+                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                            <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                        </svg>
+                    </span>
+
+                    <input type="text" v-model="keyword" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Type Something">
+                </div>
+
+                <div v-if="jobsSearch" class="absolute inset-x-0 mt-4 mx-5 px-6 py-3 max-h-72 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-transparent rounded-md">
+                    <a v-for="job in jobsSearch" :key="job.title" href="#" class="block py-1">
+                        <h3 class="text-gray-700 dark:text-gray-100 font-medium hover:underline" v-text="job.title"></h3>
+                        <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm" v-text="job.date"></p>
+                    </a>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name: 'Search',
+            keyword: '',
+            jobs: [
+                { 
+                    title: 'Software engineer',
+                    date: '02/04/2020'
+                },
+                { 
+                    title: 'Front End Developer',
+                    date: '01/03/2020'
+                },
+                { 
+                    title: 'HR Lead',
+                    date: '30/2/2020'
+                },
+                { 
+                    title: 'Systems engineer',
+                    date: '15/1/2020'
+                },
+                { 
+                    title: 'Web Developer',
+                    date: '02/04/2020'
+                },
+                { 
+                    title: 'UI/UX',
+                    date: '01/03/2020'
+                },
+                { 
+                    title: 'Projects manager',
+                    date: '30/2/2020'
+                },
+            ],
+            code: `
+        <section class="max-w-md w-full mx-auto px-5 py-4 relative rounded-md">
+            <div class="relative">
+                <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                        <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </svg>
+                </span>
+
+                <input type="text" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+            </div>
+
+            <div class="absolute inset-x-0 mt-4 mx-5 px-6 py-3 max-h-72 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-transparent rounded-md">
+                <a href="#" class="block py-1">
+                    <h3 class="text-gray-700 dark:text-gray-100 font-medium hover:underline">Software engineer</h3>
+                    <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">02/04/2020</p>
+                </a>
+            </div>
+        </section>`
+        }
+    },
+
+    computed: {
+        jobsSearch() {
+            if (this.keyword) {
+                return this.jobs.filter((job) => {
+                            return job.title.toLowerCase().includes(this.keyword);
+                        });
+            }
+
+            return this.jobs;
+        }
+    }
+}
+</script>

src/components/ui/Forms/Simple.vue

@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
+            <section class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
                 <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
                 
                 <form>
@@ -31,7 +31,7 @@
                         <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
                     </div>
                 </form>
-            </div>
+            </section>
         </div>
     </view-component>
 </template>
@@ -42,7 +42,7 @@
             return {
                 name: 'Simple',
                 code: `
-        <div class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
+        <section class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
             <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
             
             <form>
@@ -72,7 +72,7 @@
                     <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
                 </div>
             </form>
-        </div>`
+        </section>`
             }
         }
     }

src/components/ui/Forms/SimpleNewsletter.vue

@@ -0,0 +1,45 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-800">
+                <div class="max-w-3xl mx-auto px-6 py-16 text-center">
+                    <h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100">Want to see Back in action?</h1>
+                    <p class="max-w-md mx-auto mt-5 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, minus tempora nemo quos</p>
+
+                    <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4 mt-8">
+                        <input id="email" type="text" class="py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
+                        
+                        <button class="py-2 px-4 capitalize tracking-wide bg-indigo-700 text-sm text-white font-medium rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
+                            Get Started
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Simple Newsletter',
+                code: `
+        <section class="bg-white dark:bg-gray-800">
+            <div class="max-w-3xl mx-auto px-6 py-16 text-center">
+                <h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100">Want to see Back in action?</h1>
+                <p class="max-w-md mx-auto mt-5 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, minus tempora nemo quos</p>
+
+                <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4 mt-8">
+                    <input id="email" type="text" class="py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
+                    
+                    <button class="py-2 px-4 capitalize tracking-wide bg-indigo-700 text-sm text-white font-medium rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
+                        Get Started
+                    </button>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>

src/models/Components.js

@@ -43,7 +43,9 @@ export default [
         name: "Forms",
         components: [
             { name: "Simple" },
+            { name: "Search" },
             { name: "Contact" },
+            { name: "SimpleNewsletter" },
             { name: "Newsletter" },
         ],
     },