chore: Replaced old stories

storybook/stories/ExampleAddressList.tale.vue

@@ -0,0 +1,122 @@
+<template>
+    <FormularioForm v-model="values">
+        <h1>Address list</h1>
+
+        <FormularioInput
+            v-slot="addressList"
+            name="addressList"
+        >
+            <FormularioGrouping name="addressList">
+                <FormularioGrouping
+                    v-for="(address, addressIndex) in addressList.context.model"
+                    :key="'address-' + addressIndex"
+                    :name="addressIndex"
+                    :is-array-item="true"
+                    class="row mx-n2"
+                >
+                    <FormularioInput
+                        v-slot="{ context }"
+                        class="col col-auto px-2 mb-3"
+                        name="street"
+                        validation="required"
+                    >
+                        <label for="address-street">Street <span class="text-danger">*</span></label>
+                        <input
+                            id="address-street"
+                            v-model="context.model"
+                            class="field form-control"
+                            type="text"
+                            @blur="context.runValidation"
+                        >
+
+                        <div
+                            v-for="(error, index) in context.allErrors"
+                            :key="index"
+                            class="text-danger"
+                        >
+                            {{ error }}
+                        </div>
+                    </FormularioInput>
+
+                    <FormularioInput
+                        v-slot="{ context }"
+                        class="col col-auto px-2 mb-3"
+                        name="building"
+                        validation="^required|number"
+                    >
+                        <label for="address-building">Building <span class="text-danger">*</span></label>
+                        <input
+                            id="address-building"
+                            v-model="context.model"
+                            class="field form-control"
+                            type="text"
+                            @blur="context.runValidation"
+                        >
+
+                        <div
+                            v-for="(error, index) in context.allErrors"
+                            :key="index"
+                            class="text-danger"
+                        >
+                            {{ error }}
+                        </div>
+                    </FormularioInput>
+                </FormularioGrouping>
+            </FormularioGrouping>
+
+            <button
+                class="btn btn-primary"
+                type="button"
+                @click="addAddressBlank"
+            >
+                Add address
+            </button>
+        </FormularioInput>
+    </FormularioForm>
+</template>
+
+<script>
+import FormularioForm from '@/FormularioForm'
+import FormularioGrouping from '@/FormularioGrouping'
+import FormularioInput from '@/FormularioInput'
+
+export default {
+    name: 'ExampleAddressListTale',
+
+    components: {
+        FormularioForm,
+        FormularioGrouping,
+        FormularioInput,
+    },
+
+    data: () => ({
+        values: {
+            addressList: [],
+        },
+    }),
+
+    created () {
+        this.$formulario.extend({
+            validationMessages: {
+                number: () => 'Value is not a number',
+                required: () => 'Value is required',
+            },
+        })
+    },
+
+    methods: {
+        addAddressBlank () {
+            this.values.addressList.push({
+                street: '',
+                building: '',
+            })
+        },
+    },
+}
+</script>
+
+<style>
+.field {
+    max-width: 250px;
+}
+</style>

storybook/stories/FormularioGrouping.tale.vue

@@ -1,41 +1,106 @@
 <template>
-    <FormularioForm v-model="values">
-        <FormularioInput
-            v-slot="{ context }"
-            class="mb-3"
-            name="groups"
-            validation="min:1"
-            validation-behavior="live"
+    <div>
+        <div
+            v-for="(item, groupIndex) in groups"
+            :key="groupIndex"
         >
-            <FormularioGroupingGroupTale v-model="context.model" />
+            <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>
+                    <div
+                        v-for="(error, index) in context.allErrors"
+                        :key="index"
+                        class="text-danger"
+                    >
+                        {{ error }}
+                    </div>
+                </FormularioInput>
 
-        <div>{{ values }}</div>
-    </FormularioForm>
+                <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 FormularioForm from '@/FormularioForm'
-import FormularioGroupingGroupTale from './FormularioGroupingGroup.tale.vue'
+import FormularioGrouping from '@/FormularioGrouping'
+import FormularioInput from '@/FormularioInput'
 
 export default {
-    name: 'FormularioGroupingTale',
+    name: 'FormularioGroupingGroupTale',
 
     components: {
-        FormularioForm,
-        FormularioGroupingGroupTale,
+        FormularioGrouping,
+        FormularioInput,
     },
 
-    data: () => ({
-        values: { groups: [] },
-    }),
+    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/FormularioGroupingGroup.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/FormularioInput.tale.vue

@@ -1,78 +0,0 @@
-<template>
-    <FormularioForm v-model="values">
-        <FormularioInput
-            v-slot="{ context }"
-            :validation-messages="{
-                number: 'The value is not a number',
-                required: 'Value required',
-            }"
-            class="mb-3"
-            name="number"
-            validation="required"
-        >
-            <label for="text-field">Text field (required)</label>
-            <input
-                id="text-field"
-                v-model="context.model"
-                type="text"
-                class="form-control"
-                style="max-width: 250px;"
-                @blur="context.runValidation()"
-            >
-
-            <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 is not in range (abc,def)' }"
-            class="mb-3"
-            name="abcdef-field"
-            validation="in:abc,def"
-        >
-            <label for="abcdef-field">Text field (in:abc,def)</label>
-            <input
-                id="abcdef-field"
-                v-model="context.model"
-                type="text"
-                class="form-control"
-                style="max-width: 250px;"
-                @blur="context.runValidation()"
-            >
-
-            <div
-                v-for="(error, index) in context.allErrors"
-                :key="index"
-                class="text-danger"
-            >
-                {{ error }}
-            </div>
-        </FormularioInput>
-
-        <div>{{ values }}</div>
-    </FormularioForm>
-</template>
-
-<script>
-import FormularioForm from '@/FormularioForm'
-import FormularioInput from '@/FormularioInput'
-
-export default {
-    name: 'FormularioInputTale',
-
-    components: {
-        FormularioForm,
-        FormularioInput,
-    },
-
-    data: () => ({
-        values: {},
-    }),
-}
-</script>

storybook/stories/index.stories.js

@@ -5,8 +5,8 @@ import { storiesOf } from '@storybook/vue'
 import Vue from 'vue'
 import VueFormulario from '../../dist/formulario.esm'
 
-import FormularioGroupingTale from './FormularioGrouping.tale'
-import FormularioInputTale from './FormularioInput.tale'
+import ExampleAddressList from './ExampleAddressList.tale'
+import FormularioGrouping from './FormularioGrouping.tale'
 
 Vue.mixin({
     methods: {
@@ -20,6 +20,6 @@ Vue.mixin({
 })
 Vue.use(VueFormulario)
 
-storiesOf('FormularioInput', module)
-    .add('Default', () => FormularioInputTale)
-    .add('Grouping', () => FormularioGroupingTale)
+storiesOf('Examples', module)
+    .add('Address list', () => ExampleAddressList)
+    .add('FormularioGrouping', () => FormularioGrouping)