saasufy-components 2.7.0 → 2.9.0

package/README.md

@@ -223,10 +223,15 @@ A general purpose modal component.
 
 A component which can be used to guarantee that certain children components are always rendered at the same time (once they are loaded) to provide a smooth user experience.
 
+### 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.
+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.
+
 ### 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.
-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.
+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/collection-adder.js

@@ -40,7 +40,10 @@ class CollectionAdder extends SocketConsumer {
       'model-values',
       'submit-button-label',
       'hide-submit-button',
-      'success-message'
+      'success-message',
+      'autocapitalize',
+      'autocorrect',
+      'trim-spaces'
     ];
   }
 
@@ -106,6 +109,8 @@ class CollectionAdder extends SocketConsumer {
       }
     }
 
+    let trimSpaces = this.hasAttribute('trim-spaces');
+
     let newModelData = {
       ...this.modelFieldValues,
       ...radioData,
@@ -121,7 +126,11 @@ class CollectionAdder extends SocketConsumer {
             } else {
               value = input.value;
             }
-            return [ input.name, Type(value) ];
+            let sanitizedValue = Type(value);
+            if (trimSpaces && typeof sanitizedValue === 'string') {
+              sanitizedValue = sanitizedValue.trim();
+            }
+            return [ input.name, sanitizedValue ];
           })
       )
     };
@@ -188,6 +197,15 @@ class CollectionAdder extends SocketConsumer {
       fieldValues: optionLabels
     } = this.getFieldDetails(this.getAttribute('option-labels'));
 
+    let autocapitalize = this.getAttribute('autocapitalize');
+    let autocorrect = this.getAttribute('autocorrect');
+
+    let extraAttributesString = `${
+      autocapitalize ? ` autocapitalize="${autocapitalize}"` : ''
+    }${
+      autocorrect ? ` autocorrect="${autocorrect}"` : ''
+    }`;
+
     this.modelFieldValues = modelFieldValues;
 
     if (this.collection) this.collection.destroy();
@@ -242,7 +260,7 @@ class CollectionAdder extends SocketConsumer {
               field
             }" placeholder="${
               inputLabel
-            }" />
+            }"${extraAttributesString} />
             <select class="collection-adder-select">
               <option value="" selected disabled hidden>${optionLabel}</option>
               ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`).join('')}
@@ -278,7 +296,7 @@ class CollectionAdder extends SocketConsumer {
             field
           }" placeholder="${
             inputLabel
-          }"></textarea>`
+          }"${extraAttributesString}></textarea>`
         );
       } else {
         items.push(
@@ -288,7 +306,7 @@ class CollectionAdder extends SocketConsumer {
             field
           }" placeholder="${
             inputLabel
-          }" />`
+          }"${extraAttributesString} />`
         );
       }
     }

package/conditional-group.js

@@ -23,7 +23,16 @@ class ConditionalGroup extends HTMLElement {
 
   render() {
     let showContent = this.getAttribute('show-content');
-    this.shadowRoot.innerHTML = showContent != null && showContent !== 'false' ? '<slot></slot>' : '';
+    if (
+      !showContent ||
+      showContent === 'false' ||
+      showContent === 'null' ||
+      showContent === 'undefined'
+    ) {
+      this.shadowRoot.innerHTML = '';
+      return;
+    }
+    this.shadowRoot.innerHTML = '<slot></slot>';
   }
 }
 

package/if-group.js

@@ -0,0 +1,58 @@
+import { debouncer } from './utils.js';
+
+const DEBOUNCE_DELAY = 0;
+
+class IfGroup 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 showContent = this.getAttribute('show-content');
+      if (
+        !showContent ||
+        showContent === 'false' ||
+        showContent === 'null' ||
+        showContent === 'undefined'
+      ) return;
+
+      let contentSlot = this.shadowRoot.querySelector('slot[name="content"]');
+      let contentNodes = contentSlot.assignedNodes();
+      if (!contentNodes.length) return;
+
+      let contentList = [];
+      for (let node of contentNodes) {
+        contentList.push(node.innerHTML);
+      }
+      viewportNode.innerHTML = contentList.join('');
+    };
+
+    this.debouncedProcessTemplates = debounce(this.processTemplates, DEBOUNCE_DELAY);
+    this.shadowRoot.addEventListener('slotchange', this.debouncedProcessTemplates);
+  }
+
+  static get observedAttributes() {
+    return [
+      'show-content'
+    ];
+  }
+
+  attributeChangedCallback() {
+    if (!this.isReady) return;
+    this.processTemplates();
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+  }
+}
+
+window.customElements.define('if-group', IfGroup);

package/input-provider.js

@@ -28,7 +28,9 @@ class InputProvider extends HTMLElement {
       'debounce-delay',
       'options',
       'value',
-      'height'
+      'height',
+      'autocapitalize',
+      'autocorrect'
     ];
   }
 
@@ -59,6 +61,8 @@ class InputProvider extends HTMLElement {
   render() {
     this.innerHTML = '';
     let inputId = this.getAttribute('input-id');
+    let autocapitalize = this.getAttribute('autocapitalize');
+    let autocorrect = this.getAttribute('autocorrect');
     let inputList = this.getAttribute('list');
     let type = this.getAttribute('type') || 'text';
     let placeholder = this.getAttribute('placeholder');
@@ -97,6 +101,12 @@ class InputProvider extends HTMLElement {
     if (inputId) {
       this.inputElement.setAttribute('id', inputId);
     }
+    if (autocapitalize) {
+      this.inputElement.setAttribute('autocapitalize', autocapitalize);
+    }
+    if (autocorrect) {
+      this.inputElement.setAttribute('autocorrect', autocorrect);
+    }
     if (placeholder) {
       this.inputElement.setAttribute('placeholder', placeholder);
     }

package/model-input.js

@@ -36,7 +36,9 @@ class ModelInput extends SocketConsumer {
       'enable-rebound',
       'options',
       'height',
-      'hide-error-logs'
+      'hide-error-logs',
+      'autocapitalize',
+      'autocorrect'
     ];
   }
 
@@ -71,6 +73,8 @@ class ModelInput extends SocketConsumer {
     let modelInstanceProperty = this.getAttribute('model-instance-property');
     let showErrorMessage = this.hasAttribute('show-error-message');
     let inputId = this.getAttribute('input-id');
+    let autocapitalize = this.getAttribute('autocapitalize');
+    let autocorrect = this.getAttribute('autocorrect');
     let inputList = this.getAttribute('list');
     let type = this.getAttribute('type') || 'text';
     let placeholder = this.getAttribute('placeholder');
@@ -188,6 +192,12 @@ class ModelInput extends SocketConsumer {
     if (inputId) {
       this.inputElement.setAttribute('id', inputId);
     }
+    if (autocapitalize) {
+      this.inputElement.setAttribute('autocapitalize', autocapitalize);
+    }
+    if (autocorrect) {
+      this.inputElement.setAttribute('autocorrect', autocorrect);
+    }
     if (placeholder) {
       this.inputElement.setAttribute('placeholder', placeholder);
     }

package/package.json

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

package/utils.js

@@ -18,6 +18,12 @@ export function toSafeHTML(text) {
   return text;
 }
 
+export function toExpression(html) {
+  return html.replace(/&/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>');
+}
+
 export function debouncer() {
   let debounceTimeout = null;
   return function (callback, duration) {
@@ -213,7 +219,7 @@ export function renderTemplate(templateString, data, socket) {
     try {
       return toSafeHTML(
         execExpression(
-          expString,
+          toExpression(expString),
           options
         )
       );