@rettangoli/ui 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "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,79 @@
+
+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 || defaultValue === null) {
+        ref.removeAttribute('value')
+      } else {
+        ref.setAttribute('value', defaultValue)
+      }
+    }
+    if (field.inputType === 'inputText' && field.placeholder) {
+      const currentPlaceholder = ref.getAttribute('placeholder')
+      if (currentPlaceholder !== field.placeholder) {
+        if (field.placeholder === undefined || field.placeholder === null) {
+          ref.removeAttribute('placeholder');
+        } else {
+          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 });
+    store.setFormValues(defaultValues);
+    render();
     return;
   }
-
-  store.setFormValues(newProps.defaultValues);
   render();
 };
 
@@ -44,28 +106,7 @@ export const handleActionClick = (deps, payload) => {
 export const handleInputChange = (deps, payload) => {
   const { store, dispatchEvent, props } = deps;
   const event = payload._event;
-  const name = event.currentTarget.id.replace("input-", "");
-  // TODO fix double event
-  if (name && event.detail.value !== undefined) {
-    store.setFormFieldValue({
-      name: name,
-      value: event.detail.value,
-      props,
-    });
-    dispatchFormChange(
-      name,
-      event.detail.value,
-      store.selectFormValues(),
-      dispatchEvent,
-    );
-  }
-};
-
-export const handlePopoverInputChange = (deps, payload) => {
-  const { store, dispatchEvent, props } = deps;
-  const event = payload._event;
-  const name = event.currentTarget.id.replace("popover-input-", "");
-  // TODO fix double event
+  let name = event.currentTarget.id.replace("field-", "");
   if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
@@ -84,7 +125,7 @@ export const handlePopoverInputChange = (deps, payload) => {
 export const handleSelectChange = (deps, payload) => {
   const { store, dispatchEvent, render, props } = deps;
   const event = payload._event;
-  const name = event.currentTarget.id.replace("select-", "");
+  const name = event.currentTarget.id.replace("field-", "");
   if (name) {
     store.setFormFieldValue({
       name: name,
@@ -104,7 +145,7 @@ export const handleSelectChange = (deps, payload) => {
 export const handleColorPickerChange = (deps, payload) => {
   const { store, dispatchEvent, props } = deps;
   const event = payload._event;
-  const name = event.currentTarget.id.replace("colorpicker-", "");
+  const name = event.currentTarget.id.replace("field-", "");
   if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
@@ -123,7 +164,7 @@ export const handleColorPickerChange = (deps, payload) => {
 export const handleSliderChange = (deps, payload) => {
   const { store, dispatchEvent, props } = deps;
   const event = payload._event;
-  const name = event.currentTarget.id.replace("slider-", "");
+  const name = event.currentTarget.id.replace("field-", "");
   if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
@@ -142,7 +183,7 @@ export const handleSliderChange = (deps, payload) => {
 export const handleSliderInputChange = (deps, payload) => {
   const { store, dispatchEvent, props } = deps;
   const event = payload._event;
-  const name = event.currentTarget.id.replace("slider-input-", "");
+  const name = event.currentTarget.id.replace("field-", "");
   if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
@@ -199,7 +240,7 @@ export const handleWaveformClick = (deps, payload) => {
 export const handleSelectAddOption = (deps, payload) => {
   const { store, dispatchEvent } = deps;
   const event = payload._event;
-  const name = event.currentTarget.id.replace("select-", "");
+  const name = event.currentTarget.id.replace("field-", "");
   dispatchEvent(
     new CustomEvent("action-click", {
       detail: {
@@ -231,7 +272,7 @@ export const handleTooltipMouseEnter = (deps, payload) => {
   }
 };
 
-export const handleTooltipMouseLeave = (deps, payload) => {
+export const handleTooltipMouseLeave = (deps) => {
   const { store, render } = deps;
   store.hideTooltip();
   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-*:
@@ -302,10 +294,6 @@ refs:
         handler: handleWaveformClick
       contextmenu:
         handler: handleWaveformClick
-  popover-input-*:
-    eventListeners:
-      input-change:
-        handler: handlePopoverInputChange
 
 events:
   form-change: {}
@@ -329,29 +317,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/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();
@@ -63,9 +64,8 @@ export const handleInputChange = (deps, payload) => {
   render();
 }
 
-export const handleSubmitClick = (deps, payload) => {
+export const handleSubmitClick = (deps) => {
   const { store, render, dispatchEvent, getRefIds } = deps;
-  const event = payload._event;
   const { input } = getRefIds()
   const value = input.elm.value;
 

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));
@@ -71,7 +71,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 +101,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/primitives/input.js

@@ -123,17 +123,26 @@ class RettangoliInputElement extends HTMLElement {
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
-    // Handle key attribute change - reset value
-    if (name === "key" && oldValue !== newValue) {
+    if (name === 'value') {
       requestAnimationFrame((() => {
         const value = this.getAttribute("value");
         this._inputElement.value = value ?? "";
       }))
-      return;
+    }
+
+    if (name === 'placeholder') {
+      requestAnimationFrame((() => {
+        const placeholder = this.getAttribute("placeholder");
+        if (placeholder === undefined || placeholder === 'null') {
+          this._inputElement.removeAttribute('placeholder');
+        } else {
+          this._inputElement.setAttribute('placeholder', placeholder ?? "");
+        }
+      }))
     }
 
     // Handle input-specific attributes first
-    if (["type", "placeholder", "disabled", "value", "step", "s"].includes(name)) {
+    if (["type", "disabled", "step", "s"].includes(name)) {
       this._updateInputAttributes();
       return;
     }
@@ -205,23 +214,13 @@ class RettangoliInputElement extends HTMLElement {
 
   _updateInputAttributes() {
     const type = this.getAttribute("type") || "text";
-    const placeholder = this.getAttribute("placeholder");
-    const value = this.getAttribute("value");
+    // const placeholder = this.getAttribute("placeholder");
+    // const value = this.getAttribute("value");
     const step = this.getAttribute("step");
     const isDisabled = this.hasAttribute('disabled');
 
     this._inputElement.setAttribute("type", type);
 
-    if (placeholder !== null) {
-      this._inputElement.setAttribute("placeholder", placeholder);
-    } else {
-      this._inputElement.removeAttribute("placeholder");
-    }
-
-    if (value !== null) {
-      this._inputElement.value = value;
-    }
-
     if (step !== null) {
       this._inputElement.setAttribute("step", step);
     } else {