saasufy-components 4.2.0 → 4.4.0

package/README.md

@@ -580,6 +580,7 @@ Used to displaying a field of a model instance in real time.
 - `model-id` (required): The id of the model instance/record to bind to.
 - `model-field` (required): The field of the model instance/record to bind to for reading.
 - `slice-to`: Optional attribute which can be set to a number to trim strings down to a maximum number of characters when reading. This is useful when dealing with potentially very long field values. Note that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
+- `default-value`: A default value to show the user if the underlying model field's value is null or undefined.
 - `hide-error-logs`: By default, this component will log errors to the console. If set, this attribute will suppress such errors from showing up on the console.
 
 ### model-viewer

package/input-provider.js

@@ -54,11 +54,24 @@ class InputProvider extends HTMLElement {
     this.inputElement && this.inputElement.dispatchEvent(new Event('change'));
   }
 
+  updateInputClassList(newValue) {
+    if (this.inputElement.type === 'checkbox') {
+      this.inputElement.classList.remove('empty-input');
+      return;
+    }
+    if (newValue === '' || newValue == null) {
+      this.inputElement.classList.add('empty-input');
+    } else {
+      this.inputElement.classList.remove('empty-input');
+    }
+  }
+
   set value(newValue) {
     if (this.inputElement) {
       if (newValue && this.hasAttribute('computable-value')) {
         newValue = renderTemplate(newValue);
       }
+      this.updateInputClassList(newValue);
       let oldValue;
       if (this.inputElement.type === 'checkbox') {
         oldValue = this.inputElement.checked;
@@ -117,6 +130,9 @@ class InputProvider extends HTMLElement {
         let optionElements = options
         .split(',')
         .map((option) => {
+          if (option === placeholder) {
+            return `<option value="" selected class="select-default-option">${option}</option>`;
+          }
           return `<option value="${option}">${option}</option>`;
         })
         .join('');
@@ -153,6 +169,7 @@ class InputProvider extends HTMLElement {
       }
     }
 
+    this.updateInputClassList(value);
     this.appendChild(this.inputElement);
 
     let destroyHandlers = this.updateConsumerElementsOnEdit();
@@ -160,6 +177,7 @@ class InputProvider extends HTMLElement {
     if (value) {
       this.value = value;
     }
+
     this.destroy = () => {
       destroyHandlers();
     };
@@ -176,6 +194,7 @@ class InputProvider extends HTMLElement {
     let debounce = debouncer();
 
     let onInputChange = (event) => {
+      this.updateInputClassList(event.target.value);
       debounce(async () => {
         let elementName = this.getAttribute('name');
         let providerTemplate = this.getAttribute('provider-template');
@@ -183,6 +202,7 @@ class InputProvider extends HTMLElement {
         if (inputElement.type === 'checkbox') {
           let checked = !!inputElement.checked;
           this.lastValue = checked;
+
           updateConsumerElements(consumers, checked, providerTemplate, elementName);
           return;
         }
@@ -201,6 +221,7 @@ class InputProvider extends HTMLElement {
     let onInputKeyUp;
     if (inputElement.type !== 'checkbox') {
       onInputKeyUp = async (event) => {
+        this.updateInputClassList(event.target.value);
         debounce(async () => {
           let elementName = this.getAttribute('name');
           let providerTemplate = this.getAttribute('provider-template');

package/model-text.js

@@ -25,7 +25,8 @@ class ModelText extends SocketConsumer {
       'model-id',
       'model-field',
       'slice-to',
-      'hide-error-logs'
+      'hide-error-logs',
+      'default-value'
     ];
   }
 
@@ -35,6 +36,14 @@ class ModelText extends SocketConsumer {
     this.render();
   }
 
+  computeDisplayValue(value) {
+    let safeValue = toSafeHTML(value);
+    if (safeValue != null) {
+      return safeValue;
+    }
+    return this.getAttribute('default-value') || '';
+  }
+
   render() {
     this.innerHTML = '';
     let socketInstanceProperty = this.getAttribute('socket-instance-property');
@@ -107,12 +116,11 @@ class ModelText extends SocketConsumer {
     (async () => {
       for await (let event of changeConsumer) {
         if (event.resourceField !== modelField) continue;
-        let fieldValue = toSafeHTML(model.value[modelField]);
-        this.innerHTML = fieldValue;
+        this.innerHTML = this.computeDisplayValue(model.value[modelField]);
       }
     })();
     if (model.isLoaded) {
-      this.innerHTML = toSafeHTML(model.value[modelField]);
+      this.innerHTML = this.computeDisplayValue(model.value[modelField]);
     }
     this.destroy = () => {
       changeConsumer.kill();

package/package.json

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