@cocreate/element-prototype 1.31.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,11 @@
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/element-prototype",
-  "version": "1.31.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,134 +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 {
-		value = new Date();
+		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();
-		}
-
-		// Format for 'time' type elements
-		if (element.type === "time" && !valueType) {
-			value = value.substring(11, 19) + "Z";
+	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;
 		}
 
-		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;
-				case "addDays":
-					// Add days to the current date
-					const addDays = parseInt(element.getAttribute("add-days") || 0, 10);
-					value.setDate(value.getDate() + addDays);
-					value = value.toISOString();
-					break;
-				case "subtractDays":
-					// Subtract days from the current date
-					const subtractDays = parseInt(element.getAttribute("subtract-days") || 0, 10);
-					value.setDate(value.getDate() - subtractDays);
-					value = value.toISOString();
-					break;
-				case "startOfDay":
-					// Get the start of the current day (12:00 midnight)
-					const startOfDay = new Date(value);
-					startOfDay.setHours(0, 0, 0, 0); // Set time to midnight
-					value = startOfDay.toISOString();
-					break;
-				case "startOfWeek":
-					// Get the start of the current week (Sunday by default)
-					const startOfWeekOffset = parseInt(element.getAttribute("week-start-day") || 0, 10); // Default to Sunday (0)
-					const startOfWeek = new Date(value);
-					startOfWeek.setDate(value.getDate() - value.getDay() + startOfWeekOffset);
-					startOfWeek.setHours(0, 0, 0, 0); // Set to midnight
-					value = startOfWeek.toISOString();
-					break;
-				case "endOfWeek":
-					// Get the end of the current week (Saturday by default)
-					const endOfWeekOffset = parseInt(element.getAttribute("week-start-day") || 0, 10); // Default to Sunday (0)
-					const endOfWeek = new Date(value);
-					endOfWeek.setDate(value.getDate() - value.getDay() + 6 + endOfWeekOffset);
-					endOfWeek.setHours(23, 59, 59, 999); // Set to the end of the day
-					value = endOfWeek.toISOString();
-					break;
-				case "startOfMonth":
-					// Get the start of the month
-					value = new Date(value.getFullYear(), value.getMonth(), 1).toISOString();
-					break;
-				case "endOfMonth":
-					// Get the end of the month
-					value = new Date(value.getFullYear(), value.getMonth() + 1, 0).toISOString();
-					break;
-				case "startOfYear":
-					// Get the start of the year
-					value = new Date(value.getFullYear(), 0, 1).toISOString();
-					break;
-				case "endOfYear":
-					// Get the end of the year
-					value = new Date(value.getFullYear(), 11, 31).toISOString();
-					break;
-				
+		// --- 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]();
+				}
 
-				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/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, "");