Make it possible to pass namespace to mapFields()

Fixes #23

Author: maoberlehner

README.md

@@ -370,6 +370,27 @@ export default {
 </script>
 ```
 
+Or you can pass the module namespace string as the first argument of the `mapFields()` function.
+
+```html
+<template>
+  <div id="app">
+    <input v-model="foo">
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields';
+
+export default {
+  computed: {
+    // `fooModule` is the name of the Vuex module.
+    ...mapFields(`fooModule`, ['foo']),
+  },
+};
+</script>
+```
+
 ### Multi-row fields
 
 If you want to build a form which allows the user to enter multiple rows of a specific data type with multiple fields (e.g. multiple addresses) you can use the multi-row field mapping function.

src/index.js

@@ -1,5 +1,25 @@
 import arrayToObject from './lib/array-to-object';
 
+function normalizeNamespace(fn) {
+  return (namespace, map, getterType, mutationType) => {
+    /* eslint-disable no-param-reassign */
+    if (typeof namespace !== `string`) {
+      mutationType = getterType;
+      getterType = map;
+      map = namespace;
+      namespace = ``;
+    } else if (namespace.charAt(namespace.length - 1) !== `/`) {
+      namespace += `/`;
+    }
+
+    getterType = `${namespace}${getterType || `getField`}`;
+    mutationType = `${namespace}${mutationType || `updateField`}`;
+    /* eslint-enable */
+
+    return fn(namespace, map, getterType, mutationType);
+  };
+}
+
 export function getField(state) {
   return path => path.split(/[.[\]]+/).reduce((prev, key) => prev[key], state);
 }
@@ -15,7 +35,7 @@ export function updateField(state, { path, value }) {
   }, state);
 }
 
-export function mapFields(fields, getterType = `getField`, mutationType = `updateField`) {
+export const mapFields = normalizeNamespace((namespace, fields, getterType, mutationType) => {
   const fieldsObject = Array.isArray(fields) ? arrayToObject(fields) : fields;
 
   return Object.keys(fieldsObject).reduce((prev, key) => {
@@ -34,9 +54,15 @@ export function mapFields(fields, getterType = `getField`, mutationType = `updat
 
     return prev;
   }, {});
-}
+});
 
-export function mapMultiRowFields(paths, getterType = `getField`, mutationType = `updateField`) {
+export const mapMultiRowFields = normalizeNamespace((
+  namespace,
+  paths,
+  getterType,
+  mutationType,
+) => {
+// export function mapMultiRowFields(paths, getterType = `getField`, mutationType = `updateField`) {
   const pathsObject = Array.isArray(paths) ? arrayToObject(paths) : paths;
 
   return Object.keys(pathsObject).reduce((entries, key) => {
@@ -66,7 +92,7 @@ export function mapMultiRowFields(paths, getterType = `getField`, mutationType =
 
     return entries;
   }, {});
-}
+});
 
 export const createHelpers = ({ getterType, mutationType }) => ({
   [getterType]: getField,

test/module-namespaced-inline.test.js

@@ -0,0 +1,61 @@
+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+
+import { mapFields, getField, updateField } from './package/src';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe(`Component initialized with namespaced Vuex module.`, () => {
+  let Component;
+  let store;
+  let wrapper;
+
+  beforeEach(() => {
+    Component = {
+      template: `<input id="foo" v-model="foo">`,
+      computed: {
+        ...mapFields(`fooModule`, [
+          `foo`,
+        ]),
+      },
+    };
+
+    store = new Vuex.Store({
+      modules: {
+        fooModule: {
+          namespaced: true,
+          state: {
+            foo: ``,
+          },
+          getters: {
+            getField,
+          },
+          mutations: {
+            updateField,
+          },
+        },
+      },
+    });
+
+    wrapper = shallowMount(Component, { localVue, store });
+  });
+
+  test(`It should render the component.`, () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test(`It should update field values when the store is updated.`, () => {
+    store.state.fooModule.foo = `foo`;
+
+    expect(wrapper.element.value).toBe(`foo`);
+  });
+
+  test(`It should update the store when the field values are updated.`, () => {
+    wrapper.element.value = `foo`;
+    wrapper.trigger(`input`);
+
+    expect(store.state.fooModule.foo).toBe(`foo`);
+  });
+});