@lion/field - npm Package Compare versions

Comparing version 0.3.5 to 0.3.6

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log
 
+## [0.3.6](https://github.com/ing-bank/lion/compare/@lion/field@0.3.5...@lion/field@0.3.6) (2019-11-01)
+
+
+### Bug Fixes
+
+* **field:** add form elements in the correct order ([bda9042](https://github.com/ing-bank/lion/commit/bda9042))
+* **field:** delegate autocomplete to inputElement for security ([8a4dd7e](https://github.com/ing-bank/lion/commit/8a4dd7e))
+* **fieldset:** manage when to show error messages ([c984a66](https://github.com/ing-bank/lion/commit/c984a66))
+
+
+
+
+
 ## [0.3.5](https://github.com/ing-bank/lion/compare/@lion/field@0.3.4...@lion/field@0.3.5) (2019-10-25)
@@ -8,0 +21,0 @@

package.json

 {
   "name": "@lion/field",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Fields are the most fundamental building block of the Form System",
@@ -37,3 +37,3 @@ "author": "ing-bank",
     "@lion/core": "^0.2.1",
-    "@lion/validate": "^0.2.38"
+    "@lion/validate": "^0.2.39"
   },
@@ -46,3 +46,3 @@ "devDependencies": {
   },
-  "gitHead": "3869e823751c4dcf984df5dd7a9aaa3d615b72e7"
+  "gitHead": "ad5b7d0bcf3115f38033cea5ec5f2c07fd61227a"
 }

src/FormatMixin.js

 /* eslint-disable class-methods-use-this */
 
 import { dedupeMixin } from '@lion/core';
-import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 import { Unparseable } from '@lion/validate';
@@ -53,3 +52,3 @@
     // eslint-disable-next-line no-unused-vars, no-shadow
-    class FormatMixin extends ObserverMixin(superclass) {
+    class FormatMixin extends superclass {
       static get properties() {
@@ -125,9 +124,20 @@ return {
 
-      static get syncObservers() {
-        return {
-          ...super.syncObservers,
-          _onModelValueChanged: ['modelValue'],
-          _onSerializedValueChanged: ['serializedValue'],
-          _onFormattedValueChanged: ['formattedValue'],
-        };
+      _requestUpdate(name, oldVal) {
+        super._requestUpdate(name, oldVal);
+
+        if (name === 'modelValue' && this.modelValue !== oldVal) {
+          this._onModelValueChanged({ modelValue: this.modelValue }, { modelValue: oldVal });
+        }
+        if (name === 'serializedValue' && this.serializedValue !== oldVal) {
+          this._onSerializedValueChanged(
+            { serializedValue: this.serializedValue },
+            { serializedValue: oldVal },
+          );
+        }
+        if (name === 'formattedValue' && this.formattedValue !== oldVal) {
+          this._onFormattedValueChanged(
+            { formattedValue: this.formattedValue },
+            { formattedValue: oldVal },
+          );
+        }
       }
@@ -134,0 +144,0 @@

src/FormControlMixin.js

@@ -498,3 +498,3 @@ import { html, css, nothing, dedupeMixin, SlotMixin } from '@lion/core';
          */
-        return (this.touched && this.dirty && !this.prefilled) || this.prefilled || this.submitted;
+        return (this.touched && this.dirty) || this.prefilled || this.submitted;
       }
@@ -501,0 +501,0 @@

src/FormRegistrarMixin.js

@@ -66,3 +66,3 @@ import { dedupeMixin } from '@lion/core';
 
-      addFormElement(child) {
+      addFormElement(child, index) {
         // This is a way to let the child element (a lion-fieldset or lion-field) know, about its parent
@@ -72,3 +72,7 @@ // eslint-disable-next-line no-param-reassign
 
-        this.formElements.push(child);
+        if (index > 0) {
+          this.formElements.splice(index, 0, child);
+        } else {
+          this.formElements.push(child);
+        }
       }
@@ -94,3 +98,10 @@
         ev.stopPropagation();
-        this.addFormElement(child);
+
+        // Check for siblings to determine the right order to insert into formElements
+        // If there is no next sibling, index is -1
+        let indexToInsertAt = -1;
+        if (this.formElements && Array.isArray(this.formElements)) {
+          indexToInsertAt = this.formElements.indexOf(child.nextElementSibling);
+        }
+        this.addFormElement(child, indexToInsertAt);
       }
@@ -97,0 +108,0 @@

src/InteractionStateMixin.js

 import { dedupeMixin } from '@lion/core';
-import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 import { Unparseable } from '@lion/validate';
@@ -18,3 +17,3 @@
     // eslint-disable-next-line no-unused-vars, no-shadow
-    class InteractionStateMixin extends ObserverMixin(superclass) {
+    class InteractionStateMixin extends superclass {
       static get properties() {
@@ -49,8 +48,11 @@ return {
 
-      static get syncObservers() {
-        return {
-          ...super.syncObservers,
-          _onTouchedChanged: ['touched'],
-          _onDirtyChanged: ['dirty'],
-        };
+      _requestUpdate(name, oldVal) {
+        super._requestUpdate(name, oldVal);
+        if (name === 'touched' && this.touched !== oldVal) {
+          this._onTouchedChanged();
+        }
+
+        if (name === 'dirty' && this.dirty !== oldVal) {
+          this._onDirtyChanged();
+        }
       }
@@ -57,0 +59,0 @@

src/LionField.js

@@ -52,2 +52,6 @@ import { SlotMixin, LitElement } from '@lion/core';
       },
+      autocomplete: {
+        type: String,
+        reflect: true,
+      },
     };
@@ -145,2 +149,6 @@ }
     }
+
+    if (changedProps.has('autocomplete')) {
+      this.inputElement.autocomplete = this.autocomplete;
+    }
   }
@@ -147,0 +155,0 @@

test-suites/FormRegistrationMixins.suite.js

@@ -171,2 +171,40 @@ import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing';
 
+      it('adds elements to formElements in the right order', async () => {
+        const el = await fixture(html`
+          <${parentTag}>
+            <${childTag}></${childTag}>
+            <${childTag}></${childTag}>
+            <${childTag}></${childTag}>
+          </${parentTag}>
+        `);
+
+        expect(el.formElements.length).to.equal(3);
+
+        // In the middle
+        const secondChild = el.firstElementChild.nextElementSibling;
+        const newField = await fixture(html`
+          <${childTag}></${childTag}>
+        `);
+        secondChild.insertAdjacentElement('beforebegin', newField);
+
+        expect(el.formElements.length).to.equal(4);
+        expect(el.formElements[1]).dom.to.equal(newField);
+
+        // Prepending
+        const anotherField = await fixture(html`
+          <${childTag}></${childTag}>
+        `);
+        el.prepend(anotherField);
+        expect(el.formElements.length).to.equal(5);
+        expect(el.formElements[0]).dom.to.equal(anotherField);
+
+        // Appending
+        const yetAnotherField = await fixture(html`
+          <${childTag}></${childTag}>
+        `);
+        el.appendChild(yetAnotherField);
+        expect(el.formElements.length).to.equal(6);
+        expect(el.formElements[5]).dom.to.equal(anotherField);
+      });
+
       // find a proper way to do this on polyfilled browsers
@@ -173,0 +211,0 @@ it.skip('fires event "form-element-register" with the child as ev.target', async () => {

test/lion-field.test.js

@@ -127,2 +127,13 @@ import {
 
+  // This is necessary for security, so that inputElements autocomplete can be set to 'off'
+  it('delegates autocomplete property', async () => {
+    const el = await fixture(html`<${tag}>${inputSlot}</${tag}>`);
+    expect(el.inputElement.autocomplete).to.equal('');
+    expect(el.inputElement.hasAttribute('autocomplete')).to.be.false;
+    el.autocomplete = 'off';
+    await el.updateComplete;
+    expect(el.inputElement.autocomplete).to.equal('off');
+    expect(el.inputElement.getAttribute('autocomplete')).to.equal('off');
+  });
+
   // TODO: find out if we could put all listeners on this.value (instead of this.inputElement.value)
@@ -129,0 +140,0 @@ // and make it act on this.value again

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

212866

increased by1.59%

Lines of code

3040

increased by2.32%

Dependency changes

• Updated@lion/validate@^0.2.39