@muonic/muon 0.0.2-experimental-130-72b8fb9.0 → 0.0.2-experimental-133-7fc9e6e.0

package/components/form/src/form-component.js

@@ -47,12 +47,14 @@ export class Form extends MuonElement {
     this._nativeForm?.addEventListener('submit', this._submit);
     this._submitButton?.addEventListener('click', this._submit);
     this._nativeForm?.addEventListener('reset', this._reset);
+    this._resetButton?.addEventListener('click', this._reset);
   }
 
   __teardownEvents() {
     this._nativeForm?.removeEventListener('submit', this._submit);
     this._submitButton?.removeEventListener('click', this._submit);
     this._nativeForm?.removeEventListener('reset', this._reset);
+    this._resetButton?.removeEventListener('click', this._reset);
   }
 
   __checkForFormEl() {
@@ -71,6 +73,12 @@ export class Form extends MuonElement {
       !this._resetButton.loading
     ) {
       this._nativeForm.reset();
+      Array.from(this._nativeForm.elements).forEach((element) => {
+        const componentElement = this._findInputElement(element);
+        if (componentElement !== element) {
+          componentElement.reset?.();
+        }
+      });
     }
   }
 

package/components/form/story.js

@@ -17,12 +17,15 @@ export default {
 
 const innerDetail = (args) => staticHTML`
   <form>
+    ${InputterStories.Select(args.Title)}
     ${InputterStories.Text(args.Text)}
     ${InputterStories.Email(args.Email)}
 
-    <label for="user-id">User ID<label>
+    <label for="user-id">User ID</label>
     <input type="text" id="user-id" name="user-id" required/>
 
+    ${InputterStories.DateMask(args.DOB)}
+
     ${InputterStories.Checkbox(args.Checkbox)}
 
     <input type="reset" />
@@ -31,10 +34,16 @@ const innerDetail = (args) => staticHTML`
 
 export const Standard = (args) => details.template(args, innerDetail);
 Standard.args = {
+  Title: {
+    ...InputterStories.Select.args,
+    name: 'title',
+    label: 'Title'
+  },
   Text: {
     ...InputterStories.Text.args,
     name: 'username',
-    label: 'Name'
+    label: 'Name',
+    value: 'text'
   },
   Email: {
     ...InputterStories.Email.args,
@@ -48,6 +57,12 @@ Standard.args = {
       { label: 'Option B', value: 'b' }
     ]
   },
+  DOB: {
+    ...InputterStories.DateMask.args,
+    name: 'dob',
+    label: 'Date of birth',
+    validation: ['maxDate(\'031/12/2022\')']
+  },
   Submit: {
     ...SubmitCTA.args,
     type: 'submit',

package/components/inputter/story.js

@@ -223,7 +223,7 @@ Radio.args = {
 const selectTemplate = (args) => staticHTML`
   <label slot="label">${args.label}</label>
   <select name="${args.name}">
-  ${args.options?.map((option) => staticHTML`<option value="${option.value}">${option.label}</option>`)}
+  ${args.options?.map((option) => staticHTML`<option value="${option.value}" ${unsafeStatic(option.states?.join(' ') ?? '')}>${option.label}</option>`)}
   </select>
 `;
 
@@ -236,7 +236,7 @@ Select.args = {
   options: [
     { label: 'Please select', value: '' },
     { label: 'Value one', value: 'value-01' },
-    { label: 'Value two', value: 'value-02' },
+    { label: 'Value two', value: 'value-02', states: ['selected'] },
     { label: 'Value three', value: 'value-03' },
     { label: 'Value four', value: 'value-04' }
   ]

package/mixins/form-element-mixin.js

@@ -138,6 +138,9 @@ export const FormElementMixin = dedupeMixin((superClass) =>
       });
     }
 
+    reset() {
+      this.value = this._slottedValue; // get values from slotted html form elements
+    }
     /**
      * A method to sync the value property of the component with value of slotted input elements.
      *
@@ -204,7 +207,7 @@ export const FormElementMixin = dedupeMixin((superClass) =>
     }
 
     /**
-     * A method to get  slotted element value.
+     * A method to get slotted element value.
      *
      * @protected
      * @override

package/mixins/validation-mixin.js

@@ -76,6 +76,12 @@ export const ValidationMixin = dedupeMixin((superClass) =>
       return this.validate();
     }
 
+    reset() {
+      super.reset();
+      this._pristine = true;
+      this._validationState = [];
+    }
+
     /**
      * A method to validate the value of the form element.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-130-72b8fb9.0",
+  "version": "0.0.2-experimental-133-7fc9e6e.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/tests/components/form/__snapshots__/form.test.snap.js

@@ -107,3 +107,9 @@ snapshots["form form submitting with inputter [validate]"] =
 `;
 /* end snapshot form form submitting with inputter [validate] */
 
+snapshots["form form cta reset with inputter"] = 
+`<slot>
+</slot>
+`;
+/* end snapshot form form cta reset with inputter */
+

package/tests/components/form/form.test.js

@@ -305,6 +305,32 @@ describe('form', () => {
 
     resetBtn.click();
 
-    expect(input.value).to.equal('', 'no reset input value');
+    expect(input.value).to.equal('foo', 'no reset input value');
+  });
+
+  it('form cta reset with inputter', async () => {
+    const submitSpy = sinon.spy();
+    const el = await fixture(html`
+      <${tag} @submit=${submitSpy}>
+        <form>
+          <${inputterTag} validation='["isRequired"]' value='test'>
+            <label slot="label" for="foo">Bar</label>
+            <input id="foo" type="text" />
+          </${inputterTag}>
+          <${ctaTag} type="reset">Reset</${ctaTag}>
+        </form>
+      </${tag}>
+    `);
+    const input = el.querySelector(inputterTagName);
+    const resetBtn = el.querySelector(ctaTagName);
+
+    await defaultChecks(el);
+    expect(input.value).to.equal('test', 'default input value');
+
+    input.value = '';
+    expect(input.value).to.equal('', 'changed input value');
+
+    resetBtn.click();
+    expect(input.value).to.equal('test', 'no reset input value');
   });
 });