Adds initial grouping capability

examples/specimens/SpecimenGroup.vue

@@ -7,12 +7,14 @@
       help="Fields can be grouped"
     >
       <FormulateInput
+        label="First and last name"
         name="Name"
         type="text"
         placeholder="User’s name"
       />
       <FormulateInput
         name="Email"
+        label="Email address"
         type="email"
         placeholder="User’s email"
         validation="required|email"

src/Formulate.js

@@ -7,12 +7,13 @@ import isPlainObject from 'is-plain-object'
 import { en } from '@braid/vue-formulate-i18n'
 import fauxUploader from './libs/faux-uploader'
 import FormulateSlot from './FormulateSlot'
-import FormulateInput from './FormulateInput.vue'
 import FormulateForm from './FormulateForm.vue'
+import FormulateInput from './FormulateInput.vue'
 import FormulateErrors from './FormulateErrors.vue'
 import FormulateHelp from './slots/FormulateHelp.vue'
 import FormulateGrouping from './FormulateGrouping.vue'
 import FormulateLabel from './slots/FormulateLabel.vue'
+import FormulateAddMore from './slots/FormulateAddMore.vue'
 import FormulateInputBox from './inputs/FormulateInputBox.vue'
 import FormulateInputText from './inputs/FormulateInputText.vue'
 import FormulateInputFile from './inputs/FormulateInputFile.vue'
@@ -40,6 +41,7 @@ class Formulate {
         FormulateLabel,
         FormulateInput,
         FormulateErrors,
+        FormulateAddMore,
         FormulateGrouping,
         FormulateInputBox,
         FormulateInputText,
@@ -54,7 +56,10 @@ class Formulate {
       slotDefaults: {
         label: 'FormulateLabel',
         help: 'FormulateHelp',
-        errors: 'FormulateErrors'
+        errors: 'FormulateErrors',
+        grouping: 'FormulateGrouping',
+        repeatable: 'FormulateRepeatable',
+        addMore: 'FormulateAddMore'
       },
       library,
       rules,
@@ -160,8 +165,8 @@ class Formulate {
    */
   slotComponent (type, slot) {
     const def = this.options.library[type]
-    if (def.slots && def.slots[slot]) {
+    if (def.slotComponents && def.slotComponents[slot]) {
-      return def.slots[slot]
+      return def.slotComponents[slot]
     }
     return this.options.slotDefaults[slot]
   }

src/FormulateGrouping.vue

@@ -1,13 +1,24 @@
 <template>
   <FormulateSlot
-    name="repeatable"
+    name="grouping"
+    :context="context"
   >
-    <FormulateRepeatable
+    <component
-      v-for="item in items"
+      :is="context.slotComponents.repeatable"
-      :key="item.id"
+      v-for="(item, index) in items"
+      :key="index"
     >
       <slot />
-    </FormulateRepeatable>
+    </component>
+    <FormulateSlot
+      v-if="canAddMore"
+      name="addmore"
+    >
+      <component
+        :is="context.slotComponents.addMore"
+        @add="addItem"
+      />
+    </FormulateSlot>
   </FormulateSlot>
 </template>
 
@@ -20,8 +31,21 @@ export default {
     }
   },
   computed: {
+    canAddMore () {
+      return (this.context.repeatable && this.items.length < this.context.limit)
+    },
     items () {
-      return [{ id: 1 }, { id: 2 }]
+      return Array.isArray(this.context.model) ? this.context.model : []
+    }
+  },
+  methods: {
+    addItem () {
+      const item = { id: this.items.length }
+      if (Array.isArray(this.context.model)) {
+        this.context.model.push(item)
+        return
+      }
+      this.context.model = [item]
     }
   }
 }

src/FormulateInput.vue

@@ -122,6 +122,10 @@ export default {
       type: [String, Boolean],
       default: false
     },
+    limit: {
+      type: Number,
+      default: Infinity
+    },
     help: {
       type: [String, Boolean],
       default: false
@@ -134,6 +138,10 @@ export default {
       type: [String, Array, Boolean],
       default: false
     },
+    repeatable: {
+      type: Boolean,
+      default: true
+    },
     validation: {
       type: [String, Boolean, Array],
       default: false

src/FormulateSlot.js

@@ -7,7 +7,7 @@ export default {
       p = p.$parent
     }
     if (p.$scopedSlots && p.$scopedSlots[props.name]) {
-      return p.$scopedSlots[props.name](props)
+      return p.$scopedSlots[props.name](props.context || props)
     }
     return h('div', data, children)
   }

src/libs/context.js

@@ -1,4 +1,3 @@
-import nanoid from 'nanoid/non-secure'
 import { map, arrayify, shallowEqualObjects } from './utils'
 
 /**
@@ -23,9 +22,11 @@ export default {
       imageBehavior: this.imageBehavior,
       label: this.label,
       labelPosition: this.logicalLabelPosition,
+      limit: this.limit,
       name: this.nameOrFallback,
       performValidation: this.performValidation.bind(this),
       preventWindowDrops: this.preventWindowDrops,
+      repeatable: this.repeatable,
       setErrors: this.setErrors.bind(this),
       showValidationErrors: this.showValidationErrors,
       slotComponents: this.slotComponents,
@@ -238,7 +239,10 @@ function slotComponents () {
   return {
     label: this.$formulate.slotComponent(this.type, 'label'),
     help: this.$formulate.slotComponent(this.type, 'help'),
-    errors: this.$formulate.slotComponent(this.type, 'errors')
+    errors: this.$formulate.slotComponent(this.type, 'errors'),
+    grouping: this.$formulate.slotComponent(this.type, 'grouping'),
+    repeatable: this.$formulate.slotComponent(this.type, 'repeatable'),
+    addMore: this.$formulate.slotComponent(this.type, 'addMore')
   }
 }
 

src/slots/FormulateAddMore.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="formulate-input-group-add-more">
+    <button @click="$emit('add')">
+      Add more
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/slots/FormulateRepeatable.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="formulate-group-row"
+    class="formulate-input-group-item"
   >
     <FormulateSlot
       name="default"

test/unit/Formulate.test.js

@@ -68,6 +68,7 @@ describe('Formulate', () => {
       'FormulateLabel',
       'FormulateInput',
       'FormulateErrors',
+      'FormulateAddMore',
       'FormulateGrouping',
       'FormulateInputBox',
       'FormulateInputText',

themes/snow/_inputs.scss

@@ -42,7 +42,15 @@
   }
 
   .formulate-input-group-item {
-    margin-bottom: .5em;
+    padding-bottom: 1.5em;
+    margin-bottom: 1.5em;
+    border-bottom: 1px solid $formulate-gray;
+
+    &:last-child {
+      margin-bottom: 1.5em;
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
   }
 
   &:last-child {