@cocreate/elements 1.38.0 → 1.39.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [1.39.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.38.1...v1.39.0) (2024-12-14)
+
+
+### Bug Fixes
+
+* allow empty strings and array values ([03ccb89](https://github.com/CoCreate-app/CoCreate-elements/commit/03ccb89cc10262a981c3e66ee279be8a49a58b4b))
+* delete element[i].hasRead in remove function ([e549c3d](https://github.com/CoCreate-app/CoCreate-elements/commit/e549c3d70b7b1701e425e1eadb828df681b619c4))
+* filter.init('el') ([571b179](https://github.com/CoCreate-app/CoCreate-elements/commit/571b179b99b6724988b2a65002bc53d5ba005d02))
+* getValueFromObject inorder to get values using dotNotation ([a101064](https://github.com/CoCreate-app/CoCreate-elements/commit/a101064413587e0a95b6423211f3084ad713e76f))
+* handling crud updates when render element used ([88c5781](https://github.com/CoCreate-app/CoCreate-elements/commit/88c5781e7ce02a672e84bed1bf993bbfcd29f83e))
+* moved observer out of loop as only needs to be declared once. ([4f9c63c](https://github.com/CoCreate-app/CoCreate-elements/commit/4f9c63cfdd3d4c6f065e9604535945420ab32b09))
+
+
+### Features
+
+* attribute observer organization_id and host ([28a9175](https://github.com/CoCreate-app/CoCreate-elements/commit/28a9175aa27f5c66205b350e6a4c14b19f014960))
+* Attribute refrence to define whether the crud refrence data will be excluded ([fb1c35d](https://github.com/CoCreate-app/CoCreate-elements/commit/fb1c35de0ebb2cc484d02f367f6d542266f4b8ed))
+
+## [1.38.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.38.0...v1.38.1) (2024-12-09)
+
+
+### Bug Fixes
+
+* formating ([b00cd97](https://github.com/CoCreate-app/CoCreate-elements/commit/b00cd97d4b930a6e2d31f0bb0fa99b4f3e9a507e))
+* handling reset type value ([4e10403](https://github.com/CoCreate-app/CoCreate-elements/commit/4e104034219333cbd0f49fd8f46cd9e24bd2dd94))
+
 # [1.38.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.37.1...v1.38.0) (2024-11-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.38.0",
+  "version": "1.39.0",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",

package/src/form.js

@@ -1,190 +1,210 @@
-import Observer from '@cocreate/observer';
-import { getAttributeNames, ObjectId } from '@cocreate/utils';
-import Action from '@cocreate/actions';
-import elementPrototype from '@cocreate/element-prototype';
-
+import Observer from "@cocreate/observer";
+import { getAttributeNames, ObjectId } from "@cocreate/utils";
+import Action from "@cocreate/actions";
+import elementPrototype from "@cocreate/element-prototype";
 
 /**
- * Initializes form elements. If no parameter is provided, or null is passed, it queries and initializes all form elements. 
+ * Initializes form elements. If no parameter is provided, or null is passed, it queries and initializes all form elements.
  * It can also initialize a single form element or an array of form elements.
- * 
+ *
  * @param {(Element|Element[]|null)} [elements] - Optional. A single form element, an array of form elements, or null.
  *     - If null or omitted, the function queries and initializes all form elements.
  *     - If a single form element is provided, it initializes that element.
  *     - If an array of form elements is provided, each element in the array is initialized.
  */
 function init(elements) {
-    if (!elements)
-        elements = document.querySelectorAll('form');
-    else if (!Array.isArray(elements))
-        elements = [elements]
-
-    for (let element of elements) {
-        Observer.init({
-            name: 'CoCreateFormElements',
-            observe: ['addedNodes'],
-            selector: '[storage], [database], [array], [index], [object], [key]',
-            callback: function (mutation) {
-                if (element == mutation.target.form)
-                    setAttribute(element, [mutation.target])
-            }
-        });
-
-        runObjectId(element);
-        setAttribute(element);
-        disableAutoFill(element);
-        setValue(element)
-        element.addEventListener('submit', function (event) {
-            if (!element.hasAttribute('action')) {
-                event.preventDefault();
-            }
-        });
-    }
+	if (!elements) elements = document.querySelectorAll("form");
+	else if (!Array.isArray(elements)) elements = [elements];
+
+	for (let element of elements) {
+		runObjectId(element);
+		setAttribute(element);
+		disableAutoFill(element);
+		setValue(element);
+		element.addEventListener("submit", function (event) {
+			if (!element.hasAttribute("action")) {
+				event.preventDefault();
+			}
+		});
+	}
 }
 
 /**
-* @param form
-*/
+ * @param form
+ */
+// TODO: runObjectId could potentially be removed and handled by element-prototype getAttribute $object_id
+// Somthing to consider is that $object_id is not replaced by an _id causing getAttribute to return a new _id on each get
 function runObjectId(form) {
-    let elements = Array.from(form.querySelectorAll("[object='ObjectId()']"));
-
-    if (form.getAttribute('object') === "ObjectId()") {
-        elements.push(form);
-    }
-    for (let i = 0; i < elements.length; i++) {
-        let array = elements[i].getAttribute('array')
-        if (!array)
-            continue
-        elements[i].setAttribute('object', ObjectId().toString())
-
-    }
+	let elements = Array.from(form.querySelectorAll("[object='ObjectId()']"));
+
+	if (form.getAttribute("object") === "ObjectId()") {
+		elements.push(form);
+	}
+	for (let i = 0; i < elements.length; i++) {
+		let array = elements[i].getAttribute("array");
+		if (!array) continue;
+		elements[i].setAttribute("object", ObjectId().toString());
+	}
 }
 
 /**
-* @param form
-*/
+ * @param form
+ */
 function setAttribute(form, elements) {
-    if (!elements)
-        elements = form.querySelectorAll('[storage], [database], [array], [index], [object], [key]');
-
-    for (let attribute of form.attributes) {
-        let variable = window.CoCreateConfig.attributes[attribute.name]
-
-        // Set the attribute of all elements in the variable
-        if (variable) {
-            for (let el of elements) {
-                // Set the value of the attribute.
-                // TODO: skip-attribute naming convention, perhaps skip by defualt if storage, database, array not the same and use attribute to apply for cases where one _id will be used across 2 arrays
-                if (!el.getAttribute(attribute.name) && !el.hasAttribute('skip-attribute')) {
-                    el.setAttribute(attribute.name, attribute.value);
-                }
-            }
-        }
-    }
+	if (!elements)
+		elements = form.querySelectorAll(
+			"[organization_id], [host], [storage], [database], [array], [index], [object], [key]"
+		);
+
+	for (let attribute of form.attributes) {
+		let variable = window.CoCreateConfig.attributes[attribute.name];
+
+		// Set the attribute of all elements in the variable
+		if (variable) {
+			for (let el of elements) {
+				// Set the value of the attribute.
+				// TODO: skip-attribute naming convention, perhaps skip by defualt if storage, database, array not the same and use attribute to apply for cases where one _id will be used across 2 arrays
+				if (
+					!el.getAttribute(attribute.name) &&
+					!el.hasAttribute("skip-attribute")
+				) {
+					el.setAttribute(attribute.name, attribute.value);
+				}
+			}
+		}
+	}
 }
 
 /**
-* @param element
-*/
+ * @param element
+ */
 function disableAutoFill(element) {
-    // Clear the text area and set the autocomplete attribute to off.
-    if (element.tagName == "TEXTAREA") {
-        element.value = "";
-        element.setAttribute("autocomplete", "off");
-    }
-    // Set the autocomplete attribute to off.
-    if (!element.hasAttribute("autocomplete")) {
-        element.setAttribute('autocomplete', "off");
-    }
+	// Clear the text area and set the autocomplete attribute to off.
+	if (element.tagName == "TEXTAREA") {
+		element.value = "";
+		element.setAttribute("autocomplete", "off");
+	}
+	// Set the autocomplete attribute to off.
+	if (!element.hasAttribute("autocomplete")) {
+		element.setAttribute("autocomplete", "off");
+	}
 }
 
 /**
-* @param form
-*/
+ * @param form
+ */
 function reset(form) {
-    // Convert the form elements collection to an array
-    const formElementsArray = Array.from(form.elements);
-
-    // Query for additional elements with [object] or [key] attributes that are not already part of form controls
-    const customElements = Array.from(form.querySelectorAll('[object], [key]:not(input):not(select):not(textarea):not(button)'));
-
-    // Merge form elements and custom elements using the spread operator
-    const allElements = [...formElementsArray, ...customElements];
-
-    // Store the elements and their values in a map for restoration
-    const elementStates = new Map();
-
-    // Iterate over all elements and store their current state based on the 'reset' attribute
-    for (const element of allElements) {
-        if (['BUTTON', 'FIELDSET'].includes(element.tagName))
-            continue
-        // Get the reset attribute value, if any
-        const resetType = element.getAttribute('reset');
-        if (element.hasAttribute('object') && (!resetType || resetType === 'object'))
-            element.setAttribute('object', '');
-        if (resetType === 'false' || resetType === 'object')
-            elementStates.set(element, element.getValue() || element.value || element.getAttribute('value'));
-        if (!resetType || resetType !== 'object')
-            element.setValue('')
-    }
-
-    if (form.hasAttribute('object'))
-        form.setAttribute('object', '');
-
-    // Perform the default form reset
-    form.reset();
-
-    // Restore values based on the 'reset' attribute
-    elementStates.forEach((value, element) => {
-        element.setValue(value)
-    });
-
-    // Dispatch a custom reset event
-    document.dispatchEvent(new CustomEvent('reset', {
-        detail: {}
-    }));
+	// Convert the form elements collection to an array
+	const formElementsArray = Array.from(form.elements);
+
+	// Query for additional elements with [object] or [key] attributes that are not already part of form controls
+	const customElements = Array.from(
+		form.querySelectorAll(
+			"[object], [key]:not(input):not(select):not(textarea):not(button)"
+		)
+	);
+
+	// Merge form elements and custom elements using the spread operator
+	const allElements = [...formElementsArray, ...customElements];
+
+	// Store the elements and their values in a map for restoration
+	const elementStates = new Map();
+
+	// Iterate over all elements and store their current state based on the 'reset' attribute
+	for (const element of allElements) {
+		if (["BUTTON", "FIELDSET"].includes(element.tagName)) continue;
+		// Get the reset attribute value, if any
+		const resetType = element.getAttribute("reset");
+		if (
+			element.hasAttribute("object") &&
+			(!resetType || resetType === "object")
+		)
+			element.setAttribute("object", "");
+		if (resetType === "false" || resetType === "object")
+			elementStates.set(
+				element,
+				element.getValue() ||
+					element.value ||
+					element.getAttribute("value")
+			);
+		if (!resetType || resetType === "value") element.setValue("");
+	}
+
+	if (form.hasAttribute("object")) form.setAttribute("object", "");
+
+	// Perform the default form reset
+	form.reset();
+
+	// Restore values based on the 'reset' attribute
+	elementStates.forEach((value, element) => {
+		element.setValue(value);
+	});
+
+	// Dispatch a custom reset event
+	document.dispatchEvent(
+		new CustomEvent("reset", {
+			detail: {}
+		})
+	);
 }
 
 function setValue(form) {
-    form.setValue = (value) => {
-        if (typeof value !== "object")
-            elementPrototype.setValue(form, value);
-        else {
-            const inputs = form.querySelectorAll('[name], [key]');
-            inputs.forEach(element => {
-                const key = element.getAttribute('key') || element.getAttribute('name');
-                if (value[key]) {
-                    element.setValue(value[key]);
-                }
-            });
-
-        }
-    }
+	form.setValue = (value) => {
+		if (typeof value !== "object") elementPrototype.setValue(form, value);
+		else {
+			const inputs = form.querySelectorAll("[name], [key]");
+			inputs.forEach((element) => {
+				const key =
+					element.getAttribute("key") || element.getAttribute("name");
+				if (value[key]) {
+					element.setValue(value[key]);
+				}
+			});
+		}
+	};
 }
 
 Observer.init({
-    name: 'CoCreateForm',
-    observe: ['addedNodes'],
-    selector: 'form',
-    callback: mutation => init(mutation.target)
+	name: "CoCreateForm",
+	observe: ["addedNodes"],
+	selector: "form",
+	callback: (mutation) => init(mutation.target)
+});
+
+Observer.init({
+	name: "CoCreateForm",
+	observe: ["attributes"],
+	attributeName: getAttributeNames([
+		"organization_id",
+		"host",
+		"storage",
+		"database",
+		"array",
+		"object",
+		"index"
+	]),
+	selector: "form",
+	callback: (mutation) =>
+		mutation.target.tagName === "FORM" && setAttribute(mutation.target)
 });
 
 Observer.init({
-    name: 'CoCreateForm',
-    observe: ['attributes'],
-    attributeName: getAttributeNames(['storage', 'database', 'array', 'object', 'index']),
-    selector: 'form',
-    callback: mutation => mutation.target.tagName === "FORM" &&
-        setAttribute(mutation.target)
+	name: "CoCreateFormElements",
+	observe: ["addedNodes"],
+	selector:
+		"[organization_id], [host], [storage], [database], [array], [index], [object], [key]",
+	callback: function (mutation) {
+		if (mutation.target.form)
+			setAttribute(mutation.target.form, [mutation.target]);
+	}
 });
 
 Action.init({
-    name: "reset",
-    endEvent: "reset",
-    callback: (action) => {
-        if (action.form)
-            reset(action.form);
-    }
+	name: "reset",
+	endEvent: "reset",
+	callback: (action) => {
+		if (action.form) reset(action.form);
+	}
 });
 
 init();