@lion/form-core - npm Package Compare versions

Comparing version 0.8.5 to 0.9.0

CHANGELOG.md

 # Change Log
 
+## 0.9.0
+
+### Minor Changes
+
+- f3e54c56: Publish documentation with a format for Rocket
+- 5db622e9: BREAKING: Align exports fields. This means no more wildcards, meaning you always import with bare import specifiers, extensionless. Import components where customElements.define side effect is executed by importing from '@lion/package/define'. For multi-component packages this defines all components (e.g. radio-group + radio). If you want to only import a single one, do '@lion/radio-group/define-radio' for example for just lion-radio.
+
+### Patch Changes
+
+- af90b20e: Only show success feedback if the user is recovering from a shown error/warning.
+- Updated dependencies [f3e54c56]
+- Updated dependencies [5db622e9]
+  - @lion/core@0.15.0
+  - @lion/localize@0.17.0
+
 ## 0.8.5
@@ -4,0 +19,0 @@

package.json

 {
   "name": "@lion/form-core",
-  "version": "0.8.5",
+  "version": "0.9.0",
   "description": "Form-core contains all essential building blocks for creating form fields and fieldsets",
@@ -27,10 +27,12 @@ "license": "MIT",
   "scripts": {
-    "custom-elements-manifest": "custom-elements-manifest analyze --litelement --exclude 'docs/**/*' 'test-helpers/**/*'",
+    "custom-elements-manifest": "custom-elements-manifest analyze --litelement --exclude \"docs/**/*\" \"test-helpers/**/*\"",
     "debug": "cd ../../ && npm run debug -- --group form-core",
     "debug:firefox": "cd ../../ && npm run debug:firefox -- --group form-core",
     "debug:webkit": "cd ../../ && npm run debug:webkit -- --group form-core",
-    "prepublishOnly": "../../scripts/npm-prepublish.js && npm run custom-elements-manifest",
+    "publish-docs": "node ../../packages-node/publish-docs/src/cli.js --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../",
+    "prepublishOnly": "npm run publish-docs && npm run custom-elements-manifest",
     "test": "cd ../../ && npm run test:browser -- --group form-core"
   },
   "sideEffects": [
+    "define.js",
     "lion-field.js",
@@ -40,4 +42,4 @@ "lion-validation-feedback.js"
   "dependencies": {
-    "@lion/core": "0.14.1",
-    "@lion/localize": "0.16.1"
+    "@lion/core": "0.15.0",
+    "@lion/localize": "0.17.0"
   },
@@ -55,7 +57,9 @@ "keywords": [
     ".": "./index.js",
-    "./test-helpers/*": "./test-helpers/*",
-    "./test-suites/*": "./test-suites/*",
-    "./lion-field": "./lion-field.js",
-    "./lion-validation-feedback": "./lion-validation-feedback.js"
+    "./test-helpers": "./test-helpers/index.js",
+    "./test-suites": "./test-suites/index.js",
+    "./define": "./define.js",
+    "./define-field": "./lion-field.js",
+    "./define-validation-feedback": "./lion-validation-feedback.js",
+    "./docs/": "./docs/"
   }
 }

README.md

@@ -1,61 +0,9 @@
-[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+# Systems >> Form >> Overview ||10
 
-# Form Fundaments
+The Form System allows you to create complex forms with various validations in an easy way.
 
-```js script
-export default {
-  title: 'Forms/Field/Overview',
-};
-```
+## Features
 
-`Form control`s are the most fundamental building block of the Forms. They are the basis of
-both `field`s and `fieldset`s, and the `form` itself.
-
-## Fields
-
-Fields are the actual form controls the end user interacts with.
-They extend the `Field` class, which on its turn uses the `FormControlMixin`.
-Fields provide a normalized, predictable API for platform components and custom made form controls.
-On top of this, they feature:
-
-- data synchronization with models
-- formatting of view values
-- advanced validation possibilities
-- creation of advanced user interaction scenarios via `interaction states`
-- provision of labels and help texts in an easy, declarative manner
-- better focus management
-- accessibility out of the box
-- advanced styling possibilities: map your own Design System to the internal HTML structure
-
-### Platform fields (wrappers)
-
-- [LionInput](?path=/docs/forms-input--main), a wrapper for `<input>`
-- [LionTextarea](?path=/docs/forms-textarea--main), a wrapper for `<textarea>`
-- [LionSelect](?path=/docs/forms-select--main), a wrapper for `<select>`
-- [LionRadio](?path=/docs/forms-radio-group--main), a wrapper for `<input type="radio">`
-- [LionCheckbox](?path=/docs/forms-checkbox-group--main), a wrapper for `<input type="checkbox">`
-
-### Custom fields (wrappers)
-
-Whenever a native form control doesn't exist or is not sufficient, a [custom form field](?path=/docs/forms-field-custom-fields-tutorial--page) should be created. One could think of components like:
-
-- slider
-- combobox
-- autocomplete
-- etc...
-
-## Fieldsets
-
-Fieldsets are groups of fields. They can be considered fields on their own as well, since they
-partly share the normalized api via `FormControlMixin`.
-Fieldsets are the basis for:
-
-- [LionFieldset](?path=/docs/forms-fieldset-overview--main)
-- [LionForm](?path=/docs/forms-form-overview--main)
-- [LionRadioGroup](?path=/docs/forms-radio-group--main)
-- [LionCheckboxGroup](?path=/docs/forms-checkbox-group--main)
-
-## Other Resources
-
-- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser#formatting-and-parsing)
-- [Custom Fields](?path=/docs/forms-system-creating-a-custom-field--page)
+- Built in [validate](https://github.com/ing-bank/lion/blob/6f2b6f940a0875091f1d940f45f0cd32dffce9ac/docs/docs/systems/form/validate.md) for error/warning/info/success
+- Formatting of values
+- Accessible

src/validate/ResultValidator.d.ts

@@ -15,8 +15,10 @@ /**
      * @param {Validator[]} context.prevValidationResult
+     * @param {Validator[]} context.prevShownValidationResult
      * @param {Validator[]} [context.validators]
      * @returns {boolean}
      */
-    executeOnResults({ regularValidationResult, prevValidationResult, validators }: {
+    executeOnResults({ regularValidationResult, prevValidationResult, prevShownValidationResult, validators, }: {
         regularValidationResult: Validator[];
         prevValidationResult: Validator[];
+        prevShownValidationResult: Validator[];
         validators: Validator[];
@@ -23,0 +25,0 @@ }): boolean;

src/validate/ResultValidator.js

@@ -14,9 +14,17 @@ import { Validator } from './Validator.js';
    * @param {Validator[]} context.prevValidationResult
+   * @param {Validator[]} context.prevShownValidationResult
    * @param {Validator[]} [context.validators]
    * @returns {boolean}
    */
-  // eslint-disable-next-line no-unused-vars, class-methods-use-this
-  executeOnResults({ regularValidationResult, prevValidationResult, validators }) {
+  /* eslint-disable no-unused-vars */
+  // eslint-disable-next-line class-methods-use-this
+  executeOnResults({
+    regularValidationResult,
+    prevValidationResult,
+    prevShownValidationResult,
+    validators,
+  }) {
+    /* eslint-enable no-unused-vars */
     return true;
   }
 }

src/validate/resultValidators/DefaultSuccess.js

@@ -21,12 +21,14 @@ import { ResultValidator } from '../ResultValidator.js';
    * @param {Validator[]} context.prevValidationResult
+   * @param {Validator[]} context.prevShownValidationResult
    * @returns {boolean}
    */
   // eslint-disable-next-line class-methods-use-this
-  executeOnResults({ regularValidationResult, prevValidationResult }) {
+  executeOnResults({ regularValidationResult, prevShownValidationResult }) {
     const errorOrWarning = /** @param {Validator} v */ v =>
       v.type === 'error' || v.type === 'warning';
     const hasErrorOrWarning = !!regularValidationResult.filter(errorOrWarning).length;
-    const prevHadErrorOrWarning = !!prevValidationResult.filter(errorOrWarning).length;
-    return !hasErrorOrWarning && prevHadErrorOrWarning;
+    const hasShownErrorOrWarning = !!prevShownValidationResult.filter(errorOrWarning).length;
+
+    return !hasErrorOrWarning && hasShownErrorOrWarning;
   }
 }

src/validate/ValidateMixin.js

@@ -166,2 +166,4 @@ /* eslint-disable class-methods-use-this, camelcase, no-param-reassign, max-classes-per-file */
       this.__prevValidationResult = [];
+      /** @type {Validator[]} */
+      this.__prevShownValidationResult = [];
 
@@ -283,3 +285,3 @@ this.__onValidatorUpdated = this.__onValidatorUpdated.bind(this);
 
-      this.__storePrevResult();
+      this.__prevValidationResult = this.__validationResult;
       if (clearCurrentResult) {
@@ -294,6 +296,2 @@ // Clear ('invalidate') all pending and existing validation results.
 
-    __storePrevResult() {
-      this.__prevValidationResult = this.__validationResult;
-    }
-
     /**
@@ -408,2 +406,3 @@ * @desc step A1-3 + B (as explained in 'validate')
           prevValidationResult: this.__prevValidationResult,
+          prevShownValidationResult: this.__prevShownValidationResult,
         }),
@@ -589,4 +588,8 @@ );
           });
+
+          if (this.__prioritizedResult.length > 0) {
+            this.__prevShownValidationResult = this.__prioritizedResult;
+          }
+
           const messageMap = await this.__getFeedbackMessages(this.__prioritizedResult);
-
           _feedbackNode.feedbackData = messageMap.length ? messageMap : [];
@@ -644,6 +647,11 @@ });
         .constructor);
+
       // Necessary typecast because types aren't smart enough to understand that we filter out undefined
-      this.shouldShowFeedbackFor = /** @type {string[]} */ (ctor.validationTypes
+      const newShouldShowFeedbackFor = /** @type {string[]} */ (ctor.validationTypes
         .map(type => (this._showFeedbackConditionFor(type) ? type : undefined))
         .filter(_ => !!_));
+
+      if (JSON.stringify(this.shouldShowFeedbackFor) !== JSON.stringify(newShouldShowFeedbackFor)) {
+        this.shouldShowFeedbackFor = newShouldShowFeedbackFor;
+      }
     }
@@ -650,0 +658,0 @@

test/choice-group/ChoiceGroupMixin.test.js

@@ -1,3 +0,3 @@
-import { runChoiceGroupMixinSuite } from '../../test-suites/choice-group/ChoiceGroupMixin.suite.js';
+import { runChoiceGroupMixinSuite } from '@lion/form-core/test-suites';
 
 runChoiceGroupMixinSuite();

test/lion-field.test.js

@@ -14,3 +14,3 @@ import { unsafeHTML } from '@lion/core';
 import sinon from 'sinon';
-import '../lion-field.js';
+import '@lion/form-core/define-field';
 
@@ -17,0 +17,0 @@ /**

test/validate/lion-validation-feedback.test.js

 /* eslint-disable no-unused-vars, no-param-reassign */
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import '../../lion-validation-feedback.js';
+import '@lion/form-core/define-validation-feedback';
 import { AlwaysInvalid, AlwaysValid } from '../../test-helpers.js';
@@ -6,0 +6,0 @@

test/validate/ResultValidator.test.js

 import { expect } from '@open-wc/testing';
 import { ResultValidator } from '../../src/validate/ResultValidator.js';
+import { DefaultSuccess } from '../../src/validate/resultValidators/DefaultSuccess.js';
 import { Required } from '../../src/validate/validators/Required.js';
@@ -19,7 +20,12 @@ import { MinLength } from '../../src/validate/validators/StringValidators.js';
        * @param {Validator[]} context.prevValidationResult
+       * @param {Validator[]} context.prevShownValidationResult
        * @returns {boolean}
        */
-      executeOnResults({ regularValidationResult, prevValidationResult }) {
-        const hasSuccess = regularValidationResult.length && !prevValidationResult.length;
-        return !!hasSuccess;
+      executeOnResults({ regularValidationResult, prevShownValidationResult }) {
+        const errorOrWarning = /** @param {Validator} v */ v =>
+          v.type === 'error' || v.type === 'warning';
+        const hasErrorOrWarning = !!regularValidationResult.filter(errorOrWarning).length;
+        const hasShownErrorOrWarning = !!prevShownValidationResult.filter(errorOrWarning).length;
+
+        return !hasErrorOrWarning && hasShownErrorOrWarning;
       }
@@ -31,5 +37,13 @@ }
         prevValidationResult: [],
+        prevShownValidationResult: [],
       }),
+    ).to.be.false;
+    expect(
+      new MyResultValidator().executeOnResults({
+        regularValidationResult: [new DefaultSuccess()],
+        prevValidationResult: [new Required()],
+        prevShownValidationResult: [new Required()],
+      }),
     ).to.be.true;
   });
 });

types/validate/ValidateMixinTypes.d.ts

@@ -41,2 +41,3 @@ import { LitElement } from '@lion/core';
   __prevValidationResult: Validator[];
+  __prevShownValidationResult: Validator[];
 
@@ -43,0 +44,0 @@ connectedCallback(): void;

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

Lines of code

18977

increased by1.21%

Worsened metrics

Total package byte prevSize

632459

decreased by-0.86%

Number of lines in readme file

10

decreased by-83.87%

Dependency changes

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

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

• + Addedsingleton-manager@1.4.0(transitive)

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

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

• - Removedsingleton-manager@1.3.0(transitive)

• Updated@lion/core@0.15.0

• Updated@lion/localize@0.17.0