@cocreate/elements 1.27.1 → 1.29.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [1.29.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.28.0...v1.29.0) (2023-11-25)
+
+
+### Bug Fixes
+
+* update licensing details ([9f9b839](https://github.com/CoCreate-app/CoCreate-elements/commit/9f9b8390e751604de9f7e361e15e47e2a72093a6))
+
+
+### Features
+
+* upgrade dependencies for latest features and fixes ([83cbf98](https://github.com/CoCreate-app/CoCreate-elements/commit/83cbf9831f526b9c4c436d9502d432836b44d922))
+
+# [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)
 
 

package/README.md

@@ -39,12 +39,12 @@ $ yarn install @cocreate/elements
 
 # Table of Contents
 
-- [Table of Contents](#table-of-contents)
-- [Announcements](#announcements)
-- [Roadmap](#roadmap)
-- [How to Contribute](#how-to-contribute)
-- [About](#about)
-- [License](#license)
+-   [Table of Contents](#table-of-contents)
+-   [Announcements](#announcements)
+-   [Roadmap](#roadmap)
+-   [How to Contribute](#how-to-contribute)
+-   [About](#about)
+-   [License](#license)
 
 <a name="announcements"></a>
 
@@ -78,8 +78,14 @@ We want this library to be community-driven, and CoCreate led. We need your help
 
 We appreciate your continued support, thank you!
 
-
 <a name="license"></a>
+
 # License
 
-[The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-elements/blob/master/LICENSE)
+This software is dual-licensed under the GNU Affero General Public License version 3 (AGPLv3) and a commercial license.
+
+-   **Open Source Use**: For open-source projects and non-commercial use, this software is available under the AGPLv3. The AGPLv3 allows you to freely use, modify, and distribute this software, provided that all modifications and derivative works are also licensed under the AGPLv3. For the full license text, see the [LICENSE file](https://github.com/CoCreate-app/CoCreate-element/blob/master/LICENSE).
+
+-   **Commercial Use**: For-profit companies and individuals intending to use this software for commercial purposes must obtain a commercial license. The commercial license is available when you sign up for an API key on our [website](https://cocreate.app). This license permits proprietary use and modification of the software without the copyleft requirements of the AGPLv3. It is ideal for integrating this software into proprietary commercial products and applications.
+
+If you have not purchased a commercial license and intend to use this software for commercial purposes, you are required to sign up for an API key on our website.

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.1",
+  "version": "1.29.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.14.0",
+    "@cocreate/crud-client": "^1.31.0",
+    "@cocreate/element-prototype": "^1.15.0",
+    "@cocreate/filter": "^1.27.0",
+    "@cocreate/observer": "^1.14.0",
+    "@cocreate/render": "^1.35.0",
+    "@cocreate/utils": "^1.29.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]
@@ -505,24 +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 => {
-                                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 (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;
@@ -796,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);
         //                     }
         //                     // }
         //                 }