@cocreate/elements 1.36.1 → 1.37.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [1.37.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.36.2...v1.37.0) (2024-09-21)
+
+
+### Features
+
+* update="" attribute support. improved data type handling ([fa478b0](https://github.com/CoCreate-app/CoCreate-elements/commit/fa478b008c85a78014f16f4800270af933767615))
+
+## [1.36.2](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.36.1...v1.36.2) (2024-08-24)
+
+
+### Bug Fixes
+
+* prevent duplicate input event listeners ([e7d5bfd](https://github.com/CoCreate-app/CoCreate-elements/commit/e7d5bfd7c254b9e4a76bd5eb55106b86357904c9))
+* use continue in for loop ([e0febbc](https://github.com/CoCreate-app/CoCreate-elements/commit/e0febbcbf16486d54e312cd646f2d2a255e71848))
+
 ## [1.36.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.36.0...v1.36.1) (2024-07-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.36.1",
+  "version": "1.37.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",

package/src/fetchSrc.js

@@ -19,7 +19,7 @@ async function initElements(elements) {
         let src = element.getAttribute('src') || element.getAttribute('source') || element.getAttribute('stream');
 
         if (!src || /{{\s*([\w\W]+)\s*}}/g.test(src))
-            return;
+            continue;
 
         let initialize = initializing.get(element)
         if (!initialize || initialize.src != src) {

package/src/index.js

@@ -97,18 +97,26 @@ async function initElement(el) {
     if (!elements.has(el)) {
         elements.set(el, '')
 
-        if (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)
-            || (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false')
-            || el.contenteditable) {
-            el.addEventListener('input', function (e) {
-                const { object, key, isRealtime, isCrdt } = getAttributes(el);
-                if (!isRealtime || isRealtime === "false" || key === "_id") return;
-                if (isCrdt == "true" && object && object !== 'pending') return
-                if (e.detail && e.detail.skip == true) return;
-                if (data.type !== 'object' && data[data.type] === 'pending') return
-
-                save(el);
-            });
+        if (el.tagName === "EDITOR")
+            console.log('editor event added')
+        if (!el.elementsInputEvent) {
+            el.elementsInputEvent = true;
+
+            if (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)
+                || (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false')
+                || el.contenteditable) {
+                el.addEventListener('input', function (e) {
+                    if (el.pendingObject) return
+
+                    const { object, key, isRealtime, isCrdt } = getAttributes(el);
+                    if (!isRealtime || isRealtime === "false" || key === "_id") return;
+                    if (isCrdt == "true" && object && object !== 'pending') return
+                    if (e.detail && e.detail.skip == true) return;
+                    if (data.type !== 'object' && data[data.type] === 'pending') return
+
+                    save(el);
+                });
+            }
         }
     }
     // let attributes = ['filter-key', 'filter-search', 'filter-sort-key', 'filter-on', 'filter-limit']
@@ -365,7 +373,7 @@ async function setData(element, data) {
         let action = el.getAttribute('actions')
         if (action && ['database', 'array', 'object', 'key'].includes(action)) continue;
 
-        const { key, isRead, isListen, isCrdt } = getAttributes(el);
+        const { key, isRead, isUpdate, isListen, isCrdt } = getAttributes(el);
         if (el.getFilter || el.renderValue)
             await filterData(el, data, type, key)
         else {
@@ -390,8 +398,8 @@ async function setData(element, data) {
                 }
 
                 if (!data[type].length) continue;
-                if (isRead == "false" || isCrdt == "true") continue;
-                if (isListen == "false" && !data.method.endsWith('.read')) continue;
+                if (isRead === "false" || isCrdt === "true") continue;
+                if (isUpdate === "false" || isListen === "false" && !data.method.endsWith('.read')) continue;
                 // TODO: object.update data returned from server will not include $operator
                 el.setValue(value);
 
@@ -519,7 +527,8 @@ async function checkFilters(element, data, type) {
         // TODO: fix: getObject as this is related to render or form, but filter could exist on an input which does not have getObject
         // TODO: generate an object of current element key: value to use with filter. because filter is used object is not defined 
         Data = getObject(element)
-        Data = Data[type][0]
+        if (Array.isArray(Data[type]))
+            Data = Data[type][0]
     } else
         Data = await element.getData()
 
@@ -561,9 +570,20 @@ async function checkFilters(element, data, type) {
             primaryKey = 'name';
         }
 
-        if (Data[primaryKey] === newData[primaryKey]) {
+        if (Array.isArray(newData)) {
+            for (let i = 0; i < newData.length; i++) {
+                if (typeof Data === 'string' && Data === newData[i][primaryKey]) {
+                    Data = newData[i]
+                } else if (Data[primaryKey] === newData[i][primaryKey]) {
+                    Data = dotNotationToObject(newData[i], Data)
+                }
+            }
+        } else if (typeof Data === 'string' && Data === newData[primaryKey]) {
+            Data = newData
+        } else if (Data[primaryKey] === newData[primaryKey]) {
             Data = dotNotationToObject(newData, Data)
         }
+
         if (element.renderValue)
             element.renderValue(data);
         // render({ element, data, key: type });