@cocreate/events 1.27.2 → 1.27.4

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [1.27.4](https://github.com/CoCreate-app/CoCreate-events/compare/v1.27.3...v1.27.4) (2025-10-11)
+
+
+### Bug Fixes
+
+* add support for blur event initialization in CoCreateEvents ([8c2aec3](https://github.com/CoCreate-app/CoCreate-events/commit/8c2aec3cf145fdce8abf65463332c09c6c3c57c5))
+* enhance conditional processing with else-if support and improve number parsing ([053f322](https://github.com/CoCreate-app/CoCreate-events/commit/053f3220fa8f98d20a02e6f3faa32340869b8e49))
+
+## [1.27.3](https://github.com/CoCreate-app/CoCreate-events/compare/v1.27.2...v1.27.3) (2025-09-07)
+
+
+### Bug Fixes
+
+* improve event handling and element manipulation in CoCreateEvents ([ae6b58a](https://github.com/CoCreate-app/CoCreate-events/commit/ae6b58a7c0dc313b426a2614b6cb141735dffbbb))
+
 ## [1.27.2](https://github.com/CoCreate-app/CoCreate-events/compare/v1.27.1...v1.27.2) (2025-05-01)
 
 

package/package.json

@@ -1,18 +1,10 @@
 {
   "name": "@cocreate/events",
-  "version": "1.27.2",
+  "version": "1.27.4",
   "description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "events",
-    "cocreate",
-    "low-code-framework",
-    "no-code-framework",
-    "cocreatejs",
-    "cocreatejs-component",
-    "cocreate-framework",
-    "no-code",
     "low-code",
-    "collaborative-framework",
     "realtime",
     "realtime-framework",
     "collaboration",

package/src/index.js

@@ -28,8 +28,9 @@ import "@cocreate/element-prototype";
 const CoCreateEvents = {
 	elements2: new Map(),
 	init: function (prefix, events) {
-		if (prefix && events) this.initPrefix(prefix, events);
-		else {
+		if (prefix && events) {
+			this.initPrefix(prefix, events);
+		} else {
 			this.initPrefix("toggle", ["click"]);
 			this.initPrefix("click", ["click"]);
 			this.initPrefix("hover", ["mouseover", "mouseout"]);
@@ -44,6 +45,7 @@ const CoCreateEvents = {
 			this.initPrefix("resize", ["onload", "resize"]);
 			this.initPrefix("localstorage", ["onload"]);
 			this.initPrefix("focus", ["focus"]);
+			this.initPrefix("blur", ["blur"]);
 		}
 
 		let customEventEls = document.querySelectorAll("[event-name]");
@@ -385,11 +387,9 @@ const CoCreateEvents = {
 		let elements = [el];
 		let targetGroup = el.getAttribute(`${prefix}-group`);
 		if (targetGroup) {
-			document
-				.querySelectorAll(`[${prefix}-group="${targetGroup}"]`)
-				.forEach((element) => {
-					if (element !== el) elements.push(element);
-				});
+			elements = document.querySelectorAll(
+				`[${prefix}-group="${targetGroup}"]`
+			);
 		}
 
 		for (let element of elements) {
@@ -513,6 +513,7 @@ const CoCreateEvents = {
 			}
 
 			let ifCondition = element.getAttribute(`${prefix}-if`);
+			let elseIfCondition = element.getAttribute(`${prefix}-else-if`);
 			let elseCondition = element.getAttribute(`${prefix}-else`);
 
 			let ifValue = element.getAttribute(`${prefix}-if-value`);
@@ -531,38 +532,16 @@ const CoCreateEvents = {
 				}
 			}
 
-			//TODO: improved resize toggling of values
-			// let hasCondition = this.elements2.get(element)
 			if (ifCondition) {
-				if (evaluateCondition(ifCondition, ifValue)) {
-					// Action 1: Condition exists and evaluates true
-					// console.log("Executing Action 1 for ifCondition:", ifCondition); // Optional debug log
-					// Replace this comment with your actual code for Path 1
-					// e.g., this.elements2.set(element, { condition: ifCondition });
-
-					// Assuming we stop processing for this element once a condition is met and actioned
-					return;
-				} else {
-					// Condition existed but evaluated false. Stop processing.
-					// Corresponds to the original `else if (ifCondition || elseCondition) { return; }` for the ifCondition case
+				// If the 'if' condition is not met, stop processing this element.
+				if (!evaluateCondition(ifCondition, ifValue)) {
 					return;
 				}
-			}
-
-			// If we reach here, ifCondition was falsy (didn't exist)
-			// Now check the 'else' condition
-			if (elseCondition) {
-				if (evaluateCondition(elseCondition, ifValue)) {
-					// Action 2: Condition exists and evaluates true
-					// console.log("Executing Action 2 for elseCondition:", elseCondition); // Optional debug log
-					// Replace this comment with your actual code for Path 2
-					// e.g., this.elements2.set(element, { condition: elseCondition });
-
-					// Assuming we stop processing for this element once a condition is met and actioned
-					return;
-				} else {
-					// Condition existed but evaluated false. Stop processing.
-					// Corresponds to the original `else if (ifCondition || elseCondition) { return; }` for the elseCondition case
+			} else if (elseCondition) {
+				// If there's no 'if' condition but there is an 'else' condition,
+				// stop processing if the 'else' condition is met.
+				// This creates an "execute unless" behavior for the 'else' attribute.
+				if (evaluateCondition(elseIfCondition, ifValue)) {
 					return;
 				}
 			}
@@ -583,8 +562,11 @@ const CoCreateEvents = {
 			if (el !== element) {
 				deactivate = true;
 			}
-			// values = values.map(x => x.trim());
+			if (events && events.includes("click")) {
+				// TODO: handling of attributes that represent states aria-expanded, aria-selected etc.
+			}
 
+			// values = values.map(x => x.trim());
 			values = values.map((x) => {
 				if (typeof x === "string") x = x.trim(); // Update x with the trimmed value
 				let prop = element.getAttribute(`${prefix}-property`);
@@ -604,10 +586,14 @@ const CoCreateEvents = {
 				targetElements = [element];
 			}
 
-			let action = element.getAttribute(`${prefix}-action`);
+			let action =
+				element.getAttribute(`${prefix}-action`) ||
+				element.getAttribute(`${prefix}-method`);
 			for (let i = 0; i < targetElements.length; i++) {
 				if (action) {
-					targetElements[i][action]();
+					if (targetElements[i][action]) {
+						targetElements[i][action]();
+					}
 				} else if (
 					!targetAttribute &&
 					targetAttribute !== "" &&
@@ -736,14 +722,18 @@ const CoCreateEvents = {
 				if (deactivate) newValue = "";
 				if (attrName === "class") {
 					if (oldValue) {
-						element.classList.remove(oldValue);
+						oldValue.split(" ").forEach((className) => {
+							element.classList.remove(className);
+						});
 						if (values.length === 1) {
 							return;
 						}
 					}
 
 					if (newValue) {
-						element.classList.add(newValue);
+						newValue.split(" ").forEach((className) => {
+							element.classList.add(className);
+						});
 					}
 				} else if (attrName === "value") {
 					element.setValue(newValue, false);
@@ -755,9 +745,11 @@ const CoCreateEvents = {
 					element[attrName.substring(1)]();
 				} else if (attrName) {
 					// TODO: removeAttribute vs setting empty value, how best to define. operator $remove ???
-					if (newValue === "" && element.hasAttribute(attrName))
+					if (newValue === "" && element.hasAttribute(attrName)) {
 						element.removeAttribute(attrName);
-					else element.setAttribute(attrName, newValue);
+					} else {
+						element.setAttribute(attrName, newValue);
+					}
 				} else if (targetPosition) {
 					if (domTextEditor) {
 						CoCreate.text.insertAdjacentElement({
@@ -928,7 +920,10 @@ function checkCondition(condition, value) {
 	// TODO: why parse updated conditin to boolean false
 	// if (parse && condition !== "false") condition = parseCondition(condition);
 
-	if (typeof value[0] === "number") {
+	if (
+		typeof condition === "number" ||
+		(typeof condition === "string" && /\d/.test(condition))
+	) {
 		condition = parseNumberCondition(condition);
 	} else if (typeof value[0] === "object" && typeof condition === "string") {
 		condition = parseJsonCondition(condition);
@@ -984,9 +979,11 @@ function parseJsonCondition(condition) {
 	}
 }
 function parseNumberCondition(condition) {
-	return !isNaN(condition) && condition.trim() !== ""
-		? Number(condition)
-		: condition;
+	if (typeof condition === "string") {
+		const num = parseFloat(condition);
+		return !isNaN(num) ? num : condition;
+	}
+	return condition;
 }
 
 // Helper function for delay using Promises