@rettangoli/ui 0.1.12 → 0.1.14

package/package.json

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

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

@@ -1,17 +1,72 @@
+
+const updateAttributes = ({ form, defaultValues = {}, refs }) => {
+  const { fields = [] } = form;
+  fields.forEach((field) => {
+    const ref = refs[`field-${field.name}`]?.elm;
+
+    if (!ref) {
+      return;
+    }
+
+    if (['inputText', 'colorPicker', 'slider', 'slider-input', 'popover-input'].includes(field.inputType)) {
+      const defaultValue = defaultValues[field.name];
+      if (defaultValue !== undefined) {
+        ref.setAttribute('value', defaultValue)
+      }
+    }
+    if (field.inputType === 'inputText' && field.placeholder) {
+      const currentPlaceholder = ref.getAttribute('placeholder')
+      if (currentPlaceholder !== field.placeholder) {
+        ref.setAttribute('placeholder', field.placeholder)
+      }
+    }
+    if (field.inputType === 'select' && field.placeholder) {
+      if (ref.placeholder !== field.placeholder) {
+        ref.placeholder = field.placeholder;
+      }
+    }
+    if (field.inputType === 'select') {
+      if (field.placeholder !== ref.getAttribute('placeholder')) {
+        if (field.placeholder !== undefined) {
+          ref.setAttribute('placeholder', field.placeholder)
+        } else {
+          ref.removeAttribute('placeholder');
+        }
+        ref.render();
+      }
+
+      const defaultValue = defaultValues[field.name]
+      if (defaultValue !== ref.selectedValue) {
+        ref.selectedValue = defaultValue;
+        ref.render();
+      }
+    }
+  })
+}
+
 export const handleBeforeMount = (deps) => {
   const { store, props } = deps;
   store.setFormValues(props.defaultValues);
 };
 
+export const handleAfterMount = (deps) => {
+  const { props, getRefIds, render } = deps;
+  const { form = {}, defaultValues } = props;
+  const refs = getRefIds();
+  updateAttributes({ form, defaultValues, refs });
+  render();
+};
+
 export const handleOnUpdate = (deps, payload) => {
   const { oldAttrs, newAttrs, newProps } = payload;
-  const { store, render } = deps;
-
-  if (oldAttrs?.key === newAttrs?.key) {
+  const { store, render, getRefIds } = deps;
+  const { form = {}, defaultValues } = newProps;
+  if (oldAttrs?.key !== newAttrs?.key) {
+    const refs = getRefIds();
+    updateAttributes({ form, defaultValues, refs });
     return;
   }
-
-  store.setFormValues(newProps.defaultValues);
+  store.setFormValues(defaultValues);
   render();
 };
 

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

@@ -11,7 +11,7 @@ const encode = (input) => {
     };
     return text.replace(/[&<>"']/g, char => map[char]);
   }
-  if (input === undefined || input === null) {
+  if (input === undefined || input === null || input === "") {
     return ""
   }
   return `"${escapeHtml(String(input))}"`;
@@ -89,12 +89,13 @@ const stringifyAttrs = (attrs) => {
     .join(" ");
 };
 
-export const selectForm = ({ state, props }) => {
-  const { form } = props;
+export const selectForm = ({ props }) => {
+  const { form = {} } = props;
   const { context } = props;
 
   if (context) {
-    return parseAndRender(form, context);
+    const result = parseAndRender(form, context);
+    return result
   }
 
   return form;
@@ -103,23 +104,15 @@ export const selectForm = ({ state, props }) => {
 
 export const selectViewData = ({ state, props, attrs }) => {
   const containerAttrString = stringifyAttrs(attrs);
-  const defaultValues = state.formValues;
 
   const form = selectForm({ state, props });
   const fields = structuredClone(form.fields || []);
   fields.forEach((field) => {
     // Use formValues from state if available, otherwise fall back to defaultValues from props
-    const defaultValue = get(state.formValues, field.name) ?? get(defaultValues, field.name)
-    if (["popover-input", "select", "read-only-text"].includes(field.inputType)) {
+    const defaultValue = get(state.formValues, field.name)
+    if (["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;
       // Only set imageSrc if src exists and is not empty

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

@@ -268,26 +268,18 @@ refs:
         handler: handleTooltipMouseEnter
       mouseleave:
         handler: handleTooltipMouseLeave
-  input-*:
+  field-*:
     eventListeners:
       input-change:
         handler: handleInputChange
-  select-*:
-    eventListeners:
       select-change:
         handler: handleSelectChange
       add-option-selected:
         handler: handleSelectAddOption
-  colorpicker-*:
-    eventListeners:
       colorpicker-change:
         handler: handleColorPickerChange
-  slider-*:
-    eventListeners:
       slider-change:
         handler: handleSliderChange
-  slider-input-*:
-    eventListeners:
       slider-input-value-change:
         handler: handleSliderInputChange
   image-*:
@@ -329,29 +321,29 @@ template:
                   - $if field.inputType == "read-only-text":
                       - rtgl-text s=sm: ${field.defaultValue}
                   - $if field.inputType == "inputText":
-                      - rtgl-input#input-${field.name} key=${key} w=f placeholder=${field.placeholder} value=${field.defaultValue}:
+                      - rtgl-input#field-${field.name} w=f:
                   - $if field.inputType == "popover-input":
-                      - rtgl-popover-input#popover-input-${field.name} label="${field.label}" .defaultValue=fields[${i}].defaultValue:
+                      - rtgl-popover-input#field-${field.name} label="${field.label}":
                   - $if field.inputType == "select":
-                      - rtgl-select#select-${field.name} key=${key} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=fields[${i}].defaultValue ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption:
+                      - rtgl-select#field-${field.name} key=${key} w=f .options=fields[${i}].options ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption:
                   - $if field.inputType == "colorPicker":
-                      - rtgl-color-picker#colorpicker-${field.name} key=${key} value=${field.defaultValue}:
+                      - rtgl-color-picker#field-${field.name} key=${key}:
                   - $if field.inputType == "slider":
-                      - rtgl-slider#slider-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} value=${field.defaultValue}:
+                      - rtgl-slider#field-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step}:
                   - $if field.inputType == "slider-input":
-                      - rtgl-slider-input#slider-input-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} defaultValue=${field.defaultValue}:
+                      - rtgl-slider-input#field-${field.name} w=f min=${field.min} max=${field.max} step=${field.step}:
                   - $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-view#field-${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:
+                      - rtgl-waveform#field-${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-view#field-${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}
                   - $if field.inputType == "slot":
-                      - 'slot#slot-${field.slotName} name=${field.slot} style="display: contents;"':
+                      - 'slot#field-${field.slotName} name=${field.slot} style="display: contents;"':
       - rtgl-view g=sm w=f:
           - rtgl-view d=h ah=e g=sm w=f:
               - $for button, i in actions.buttons:

package/src/components/globalUi/globalUi.handlers.js

@@ -1,14 +1,14 @@
 export const handleDialogClose = (deps, payload) => {
   const { store, render } = deps;
 
-  store.closeDialog();
+  store.closeAll();
   render();
 };
 
 export const handleConfirm = (deps, payload) => {
   const { store, render, globalUI } = deps;
 
-  store.closeDialog();
+  store.closeAll();
   render();
   globalUI.emit('event', true);
 };
@@ -16,7 +16,7 @@ export const handleConfirm = (deps, payload) => {
 export const handleCancel = (deps, payload) => {
   const { store, render, globalUI } = deps;
 
-  store.closeDialog();
+  store.closeAll();
   render();
   globalUI.emit('event', false);
 };
@@ -25,7 +25,7 @@ export const handleDropdownClose = (deps, payload) => {
   const { store, render, globalUI } = deps;
 
   // Always process close events - the framework will handle if it's already closed
-  store.closeDialog();
+  store.closeAll();
   render();
   globalUI.emit('event', null);
 };
@@ -36,7 +36,7 @@ export const handleDropdownItemClick = (deps, payload) => {
   const { index, item } = event.detail;
 
   // Always process click events - the framework will handle if it's already closed
-  store.closeDialog();
+  store.closeAll();
   render();
   globalUI.emit('event', { index, item });
 };
@@ -61,7 +61,7 @@ export const showAlert = (deps, payload) => {
 
   // Close any existing dialog/dropdown menu first
   if (store.selectIsOpen()) {
-    store.closeDialog();
+    store.closeAll();
     render();
   }
 
@@ -75,7 +75,7 @@ export const showConfirm = async (deps, payload) => {
 
   // Close any existing dialog/dropdown menu first
   if (store.selectIsOpen()) {
-    store.closeDialog();
+    store.closeAll();
     render();
   }
 
@@ -113,7 +113,7 @@ export const showDropdownMenu = async (deps, payload) => {
 
   // Close any existing dialog/dropdown menu first
   if (store.selectIsOpen()) {
-    store.closeDialog();
+    store.closeAll();
     render();
   }
 
@@ -126,4 +126,26 @@ export const showDropdownMenu = async (deps, payload) => {
       resolve(result)
     });
   });
+};
+
+/**
+ * Triggers a global event to close all UI components.
+ * This function will:
+ * 1. Close any open global UI dialogs/dropdowns managed by the store
+ * 2. Emit a global 'closeAll' event that other components can listen to
+ *
+ * @param {Object} deps - Dependencies object
+ * @param {Object} deps.store - The globalUI store instance
+ * @param {Function} deps.render - Function to trigger re-rendering
+ * @param {Object} deps.globalUI - The globalUI event emitter
+ * @returns {void}
+ */
+export const closeAll = (deps) => {
+  const { store, render } = deps;
+
+  // Close global UI dialogs/dropdowns
+  if (store.selectIsOpen()) {
+    store.closeAll();
+    render();
+  }
 };

package/src/components/globalUi/globalUi.store.js

@@ -66,7 +66,7 @@ export const setDropdownConfig = (state, options) => {
   state.isOpen = true;
 };
 
-export const closeDialog = (state) => {
+export const closeAll = (state) => {
   state.isOpen = false;
   state.uiType = "dialog"; // Reset to default type
 };

package/src/components/popoverInput/popoverInput.handlers.js

@@ -1,17 +1,18 @@
 export const handleBeforeMount = (deps) => {
-  const { store, props } = deps;
+  const { store, attrs } = deps;
 
-  if (props.value !== undefined || props.defaultValue !== undefined) {
-    store.setValue(props.value || props.defaultValue || '');
+  if (attrs.value !== undefined) {
+    store.setValue(attrs.value || '');
   }
 }
 
 export const handleOnUpdate = (deps, payload) => {
-  const { oldProps, newProps} = payload
-  const { store, props, render } = deps;
+  const { oldAttrs, newAttrs } = payload;
+  const { store, render } = deps;
 
-  if (oldProps.defaultValue !== newProps.defaultValue) {
-    store.setValue(props.defaultValue || '');
+  if (oldAttrs?.value !== newAttrs?.value) {
+    const value = newAttrs?.value ?? '';
+    store.setValue(value);
   }
 
   render();

package/src/components/popoverInput/popoverInput.store.js

@@ -8,16 +8,15 @@ export const createInitialState = () => Object.freeze({
   tempValue: '',
 });
 
-export const selectViewData = ({ attrs, state, props }) => {
-  // Use state's current value if it has been modified, otherwise use props
+export const selectViewData = ({ attrs, state }) => {
   const value = state.value || '-';
 
   return {
     isOpen: state.isOpen,
     position: state.position,
-    value: value ?? '-',
+    value: value,
     tempValue: state.tempValue,
-    placeholder: props.placeholder ?? '',
+    placeholder: attrs.placeholder ?? '',
     label: attrs.label,
   };
 }
@@ -30,7 +29,6 @@ export const openPopover = (state, payload) => {
   const { position } = payload;
   state.position = position;
   state.isOpen = true;
-  // Reset the current value to match the display value when opening
   state.hasUnsavedChanges = false;
 }
 

package/src/components/popoverInput/popoverInput.view.yaml

@@ -4,22 +4,12 @@ viewDataSchema:
   type: object
 
 attrsSchema:
-  type: object
-  properties:
-    auto-focus:
-      type: boolean
-
-propsSchema:
   type: object
   properties:
     value:
       type: string
-    defaultValue:
-      type: string
     placeholder:
       type: string
-    onChange:
-      type: function
 
 refs:
   text-display:
@@ -46,10 +36,10 @@ events:
 
 template:
   - rtgl-view#text-display w=f cur=p:
-    - rtgl-text: ${value}
+      - rtgl-text: ${value}
   - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y}:
-    - rtgl-view g=md w=240 slot=content bgc=background br=md:
-      - rtgl-text: ${label}
-      - rtgl-input#input w=f placeholder=${placeholder}:
-      - rtgl-view w=f ah=e:
-        - rtgl-button#submit: Submit
+      - rtgl-view g=md w=240 slot=content bgc=background br=md:
+          - rtgl-text: ${label}
+          - rtgl-input#input w=f placeholder=${placeholder}:
+          - rtgl-view w=f ah=e:
+              - rtgl-button#submit: Submit

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

@@ -6,7 +6,9 @@ export const handleBeforeMount = (deps) => {
   if (props.selectedValue !== null && props.selectedValue !== undefined && props.options) {
     const selectedOption = props.options.find(opt => deepEqual(opt.value, props.selectedValue));
     if (selectedOption) {
-      store.updateSelectOption(selectedOption);
+      store.updateSelectedValue({
+        value: selectedOption?.value
+      });
       render();
     }
   }
@@ -28,10 +30,15 @@ export const handleOnUpdate = (deps, payload) => {
     if (selectedValue !== null && selectedValue !== undefined && options) {
       const selectedOption = options.find(opt => deepEqual(opt.value, selectedValue));
       if (selectedOption) {
-        store.updateSelectOption(selectedOption);
+        store.updateSelectedValue({
+          value: selectedOption.value
+        });
       }
     }
     render();
+  } else if (oldProps.selectedValue !== newProps.selectedValue) {
+    store.updateSelectedValue(newProps.selectedValue);
+    render();
   }
 }
 
@@ -65,7 +72,7 @@ export const handleButtonClick = (deps, payload) => {
   render();
 }
 
-export const handleClickOptionsPopoverOverlay = (deps, payload) => {
+export const handleClickOptionsPopoverOverlay = (deps) => {
   const { store, render } = deps;
   store.closeOptionsPopover();
   render();
@@ -80,7 +87,7 @@ export const handleOptionClick = (deps, payload) => {
   const option = props.options[id];
 
   // Update internal state
-  store.updateSelectOption(option);
+  store.updateSelectedValue({ value: option?.value });
 
   // Call onChange if provided
   if (props.onChange && typeof props.onChange === 'function') {

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

@@ -3,13 +3,13 @@ import { deepEqual } from '../../common.js';
 // Attributes that should not be passed through to the container
 // These are either handled internally or have special meaning
 const blacklistedAttrs = [
-  "id", 
-  "class", 
-  "style", 
+  "id",
+  "class",
+  "style",
   "slot",
   // Select-specific props that are handled separately
   "placeholder",
-  "selectedValue", 
+  "selectedValue",
   "selected-value",
   "onChange",
   "on-change",
@@ -42,7 +42,7 @@ export const selectViewData = ({ state, props, attrs }) => {
   const currentValue = state.selectedValue !== null ? state.selectedValue : props.selectedValue;
 
   // Calculate display label from value
-  let displayLabel = props.placeholder || 'Select an option';
+  let displayLabel = attrs.placeholder || 'Select an option';
   let isPlaceholderLabel = true;
   if (currentValue !== null && currentValue !== undefined && props.options) {
     const selectedOption = props.options.find(opt => deepEqual(opt.value, currentValue));
@@ -63,6 +63,8 @@ export const selectViewData = ({ state, props, attrs }) => {
     };
   });
 
+  console.log('attrs.placeholder', attrs.placeholder)
+
   return {
     containerAttrString,
     isOpen: state.isOpen,
@@ -71,7 +73,6 @@ export const selectViewData = ({ state, props, attrs }) => {
     selectedValue: currentValue,
     selectedLabel: displayLabel,
     selectedLabelColor: isPlaceholderLabel ? "mu-fg" : "fg",
-    placeholder: props.placeholder || 'Select an option',
     hasValue: currentValue !== null && currentValue !== undefined,
     showClear: !attrs['no-clear'] && !props['no-clear'] && (currentValue !== null && currentValue !== undefined),
     showAddOption: !!props.addOption,
@@ -102,8 +103,8 @@ export const closeOptionsPopover = (state) => {
   state.isOpen = false;
 }
 
-export const updateSelectOption = (state, option) => {
-  state.selectedValue = option.value;
+export const updateSelectedValue = (state, payload) => {
+  state.selectedValue = payload.value;
   state.isOpen = false;
 }
 

package/src/components/select/select.view.yaml

@@ -3,6 +3,12 @@ elementName: rtgl-select
 viewDataSchema:
   type: object
 
+attrsSchema:
+  type: object
+  properties:
+    placeholder:
+      type: string
+
 propsSchema:
   type: object
   properties:
@@ -17,8 +23,6 @@ propsSchema:
             type: any
     selectedValue:
       type: any
-    placeholder:
-      type: string
     onChange:
       type: function
     no-clear:

package/src/components/sliderInput/sliderInput.handlers.js

@@ -1,21 +1,15 @@
 export const handleBeforeMount = (deps) => {
   const { store, attrs } = deps;
-  store.setValue(attrs.defaultValue || 0);
+  store.setValue(attrs.value ?? 0);
 }
 
 export const handleOnUpdate = (deps, payload) => {
   const { oldAttrs, newAttrs } = payload;
-  const { store, render, attrs } = deps;
+  const { store, render } = deps;
 
-  // Reset when key changes
-  if (oldAttrs?.key !== newAttrs?.key && newAttrs?.key) {
-    const defaultValue = newAttrs?.defaultValue || attrs?.defaultValue || 0;
-    store.setValue(defaultValue);
-    render();
-  } else if (oldAttrs?.defaultValue !== newAttrs?.defaultValue) {
-    // Also reset when defaultValue changes
-    const defaultValue = newAttrs?.defaultValue || 0;
-    store.setValue(defaultValue);
+  if (oldAttrs?.value !== newAttrs?.value) {
+    const value = newAttrs?.value ?? 0;
+    store.setValue(value);
     render();
   }
 }

package/src/components/sliderInput/sliderInput.view.yaml

@@ -6,21 +6,21 @@ viewDataSchema:
 attrsSchema:
   type: object
   properties:
-    defaultValue:
+    value:
       type: string
-      default: '0'
+      default: "0"
     w:
       type: string
-      default: ''
+      default: ""
     min:
       type: string
-      default: '0'
+      default: "0"
     max:
       type: string
-      default: '100'
+      default: "100"
     step:
       type: string
-      default: '1'
+      default: "1"
 
 refs:
   input:
@@ -37,6 +37,7 @@ events:
 
 template:
   - rtgl-view d=h av=c g=md w=${w}:
-    - rtgl-slider#slider key=${key} w=f type=range min=${min} max=${max} step=${step} value=${value}:
-    - rtgl-view w=84:
-      - rtgl-input#input key=${key} w=f type=number min=${min} max=${max} step=${step} value=${value}:
+      - rtgl-slider#slider key=${key} w=f type=range min=${min} max=${max} step=${step} value=${value}:
+      - rtgl-view w=84:
+          - rtgl-input#input key=${key} w=f type=number min=${min} max=${max} step=${step} value=${value}:
+

package/src/deps/createGlobalUI.js

@@ -1,6 +1,6 @@
 /**
  * Creates a GlobalUI manager instance for controlling global UI components.
- * Provides methods for showing alerts, confirm dialogs, and dropdown menus.
+ * Provides methods for showing alerts, confirm dialogs, dropdown menus, and closing all UI components.
  *
  * @param {HTMLElement} globalUIElement - The globalUI component element
  * @returns {Object} GlobalUI manager instance
@@ -9,6 +9,7 @@
  * @returns {Function} returns.showAlert - Show an alert dialog
  * @returns {Function} returns.showConfirm - Show a confirmation dialog
  * @returns {Function} returns.showDropdownMenu - Show a dropdown menu
+ * @returns {Function} returns.closeAll - General-purpose function to close all currently open UI components
  */
 const createGlobalUI = (globalUIElement) => {
   let listeners = {};
@@ -109,6 +110,22 @@ const createGlobalUI = (globalUIElement) => {
         throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
       }
       return globalUIElement.transformedHandlers.showDropdownMenu(options);
+    },
+
+    /**
+     * General-purpose function to close all currently open UI components.
+     * This includes dialogs, popovers, tooltips, selects, dropdown menus, and any other floating UI elements.
+     * Useful for programmatically cleaning up the entire UI surface.
+     *
+     * @returns {Promise<void>} Promise that resolves when all UI components are closed
+     * @throws {Error} If globalUIElement is not initialized
+     */
+    closeAll: async () => {
+      if(!globalUIElement)
+      {
+        throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
+      }
+      return globalUIElement.transformedHandlers.closeAll();
     }
   };
 }