From 8aa903d8e47df39df5e45f13548e487164e977ab Mon Sep 17 00:00:00 2001
From: Anton Schubert <ischluff@mailbox.org>
Date: Wed, 6 Sep 2017 17:14:04 +0200
Subject: [PATCH] allow use of custom form components, add textarea component,
 add checkbox input, use more absolute imports

---
 conf/init.json                    |  9 ++---
 src/app.less                      | 36 +++++++++++++-----
 src/components/my-form.vue        | 18 ++++-----
 src/components/my-input.vue       | 43 ++++++++++++++--------
 src/components/scroll-table.vue   |  6 +--
 src/components/textarea-input.vue | 61 +++++++++++++++++++++++++++++++
 src/components/topbar.vue         |  1 +
 src/variables.less                |  2 +-
 src/views/dashboard.vue           |  2 +-
 src/views/forms/login.vue         | 23 ++++++++----
 src/views/forms/settings.vue      | 45 ++++++++++++++++++-----
 src/views/lists/domainlist.vue    |  4 +-
 src/views/lists/userlist.vue      |  4 +-
 src/views/views.js                |  4 +-
 14 files changed, 189 insertions(+), 69 deletions(-)
 create mode 100644 src/components/textarea-input.vue

diff --git a/conf/init.json b/conf/init.json
index a908489..d325ff3 100644
--- a/conf/init.json
+++ b/conf/init.json
@@ -22,9 +22,9 @@
                     "icon": "icon-contacts"
                 },
                 {
-                    "name": "FormDemo",
-                    "to": "/formdemo",
-                    "icon": "icon-contacts"
+                    "name": "Settings",
+                    "to": "/settings",
+                    "icon": "icon-cog"
                 }
             ],
             "profile": [
@@ -65,7 +65,6 @@
         {
             "name": "Settings",
             "to": "/settings",
-            "icon": "icon-cog",
             "content": "<settings></settings>"
         },
         {
@@ -79,4 +78,4 @@
             "content": "<h2>Profil anpassen</h2>"
         }
     ]
-}
\ No newline at end of file
+}
diff --git a/src/app.less b/src/app.less
index 115bd05..d831993 100644
--- a/src/app.less
+++ b/src/app.less
@@ -89,7 +89,7 @@ a:hover {color:#901624;}
 --------------------------------------------------------------*/
 .input_holder {margin-bottom:20px; display:block;}
 .input_header {margin-bottom:10px;}
-.input_description {font-size:13px; color: @text_color;}
+.input_description {font-size:13px; color: lighten(@text_color, 20%);}
 input, textarea, select {
   font-family: @font_family;
 	width: 100%;
@@ -98,20 +98,41 @@ input, textarea, select {
 	padding: 0px 10px;
 	color: @text_color;
 	background: white;
-	border: solid 1px #CCC;
-	outline: none;
-	font-size: 14px;
-	transition: all 0.3s;
+  border: solid 1px #CCC;
+  outline: none;
+  font-size: 14px;
+  transition: background 0.3s, color 0.3s, border 0.3s;
 }
 textarea {padding:10px; height:auto;}
 input:focus, textarea:focus, select:focus {background:#FFF; border-color: @cms_brand_primary;}
 label {font-weight:600; color: @text_color;}
 
+.checkbox_holder {
+  position: relative;
+  height: 100%;
+  min-height: 18px;
+
+  &:hover .check_checkbox {
+    border: 1px solid @cms_brand_primary;
+  }
+
+  label {
+    display: block;
+    position: absolute;
+    top: 50%;
+    margin-top: -9px;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    z-index: 10;
+  }
+}
+
 input[type="checkbox"] {
     position: absolute;
     top: -10px;
     left: -10px;
-    line-height:50px;
+    line-height: 50px;
     visibility: hidden;
     display: inline-block;
     margin: 0;
@@ -119,7 +140,6 @@ input[type="checkbox"] {
     width: auto;
     height: auto;
 }
-.checkbox_holder {position:absolute; top:0px; bottom:0px;}
 .check_checkbox {
     background: #FFF;
     display: block;
@@ -167,8 +187,6 @@ button{
   padding: 0px 30px;
   border-radius: 20px;
 }
-.cell_checkbox label {width:18px; height:18px; display:block; cursor:pointer; z-index:10; position: absolute; top:50%; margin-top:-9px;}
-.checkbox_holder:hover .check_checkbox {border: 1px solid @cms_brand_primary;}
 
 /*--------------------------------------------------------------
 # CMS CONTENT FORM
diff --git a/src/components/my-form.vue b/src/components/my-form.vue
index ca58c2a..e299e56 100644
--- a/src/components/my-form.vue
+++ b/src/components/my-form.vue
@@ -1,18 +1,18 @@
 <template>
     <form @submit.prevent="submit()">
         <div v-for="(item, key) in elements" :key="key">
-            <my-input
-                :description="item.description"
-                :label="item.label"
+            <component
+                :is="item.element"
                 :name="key"
-                :placeholder="item.placeholder"
-                :type="item.type"
+                :label="item.label"
+                :description="item.description"
+                :props="item.props"
                 v-model="formData[key]"
                 @validate="validateData(key)"
                 :invalid="formErrors[key]"
                 :validatorMessage="formErrors[key] ? formErrors[key].message : ''"
             >
-            </my-input>
+            </component>
         </div>
         <div>
             <button class="button" v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
@@ -21,13 +21,9 @@
 </template>
 
 <script>
-import MyInput from './my-input.vue';
-
 export default {
     name: "MyForm",
-    components: {
-        MyInput
-    },
+    components: {},
     props: {
         elements: {
             type: Object,
diff --git a/src/components/my-input.vue b/src/components/my-input.vue
index 80ca73e..0b43fa4 100644
--- a/src/components/my-input.vue
+++ b/src/components/my-input.vue
@@ -5,44 +5,54 @@
             <div class="input_description" v-if="description">{{ description }}</div>
         </div>
 
-        <input type="text" v-if="type == 'text'"
+        <!--  -->
+        <input type="text" v-if="props && props.type == 'text'"
             v-model="currentValue"
-            :name="name"
-            :placeholder="placeholder"
-            @blur="validate()"
-            @change="() => $emit('change', currentValue)"
             :class="{invalid}"
+            :id="name"
+            :name="name"
+            :placeholder="props.placeholder"
+            @blur="validate"
+            @change="handleChange"
         >
-        <input type="password" v-else-if="type == 'password'"
+        <input type="password" v-else-if="props && props.type == 'password'"
             v-model="currentValue"
-            :name="name"
-            :placeholder="placeholder"
-            @blur="validate()"
-            @change="() => $emit('change', currentValue)"
             :class="{invalid}"
+            :id="name"
+            :name="name"
+            :placeholder="props.placeholder"
+            @blur="validate"
+            @change="handleChange"
         >
+        <div class="checkbox_holder" v-else-if="props && props.type == 'checkbox'">
+            <label :for="name"></label>
+            <input type="checkbox"
+                v-model="currentValue"
+                :id="name"
+                :name="name"
+                @change="handleChange"
+            >
+            <div class="check_checkbox"></div>
+        </div>
 
         <div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
     </div>
 </template>
 
-
 <style scoped>
     .invalid {
         background-color: #fcc;
     }
 </style>
 
-
 <script>
 export default {
-    name: "MyInput",
+    name: "BasicInput",
     props: [
         'description',
         'label',
         'name',
-        'placeholder',
-        'type',
+        'props',
         'value',
         'invalid',
         'validatorMessage'
@@ -55,6 +65,9 @@ export default {
     methods: {
         validate() {
             this.$emit('validate', this.currentValue);
+        },
+        handleChange() {
+            this.$emit('change', this.currentValue);
         }
     },
     watch: {
diff --git a/src/components/scroll-table.vue b/src/components/scroll-table.vue
index a6d82e5..616f26d 100644
--- a/src/components/scroll-table.vue
+++ b/src/components/scroll-table.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="Scroll-Table">
-        <my-input placeholder="Suche" type="text" @change="searchChanged" v-model="currentSearch"></my-input>
+        <my-input :props="{type: 'text', placeholder: 'Suche'}" @change="searchChanged" v-model="currentSearch"></my-input>
         <my-table :actions="actions" :columns="columns" :rows="rows"
           :currentOrderBy="currentOrderBy"
           :currentOrderDesc="currentOrderDesc"
@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import MyTable from './my-table.vue';
-import MyInput from './my-input.vue';
+import MyTable from 'components/my-table';
+import MyInput from 'components/my-input';
 
 import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
 
diff --git a/src/components/textarea-input.vue b/src/components/textarea-input.vue
new file mode 100644
index 0000000..9219c1d
--- /dev/null
+++ b/src/components/textarea-input.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="input_holder">
+        <div class="input_header" v-if="label || description">
+            <label :for="name" v-if="label">{{ label }}</label>
+            <div class="input_description" v-if="description">{{ description }}</div>
+        </div>
+
+        <textarea v-model="currentValue"
+            :id="name"
+            :name="name"
+            :class="{invalid}"
+            :placeholder="props ? props.placeholder : ''"
+            @blur="validate"
+            @change="handleChange"
+            >
+        </textarea>
+
+        <div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
+    </div>
+</template>
+
+
+<style scoped>
+    .invalid {
+        background-color: #fcc;
+    }
+</style>
+
+
+<script>
+export default {
+    name: "TextareaInput",
+    props: [
+        'description',
+        'label',
+        'name',
+        'props',
+        'value',
+        'invalid',
+        'validatorMessage'
+    ],
+    data() {
+        return {
+            currentValue: this.value
+        }
+    },
+    methods: {
+        validate() {
+            this.$emit('validate', this.currentValue);
+        },
+        handleChange() {
+            this.$emit('change', this.currentValue);
+        }
+    },
+    watch: {
+        currentValue(val) {
+            this.$emit('input', val);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/topbar.vue b/src/components/topbar.vue
index 88b491f..4c837f6 100644
--- a/src/components/topbar.vue
+++ b/src/components/topbar.vue
@@ -162,6 +162,7 @@ export default {
             padding: 4px 10px;
             font-size: 0;
             color: white;
+            user-select: none;
 
             &:hover {
                 cursor: pointer;
diff --git a/src/variables.less b/src/variables.less
index 6b726d8..a80ae95 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -5,7 +5,7 @@
 
 @font_family: "Open Sans", sans-serif;
 @text_color: #333;
-@font_size: 14px;
+@font_size: 15px;
 
 @line_height_base: 1.4;
 @line_height_heading: 1.2;
diff --git a/src/views/dashboard.vue b/src/views/dashboard.vue
index 771256a..d757dc4 100644
--- a/src/views/dashboard.vue
+++ b/src/views/dashboard.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="Dashboard">
-        <h2>Dashboard</h2>
+        <h1>Dashboard</h1>
     </div>
 </template>
 
diff --git a/src/views/forms/login.vue b/src/views/forms/login.vue
index 04092fe..cd2652f 100644
--- a/src/views/forms/login.vue
+++ b/src/views/forms/login.vue
@@ -18,11 +18,13 @@
 
 <script>
 import MyForm from "components/my-form";
+import MyInput from "components/my-input";
 
 export default {
     name: "LoginForm",
     components: {
-        MyForm
+        MyForm,
+        MyInput
     },
     data() {
         return {
@@ -30,18 +32,24 @@ export default {
             password: "",
             elements: {
                 username: {
-                    placeholder: "Benutzername",
+                    element: MyInput,
                     icon: "icon-user",
-                    type: "text",
                     required: true,
-                    requiredMessage: "Der Benutzername wird benötigt!"
+                    requiredMessage: "Der Benutzername wird benötigt!",
+                    props: {
+                        type: "text",
+                        placeholder: "Benutzername"
+                    }
                 },
                 password: {
-                    placeholder: "Passwort",
+                    element: MyInput,
                     icon: "icon-key",
-                    type: "password",
                     required: true,
-                    requiredMessage: "Das Passwort wird benötigt!"
+                    requiredMessage: "Das Passwort wird benötigt!",
+                    props: {
+                        type: "password",
+                        placeholder: "Passwort"
+                    }
                 }
             },
             buttons: [{
@@ -115,7 +123,6 @@ export default {
     }
 
     .logo{
-        .clearfix();
         line-height:0; margin-bottom:15px; text-align:center;
         img {width:100%; max-width:72px;}
     }
diff --git a/src/views/forms/settings.vue b/src/views/forms/settings.vue
index 112e37e..da9426e 100644
--- a/src/views/forms/settings.vue
+++ b/src/views/forms/settings.vue
@@ -106,11 +106,15 @@
 
 <script>
 import MyForm from "components/my-form";
+import MyInput from "components/my-input";
+import TextareaInput from "components/textarea-input";
 
 export default {
     name: "FormDemo",
     components: {
-        MyForm
+        MyForm,
+        MyInput,
+        TextareaInput
     },
     data() {
         return {
@@ -119,18 +123,39 @@ export default {
             elements: {
                 title: {
                     label: "Titel",
-                    placeholder: "Titel hier eintragen",
-                    icon: "icon-user",
-                    type: "text",
-                    required: true
+                    required: true,
+                    element: MyInput,
+                    props: {
+                        type: "text",
+                        placeholder: "Titel hier eintragen"
+                    }
                 },
                 permalink: {
                     label: "Permalink",
-                    placeholder: "Permalink",
                     description: "Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.",
-                    icon: "icon-key",
-                    type: "password",
-                    required: true
+                    required: true,
+                    element: MyInput,
+                    props: {
+                        type: "text",
+                        placeholder: "Permalink"
+                    }
+                },
+                content: {
+                    label: "Inhalt",
+                    description: "Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.",
+                    required: true,
+                    element: TextareaInput,
+                    props: {
+                        placeholder: "Inhalt"
+                    }
+                },
+                public: {
+                    label: "Is Public",
+                    required: true,
+                    element: MyInput,
+                    props: {
+                        type: "checkbox"
+                    }
                 }
             },
             buttons: [{
@@ -141,7 +166,7 @@ export default {
     },
     methods: {
         submit(formData) {
-            console.log("submit", formData);
+            console.log("submit", JSON.stringify(formData));
             // this.$store.dispatch("login", formData)
             //     .then(user => {
             //         console.log("---- user login --------");
diff --git a/src/views/lists/domainlist.vue b/src/views/lists/domainlist.vue
index f6ad94e..cfded05 100644
--- a/src/views/lists/domainlist.vue
+++ b/src/views/lists/domainlist.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="Domainlist">
-        <h2>Domainlist</h2>
+        <h1>Domainlist</h1>
         <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="Name" :orderDesc="false" :limit="50"></scroll-table>
     </div>
 </template>
 
 <script>
-import ScrollTable from '../../components/scroll-table.vue';
+import ScrollTable from 'components/scroll-table.vue';
 
 export default {
     name: "Domainlist",
diff --git a/src/views/lists/userlist.vue b/src/views/lists/userlist.vue
index 063a7e1..8af6787 100644
--- a/src/views/lists/userlist.vue
+++ b/src/views/lists/userlist.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="Userlist">
-        <h2>Userlist</h2>
+        <h1>Userlist</h1>
         <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" :limit="50"></scroll-table>
     </div>
 </template>
 
 <script>
-import ScrollTable from '../../components/scroll-table.vue';
+import ScrollTable from 'components/scroll-table.vue';
 
 export default {
     name: "Userlist",
diff --git a/src/views/views.js b/src/views/views.js
index ac856df..7230633 100644
--- a/src/views/views.js
+++ b/src/views/views.js
@@ -11,5 +11,5 @@ export default {
     Logout,
     Userlist,
     Domainlist,
-    Settings,
-}
\ No newline at end of file
+    Settings
+}