From 799c1057154d709eeba02ddd8b9de45e04aacba0 Mon Sep 17 00:00:00 2001
From: Mosab Ibrahim <miaababikir@gmail.com>
Date: Wed, 6 May 2020 17:19:29 +0200
Subject: [PATCH] Adding form layouts

---
 src/Models/data.js                          |  2 +
 src/components/Master.vue                   |  4 ++
 src/components/UI/Forms/CasualForm.vue      | 48 +++++++++++++++++++
 src/components/UI/Forms/MultiColumnForm.vue | 51 +++++++++++++++++++++
 4 files changed, 105 insertions(+)
 create mode 100644 src/components/UI/Forms/CasualForm.vue
 create mode 100644 src/components/UI/Forms/MultiColumnForm.vue

diff --git a/src/Models/data.js b/src/Models/data.js
index c9b7a4f..63e3c17 100644
--- a/src/Models/data.js
+++ b/src/Models/data.js
@@ -27,6 +27,8 @@ export default [
     {
         name: 'Forms',
         components: [
+            {name: 'Casual Form'},
+            {name: 'Multi Column Form'},
             {name: 'Login'},
             {name: 'Subscribe'},
         ],
diff --git a/src/components/Master.vue b/src/components/Master.vue
index bec1f80..898270d 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -50,6 +50,8 @@
     import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
     import Product from "./UI/Cards/Product";
     import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
+    import MultiColumnForm from "./UI/Forms/MultiColumnForm";
+    import CasualForm from "./UI/Forms/CasualForm";
     import Login from "./UI/Forms/Login";
     import Subscribe from "./UI/Forms/Subscribe";
     import HeroWithPattern from "./UI/Heroes/HeroWithPattern";
@@ -68,6 +70,8 @@
             ArticleCardWithImage,
             Product,
             ProductEvaluation,
+            MultiColumnForm,
+            CasualForm,
             Login,
             Subscribe,
             HeroWithPattern,
diff --git a/src/components/UI/Forms/CasualForm.vue b/src/components/UI/Forms/CasualForm.vue
new file mode 100644
index 0000000..cc92046
--- /dev/null
+++ b/src/components/UI/Forms/CasualForm.vue
@@ -0,0 +1,48 @@
+<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>
\ No newline at end of file
diff --git a/src/components/UI/Forms/MultiColumnForm.vue b/src/components/UI/Forms/MultiColumnForm.vue
new file mode 100644
index 0000000..7257c75
--- /dev/null
+++ b/src/components/UI/Forms/MultiColumnForm.vue
@@ -0,0 +1,51 @@
+<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-8">
+                <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 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>
\ No newline at end of file