saasufy-components 1.11.0 → 1.12.0

package/input-provider.js

@@ -1,4 +1,4 @@
-import { debouncer } from './utils.js';
+import { debouncer, updateConsumerElements } from './utils.js';
 
 const DEFAULT_DEBOUNCE_DELAY = 800;
 
@@ -113,52 +113,6 @@ class InputProvider extends HTMLElement {
     };
   }
 
-  updateConsumerElements(consumers, value) {
-    let parentElement = this.parentElement;
-    if (parentElement) {
-      let consumerParts = consumers.split(',')
-        .filter(part => part)
-        .map(part => {
-          part = part.trim();
-          return part.split(':').map(subPart => subPart.trim());
-        })
-        .filter(([ selector, attributeName ]) => selector);
-
-      for (let [ selector, attributeName ] of consumerParts) {
-        let matchingElements = parentElement.querySelectorAll(selector);
-        if (attributeName) {
-          for (let element of matchingElements) {
-            if (typeof value === 'boolean') {
-              if (value) {
-                element.setAttribute(attributeName, '');
-              } else {
-                element.removeAttribute(attributeName);
-              }
-            } else {
-              element.setAttribute(attributeName, value);
-            }
-          }
-        } else {
-          for (let element of matchingElements) {
-            if (element.nodeName === 'INPUT') {
-              if (element.type === 'checkbox') {
-                if (value) {
-                  element.setAttribute('checked', '');
-                } else {
-                  element.removeAttribute('checked');
-                }
-              } else {
-                element.value = value;
-              }
-            } else {
-              element.innerHTML = value;
-            }
-          }
-        }
-      }
-    }
-  }
-
   updateConsumerElementsOnEdit() {
     let consumers = this.getAttribute('consumers');
     if (!consumers) return;
@@ -175,16 +129,16 @@ class InputProvider extends HTMLElement {
         if (inputElement.type === 'checkbox') {
           let checked = !!inputElement.checked;
           this.lastValue = checked;
-          this.updateConsumerElements(consumers, checked);
+          updateConsumerElements(this.parentElement, consumers, checked);
           return;
         }
         this.lastValue = event.target.value;
         if (event.target.value === '') {
-          this.updateConsumerElements(consumers, '');
+          updateConsumerElements(this.parentElement, consumers, '');
         } else {
           let targetValue = inputElement.type === 'number' ?
             Number(event.target.value) : event.target.value;
-          this.updateConsumerElements(consumers, targetValue);
+          updateConsumerElements(this.parentElement, consumers, targetValue);
         }
       }, debounceDelay);
     };
@@ -197,11 +151,11 @@ class InputProvider extends HTMLElement {
           if (event.target.value === this.lastValue) return;
           this.lastValue = event.target.value;
           if (event.target.value === '') {
-            this.updateConsumerElements(consumers, '');
+            updateConsumerElements(this.parentElement, consumers, '');
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(event.target.value) : event.target.value;
-            this.updateConsumerElements(consumers, targetValue);
+            updateConsumerElements(this.parentElement, consumers, targetValue);
           }
         }, debounceDelay);
       };

package/model-input.js

@@ -1,5 +1,5 @@
 import { SocketConsumer } from './socket.js';
-import { debouncer } from './utils.js';
+import { debouncer, updateConsumerElements } from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
 class ModelInput extends SocketConsumer {
@@ -25,6 +25,7 @@ class ModelInput extends SocketConsumer {
       'model-instance-property',
       'type',
       'placeholder',
+      'consumers',
       'show-error-message',
       'model-type',
       'model-id',
@@ -80,10 +81,19 @@ class ModelInput extends SocketConsumer {
     if (modelInstanceProperty) {
       while (currentNode) {
         model = currentNode[modelInstanceProperty];
+        if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
+          model = null;
+        }
         if (model) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (!model) return;
+      if (!model) {
+        throw new Error(
+          `The ${
+            this.nodeName.toLowerCase()
+          } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
+        );
+      };
     } else {
       this.socket = this.getSocket();
       model = new AGModel({
@@ -167,25 +177,34 @@ class ModelInput extends SocketConsumer {
 
   syncInputElementWithModel(inputElement, model, fieldName, messageContainerElement) {
     if (model.isLoaded) {
+      let consumers = this.getAttribute('consumers');
       let fieldValue = model.value[fieldName];
       if (inputElement.type === 'checkbox') {
-        inputElement.checked = !!fieldValue;
+        let checked = !!fieldValue;
+        inputElement.checked = checked;
+        updateConsumerElements(this.parentElement, consumers, checked);
       } else {
         let defaultValue = this.getAttribute('default-value') || '';
         inputElement.value = fieldValue == null ? defaultValue : fieldValue;
+        updateConsumerElements(this.parentElement, consumers, inputElement.value);
       }
     }
     let stopSaving = this.saveInputElementOnEdit(inputElement, model, fieldName, messageContainerElement);
     let changeConsumer = model.listener('change').createConsumer();
     (async () => {
       for await (let event of changeConsumer) {
-        if (event.resourceField !== fieldName || !event.isRemote) continue;
+        let hasFocus = document.activeElement === this.inputElement;
+        if (event.resourceField !== fieldName || (hasFocus && !event.isRemote)) continue;
+        let consumers = this.getAttribute('consumers');
         let fieldValue = model.value[fieldName];
         if (inputElement.type === 'checkbox') {
-          inputElement.checked = !!fieldValue;
+          let checked = !!fieldValue;
+          inputElement.checked = checked;
+          updateConsumerElements(this.parentElement, consumers, checked);
         } else {
           let defaultValue = this.getAttribute('default-value') || '';
           inputElement.value = fieldValue == null ? defaultValue : fieldValue;
+          updateConsumerElements(this.parentElement, consumers, inputElement.value);
         }
       }
     })();
@@ -212,6 +231,7 @@ class ModelInput extends SocketConsumer {
       messageContainerElement.classList.add('hidden');
     };
 
+    let consumers = this.getAttribute('consumers');
     let debounceDelay = this.getAttribute('debounce-delay');
     debounceDelay = debounceDelay ? Number(debounceDelay) : null;
     let debounce = debouncer();
@@ -221,17 +241,21 @@ class ModelInput extends SocketConsumer {
       debounce(async () => {
         try {
           if (inputElement.type === 'checkbox') {
-            await model.update(fieldName, !!inputElement.checked);
+            let checked = !!inputElement.checked;
+            updateConsumerElements(this.parentElement, consumers, checked);
+            await model.update(fieldName, checked);
             inputElement.classList.remove(errorStyleClass);
             inputElement.classList.add(successStyleClass);
             hideErrorMessage(fieldName);
             return;
           }
           if (event.target.value === '') {
+            updateConsumerElements(this.parentElement, consumers, '');
             await model.delete(fieldName);
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(event.target.value) : event.target.value;
+            updateConsumerElements(this.parentElement, consumers, targetValue);
             await model.update(fieldName, targetValue);
           }
           inputElement.classList.remove(errorStyleClass);
@@ -253,9 +277,11 @@ class ModelInput extends SocketConsumer {
           try {
             if (event.target.value === '') {
               await model.delete(fieldName);
+              updateConsumerElements(this.parentElement, consumers, '');
             } else {
               let targetValue = inputElement.type === 'number' ?
-              Number(event.target.value) : event.target.value;
+                Number(event.target.value) : event.target.value;
+              updateConsumerElements(this.parentElement, consumers, targetValue);
               await model.update(fieldName, targetValue);
             }
             inputElement.classList.remove(errorStyleClass);

package/model-text.js

@@ -42,10 +42,19 @@ class ModelText extends SocketConsumer {
     if (modelInstanceProperty) {
       while (currentNode) {
         model = currentNode[modelInstanceProperty];
+        if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
+          model = null;
+        }
         if (model) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (!model) return;
+      if (!model) {
+        throw new Error(
+          `The ${
+            this.nodeName.toLowerCase()
+          } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
+        );
+      };
     } else {
       this.socket = this.getSocket();
       model = new AGModel({
@@ -79,7 +88,7 @@ class ModelText extends SocketConsumer {
     let changeConsumer = model.listener('change').createConsumer();
     (async () => {
       for await (let event of changeConsumer) {
-        if (event.resourceField !== modelField || !event.isRemote) continue;
+        if (event.resourceField !== modelField) continue;
         let fieldValue = toSafeHTML(model.value[modelField]);
         this.innerHTML = fieldValue;
       }

package/package.json

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

package/socket.js

@@ -123,7 +123,7 @@ export class SocketConsumer extends HTMLElement {
       throw new Error(
         `The ${
           this.nodeName.toLowerCase()
-        } element failed to obtain a socket - Make sure it is nested inside a socket-provider element`
+        } element failed to obtain a socket - Ensure that it is nested inside a socket-provider element`
       );
     }
     return socket;

package/utils.js

@@ -223,6 +223,51 @@ export function renderTemplate(templateString, data, socket) {
   });
 }
 
+export function updateConsumerElements(parentElement, consumers, value) {
+  if (parentElement && consumers) {
+    let consumerParts = consumers.split(',')
+      .filter(part => part)
+      .map(part => {
+        part = part.trim();
+        return part.split(':').map(subPart => subPart.trim());
+      })
+      .filter(([ selector, attributeName ]) => selector);
+
+    for (let [ selector, attributeName ] of consumerParts) {
+      let matchingElements = parentElement.querySelectorAll(selector);
+      if (attributeName) {
+        for (let element of matchingElements) {
+          if (typeof value === 'boolean') {
+            if (value) {
+              element.setAttribute(attributeName, '');
+            } else {
+              element.removeAttribute(attributeName);
+            }
+          } else {
+            element.setAttribute(attributeName, value);
+          }
+        }
+      } else {
+        for (let element of matchingElements) {
+          if (element.nodeName === 'INPUT') {
+            if (element.type === 'checkbox') {
+              if (value) {
+                element.setAttribute('checked', '');
+              } else {
+                element.removeAttribute('checked');
+              }
+            } else {
+              element.value = value;
+            }
+          } else {
+            element.innerHTML = value;
+          }
+        }
+      }
+    }
+  }
+}
+
 export function wait(duration) {
   return new Promise((resolve) => setTimeout(resolve, duration));
 }