@lion/form-core - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

CHANGELOG.md

 # Change Log
 
+## 0.4.2
+
+### Patch Changes
+
+- dd021e43: Groups need a valid formattedValue representing the value of it's form elements
+- 07c598fd: Form should be able to access formattedValue of children
+
 ## 0.4.1
@@ -4,0 +11,0 @@

package.json

 {
   "name": "@lion/form-core",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Form-core contains all essential building blocks for creating form fields and fieldsets",
@@ -5,0 +5,0 @@ "license": "MIT",

src/choice-group/ChoiceGroupMixin.js

@@ -70,2 +70,21 @@ import { dedupeMixin } from '@lion/core';
 
+      get formattedValue() {
+        const elems = this._getCheckedElements();
+        if (this.multipleChoice) {
+          return elems.map(el => el.formattedValue);
+        }
+        return elems[0] ? elems[0].formattedValue : '';
+      }
+
+      set formattedValue(value) {
+        if (this.__isInitialFormattedValue) {
+          this.__isInitialFormattedValue = false;
+          this.registrationComplete.then(() => {
+            this._setCheckedElements(value, (el, val) => el.formattedValue === val);
+          });
+        } else {
+          this._setCheckedElements(value, (el, val) => el.formattedValue === val);
+        }
+      }
+
       constructor() {
@@ -78,2 +97,3 @@ super();
         this.__isInitialSerializedValue = true;
+        this.__isInitialFormattedValue = true;
         this.registrationComplete = new Promise((resolve, reject) => {
@@ -104,2 +124,3 @@ this.__resolveRegistrationComplete = resolve;
           this.__isInitialSerializedValue = false;
+          this.__isInitialFormattedValue = false;
         });
@@ -140,5 +161,9 @@ }
       _getFromAllFormElements(property, filterCondition = () => true) {
-        // For modelValue and serializedValue, an exception should be made,
+        // For modelValue, serializedValue and formattedValue, an exception should be made,
         // The reset can be requested from children
-        if (property === 'modelValue' || property === 'serializedValue') {
+        if (
+          property === 'modelValue' ||
+          property === 'serializedValue' ||
+          property === 'formattedValue'
+        ) {
           return this[property];
@@ -145,0 +170,0 @@ }

src/validate/ValidateMixin.js

@@ -191,3 +191,3 @@ /* eslint-disable class-methods-use-this, camelcase, no-param-reassign, max-classes-per-file */
         super.disconnectedCallback();
-        localize.addEventListener('localeChanged', this._updateFeedbackComponent);
+        localize.removeEventListener('localeChanged', this._updateFeedbackComponent);
       }
@@ -194,0 +194,0 @@

test/choice-group/ChoiceGroupMixin.test.js

@@ -41,2 +41,17 @@ import { html, LitElement } from '@lion/core';
 
+  it('has a single formattedValue representing the currently checked radio value', async () => {
+    const el = await fixture(html`
+      <choice-group name="gender">
+        <choice-group-input .choiceValue=${'male'}></choice-group-input>
+        <choice-group-input .choiceValue=${'female'} checked></choice-group-input>
+        <choice-group-input .choiceValue=${'other'}></choice-group-input>
+      </choice-group>
+    `);
+    expect(el.formattedValue).to.equal('female');
+    el.formElements[0].checked = true;
+    expect(el.formattedValue).to.equal('male');
+    el.formElements[2].checked = true;
+    expect(el.formattedValue).to.equal('other');
+  });
+
   it('throws if a child element without a modelValue like { value: "foo", checked: false } tries to register', async () => {
@@ -125,2 +140,15 @@ const el = await fixture(html`
 
+  it('can set initial formattedValue on creation', async () => {
+    const el = await fixture(html`
+      <choice-group name="gender" .formattedValue=${'other'}>
+        <choice-group-input .choiceValue=${'male'}></choice-group-input>
+        <choice-group-input .choiceValue=${'female'}></choice-group-input>
+        <choice-group-input .choiceValue=${'other'}></choice-group-input>
+      </choice-group>
+    `);
+
+    expect(el.formattedValue).to.equal('other');
+    expect(el.formElements[2].checked).to.be.true;
+  });
+
   it('can handle complex data via choiceValue', async () => {
@@ -270,2 +298,34 @@ const date = new Date(2018, 11, 24, 10, 33, 30, 0);
 
+    it('has a single serializedValue representing all currently checked values', async () => {
+      const el = await fixture(html`
+        <choice-group-multiple name="gender[]">
+          <choice-group-input .choiceValue=${'male'}></choice-group-input>
+          <choice-group-input .choiceValue=${'female'} checked></choice-group-input>
+          <choice-group-input .choiceValue=${'other'}></choice-group-input>
+        </choice-group-multiple>
+      `);
+
+      expect(el.serializedValue).to.eql(['female']);
+      el.formElements[0].checked = true;
+      expect(el.serializedValue).to.eql(['male', 'female']);
+      el.formElements[2].checked = true;
+      expect(el.serializedValue).to.eql(['male', 'female', 'other']);
+    });
+
+    it('has a single formattedValue representing all currently checked values', async () => {
+      const el = await fixture(html`
+        <choice-group-multiple name="gender[]">
+          <choice-group-input .choiceValue=${'male'}></choice-group-input>
+          <choice-group-input .choiceValue=${'female'} checked></choice-group-input>
+          <choice-group-input .choiceValue=${'other'}></choice-group-input>
+        </choice-group-multiple>
+      `);
+
+      expect(el.formattedValue).to.eql(['female']);
+      el.formElements[0].checked = true;
+      expect(el.formattedValue).to.eql(['male', 'female']);
+      el.formElements[2].checked = true;
+      expect(el.formattedValue).to.eql(['male', 'female', 'other']);
+    });
+
     it('can check multiple checkboxes by setting the modelValue', async () => {
@@ -318,3 +378,2 @@ const el = await fixture(html`
 
-      await el.updateComplete;
       expect(el.serializedValue).to.eql({
@@ -321,0 +380,0 @@ gender: 'female',

No alert changes

Improved metrics

Total package byte prevSize

280542

increased by1.31%

Lines of code

6798

increased by1.12%

No dependency changes