@lion/field - npm Package Compare versions

Comparing version 0.11.4 to 0.12.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [0.12.0](https://github.com/ing-bank/lion/compare/@lion/field@0.11.4...@lion/field@0.12.0) (2020-03-25)
+
+
+### Bug Fixes
+
+* **field:** put submitted prop in interaction state mixin ([530cb31](https://github.com/ing-bank/lion/commit/530cb31089b4fced266880d15d63d124596d231b))
+
+
+### Features
+
+* **field:** align (pre)filled and empty, fix filled not working ([e397f8d](https://github.com/ing-bank/lion/commit/e397f8d68b44c2ccb6447a908a97ace6568738ad))
+
+
+
+
+
 ## [0.11.4](https://github.com/ing-bank/lion/compare/@lion/field@0.11.3...@lion/field@0.11.4) (2020-03-19)
@@ -8,0 +24,0 @@

package.json

 {
   "name": "@lion/field",
-  "version": "0.11.4",
+  "version": "0.12.0",
   "description": "Fields are the most fundamental building block of the Form System",
@@ -39,7 +39,7 @@ "author": "ing-bank",
   "dependencies": {
-    "@lion/core": "0.4.5",
-    "@lion/validate": "0.8.0"
+    "@lion/core": "0.5.0",
+    "@lion/validate": "0.9.0"
   },
   "devDependencies": {
-    "@lion/localize": "0.8.10",
+    "@lion/localize": "0.9.0",
     "@open-wc/demoing-storybook": "^1.10.4",
@@ -49,3 +49,3 @@ "@open-wc/testing": "^2.5.0",
   },
-  "gitHead": "f286e3ac28fe0b34284383344fda4dc8e9ea593d"
+  "gitHead": "29e1252560d3fda898f98c271a7b685d1e929035"
 }

src/FormControlMixin.js

@@ -1,2 +0,3 @@
-import { html, css, nothing, dedupeMixin, SlotMixin } from '@lion/core';
+import { css, dedupeMixin, html, nothing, SlotMixin } from '@lion/core';
+import { Unparseable } from '@lion/validate';
 import { FormRegisteringMixin } from './registration/FormRegisteringMixin.js';
@@ -395,2 +396,21 @@ import { getAriaElementsInRightDomOrder } from './utils/getAriaElementsInRightDomOrder.js';
 
+      _isEmpty(modelValue = this.modelValue) {
+        let value = modelValue;
+        if (this.modelValue instanceof Unparseable) {
+          value = this.modelValue.viewValue;
+        }
+
+        // Checks for empty platform types: Objects, Arrays, Dates
+        if (typeof value === 'object' && value !== null && !(value instanceof Date)) {
+          return !Object.keys(value).length;
+        }
+
+        // eslint-disable-next-line no-mixed-operators
+        // Checks for empty platform types: Numbers, Booleans
+        const isNumberValue = typeof value === 'number' && (value === 0 || Number.isNaN(value));
+        const isBooleanValue = typeof value === 'boolean' && value === false;
+
+        return !value && !isNumberValue && !isBooleanValue;
+      }
+
       // eslint-disable-next-line class-methods-use-this
@@ -397,0 +417,0 @@ _feedbackTemplate() {

src/InteractionStateMixin.js

 import { dedupeMixin } from '@lion/core';
-import { Unparseable } from '@lion/validate';
+import { FormControlMixin } from './FormControlMixin.js';
 
@@ -17,3 +17,3 @@ /**
     // eslint-disable-next-line no-unused-vars, no-shadow
-    class InteractionStateMixin extends superclass {
+    class InteractionStateMixin extends FormControlMixin(superclass) {
       static get properties() {
@@ -36,2 +36,9 @@ return {
           /**
+           * True when the modelValue is non-empty (see _isEmpty in FormControlMixin)
+           */
+          filled: {
+            type: Boolean,
+            reflect: true,
+          },
+          /**
            * True when user has left non-empty field or input is prefilled.
@@ -44,2 +51,9 @@ * The name must be seen from the point of view of the input field:
           },
+          /**
+           * True when user has attempted to submit the form, e.g. through a button
+           * of type="submit"
+           */
+          submitted: {
+            type: Boolean,
+          },
         };
@@ -54,2 +68,8 @@ }
 
+        if (name === 'modelValue') {
+          // We do this in _requestUpdate because we don't want to fire another re-render (e.g. when doing this in updated)
+          // Furthermore, we cannot do it on model-value-changed event because it isn't fired initially.
+          this.filled = !this._isEmpty();
+        }
+
         if (name === 'dirty' && this.dirty !== oldVal) {
@@ -60,19 +80,2 @@ this._onDirtyChanged();
 
-      static _isPrefilled(modelValue) {
-        let value = modelValue;
-        if (modelValue instanceof Unparseable) {
-          value = modelValue.viewValue;
-        }
-        // Checks for empty platform types: Objects, Arrays, Dates
-        if (typeof value === 'object' && value !== null && !(value instanceof Date)) {
-          return !!Object.keys(value).length;
-        }
-        // eslint-disable-next-line no-mixed-operators
-        // Checks for empty platform types: Numbers, Booleans
-        const isNumberValue = typeof value === 'number' && (value === 0 || Number.isNaN(value));
-        const isBooleanValue = typeof value === 'boolean' && value === false;
-
-        return !!value || isNumberValue || isBooleanValue;
-      }
-
       constructor() {
@@ -83,5 +86,5 @@ super();
         this.prefilled = false;
+        this.filled = false;
         this._leaveEvent = 'blur';
         this._valueChangedEvent = 'model-value-changed';
-
         this._iStateOnLeave = this._iStateOnLeave.bind(this);
@@ -120,3 +123,3 @@ this._iStateOnValueChange = this._iStateOnValueChange.bind(this);
         this.dirty = false;
-        this.prefilled = this.constructor._isPrefilled(this.modelValue);
+        this.prefilled = !this._isEmpty();
       }
@@ -128,7 +131,7 @@
        * When false, on next interaction, user will start with a clean state.
-       * @private
+       * @protected
        */
       _iStateOnLeave() {
         this.touched = true;
-        this.prefilled = this.constructor._isPrefilled(this.modelValue);
+        this.prefilled = !this._isEmpty();
       }
@@ -138,3 +141,3 @@
        * Sets dirty value and validates when already touched or invalid
-       * @private
+       * @protected
        */
@@ -151,3 +154,3 @@ _iStateOnValueChange() {
         this.dirty = false;
-        this.prefilled = this.constructor._isPrefilled(this.modelValue);
+        this.prefilled = !this._isEmpty();
       }
@@ -154,0 +157,0 @@

src/LionField.js

@@ -1,8 +0,8 @@
-import { SlotMixin, LitElement } from '@lion/core';
+import { LitElement, SlotMixin } from '@lion/core';
 import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
 import { ValidateMixin } from '@lion/validate';
+import { FocusMixin } from './FocusMixin.js';
+import { FormatMixin } from './FormatMixin.js';
 import { FormControlMixin } from './FormControlMixin.js';
 import { InteractionStateMixin } from './InteractionStateMixin.js'; // applies FocusMixin
-import { FormatMixin } from './FormatMixin.js';
-import { FocusMixin } from './FocusMixin.js';
 
@@ -83,3 +83,2 @@ /* eslint-disable wc/guard-super-call */
     }
-    this._onValueChanged({ value });
   }
@@ -111,3 +110,2 @@
     super.connectedCallback();
-
     this._onChange = this._onChange.bind(this);
@@ -183,12 +181,2 @@ this._inputNode.addEventListener('change', this._onChange);
 
-  _onValueChanged({ value }) {
-    if (super._onValueChanged) {
-      super._onValueChanged();
-    }
-    // For styling purposes, make it known the input field is not empty
-    if (this._inputNode) {
-      this[value ? 'setAttribute' : 'removeAttribute']('filled', '');
-    }
-  }
-
   /**
@@ -195,0 +183,0 @@ * Restores the cursor to its original position after updating the value.

test-suites/InteractionStateMixin.suite.js

@@ -0,12 +1,12 @@
+import { LitElement } from '@lion/core';
 import {
+  defineCE,
   expect,
   fixture,
-  unsafeStatic,
   html,
-  defineCE,
+  triggerBlurFor,
   triggerFocusFor,
-  triggerBlurFor,
+  unsafeStatic,
 } from '@open-wc/testing';
 import sinon from 'sinon';
-import { LitElement } from '@lion/core';
 import { InteractionStateMixin } from '../src/InteractionStateMixin.js';
@@ -34,5 +34,4 @@
               this._modelValue = v;
-              this.dispatchEvent(
-                new CustomEvent('model-value-changed', { bubbles: true, composed: true }),
-              );
+              this.dispatchEvent(new CustomEvent('model-value-changed', { bubbles: true }));
+              this.requestUpdate('modelValue');
             }
@@ -84,2 +83,13 @@
 
+    it('sets an attribute "filled" if the input has a non-empty modelValue', async () => {
+      const el = await fixture(html`<${tag} .modelValue=${'hello'}></${tag}>`);
+      expect(el.hasAttribute('filled')).to.equal(true);
+      el.modelValue = '';
+      await el.updateComplete;
+      expect(el.hasAttribute('filled')).to.equal(false);
+      el.modelValue = 'foo';
+      await el.updateComplete;
+      expect(el.hasAttribute('filled')).to.equal(true);
+    });
+
     it('fires "(touched|dirty)-state-changed" event when state changes', async () => {
@@ -86,0 +96,0 @@ const touchedSpy = sinon.spy();

test/lion-field.test.js

@@ -0,16 +1,15 @@
+import { unsafeHTML } from '@lion/core';
+import { localize } from '@lion/localize';
+import { localizeTearDown } from '@lion/localize/test-helpers.js';
+import { Required, Validator } from '@lion/validate';
 import {
+  aTimeout,
   expect,
   fixture,
   html,
+  triggerBlurFor,
+  triggerFocusFor,
   unsafeStatic,
-  triggerFocusFor,
-  triggerBlurFor,
-  aTimeout,
 } from '@open-wc/testing';
-import { unsafeHTML } from '@lion/core';
 import sinon from 'sinon';
-import { Validator, Required } from '@lion/validate';
-import { localize } from '@lion/localize';
-import { localizeTearDown } from '@lion/localize/test-helpers.js';
-
 import '../lion-field.js';
@@ -156,13 +155,2 @@
 
-  it('has an attribute filled if this.value is filled', async () => {
-    const el = await fixture(html`<${tag} value="filled">${inputSlot}</${tag}>`);
-    expect(el.hasAttribute('filled')).to.equal(true);
-    el.value = '';
-    await el.updateComplete;
-    expect(el.hasAttribute('filled')).to.equal(false);
-    el.value = 'bla';
-    await el.updateComplete;
-    expect(el.hasAttribute('filled')).to.equal(true);
-  });
-
   it('preserves the caret position on value change for native text fields (input|textarea)', async () => {
@@ -169,0 +157,0 @@ const el = await fixture(html`<${tag}>${inputSlot}</${tag}>`);

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

179412

increased by0.53%

Lines of code

3555

increased by0.28%

Dependency changes

• + Added@lion/core@0.5.0(transitive)

• + Added@lion/localize@0.9.0(transitive)

• + Added@lion/validate@0.9.0(transitive)

• + Added@open-wc/scoped-elements@1.3.7(transitive)

• - Removed@lion/core@0.4.5(transitive)

• - Removed@lion/localize@0.8.10(transitive)

• - Removed@lion/validate@0.8.0(transitive)

• - Removed@open-wc/scoped-elements@0.5.0(transitive)

• Updated@lion/core@0.5.0

• Updated@lion/validate@0.9.0