saasufy-components 7.6.0 → 7.7.1

package/app-router.js

@@ -1,7 +1,7 @@
 import { toSafeHTML, renderTemplate, debouncer } from './utils.js';
 import { SocketConsumer } from './socket.js';
 
-const DEFAULT_DEBOUNCE_DELAY = 100;
+const DEFAULT_DEBOUNCE_DELAY = 200;
 const DEFAULT_MAX_REDIRECTS = 5;
 
 export class AppRouter extends SocketConsumer {

package/input-provider.js

@@ -133,21 +133,21 @@ class InputProvider extends HTMLElement {
     }
     this.inputElement = document.createElement(elementType);
     if (type === 'select') {
-      if (options) {
+      if (options != null) {
         let {
           fieldNames: optionNames,
           fieldValues: optionValues
         } = convertStringToFieldParams(options, true);
 
         let optionElements = optionNames
-        .map((optionName) => {
-          let optionValue = optionValues[optionName] || optionName;
-          if (optionName === placeholder) {
-            return `<option value="" selected class="select-default-option">${optionName}</option>`;
-          }
-          return `<option value="${optionValue}">${optionName}</option>`;
-        })
-        .join('');
+          .map((optionName) => {
+            let optionValue = optionValues[optionName] || optionName;
+            if (optionName === placeholder) {
+              return `<option value="" selected class="select-default-option">${optionName}</option>`;
+            }
+            return `<option value="${optionValue}">${optionName}</option>`;
+          })
+          .join('');
         this.inputElement.innerHTML = optionElements;
       }
     } else if (elementType === 'input') {

package/model-input.js

@@ -207,13 +207,21 @@ class ModelInput extends SocketConsumer {
     let optionList = null;
     if (type === 'select') {
       if (options != null) {
-        optionList = options.split(',');
-        let optionElements = optionList
-          .map((option) => {
-            return `<option value="${option}">${option}</option>`;
+        let {
+          fieldNames: optionNames,
+          fieldValues: optionValues
+        } = convertStringToFieldParams(options, true);
+
+        let optionElements = optionNames
+          .map((optionName) => {
+            let optionValue = optionValues[optionName] || optionName;
+            if (optionName === placeholder) {
+              return `<option value="" selected class="select-default-option">${optionName}</option>`;
+            }
+            return `<option value="${optionValue}">${optionName}</option>`;
           })
           .join('');
-          this.inputElement.innerHTML = optionElements;
+        this.inputElement.innerHTML = optionElements;
       }
     } else if (elementType === 'input') {
       if (inputList) {
@@ -345,7 +353,7 @@ class ModelInput extends SocketConsumer {
     let onInputChange = (event) => {
       inputElement.classList.remove(successStyleClass);
       debounce(async () => {
-        if (event.target.value === String(model.value[fieldName] || '')) return;
+        if (event.target.value === String(model.value[fieldName] ?? '')) return;
         let providerTemplate = this.getAttribute('provider-template');
         try {
           if (inputElement.type === 'checkbox') {
@@ -406,7 +414,7 @@ class ModelInput extends SocketConsumer {
         inputElement.classList.remove(successStyleClass);
         if (this.hasAttribute('disable-instant-flush')) return;
         debounce(async () => {
-          if (event.target.value === String(model.value[fieldName] || '')) return;
+          if (event.target.value === String(model.value[fieldName] ?? '')) return;
           let providerTemplate = this.getAttribute('provider-template');
           try {
             if (event.target.value === '') {

package/package.json

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