saasufy-components 2.15.1 → 2.16.0

package/README.md

@@ -356,6 +356,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
 - `consumers`: This allows you to connect this `model-input` to other elements on your page which share the same parent element. It takes a list of selectors with optional attributes to target. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `model-input` component in real-time. 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.
+- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
 - `show-error-message`: If this attribute is present, an error message will be displayed above the input if it fails to update the value.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
@@ -426,7 +427,6 @@ Used for rendering a single model resource using a template. This is the single-
 An input component which can pass data to other components (or HTML elements) via custom attributes.
 A common use case for it is to pass user input to `collection-browser` or `model-viewer` components to then fetch data from Saasufy.
 This component can be configured to provide its data to multiple components (consumers) via custom attributes.
-Note that an `input-provider` only targets elements which are downstream from its parent element in the HTML hierarchy.
 
 **Example usage**
 
@@ -446,6 +446,7 @@ Note that an `input-provider` only targets elements which are downstream from it
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
 - `consumers`: This allows you to connect this `input-provider` to other elements on your page which share the same parent element. It takes a list of selectors with optional attributes to target. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `input-provider` component in real-time. 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.
+- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together (as is common when user is typing). Default is 800ms.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
@@ -584,7 +585,14 @@ It's intended to be placed inside a `model-viewer`, `collection-browser` or `col
 **Example usage**
 
 ```html
-
+<if-group show-content="{{!!Product.isVisible}}">
+  <template slot="content">
+    <div>Name: {{Product.name}}</div>
+    <div>Description: {{Product.desc}}</div>
+    <div>Quantity: {{Product.qty}}</div>
+  </template>
+  <div slot="viewport"></div>
+</if-group>
 ```
 
 ### switch-group

package/input-provider.js

@@ -135,20 +135,21 @@ class InputProvider extends HTMLElement {
 
     let onInputChange = (event) => {
       debounce(async () => {
+        let providerTemplate = this.getAttribute('provider-template');
         if (event.target.value === this.lastValue) return;
         if (inputElement.type === 'checkbox') {
           let checked = !!inputElement.checked;
           this.lastValue = checked;
-          updateConsumerElements(this.parentElement, consumers, checked);
+          updateConsumerElements(consumers, checked, providerTemplate);
           return;
         }
         this.lastValue = event.target.value;
         if (event.target.value === '') {
-          updateConsumerElements(this.parentElement, consumers, '');
+          updateConsumerElements(consumers, '', providerTemplate);
         } else {
           let targetValue = inputElement.type === 'number' ?
             Number(event.target.value) : event.target.value;
-          updateConsumerElements(this.parentElement, consumers, targetValue);
+          updateConsumerElements(consumers, targetValue, providerTemplate);
         }
       }, debounceDelay);
     };
@@ -158,14 +159,15 @@ class InputProvider extends HTMLElement {
     if (inputElement.type !== 'checkbox') {
       onInputKeyUp = async (event) => {
         debounce(async () => {
+          let providerTemplate = this.getAttribute('provider-template');
           if (event.target.value === this.lastValue) return;
           this.lastValue = event.target.value;
           if (event.target.value === '') {
-            updateConsumerElements(this.parentElement, consumers, '');
+            updateConsumerElements(consumers, '', providerTemplate);
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(event.target.value) : event.target.value;
-            updateConsumerElements(this.parentElement, consumers, targetValue);
+            updateConsumerElements(consumers, targetValue, providerTemplate);
           }
         }, debounceDelay);
       };

package/model-input.js

@@ -248,14 +248,15 @@ class ModelInput extends SocketConsumer {
 
   updateInputElement(inputElement, fieldValue) {
     let consumers = this.getAttribute('consumers');
+    let providerTemplate = this.getAttribute('provider-template');
     if (inputElement.type === 'checkbox') {
       let checked = !!fieldValue;
       inputElement.checked = checked;
-      updateConsumerElements(this.parentElement, consumers, checked);
+      updateConsumerElements(consumers, checked, providerTemplate);
     } else {
       let defaultValue = this.getAttribute('default-value') || '';
       inputElement.value = fieldValue == null ? defaultValue : fieldValue;
-      updateConsumerElements(this.parentElement, consumers, inputElement.value);
+      updateConsumerElements(consumers, inputElement.value, providerTemplate);
     }
   }
 
@@ -305,10 +306,11 @@ class ModelInput extends SocketConsumer {
     let onInputChange = (event) => {
       if (event.target.value === String(model.value[fieldName])) return;
       debounce(async () => {
+        let providerTemplate = this.getAttribute('provider-template');
         try {
           if (inputElement.type === 'checkbox') {
             let checked = !!inputElement.checked;
-            updateConsumerElements(this.parentElement, consumers, checked);
+            updateConsumerElements(consumers, checked, providerTemplate);
             await model.update(fieldName, checked);
             inputElement.classList.remove(errorStyleClass);
             inputElement.classList.add(successStyleClass);
@@ -316,12 +318,12 @@ class ModelInput extends SocketConsumer {
             return;
           }
           if (event.target.value === '') {
-            updateConsumerElements(this.parentElement, consumers, '');
+            updateConsumerElements(consumers, '', providerTemplate);
             await model.delete(fieldName);
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(event.target.value) : event.target.value;
-            updateConsumerElements(this.parentElement, consumers, targetValue);
+            updateConsumerElements(consumers, targetValue, providerTemplate);
             await model.update(fieldName, targetValue);
           }
           inputElement.classList.remove(errorStyleClass);
@@ -340,14 +342,15 @@ class ModelInput extends SocketConsumer {
     if (inputElement.type !== 'checkbox' && inputElement.type !== 'select') {
       onInputKeyUp = async (event) => {
         debounce(async () => {
+          let providerTemplate = this.getAttribute('provider-template');
           try {
             if (event.target.value === '') {
               await model.delete(fieldName);
-              updateConsumerElements(this.parentElement, consumers, '');
+              updateConsumerElements(consumers, '', providerTemplate);
             } else {
               let targetValue = inputElement.type === 'number' ?
                 Number(event.target.value) : event.target.value;
-              updateConsumerElements(this.parentElement, consumers, targetValue);
+              updateConsumerElements(consumers, targetValue, providerTemplate);
               await model.update(fieldName, targetValue);
             }
             inputElement.classList.remove(errorStyleClass);

package/package.json

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

package/utils.js

@@ -232,8 +232,8 @@ export function renderTemplate(templateString, data, socket) {
   });
 }
 
-export function updateConsumerElements(parentElement, consumers, value) {
-  if (parentElement && consumers) {
+export function updateConsumerElements(consumers, value, template) {
+  if (consumers) {
     let consumerParts = consumers.split(',')
       .filter(part => part)
       .map(part => {
@@ -242,8 +242,15 @@ export function updateConsumerElements(parentElement, consumers, value) {
       })
       .filter(([ selector, attributeName ]) => selector);
 
+    if (template) {
+      value = renderTemplate(
+        template,
+        { value }
+      );
+    }
+
     for (let [ selector, attributeName ] of consumerParts) {
-      let matchingElements = parentElement.querySelectorAll(selector);
+      let matchingElements = document.querySelectorAll(selector);
       if (attributeName) {
         for (let element of matchingElements) {
           if (typeof value === 'boolean') {