saasufy-components 5.3.0 → 5.4.0

package/README.md

@@ -364,6 +364,8 @@ This component is a simplified version of the `collection-adder-form` component
 - `autocorrect`: Can be set to `off` to disable auto-correction of input on mobile devices.
 - `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.
 - `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.
+- `error-consumers`: Same as the `consumers` attribute but the target elements are only updated if insertion was a failure.
 - `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers. In the case of the `collection-adder` component, the value is an object with either a `resource` property (on successful insert) or `error` (on failure). On success, the `resource` object will be the object which was added to the collection. On failure, the `error` object will be a JavaScript `Error` object with a `message` property.
 
 ### collection-adder-form
@@ -402,6 +404,8 @@ This component is similar to the `collection-adder` component except that it req
 - `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.
 - `greedy-refresh`: If this attribute exists, the component will refresh itself whenever an attribute is set, even if that attribute's value did not change.
 - `consumers`: This allows you to connect this `collection-adder-form` 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-form` 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.
+- `error-consumers`: Same as the `consumers` attribute but the target elements are only updated if insertion was a failure.
 - `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers. In the case of the `collection-adder-form` component, the value is an object with either a `resource` property (on successful insert) or `error` (on failure). On success, the `resource` object will be the object which was added to the collection. On failure, the `error` object will be a JavaScript `Error` object with a `message` property.
 
 **Attributes of slotted input, select, textarea... elements**

package/collection-adder-form.js

@@ -152,6 +152,14 @@ class CollectionAdderForm extends SocketConsumer {
       };
     }
     let consumers = this.getAttribute('consumers');
+    let outcomeConsumers = this.getAttribute(outputValue.error ? 'error-consumers' : 'success-consumers');
+    if (consumers) {
+      if (outcomeConsumers) {
+        consumers = `${consumers},${outcomeConsumers}`;
+      }
+    } else if (outcomeConsumers) {
+      consumers = outcomeConsumers;
+    }
     let providerTemplate = this.getAttribute('provider-template');
     updateConsumerElements(consumers, outputValue, providerTemplate, this.getAttribute('name'));
   }

package/collection-adder.js

@@ -149,6 +149,14 @@ class CollectionAdder extends SocketConsumer {
       };
     }
     let consumers = this.getAttribute('consumers');
+    let outcomeConsumers = this.getAttribute(outputValue.error ? 'error-consumers' : 'success-consumers');
+    if (consumers) {
+      if (outcomeConsumers) {
+        consumers = `${consumers},${outcomeConsumers}`;
+      }
+    } else if (outcomeConsumers) {
+      consumers = outcomeConsumers;
+    }
     let providerTemplate = this.getAttribute('provider-template');
     updateConsumerElements(consumers, outputValue, providerTemplate, this.getAttribute('name'));
   }

package/package.json

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