Merge pull request #1797 from codyrancher/array-list-grouped

Adding the ArrayListGrouped component

components/form/ArrayList.vue

@@ -117,7 +117,7 @@ export default {
       rows.push({ value: '' });
     }
 
-    return { rows };
+    return { rows, lastUpdateWasFromValue: false };
   },
 
   computed: {
@@ -152,12 +152,24 @@ export default {
 
   watch: {
     value() {
+      this.lastUpdateWasFromValue = true;
       this.rows = (this.value || []).map(v => ({ value: v }));
+    },
+    rows: {
+      deep: true,
+      handler(newValue, oldValue) {
+        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
+        // this was called which then forced rows to updated again
+        if (!this.lastUpdateWasFromValue) {
+          this.queueUpdate();
+        }
+        this.lastUpdateWasFromValue = false;
+      }
     }
   },
 
   created() {
-    this.queueUpdate = debounce(this.update, 100);
+    this.queueUpdate = debounce(this.update, 50);
   },
 
   methods: {

components/form/ArrayListGrouped.vue

@@ -0,0 +1,40 @@
+<script>
+import ArrayList from '@/components/form/ArrayList';
+import InfoBox from '@/components/InfoBox';
+
+export default { components: { ArrayList, InfoBox } };
+</script>
+<template>
+  <ArrayList class="array-list-grouped" v-bind="$attrs" @input="$emit('input', $event)">
+    <template v-slot:columns="scope">
+      <InfoBox>
+        <slot v-bind="scope"></slot>
+      </InfoBox>
+    </template>
+    <template v-slot:remove-button="scope">
+      <button class="btn role-link close" @click="scope.remove">
+        <i class="icon icon-2x icon-x" />
+      </button>
+    </template>
+  </ArrayList>
+</template>
+<style lang="scss">
+.array-list-grouped {
+    .box {
+      position: relative;
+    }
+
+    .remove {
+      position: absolute;
+
+      padding: 0px;
+
+      top: 0;
+      right: 0;
+    }
+
+    .info-box {
+        margin-bottom: 0;
+    }
+}
+</style>