From 9343b168a1a31d1ef80e662ef1e71cdcc886c95d Mon Sep 17 00:00:00 2001
From: Justin Schroeder <justin@wearebraid.com>
Date: Mon, 19 Mar 2018 09:41:30 -0400
Subject: [PATCH] Adds a custom input field to the example

---
 .DS_Store                   | Bin 6148 -> 6148 bytes
 example/src/App.vue         |  28 ++++++++++++++++
 example/src/CustomInput.vue |  63 ++++++++++++++++++++++++++++++++++++
 3 files changed, 91 insertions(+)
 create mode 100644 example/src/CustomInput.vue

diff --git a/.DS_Store b/.DS_Store
index edf4605d80b02d7a6dadb7f99156202b943ea705..d6286b2defbb4db4c76e788f6e81f11d1acc6921 100644
GIT binary patch
delta 21
ccmZoMXffDuor%NHz*0xS$iQUteI`{=080Y~L;wH)

delta 21
ccmZoMXffDuor%N9#7IZM$jD;zeI`{=081GLNB{r;

diff --git a/example/src/App.vue b/example/src/App.vue
index 9c995fd..6e8a0ed 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -28,6 +28,16 @@
         validation-label="Password"
         validation="required|confirmed"
       />
+      <formulate-element
+        name="animal"
+        label="Spirit Animal"
+      >
+        <custom-input
+          v-model="animal"
+          :options="{eagle: 'Eagle', lion: 'Lion', sloth: 'Sloth'}"
+        />
+        <small>Example of a custom field using vue-formulate.</small>
+      </formulate-element>
       <formulate-element
         type="submit"
         name="Save"
@@ -42,12 +52,23 @@
 </template>
 
 <script>
+import CustomInput from './CustomInput.vue'
+import {mapModels} from 'vue-formulate'
+
 export default {
+  components: {
+    'custom-input': CustomInput
+  },
   data () {
     return {
       values: false
     }
   },
+  computed: {
+    ...mapModels({
+      animal: 'registration/animal'
+    })
+  },
   methods: {
     useFormData (vals) {
       this.values = JSON.stringify(vals, null, 2)
@@ -165,4 +186,11 @@ button:focus {
   outline: 0;
   border-color: #35495e;
 }
+
+small {
+  color: grey;
+  display: block;
+  font-size: .8em;
+  margin: .5em 0;
+}
 </style>
diff --git a/example/src/CustomInput.vue b/example/src/CustomInput.vue
new file mode 100644
index 0000000..f32e4eb
--- /dev/null
+++ b/example/src/CustomInput.vue
@@ -0,0 +1,63 @@
+<template>
+  <ul class="custom-input pill">
+    <li
+      v-for="(option, val) in options"
+      :key="val"
+      v-text="option"
+      :data-selected="val === value"
+      @click="$emit('input', val)"
+    />
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: [String, Number, Boolean],
+      default: false
+    }
+  }
+}
+</script>
+
+<style>
+.pill {
+  display: flex;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  justify-content: space-between;
+}
+
+.pill li {
+  flex-grow: 1;
+  padding: .75em 1em;
+  text-align: center;
+  border: 1px solid #41b883;
+  cursor: pointer;
+}
+
+.pill li:hover {
+  background-color: rgba(65, 184, 131, .15);
+}
+
+.pill li[data-selected] {
+  color: white;
+  background-color: #41b883;
+}
+
+.pill li:first-child {
+  border-radius: .5em 0 0 .5em;
+  border-right: 0;
+}
+
+.pill li:last-child {
+  border-radius: 0 .5em .5em 0;
+  border-left: 0;
+}
+</style>