@rettangoli/ui 0.1.2-rc19 → 0.1.2-rc20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc19",
+  "version": "0.1.2-rc20",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -49,10 +49,11 @@
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
+    "@rettangoli/fe": "0.0.7-rc11",
     "commander": "^13.1.0",
+    "jempl": "^0.1.2",
     "js-yaml": "^4.1.0",
     "liquidjs": "^10.21.0",
-    "@rettangoli/fe": "0.0.7-rc11",
     "snabbdom": "^3.6.2"
   }
 }

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

@@ -4,7 +4,7 @@ export const handleBeforeMount = (deps) => {
 };
 
 export const handleOnUpdate = (changes, deps) => {
-  const { oldAttrs, newAttrs } = changes
+  const { oldAttrs, newAttrs } = changes;
   const { store, props, render } = deps;
 
   if (oldAttrs?.key === newAttrs?.key) {
@@ -41,15 +41,21 @@ export const handleActionClick = (e, deps) => {
 };
 
 export const handleInputChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
+  const { store, dispatchEvent, props } = deps;
   const name = e.currentTarget.id.replace("input-", "");
   // TODO fix double event
   if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
@@ -61,56 +67,87 @@ export const handlePopoverInputChange = (e, deps) => {
     store.setFormFieldValue({
       name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
 export const handleSelectChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
+  const { store, dispatchEvent, render, props } = deps;
   const name = e.currentTarget.id.replace("select-", "");
   if (name && e.detail.selectedValue !== undefined) {
     store.setFormFieldValue({
       name: name,
       value: e.detail.selectedValue,
+      props,
     });
-    dispatchFormChange(name, e.detail.selectedValue, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.selectedValue,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+    render();
   }
 };
 
 export const handleColorPickerChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
+  const { store, dispatchEvent, props } = deps;
   const name = e.currentTarget.id.replace("colorpicker-", "");
   if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
 export const handleSliderChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
+  const { store, dispatchEvent, props } = deps;
   const name = e.currentTarget.id.replace("slider-", "");
   if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
 export const handleSliderInputChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
+  const { store, dispatchEvent, props } = deps;
   const name = e.currentTarget.id.replace("slider-input-", "");
   if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
@@ -126,7 +163,7 @@ export const handleImageClick = (e, deps) => {
         name: name,
         x: e.clientX,
         y: e.clientY,
-        trigger: e.type
+        trigger: e.type,
       },
     }),
   );
@@ -144,7 +181,7 @@ export const handleWaveformClick = (e, deps) => {
         name: name,
         x: e.clientX,
         y: e.clientY,
-        trigger: e.type
+        trigger: e.type,
       },
     }),
   );

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

@@ -1,10 +1,19 @@
+import { parseAndRender } from "jempl";
+
+function pick(obj, keys) {
+  return keys.reduce((acc, key) => {
+    if (key in obj) acc[key] = obj[key];
+    return acc;
+  }, {});
+}
+
 export const INITIAL_STATE = Object.freeze({
-  formValues: {}
+  formValues: {},
 });
 
 // Lodash-like utility functions for nested property access
 const get = (obj, path, defaultValue = undefined) => {
-  const keys = path.split(/[\[\].]/).filter(key => key !== '');
+  const keys = path.split(/[\[\].]/).filter((key) => key !== "");
   let current = obj;
 
   for (const key of keys) {
@@ -15,21 +24,25 @@ const get = (obj, path, defaultValue = undefined) => {
   }
 
   return current;
-}
+};
 
 const set = (obj, path, value) => {
-  const keys = path.split(/[\[\].]/).filter(key => key !== '');
-  
+  const keys = path.split(/[\[\].]/).filter((key) => key !== "");
+
   // If path contains array notation, delete the original flat key
-  if (path.includes('[') && path in obj) {
+  if (path.includes("[") && path in obj) {
     delete obj[path];
   }
-  
+
   let current = obj;
-  
+
   for (let i = 0; i < keys.length - 1; i++) {
     const key = keys[i];
-    if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
+    if (
+      !(key in current) ||
+      typeof current[key] !== "object" ||
+      current[key] === null
+    ) {
       // Check if next key is a number to create array
       const nextKey = keys[i + 1];
       const isArrayIndex = /^\d+$/.test(nextKey);
@@ -37,71 +50,96 @@ const set = (obj, path, value) => {
     }
     current = current[key];
   }
-  
+
   current[keys[keys.length - 1]] = value;
   return obj;
-}
+};
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+const blacklistedAttrs = ["id", "class", "style", "slot"];
 
 const stringifyAttrs = (attrs) => {
-  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
-}
+  return Object.entries(attrs)
+    .filter(([key]) => !blacklistedAttrs.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" ");
+};
+
+export const selectForm = ({ state, props }) => {
+  const { form } = props;
+  const { context } = props;
+
+  if (context) {
+    return parseAndRender(form, context);
+  }
 
+  return form;
+};
 
 export const toViewData = ({ state, props, attrs }) => {
   const containerAttrString = stringifyAttrs(attrs);
-  const fields = structuredClone(props.form.fields || []);
   const defaultValues = props.defaultValues || {};
 
+  const form = selectForm({ state, props });
+  const fields = structuredClone(form.fields || []);
   fields.forEach((field) => {
     field.defaultValue = get(defaultValues, field.name);
-    
-    if (field.inputType === 'image') {
+
+    if (field.inputType === "image") {
       const src = field.src;
       // Only set imageSrc if src exists and is not empty
       field.imageSrc = src && src.trim() ? src : null;
       // Set placeholder text
-      field.placeholderText = field.placeholder || 'No Image';
+      field.placeholderText = field.placeholder || "No Image";
     }
-    if (field.inputType === 'waveform') {
+    if (field.inputType === "waveform") {
       const waveformData = field.waveformData;
       // Only set waveformData if it exists
       field.waveformData = waveformData || null;
       // Set placeholder text
-      field.placeholderText = field.placeholder || 'No Waveform';
+      field.placeholderText = field.placeholder || "No Waveform";
     }
-  })
+  });
 
   return {
     containerAttrString,
-    title: props.form?.title || '',
-    description: props?.form?.description || '',
+    title: form?.title || "",
+    description: form?.description || "",
     fields: fields,
     actions: props?.form?.actions || {
-      buttons: []
+      buttons: [],
     },
     formValues: state.formValues,
   };
-}
+};
 
 export const selectState = ({ state }) => {
   return state;
-}
+};
 
-export const selectFormValues = ({ state }) => {
-  return state.formValues;
-}
+export const selectFormValues = ({ state, props }) => {
+  const form = selectForm({ state, props });
+
+  return pick(
+    state.formValues,
+    form.fields.map((field) => field.name),
+  );
+};
 
 export const getFormFieldValue = ({ state }, name) => {
   return get(state.formValues, name);
-}
+};
 
 export const setFormValues = (state, defaultValues) => {
   state.formValues = defaultValues || {};
-}
+};
 
-export const setFormFieldValue = (state, { name, value }) => {
+export const setFormFieldValue = (state, { name, value, props }) => {
   set(state.formValues, name, value);
-}
-
+  // remove non visible values
+  const form = selectForm({ state, props });
+  const formValues = pick(
+    state.formValues,
+    form.fields.map((field) => field.name),
+  );
+  state.formValues = formValues;
+};

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

@@ -8,6 +8,8 @@ propsSchema:
   properties:
     defaultValues:
       type: object
+    context:
+      type: object
     form:
       type: object
       properties:
@@ -242,40 +244,40 @@ events:
 
 template:
   - rtgl-view w=f h=f p=md g=lg ${containerAttrString}:
-    - rtgl-view g=sm w=f:
-      - rtgl-text s=lg: ${title}
-      - rtgl-text c=mu-fg: ${description}
-    - rtgl-view g=lg w=f:
-      - $for field, i in fields:
-        - rtgl-view g=md w=f:
-            - rtgl-view g=sm:
-              - rtgl-text: ${field.label}
-              - rtgl-text s=sm c=mu-fg: ${field.description}
-            - $if field.inputType == "read-only-text":
-                - rtgl-text s=sm: ${field.defaultValue}
-            - $if field.inputType == "inputText":
-                - rtgl-input#input-${field.name} w=f placeholder=${field.placeholder} value=${field.defaultValue}:
-            - $if field.inputType == "popover-input":
-                - rtgl-popover-input#popover-input-${field.name} label="${field.label}" .defaultValue=fields[${i}].defaultValue:
-            - $if field.inputType == "select":
-                - rtgl-select#select-${field.name} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=fields[${i}].defaultValue:
-            - $if field.inputType == "colorPicker":
-                - rtgl-color-picker#colorpicker-${field.name} value=${field.defaultValue}:
-            - $if field.inputType == "slider":
-                - rtgl-slider#slider-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} value=${field.defaultValue}:
-            - $if field.inputType == "slider-input":
-                - rtgl-slider-input#slider-input-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} defaultValue=${field.defaultValue}:
-            - $if field.inputType == "image" && field.imageSrc:
-                - rtgl-image#image-${field.name} src=${field.imageSrc} w=${field.width} h=${field.height} cur=p:
-            - $if field.inputType == "image" && !field.imageSrc:
-                - rtgl-view#image-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
-                    - rtgl-text c=mu-fg ta=c: ${field.placeholderText}
-            - $if field.inputType == "waveform" && field.waveformData:
-                - rtgl-waveform#waveform-${field.name} .waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=p:
-            - $if field.inputType == "waveform" && !field.waveformData:
-                - rtgl-view#waveform-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
-                    - rtgl-text c=mu-fg ta=c: ${field.placeholder}
-    - rtgl-view g=sm w=f:
-      - rtgl-view d=h ah=e g=sm w=f:
-        - $for button, i in actions.buttons:
-          - rtgl-button#action-${button.id}: ${button.content}
+      - rtgl-view g=sm w=f:
+          - rtgl-text s=lg: ${title}
+          - rtgl-text c=mu-fg: ${description}
+      - rtgl-view g=lg w=f:
+          - $for field, i in fields:
+              - rtgl-view g=md w=f:
+                  - rtgl-view g=sm:
+                      - rtgl-text: ${field.label}
+                      - rtgl-text s=sm c=mu-fg: ${field.description}
+                  - $if field.inputType == "read-only-text":
+                      - rtgl-text s=sm: ${field.defaultValue}
+                  - $if field.inputType == "inputText":
+                      - rtgl-input#input-${field.name} w=f placeholder=${field.placeholder} value=${field.defaultValue}:
+                  - $if field.inputType == "popover-input":
+                      - rtgl-popover-input#popover-input-${field.name} label="${field.label}" .defaultValue=fields[${i}].defaultValue:
+                  - $if field.inputType == "select":
+                      - rtgl-select#select-${field.name} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=fields[${i}].defaultValue:
+                  - $if field.inputType == "colorPicker":
+                      - rtgl-color-picker#colorpicker-${field.name} value=${field.defaultValue}:
+                  - $if field.inputType == "slider":
+                      - rtgl-slider#slider-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} value=${field.defaultValue}:
+                  - $if field.inputType == "slider-input":
+                      - rtgl-slider-input#slider-input-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} defaultValue=${field.defaultValue}:
+                  - $if field.inputType == "image" && field.imageSrc:
+                      - rtgl-image#image-${field.name} src=${field.imageSrc} w=${field.width} h=${field.height} cur=p:
+                  - $if field.inputType == "image" && !field.imageSrc:
+                      - rtgl-view#image-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
+                          - rtgl-text c=mu-fg ta=c: ${field.placeholderText}
+                  - $if field.inputType == "waveform" && field.waveformData:
+                      - rtgl-waveform#waveform-${field.name} .waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=p:
+                  - $if field.inputType == "waveform" && !field.waveformData:
+                      - rtgl-view#waveform-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
+                          - rtgl-text c=mu-fg ta=c: ${field.placeholder}
+      - rtgl-view g=sm w=f:
+          - rtgl-view d=h ah=e g=sm w=f:
+              - $for button, i in actions.buttons:
+                  - rtgl-button#action-${button.id}: ${button.content}