@cocreate/elements 1.12.12 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [1.13.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.12.12...v1.13.0) (2022-11-21)
+
+
+### Bug Fixes
+
+* crud.getAttr renamed to crud.getAttributes ([2aad3ae](https://github.com/CoCreate-app/CoCreate-elements/commit/2aad3ae39f92448e1832c87c23fa5327732c43bc))
+* data.document[0] ([f5929a7](https://github.com/CoCreate-app/CoCreate-elements/commit/f5929a7f17745fa3713077bd3735d0ca736b1fd9))
+* if document_id pending return ([e2ab044](https://github.com/CoCreate-app/CoCreate-elements/commit/e2ab044de1d871b061677fff497fca20f48cdd27))
+* if no document_id or filter return ([7edbd6c](https://github.com/CoCreate-app/CoCreate-elements/commit/7edbd6c1b92cc883d3e6a701470755bbecdd8225))
+* removed await from crud.save ([14229f1](https://github.com/CoCreate-app/CoCreate-elements/commit/14229f15a861d4dc156c2ceff7147646f0526494))
+* renamed crud.checkAttrValue to crud.checkValue ([3e159fa](https://github.com/CoCreate-app/CoCreate-elements/commit/3e159fab0e7176c186545f828838bf5de29ca1f1))
+* renamed data.data to data.document, relocated prototype setValue and getValue to @cocreate/element-prototype ([bf863e8](https://github.com/CoCreate-app/CoCreate-elements/commit/bf863e8b413e0841c9b9f8894b0243c03cb0ff49))
+* renamed fiter.setFilter to filter.init ([0a56f60](https://github.com/CoCreate-app/CoCreate-elements/commit/0a56f60d1681f76ea3463f00d044992c9200d81d))
+* typo ([24ad3fe](https://github.com/CoCreate-app/CoCreate-elements/commit/24ad3fedefee09bab03c98a49fe59c5d3382019d))
+
+
+### Features
+
+* Ability to use filter attribute to crud data. bump crud@cocreate/crud--client ([0206cb2](https://github.com/CoCreate-app/CoCreate-elements/commit/0206cb2fb27dbf8a28c0fc8b82daf1c5730192f8))
+* Add @cocreate/element-prototype ([1628ffa](https://github.com/CoCreate-app/CoCreate-elements/commit/1628ffafe61faa5ddf8eddbaff61a4100b0ae8db))
+* added crud.getAttributeNames to observer attributeName param, this will allow observing custom attributes ([f52e23d](https://github.com/CoCreate-app/CoCreate-elements/commit/f52e23de8555d7060203b377d39238d43933befd))
+* supports rendering multiple db, database, collection and documents ([00a67e5](https://github.com/CoCreate-app/CoCreate-elements/commit/00a67e59ae8c26ebccc2ca3aadb38eb780d1c558))
+
 ## [1.12.12](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.12.11...v1.12.12) (2022-10-02)
 
 

package/demo/index.html

@@ -6,10 +6,11 @@
     <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
   </head>
   <body>
-    <form collection="test" document_id="62844ba35b660d9424e352a0" class="margin:20px">
-      <input name="test">
-      <h1 name="name"></h1>
-      <h2 name="name1"></h2>
+    <form collection="test" document_id="6365199c6647d05d3edad570" class="margin:20px">
+      <input name="name">
+      <!-- <p name document>eeeeeer</p>
+      <h1 name="name" contenteditable></h1>
+      <h2 name="name"></h2>
       <h3 name="color" ></h3>
       <h4 name="search"></h4>
       <h5 name="date"></h5>
@@ -17,7 +18,7 @@
       <p name="date-time"></p>
       <span name="date-time"></span>
       <div name="text_area" classs="domeditor"></div>
-      <span name="personal_info.email"></span>
+      <span name="personal_info.email"></span> -->
     </form>
 
     <!--<script src="../dist/CoCreate-elements.js"></script>-->

package/demo/input-and-fetch.html

@@ -17,9 +17,9 @@
 		<div class="display:flex flex-wrap:wrap" fetch-collection="contacts" template_id="grid">
 
 			<div template_id="grid" class="template card margin:10px padding:20px background:gainsboro:hover">
-				<a pass_to="form-fields" pass-document_id="{{data._id}}">
-					<h4 collection="contacts" document_id="{{data._id}}" name="fullname">Name</h4>
-					<h4>{{data._id}}</h4>
+				<a pass_to="form-fields" pass-document_id="{{document._id}}">
+					<h4 collection="contacts" document_id="{{document._id}}" name="fullname">Name</h4>
+					<h4>{{document._id}}</h4>
 				</a>
 			</div>
 

package/demo/set-value.html

@@ -14,17 +14,17 @@
   <!--<ul id="a123"> hello </ul>-->
   
   <cocreate-select class="floating-label" id="collection" placeholder="collection:" set-value="#document_id" set-value-key="setcollection" active>
-    <ul fetch-collections template_id="collection" class="options z-index:7 margin-top:5px">
-      <cc-option class="option template" template_id="collection" value="{{data.name}}">
-        <span>{{data.name}}</span>
+    <ul fetch-collection template_id="collection" class="options z-index:7 margin-top:5px">
+      <cc-option class="option template" template_id="collection" value="{{collection.name}}">
+        <span>{{collection.name}}</span>
       </cc-option>
     </ul>
   </cocreate-select>
 
   <cocreate-select class="floating-label" id="document_id" placeholder="document_id:" active>
     <ul fetch-collection="{{setcollection}}" template_id="document_id" class="options z-index:7 margin-top:5px">
-			<cc-option class="option template" template_id="document_id" value="{{data._id}}">
-			    <span>{{data._id}}</span>
+			<cc-option class="option template" template_id="document_id" value="{{document._id}}">
+			    <span>{{document._id}}</span>
 			</cc-option>
     </ul>
   </cocreate-select>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.12.12",
+  "version": "1.13.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",
@@ -64,6 +64,7 @@
     "@cocreate/actions": "^1.5.12",
     "@cocreate/crud-client": "^1.12.12",
     "@cocreate/docs": "^1.3.18",
+    "@cocreate/element-prototype": "^1.0.0",
     "@cocreate/observer": "^1.5.17",
     "@cocreate/utils": "^1.10.12"
   }

package/src/getValue.js

@@ -1,5 +1,5 @@
 import observer from '@cocreate/observer';
-import { setValue } from './setValue';
+import '@cocreate/element-prototype';
 
 const valueEls = new Map();
 
@@ -63,8 +63,8 @@ function setValueByFind(valueEl, mutation) {
 		value = valueEl.getAttribute('value');
 	else if(valueEl.getValue)
 		value = valueEl.getValue();
-	else
-		value = getValue(valueEl);
+	// else
+	// 	value = getValue(valueEl);
 	if (!value) return;
 	let elements = mutation || valueEls.get(valueEl);
 	
@@ -97,62 +97,8 @@ function setValueByFind(valueEl, mutation) {
 			}
 		}
 		else
-			setValue(element, value);
-	}
-}
-
-var getValue = (element) => {
-	let value = element.value;
-	let prefix = element.getAttribute('value-prefix') || "";
-	let suffix = element.getAttribute('value-suffix') || "";
-
-	if (element.type === "checkbox") {
-		let el_name = element.getAttribute('name');
-		let checkboxs = document.querySelectorAll(`input[type=checkbox][name='${el_name}']`);
-		if (checkboxs.length > 1) {
-			value = [];
-			checkboxs.forEach(el => {
-				if (el.checked) value.push(el.value);
-			});
-		}
-		else {
-			value = element.checked;
-		}
-	}
-	else if (element.type === "number") {
-		value = Number(value);
-	}
-	else if (element.type === "password") {
-		value = __encryptPassword(value);
+			element.setValue(value);
 	}
-	else if (element.tagName == "SELECT" && element.hasAttribute('multiple')) {
-		let options = element.selectedOptions;
-		value = [];
-		for (let i = 0; i < options.length; i++) {
-			value.push(options[i].value);
-		}
-	}
-	else if (element.tagName == 'INPUT' || element.tagName == 'TEXTAREA' || element.tagName == 'SELECT') {
-		value = element.value;
-	}
-	else if (element.tagName === 'IFRAME') {
-		value = element.srcdoc;
-	}
-	else if (element.hasAttribute('value')){
-		value = element.getAttribute('value');
-	}
-	else {
-		value = element.innerHTML;
-	}
-	if (prefix || suffix)
-		value = prefix + value + suffix;
-
-	return value;
-};
-
-function __encryptPassword(str) {
-	let encodedString = btoa(str);
-	return encodedString;
 }
 
 observer.init({
@@ -164,4 +110,4 @@ observer.init({
 	}
 });
 
-export { initGetValues, getValue };
+export { initGetValues };

package/src/index.js

@@ -1,13 +1,22 @@
 import observer from '@cocreate/observer';
 import action from '@cocreate/actions';
-import crud from '@cocreate/crud-client';
-import { initSetValues, setValue } from './setValue';
-import { initGetValues, getValue } from './getValue';
+import CRUD from '@cocreate/crud-client';
+import ccfilter from '@cocreate/filter';
+import '@cocreate/element-prototype';
+import { initSetValues} from './setValue';
+import { initGetValues} from './getValue';
 import './fetchSrc';
-import './HTMLElement';
 
-const selector = "[collection][document_id][name]:not(cocreate-select, link), input, textarea, select, [contenteditable]";
+let crud
+if(CRUD && CRUD.default)
+	crud = CRUD.default
+else
+	crud = CRUD
+
+
+const selector = "[collection][name]:not(cocreate-select, link), input, textarea, select, [contenteditable]";
 const initializing = new Map();
+const els = new Map();
 
 function init() {
 	let elements = document.querySelectorAll(selector);
@@ -17,20 +26,39 @@ function init() {
 
 function initElements(elements) {
 	let documents = new Map();
+	// let els = []
 	for (let element of elements){
 		let doc = initElement(element);
 		if (doc) {
-			let collection = doc.collection;
-			let document_id = doc.document_id;
+			let key = JSON.stringify(doc)
+			let item = documents.get(key);
+			if (item)
+				doc.elements = [...item.elements, element]
+			else
+				doc.elements = [element]
+
+			// let collection = doc.collection;
+			// let document_id = doc.document_id;
+			// let filter = doc.filter;
 			let initialize = initializing.get(element)
-			if (!initialize || initialize.collection != collection && initialize.document_id != document_id){
-				initializing.set(element, {collection, document_id});
-				documents.set(`${collection}${document_id}`, {collection, document_id});
+			if (!initialize){
+				initializing.set(element, key);
+				documents.set(key, doc);
+				// els.set(key, doc);
+				// els.push(element)
+			} else {
+				// if (document_id && initialize.document_id != document_id || filter && JSON.stringify(initialize.filter) != JSON.stringify(filter)){
+				if (initialize != key){
+					initializing.set(element, key);
+					documents.set(key, doc);
+					// els.set(key, doc);
+					// els.push(element)
+				}
 			}
 		}
 	}
 	
-	read(documents, elements);
+	read(documents);
 }
 	
 function initElement(el) {
@@ -44,69 +72,96 @@ function initElement(el) {
 		return;
 	}
 	
-	const { collection, document_id, name, isRead } = crud.getAttr(el);
-	if (!collection || !document_id || !name) return;
-	if (!document_id.match(/^[0-9a-fA-F]{24}$/)) return; 
-	if (!crud.checkAttrValue(collection) || !crud.checkAttrValue(name)) return;
+	const { collection, document_id, name, isRead } = crud.getAttributes(el);
+	if (!collection || !name) return;
+
+	if (document_id)
+		if (!document_id.match(/^[0-9a-fA-F]{24}$/)) return; 
+	
+	let filter
+	if (el.hasAttribute('filter_id') || el.hasAttribute('filter-name' ) || el.hasAttribute('filter-sort-name')) {	
+		filter = ccfilter.init(el, "filter_id");
+	}
+
+	if (!crud.checkValue(collection) || !crud.checkValue(name)) return;
 	 
 	if (isRead == 'false') return;
-	return {collection, document_id};
+	if (!document_id && !filter) return;
+
+	return {collection, document_id, filter};
 }
 	
-async function read(documents, elements) {
+async function read(documents) {
 	if (documents && documents.size > 0) {
-		for (let [key, {collection, document_id}] of documents) {
+		for (let [key, {collection, document_id, filter, elements}] of documents) {
 			documents.delete(key);
-			var responseData = await crud.readDocument({
-				collection: collection,
-				document_id: document_id,
-			});
-			setData(elements, responseData);
+
+			let data = {collection}
+			if (document_id)
+				data.document = {_id: document_id}
+			if (filter)
+				data.filter = filter
+			
+			let response = await crud.readDocument(data);
+			setData(elements, response);
 		}
 	}
 }
 	
 function setData(elements, data) {
 	let isRendered = false;
-	if (!data.data) return;
+	if (!data.document || !data.document[0]) return;
+	let key = getKey(data)
+
 	if (!elements) {
-		let collection = data.collection;
-		let document_id = data.document_id;
-		let selector = `[collection='${collection}'][document_id='${document_id}']:not(cocreate-select, link)`;
-		elements = document.querySelectorAll(selector);
+		// ToDo: handle db and database, create key and get elements by key		
+		elements = els.get(key)
+		// let collection = data.document[0].collection;
+		// let document_id = data.document[0]._id;
+		// let selector = `[collection='${collection}'][document_id='${document_id}']:not(cocreate-select, link)`;
+		// elements = document.querySelectorAll(selector);
+	} else {
+		let eles = els.get(key)
+		if (eles && eles.length)
+			els.set(key, [...eles, ...elements])
+		else
+			els.set(key, elements)
 	}
-
+	if (!elements || elements.length == 0)
+		return
+		
 	elements.forEach((el) => {
-		const { collection, document_id, name, isRead, isUpdate, isCrdt } = crud.getAttr(el);
+		const { collection, document_id, name, isRead, isUpdate, isCrdt } = crud.getAttributes(el);
 		if (el.hasAttribute('actions')) return;
 		if (isRead == "false" || isUpdate == "false" || isCrdt == "true") return;
 		
-		if (data['collection'] == collection && data['document_id'] == document_id) {
+		// if (data.document[0]['collection'] == collection && data.document[0]['_id'] == document_id) {
 			let value;
 			let valueType = el.getAttribute('value-type');
             if(valueType == 'object' || valueType == 'json'){
 				// if (name == 'data')
 				// 	value = JSON.stringify(data[name])
 				// else
-				value = JSON.stringify(data.data[name])
+				value = JSON.stringify(data.document[0][name])
 				value = decodeURIComponent(value)
             } else
-				value = crud.getObjectValueByPath(data.data, name);
+				value = crud.getObjectValueByPath(data.document[0], name);
 
 				el.setValue(value);
 
 			isRendered = true;
-		}
+		// }
 		initializing.delete(el)
 
 	});
 
+
 	if (isRendered) {
 		// ToDo: Replace with custom event
 		const event = new CustomEvent('CoCreateElements-rendered', {
 			eventType: 'rendered',
 			detail: {
-				data: data
+				data
 			}
 		});
 
@@ -114,9 +169,24 @@ function setData(elements, data) {
 	}
 }
 
+function getKey(data) {
+	let key = {};
+	let attributes = ["db", "database", "collection", "index", "document"]
+
+	for (let attribute of attributes) {
+		let value = data[attribute]
+		if (value) {
+			if (attribute == 'document')
+			key[attribute] = value
+		} 
+	}
+	key.document = data.document[0]._id
+	return JSON.stringify(key)
+}
+
 async function save(element) {
-	let value = getValue(element);
-	await crud.save(element, value);
+	let value = element.getValue();
+	crud.save(element, value);
 }
 
 function __initSocket() {
@@ -130,8 +200,8 @@ function __initEvents(el) {
 	if (!elementEvents.has(el)) {
 		if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT' || el.hasAttribute('contenteditable')) {
 			el.addEventListener('input', function(e) {
-				const {document_id, name, isRealtime, isCrdt} = crud.getAttr(el);
-				if (isCrdt == "true" && document_id || isRealtime == "false" || name == "_id") return;
+				const {document_id, name, isRealtime, isCrdt} = crud.getAttributes(el);
+				if (isCrdt == "true" && document_id && document_id != 'pending' || isRealtime == "false" || name == "_id") return;
 				if (document_id && e.detail && e.detail.skip == true) return;
 				save(el);
 			});
@@ -153,10 +223,10 @@ observer.init({
 observer.init({
 	name: 'CoCreateElementsAttributes',
 	observe: ['attributes'],
-	attributeName: ['collection', 'document_id', 'name'],
+	attributeName: crud.getAttributeNames(['collection', 'document_id', 'name']),
 	target: selector,
 	callback: function(mutation) {
-		let {collection, document_id, name} = crud.getAttr(mutation.target);
+		let {collection, document_id, name} = crud.getAttributes(mutation.target);
 		if(collection && document_id && name)
 			initElements([mutation.target]);
 	}
@@ -176,4 +246,4 @@ initGetValues();
 initSetValues();
 
 
-export default {initElements, initElement, save, getValue, setValue};
+export default {initElements, initElement, save};

package/src/setValue.js

@@ -1,6 +1,13 @@
 import observer from '@cocreate/observer';
-import crud from '@cocreate/crud-client';
+import CRUD from '@cocreate/crud-client';
 import { queryDocumentSelectorAll } from '@cocreate/utils';
+import '@cocreate/element-prototype';
+
+let crud
+if(CRUD && CRUD.default)
+	crud = CRUD.default
+else
+	crud = CRUD
 
 function initSetValues() {
 	var elements = document.querySelectorAll('[set-value], [set-value-closest]');
@@ -76,152 +83,11 @@ function setValueByFind(element){
 			setValueMap.set(element, value)
 		}
 		else
-			setValue(element, value);
+			element.setValue(value);
 	}
 		
 }
 
-var setValue = (el, value) => {
-	if (value === null || value === undefined) return;
-	let valueType = el.getAttribute('value-type');
-
-	if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT') {
-		const {isCrdt} = crud.getAttr(el);
-		if (isCrdt == "true" || el.type === 'file') return;
-
-		if (el.type == 'checkbox') {
-			if (value.includes(el.value)) {
-				el.checked = true;
-			}
-			else {
-				el.checked = false;
-			}
-		}
-		else if (el.type === 'radio') {
-			el.value == value ? el.checked = true : el.checked = false;
-		}
-		else if (el.type === 'password') {
-			el.value = __decryptPassword(value);
-		}
-		else if (el.tagName == "SELECT" && el.hasAttribute('multiple') && Array.isArray(value)) {
-			let options = el.options;
-			for (let i = 0; i < options.length; i++) {
-				if (value.includes(options[i].value)) {
-					options[i].selected = "selected";
-				}
-			}
-		}
-		else
-			el.value = value;
-		dispatchEvents(el)
-	}
-	else if (el.tagName === 'IMG' || el.tagName === 'SOURCE')
-		el.src = value;
-	
-	else if (el.tagName === 'IFRAME')
-		el.srcdoc = value;
-	
-	else if (el.tagName === 'DIV') {
-		if (el.hasAttribute("value")) {
-			el.setAttribute("value", value);
-		}
-
-		if (el.classList.contains('domEditor') || el.hasAttribute('get-value') || el.hasAttribute('get-value-closest')) {
-			if (el.getAttribute('data-domEditor') == "replace") {
-				let newElement = document.createElement("div");
-				newElement.innerHTML = value;
-				let parentNode = el.parentNode;
-				if (parentNode) {
-					if (newElement.children[0]) {
-						parentNode.replaceChild(newElement.children[0], el);
-					}
-					else {
-						parentNode.replaceChild(newElement, el);
-					}
-				}
-			}
-			else {
-				if (valueType == 'string' || valueType == 'text')
-					el.textContent = value;
-				else
-					el.innerHTML = value;
-			}
-		}
-	}
-	
-	else if (el.tagName === 'SCRIPT'){
-		setScript(el, value);
-	}
-	else {
-		if (el.hasAttribute('contenteditable') && el == document.activeElement) return;
-		if (valueType == 'string' || valueType == 'text')
-			el.textContent = value;
-		else
-			el.innerHTML = value;
-		if (el.hasAttribute("value")) {
-			el.setAttribute("value", value);
-		}
-	}
-	if (el.getAttribute('contenteditable'))
-		dispatchEvents(el);
-		
-	if (el.tagName == 'HEAD' || el.tagName == 'BODY') {
-		el.removeAttribute('collection');
-		el.removeAttribute('document_id');
-		el.removeAttribute('pass_id');
-
-		let scripts = el.querySelectorAll('script');
-		for (let script of scripts) {
-			setScript(script)
-		}
-	}
-};
-
-function setScript(script, value) {
-	let newScript = document.createElement('script');
-	newScript.attributes = script.attributes;
-	newScript.innerHTML = script.innerHTML;
-	if (value) {
-		if (script.hasAttribute("src"))
-			newScript.src = value;
-		else
-			newScript.innerHTML = value;
-	}
-	script.replaceWith(newScript);
-}
-
-function __decryptPassword(str) {
-	if (!str) return "";
-	let decode_str = atob(str);
-	return decode_str;
-}
-
-function dispatchEvents(el) {
-	let inputEvent = new CustomEvent('input', {
-		bubbles: true,
-		detail: {
-			skip: true
-		},
-	});
-	Object.defineProperty(inputEvent, 'target', {
-		writable: false,
-		value: el
-	});
-	el.dispatchEvent(inputEvent);
-	
-	let changeEvent = new CustomEvent('change', {
-		bubbles: true,
-		detail: {
-			skip: true
-		},
-	});
-	Object.defineProperty(changeEvent, 'target', {
-		writable: false,
-		value: el
-	});
-	el.dispatchEvent(changeEvent);
-}
-
 observer.init({
 	name: 'set-value',
 	observe: ['addedNodes'],
@@ -231,4 +97,4 @@ observer.init({
 	}
 });
 
-export { initSetValues, setValue };
+export { initSetValues };

package/src/HTMLElement.js

@@ -1,30 +0,0 @@
-import { setValue } from './setValue';
-import { getValue } from './getValue';
-
-HTMLElement.prototype.getValue = function() {
-	let value = getValue(this)
-	return value;
-};
-
-HTMLElement.prototype.setValue = function(value) {
-	setValue(this, value)
-};
-
-HTMLInputElement.prototype.getValue = function() {
-	let value = getValue(this)
-	return value;
-};
-
-HTMLInputElement.prototype.setValue = function(value) {
-	setValue(this, value)
-};
-
-HTMLHeadingElement.prototype.getValue = function() {
-	let value = getValue(this)
-	return value;
-};
-
-HTMLHeadingElement.prototype.setValue = function(value) {
-	setValue(this, value)
-};
-