@cocreate/elements 1.38.1 → 1.40.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# [1.40.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.39.0...v1.40.0) (2024-12-14)
+
+
+### Bug Fixes
+
+* allow empty strings and array values ([948a5ec](https://github.com/CoCreate-app/CoCreate-elements/commit/948a5ec60de14dc05df4650cfdf5ff3eae8f4bcd))
+* delete element[i].hasRead in remove function ([6cee7e9](https://github.com/CoCreate-app/CoCreate-elements/commit/6cee7e9ad2ed817c59fb7fe31fbeccd2746d8caf))
+* filter.init('el') ([804c9ad](https://github.com/CoCreate-app/CoCreate-elements/commit/804c9ad2d8c3cb4ad2ceeaf8c11c363268a139ce))
+* getValueFromObject inorder to get values using dotNotation ([b66e466](https://github.com/CoCreate-app/CoCreate-elements/commit/b66e466b3b03ffabc0f65b840c495fc174967075))
+* handling crud updates when render element used ([0216396](https://github.com/CoCreate-app/CoCreate-elements/commit/0216396988d394005282fc85e881054d45d93cfc))
+* moved observer out of loop as only needs to be declared once. ([4941c83](https://github.com/CoCreate-app/CoCreate-elements/commit/4941c837bcbb642f4266932e2e2e99bc4848a27c))
+
+
+### Features
+
+* attribute observer organization_id and host ([ba4eae9](https://github.com/CoCreate-app/CoCreate-elements/commit/ba4eae9d41cba3bf906c00b484a163ab36d373f7))
+* Attribute refrence to define whether the crud refrence data will be excluded ([b0d3243](https://github.com/CoCreate-app/CoCreate-elements/commit/b0d3243514a910292677e588c0654888b45070eb))
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.38.1",
+  "version": "1.40.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

@@ -17,17 +17,6 @@ function init(elements) {
 	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);
@@ -43,6 +32,8 @@ function init(elements) {
 /**
  * @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()']"));
 
@@ -62,7 +53,7 @@ function runObjectId(form) {
 function setAttribute(form, elements) {
 	if (!elements)
 		elements = form.querySelectorAll(
-			"[storage], [database], [array], [index], [object], [key]"
+			"[organization_id], [host], [storage], [database], [array], [index], [object], [key]"
 		);
 
 	for (let attribute of form.attributes) {
@@ -184,6 +175,8 @@ Observer.init({
 	name: "CoCreateForm",
 	observe: ["attributes"],
 	attributeName: getAttributeNames([
+		"organization_id",
+		"host",
 		"storage",
 		"database",
 		"array",
@@ -195,6 +188,17 @@ Observer.init({
 		mutation.target.tagName === "FORM" && setAttribute(mutation.target)
 });
 
+Observer.init({
+	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",

package/src/index.js

@@ -32,7 +32,8 @@ import {
 	sortData,
 	getAttributes,
 	getAttributeNames,
-	checkValue
+	checkValue,
+	getValueFromObject
 } from "@cocreate/utils";
 import filter from "@cocreate/filter";
 import { render, renderValue, renderedNodes } from "@cocreate/render";
@@ -150,7 +151,8 @@ async function initElement(el) {
 	// let attributes = ['filter-key', 'filter-search', 'filter-sort-key', 'filter-on', 'filter-limit']
 	// if (el.getFilter || attributes.some(attr => el.hasAttribute(attr))) {
 
-	await filter.init();
+	await filter.init(el);
+
 	if (el.getFilter) {
 		data.$filter = await el.getFilter();
 
@@ -272,7 +274,7 @@ async function read(element, data, dataKey) {
 			el.hasRead = true;
 			delay.elements.set(el, true);
 		} else {
-			// console.log('read skipped', el)
+			// console.log("read skipped", el);
 		}
 	}
 
@@ -392,6 +394,7 @@ async function setData(element, data) {
 			console.log("render-json", "");
 		}
 
+		let reference = el.getAttribute("reference");
 		let action = el.getAttribute("actions");
 		if (action && ["database", "array", "object", "key"].includes(action))
 			continue;
@@ -400,7 +403,10 @@ async function setData(element, data) {
 		if (el.getFilter || el.renderValue)
 			await filterData(el, data, type, key);
 		else {
-			if (!data[type] || !data[type].length) continue;
+			if (!data[type] || !data[type].length) {
+				if (el.hasAttribute("value-dispatch")) el.setValue("");
+				continue;
+			}
 
 			if (key && checkValue(key)) {
 				let value;
@@ -416,8 +422,16 @@ async function setData(element, data) {
 					if ($update) {
 						delete data[type][0].$update;
 						data[type][0] = { ...data[type][0], ...$update };
+					} else if (key === "{}") {
+						value = data[type][0];
+						if (reference === "false") {
+							delete data[type][0].$storage;
+							delete data[type][0].$database;
+							delete data[type][0].$array;
+						}
+					} else {
+						value = CRUD.getValueFromObject(data[type][0], key);
 					}
-					value = CRUD.getValueFromObject(data[type][0], key);
 				}
 
 				if (!data[type].length) continue;
@@ -427,6 +441,7 @@ async function setData(element, data) {
 					(isListen === "false" && !data.method.endsWith(".read"))
 				)
 					continue;
+
 				// TODO: object.update data returned from server will not include $operator
 				el.setValue(value);
 			}
@@ -445,8 +460,8 @@ async function filterData(element, data, type, key) {
 			operator = key.split(".")[0] || "";
 		}
 
-		let property = key.replace(operator + ".", "");
-
+		let property = key;
+		if (operator) property = property.replace(operator + ".", "");
 		if (Array.isArray(data[type])) {
 			let Data = [],
 				isObject;
@@ -462,16 +477,20 @@ async function filterData(element, data, type, key) {
 						doc = { ...doc, ...$update };
 					}
 				}
-				if (doc[property]) {
-					if (Array.isArray(doc[property]))
-						Data.push(...doc[property]);
+				let docValue = getValueFromObject(doc, property);
+				if (docValue) {
+					if (Array.isArray(docValue)) Data.push(...docValue);
 					else {
 						isObject = true;
-						Data.push(doc[property]);
+						Data.push(docValue);
 					}
 				} else continue;
 			}
 
+			if (isObject && Data.length === 1) {
+				Data = Data[0];
+			}
+
 			// if (isObject && Data.length === 1) {
 			//     data = { [property]: Data[0] }
 			// } else
@@ -819,14 +838,26 @@ async function getData(form) {
 				let attribute = element.getAttribute("actions");
 				if (attribute.includes("save", "delete")) continue;
 			}
+
+			if (
+				element.matches(
+					"[render-selector], [render-closest], [render-parent], [render-next], [render-previous]"
+				)
+			) {
+				let type = element.getAttribute("type");
+				if (type !== "file") continue;
+			}
+
+			let value = await element.getValue();
+			if (!value && value !== "") continue;
+
 			let Data = { ...data };
 			let dataKey = elements.get(element);
-			let value = await element.getValue();
 
 			// console.log(type, value, data)
 			if (!Data[Data.type] && Data.key) {
-				if (!value) continue;
-				else if (Array.isArray(value) && !value.length) continue;
+				// if (!value && value !== "") continue;
+				// else if (Array.isArray(value) && !value.length) continue;
 
 				Data.method = Data.type + ".create";
 				if (Data.type === "object") {
@@ -870,11 +901,11 @@ async function getData(form) {
 				}
 
 				if ((Data.type = "object")) {
-					if (Data.key == "{}") {
-						if (!value) continue;
-						else if (Array.isArray(value) && !value.length)
-							continue;
-					}
+					// if (Data.key == "{}") {
+					// 	if (!value && value !== "") continue;
+					// 	else if (Array.isArray(value) && !value.length)
+					// 		continue;
+					// }
 
 					if (typeof Data[Data.type] === "string")
 						if (Data.key == "{}") {
@@ -901,7 +932,9 @@ async function getData(form) {
 								...value
 							};
 						else {
-							Data[Data.type][0][Data.key] = value;
+							if (Data[Data.type][0]) {
+								Data[Data.type][0][Data.key] = value;
+							}
 							if (!Data[Data.type][0]._id)
 								Data.method = Data.type + ".create";
 						}
@@ -1194,6 +1227,7 @@ async function remove(element) {
 	)
 		element = [element];
 	for (let i = 0; i < element.length; i++) {
+		delete element[i].hasRead;
 		if (element[i].tagName === "FORM") {
 			let form = forms.get(element[i]);
 			if (!form) return;
@@ -1438,7 +1472,16 @@ Observer.init({
 Observer.init({
 	name: "CoCreateElementsAttributes",
 	observe: ["attributes"],
-	attributeName: ["storage", "database", "array", "index", "object", "key"],
+	attributeName: [
+		"organization_id",
+		"host",
+		"storage",
+		"database",
+		"array",
+		"index",
+		"object",
+		"key"
+	],
 	// target: selector, // blocks mutations when applied
 	callback: function (mutation) {
 		let currentValue = mutation.target.getAttribute(mutation.attributeName);
@@ -1462,6 +1505,8 @@ Actions.init([
 		name: "delete",
 		endEvent: "deleted",
 		callback: async (action) => {
+			// TODO: use selector to target elements for deletion if element is apart of render get render get rendering element for more crud detils
+			// this way any selector can be used to target crud deletions not just .selected
 			let elements = queryElements({
 				element: action.element,
 				prefix: "delete"