@cocreate/element-prototype 1.18.0 → 1.20.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [1.20.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.19.0...v1.20.0) (2024-02-03)
+
+
+### Bug Fixes
+
+* distpatchEvents if innerHtml ([9d55c26](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/9d55c26492014af2750a38ea7ea7e939b3df6577))
+* remove api typo ([2d7728b](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/2d7728b8e52d1d0d290ebfac1c35308cfb9c200a))
+
+
+### Features
+
+* value-types to handle date and time ([3a72fbc](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/3a72fbc23d9b8008a0bc488ac8230f5dfc2f86ea))
+
+# [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.20.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)
@@ -26,6 +26,7 @@ const getValue = (element) => {
 
     let prefix = element.getAttribute('value-prefix') || "";
     let suffix = element.getAttribute('value-suffix') || "";
+    let valueType = element.getAttribute('value-type');
 
     if (element.type === "checkbox") {
         let inputs = [element]
@@ -64,6 +65,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 = [];
@@ -73,10 +79,40 @@ const getValue = (element) => {
                 optionValue = prefix + optionValue + suffix;
             value.push(optionValue);
         }
-    } else if (["time", "datetime", "datetime-local"].includes(element.type)) {
-        value = new Date(value).toISOString();
-        if (el.type === 'time')
-            value = value.substring(11, 8) + 'Z';
+    } else if (["time", "date", "datetime", "datetime-local"].includes(element.type)) {
+        if (value === '$now')
+            value = new Date()
+        else if (value)
+            value = new Date(value)
+
+        if (value) {
+            if (!valueType)
+                value = value.toISOString()
+
+            if (element.type === 'time')
+                // value = value.substring(11, 8) + 'Z';
+                value = value.substring(11, 19) + 'Z';
+
+            switch (valueType) {
+                case 'getDayName':
+                    const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+                    value = days[value.getDay()];
+                    break;
+                case 'getMonthName':
+                    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+                    value = months[value.getMonth()];
+                    break;
+                case 'toUnixTimestamp':
+                    value = Math.floor(value.getTime() / 1000);
+                    break;
+                default:
+                    if (typeof value[valueType] === 'function') {
+                        value = value[valueType]();
+                    } else {
+                        console.warn(`The method ${valueType} is not a function of Date object.`);
+                    }
+            }
+        }
     } else if (element.tagName == 'INPUT' || element.tagName == 'SELECT') {
         value = element.value;
     } else if (element.tagName == 'TEXTAREA') {
@@ -92,7 +128,6 @@ const getValue = (element) => {
         value = element.innerHTML;
     }
 
-    let valueType = element.getAttribute('value-type');
     if (!Array.isArray(value)) {
         if (prefix || suffix)
             value = prefix + value + suffix;
@@ -109,13 +144,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;
@@ -130,6 +132,10 @@ const setValue = (el, value, dispatch) => {
         if (el.hasAttribute("value")) {
             el.setAttribute("value", value);
         }
+
+
+        dispatchEvents(el, dispatch);
+
     }
 
     if (el.getAttribute('contenteditable'))