tangy-form - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

package.json

		{
		"name": "tangy-form",
		"description": "A form element for lazy loaded multipage forms",
		"version": "1.5.0",
		"version": "1.6.0",
		"main": "tangy-form.js",
		@@ -6,0 +6,0 @@ "scripts": {

README.md

		@@ -11,3 +11,34 @@ # \<tangy-form\>

		```
		<tangy-form id="my-form">
		<tangy-form-item id="item1">
		<template>
		<form>
		<tangy-input name="input1" label="What is your first name?"></tangy-input>
		</form>
		</template>
		</tangy-form-item>
		<tangy-form-item id="item2">
		<template>
		<form>
		<tangy-input name="input2" label="What is your last name?"></tangy-input>
		</form>
		</template>
		</tangy-form-item>
		</tangy-form>

		<script>
		document.querySelector('#my-form').addEventListener('submit', event => {
		// By default, the form response is locked and the user can browse it. Use event.preventDefault()
		// to do something else.
		event.preventDefault()
		// 3 ways to inspect the user's response to the form. Ordered by level of detail.
		console.log(event.target.response)
		console.log(event.target.inputs)
		console.log(event.target.values)
		})
		</script>
		```


		## Install in your project
		@@ -14,0 +45,0 @@ `<tangy-form>` is a Custom Element built with Polymer and can be used in frameworks such as Angular, React, and Vue. Check compatibility with your project's framework on [Custom Elements Everywhere](https://custom-elements-everywhere.com/). If you are ready to go, run `npm install --save tangy-form` to add it to your project. Depending on your build system/framework, there may be different steps to take to get Web Components loading.

tangy-form.js

		@@ -231,2 +231,10 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

		get inputs() {
		return this.response.items.reduce((acc, item) => [...acc, ...item.inputs], [])
		}

		get values() {
		return this.inputs.reduce((acc, input) => Object.assign({}, acc, {[input.name]: input.value}), {})
		}

		constructor() {
		@@ -454,7 +462,2 @@ super()

		getValue(name) {
		let state = this.store.getState()
		let input = state.inputs.find((input) => input.name == name)
		if (input) return input.value
		}

		@@ -461,0 +464,0 @@ }

demo/index.html

Sorry, the diff of this file is not supported yet

Improved metrics