@cocreate/render 1.22.8 → 1.23.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.23.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.22.8...v1.23.0) (2023-04-13)
+
+
+### Features
+
+* render-key supports defing custom attribute by applying attribute name as a param in action. renderKey(customAttr) ([71ec778](https://github.com/CoCreate-app/CoCreate-render/commit/71ec77801d4d5a9b7e752d436352e68ba0e8d8e2))
+
 ## [1.22.8](https://github.com/CoCreate-app/CoCreate-render/compare/v1.22.7...v1.22.8) (2023-04-11)
 
 

package/demo/renderKey.html

@@ -11,18 +11,19 @@
     <body class="padding:20px">
     
         <form>
-            <input render-key="renderKey.name">
-            <div template_id="renderKey">
-                <div>This is <b>{{renderKey.name}}</b></div>
-                <p>This {{renderKey.name}}</p>
-                <input value="{{renderKey.name}}">
-                <button actions='renderKey' href="https://{{renderKey.name}}/admin/signin.html">Create Form</button>
+            <input render-key="name" value="test">
+            <input render-key="domain" value="test.com">
+            <div template_id="render-key">
+                <div>This is <b>{{render-key.name}}</b></div>
+                <p>This {{render-key.name}}</p>
+                <input value="{{render-key.name}}">
+                <input value="{{render-key.domain}}">
+                <button actions='renderKey'>Create Form</button>
             </div>
         </form>
     
         <!-- <script src="../dist/CoCreate-render-key.js"></script> -->
-        <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
-        <!-- <script src="https://cdn.cocreate.app/1.49.2/CoCreate.min.js"></script> -->
+		<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
 
     </body>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.22.8",
+  "version": "1.23.0",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",

package/src/index.js

@@ -2,7 +2,7 @@
 import action from '@cocreate/actions';
 import observer from '@cocreate/observer';
 import uuid from '@cocreate/uuid';
-import { queryDocumentSelector, getValueFromObject } from '@cocreate/utils';
+import { queryDocumentSelector, getValueFromObject, dotNotationToObject } from '@cocreate/utils';
 import '@cocreate/element-prototype';
 import './index.css';
 // import api from '@cocreate/api';
@@ -415,14 +415,31 @@ const CoCreateRender = {
 	
 };
 
-function renderKey(element) {
+function renderKey(element, params) {
+	// ToDo: custom render-keys 
 	const form = element.closest("form") || document;
-	let data = CoCreate.api.getFormData('render-key', 'renderKey',  form);
-
-	CoCreateRender.data({
-		selector: "[template='renderKey']",
-		data: {renderKey: data}
-	});
+	if (!params)
+		params = 'render-key'
+
+	let data = {}
+	let selector = `[${params}]`
+	let elements = form.querySelectorAll(selector);
+	for (let el of elements) {
+		let attribute = el.getAttribute(params)
+		if (attribute)
+			data[attribute] = el.getValue()
+	}	
+	data = dotNotationToObject(data)
+	let renderData = {data: {[params]: data}}
+
+	let templateSelector = `[template_id='${params}']`
+	let template = document.querySelectorAll(templateSelector);
+	if (template)
+		renderData.elements = template
+	else
+		renderData.selector = `[template='${params}']`
+	
+	CoCreateRender.data(renderData);
 	
 	document.dispatchEvent(new CustomEvent('renderKey', {
 		detail: { data }
@@ -431,9 +448,8 @@ function renderKey(element) {
 
 action.init({
 	name: "renderKey",
-	endEvent: "renderKey",
-	callback: (btn, data) => {
-		renderKey(btn);
+	callback: (btn, params) => {
+		renderKey(btn, params);
 	}
 });