[WIP]: implement form component

example/src/App.vue

@@ -37,7 +37,7 @@
         <dropdown-menu-item label="Empty page"/>
         <dropdown-menu-item label="RTL mode"/>
       </nav-item>
-      <nav-item to="/" icon="check-square" label="Forms"/>
+      <nav-item to="/forms" icon="check-square" label="Forms"/>
       <nav-item to="/" icon="image" label="Gallery"/>
       <nav-item to="/" icon="file-text" label="Documentation"/>
     </site-nav>

example/src/components/FormsPage.vue

@@ -0,0 +1,89 @@
+<template>
+    <page>
+        <grid-row>
+            <grid-col sm="12">
+                <card>
+                    <card-header title="Form elements"/>
+                    <card-body>
+                        <grid-row>
+                            <grid-col md="6" lg="4">
+                                <form-group>
+                                    <form-label>Static</form-label>
+                                    <form-static-text value="Username"/>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Text</form-label>
+                                    <form-input placeholder="Text.."/>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Disabled</form-label>
+                                    <form-input disabled placeholder="Well, she turned me into a newt."/>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Readonly</form-label>
+                                    <form-input readonly placeholder="Well, how'd you become king, then?" type="text"/>
+                                </form-group>
+                                <form-group>
+                                    <form-label label="Textarea" label-small="56/100"/>
+                                    <form-textarea rows="6" value="Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!" />
+                                </form-group>
+                            </grid-col>
+                            <grid-col md="6" lg="4">
+                                <form-group>
+                                    <form-label>Password</form-label>
+                                    <form-input value="Username" type="password" placeholder="Password.."/>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Valid State</form-label>
+                                    <form-input valid placeholder="Valid State.."/>
+                                    <form-input tick class="mt-3" value="Valid state"/>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Invalid State</form-label>
+                                    <form-input invalid placeholder="Invalid State.."/>
+                                    <form-invalid-feedback feedback="Invalid feedback"/>
+                                    <form-input cross class="mt-3" value="Invalid state"/>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Country</form-label>
+                                    <select class="form-control custom-select">
+                                        <option value="">Germany</option>
+                                    </select>
+                                </form-group>
+                            </grid-col>
+                            <grid-col md="6" lg="4">
+                                <form-group>
+                                    <form-label>Radios</form-label>
+                                    <div class="custom-controls-stacked">
+                                        <form-radio checked name="example-radios" :value="1" label="Option 1"/>
+                                        <form-radio name="example-radios" :value="2" label="Option 2"/>
+                                        <form-radio name="example-radios" :value="3" disabled label="Option Disabled"/>
+                                        <form-radio name="example-radios2" checked :value="4" disabled label="Option Disabled Checked"/>
+                                    </div>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Inline Radios</form-label>
+                                    <div class="custom-controls-stacked">
+                                        <form-radio checked name="example-radios" :value="1" label="Option 1" inline/>
+                                        <form-radio name="example-radios" :value="2" label="Option 2" inline/>
+                                        <form-radio name="example-radios" :value="3" label="Option 3" inline/>
+                                    </div>
+                                </form-group>
+                            </grid-col>
+                        </grid-row>
+                    </card-body>
+                </card>
+            </grid-col>
+        </grid-row>
+    </page>
+</template>
+
+<script>
+  export default {
+    name: "forms-page"
+  }
+</script>
+
+<style scoped>
+
+</style>

example/src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import HomePage from '@/components/HomePage'
+import FormsPage from '@/components/FormsPage'
 
 Vue.use(Router)
 
@@ -10,6 +11,11 @@ export default new Router({
       path: '/',
       name: 'home',
       component: HomePage
+    },
+    {
+      path: '/forms',
+      name: 'forms',
+      component: FormsPage
     }
   ]
 })

src/components/Form/FormGroup.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="form-group">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "form-group"
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Form/FormInput.vue

@@ -0,0 +1,47 @@
+<template>
+    <input class="form-control" :class="className" v-model="internalValue" @input="onInput" >
+</template>
+
+<script>
+  export default {
+    name: "form-input",
+    props: {
+      value: {},
+      invalid: { default: false, type: Boolean },
+      valid: { default: false, type: Boolean },
+      tick: {default: false, type: Boolean},
+      cross: {default: false, type: Boolean}
+    },
+
+    data: () => ({
+      internalValue: null
+    }),
+
+    computed: {
+      className () {
+        const className = {}
+        className['is-valid'] = this.valid
+        className['state-valid'] = this.tick
+        className['is-invalid'] = this.invalid
+        className['state-invalid'] = this.cross
+        return className
+      }
+    },
+
+    methods: {
+      onInput() {
+        this.$emit('input', this.internalValue)
+      }
+    },
+
+    watch: {
+      value (value) {
+        this.internalValue = value
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Form/FormInvalidFeedback.js

@@ -0,0 +1,7 @@
+export default {
+  name: 'form-invalid-feedback',
+  props: {
+    feedback: {default: '', type: String}
+  },
+  template: `<div class="invalid-feedback"><slot>{{ feedback }}</slot></div>`
+}

src/components/Form/FormLabel.vue

@@ -0,0 +1,18 @@
+<template>
+    <label class="form-label" :for="labelFor"><slot>{{ label }} <span v-if="labelSmall" class="form-label-small">{{ labelSmall }}</span></slot></label>
+</template>
+
+<script>
+  export default {
+    name: "form-label",
+    props: {
+      labelFor: {default: '', type: String},
+      label: {default: '', type: String},
+      labelSmall: {default: '', type: String},
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Form/FormRadio.vue

@@ -0,0 +1,44 @@
+<template>
+    <label class="custom-control custom-radio" :class="{'custom-control-inline': inline}">
+        <input class="custom-control-input" v-bind="{name, checked: isChecked, disabled, value: radioValue}" @change="onChange" type="radio">
+        <div class="custom-control-label">{{ label }}</div>
+    </label>
+</template>
+
+<script>
+  import FormInput from './FormInput'
+
+  export default {
+    name: "form-radio",
+    props: {
+      inline: {default: false, type: Boolean},
+      value: {type: [Boolean, String, Number]},
+      label: {type: String},
+      checked: {default: false, type: Boolean},
+      disabled: {default: false, type: Boolean},
+      name: {default: '', type: String}
+    },
+
+    computed: {
+      radioValue () {
+        return this.$attrs.value
+      },
+
+      isChecked () {
+        return this.checked || this.radioValue === this.value
+      }
+    },
+
+    methods: {
+      onChange () {
+        this.$emit('input', this.radioValue)
+      }
+    },
+
+    components: {FormInput}
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Form/FormStaticText.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="form-control-plaintext">{{value}}</div>
+</template>
+
+<script>
+  export default {
+    name: "form-static-text",
+    props: {
+      value:{}
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>