@cocreate/render 1.34.0 → 1.35.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.35.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.34.0...v1.35.0) (2023-11-25)
+
+
+### Bug Fixes
+
+* pass attributes renamed to state ([c3c96d7](https://github.com/CoCreate-app/CoCreate-render/commit/c3c96d795b405054a8669b4d05cd69b89d103cc6))
+* update nav, edit button and css path ([5b6cad4](https://github.com/CoCreate-app/CoCreate-render/commit/5b6cad4d112d736b1fec04a7bc897f22b961e086))
+
+
+### Features
+
+* upgrade dependencies for latest features and fixes ([18468c3](https://github.com/CoCreate-app/CoCreate-render/commit/18468c3992d47414e1ffa9ae27a60abed0cf9a8e))
+
 # [1.34.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.33.0...v1.34.0) (2023-11-22)
 
 

package/docs/index.html

@@ -28,7 +28,7 @@
             type="text/css" />
         <link
             rel="stylesheet"
-            href="/docs/index.css"
+            href="../index.css"
             array="files"
             object="60888216117c640e7596303f"
             key="src"
@@ -38,15 +38,15 @@
     </head>
 
     <body>
+        <!-- Navbar  -->
         <nav
-            class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px"
+            class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
             content_id="content"
-            scroll="sticky-nav,hide-nav"
-            scroll-up="10"
-            scroll-down="10"
-            array="files"
-            object="60395ef42b3ac232657040fd"
-            key="src"></nav>
+            scroll="sticky-nav,"
+            scroll-up="5"
+            scroll-down="5"
+            path="../"
+            src="../components/navbar.html"></nav>
         <sidenav
             id="menuL"
             class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
@@ -333,7 +333,7 @@
                         <li
                             class="padding:15px_0px border-bottom:1px_solid_lightgrey">
                             <h4>
-                                <span>setValue(elements, data, [passTo])</span>
+                                <span>setValue(elements, data, [stateTo])</span>
                             </h4>
                             <p>This is main function.</p>
                             <div>
@@ -360,7 +360,7 @@
                             </div>
                             <div>
                                 <p>
-                                    <strong>passTo</strong
+                                    <strong>stateTo</strong
                                     ><span class="cocreate-badge warning"
                                         >Type:string</span
                                     ><span class="cocreate-badge warning"
@@ -566,10 +566,8 @@
             <button
                 href="https://github.com/CoCreate-app/CoCreate-render/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
                 target="_blank"
-                class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-                <i
-                    class="height:20px fill:#505050"
-                    src="/assets/svg/pencil-alt.svg"></i>
+                class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
+                <i class="height:20px" src="../assets/svg/pencil-alt.svg"></i>
             </button>
         </main>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",
@@ -58,10 +58,10 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.12.4",
-    "@cocreate/api": "^1.15.12",
-    "@cocreate/element-prototype": "^1.13.2",
-    "@cocreate/observer": "^1.12.0",
-    "@cocreate/utils": "^1.27.4"
+    "@cocreate/actions": "^1.13.0",
+    "@cocreate/api": "^1.16.0",
+    "@cocreate/element-prototype": "^1.14.1",
+    "@cocreate/observer": "^1.13.0",
+    "@cocreate/utils": "^1.28.0"
   }
 }

package/src/index.js

@@ -32,6 +32,23 @@ const sources = new Map()
 const renderedNodes = new Map()
 const elementSelector = '[render-selector], [render-closest], [render-parent], [render-next], [render-previous]'
 
+
+/**
+ * Initializes elements based on specified rendering attributes. If a specific element is provided, it initializes that element.
+ * If no element is provided, it queries and initializes all elements matching the defined selector criteria for rendering attributes.
+ *
+ * Supported rendering attributes:
+ * - render-selector: [Describe what this attribute does]
+ * - render-closest: [Describe what this attribute does]
+ * - render-parent: [Describe what this attribute does]
+ * - render-next: [Describe what this attribute does]
+ * - render-previous: [Describe what this attribute does]
+ *
+ * @param {(Element|Element[]|HTMLCollection|null)} [element] - Optional. A single element, an array of elements, an HTMLCollection, or null.
+ *     - If an HTMLCollection or an array of elements is provided, each element in the collection/array is initialized.
+ *     - If a single element is provided, only that element is initialized.
+ *     - If null or omitted, the function queries and initializes all elements matching the 'elementSelector'.
+ */
 function init(element) {
     if (element && !(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element]
@@ -48,6 +65,21 @@ function init(element) {
     }
 }
 
+/**
+ * Asynchronously renders content based on the provided parameters. This function handles the rendering logic for elements
+ * based on data sources, selectors, and other options.
+ *
+ * @param {Object} options - An object containing the parameters for rendering.
+ * @param {Object} options.source - The data source used for rendering.
+ * @param {Element} options.element - The DOM element where content will be rendered.
+ * @param {string} options.selector - CSS selector to specify target elements for rendering.
+ * @param {Object} options.data - Data to be used in rendering.
+ * @param {string} [options.key] - Optional key to reference specific parts of the data.
+ * @param {number} [options.index] - Optional index, typically used when rendering lists or arrays.
+ * @param {number} [options.currentIndex] - The current index in a list or array rendering process.
+ * @param {boolean} [options.update] - Flag to indicate if the rendering should update existing content.
+ * @param {boolean} [options.remove] - Flag to indicate if the rendering should remove elements instead of updating or appending.
+ */
 async function render({ source, element, selector, data, key, index, currentIndex, update, remove }) {
     if (!element) {
         if (source) {
@@ -453,9 +485,9 @@ async function renderValues(node, data, key, renderAs, keyPath, parent) {
         }
         // });
 
-        if (CoCreate.pass) {
-            if (node.hasAttribute('[pass_id]'))
-                CoCreate.pass.initElement(node)
+        if (CoCreate.state) {
+            if (node.hasAttribute('[state_id]'))
+                CoCreate.state.initElement(node)
         }
 
         if (node.tagName === 'SCRIPT' && node.src) {