@cocreate/element-prototype 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.19.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.18.0...v1.19.0) (2024-01-30)
+
+
+### Bug Fixes
+
+* improved input true and false value ([b788abb](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/b788abba4ea09c774af693f89bf6da96a5721665))
+* value must be a string to test for url operators ([de1ed9d](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/de1ed9d64164b08098c34c0ceb5b51918d201f0e))
+
+
+### Features
+
+* handle url search params ([2bc548e](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/2bc548ed1adf74dfa795161e8d7959f79d75482d))
+* special values and regex support ([083d56a](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/083d56a4ab63aa6a8d347770dcfda5ddafedc866))
+
 # [1.18.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.17.0...v1.18.0) (2024-01-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/element-prototype",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "element-prototype",

package/src/getValue.js

@@ -17,7 +17,7 @@ HTMLHeadingElement.prototype.getValue = function () {
 
 // TODO: check if using a a switch case will provide better performance
 const getValue = (element) => {
-    let value = element.value || element.getAttribute('value')
+    let value = element.value || element.getAttribute('value') || "";
     if (element.hasAttribute('component') || element.hasAttribute('plugin')) {
         value = storage.get(element)
         storage.delete(element)
@@ -64,6 +64,11 @@ const getValue = (element) => {
         value = [Number(element.min), Number(element.value)];
     } else if (element.type === "password") {
         value = btoa(value || '');
+    } else if (element.type === "email") {
+        value = value.toLowerCase();
+    } else if (element.type === "url") {
+        // TODO: define attributes to return url parts
+        // return as a string or an object of url parts
     } else if (element.tagName == "SELECT" && element.hasAttribute('multiple')) {
         let options = element.selectedOptions;
         value = [];
@@ -109,13 +114,76 @@ const getValue = (element) => {
         }
     }
 
-    if (value === '$user_id')
-        value = localStorage.getItem('user_id')
-    else if (value === '$organization_id')
+    if (value === '$organization_id')
         value = localStorage.getItem('organization_id')
+    else if (value === '$user_id')
+        value = localStorage.getItem('user_id')
     else if (value === '$clientId')
         value = localStorage.getItem('clientId')
+    else if (value === '$session_id')
+        value = localStorage.getItem('session_id')
+    else if (typeof value === 'string') {
+        if (value.startsWith('$search')) {
+            const searchParams = new URLSearchParams(window.location.search);
+            if (value.includes('.')) {
+                value = searchParams.get(value.split('.')[1]);
+            } else {
+                const paramsObject = {};
+
+                // Iterate over all key-value pairs and add them to the object
+                for (const [key, value] of searchParams) {
+                    paramsObject[key] = value;
+                }
+                value = paramsObject
+            }
+
+        } else if ([
+            '$href',
+            '$origin',
+            '$protocol',
+            '$host',
+            '$hostname',
+            '$port',
+            '$pathname',
+            '$hash'
+        ].includes(value)) {
+            value = window.location[value.substring(1)]
+        }
+    }
+
+    let replace = element.getAttribute('value-replace');
+    let replaceAll = element.getAttribute('value-replaceall');
+
+    if (replace || replaceAll) {
+        let replaceWith = element.getAttribute('value-replace-with') || "";
+        let replaceRegex = element.getAttribute('value-replace-regex');
+
+        if (replaceRegex) {
+            try {
+                if (replace)
+                    value = value.replace(replaceRegex, replaceWith);
+                else
+                    value = value.replaceAll(replaceRegex, replaceWith);
+            } catch (error) {
+                console.error('getValue() Regex error:', error, element);
+            }
+        } else {
+            if (replace)
+                value = value.replace(replace, replaceWith);
+            else
+                value = value.replaceAll(replaceAll, replaceWith);
+        }
+    }
+
+    let lowercase = element.getAttribute('value-lowercase')
+    if (lowercase || lowercase === '')
+        value = value.toLowerCase()
+    let uppercase = element.getAttribute('value-uppercase');
+    if (uppercase || uppercase === '')
+        value = value.toUpperCase()
+
     return value;
+
 };
 
 export { getValue, storage };

package/src/setValue.js

@@ -47,7 +47,9 @@ const setValue = (el, value, dispatch) => {
 
             for (let i = 0; i < inputs.length; i++) {
                 if (inputs[i].value) {
-                    if (value === true || value.includes(inputs[i].value))
+                    if (value === true || value === false)
+                        inputs[i].checked = value;
+                    else if (value.includes(inputs[i].value))
                         inputs[i].checked = true;
                     else
                         inputs[i].checked = false;