@cocreate/element-prototype 1.30.0 → 1.31.1

package/.github/workflows/automated.yml

@@ -22,13 +22,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 22 # Required for the latest semantic-release plugins
       - name: Semantic Release
-        uses: cycjimmy/semantic-release-action@v3
+        uses: cycjimmy/semantic-release-action@v4 # Update to v4 for better Node 20+ support
         id: semantic
         with:
           extra_plugins: |
@@ -36,9 +36,8 @@ jobs:
             @semantic-release/git
             @semantic-release/github
         env:
-          GITHUB_TOKEN: "${{ secrets.GITHUB }}"
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}" # Use the built-in token if possible
           NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
     outputs:
       new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
       new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
-

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [1.31.1](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.31.0...v1.31.1) (2026-01-18)
+
+
+### Bug Fixes
+
+* improved handling of type ([afd4027](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/afd40271d6c299736ed13ff90a3ca1f98b5f0449))
+* update worklow ([636b355](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/636b35571bb11a30ba0310c65e3ecaf07e977476))
+
+# [1.31.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.30.0...v1.31.0) (2025-11-16)
+
+
+### Features
+
+* enhance date handling in getValue and add custom operators for number formatting and UID generation ([280a469](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/280a469d7c8b007c4cb2ed35ac7f4645327ac25e))
+
 # [1.30.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.29.3...v1.30.0) (2025-10-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/element-prototype",
-  "version": "1.30.0",
+  "version": "1.31.1",
   "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

@@ -43,7 +43,8 @@ const getValue = (element, valueType) => {
 	let suffix = element.getAttribute("value-suffix") || "";
 
 	// Determine elementType using type first, fallback to tagName (both lowercase and uppercase respectively)
-	const elementType = element.type ? element.type.toLowerCase() : null;
+	// const elementType = element.type ? element.type.toLowerCase() : null;
+	const elementType =  element.getAttribute("type") || element.type
 	const tagName = element.tagName.toUpperCase();
 
 	// Switch statement to handle different element types and tagNames
@@ -196,80 +197,174 @@ const handleCheckbox = (element, prefix = "", suffix = "") => {
  * @param {string} valueType - Specifies the type of transformation to apply to the date/time value.
  * @returns {any} - The transformed or processed date/time value.
  */
+/**
+ * Handles and transforms a date/time value with a 3-step pipeline:
+ * 1. SNAP: Adjusts date to start/end of periods (Month, Week, Year).
+ * 2. MATH: Adds/Subtracts Years, Months, Weeks, Days, Hours, Minutes, Seconds.
+ * 3. FORMAT: Returns the final string/number representation.
+ */
 const handleDateTime = (element, value, valueType) => {
-	// Convert special string '$now' to current date
+	const inputType = (element.getAttribute("type") || element.type || "").toLowerCase();
+	let date;
 	if (value === "$now") {
-		value = new Date();
+		date = new Date();
+	} else if (value instanceof Date) {
+		// If it's already a date object, clone it to avoid mutating references
+		date = new Date(value.getTime());
 	} else if (value) {
-		// Initialize a new Date from the string or object
-		value = new Date(value);
+		if (
+			typeof value === "string" &&
+			/^\d{4}-\d{2}-\d{2}(?:[ T]\d{2}:\d{2}(?::\d{2}(?:\.\d{3})?)?(?:Z|[+-]\d{2}:?\d{2})?)?$/.test(
+				value
+			)
+		) {
+			// Normalize datetime-local only when seconds are absent; preserve provided seconds.
+			if (inputType === "datetime-local" && /^[0-9T:-]{16}$/.test(value)) {
+				value = `${value}:00`;
+			}
+			date = new Date(value);
+		} else {
+			date = new Date(value);
+		}
+	} else {
+		console.warn("Provided date is invalid:", value);
+		return "";
 	}
 
-	// Check if value is a valid date
-	if (value instanceof Date && !isNaN(value.getTime())) {
-		// Default behavior if no specific valueType provided
-		if (!valueType) {
-			value = value.toISOString();
+	if (date instanceof Date && !isNaN(date.getTime())) {
+		// These operations "floor" or "ceil" the date to a specific boundary.
+		switch (valueType) {
+			case "startOfDay":
+				date.setHours(0, 0, 0, 0);
+				break;
+			case "startOfWeek":
+				const startWkOff = parseInt(
+					element.getAttribute("week-start-day") || 0,
+					10
+				);
+				date.setDate(date.getDate() - date.getDay() + startWkOff);
+				date.setHours(0, 0, 0, 0);
+				break;
+			case "endOfWeek":
+				const endWkOff = parseInt(
+					element.getAttribute("week-start-day") || 0,
+					10
+				);
+				date.setDate(date.getDate() - date.getDay() + 6 + endWkOff);
+				date.setHours(23, 59, 59, 999);
+				break;
+			case "startOfMonth":
+				date.setDate(1);
+				date.setHours(0, 0, 0, 0);
+				break;
+			case "endOfMonth":
+				date.setMonth(date.getMonth() + 1, 0);
+				date.setHours(23, 59, 59, 999);
+				break;
+			case "startOfYear":
+				date.setMonth(0, 1);
+				date.setHours(0, 0, 0, 0);
+				break;
+			case "endOfYear":
+				date.setMonth(11, 31);
+				date.setHours(23, 59, 59, 999);
+				break;
 		}
 
-		// Format for 'time' type elements
-		if (element.type === "time" && !valueType) {
-			value = value.substring(11, 19) + "Z";
-		}
+		// --- PHASE 3: MATH (Modify the Date) 
+		// Helper to get integer value from attribute safely
+		const getVal = (attr) =>
+			parseInt(element.getAttribute(attr) || "0", 10);
+
+		// 1. Years
+		const addYears = getVal("add-years") - getVal("subtract-years");
+		if (addYears) date.setFullYear(date.getFullYear() + addYears);
+
+		// 2. Months
+		const addMonths = getVal("add-months") - getVal("subtract-months");
+		if (addMonths) date.setMonth(date.getMonth() + addMonths);
+
+		// 3. Weeks
+		const addWeeks = getVal("add-weeks") - getVal("subtract-weeks");
+		if (addWeeks) date.setDate(date.getDate() + addWeeks * 7);
+
+		// 4. Days
+		const addDays = getVal("add-days") - getVal("subtract-days");
+		if (addDays) date.setDate(date.getDate() + addDays);
+
+		// 5. Hours
+		const addHours = getVal("add-hours") - getVal("subtract-hours");
+		if (addHours) date.setHours(date.getHours() + addHours);
+
+		// 6. Minutes
+		const addMinutes = getVal("add-minutes") - getVal("subtract-minutes");
+		if (addMinutes) date.setMinutes(date.getMinutes() + addMinutes);
+
+		// 7. Seconds
+		const addSeconds = getVal("add-seconds") - getVal("subtract-seconds");
+		if (addSeconds) date.setSeconds(date.getSeconds() + addSeconds);
+
+
+		// --- PHASE 4: FORMATTING (Output the Result) ---
+		switch (valueType) {
+			case "getDayName":
+				const days = [
+					"Sunday",
+					"Monday",
+					"Tuesday",
+					"Wednesday",
+					"Thursday",
+					"Friday",
+					"Saturday",
+				];
+				return days[date.getDay()];
+
+			case "getMonthName":
+				const months = [
+					"January",
+					"February",
+					"March",
+					"April",
+					"May",
+					"June",
+					"July",
+					"August",
+					"September",
+					"October",
+					"November",
+					"December",
+				];
+				return months[date.getMonth()];
+
+			case "getYear":
+			case "getFullYear":
+				return date.getFullYear();
+
+			case "toUnixTimestamp":
+				return Math.floor(date.getTime() / 1000);
+
+			case "toLocaleString":
+				const locale = element.getAttribute("locale") || "en-US";
+				return date.toLocaleString(locale);
+
+			default:
+				// Handle generic methods if specified
+				if (valueType && typeof date[valueType] === "function") {
+					return date[valueType]();
+				}
 
-		if (valueType) {
-			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;
-				case "toLocaleString":
-					let locale = element.getAttribute("locale") || "en-US";
-					value = value.toLocaleString(locale);
-					break;
-				default:
-					if (typeof value[valueType] === "function") {
-						value = value[valueType]();
-					} else {
-						console.warn(
-							`The method ${valueType} is not a function of Date object.`
-						);
-					}
-					break;
-			}
+				const pad = (n) => String(n).padStart(2, "0");
+				if (inputType === "datetime-local") {
+					// Return a datetime-local compatible string with seconds to avoid invalid values
+					return `${date.getFullYear()}-${pad(
+						date.getMonth() + 1
+					)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(
+						date.getMinutes()
+					)}:${pad(date.getSeconds())}`;
+				}
+				return date.toISOString();
 		}
-	} else {
-		console.warn("Provided date is invalid or could not be parsed:", value);
 	}
-	return value;
 };
 
 /**

package/src/operators.js

@@ -1,4 +1,4 @@
-import { ObjectId, queryElements, getValueFromObject } from "@cocreate/utils";
+import { ObjectId, queryElements, getValueFromObject, uid } from "@cocreate/utils";
 
 // Operators handled directly for simple, synchronous value retrieval
 const customOperators = new Map(
@@ -54,7 +54,28 @@ const customOperators = new Map(
 			} catch (e) {
 				return value;
 			}
-		}
+		},
+		// TODO: Implement number formatting
+		$numberFormat: (element, args) => {
+			let number = parseFloat(args[0]);
+			// Simple, fixed arg mapping:
+			// args[0] = locale (internationalization)
+			// args[1] = options (object)
+			// args[2] = number (if provided). If not provided, fall back to legacy behavior where args[0] might be the number.
+			if (!Array.isArray(args)) args = [args];
+
+			const locale = args[0] || undefined;
+			const options = args[1] || {};
+			const numCandidate = args[2] !== undefined ? args[2] : args[0];
+
+			number = parseFloat(numCandidate);
+
+			if (isNaN(number)) return String(numCandidate ?? "");
+
+			return new Intl.NumberFormat(locale, options).format(number);
+		},
+		$uid: (element, args) => uid(args[0]) || "",
+
 	})
 );
 
@@ -206,19 +227,32 @@ const findInnermostFunctionCall = (expression) => {
  * @returns {{operator: string, args: string, rawContent: string, fullMatch?: string} | {operator: null, args: string, rawContent: string}}
  */
 const findInnermostOperator = (expression) => {
-    
+    	// Helper function to strip leading and trailing parentheses from a string
+	function stripParentheses(str) {
+		let result = str;
+		if (result.startsWith("(")) {
+			result = result.substring(1);
+		}
+		if (result.endsWith(")")) {
+			result = result.substring(0, result.length - 1);
+		}
+		return result;
+	}
+	let args;
+
     // --- 1. PRIORITY: Find Innermost FUNCTION CALL (Operator with Parentheses) ---
     const functionCall = findInnermostFunctionCall(expression);
 
     if (functionCall) {
-        // Return the full function expression details, including the full string section
-        return {
-            operator: functionCall.operator,
-            args: functionCall.args,
-            rawContent: functionCall.args, // The content inside the parentheses (arguments)
-            fullMatch: functionCall.fullMatch // The operator(args) string (the complete section to replace)
-        };
-    }
+		// Return the full function expression details, including the full string section
+		args = stripParentheses(functionCall.args);
+		return {
+			operator: functionCall.operator,
+			args, // Arguments without parentheses
+			rawContent: functionCall.args, // The content inside the parentheses (arguments)
+			fullMatch: functionCall.fullMatch // The operator(args) string (the complete section to replace)
+		};
+	}
     
     // --- 2. FALLBACK: Find BARE OPERATOR (e.g., $value path) ---
     
@@ -229,18 +263,22 @@ const findInnermostOperator = (expression) => {
     const innermostOperator = findBareOperatorInPath(rawContent, knownOperatorKeys);
 
     if (innermostOperator) {
-        const operatorArgs = rawContent.substring(innermostOperator.length).trim();
-        return {
-            operator: innermostOperator,
-            args: operatorArgs,
-            rawContent: rawContent,
-        };
-    }
+		const operatorArgs = rawContent.substring(innermostOperator.length).trim();
+		args = stripParentheses(operatorArgs);
+		return {
+			operator: innermostOperator,
+			args, // Arguments without parentheses
+			rawContent: rawContent,
+		};
+	}
+
 
+	args = stripParentheses(rawContent);
+	
     // Fallback if no known operator is found
     return {
         operator: null,
-        args: rawContent,
+        args,
         rawContent: rawContent
     };
 };
@@ -276,6 +314,7 @@ function processOperators(
 
 	let processedValue = value;
 	let hasPromise = false;
+	let parsedValue = null
 
 	while (processedValue.includes("$")) {
         
@@ -336,9 +375,18 @@ function processOperators(
 				replacement = resolvedValue ?? "";
 			}
 
-			// Manually replace the matched part of the string
+			if (processedValue === textToReplace) {
+				processedValue = replacement;
+				break;
+			}
+				
 			processedValue = processedValue.replace(textToReplace, replacement);
 
+			if (!processedValue.includes("$")) {
+				// If there are still unresolved operators, we need to continue processing
+				break;
+			}
+
 		} else {
 			// If operator is excluded, we need to advance past it to avoid infinite loop
 			break;

package/src/setValue.js

@@ -18,29 +18,44 @@ const setValue = (el, value, dispatch) => {
 		return storage.set(el, value);
 	else if (typeof value === "object") value = JSON.stringify(value, null, 2);
 
-	if (["time", "datetime", "datetime-local"].includes(el.type)) {
-		if (value) {
-			const date = new Date(value);
-			if (el.type === "time") {
-				// Format time as "HH:MM"
-				const hours = String(date.getHours()).padStart(2, "0");
-				const minutes = String(date.getMinutes()).padStart(2, "0");
-				el.value = `${hours}:${minutes}`;
-			} else if (el.type === "datetime-local") {
-				// Format datetime-local as "YYYY-MM-DDTHH:MM"
-				const year = date.getFullYear();
-				const month = String(date.getMonth() + 1).padStart(2, "0");
-				const day = String(date.getDate()).padStart(2, "0");
-				const hours = String(date.getHours()).padStart(2, "0");
-				const minutes = String(date.getMinutes()).padStart(2, "0");
-				el.value = `${year}-${month}-${day}T${hours}:${minutes}`;
+	if (["date", "time", "datetime", "datetime-local"].includes(el.getAttribute("type") || el.type )) {
+        if (value) {
+            const date = new Date(value);
+			// If 'use-utc' is present, we shift the time forward by the timezone offset.
+			if (el.hasAttribute("use-utc")) {
+				date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
 			}
-		} else {
-			el.value = "";
-		}
-		return dispatchEvents(el, bubbles, dispatch);
-	}
 
+            if (el.tagName === "INPUT") {
+				if (!isNaN(date.getTime())) {
+					// We no longer need ternary operators or if/else blocks here.
+					const year = date.getFullYear();
+					const month = String(date.getMonth() + 1).padStart(2, "0");
+					const day = String(date.getDate()).padStart(2, "0");
+					const hours = String(date.getHours()).padStart(2, "0");
+					const minutes = String(date.getMinutes()).padStart(2, "0");
+
+					// 5. Set Value
+					if (el.type === "time") {
+						el.value = `${hours}:${minutes}`;
+					} else if (el.type === "date") {
+						el.value = `${year}-${month}-${day}`;
+					} else {
+						el.value = `${year}-${month}-${day}T${hours}:${minutes}`;
+					}
+				} else {
+					console.warn(`Invalid date for input ${el.name}:`, value);
+					el.value = "";
+				}
+				return dispatchEvents(el, bubbles, dispatch);
+            } else if (!isNaN(date.getTime())) {
+				value = date.toLocaleString()
+			}
+        } else {
+            el.value = "";
+        }
+    }
+	
 	let valueType = el.getAttribute("value-type");
 	let prefix = el.getAttribute("value-prefix") || "";
 	if (prefix) value = value.toString().replace(prefix, "");