Merge pull request #13 from 1on/master

Fixed working with array of fields

.gitignore

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

src/form/registry.ts

@@ -72,7 +72,14 @@ export default class Registry {
         const result = new Map()
 
         for (const i of this.registry.keys()) {
-            if (i === key || i.includes(key + '.')) {
+            const objectKey = key + '.'
+            const arrayKey = key + '['
+
+            if (
+                i === key ||
+                i.substring(0, objectKey.length) === objectKey ||
+                i.substring(0, arrayKey.length) === arrayKey
+            ) {
                 result.set(i, this.registry.get(i))
             }
         }

src/utils/index.ts

@@ -52,6 +52,9 @@ export function setNested (obj: Record<string, any>, field: string, value: any):
                 subProxy = subProxy[matches[2]]
             }
         } else {
+            if (subProxy === undefined) {
+                break
+            }
             if (i === fieldParts.length - 1) {
                 subProxy[fieldPart] = value
                 break

storybook/stories/FormularioGrouping.tale.vue

@@ -1,55 +1,22 @@
 <template>
     <FormularioForm v-model="values">
-        <FormularioGrouping name="group">
-            <FormularioInput
-                v-slot="{ context }"
-                class="mb-3"
-                name="text"
-                validation="number|required"
+        <FormularioInput
+            v-slot="{ context }"
+            class="mb-3"
+            name="groups"
+            validation="min:1"
+            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>
-                <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"
-            >
-                <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>
+                {{ error }}
+            </div>
+        </FormularioInput>
 
         <div>{{ values }}</div>
     </FormularioForm>
@@ -57,20 +24,18 @@
 
 <script>
 import FormularioForm from '@/FormularioForm'
-import FormularioGrouping from '@/FormularioGrouping'
-import FormularioInput from '@/FormularioInput'
+import FormularioGroupingGroupTale from './FormularioGroupingGroup.tale.vue'
 
 export default {
     name: 'FormularioGroupingTale',
 
     components: {
         FormularioForm,
-        FormularioGrouping,
-        FormularioInput,
+        FormularioGroupingGroupTale,
     },
 
     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
         }
     }
 })

test/unit/FormularioForm.test.js

@@ -68,6 +68,33 @@ describe('FormularioForm', () => {
         expect(wrapper.findComponent(FormularioForm).vm.registry.keys()).toEqual(['sub2'])
     })
 
+    it('Getting nested fields from registry', async () => {
+        const wrapper = mount({
+            data: () => ({ active: true, nested: { groups: { value: 'value' } }, groups: [{ name: 'group1' }, { name: 'group2' }] }),
+            template: `
+                <FormularioForm>
+                    <FormularioInput name="sub1" />
+                    <FormularioInput name="sub2" />
+                    <FormularioInput name="nested.groups.value" />
+                    <FormularioInput name="groups">
+                        <FormularioGrouping :name="'groups[' + index + ']'" v-for="(item, index) in groups" :key="index">
+                            <FormularioInput name="name" />
+                        </FormularioGrouping>
+                    </FormularioInput>
+                </FormularioForm>
+            `
+        })
+        await flushPromises()
+        expect(Array.from(wrapper.findComponent(FormularioForm).vm.registry.getNested('sub1').keys())).toEqual(['sub1'])
+        expect(Array.from(wrapper.findComponent(FormularioForm).vm.registry.getNested('groups').keys()))
+            .toEqual(['groups', 'groups[0].name', 'groups[1].name'])
+
+        wrapper.setData({ active: true, groups: [{ name: 'group1' }] })
+        await flushPromises()
+        expect(Array.from(wrapper.findComponent(FormularioForm).vm.registry.getNested('groups').keys()))
+            .toEqual(['groups', 'groups[0].name'])
+    })
+
     it('Can set a field’s initial value', async () => {
         const wrapper = mount(FormularioForm, {
             propsData: { formularioValue: { test: 'Has initial value' } },