@cocreate/elements 1.36.2 → 1.37.1

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [1.37.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.37.0...v1.37.1) (2024-11-02)
+
+
+### Bug Fixes
+
+* checkValue(key) prior to excutuing element.setValue() ([8234c96](https://github.com/CoCreate-app/CoCreate-elements/commit/8234c96ff445b7a9bbc4d7171c07ae1b189fb9ee))
+* element.getValue() ([7009f70](https://github.com/CoCreate-app/CoCreate-elements/commit/7009f70d7a18d0e79100da8c25788db1a1c4c2e2))
+* handling contenteditable iframes ([11b6819](https://github.com/CoCreate-app/CoCreate-elements/commit/11b6819089e2b3ab2bbbcb47aa4f6134a036ad92))
+* if form has attribute object set as empty on reset ([29c1b6d](https://github.com/CoCreate-app/CoCreate-elements/commit/29c1b6d469afbaecd8e760288961726a2d9cd49b))
+* init if observer ol attribute value not the same as new ([456913c](https://github.com/CoCreate-app/CoCreate-elements/commit/456913c6d4a13279aad08a40732efd91e272add0))
+* observer taget has been renamed to selector ([239974c](https://github.com/CoCreate-app/CoCreate-elements/commit/239974ca9316607f28ce9fa1440b18b4e60735a0))
+* removed comsole.log ([d0b6fe3](https://github.com/CoCreate-app/CoCreate-elements/commit/d0b6fe314ab9532df479e955d243d3ef242bbc89))
+* removed dead code ([3929b76](https://github.com/CoCreate-app/CoCreate-elements/commit/3929b76d6a7d5bd71b5973f3ff4b2a8061954d7a))
+* removed test console.log ([4fea18d](https://github.com/CoCreate-app/CoCreate-elements/commit/4fea18d4f32c604b2666d92a384dce6bfe53dfc7))
+* resetType support ([2ce141e](https://github.com/CoCreate-app/CoCreate-elements/commit/2ce141e832f97c8df7a68a7bdfc5206d98cf66da))
+
+# [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)
 
 

package/package.json

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

@@ -208,7 +208,7 @@ function base64ToArrayBuffer(base64) {
 observer.init({
     name: 'CoCreateSrc',
     observe: ['addedNodes'],
-    target: selector,
+    selector: selector,
     callback: function (mutation) {
         init(mutation.target);
     }
@@ -218,9 +218,10 @@ observer.init({
     name: 'CoCreateSrcAttributes',
     observe: ['attributes'],
     attributeName: ['src'],
-    target: selector,
+    selector: selector,
     callback: function (mutation) {
-        init(mutation.target);
+        if (mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
+            init(mutation.target);
     }
 });
 

package/src/form.js

@@ -23,7 +23,7 @@ function init(elements) {
         Observer.init({
             name: 'CoCreateFormElements',
             observe: ['addedNodes'],
-            target: '[storage], [database], [array], [index], [object], [key]',
+            selector: '[storage], [database], [array], [index], [object], [key]',
             callback: function (mutation) {
                 if (element == mutation.target.form)
                     setAttribute(element, [mutation.target])
@@ -74,8 +74,9 @@ function setAttribute(form, elements) {
         if (variable) {
             for (let el of elements) {
                 // Set the value of the attribute.
+                // TODO: skip-attribute naming convention, perhaps skip by defualt if storage, database, array not the same and use attribute to apply for cases where one _id will be used across 2 arrays
                 if (!el.getAttribute(attribute.name) && !el.hasAttribute('skip-attribute')) {
-                    el.setAttribute(attribute.name, form.getAttribute(attribute.name));
+                    el.setAttribute(attribute.name, attribute.value);
                 }
             }
         }
@@ -101,32 +102,44 @@ function disableAutoFill(element) {
 * @param form
 */
 function reset(form) {
-    if (form.hasAttribute('object'))
-        form.setAttribute('object', '');
-    let formElements = new Map();
-    for (let element of form) {
-        formElements.set(element, '')
-        // Set object attribute to object if it exists
-        if (element.hasAttribute('object'))
+    // Convert the form elements collection to an array
+    const formElementsArray = Array.from(form.elements);
+
+    // Query for additional elements with [object] or [key] attributes that are not already part of form controls
+    const customElements = Array.from(form.querySelectorAll('[object], [key]:not(input):not(select):not(textarea):not(button)'));
+
+    // Merge form elements and custom elements using the spread operator
+    const allElements = [...formElementsArray, ...customElements];
+
+    // Store the elements and their values in a map for restoration
+    const elementStates = new Map();
+
+    // Iterate over all elements and store their current state based on the 'reset' attribute
+    for (const element of allElements) {
+        if (['BUTTON', 'FIELDSET'].includes(element.tagName))
+            continue
+        // Get the reset attribute value, if any
+        const resetType = element.getAttribute('reset');
+        if (element.hasAttribute('object') && (!resetType || resetType === 'object'))
             element.setAttribute('object', '');
-        // If the element is a button and has a button with the same key, set the value to the value of the button.
-        if (!['BUTTON'].includes(element.tagName))
+        if (resetType === 'false' || resetType === 'object')
+            elementStates.set(element, element.getValue() || element.value || element.getAttribute('value'));
+        if (!resetType || resetType !== 'object')
             element.setValue('')
     }
 
-    let elements = form.querySelectorAll('[object], [key]');
-    for (let element of elements) {
-        // Set the object id attribute of the element to the object id if it has not yet been set.
-        if (!formElements.has(element)) {
-            // Set object attribute to object if it exists
-            if (element.hasAttribute('object'))
-                element.setAttribute('object', '');
-            element.setValue('')
-        }
-    }
+    if (form.hasAttribute('object'))
+        form.setAttribute('object', '');
 
+    // Perform the default form reset
     form.reset();
-    // dispatch input event to rest filter??
+
+    // Restore values based on the 'reset' attribute
+    elementStates.forEach((value, element) => {
+        element.setValue(value)
+    });
+
+    // Dispatch a custom reset event
     document.dispatchEvent(new CustomEvent('reset', {
         detail: {}
     }));
@@ -152,7 +165,7 @@ function setValue(form) {
 Observer.init({
     name: 'CoCreateForm',
     observe: ['addedNodes'],
-    target: 'form',
+    selector: 'form',
     callback: mutation => init(mutation.target)
 });
 
@@ -160,7 +173,7 @@ Observer.init({
     name: 'CoCreateForm',
     observe: ['attributes'],
     attributeName: getAttributeNames(['storage', 'database', 'array', 'object', 'index']),
-    target: 'form',
+    selector: 'form',
     callback: mutation => mutation.target.tagName === "FORM" &&
         setAttribute(mutation.target)
 });

package/src/index.js

@@ -85,8 +85,6 @@ async function init(element) {
 }
 
 async function initElement(el) {
-    // if (el.closest('.template')) return;
-
     let data = getObject(el);
     if (!data || !data.type)
         return
@@ -97,14 +95,20 @@ async function initElement(el) {
     if (!elements.has(el)) {
         elements.set(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) {
+
+                if (el.tagName == 'IFRAME') {
+                    // ToDo: saving on contenteditable elements when an objectId does not exist in order to crud or crdt
+                    el = el.contentDocument.documentElement
+                    el.setAttribute('contenteditable', 'true')
+
+                }
+
                 el.addEventListener('input', function (e) {
                     if (el.pendingObject) return
 
@@ -121,6 +125,7 @@ async function initElement(el) {
     }
     // let attributes = ['filter-key', 'filter-search', 'filter-sort-key', 'filter-on', 'filter-limit']
     // if (el.getFilter || attributes.some(attr => el.hasAttribute(attr))) {
+
     await filter.init()
     if (el.getFilter) {
         data.$filter = await el.getFilter();
@@ -373,14 +378,14 @@ 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 {
             if (!data[type] || !data[type].length)
                 continue;
 
-            if (key) {
+            if (key && checkValue(key)) {
                 let value
                 if (key.includes('$length')) {
                     value = CRUD.getValueFromObject(data[type][0], key.replace(/\.\$length$/, ''))
@@ -398,11 +403,10 @@ 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);
-
             }
         }
     }
@@ -411,8 +415,7 @@ async function setData(element, data) {
 async function filterData(element, data, type, key) {
     let operator = '', value
 
-    // if (key && key !== '$length') {
-    if (key && !key.includes('$length')) {
+    if (key && !key.includes('$length') && key !== '{}') {
         if (!data || !type) return
 
         if (key.startsWith('$')) {
@@ -465,7 +468,6 @@ async function filterData(element, data, type, key) {
     }
 
     let isRendered = element.querySelector('[render-clone]');
-
     if (operator) {
         element.setValue(value);
     } else if (element.renderValue && data.method && data.method.endsWith('.read') && data.$filter && (data.$filter.overwrite || !isRendered)) {
@@ -481,6 +483,8 @@ async function filterData(element, data, type, key) {
     } else if (key && key.includes('$length')) {
         let value = CRUD.getValueFromObject(data[type][0], key.replace(/\.\$length$/, ''))
         element.setValue(value.length);
+    } else if (key === '{}') {
+        element.setValue(data[type])
     } else if (data)
         element.setValue(data)
 
@@ -527,7 +531,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()
 
@@ -569,9 +574,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 });
@@ -1165,7 +1181,7 @@ function initSocket() {
 Observer.init({
     name: 'render',
     observe: ['addedNodes'],
-    target: '[render-clone]',
+    selector: '[render-clone]',
     callback: function (mutation) {
         if (!mutation.parentElement.hasAttribute('dnd'))
             return
@@ -1315,7 +1331,7 @@ function dndCrudSend(data, crudType) {
 Observer.init({
     name: 'CoCreateElementsChildList',
     observe: ['childList'],
-    target: selector,
+    selector: selector,
     callback: function (mutation) {
         init(mutation.addedNodes);
     }
@@ -1324,7 +1340,7 @@ Observer.init({
 Observer.init({
     name: 'CoCreateElementsRemovedNodes',
     observe: ['removedNodes'],
-    target: selector,
+    selector: selector,
     callback: function (mutation) {
         // if (mutation.target.parentElement) return
         // if (mutation.target.parentElement) {