@cocreate/elements 1.26.1 → 1.26.3

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [1.26.3](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.26.2...v1.26.3) (2023-11-16)
+
+
+### Bug Fixes
+
+* element grouping ([0507b00](https://github.com/CoCreate-app/CoCreate-elements/commit/0507b00fa53a2c1ec774885d6da515c48fcc4f85))
+
+## [1.26.2](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.26.1...v1.26.2) (2023-11-12)
+
+
+### Bug Fixes
+
+* await renderValue ([b08c609](https://github.com/CoCreate-app/CoCreate-elements/commit/b08c6093c9f6451ea7d54d20811aff81fd276cec))
+* bump dependencies for latest features ([fdbaa9a](https://github.com/CoCreate-app/CoCreate-elements/commit/fdbaa9adb52b50b9e5db149e0c76472e0ea51d88))
+* crud listeners ([68c014e](https://github.com/CoCreate-app/CoCreate-elements/commit/68c014eaa99eaf5fc2de45c8ebdce58bc36fba97))
+* improve removeNodes ([f34e0cf](https://github.com/CoCreate-app/CoCreate-elements/commit/f34e0cfb43367ddcd2dd2b80422e9ade7d69a7f1))
+* removed dead code ([22cb1fb](https://github.com/CoCreate-app/CoCreate-elements/commit/22cb1fb810a8ff5b4b61d4746cfe23b9cf6adefd))
+* set $filter.index ([c51ffa8](https://github.com/CoCreate-app/CoCreate-elements/commit/c51ffa8aca3182fa4b9b85a76c226852614470b4))
+* typo in handeling form ([71361e2](https://github.com/CoCreate-app/CoCreate-elements/commit/71361e2423231767138dd35cf62e7c443a823130))
+
 ## [1.26.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.26.0...v1.26.1) (2023-11-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.26.1",
+  "version": "1.26.3",
   "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.1",
-    "@cocreate/crud-client": "^1.28.12",
-    "@cocreate/element-prototype": "^1.11.8",
-    "@cocreate/filter": "^1.23.6",
-    "@cocreate/observer": "^1.11.7",
-    "@cocreate/render": "^1.29.1",
-    "@cocreate/utils": "^1.26.2"
+    "@cocreate/actions": "^1.12.3",
+    "@cocreate/crud-client": "^1.28.14",
+    "@cocreate/element-prototype": "^1.13.0",
+    "@cocreate/filter": "^1.23.8",
+    "@cocreate/observer": "^1.11.9",
+    "@cocreate/render": "^1.30.1",
+    "@cocreate/utils": "^1.27.1"
   }
 }

package/src/index.js

@@ -38,7 +38,6 @@ const keys = new Map();
 const forms = new Map();
 const debounce = new Map();
 
-/** */
 async function init(element) {
     if (element && !(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element]
@@ -49,7 +48,7 @@ async function init(element) {
 
     let dataObjects = new Map();
     for (let i = 0; i < element.length; i++) {
-        if (elements.has(element[i]) || element.tagName === 'FORM')
+        if (elements.has(element[i]) || element[i].tagName === 'FORM')
             continue
 
         let data = await initElement(element[i]);
@@ -61,8 +60,8 @@ async function init(element) {
 
     if (dataObjects && dataObjects.size > 0) {
         for (let key of dataObjects.keys()) {
-            let { data } = keys.get(key)
-            read(Array.from(element), data, { string: key });
+            let { data, elements } = keys.get(key)
+            read(Array.from(elements.keys()), data, { string: key });
         }
     }
 }
@@ -126,15 +125,11 @@ async function initElement(el) {
 
         el.setFilter = (filter) => {
             data.$filter = filter
-            let dataKey = initDataKey(el, data)
-            read(el, data, dataKey)
+            // let dataKey = initDataKey(el, data)
+            read(el, data)
         }
     }
 
-    const isRead = el.getAttribute('read');
-    if (isRead === 'false')
-        return;
-
     return data;
 }
 
@@ -161,7 +156,7 @@ function getObject(element) {
         }
     }
 
-    if (data.object || data.object === '') {
+    if (data.object || data.object === '' || data.key || data.key === '') {
         if (!data.array || data.array && !data.array.length) return
         data.type = 'object'
     } else if (data.index || data.index === '') {
@@ -224,6 +219,11 @@ async function read(element, data, dataKey) {
     if (!data)
         data = { ...keys.get(dataKey).dataKey.object }
 
+    if (!data.type)
+        return
+    if (!data.$filter && (!data[data.type] || !data[data.type].length))
+        return
+
     if (!(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element]
 
@@ -234,8 +234,14 @@ async function read(element, data, dataKey) {
     if (!delay.elements)
         delay.elements = new Map()
 
-    for (let el of element)
-        delay.elements.set(el, true)
+    for (let el of element) {
+        const isRead = el.getAttribute('read');
+        if (isRead !== 'false')
+            delay.elements.set(el, true)
+    }
+
+    if (!delay.elements.size)
+        return
 
     clearTimeout(delay.timer);
     delay.timer = setTimeout(function () {
@@ -254,14 +260,14 @@ async function read(element, data, dataKey) {
 
         data.method = data.type + '.read'
 
-        CRUD.send(data).then((data) => {
+        CRUD.send(data).then((Data) => {
             debounce.delete(dataKey.string)
             let els = Array.from(delay.elements.keys())
             clearTimeout(delay.timer);
             delete delay.elements
             delete delay.timer
 
-            setData(els, data);
+            setData(els, Data);
         })
     }, 500);
 }
@@ -320,10 +326,10 @@ async function filterData(element, data, type, key) {
                         Data.push(doc[key])
                 }
             }
-            if (Data.length === 1) {
-                data = { [key]: Data[0] }
-            } else
-                data = Data
+            // if (Data.length === 1) {
+            //     data = { [key]: Data[0] }
+            // } else
+            data = Data
         } else {
             data = { [key]: data[type][key] }
         }
@@ -331,12 +337,14 @@ async function filterData(element, data, type, key) {
 
     if (element.getFilter && data.method && !data.method.endsWith('.read'))
         await checkFilters(element, data, type)
-    else if (element.renderValue)
-        element.renderValue(data);
-    // render({ element, data, key: type });
-    else if (data)
+    else if (element.renderValue) {
+        await element.renderValue(data);
+    } else if (data)
         element.setValue(data)
 
+    if (data.$filter)
+        filter.filters.get(element).index = data.$filter.index
+
     const evt = new CustomEvent('fetchedData', { bubbles: true });
     element.dispatchEvent(evt);
 }
@@ -687,7 +695,7 @@ async function save(element) {
 
     let Data = []
     for (let i = 0; i < data.length; i++) {
-        if (data[i].type === 'object' && !data[i].method) {
+        if (data[i].type === 'object') {
             if (typeof data[i].object === 'string') {
                 if (!data[i]._id)
                     data[i].method = 'object.create'
@@ -855,6 +863,8 @@ async function remove(element) {
             let key = elements.get(element[i])
             if (key) {
                 keys.get(key).elements.delete(element[i])
+                if (!keys.get(key).elements.size)
+                    keys.delete(key)
             }
             elements.delete(element[i])
             forms.delete(element[i])
@@ -862,26 +872,35 @@ async function remove(element) {
 
             let key = elements.get(element[i])
             if (key) {
+                if (element[i].getFilter)
+                    filter.filters.delete(element[i])
                 keys.get(key).elements.delete(element[i])
                 elements.delete(element[i])
+                if (!keys.get(key).elements.size)
+                    keys.delete(key)
+
                 // debounce.delete(key)
                 let form = element[i].closest('form')
                 form = forms.get(form)
                 if (form) {
                     form.elements.delete(element[i])
+                    if (!form.elements.size)
+                        forms.delete(form)
                 }
-            }
+            } else
+                elements.delete(element[i])
+
         }
     }
 }
 
 function initSocket() {
-    const array = ['create', 'update', 'delete'];
-    const attributes = ["storage", "database", "array", "index", "object", 'filter'];
+    const type = ["storage", "database", "array", "index", "object", 'filter'];
+    const method = ['create', 'update', 'delete'];
 
-    for (let i = 0; i < array.length; i++) {
-        for (let j = 0; j < attributes.length; j++) {
-            const action = array[i] + '.' + attributes[j];
+    for (let i = 0; i < type.length; i++) {
+        for (let j = 0; j < method.length; j++) {
+            const action = type[i] + '.' + method[j];
 
             CRUD.listen(action, function (data) {
                 setData(null, data);
@@ -1049,7 +1068,8 @@ Observer.init({
         //     }, 3000);
         //     debounce.set(mutation.target, delayTimer)
         // } else
-        if (mutation.target.hasAttribute('render-clone')) return
+        if (mutation.target.hasAttribute('render-clone'))
+            return
         remove(mutation.target)
     }
 });
@@ -1060,8 +1080,11 @@ Observer.init({
     attributeName: ['storage', 'database', 'array', 'index', 'object', 'key'],
     // target: selector, // blocks mutations when applied
     callback: function (mutation) {
-        remove(mutation.target)
-        init([mutation.target]);
+        let currentValue = mutation.target.getAttribute(mutation.attributeName)
+        if (currentValue !== mutation.oldValue) {
+            remove(mutation.target)
+            init([mutation.target])
+        }
     }
 });