@rettangoli/ui 0.1.2-rc22 → 0.1.2-rc24

package/package.json

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

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

@@ -14,7 +14,7 @@ export const INITIAL_STATE = Object.freeze({
 // Lodash-like utility functions for nested property access
 const get = (obj, path, defaultValue = undefined) => {
   if (!path) {
-      return;
+    return;
   }
   const keys = path.split(/[\[\].]/).filter((key) => key !== "");
   let current = obj;
@@ -84,7 +84,8 @@ export const toViewData = ({ state, props, attrs }) => {
   const form = selectForm({ state, props });
   const fields = structuredClone(form.fields || []);
   fields.forEach((field) => {
-    field.defaultValue = get(defaultValues, field.name);
+    // Use formValues from state if available, otherwise fall back to defaultValues from props
+    field.defaultValue = get(state.formValues, field.name) ?? get(defaultValues, field.name);
 
     if (field.inputType === "image") {
       const src = field.src;
@@ -103,6 +104,7 @@ export const toViewData = ({ state, props, attrs }) => {
   });
 
   return {
+    key: attrs?.key,
     containerAttrString,
     title: form?.title || "",
     description: form?.description || "",

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

@@ -256,17 +256,17 @@ template:
                   - $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}:
+                      - rtgl-input#input-${field.name} key=${key} 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:
+                      - rtgl-select#select-${field.name} key=${key} 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}:
+                      - rtgl-color-picker#colorpicker-${field.name} key=${key} 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}:
+                      - rtgl-slider#slider-${field.name} key=${key} 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}:
+                      - rtgl-slider-input#slider-input-${field.name} key=${key} 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:

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

@@ -11,6 +11,29 @@ export const handleBeforeMount = (deps) => {
   }
 }
 
+export const handleOnUpdate = (changes, deps) => {
+  const { oldAttrs, newAttrs, oldProps, newProps } = changes;
+  const { store, props, render } = deps;
+  
+  // Check if key changed
+  if (oldAttrs?.key !== newAttrs?.key && newAttrs?.key) {
+    // Clear current state using store action
+    store.resetSelection();
+    
+    // Re-apply the prop value if available
+    const selectedValue = newProps?.selectedValue || props?.selectedValue;
+    const options = newProps?.options || props?.options;
+    
+    if (selectedValue !== null && selectedValue !== undefined && options) {
+      const selectedOption = options.find(opt => opt.value === selectedValue);
+      if (selectedOption) {
+        store.updateSelectOption(selectedOption);
+      }
+    }
+    render();
+  }
+}
+
 export const handleButtonClick = (e, deps) => {
   const { store, render, getRefIds } = deps;
   store.openOptionsPopover({

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

@@ -61,5 +61,10 @@ export const updateSelectOption = (state, option) => {
   state.isOpen = false;
 }
 
+export const resetSelection = (state) => {
+  state.selectedValue = undefined;
+  state.selectedLabel = undefined;
+}
+
 
 

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

@@ -1,7 +1,24 @@
 export const handleBeforeMount = (deps) => {
   const { store, attrs } = deps;
   store.setValue(attrs.defaultValue || 0);
-} 
+}
+
+export const handleOnUpdate = (changes, deps) => {
+  const { oldAttrs, newAttrs } = changes;
+  const { store, render, attrs } = 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);
+    render();
+  }
+}
 
 export const handleValueChange = (e, deps) => {
   const { store, render, dispatchEvent } = deps;

package/src/components/sliderInput/sliderInput.store.js

@@ -4,6 +4,7 @@ export const INITIAL_STATE = Object.freeze({
 
 export const toViewData = ({ state, attrs }) => {
   return {
+    key: attrs.key,
     value: state.value,
     w: attrs.w || '',
     min: attrs.min || 0,

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

@@ -37,6 +37,6 @@ events:
 
 template:
   - rtgl-view d=h av=c g=md w=${w}:
-    - rtgl-slider#slider w=f type=range 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 w=f type=number min=${min} max=${max} step=${step} value=${value}:
+      - rtgl-input#input key=${key} w=f type=number min=${min} max=${max} step=${step} value=${value}:

package/src/primitives/colorPicker.js

@@ -114,6 +114,15 @@ class RettangoliColorPickerElement extends HTMLElement {
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame(() => {
+        const value = this.getAttribute("value");
+        this._inputElement.value = value ?? "#000000";
+      });
+      return;
+    }
+
     // Handle input-specific attributes first
     if (["value", "disabled"].includes(name)) {
       this._updateInputAttributes();

package/src/primitives/input.js

@@ -123,6 +123,15 @@ class RettangoliInputElement extends HTMLElement {
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame((() => {
+        const value = this.getAttribute("value");
+        this._inputElement.value = value ?? "";
+      }))
+      return;
+    }
+
     // Handle input-specific attributes first
     if (["type", "placeholder", "disabled", "value", "step", "s"].includes(name)) {
       this._updateInputAttributes();

package/src/primitives/slider.js

@@ -148,6 +148,16 @@ class RettangoliSliderElement extends HTMLElement {
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame(() => {
+        const value = this.getAttribute("value");
+        const min = this.getAttribute("min") || "0";
+        this._inputElement.value = value ?? min;
+      });
+      return;
+    }
+
     // Handle input-specific attributes first
     if (["value", "min", "max", "step", "disabled"].includes(name)) {
       this._updateInputAttributes();

package/src/primitives/textarea.js

@@ -48,10 +48,21 @@ class RettangoliTextAreaElement extends HTMLElement {
     this._textareaElement = document.createElement('textarea');
     this._textareaElement.setAttribute('type', 'text');
     this.shadow.appendChild(this._textareaElement);
+
+    // Bind event handler
+    this._textareaElement.addEventListener('input', this._onChange);
   }
 
+  _onChange = (event) => {
+    this.dispatchEvent(new CustomEvent('textarea-change', {
+      detail: {
+        value: this._textareaElement.value,
+      },
+    }));
+  };
+
   static get observedAttributes() {
-    return ["key", "w", "ellipsis", "cols", "rows", "placeholder"];
+    return ["key", "w", "ellipsis", "cols", "rows", "placeholder", "value"];
   }
 
   get value() {
@@ -67,6 +78,14 @@ class RettangoliTextAreaElement extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame(() => {
+        const value = this.getAttribute("value");
+        this._textareaElement.value = value ?? "";
+      });
+      return;
+    }
     this._updateTextareaAttributes();
   }
 
@@ -74,6 +93,7 @@ class RettangoliTextAreaElement extends HTMLElement {
     const cols = this.getAttribute("cols");
     const rows = this.getAttribute("rows");
     const placeholder = this.getAttribute("placeholder");
+    const value = this.getAttribute("value");
 
     if (cols !== null) {
       this._textareaElement.setAttribute("cols", cols);
@@ -92,6 +112,10 @@ class RettangoliTextAreaElement extends HTMLElement {
     } else {
       this._textareaElement.removeAttribute("placeholder");
     }
+
+    if (value !== null) {
+      this._textareaElement.value = value;
+    }
   }
 }
 

package/src/styles/cursorStyles.js

@@ -2,10 +2,46 @@ import { generateCSS } from '../common.js'
 
 const styles = {
     "cur": {
-        "p": "pointer",
-        "m": "move",
+        "alias": "alias",
+        "all-scroll": "all-scroll",
+        "auto": "auto",
+        "cell": "cell",
+        "col-resize": "col-resize",
+        "context-menu": "context-menu",
+        "copy": "copy",
+        "crosshair": "crosshair",
+        "default": "default",
+        "e-resize": "e-resize",
+        "ew-resize": "ew-resize",
         "grab": "grab",
         "grabbing": "grabbing",
+        "help": "help",
+        "move": "move",
+        "n-resize": "n-resize",
+        "ne-resize": "ne-resize",
+        "nesw-resize": "nesw-resize",
+        "ns-resize": "ns-resize",
+        "nw-resize": "nw-resize",
+        "nwse-resize": "nwse-resize",
+        "no-drop": "no-drop",
+        "none": "none",
+        "not-allowed": "not-allowed",
+        "pointer": "pointer",
+        "progress": "progress",
+        "row-resize": "row-resize",
+        "s-resize": "s-resize",
+        "se-resize": "se-resize",
+        "sw-resize": "sw-resize",
+        "text": "text",
+        "url": "url",
+        "w-resize": "w-resize",
+        "wait": "wait",
+        "zoom-in": "zoom-in",
+        "zoom-out": "zoom-out",
+        
+        // Keep short aliases for common cursors
+        "p": "pointer",
+        "m": "move",
     },
 };