@cocreate/elements 1.27.0 → 1.28.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.28.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.27.1...v1.28.0) (2023-11-25)
+
+
+### Bug Fixes
+
+* conditions to update elements from broadcasted incoming data ([756b798](https://github.com/CoCreate-app/CoCreate-elements/commit/756b7984b6e46a6d03214a88fca130e4df02aaef))
+* pass attributes renamed to state ([83c741e](https://github.com/CoCreate-app/CoCreate-elements/commit/83c741e6cdd88635957ff3d16193a4e95f8999d5))
+* update nav, edit button and css path ([ac50546](https://github.com/CoCreate-app/CoCreate-elements/commit/ac50546b7deccd3adbb2a6b224b02a3b35cec671))
+
+
+### Features
+
+* upgrade dependencies for latest features and fixes ([baebd69](https://github.com/CoCreate-app/CoCreate-elements/commit/baebd69e9db0831a1060d8e03d96bb3f123d8c3e))
+
+## [1.27.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.27.0...v1.27.1) (2023-11-22)
+
+
+### Bug Fixes
+
+* condistions for matching elements and updating ([d7e7a39](https://github.com/CoCreate-app/CoCreate-elements/commit/d7e7a3920f9ccb1693b17f177a2734e3926a7e35))
+
 # [1.27.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.26.4...v1.27.0) (2023-11-19)
 
 

package/docs/index.html

@@ -25,7 +25,7 @@
             href="https://cocreate.app/images/favicon.ico" />
         <link
             rel="stylesheet"
-            href="/docs/index.css"
+            href="../index.css"
             array="files"
             object="60888216117c640e7596303f"
             key="src"
@@ -35,15 +35,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"
@@ -354,10 +354,8 @@
             <button
                 href="https://github.com/CoCreate-app/CoCreate-elements/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/elements",
-  "version": "1.27.0",
+  "version": "1.28.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",
@@ -58,12 +58,12 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.12.4",
-    "@cocreate/crud-client": "^1.29.0",
-    "@cocreate/element-prototype": "^1.13.2",
-    "@cocreate/filter": "^1.25.0",
-    "@cocreate/observer": "^1.12.0",
-    "@cocreate/render": "^1.32.0",
-    "@cocreate/utils": "^1.27.4"
+    "@cocreate/actions": "^1.13.0",
+    "@cocreate/crud-client": "^1.30.0",
+    "@cocreate/element-prototype": "^1.14.1",
+    "@cocreate/filter": "^1.26.0",
+    "@cocreate/observer": "^1.13.0",
+    "@cocreate/render": "^1.34.0",
+    "@cocreate/utils": "^1.28.0"
   }
 }

package/src/form.js

@@ -3,14 +3,19 @@ import { getAttributeNames, ObjectId } from '@cocreate/utils';
 import Action from '@cocreate/actions';
 import '@cocreate/element-prototype';
 
+
 /**
-* @param 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) {
-    // Returns an array of elements.
     if (!elements)
         elements = document.querySelectorAll('form');
-    // If elements is an array of elements returns an array of elements.
     else if (!Array.isArray(elements))
         elements = [elements]
     for (let element of elements) {
@@ -79,7 +84,7 @@ function disableAutoFill(element) {
 }
 
 /**
-* @param btn
+* @param form
 */
 function reset(form) {
     let formElements = new Map();

package/src/index.js

@@ -38,6 +38,20 @@ const keys = new Map();
 const forms = new Map();
 const debounce = new Map();
 
+/**
+ * Initializes elements with specific CRUD attributes. If no parameter is provided, it queries and initializes all elements 
+ * that have certain CRUD-related attributes. It can also initialize a single element or an array of elements.
+ * 
+ * Attributes used for initialization are:
+ * - storage: Specifies the storage mechanism.
+ * - database: Indicates the database to interact with.
+ * - array: Defines the array to be used.
+ * - render-json: Determines how JSON data is rendered.
+ * 
+ * @param {(Element|Element[])} [elements] - Optional. A single element or an array of elements to initialize. 
+ *                                           If omitted, the function queries and initializes all elements containing 
+ *                                           any of these CRUD attributes: "storage", "database", "array", "render-json".
+ */
 async function init(element) {
     if (element && !(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element]
@@ -324,7 +338,8 @@ async function filterData(element, data, type, key) {
                         Data.push(...doc[key])
                     else
                         Data.push(doc[key])
-                }
+                } else
+                    return
             }
             // if (Data.length === 1) {
             //     data = { [key]: Data[0] }
@@ -486,6 +501,7 @@ function getDataElements(data) {
     return element
 }
 
+// TODO: Correctly check for matches 
 function getDataKeys(data) {
     const matchingKeyStrings = [];
     const targetKeys = ["type", "storage", "database", "array", "index", "object", '$filter'];
@@ -494,7 +510,7 @@ function getDataKeys(data) {
         let hasMatch = true;
 
         for (const key of targetKeys) {
-            if (!data.$filter && (data.type === key || key === '$filter'))
+            if (!data.$filter && key === '$filter' && sortedKey.data.hasOwnProperty(key))
                 hasMatch = true
             else if (data.hasOwnProperty(key)) {
                 if (!sortedKey.data.hasOwnProperty(key)) {
@@ -503,17 +519,32 @@ function getDataKeys(data) {
                 }
                 if (Array.isArray(sortedKey.data[key]) && Array.isArray(data[key])) {
                     // if key is object check _id
-                    const matches = sortedKey.data[key].some(value => {
-                        if (key === 'object') {
-                            return data[key].some(obj => obj._id === value._id);
-                        } else {
-                            return data[key].includes(value)
+                    if (key === 'object' && sortedKey.data.$filter)
+                        hasMatch = true
+                    else {
+                        const matches = sortedKey.data[key].some(value => {
+                            if (key === 'object') {
+                                return data[key].some(obj => {
+                                    if (data.array.includes('users'))
+                                        console.log('users')
+                                    if (data.array.includes('questions'))
+                                        console.log('questions')
+
+                                    return obj._id === value._id
+                                });
+                            } else {
+                                return data[key].includes(value)
+                            }
+                        });
+
+                        if (!matches) {
+                            hasMatch = false;
+                            break;
                         }
-                    });
-                    if (!matches) {
-                        hasMatch = false;
-                        break;
+
                     }
+
+
                 } else if (sortedKey.data[key] !== data[key]) {
                     hasMatch = false;
                     break;
@@ -787,51 +818,51 @@ function setTypeValue(element, data) {
         setData(Array.from(elements.keys()), data)
 
 
-        //     const pass_ids = new Map();
+        //     const state_ids = new Map();
 
-        //     let pass_id = form.getAttribute('pass_id');
-        //     if (pass_id) {
-        //         // Set pass_ids to pass_ids if array is not set
+        //     let state_id = form.getAttribute('state_id');
+        //     if (state_id) {
+        //         // Set state_ids to state_ids if array is not set
         //         if (form.getAttribute('array') == array)
-        //             pass_ids.set(pass_id, '');
+        //             state_ids.set(state_id, '');
         //     }
 
         //     let objectId = el.getAttribute('object');
         //     let key = el.getAttribute('key')
-        //     // set object and pass_id attributes to the object id if the object id is pending
+        //     // set object and state_id attributes to the object id if the object id is pending
         //     if (key && (objectId == '' || objectId == 'pending')) {
         //         el.setAttribute('object', id);
         //         // Set the id attribute of the element
         //         if (key == '_id')
         //             el.setValue(id)
-        //         let pass_id = el.getAttribute('pass_id');
-        //         // Set the pass id to the pass_ids.
-        //         if (pass_id) {
-        //             pass_ids.set(pass_id, '');
+        //         let state_id = el.getAttribute('state_id');
+        //         // Set the state id to the state_ids.
+        //         if (state_id) {
+        //             state_ids.set(state_id, '');
         //         }
 
-        //         if (el.hasAttribute('pass-object')) {
-        //             let passObjectId = el.getAttribute('pass-object');
-        //             // Set the pass object id if not set.
-        //             if (passObjectId == '') {
-        //                 el.setAttribute('pass-object', id);
-        //                 let pass_id = el.getAttribute('pass_id');
-        //                 // Set the pass id to the pass_ids.
-        //                 if (pass_id) {
-        //                     pass_ids.set(pass_id, '');
+        //         if (el.hasAttribute('state-object')) {
+        //             let stateObjectId = el.getAttribute('state-object');
+        //             // Set the state object id if not set.
+        //             if (stateObjectId == '') {
+        //                 el.setAttribute('state-object', id);
+        //                 let state_id = el.getAttribute('state_id');
+        //                 // Set the state id to the state_ids.
+        //                 if (state_id) {
+        //                     state_ids.set(state_id, '');
         //                 }
         //             }
         //         }
 
-        //         // Set the object attribute of all pass_ids to the object attribute of all pass_ids
-        //         if (pass_ids.size > 0) {
-        //             for (let key of pass_ids.keys()) {
-        //                 let passEls = document.querySelectorAll(`[pass_id="${key}"]`)
-        //                 for (let passEl of passEls) {
-        //                     // if (passEl.getAttribute('array') == array){
-        //                     // Set the object id attribute to the passEl s object if it is not set.
-        //                     if (passEl.getAttribute('object') == '') {
-        //                         passEl.setAttribute('object', id);
+        //         // Set the object attribute of all state_ids to the object attribute of all state_ids
+        //         if (state_ids.size > 0) {
+        //             for (let key of state_ids.keys()) {
+        //                 let stateEls = document.querySelectorAll(`[state_id="${key}"]`)
+        //                 for (let stateEl of stateEls) {
+        //                     // if (stateEl.getAttribute('array') == array){
+        //                     // Set the object id attribute to the stateEl s object if it is not set.
+        //                     if (stateEl.getAttribute('object') == '') {
+        //                         stateEl.setAttribute('object', id);
         //                     }
         //                     // }
         //                 }