compose-form-up - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

lib/progressive.js

		@@ -139,2 +139,4 @@ var toolbox = require( 'compose-toolbox' ),

		setNav()

		}
		@@ -151,2 +153,23 @@

		function setNav () {
		toolbox.each( form.querySelectorAll( 'nav [data-step]' ), function ( nav ) {

		if ( nav.dataset.step < stepIndex + 1 ) {
		nav.classList.remove( 'here', 'next' )
		nav.classList.add( 'previous', 'completed' )
		}

		if ( nav.dataset.step == stepIndex + 1 ) {
		nav.classList.remove( 'previous', 'next' )
		nav.classList.add( 'here' )
		}

		if ( nav.dataset.step > stepIndex + 1 ) {
		nav.classList.remove( 'previous', 'here' )
		nav.classList.add( 'next' )
		}

		})
		}

		function enableFieldsets ( form ) {
		@@ -165,6 +188,9 @@ toolbox.each( form.querySelectorAll( 'fieldset.form-step[disabled]' ), function( fieldset ) {
		registeredForms.push( function( event, trigger ) {
		var target = event.currentTarget

		if ( trigger === 'show-step' ) {
		event.preventDefault()

		showStep( event.currentTarget.dataset.step - 1 )
		if ( toolbox.matches( target, '.previous, .completed, .completed + a' ) )
		showStep( target.dataset.step - 1 )

		@@ -176,3 +202,3 @@ } else if ( trigger === 'next' ) {

		var formEl = ( event.target.tagName == "FORM" ) ? event.target : toolbox.getClosest( event.target, 'form')
		var formEl = ( target.tagName == "FORM" ) ? target : toolbox.getClosest( target, 'form')

		@@ -179,0 +205,0 @@ if ( form == formEl && !currentStep().querySelector( ':invalid' ) ) {

package.json

		{
		"name": "compose-form-up",
		"version": "1.4.0",
		"version": "1.5.0",
		"description": "A lightweight HTML5 form validation utility",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -90,2 +90,23 @@ # FormUp

		To help with styling form steps (with transitions) these classnames are added to fieldsets to show state.

		```
		active - the current step
		enter - When a step transitions in
		exit - When a step is being dismissed
		completed - When a step has been filled out
		```

		Also `data-direction` attributes describe the direction of a transition. So you could style transitions in and out like this:

		```
		/* Enter animations */
		.form-step.enter[data-direction=forward] { /* enter stage right */ }
		.form-step.enter[data-direction=reverse] { /* enter stage left */ }

		/* Exit animations */
		.form-step.exit[data-direction=forward] { /* exit stage left */ }
		.form-step.exit[data-direction=reverse] { /* exit stage right */ }
		```

		### Handling the next event
		@@ -103,3 +124,4 @@
		// step.forward() - go to the next step
		// step.back() - return to this step
		// step.dismiss() - leave the current step
		// step.revisit() - used after dismiss, return to a dismissed step (for example: to deal with an ajax error)
		// step.fieldset - reference the current fieldset element
		@@ -122,1 +144,40 @@ // step.form - reference to the current form element
		```

		### Fieldset Navigation

		Here's an example of the HTML for a form with navigation

		```html
		<form id="some-form" class="progressive" data-nav='true'>

		<fieldset class="form-step" data-nav='1. Create Account'>
		<!-- Some inputs -->
		<button type='submit'>Submit</button>
		</fieldset>

		<fieldset class="form-step" data-nav='2. Enter Payment'>
		<!-- Some more inputs -->
		<button type='submit'>Submit</button>
		</fieldset>

		</form>
		```

		This will generate navigation with this HTML

		```
		<nav class='progressive-form-nav'>
		<a href="#" data-step='1'>1. Create Account</a>
		<a href="#" data-step='2'>2. Enter Payment</a>
		</nav>
		```

		Nav items will receive classes based on their state. You can use these to style them appropriately.

		```
		here - The current step
		next - All steps after the current step
		previous - All steps before the current step
		completed - Any step which has been submitted (this includes current and next steps if a user has navigated back)
		```

compose-form-up - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics