Skip to content

Commit

Permalink
Merge branch 'release/1.1.6'
Browse files Browse the repository at this point in the history
  • Loading branch information
maoberlehner committed Apr 9, 2018
2 parents 659082b + 48f9806 commit 780f96e
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 4 deletions.
6 changes: 6 additions & 0 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
# Contributor Covenant Code of Conduct

## Our Pledge

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.

## Our Standards

Examples of behavior that contributes to creating a positive environment include:

- Using welcoming and inclusive language
Expand All @@ -21,19 +23,23 @@ Examples of unacceptable behavior by participants include:
- Other conduct which could reasonably be considered inappropriate in a professional setting

## Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.

## Scope

This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [email protected]. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]

[homepage]: http://contributor-covenant.org
Expand Down
2 changes: 2 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Contributing

## Reporting Issues

Found a problem? Want a new feature?

- See if your issue or idea has [already been reported].
Expand All @@ -9,6 +10,7 @@ Found a problem? Want a new feature?
Remember, a bug is a *demonstrable problem* caused by *our* code.

## Submitting Pull Requests

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.

1. To begin, [fork this project], clone your fork, and add our upstream.
Expand Down
31 changes: 29 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
# vuex-map-fields
[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=N8DK47KJLEAN8)

[![Patreon](https://img.shields.io/badge/patreon-donate-blue.svg)](https://www.patreon.com/maoberlehner)
[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/maoberlehner)
[![Build Status](https://travis-ci.org/maoberlehner/vuex-map-fields.svg?branch=master)](https://travis-ci.org/maoberlehner/vuex-map-fields)
[![Coverage Status](https://coveralls.io/repos/github/maoberlehner/vuex-map-fields/badge.svg?branch=master)](https://coveralls.io/github/maoberlehner/vuex-map-fields?branch=master)
[![GitHub stars](https://img.shields.io/github/stars/maoberlehner/vuex-map-fields.svg?style=social&label=Star)](https://github.com/maoberlehner/vuex-map-fields)

Enable two-way data binding for form fields saved in a Vuex store.

## Install

```bash
npm install --save vuex-map-fields
```

### Basic example

The following example component shows the most basic usage, for mapping fields to the Vuex store using two-way data binding with `v-model`, without directly modifying the store itself, but using getter and setter functions internally (as it is described in the official Vuex documentation: [Two-way Computed Property](https://vuex.vuejs.org/en/forms.html#two-way-computed-property)).

#### Store

```js
import Vue from 'vue';
import Vuex from 'vuex';
Expand Down Expand Up @@ -44,6 +49,7 @@ export default new Vuex.Store({
```

#### Component

```html
<template>
<div id="app">
Expand Down Expand Up @@ -71,9 +77,11 @@ export default {
```

### Nested properties

Oftentimes you want to have nested properties in the Vuex store. `vuex-map-fields` supports nested data structures by utilizing the object dot string notation.

#### Store

```js
import Vue from 'vue';
import Vuex from 'vuex';
Expand Down Expand Up @@ -104,6 +112,7 @@ export default new Vuex.Store({
```

#### Component

```html
<template>
<div id="app">
Expand Down Expand Up @@ -134,6 +143,7 @@ export default {
```

### Rename properties

Sometimes you might want to give your computed properties different names than what you're using in the Vuex store. Renaming properties is made possible by passing an object of fields to the `mapFields` function instead of an array.

```html
Expand All @@ -159,9 +169,11 @@ export default {
```

### Custom getters and mutations

By default `vuex-map-fields` is searching for the given properties starting from the root of your state object. Depending on the size of your application, the state object might become quite big and therefore updating the state starting from the root might become a performance issue. To circumvent such problems, it is possible to create a custom `mapFields()` function which is configured to access custom mutation and getter functions which don't start from the root of the state object but are accessing a specific point of the state.

#### Store

```js
import Vue from 'vue';
import Vuex from 'vuex';
Expand Down Expand Up @@ -196,6 +208,7 @@ export default new Vuex.Store({
```

#### Component

```html
<template>
<div id="app">
Expand Down Expand Up @@ -230,9 +243,11 @@ export default {
```

### Vuex modules

Vuex makes it possible to divide the store into modules.

#### Store

```js
import Vue from 'vue';
import Vuex from 'vuex';
Expand Down Expand Up @@ -270,6 +285,7 @@ export default new Vuex.Store({
```

#### Component

```html
<template>
<div id="app">
Expand All @@ -296,9 +312,11 @@ export default {
```

### Namespaced Vuex modules

By default, mutations and getters inside modules are registered under the global namespace – but you can mark modules as `namespaced` which prevents naming clashes of mutations and getters between modules.

#### Store

```js
import Vue from 'vue';
import Vuex from 'vuex';
Expand Down Expand Up @@ -327,6 +345,7 @@ export default new Vuex.Store({
```

#### Component

```html
<template>
<div id="app">
Expand All @@ -352,9 +371,11 @@ export default {
```

### 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.

#### Store

```js
import Vue from 'vue';
import Vuex from 'vuex';
Expand Down Expand Up @@ -387,6 +408,7 @@ export default new Vuex.Store({
```

#### Component

```html
<template>
<div id="app">
Expand All @@ -409,6 +431,7 @@ export default {
```

## Upgrade from 0.x.x to 1.x.x

Instead of accessing the state directly, since the 1.0.0 release, in order to enable the ability to implement custom getters and mutations, `vuex-map-fields` is using a getter function to access the state. This makes it necessary to add a getter function to your Vuex store.

```js
Expand Down Expand Up @@ -437,11 +460,15 @@ export default new Vuex.Store({
```

## About

### Author

Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
PayPal.me: https://paypal.me/maoberlehner
Patreon: https://www.patreon.com/maoberlehner

### License

MIT
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vuex-map-fields",
"version": "1.1.5",
"version": "1.1.6",
"description": "Enable two-way data binding for form fields saved in a Vuex store",
"keywords": [
"vue",
Expand Down

0 comments on commit 780f96e

Please sign in to comment.