saasufy-components 4.3.0 → 4.5.0

package/README.md

@@ -532,6 +532,7 @@ Used for displaying and editing a single 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 and updating.
 - `debounce-delay`: The delay in milliseconds to wait before sending an update to the server. This is useful to batch multiple updates together (as is common when user is typing). Default is 300ms.
+- `disable-instant-flush`: If specified, changes will only be saved once they have settled (E.g. after the element has lost focus or when the enter key is pressed).
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea`, `checkbox` or `file`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
@@ -580,6 +581,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
@@ -649,6 +651,7 @@ This component can be configured to provide its data to multiple components (con
 - `input-id`: Can be used to set an `id` attribute on the inner `input` element.
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
+- `disable-instant-flush`: If specified, changes will only be saved once they have settled (E.g. after the element has lost focus or when the enter key is pressed).
 - `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. It takes a list of selectors with optional attributes to target in the format `element-selector:attribute-name`. 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.

package/input-provider.js

@@ -222,6 +222,7 @@ class InputProvider extends HTMLElement {
     if (inputElement.type !== 'checkbox') {
       onInputKeyUp = async (event) => {
         this.updateInputClassList(event.target.value);
+        if (this.hasAttribute('disable-instant-flush')) return;
         debounce(async () => {
           let elementName = this.getAttribute('name');
           let providerTemplate = this.getAttribute('provider-template');

package/model-input.js

@@ -395,6 +395,7 @@ class ModelInput extends SocketConsumer {
     if (inputType !== 'checkbox' && inputType !== 'select' && inputType !== 'file') {
       onInputKeyUp = async (event) => {
         inputElement.classList.remove(successStyleClass);
+        if (this.hasAttribute('disable-instant-flush')) return;
         debounce(async () => {
           if (event.target.value === String(model.value[fieldName] || '')) return;
           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.3.0",
+  "version": "4.5.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {