saasufy-components 2.12.0 → 2.13.0

package/collection-adder.js

@@ -1,4 +1,5 @@
 import { SocketConsumer } from './socket.js';
+import { convertStringToFieldParams, getTypeCastFunction } from './utils.js';
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 
 class CollectionAdder extends SocketConsumer {
@@ -6,18 +7,7 @@ class CollectionAdder extends SocketConsumer {
     super();
     this.options = options || {};
 
-    this.typeCastFunctions = {
-      text: String,
-      textarea: String,
-      checkbox: Boolean,
-      number: Number,
-      radio: String,
-      select: String,
-      'text-select': String
-    };
-    this.fieldPartsRegExp = /("[^"]*"|'[^']*'|\([^)]*\)|[^,()"']+)+/g;
     this.inputTypeWithParamsRegExp = /^([^()]*)(\(([^)]*)\))?/;
-    this.quotedContentRegExp = /^\s*["']?(.*?)["']?\s*$/;
     this.isReady = false;
   }
 
@@ -52,44 +42,6 @@ class CollectionAdder extends SocketConsumer {
     this.render();
   }
 
-  getTypeCastFunction(type) {
-    return this.typeCastFunctions[type] || ((value) => value);
-  }
-
-  getFieldDetails(string) {
-    let parts = ((string || '').match(this.fieldPartsRegExp) || []).map(field => field.trim());
-    let fieldTypeValues = parts.map((part) => {
-      let subParts = part.split('=');
-      let nameType = (subParts[0] || '').split(':');
-      let name = nameType[0];
-      let type = nameType[1] || 'text';
-      let value = subParts.slice(1).join('=').replace(this.quotedContentRegExp, '$1');
-      return {
-        name,
-        type,
-        value
-      }
-    });
-    let fieldNames = fieldTypeValues.map(item => item.name);
-    let fieldTypes = Object.fromEntries(
-      fieldTypeValues.map(item => [ item.name, item.type ])
-    );
-    let fieldValues = Object.fromEntries(
-      fieldTypeValues.map(
-        (item) => {
-          let type = fieldTypes[item.name];
-          let Type = this.getTypeCastFunction(type);
-          return [ item.name, Type(item.value) ];
-        }
-      )
-    );
-    return {
-      fieldNames,
-      fieldTypes,
-      fieldValues
-    };
-  }
-
   async submit() {
     if (!this.isReady) {
       throw new Error('Collection adder form is not ready to be submitted');
@@ -119,7 +71,7 @@ class CollectionAdder extends SocketConsumer {
           .filter(input => input.value !== '')
           .map((input) => {
             let fieldType = this.fieldTypes[input.name];
-            let Type = this.getTypeCastFunction(fieldType);
+            let Type = getTypeCastFunction(fieldType);
             let value;
             if (fieldType === 'checkbox') {
               value = input.checked;
@@ -180,22 +132,22 @@ class CollectionAdder extends SocketConsumer {
     let {
       fieldNames,
       fieldTypes
-    } = this.getFieldDetails(this.getAttribute('collection-fields'));
+    } = convertStringToFieldParams(this.getAttribute('collection-fields'));
 
     this.fieldTypes = fieldTypes;
 
     let {
       fieldNames: modelFieldNames,
       fieldValues: modelFieldValues
-    } = this.getFieldDetails(this.getAttribute('model-values'));
+    } = convertStringToFieldParams(this.getAttribute('model-values'));
 
     let {
       fieldValues: modelFieldLabels
-    } = this.getFieldDetails(this.getAttribute('field-labels'));
+    } = convertStringToFieldParams(this.getAttribute('field-labels'));
 
     let {
       fieldValues: optionLabels
-    } = this.getFieldDetails(this.getAttribute('option-labels'));
+    } = convertStringToFieldParams(this.getAttribute('option-labels'));
 
     let autocapitalize = this.getAttribute('autocapitalize');
     let autocorrect = this.getAttribute('autocorrect');

package/model-input.js

@@ -61,6 +61,14 @@ class ModelInput extends SocketConsumer {
 
   set value(newValue) {
     if (this.inputElement) {
+      if (this.inputElement.type === 'checkbox') {
+        let oldValue = this.inputElement.checked;
+        this.inputElement.checked = newValue;
+        if (oldValue !== newValue) {
+          this.triggerChange();
+        }
+        return;
+      }
       let oldValue = this.inputElement.value;
       this.inputElement.value = newValue;
       if (oldValue !== newValue) {
@@ -70,7 +78,13 @@ class ModelInput extends SocketConsumer {
   }
 
   get value() {
-    return (this.inputElement && this.inputElement.value) || '';
+    if (!this.inputElement) {
+      return '';
+    }
+    if (this.inputElement.type === 'checkbox') {
+      return this.inputElement.checked;
+    }
+    return this.inputElement.value;
   }
 
   render() {

package/package.json

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

package/utils.js

@@ -291,6 +291,57 @@ export function generateRandomHexString(byteLength) {
   }).join('');
 }
 
+export const fieldPartsRegExp = /("[^"]*"|'[^']*'|\([^)]*\)|[^,()"']+)+/g;
+export const quotedContentRegExp = /^\s*["']?(.*?)["']?\s*$/;
+
+export const typeCastFunctions = {
+  text: String,
+  textarea: String,
+  checkbox: Boolean,
+  number: Number,
+  radio: String,
+  select: String,
+  'text-select': String
+};
+
+export function getTypeCastFunction(type) {
+  return typeCastFunctions[type] || ((value) => value);
+}
+
+export function convertStringToFieldParams(string) {
+  let parts = ((string || '').match(fieldPartsRegExp) || []).map(field => field.trim());
+  let fieldTypeValues = parts.map((part) => {
+    let subParts = part.split('=');
+    let nameType = (subParts[0] || '').split(':');
+    let name = nameType[0];
+    let type = nameType[1] || 'text';
+    let value = subParts.slice(1).join('=').replace(quotedContentRegExp, '$1');
+    return {
+      name,
+      type,
+      value
+    }
+  });
+  let fieldNames = fieldTypeValues.map(item => item.name);
+  let fieldTypes = Object.fromEntries(
+    fieldTypeValues.map(item => [ item.name, item.type ])
+  );
+  let fieldValues = Object.fromEntries(
+    fieldTypeValues.map(
+      (item) => {
+        let type = fieldTypes[item.name];
+        let Type = getTypeCastFunction(type);
+        return [ item.name, Type(item.value) ];
+      }
+    )
+  );
+  return {
+    fieldNames,
+    fieldTypes,
+    fieldValues
+  };
+}
+
 export function wait(duration) {
   return new Promise((resolve) => setTimeout(resolve, duration));
 }