mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-08 22:53:24 +00:00
add all forms components
This commit is contained in:
khatabwedaa
@@ -2,35 +2,59 @@ export default [
|
||||
{
|
||||
name: 'Alert',
|
||||
components: [
|
||||
{ name: 'Success Alert' },
|
||||
{ name: 'Info Alert' },
|
||||
{ name: 'Warning Alert' },
|
||||
{ name: 'Error Alert' },
|
||||
{ name: 'Notification Pop' },
|
||||
{ name: 'Alert' },
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Heroes',
|
||||
components: [
|
||||
{ name: 'Hero With Pattern' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Cards',
|
||||
components: [
|
||||
{ name: 'Article Card' },
|
||||
{ name: 'Article Card With Image' },
|
||||
{ name: 'Product' },
|
||||
{ name: 'Product Evaluation' },
|
||||
{ name: 'Testimonial' },
|
||||
{ name: 'User Details' },
|
||||
{ name: 'Product Card' },
|
||||
{ name: 'Product Card With Evaluation' },
|
||||
{ name: 'Testimonial Card' },
|
||||
{ name: 'User Card' },
|
||||
{ name: 'User Card With Details' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Forms',
|
||||
components: [
|
||||
{name: 'Casual Form'},
|
||||
{name: 'Multi Column Form'},
|
||||
{name: 'Login'},
|
||||
{name: 'Subscribe'},
|
||||
{name: 'Inputs Form'},
|
||||
{name: 'Newsletter Form'},
|
||||
{name: 'Sign In Form'},
|
||||
{name: 'Sign In Form With Image'},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: 'Heroes',
|
||||
// components: [
|
||||
// { name: 'Hero With Pattern' },
|
||||
// { name: 'Hero With Image' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'Navigation',
|
||||
// components: [
|
||||
// { name: 'Navbar With Search' },
|
||||
// { name: 'Footer With Subscribe Form' },
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: 'Sections',
|
||||
// components: [
|
||||
// { name: 'Paragraph With Image' },
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: 'Paginations',
|
||||
// components: [
|
||||
// { name: 'Simple Pagination' },
|
||||
// ]
|
||||
// },
|
||||
];
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="bg-white p-6 rounded shadow">
|
||||
<h2 class="text-lg text-gray-700 font-semibold">Account settings</h2>
|
||||
<div class="mt-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Username</span>
|
||||
<input type="text"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Email Address</span>
|
||||
<input type="email"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Password</span>
|
||||
<input type="password"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Password Confirmation</span>
|
||||
<input type="password"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Casual Form'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
45
src/components/UI/Forms/InputsForm.vue
Normal file
45
src/components/UI/Forms/InputsForm.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
|
||||
|
||||
<form>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
|
||||
<div>
|
||||
<label class="text-gray-700">Username</label>
|
||||
<input type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700">Email Address</label>
|
||||
<input type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700">Password</label>
|
||||
<input type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700">Password Confirmation</label>
|
||||
<input type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Inputs Form'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="bg-white p-6 rounded shadow">
|
||||
<h2 class="text-lg text-gray-700 font-semibold">Account settings</h2>
|
||||
<div class="flex flex-col sm:flex-row py-4">
|
||||
<div class="sm:w-1/4">
|
||||
<h2 class="text-xl text-gray-700">Profile</h2>
|
||||
</div>
|
||||
<div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Username</span>
|
||||
<input type="text"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Email Address</span>
|
||||
<input type="email"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Password</span>
|
||||
<input type="password"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Password Confirmation</span>
|
||||
<input type="password"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row py-4">
|
||||
<div class="sm:w-1/4">
|
||||
<h2 class="text-xl text-gray-700">Settings</h2>
|
||||
</div>
|
||||
<div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Forward to</span>
|
||||
<input type="text"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">API Token</span>
|
||||
<input type="text"
|
||||
class="px-4 py-2 rounded bg-gray-200 border border-gray-300 mt-1 block w-full">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Multi Column Form'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="flex flex-col max-w-4xl mx-auto md:h-56 bg-white rounded-lg shadow-lg overflow-hidden md:flex-row">
|
||||
<div class="md:flex items-center justify-center md:w-1/2 md:bg-gray-700">
|
||||
<div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-56">
|
||||
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
|
||||
<div class="py-6 px-8 md:py-0">
|
||||
<h2 class="text-gray-700 text-2xl font-bold md:text-gray-100">Sign Up For Project Updates</h2>
|
||||
<p class="mt-2 text-gray-600 md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
|
||||
@@ -9,9 +9,9 @@
|
||||
</div>
|
||||
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
|
||||
<form>
|
||||
<div class="flex flex-col rounded-lg overflow-hidden sm:flex-row">
|
||||
<div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
|
||||
<input class="py-3 px-4 bg-gray-200 text-gray-800 border-gray-300 border-2 outline-none placeholder-gray-500 focus:bg-gray-100" type="text" name="email" placeholder="Enter your email">
|
||||
<button class="py-3 px-4 bg-gray-700 text-gray-100 font-semibold uppercase hover:bg-gray-600">subscribe</button>
|
||||
<button class="py-3 px-4 bg-gray-700 text-gray-100 font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -24,7 +24,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Subscribe',
|
||||
name: 'Newsletter Form',
|
||||
}
|
||||
}
|
||||
}
|
||||
42
src/components/UI/Forms/SignInForm.vue
Normal file
42
src/components/UI/Forms/SignInForm.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="bg-white w-full max-w-sm rounded-lg overflow-hidden mx-auto">
|
||||
<div class="py-4 px-8">
|
||||
<div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
|
||||
<div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</div>
|
||||
<div class="mt-1 text-center text-gray-600">Login or create account</div>
|
||||
|
||||
<form>
|
||||
<div class="mt-4 w-full">
|
||||
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="email" placeholder="Email Address">
|
||||
</div>
|
||||
<div class="mt-4 w-full">
|
||||
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="password" placeholder="Password">
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-6">
|
||||
<a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
|
||||
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center py-4 bg-gray-100 text-center">
|
||||
<h1 class="text-gray-600 text-sm">Dont`t have an account? </h1>
|
||||
<a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Sign In Form',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,13 +1,12 @@
|
||||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="flex bg-white rounded-lg shadow-lg overflow-hidden mx-auto max-w-sm lg:max-w-4xl">
|
||||
<div class="hidden lg:block lg:w-1/2 bg-cover"
|
||||
style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
|
||||
<div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
|
||||
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
|
||||
|
||||
<div class="w-full p-8 lg:w-1/2">
|
||||
<h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
|
||||
<p class="text-xl text-gray-600 text-center">Welcome back!</p>
|
||||
<a href="#"
|
||||
class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
|
||||
<a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
|
||||
<div class="px-4 py-3">
|
||||
<svg class="h-6 w-6" viewBox="0 0 40 40">
|
||||
<path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
|
||||
@@ -20,33 +19,38 @@
|
||||
fill="#1976D2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</h1>
|
||||
<h3 class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</h3>
|
||||
</a>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<span class="border-b w-1/5 lg:w-1/4"></span>
|
||||
<a href="#" class="text-xs text-center text-gray-500 uppercase">or login with email</a>
|
||||
<a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
|
||||
<span class="border-b w-1/5 lg:w-1/4"></span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
|
||||
<input class="bg-gray-200 text-gray-700 focus:outline-none focus:shadow-outline border border-gray-300 rounded py-2 px-4 block w-full appearance-none"
|
||||
<input class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
|
||||
type="email">
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="flex justify-between">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
|
||||
<a href="#" class="text-xs text-gray-500">Forget Password?</a>
|
||||
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
|
||||
</div>
|
||||
<input class="bg-gray-200 text-gray-700 focus:outline-none focus:shadow-outline border border-gray-300 rounded py-2 px-4 block w-full appearance-none"
|
||||
<input class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
|
||||
type="password">
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600">Login
|
||||
<button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Login
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<span class="border-b w-1/5 md:w-1/4"></span>
|
||||
<a href="#" class="text-xs text-gray-500 uppercase">or sign up</a>
|
||||
<a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
|
||||
<span class="border-b w-1/5 md:w-1/4"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,7 +63,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Login',
|
||||
name: 'Sign In Form With Image',
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user