Np-form

Building forms with Vue made easy

Live-demo

Getting Started

Installing

Add the plugin to your project.

Yarn or NPM

yarn add @noprotocol/np-form

# or 

npm i @noprotocol/np-form

Register the component.

import Vue from 'vue'
import npForm from 'npForm'

Vue.use(npForm)

After registering the component, you can use the np-form components inside any other Vue component in your project.

<template>
    <np-form>
        <np-form-field></np-form-field>
    </np-form>
</template>

Configuration

@todo

Components

1. np-form
2. np-form-field

API overview

Methods

| name | params | |----------------|--------| | submit | x | | validator | x |

Components

| name | params | |---------------|--------| | np-form | x | | np-form-field | x |

Development

Installing

Clone this repository, open your terminal and navigate to this projects directory, then:

yarn 

# or 

npm install 

Demo

How to run the demo:

cd demo

yarn serve 

Running the tests

How to run the automated tests for this system

Unit

Jest unit tests:

yarn test:unit 

Coding style format

Format code with prettier

yarn format

Deployment

Building for production

yarn build 

Publishing the package

Once all tests have passed, the package is ready to be published.

1. Login to your npm account

2. Run this command from your terminal

npm login 

Enter your username and password. This will store the credentials so you don’t have to enter it for every publish.

Update the version

npm version 1.[minor].[patch]

Then publish:

npm publish --access public

Remember to use npm commands npm version patch, npm version minor and npm version major to update the version automatically rather than manually updating them. These commands are based on semantic versioning.

Roadmap

1.0.0. Beta

• <np-form> component
• basic <np-form-field> components
• field validation
• default form fields:
  • input
  • radio
  • checkbox
  • select
• default error messages
• default form field validation rules (rule set)

1.0.0.

• configuration via top-level api
• top-level extend method (extend the basic form fields with custom fields)

1.1.0.

• extra from fields (as stand-alone package)
  • file upload with dropzone and preview
  • date picker

2.0.0.

• auto generate form based on a schema
• multi lang support

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

• Yaro Schiffelers - Initial work
• Jurian Koning - Initial work

See also the list of contributors who participated in this project.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.