saasufy-components 5.2.2 → 5.4.0

package/README.md

@@ -213,6 +213,9 @@ This example shows how to redirect based on the user's authentication status:
 Note that the app router path is based on `location.hash` so the path section in your browser's address bar needs to start with the `#` character.
 So for example, if your `index.html` file is served up from the URL `http://mywebsite.com`, then, to activate the `/products` route as in the example above, you would need to type the URL `http://mywebsite.com#/products`.
 
+Also note that the app router will only render once its `viewport` has been added and slotted into it.
+If you want to make sure that some data (e.g. a config file) has been fully loaded before rendering the app, you could set the `slot="viewport"` attribute on your viewport element at a later time using JavaScript.
+
 **Attributes of app-router**
 
 - `default-page`: The path/route of the default page to send the user to in case no routes are matched. Commonly used to point to a `/page-not-found` page. For the home page, it's typically recommended to create a page template with `route-path=""` instead.
@@ -360,6 +363,10 @@ 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.
 - `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
 
@@ -396,6 +403,10 @@ This component is similar to the `collection-adder` component except that it req
 - `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.
 - `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

@@ -1,5 +1,6 @@
 import { SocketConsumer } from './socket.js';
 import {
+  updateConsumerElements,
   convertStringToFieldParams,
   getTypeCastFunction,
   formatError
@@ -58,6 +59,7 @@ class CollectionAdderForm extends SocketConsumer {
     let trimSpaces = this.hasAttribute('trim-spaces');
 
     let inputElements = this.getAllInputElements();
+    let outputValue;
 
     try {
       let newModelData = {
@@ -105,14 +107,23 @@ class CollectionAdderForm extends SocketConsumer {
         )
       };
 
-      await this.collection.create(newModelData);
+      let resourceId = await this.collection.create(newModelData);
+      let insertedModelData = {
+        ...newModelData,
+        id: resourceId
+      };
       this.dispatchEvent(
         new CustomEvent('success', {
-          detail: newModelData
+          detail: insertedModelData
         })
       );
+
       this.reset();
 
+      outputValue = {
+        resource: insertedModelData
+      };
+
       messageContainer = this.shadowRoot.querySelector('slot[name="message"]').assignedElements()[0];
       if (messageContainer) {
         messageContainer.classList.add('success');
@@ -135,7 +146,22 @@ class CollectionAdderForm extends SocketConsumer {
           detail: error
         })
       );
+
+      outputValue = {
+        error
+      };
+    }
+    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'));
   }
 
   getAllInputElements() {

package/collection-adder.js

@@ -1,5 +1,6 @@
 import { SocketConsumer } from './socket.js';
 import {
+  updateConsumerElements,
   convertStringToFieldParams,
   getTypeCastFunction,
   formatError
@@ -66,6 +67,7 @@ class CollectionAdder extends SocketConsumer {
     }
 
     let trimSpaces = this.hasAttribute('trim-spaces');
+    let outputValue;
 
     try {
       let newModelData = {
@@ -108,16 +110,26 @@ class CollectionAdder extends SocketConsumer {
           )
         )
       };
-      await this.collection.create(newModelData);
-      messageContainer.classList.add('success');
-      messageContainer.classList.remove('error');
+      let resourceId = await this.collection.create(newModelData);
+      let insertedModelData = {
+        ...newModelData,
+        id: resourceId
+      };
       this.dispatchEvent(
         new CustomEvent('success', {
-          detail: newModelData
+          detail: insertedModelData
         })
       );
       let form = this.querySelector('.collection-adder-form');
       form.reset();
+
+      outputValue = {
+        resource: insertedModelData
+      };
+
+      messageContainer.classList.add('success');
+      messageContainer.classList.remove('error');
+
       if (successMessage) {
         messageContainer.textContent = successMessage;
       } else {
@@ -132,7 +144,21 @@ class CollectionAdder extends SocketConsumer {
           detail: error
         })
       );
+      outputValue = {
+        error
+      };
+    }
+    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'));
   }
 
   reset() {

package/package.json

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