saasufy-components 1.0.3 → 1.0.5

package/README.md

@@ -1,2 +1,38 @@
-# components
+# Saasufy Components
 Components for Saasufy
+
+## How to use
+
+Coming soon.
+
+## Components
+
+### collection-adder
+
+A form component for inserting data into collections.
+
+### collection-browser
+
+Used for rendering collections as lists, tables or other sequences based on a specific view.
+Supports pagination by allowing you to specify custom buttons or links to navigate between pages.
+Can also perform basic CRUD operations such as deleting or creating records.
+
+### model-input
+
+Used for displaying and editing a field of a model instance in real time.
+
+### confirm-modal
+
+A modal component to prompt the user for confirmation before performing sensitive operations.
+
+### model-text
+
+Used to displaying a field of a model instance in real time.
+
+### overlay-modal
+
+A general purpose modal component.
+
+### render-group
+
+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.

package/model-input.js

@@ -1,5 +1,5 @@
 import { getSocket } from './socket.js';
-import { getSafeHTML } from './utils.js';
+import { getSafeHTML, debouncer } from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
 class ModelInput extends HTMLElement {
@@ -30,6 +30,7 @@ class ModelInput extends HTMLElement {
       'model-type',
       'model-id',
       'model-field',
+      'debounce-delay',
       'options',
       'height'
     ];
@@ -199,38 +200,21 @@ class ModelInput extends HTMLElement {
       messageContainerElement.classList.add('hidden');
     };
 
-    let onInputChange = async (event) => {
-      if (event.target.value === String(model.value[fieldName])) return;
-      try {
-        if (inputElement.type === 'checkbox') {
-          await model.update(fieldName, !!inputElement.checked);
-          inputElement.classList.remove(errorStyleClass);
-          inputElement.classList.add(successStyleClass);
-          hideErrorMessage(fieldName);
-          return;
-        }
-        if (event.target.value === '') {
-          await model.delete(fieldName);
-        } else {
-          let targetValue = inputElement.type === 'number' ?
-            Number(event.target.value) : event.target.value;
-          await model.update(fieldName, targetValue);
-        }
-        inputElement.classList.remove(errorStyleClass);
-        inputElement.classList.add(successStyleClass);
-        hideErrorMessage(fieldName);
-      } catch (error) {
-        inputElement.classList.add(errorStyleClass);
-        inputElement.classList.remove(successStyleClass);
-        showErrorMessage(fieldName, error.message);
-      }
-    };
-    inputElement.addEventListener('change', onInputChange);
+    let debounceDelay = this.getAttribute('debounce-delay');
+    debounceDelay = debounceDelay ? Number(debounceDelay) : null;
+    let debounce = debouncer();
 
-    let onInputKeyUp;
-    if (inputElement.type !== 'checkbox') {
-      onInputKeyUp = async (event) => {
+    let onInputChange = (event) => {
+      if (event.target.value === String(model.value[fieldName])) return;
+      debounce(async () => {
         try {
+          if (inputElement.type === 'checkbox') {
+            await model.update(fieldName, !!inputElement.checked);
+            inputElement.classList.remove(errorStyleClass);
+            inputElement.classList.add(successStyleClass);
+            hideErrorMessage(fieldName);
+            return;
+          }
           if (event.target.value === '') {
             await model.delete(fieldName);
           } else {
@@ -246,6 +230,31 @@ class ModelInput extends HTMLElement {
           inputElement.classList.remove(successStyleClass);
           showErrorMessage(fieldName, error.message);
         }
+      }, debounceDelay);
+    };
+    inputElement.addEventListener('change', onInputChange);
+
+    let onInputKeyUp;
+    if (inputElement.type !== 'checkbox') {
+      onInputKeyUp = async (event) => {
+        debounce(async () => {
+          try {
+            if (event.target.value === '') {
+              await model.delete(fieldName);
+            } else {
+              let targetValue = inputElement.type === 'number' ?
+              Number(event.target.value) : event.target.value;
+              await model.update(fieldName, targetValue);
+            }
+            inputElement.classList.remove(errorStyleClass);
+            inputElement.classList.add(successStyleClass);
+            hideErrorMessage(fieldName);
+          } catch (error) {
+            inputElement.classList.add(errorStyleClass);
+            inputElement.classList.remove(successStyleClass);
+            showErrorMessage(fieldName, error.message);
+          }
+        }, debounceDelay);
       };
       inputElement.addEventListener('keyup', onInputKeyUp);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -19,7 +19,7 @@
   "dependencies": {
     "ag-collection": "^3.2.0",
     "ag-model": "^1.3.5",
-    "socketcluster-client": "^18.3.0"
+    "socketcluster-client": "^19.0.2"
   },
   "bugs": {
     "url": "https://github.com/Saasufy/saasufy-components/issues"