form proof of concept

.gitignore

@@ -1,6 +1,9 @@
 /node_modules
 /public/hot
 /public/storage
+/public/js
+/public/css
+/public/mix-manifest.json
 /storage/*.key
 /vendor
 .env
@@ -11,3 +14,4 @@ Homestead.yaml
 npm-debug.log
 yarn-error.log
 .idea
+.DS_Store

resources/js/app.js

@@ -16,10 +16,8 @@ window.Vue = require('vue');
  * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
  */
 
-// const files = require.context('./', true, /\.vue$/i)
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-
-Vue.component('example-component', require('./components/ExampleComponent.vue').default);
+const files = require.context('./', true, /\.vue$/i)
+files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to

resources/js/components/Checkbox.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="checkbox-list">
+        <label :class="['checkbox', (selected.includes(value) ? 'selected' : '')]" :for="value" v-for="value in values">
+            <span class="checkbox-label">{{ value }}</span>
+            <input type="checkbox"
+                   :id="value"
+                   :name="name"
+                   :value="value"
+                   @change="trigger"
+                   v-model="selected">
+        </label>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            values: Array,
+            name: String,
+            userValue: Array
+        },
+        data() {
+            return {
+                selected: []
+            }
+        },
+        mounted() {
+            this.selected = this.userValue || [];
+        },
+        methods: {
+            trigger(event) {
+                this.$emit('userInput', event.target.value, event.target.checked);
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .checkbox-list {
+        display: inline-flex;
+        flex-direction: column;
+    }
+    .checkbox {
+        position: relative;
+        display: inline-flex;
+        padding: 8px 40px 8px 16px;
+        align-items: center;
+        border: 1px solid #bada55;
+        background: rgba(168, 218, 85, .2);
+
+    &.selected {
+        background: rgba(168, 218, 85, .5);
+        border: 1px solid #617630;
+
+        .checkbox-label::after {
+            position: absolute;
+            display: flex;
+            content: '✓';
+            align-items: center;
+            top: 0;
+            right: 4px;
+            height: 100%;
+        }
+    }
+
+    &-label {
+         display: block;
+         width: 100%;
+     }
+
+    input { display: none;}
+    }
+</style>

resources/js/components/Radio.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="radio-list">
+        <label :class="['radio', (picked == value.value ? 'selected' : '')]" :for="getId(value)" v-for="value in values">
+            <span class="radio-label">{{ value.label }}</span>
+            <input type="radio"
+                   :id="getId(value)"
+                   :name="name"
+                   :value="value.value"
+                   @click="trigger"
+                   v-model="picked">
+        </label>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            values: Array,
+            name: String,
+            userValue: String
+        },
+        data() {
+            return {
+                picked: null
+            }
+        },
+        created() {
+            this.picked = this.userValue;
+        },
+        methods: {
+            getId(value) {
+                return `o-${value.value}`
+            },
+            trigger(event) {
+                this.$emit('userInput', event.target.value);
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .radio-list {
+        display: inline-flex;
+        flex-direction: column;
+    }
+    .radio {
+        position: relative;
+        display: inline-flex;
+        padding: 8px 40px 8px 16px;
+        align-items: center;
+        border: 1px solid #bada55;
+        background: rgba(168, 218, 85, .2);
+
+        &.selected {
+            background: rgba(168, 218, 85, .5);
+
+            .radio-label::after {
+                position: absolute;
+                display: flex;
+                content: '✓';
+                align-items: center;
+                top: 0;
+                right: 4px;
+                height: 100%;
+            }
+        }
+
+        &-label {
+            display: block;
+            width: 100%;
+        }
+
+        input { display: none;}
+    }
+</style>