@rettangoli/ui 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -62,7 +62,7 @@
   },
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
-    "@rettangoli/fe": "1.0.4",
+    "@rettangoli/fe": "1.1.0",
     "jempl": "1.0.1"
   }
 }

package/src/components/form/form.handlers.js

@@ -143,9 +143,14 @@ export const handleAfterMount = (deps) => {
 };
 
 export const handleOnUpdate = (deps, payload) => {
-  const { newProps } = payload;
+  const { oldProps, newProps } = payload;
   const { store, render, refs } = deps;
   const formDisabled = !!newProps?.disabled;
+  const keyChanged = oldProps?.key !== newProps?.key;
+
+  if (keyChanged) {
+    initFormValues(store, newProps);
+  }
 
   const state = store.getState();
   pruneHiddenValues({ state, props: newProps });

package/src/components/form/form.store.js

@@ -491,9 +491,7 @@ export const selectViewData = ({ state, props }) => {
   const flatFields = flattenFields(fields);
 
   // Enrich each field with computed properties
-  flatFields.forEach((field, arrIdx) => {
-    field._arrIdx = arrIdx;
-
+  flatFields.forEach((field) => {
     if (field._isSection) return;
 
     const isData = isDataField(field);

package/src/components/form/form.view.yaml

@@ -67,7 +67,7 @@ template:
                       - $if field.type == "input-textarea":
                           - rtgl-textarea#field${field._idx} data-field-name=${field.name} w=f rows=${field.rows} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
                       - $if field.type == "select":
-                          - rtgl-select#field${field._idx} data-field-name=${field.name} w=f :options=flatFields[${field._arrIdx}].options ?no-clear=${field.noClear} :selectedValue=flatFields[${field._arrIdx}]._selectedValue :placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                          - rtgl-select#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} ?no-clear=${field.noClear} :selectedValue=${field._selectedValue} :placeholder=${field.placeholder} ?disabled=${field._disabled}: null
                       - $if field.type == "color-picker":
                           - rtgl-color-picker#field${field._idx} data-field-name=${field.name} ?disabled=${field._disabled}: null
                       - $if field.type == "slider":

package/src/components/globalUi/globalUi.view.yaml

@@ -26,7 +26,7 @@ refs:
 template:
   - rtgl-dialog#dialog ?open=${isDialogContainerOpen} s=${dialogSize}:
       - $if isFormDialogOpen:
-          - rtgl-form#formDialog slot=content :form=formDialogConfig.form :defaultValues=formDialogConfig.defaultValues :context=formDialogConfig.context ?disabled=${formDialogConfig.disabled} key=form-dialog-${formDialogConfig.key}: null
+          - rtgl-form#formDialog slot=content :form=${formDialogConfig.form} :defaultValues=${formDialogConfig.defaultValues} :context=${formDialogConfig.context} ?disabled=${formDialogConfig.disabled} key=form-dialog-${formDialogConfig.key}: null
       - $if !isFormDialogOpen:
           - rtgl-view slot=content g=lg p=lg:
               - rtgl-view g=sm w=f:
@@ -39,4 +39,4 @@ template:
                   - $if config.mode == 'confirm':
                       - rtgl-button#cancelButton v=se: ${config.cancelText}
                   - rtgl-button#confirmButton v=pr: ${config.confirmText}
-  - rtgl-dropdown-menu#dropdownMenu ?open=${isDropdownOpen} x=${dropdownConfig.x} y=${dropdownConfig.y} place=${dropdownConfig.place} :items=dropdownConfig.items key=dropdown-${isDropdownOpen}: null
+  - rtgl-dropdown-menu#dropdownMenu ?open=${isDropdownOpen} x=${dropdownConfig.x} y=${dropdownConfig.y} place=${dropdownConfig.place} :items=${dropdownConfig.items} key=dropdown-${isDropdownOpen}: null