docs: Added storybook for case of array of fields

.gitignore

@@ -8,3 +8,4 @@ coverage
 *.sublime-workspace
 *.dev.tale.vue
 *.dev.stories.js
+storybook-static

storybook/stories/FormularioGrouping.tale.vue

@@ -1,55 +1,22 @@
 <template>
     <FormularioForm v-model="values">
-        <FormularioGrouping name="group">
+        <FormularioInput
-            <FormularioInput
+            v-slot="{ context }"
-                v-slot="{ context }"
+            class="mb-3"
-                class="mb-3"
+            name="groups"
-                name="text"
+            validation="min:1"
-                validation="number|required"
+            validation-behavior="live"
+        >
+            <FormularioGroupingGroupTale v-model="context.model" />
+
+            <div
+                v-for="(error, index) in context.allErrors"
+                :key="index"
+                class="text-danger"
             >
-                <label for="text-field">Text field (number|required)</label>
+                {{ error }}
-                <input
+            </div>
-                    id="text-field"
+        </FormularioInput>
-                    v-model="context.model"
-                    type="text"
-                    class="form-control"
-                    style="max-width: 250px;"
-                >
-
-                <div
-                    v-for="(error, index) in context.allErrors"
-                    :key="index"
-                    class="text-danger"
-                >
-                    {{ error }}
-                </div>
-            </FormularioInput>
-
-            <FormularioInput
-                v-slot="{ context }"
-                :validation-messages="{ in: 'The value was different than expected' }"
-                class="mb-3"
-                name="abcdef-field"
-                validation="in:abcdef"
-            >
-                <label for="abcdef-field">Text field (in:abcdef)</label>
-                <input
-                    id="abcdef-field"
-                    v-model="context.model"
-                    type="text"
-                    class="form-control"
-                    style="max-width: 250px;"
-                >
-
-                <div
-                    v-for="(error, index) in context.allErrors"
-                    :key="index"
-                    class="text-danger"
-                >
-                    {{ error }}
-                </div>
-            </FormularioInput>
-        </FormularioGrouping>
 
         <div>{{ values }}</div>
     </FormularioForm>
@@ -57,20 +24,18 @@
 
 <script>
 import FormularioForm from '@/FormularioForm'
-import FormularioGrouping from '@/FormularioGrouping'
+import FormularioGroupingGroupTale from './FormularioGroupingGroup.tale.vue'
-import FormularioInput from '@/FormularioInput'
 
 export default {
     name: 'FormularioGroupingTale',
 
     components: {
         FormularioForm,
-        FormularioGrouping,
+        FormularioGroupingGroupTale,
-        FormularioInput,
     },
 
     data: () => ({
-        values: {},
+        values: { groups: [] },
     }),
 }
 </script>

storybook/stories/FormularioGroupingGroup.tale.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <div
+            v-for="(item, groupIndex) in groups"
+            :key="groupIndex"
+        >
+            <FormularioGrouping :name="`groups[${groupIndex}]`">
+                <FormularioInput
+                    v-slot="{ context }"
+                    class="mb-3"
+                    name="text"
+                    validation="number|required"
+                    validation-behavior="live"
+                >
+                    <label for="text-field">Text field (number|required)</label>
+                    <input
+                        id="text-field"
+                        v-model="context.model"
+                        type="text"
+                        class="form-control"
+                        style="max-width: 250px;"
+                    >
+
+                    <div
+                        v-for="(error, index) in context.allErrors"
+                        :key="index"
+                        class="text-danger"
+                    >
+                        {{ error }}
+                    </div>
+                </FormularioInput>
+
+                <FormularioInput
+                    v-slot="{ context }"
+                    :validation-messages="{ in: 'The value was different than expected' }"
+                    class="mb-3"
+                    name="abcdef-field"
+                    validation="in:abcdef"
+                    validation-behavior="live"
+                >
+                    <label for="abcdef-field">Text field (in:abcdef)</label>
+                    <input
+                        id="abcdef-field"
+                        v-model="context.model"
+                        type="text"
+                        class="form-control"
+                        style="max-width: 250px;"
+                    >
+
+                    <div
+                        v-for="(error, index) in context.allErrors"
+                        :key="index"
+                        class="text-danger"
+                    >
+                        {{ error }}
+                    </div>
+                </FormularioInput>
+            </FormularioGrouping>
+
+            <button @click="onRemoveGroup(groupIndex)">
+                Remove Group
+            </button>
+        </div>
+
+        <button @click="onAddGroup">
+            Add Group
+        </button>
+    </div>
+</template>
+
+<script>
+import FormularioGrouping from '@/FormularioGrouping'
+import FormularioInput from '@/FormularioInput'
+
+export default {
+    name: 'FormularioGroupingGroupTale',
+
+    components: {
+        FormularioGrouping,
+        FormularioInput,
+    },
+
+    model: {
+        prop: 'groups',
+        event: 'change'
+    },
+
+    props: {
+        groups: {
+            type: Array,
+            required: true,
+        },
+    },
+
+    methods: {
+        onAddGroup () {
+            this.$emit('change', this.groups.concat([{}]))
+        },
+        onRemoveGroup (removedIndex) {
+            this.$emit('change', this.groups.filter((item, index) => {
+                return index !== removedIndex
+            }))
+        }
+    }
+}
+</script>

storybook/stories/index.stories.js

@@ -12,6 +12,9 @@ Vue.mixin({
     methods: {
         $t (text) {
             return text
+        },
+        $tc (text) {
+            return text
         }
     }
 })