saasufy-components 10.1.0 → 10.2.0

package/README.md

@@ -457,7 +457,7 @@ This component is a simplified version of the `collection-adder-form` component
 - `autocapitalize`: Can be set to `off` to disable auto-capitalization of the first input character on mobile devices.
 - `autocorrect`: Can be set to `off` to disable auto-correction of input on mobile devices.
 - `show-field-errors`: If this attribute exists on the element, then granular error messages will be shown above each corresponding input element instead of a single form-level error message.
-- `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
+- `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form. It can optionally be set to a comma-separated list of field names such as `trim-spaces="name,brand"`; in this case, only the values of the listed fields will be trimmed and all others will be left as they are. If the attribute has no value, then all input values will be trimmed.
 - `reset-status-on-submit`: If this attribute exists, then the current message and any field errors will be cleared as soon as the form is submitted, instead of when the outcome of the submit is known. By default, the previous status is kept on screen until the insert either succeeds or fails and is then replaced within a single frame; this avoids the form flickering (shrinking and then growing again) when the same error occurs on consecutive submits.
 - `consumers`: This allows you to connect this `collection-adder` to other elements on your page. It should be used in conjunction with the `provider-template` attribute. The `consumers` attribute takes a list of selectors with optional attributes to target in the format `element-selector:attribute-name`. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the output of the `collection-adder` component on submit. You can specify multiple selectors separated by commas such as `.my-input,my-div`; in this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
 - `success-consumers`: Same as the `consumers` attribute but the target elements are only updated if insertion was a success.
@@ -498,7 +498,7 @@ This component is similar to the `collection-adder` component except that it req
 - `computable-model-values`: If this attribute exists on the element, then the `model-values` attribute will be re-computed before the form is submitted; this may be useful if the `model-values` attribute contains expressions which need to be updated before submitting.
 - `success-message`: A message to show the user if the resource has been successfully added to the collection after submitting the form.
 - `show-field-errors`: If this attribute exists on the element, then granular error messages will be shown above each corresponding input element instead of a single form-level error message.
-- `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
+- `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form. It can optionally be set to a comma-separated list of input names such as `trim-spaces="name,brand"`; in this case, only the values of the listed inputs will be trimmed and all others will be left as they are. If the attribute has no value, then all input values will be trimmed.
 - `auto-reset-hidden-inputs`: If this attribute exists, then `hidden` input elements which are inside the `collection-adder-form` will be cleared along with other input fields. By default, `hidden` input elements are not cleared when the form is reset.
 - `reset-status-on-submit`: If this attribute exists, then the current message and any field errors will be cleared as soon as the form is submitted, instead of when the outcome of the submit is known. By default, the previous status is kept on screen until the insert either succeeds or fails and is then replaced within a single frame; this avoids the form flickering (shrinking and then growing again) when the same error occurs on consecutive submits.
 - `disable-submit-on-enter-key`: If this attribute exists, then the form will not submit when the enter key is pressed.
@@ -511,7 +511,7 @@ This component is similar to the `collection-adder` component except that it req
 **Attributes of slotted input, select, textarea... elements**
 
 - `name` (required): This must correspond to a field name on the model specified via the `collection-type` attribute of the `collection-adder-form`.
-- `output-type`: An optional type to cast the value of the input element into when the form is submitted.
+- `output-type`: An optional type to cast the value of the input element into when the form is submitted; supported types are `string` (default), `number` and `boolean`. This is especially useful for `select` elements as their values are always strings by default; for example `<select name="duration" output-type="number">` will submit the number `30` instead of the string `'30'`. If not specified, the value is cast based on the element's own type.
 
 ### collection-deleter
 

package/collection-adder-form.js

@@ -59,7 +59,15 @@ class CollectionAdderForm extends SocketConsumer {
       this.clearStatus();
     }
 
+    // The trim-spaces attribute can either be empty (in which case spaces are
+    // trimmed from all input values) or it can hold a comma-separated list of
+    // input names to restrict trimming to those specific inputs.
     let trimSpaces = this.hasAttribute('trim-spaces');
+    let trimSpacesInputNames = trimSpaces ?
+      (this.getAttribute('trim-spaces') || '')
+        .split(',')
+        .map(inputName => inputName.trim())
+        .filter(inputName => inputName) : [];
 
     let inputElements = this.getAllInputElements();
     let outputValue;
@@ -92,10 +100,8 @@ class CollectionAdderForm extends SocketConsumer {
                 } else {
                   inputType = input.type;
                 }
-                let Type = getTypeCastFunction(
-                  inputType === 'hidden' ?
-                    input.getAttribute('output-type') : inputType
-                );
+                let outputType = input.getAttribute('output-type');
+                let Type = getTypeCastFunction(outputType || inputType);
                 let value;
                 if (inputType === 'file' && input.files && input.files.length) {
                   let reader = new FileReader();
@@ -115,7 +121,11 @@ class CollectionAdderForm extends SocketConsumer {
                   value = input.value;
                 }
                 let sanitizedValue = Type(value);
-                if (trimSpaces && typeof sanitizedValue === 'string') {
+                let shouldTrimSpaces = trimSpaces && (
+                  !trimSpacesInputNames.length ||
+                  trimSpacesInputNames.includes(input.name)
+                );
+                if (shouldTrimSpaces && typeof sanitizedValue === 'string') {
                   sanitizedValue = sanitizedValue.trim();
                 }
                 return [ input.name, sanitizedValue ];

package/collection-adder.js

@@ -70,7 +70,16 @@ class CollectionAdder extends SocketConsumer {
       }
     }
 
+    // The trim-spaces attribute can either be empty (in which case spaces are
+    // trimmed from all input values) or it can hold a comma-separated list of
+    // field names to restrict trimming to those specific inputs.
     let trimSpaces = this.hasAttribute('trim-spaces');
+    let trimSpacesFieldNames = trimSpaces ?
+      (this.getAttribute('trim-spaces') || '')
+        .split(',')
+        .map(fieldName => fieldName.trim())
+        .filter(fieldName => fieldName) : [];
+
     let outputValue;
 
     let modelValues = this.getAttribute('model-values');
@@ -116,7 +125,11 @@ class CollectionAdder extends SocketConsumer {
                   value = input.value;
                 }
                 let sanitizedValue = Type(value);
-                if (trimSpaces && typeof sanitizedValue === 'string') {
+                let shouldTrimSpaces = trimSpaces && (
+                  !trimSpacesFieldNames.length ||
+                  trimSpacesFieldNames.includes(input.name)
+                );
+                if (shouldTrimSpaces && typeof sanitizedValue === 'string') {
                   sanitizedValue = sanitizedValue.trim();
                 }
                 return [ input.name, sanitizedValue ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {