docs: Updated story of address list - added possibility to remove items from list; removed outdated story

storybook/stories/ExampleAddressList.tale.vue

@@ -42,7 +42,7 @@
                         v-slot="{ context }"
                         class="col col-auto px-2 mb-3"
                         name="building"
-                        validation="^required|number"
+                        validation="^required|alphanumeric"
                     >
                         <label for="address-building">Building <span class="text-danger">*</span></label>
                         <input
@@ -61,6 +61,16 @@
                             {{ error }}
                         </div>
                     </FormularioInput>
+
+                    <div class="remove-btn-wrapper">
+                        <button
+                            class="btn btn-danger"
+                            type="button"
+                            @click="removeAddress(addressIndex)"
+                        >
+                            Remove
+                        </button>
+                    </div>
                 </FormularioGrouping>
             </FormularioGrouping>
 
@@ -91,14 +101,18 @@ export default {
 
     data: () => ({
         values: {
-            addressList: [],
+            addressList: [{
+                street: 'Baker Street',
+                building: '221b',
+            }],
         },
     }),
 
     created () {
         this.$formulario.extend({
             validationMessages: {
-                number: () => 'Value is not a number',
+                alphanumeric: () => 'Value must be alphanumeric',
+                number: () => 'Value must be a number',
                 required: () => 'Value is required',
             },
         })
@@ -111,6 +125,10 @@ export default {
                 building: '',
             })
         },
+
+        removeAddress (index) {
+            this.values.addressList.splice(index, 1)
+        },
     },
 }
 </script>
@@ -119,4 +137,8 @@ export default {
 .field {
     max-width: 250px;
 }
+
+.remove-btn-wrapper {
+    padding-top: 32px;
+}
 </style>

storybook/stories/FormularioGrouping.tale.vue

@@ -1,106 +0,0 @@
-<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

@@ -6,7 +6,6 @@ import Vue from 'vue'
 import VueFormulario from '../../dist/formulario.esm'
 
 import ExampleAddressList from './ExampleAddressList.tale'
-import FormularioGrouping from './FormularioGrouping.tale'
 
 Vue.mixin({
     methods: {
@@ -22,4 +21,3 @@ Vue.use(VueFormulario)
 
 storiesOf('Examples', module)
     .add('Address list', () => ExampleAddressList)
-    .add('FormularioGrouping', () => FormularioGrouping)