saasufy-components 2.10.0 → 2.12.0

package/README.md

@@ -225,12 +225,17 @@ A component which can be used to guarantee that certain children components are
 
 ### if-group
 
-A modal component which exposes a `show-content` property which can be set to true or false to show or hide its content.
+A component which exposes a `show-content` property which can be set to true or false to show or hide its content.
 It's intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false value of the `show-content` attribute can be computed using a template `{{expression}}` placeholder. Unlike `conditional-group`, this component requires a template and a viewport to be slotted in. The content of the template will not be processed unless the `show-content` condition is met.
 
+### switch-group
+
+A component which exposes a `show-cases` property which can be set to key-value pairs in the format `key1=true,key2=false`. It can be used to conditionally display multiple slotted elements based on multiple conditions. It helps to keep HTML clean when the conditions are complex.
+This element is intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false values of the `show-cases` attribute can be computed using template `{{expression}}` placeholders. This component requires one or more templates and a viewport to be slotted in. The content of the templates will not be processed unless the `show-cases` condition is met. All templates must have a `slot="content"` attribute and a name attribute in the format `name="key1"` where the value `key1` corresponds to the key specified inside the `show-cases` attribute of the `switch-group`.
+
 ### conditional-group
 
-A modal component which exposes a `show-content` property which can be set to true or false to show or hide its content.
+A component which exposes a `show-content` property which can be set to true or false to show or hide its content.
 It's intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false value of the `show-content` attribute can be computed using a template `{{expression}}` placeholder. Unlike `if-group`, this component does not require a template, however, the trade-off is that the slotted content will be pre-processed by the browser even when the expression is false. This may not be suitable if you want to (for example) render child images conditionally because the browser will preload images based on their `src` attributes, even if they are not shown.
 
 ### collection-adder-group

package/model-input.js

@@ -23,6 +23,7 @@ class ModelInput extends SocketConsumer {
       'input-id',
       'list',
       'model-instance-property',
+      'collection-instance-property',
       'bind-to-model',
       'bind-to-collection',
       'type',
@@ -36,6 +37,8 @@ class ModelInput extends SocketConsumer {
       'enable-rebound',
       'options',
       'height',
+      'default-value',
+      'value',
       'hide-error-logs',
       'autocapitalize',
       'autocorrect'
@@ -44,8 +47,12 @@ class ModelInput extends SocketConsumer {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.isReady) return;
-    this.destroy();
-    this.render();
+    if (name === 'value') {
+      this.value = newValue;
+    } else {
+      this.destroy();
+      this.render();
+    }
   }
 
   triggerChange() {
@@ -69,8 +76,9 @@ class ModelInput extends SocketConsumer {
   render() {
     this.innerHTML = '';
     let bindToModel = this.hasAttribute('bind-to-model');
-    let bindToCollection = this.hasAttribute('bind-to-collection');
     let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let bindToCollection = this.hasAttribute('bind-to-collection');
+    let collectionInstanceProperty = this.getAttribute('collection-instance-property');
     let showErrorMessage = this.hasAttribute('show-error-message');
     let inputId = this.getAttribute('input-id');
     let autocapitalize = this.getAttribute('autocapitalize');
@@ -89,13 +97,16 @@ class ModelInput extends SocketConsumer {
     let model;
     let isModelLocal = false;
     if (bindToCollection) {
+      collectionInstanceProperty = 'collection';
+    }
+    if (collectionInstanceProperty) {
       let collection;
       while (currentNode) {
-        collection = currentNode.collection;
-        if (collection && (collection.type !== modelType || !(collection.fields || []).includes(modelField))) {
+        collection = currentNode[collectionInstanceProperty];
+        if (collection && collection.type !== modelType) {
           collection = null;
         }
-        if (collection && (!collection.agModels || !collection.agModels[modelId] || !collection.agModels[modelId].agFields[modelField])) {
+        if (collection && (!collection.agModels || !collection.agModels[modelId])) {
           collection = null;
         }
         if (collection) break;
@@ -103,6 +114,9 @@ class ModelInput extends SocketConsumer {
       }
       if (collection) {
         model = collection.agModels[modelId];
+        if (!model.agFields[modelField]) {
+          model.addField(modelField);
+        }
       }
     }
     if (!model) {
@@ -126,7 +140,7 @@ class ModelInput extends SocketConsumer {
           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`
+            } element failed to bind to a model - Ensure that the element is nested inside a parent element which exposes a model instance of the same type with a ${modelField} field`
           );
         };
       } else {

package/model-text.js

@@ -21,7 +21,9 @@ class ModelText extends SocketConsumer {
   static get observedAttributes() {
     return [
       'model-instance-property',
+      'collection-instance-property',
       'bind-to-collection',
+      'bind-to-model',
       'model-type',
       'model-id',
       'model-field',
@@ -38,8 +40,9 @@ class ModelText extends SocketConsumer {
   render() {
     this.innerHTML = '';
     let bindToModel = this.hasAttribute('bind-to-model');
-    let bindToCollection = this.hasAttribute('bind-to-collection');
     let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let bindToCollection = this.hasAttribute('bind-to-collection');
+    let collectionInstanceProperty = this.getAttribute('collection-instance-property');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
@@ -48,13 +51,16 @@ class ModelText extends SocketConsumer {
     let model;
     let isModelLocal = false;
     if (bindToCollection) {
+      collectionInstanceProperty = 'collection';
+    }
+    if (collectionInstanceProperty) {
       let collection;
       while (currentNode) {
-        collection = currentNode.collection;
-        if (collection && (collection.type !== modelType || !(collection.fields || []).includes(modelField))) {
+        collection = currentNode[collectionInstanceProperty];
+        if (collection && collection.type !== modelType) {
           collection = null;
         }
-        if (collection && (!collection.agModels || !collection.agModels[modelId] || !collection.agModels[modelId].agFields[modelField])) {
+        if (collection && (!collection.agModels || !collection.agModels[modelId])) {
           collection = null;
         }
         if (collection) break;
@@ -62,6 +68,9 @@ class ModelText extends SocketConsumer {
       }
       if (collection) {
         model = collection.agModels[modelId];
+        if (!model.agFields[modelField]) {
+          model.addField(modelField);
+        }
       }
     }
     if (!model) {
@@ -85,7 +94,7 @@ class ModelText extends SocketConsumer {
           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`
+            } element failed to bind to a model - Ensure that the element is nested inside a parent element which exposes a model instance of the same type with a ${modelField} field`
           );
         };
       } else {
@@ -100,7 +109,7 @@ class ModelText extends SocketConsumer {
           (async () => {
             for await (let { error } of model.listener('error')) {
               console.error(
-                `Model input encountered an error: ${error.message}`
+                `Model text encountered an error: ${error.message}`
               );
             }
           })();

package/model-viewer.js

@@ -114,7 +114,7 @@ class ModelViewer extends SocketConsumer {
         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`
+          } 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 fields`
         );
       };
       this.model = model;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,8 +17,8 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^4.0.0",
-    "ag-model": "^2.0.0",
+    "ag-collection": "^4.1.0",
+    "ag-model": "^2.1.0",
     "capitalisk-auth-client": "^1.5.1",
     "socketcluster-client": "^19.1.0"
   },

package/switch-group.js

@@ -0,0 +1,71 @@
+import { debouncer } from './utils.js';
+
+const DEBOUNCE_DELAY = 0;
+
+class SwitchGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.isReady = false;
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = '<slot name="content"></slot><slot name="viewport"></slot>';
+
+    let debounce = debouncer();
+
+    this.processTemplates = () => {
+      let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+      let viewportNode = viewportSlot.assignedNodes()[0];
+      if (!viewportNode) return;
+
+      let showCases = this.getAttribute('show-cases');
+      if (!showCases) return;
+
+      let caseEntries = showCases.split(',').map((caseString) => {
+        let sanitizedCase = caseString.trim();
+        return sanitizedCase.split('=').map(part => part.trim());
+      });
+
+      let contentList = [];
+
+      for (let [ caseName, showContent ] of caseEntries) {
+        if (
+          !showContent ||
+          showContent === 'false' ||
+          showContent === 'null' ||
+          showContent === 'undefined'
+        ) continue;
+
+        let contentSlot = this.shadowRoot.querySelector('slot[name="content"]');
+
+        let contentElements = contentSlot.assignedElements().filter((element) => {
+          return element.getAttribute('name') === caseName;
+        });
+
+        for (let element of contentElements) {
+          contentList.push(element.innerHTML);
+        }
+      }
+
+      viewportNode.innerHTML = contentList.join('');
+    };
+
+    this.debouncedProcessTemplates = debounce(this.processTemplates, DEBOUNCE_DELAY);
+    this.shadowRoot.addEventListener('slotchange', this.debouncedProcessTemplates);
+  }
+
+  static get observedAttributes() {
+    return [
+      'show-cases'
+    ];
+  }
+
+  attributeChangedCallback() {
+    if (!this.isReady) return;
+    this.processTemplates();
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+  }
+}
+
+window.customElements.define('switch-group', SwitchGroup);

package/utils.js

@@ -61,6 +61,9 @@ export function createReactiveCollection(collectionOptions, callback) {
   (async () => {
     let changes = {};
     for await (let event of collection.listener('change')) {
+      // Ignore change events which originate from this collection instance.
+      if (!event.isRemote) continue;
+
       if (event.resourceId != null && changes[event.resourceId] !== false) {
         changes[event.resourceId] = event.isRemote;
       }
@@ -265,6 +268,8 @@ export function updateConsumerElements(parentElement, consumers, value) {
             } else {
               element.value = value;
             }
+          } else if (element.nodeName === 'MODEL-INPUT') {
+            element.value = value;
           } else {
             element.innerHTML = value;
           }