tangy-form - npm Package Compare versions

Comparing version 2.1.3 to 2.2.0

package.json

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

README.md

@@ -11,3 +11,5 @@ # \<tangy-form\>
 
+![screenshot](screenshot.png)
 
+
 <!--
@@ -17,4 +19,3 @@ ```
   <template>
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="./tangy-form.js"></script>
+    <script type="module" src="tangy-form.js"></script>
     <next-code-block></next-code-block>
@@ -28,14 +29,6 @@ </template>
   <tangy-form-item id="item1">
-    <template>
-      <form>
-        <tangy-input name="input1" label="What is your first name?"></tangy-input>
-      </form>
-    </template>
+    <tangy-input name="input1" label="What is your first name?"></tangy-input>
   </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-input name="input2" label="What is your last name?"></tangy-input>
   </tangy-form-item>
@@ -64,2 +57,4 @@ </tangy-form>
 
+Note that if you are using this element inside of another Polymer Element, you'll need to add the `preserve-content` attribute to your `tangy-form-item`'s template tags because of this [this issue](https://github.com/Polymer/polymer/issues/2335).
+
 ## Run the demo
@@ -76,1 +71,3 @@ Requires node.js and npm installed.
 
+## Tests 
+To run tests, use `polymer test` command or just `npm run test` to just run tests in Chrome. If you want to develop tests, open http://localhost:8080/test/tangy-form_test.html

tangy-form-item-callback-helpers.js

@@ -5,3 +5,3 @@ export class TangyFormItemHelpers {
     this.element = element
-    this.inputs = this.element.shadowRoot.querySelectorAll(`[name]`)
+    this.inputs = [].slice.call(this.element.shadowRoot.querySelectorAll(`[name]`))
     if (typeof this.inputs !== 'object') {
@@ -53,2 +53,11 @@ this.inputs = []
 
+  isChecked(name) {
+    return (this.inputs.find(input => name === input.name).value === 'on') ? true : false
+  }
+
+  notChecked(name) {
+    return !(this.inputs.find(input => name === input.name).value === 'on') ? true : false
+  }
+
+
   inputShow(name) {
@@ -55,0 +64,0 @@ this.inputs.forEach(inputEl => {

tangy-form-item.js

@@ -23,3 +23,6 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
       this.template = this.querySelector('template').innerHTML
+    } else {
+      this.template = this.innerHTML
     }
+    this.innerHTML = ''
     this.t = {
@@ -187,7 +190,2 @@ open: t('open'),
       },
-      src: {
-        type: String,
-        value: 'tangy-form-item',
-        reflectToAttribute: true
-      },
       title: {
@@ -273,12 +271,5 @@ type: String,
 
-  fireOnChange(event) {
-    this.fireHook('on-change', event)
-  }
-
   fireHook(hook, event) {
     // If locked, don't run any logic.
     if (this.locked) return
-    let formEl = this.shadowRoot.querySelector('form')
-    // Bail if no matching attribute given the hook called.
-    if (!formEl.hasAttribute(hook)) return
     // Prepare some helper variables.
@@ -310,4 +301,35 @@ let state = this.store.getState()
     let inputEnable = (name) => helpers.inputEnable(name)
+    let isChecked = (name) => helpers.isChecked(name)
+    let notChecked = (name) => helpers.notChecked(name)
     let itemsPerMinute = (input) => helpers.itemsPerMinute(input)
-    eval(formEl.getAttribute(hook))
+    let inputActionFactories = {
+      visible: {
+        truthy: name => inputShow(name),
+        falsey: name => inputHide(name)
+      },
+      editable: {
+        truthy: name => inputEnable(name),
+        falsey: name => inputDisable(name)
+      }
+    }
+    this.shadowRoot.querySelectorAll('[name]').forEach(input => {
+      if (input.hasAttribute('tangy-if') && input.hasAttribute('tangy-action')) {
+        if (eval(input.getAttribute('tangy-if'))) {
+          inputActionFactories[input.getAttribute('tangy-action')].truthy(input.name)
+        } else {
+          inputActionFactories[input.getAttribute('tangy-action')].falsey(input.name)
+        }
+      } else if (input.hasAttribute('tangy-if') && !input.hasAttribute('tangy-action')) {
+        if (eval(input.getAttribute('tangy-if'))) {
+          inputActionFactories['visible'].truthy(input.name)
+        } else {
+          inputActionFactories['visible'].falsey(input.name)
+        }
+      }
+    })
+    eval(this.getAttribute(hook))
+    // Backwards compatibility for deprecated use of having hooks on a child form element.
+    if (this.shadowRoot.querySelector('form') && this.shadowRoot.querySelector('form').hasAttribute(hook)) {
+      eval(this.shadowRoot.querySelector('form').getAttribute(hook))
+    }
   }
@@ -338,16 +360,5 @@
     // Open it, but only if empty because we might be stuck.
-    if (open === true && this.$.content.innerHTML === '' && this.template) {
+    if (open === true && this.$.content.innerHTML === '') {
       this.openWithContent(this.template)
     }
-    else if (open === true && this.$.content.innerHTML === '') {
-      let that = this
-      const request = new XMLHttpRequest();
-      request.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
-          that.openWithContent(this.responseText)
-        }
-      }
-      request.open('GET', this.src);
-      request.send();
-    }
     
@@ -361,3 +372,3 @@ }
       .forEach(input => {
-        input.addEventListener('change', this.fireOnChange.bind(this))
+        input.addEventListener('change', _ => this.fireHook('on-change', _))
       })
@@ -371,4 +382,3 @@ let tangyCompleteButtonEl = this.$.content
     this.reflect()
-    let form = this.shadowRoot.querySelector('form')
-    if (this.open === true && form && form.getAttribute('on-open')) {
+    if (this.open === true) {
       this.fireHook('on-open')
@@ -375,0 +385,0 @@ this.fireHook('on-change')

No alert changes

Improved metrics

Total package byte prevSize

282252

increased by14.56%

Number of package files

52

increased by6.12%

Lines of code

5070

increased by0.34%

Worsened metrics

Number of lines in readme file

69

decreased by-4.17%

Number of medium supply chain risk alerts

6

increased by100%

No dependency changes