@dile/ui 2.14.2 → 2.15.0

package/mixins/form/src/DileForm.js

@@ -31,20 +31,46 @@ export const DileForm = (superclass) => class extends superclass {
   getData() {
     let data = {};
     this.allNodeElements.forEach(node => {
-      data[node.getAttribute('name')] = node.value;
+      const name = node.getAttribute('name');
+      const isArray = name.endsWith('[]');
+      const fieldName = isArray ? name.slice(0, -2) : name;
+      
+      if (isArray) {
+        if (!data[fieldName]) {
+          data[fieldName] = [];
+        }
+        data[fieldName].push(node.value);
+      } else {
+        data[fieldName] = node.value;
+      }
     });
     return data;
   }
 
   setData(data) {
     this.allNodeElements.forEach(node => {
-      if(data[node.getAttribute('name')]  !== undefined && data[node.getAttribute('name')] !== null) {
+      const name = node.getAttribute('name');
+      const isArray = name.endsWith('[]');
+      const fieldName = isArray ? name.slice(0, -2) : name;
+      
+      if (isArray && Array.isArray(data[fieldName])) {
+        // with arrays, the index is the element order in the DOM
+        const arrayElements = Array.from(this.allNodeElements).filter(el => el.getAttribute('name') === name);
+        const elementIndex = arrayElements.indexOf(node);
+        if (elementIndex >= 0 && elementIndex < data[fieldName].length) {
+          const value = data[fieldName][elementIndex];
+          if (typeof node.set === "function") {
+            node.set(value);
+          } else {
+            node.value = value;
+          }
+        }
+      } else if (!isArray && data[fieldName] !== undefined && data[fieldName] !== null) {
         if (typeof node.set === "function") {
-          node.set(data[node.getAttribute('name')]);
+          node.set(data[fieldName]);
         } else {
-          node.value = data[node.getAttribute('name')];
+          node.value = data[fieldName];
         }
-
       }
     });
   }
@@ -64,6 +90,15 @@ export const DileForm = (superclass) => class extends superclass {
   }
 
   getNodeElement(name) {
+    // Check if it's an array field reference like "items.0"
+    const arrayMatch = name.match(/^(.+)\.(\d+)$/);
+    if (arrayMatch) {
+      const fieldName = arrayMatch[1];
+      const index = parseInt(arrayMatch[2]);
+      const arrayElements = this.shadowRoot.querySelectorAll(`[name="${fieldName}[]"]`);
+      return arrayElements[index] || null;
+    }
+    // Regular field
     return this.shadowRoot.querySelector('[name="' + name + '"]');
   }
 
@@ -72,17 +107,51 @@ export const DileForm = (superclass) => class extends superclass {
   }
 
   resetField(name) {
-    if(this.firstValue.hasOwnProperty(name)) {
+    // Check if it's an array field reference like "items.0"
+    const arrayMatch = name.match(/^(.+)\.(\d+)$/);
+    if (arrayMatch) {
+      const fieldName = arrayMatch[1];
+      const index = parseInt(arrayMatch[2]);
+      if (this.firstValue.hasOwnProperty(fieldName) && Array.isArray(this.firstValue[fieldName])) {
+        const value = this.firstValue[fieldName][index];
+        const node = this.getNodeElement(name);
+        if (node) {
+          node.value = value;
+        }
+      }
+    } else if (this.firstValue.hasOwnProperty(name)) {
       let value = this.firstValue[name];
       let node = this.getNodeElement(name);
-      node.value = value;
+      if (node) {
+        node.value = value;
+      }
     }
   }
 
   showError(name, error) {
-    let node = this.getNodeElement(name);
-    node.errored = true;
-    node.message = error;
+    const parts = name.split('.');
+    
+    // Check if it's a nested field reference like "product_lines.0.name"
+    if (parts.length > 2) {
+      const fieldName = parts[0];
+      const nestedPath = parts.slice(1).join('.');
+      const node = this.shadowRoot.querySelector('[name="' + fieldName + '"]');
+      if (node) {
+        node.errored = true;
+        node.message = nestedPath + ':' + error;
+      } else {
+        console.warn(`Error to ${name} not shown because this element is not found`);
+      }
+    } else {
+      // Regular field or array element reference (handled by getNodeElement)
+      let node = this.getNodeElement(name);
+      if(node) {
+        node.errored = true;
+        node.message = error;
+      } else {
+        console.warn(`Error to ${name} not shown because this element is not found`);
+      }
+    }
   }
 
   showErrors(errors) {
@@ -106,8 +175,22 @@ export const DileForm = (superclass) => class extends superclass {
       return true;
     }
     for (let prop of originProperties) {
-      if (this.firstValue[prop] != currentData[prop]) {
-          return true; // Si alguna propiedad no coincide, retorna false
+      const isArray = Array.isArray(this.firstValue[prop]);
+      if (isArray) {
+        const originalArray = this.firstValue[prop];
+        const currentArray = currentData[prop];
+        if (!Array.isArray(currentArray) || originalArray.length !== currentArray.length) {
+          return true;
+        }
+        for (let i = 0; i < originalArray.length; i++) {
+          if (originalArray[i] != currentArray[i]) {
+            return true;
+          }
+        }
+      } else {
+        if (this.firstValue[prop] != currentData[prop]) {
+          return true;
+        }
       }
     }
     return false;

package/mixins/selectable/src/DileSelectable.js

@@ -150,9 +150,6 @@ export const DileSelectable = (SuperClass) =>
     
     updated(changedProperties) {
       this.setSelectedItem();
-      if(changedProperties.has('selected')) {
-        this.dispatchSelectedChanged();
-      }
     }
 
     getItems() {
@@ -166,4 +163,9 @@ export const DileSelectable = (SuperClass) =>
         }
       }
     }
+
+    changeSelectedTo(elem) {
+      this.selected = elem;
+      this.dispatchSelectedChanged();
+    }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.14.2",
+  "version": "2.15.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7043cb3237acf07b8c4bae726742ed390883d21a"
+  "gitHead": "f90d37caf2088efed29d1e0aa4934b6ac3547d95"
 }