@lion/form-core - npm Package Compare versions

Comparing version 0.15.0 to 0.15.1

CHANGELOG.md

 # Change Log
 
+## 0.15.1
+
+### Patch Changes
+
+- 04874352: Add a separate protected method for the filter function when filtering out fields for serialized|model|formattedValue in form groups. This makes it easier to specify when you to filter out fields, e.g. disabled fields for serializedValue of a parent form group.
+
 ## 0.15.0
@@ -4,0 +10,0 @@

docs/overview.md

@@ -7,4 +7,4 @@ # Systems >> Form >> Overview ||10
 
-- Built in [validate](https://github.com/ing-bank/lion/blob/e03f8d2cc31563d46f910074d562ad68a2e41dfd/docs/docs/systems/form/validate.md) for error/warning/info/success
+- Built in [validate](https://github.com/ing-bank/lion/blob/67888873e0fc524ed1bf6aaea0df1f2ea8a479a5/docs/docs/systems/form/validate.md) for error/warning/info/success
 - Formatting of values
 - Accessible

package.json

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

README.md

@@ -7,4 +7,4 @@ # Systems >> Form >> Overview ||10
 
-- Built in [validate](https://github.com/ing-bank/lion/blob/e03f8d2cc31563d46f910074d562ad68a2e41dfd/docs/docs/systems/form/validate.md) for error/warning/info/success
+- Built in [validate](https://github.com/ing-bank/lion/blob/67888873e0fc524ed1bf6aaea0df1f2ea8a479a5/docs/docs/systems/form/validate.md) for error/warning/info/success
 - Formatting of values
 - Accessible

src/choice-group/ChoiceGroupMixin.d.ts

@@ -8,3 +8,6 @@ export type ChoiceGroupMixin = typeof import("../../types/choice-group/ChoiceGroupMixinTypes.js").ChoiceGroupImplementation;
     checked?: boolean | undefined;
+    disabled: boolean;
+    hasFeedbackFor: string[];
+    makeRequestToBeDisabled: Function;
 };
 export type ChoiceInputHost = import("../../types/choice-group/ChoiceInputMixinTypes.js").ChoiceInputHost;

src/choice-group/ChoiceGroupMixin.js

@@ -9,3 +9,3 @@ import { dedupeMixin } from '@lion/core';
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup
- * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {import('../../types/form-group/FormGroupMixinTypes').FormControl} FormControl
  * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost
@@ -211,7 +211,35 @@ */
     /**
-     * @override
+     * A filter function which will exclude a form field when returning false
+     * By default, exclude form fields which are disabled
+     *
+     * The type is be passed as well for more fine grained control, e.g.
+     * distinguish the filter when fetching modelValue versus serializedValue
+     *
+     * @param {FormControl} el
+     * @param {string} type
+     * @returns {boolean}
+     */
+    // eslint-disable-next-line class-methods-use-this, no-unused-vars
+    _getFromAllFormElementsFilter(el, type) {
+      return true;
+    }
+
+    /**
+     * Implicit :( @override for FormGroupMixin, as choice fields "fieldsets"
+     * will always implement both mixins
+     *
+     * TODO: Consider making this explicit by extracting this method to its own mixin and
+     * using it in both FormGroupMixin and ChoiceGroupMixin, then override it here
+     * This also makes it more DRY as we have same method with similar implementation
+     * in FormGroupMixin. I (@jorenbroekema) think the abstraction is worth it here..
+     *
      * @param {string} property
+     * @param {(el: FormControl, property?: string) => boolean} [filterFn]
+     * @returns {{[name:string]: any}}
      * @protected
      */
-    _getFromAllFormElements(property, filterCondition = () => true) {
+    _getFromAllFormElements(property, filterFn) {
+      // Prioritizes imperatively passed filter function over the protected method
+      const _filterFn = filterFn || this._getFromAllFormElementsFilter;
+
       // For modelValue, serializedValue and formattedValue, an exception should be made,
@@ -226,3 +254,3 @@ // The reset can be requested from children
       }
-      return this.formElements.filter(filterCondition).map(el => el.property);
+      return this.formElements.filter(el => _filterFn(el, property)).map(el => el.property);
     }
@@ -229,0 +257,0 @@

src/form-group/FormGroupMixin.d.ts

 export type FormGroupMixin = typeof import("../../types/form-group/FormGroupMixinTypes.js").FormGroupImplementation;
 export const FormGroupMixin: typeof import("../../types/form-group/FormGroupMixinTypes.js").FormGroupImplementation;
 export type FormGroupHost = import("../../types/form-group/FormGroupMixinTypes.js").FormGroupHost;
-export type FormControlHost = import("../../types/FormControlMixinTypes.js").FormControlHost;
-export type FormRegisteringHost = import("../../types/registration/FormRegisteringMixinTypes.js").FormRegisteringHost;
-export type ElementWithParentFormGroup = import("../../types/registration/FormRegistrarMixinTypes.js").ElementWithParentFormGroup;
 export type FormControl = import("../../types/FormControlMixinTypes.js").FormControlHost & HTMLElement & {
@@ -14,1 +11,4 @@ _parentFormGroup?: HTMLElement | undefined;
 };
+export type FormControlHost = import("../../types/FormControlMixinTypes.js").FormControlHost;
+export type FormRegisteringHost = import("../../types/registration/FormRegisteringMixinTypes.js").FormRegisteringHost;
+export type ElementWithParentFormGroup = import("../../types/registration/FormRegistrarMixinTypes.js").ElementWithParentFormGroup;

src/form-group/FormGroupMixin.js

@@ -12,6 +12,6 @@ import { dedupeMixin, html, SlotMixin, DisabledMixin } from '@lion/core';
  * @typedef {import('../../types/form-group/FormGroupMixinTypes').FormGroupHost} FormGroupHost
+ * @typedef {import('../../types/form-group/FormGroupMixinTypes').FormControl} FormControl
  * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost
  * @typedef {import('../../types/registration/FormRegisteringMixinTypes').FormRegisteringHost} FormRegisteringHost
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup
- * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?: HTMLElement, checked?: boolean, disabled: boolean, hasFeedbackFor: string[], makeRequestToBeDisabled: Function }} FormControl
  */
@@ -322,8 +322,29 @@
     /**
+     * A filter function which will exclude a form field when returning false
+     * By default, exclude form fields which are disabled
+     *
+     * The type is be passed as well for more fine grained control, e.g.
+     * distinguish the filter when fetching modelValue versus serializedValue
+     *
+     * @param {FormControl} el
+     * @param {string} type
+     * @returns {boolean}
+     */
+    // eslint-disable-next-line class-methods-use-this, no-unused-vars
+    _getFromAllFormElementsFilter(el, type) {
+      return !el.disabled;
+    }
+
+    /**
      * Gets a keyed be name object for requested property (like modelValue/serializedValue)
      * @param {string} property
+     * @param {(el: FormControl, property?: string) => boolean} [filterFn]
      * @returns {{[name:string]: any}}
      */
-    _getFromAllFormElements(property, filterFn = (/** @type {FormControl} */ el) => !el.disabled) {
+    _getFromAllFormElements(property, filterFn) {
       const result = {};
+
+      // Prioritizes imperatively passed filter function over the protected method
+      const _filterFn = filterFn || this._getFromAllFormElementsFilter;
+
       // @ts-ignore [allow-protected]: allow Form internals to access this protected method
@@ -333,6 +354,6 @@ this.formElements._keys().forEach(name => {
         if (elem instanceof FormControlsCollection) {
-          result[name] = elem.filter(el => filterFn(el)).map(el => el[property]);
-        } else if (filterFn(elem)) {
+          result[name] = elem.filter(el => _filterFn(el, property)).map(el => el[property]);
+        } else if (_filterFn(elem, property)) {
           if (typeof elem._getFromAllFormElements === 'function') {
-            result[name] = elem._getFromAllFormElements(property, filterFn);
+            result[name] = elem._getFromAllFormElements(property);
           } else {
@@ -339,0 +360,0 @@ result[name] = elem[property];

types/choice-group/ChoiceGroupMixinTypes.d.ts

 import { Constructor } from '@open-wc/dedupe-mixin';
 import { LitElement } from '@lion/core';
 import { FormControlHost } from '../FormControlMixinTypes';
+import { FormControl } from '../form-group/FormGroupMixinTypes';
 import { FormRegistrarHost } from '../registration/FormRegistrarMixinTypes';
@@ -20,3 +21,7 @@ import { InteractionStateHost } from '../InteractionStateMixinTypes';
   protected _triggerInitialModelValueChangedEvent(): void;
-  protected _getFromAllFormElements(property: string, filterCondition: Function): void;
+  protected _getFromAllFormElementsFilter(el: FormControl, type: string): boolean;
+  protected _getFromAllFormElements(
+    property: string,
+    filterFn?: (el: FormControl, property?: string) => boolean,
+  ): void;
   protected _throwWhenInvalidChildModelValue(child: FormControlHost): void;
@@ -23,0 +28,0 @@ protected _isEmpty(): void;

types/form-group/FormGroupMixinTypes.d.ts

@@ -9,2 +9,11 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 
+export declare type FormControl = FormControlHost &
+  HTMLElement & {
+    _parentFormGroup?: HTMLElement;
+    checked?: boolean;
+    disabled: boolean;
+    hasFeedbackFor: string[];
+    makeRequestToBeDisabled: Function;
+  };
+
 export declare class FormGroupHost {
@@ -88,6 +97,15 @@ /**
     property: string,
-    filterFn: (el: FormControlHost) => boolean,
+    filterFn?: (el: FormControl, property?: string) => boolean,
   ): { [name: string]: any };
 
   /**
+   * A filter function which will exclude a form field when returning false
+   * By default, exclude form fields which are disabled
+   *
+   * The type is be passed as well for more fine grained control, e.g.
+   * distinguish the filter when fetching modelValue versus serializedValue
+   */
+  protected _getFromAllFormElementsFilter(el: FormControl, type: string): boolean;
+
+  /**
    * Allows to set formElements values via a keyed object structure
@@ -94,0 +112,0 @@ */

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

716344

increased by1.04%

Lines of code

20791

increased by0.87%

No dependency changes