@rettangoli/ui 0.1.2-rc24 → 0.1.2-rc26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc24",
+  "version": "0.1.2-rc26",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/common.js

@@ -180,6 +180,25 @@ function convertObjectToCssString(styleObject, selector = ':host') {
   return result;
 }
 
+// Deep equality helper for comparing values (including objects)
+export const deepEqual = (a, b) => {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== 'object' || typeof b !== 'object') return false;
+  
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  
+  if (keysA.length !== keysB.length) return false;
+  
+  for (const key of keysA) {
+    if (!keysB.includes(key)) return false;
+    if (!deepEqual(a[key], b[key])) return false;
+  }
+  
+  return true;
+};
+
 export {
   css,
   generateCSS,

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

@@ -1,5 +1,22 @@
 import { parseAndRender } from "jempl";
 
+const encode = (input) => {
+  function escapeHtml(text) {
+    const map = {
+      '&': '&',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
+    };
+    return text.replace(/[&<>"']/g, char => map[char]);
+  }
+  if (input === undefined || input === null) {
+    return ""
+  }
+  return `"${escapeHtml(String(input))}"`;
+}
+
 function pick(obj, keys) {
   return keys.reduce((acc, key) => {
     if (key in obj) acc[key] = obj[key];
@@ -77,6 +94,7 @@ export const selectForm = ({ state, props }) => {
   return form;
 };
 
+
 export const toViewData = ({ state, props, attrs }) => {
   const containerAttrString = stringifyAttrs(attrs);
   const defaultValues = props.defaultValues || {};
@@ -85,7 +103,16 @@ export const toViewData = ({ state, props, attrs }) => {
   const fields = structuredClone(form.fields || []);
   fields.forEach((field) => {
     // Use formValues from state if available, otherwise fall back to defaultValues from props
-    field.defaultValue = get(state.formValues, field.name) ?? get(defaultValues, field.name);
+    const defaultValue = get(state.formValues, field.name) ?? get(defaultValues, field.name)
+    if (["popover-input", "select", "read-only-text"].includes(field.inputType)) {
+      field.defaultValue = defaultValue
+    } else {
+      field.defaultValue = encode(defaultValue);
+    }
+
+    if (["inputText"].includes(field.inputType)) {
+      field.placeholder = encode(field.placeholder)
+    }
 
     if (field.inputType === "image") {
       const src = field.src;

package/src/components/select/select.handlers.js

@@ -1,9 +1,10 @@
+import { deepEqual } from '../../common.js';
 
 export const handleBeforeMount = (deps) => {
   const { store, props, render } = deps;
   
   if (props.selectedValue !== null && props.selectedValue !== undefined && props.options) {
-    const selectedOption = props.options.find(opt => opt.value === props.selectedValue);
+    const selectedOption = props.options.find(opt => deepEqual(opt.value, props.selectedValue));
     if (selectedOption) {
       store.updateSelectOption(selectedOption);
       render();
@@ -25,7 +26,7 @@ export const handleOnUpdate = (changes, deps) => {
     const options = newProps?.options || props?.options;
     
     if (selectedValue !== null && selectedValue !== undefined && options) {
-      const selectedOption = options.find(opt => opt.value === selectedValue);
+      const selectedOption = options.find(opt => deepEqual(opt.value, selectedValue));
       if (selectedOption) {
         store.updateSelectOption(selectedOption);
       }

package/src/components/select/select.store.js

@@ -1,3 +1,5 @@
+import { deepEqual } from '../../common.js';
+
 export const INITIAL_STATE = Object.freeze({
   isOpen: false,
   position: {
@@ -5,31 +7,30 @@ export const INITIAL_STATE = Object.freeze({
     y: 0,
   },
   selectedValue: null,
-  selectedLabel: null,
 });
 
 export const toViewData = ({ state, props }) => {
-  // Calculate display label
-  let displayLabel = props.placeholder || 'Select an option';
-  
   // Use state's selected value if available, otherwise use props.selectedValue
   const currentValue = state.selectedValue !== null ? state.selectedValue : props.selectedValue;
   
+  // Calculate display label from value
+  let displayLabel = props.placeholder || 'Select an option';
   if (currentValue !== null && currentValue !== undefined && props.options) {
-    const selectedOption = props.options.find(opt => opt.value === currentValue);
+    const selectedOption = props.options.find(opt => deepEqual(opt.value, currentValue));
     if (selectedOption) {
       displayLabel = selectedOption.label;
     }
-  } else if (state.selectedLabel) {
-    displayLabel = state.selectedLabel;
   }
   
   // Map options to include isSelected flag and computed background color
-  const optionsWithSelection = (props.options || []).map(option => ({
-    ...option,
-    isSelected: option.value === currentValue,
-    bgc: option.value === currentValue ? 'mu' : ''
-  }));
+  const optionsWithSelection = (props.options || []).map(option => {
+    const isSelected = deepEqual(option.value, currentValue);
+    return {
+      ...option,
+      isSelected,
+      bgc: isSelected ? 'mu' : ''
+    };
+  });
   
   return {
     isOpen: state.isOpen,
@@ -57,13 +58,11 @@ export const closeOptionsPopover = (state) => {
 
 export const updateSelectOption = (state, option) => {
   state.selectedValue = option.value;
-  state.selectedLabel = option.label;
   state.isOpen = false;
 }
 
 export const resetSelection = (state) => {
   state.selectedValue = undefined;
-  state.selectedLabel = undefined;
 }