@rettangoli/ui 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "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,4 +1,3 @@
-
 const updateAttributes = ({ form, defaultValues = {}, refs }) => {
   const { fields = [] } = form;
   fields.forEach((field) => {
@@ -29,17 +28,43 @@ const updateAttributes = ({ form, defaultValues = {}, refs }) => {
   })
 }
 
+const autoFocusFirstInput = (refs) => {
+  // Find first focusable field
+  for (const fieldKey in refs) {
+    if (fieldKey.startsWith('field-')) {
+      const fieldRef = refs[fieldKey];
+      if (fieldRef && fieldRef.elm) {
+        const element = fieldRef.elm;
+
+        if (element.focus) {
+          // Currently only available for input-text and input-textarea
+          element.focus();
+          return;
+        }
+      }
+    }
+  }
+};
+
+
 export const handleBeforeMount = (deps) => {
   const { store, props } = deps;
   store.setFormValues(props.defaultValues);
 };
 
 export const handleAfterMount = (deps) => {
-  const { props, getRefIds, render } = deps;
+  const { props, getRefIds, render, attrs } = deps;
   const { form = {}, defaultValues } = props;
   const refs = getRefIds();
   updateAttributes({ form, defaultValues, refs });
   render();
+
+  // Auto-focus first input field if autofocus attribute is set
+  if (attrs?.autofocus) {
+    setTimeout(() => {
+      autoFocusFirstInput(refs);
+    }, 50);
+  }
 };
 
 export const handleOnUpdate = (deps, payload) => {
@@ -257,3 +282,38 @@ export const handleTooltipMouseLeave = (deps) => {
   store.hideTooltip();
   render();
 };
+
+export const handleKeyDown = (deps, payload) => {
+  const { store, dispatchEvent, props } = deps;
+  const event = payload._event;
+
+  // Handle Enter key to submit form
+  if (event.key === 'Enter' && !event.shiftKey) {
+    const target = event.target;
+    // Don't submit if we're in a textarea (native or custom component)
+    if (target.tagName === 'TEXTAREA' || target.tagName === 'RTGL-TEXTAREA') {
+      return;
+    }
+
+    event.preventDefault();
+
+    // Dispatch action-click event for the first button
+    const form = props.form || {};
+    const actions = form.actions || {};
+    const buttons = actions.buttons || [];
+
+    if (buttons.length > 0) {
+      const firstButtonId = buttons[0].id;
+      const formValues = store.selectFormValues();
+
+      dispatchEvent(
+        new CustomEvent("action-click", {
+          detail: {
+            actionId: firstButtonId,
+            formValues: formValues,
+          },
+        }),
+      );
+    }
+  }
+};

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

@@ -258,6 +258,10 @@ propsSchema:
                   - content
 
 refs:
+  form-container:
+    eventListeners:
+      keydown:
+        handler: handleKeyDown
   action-*:
     eventListeners:
       click:
@@ -272,6 +276,8 @@ refs:
     eventListeners:
       input-change:
         handler: handleInputChange
+      textarea-change:
+        handler: handleInputChange
       select-change:
         handler: handleSelectChange
       add-option-selected:
@@ -301,7 +307,7 @@ events:
   action-click: {}
 
 template:
-  - rtgl-view w=f p=md g=lg ${containerAttrString}:
+  - rtgl-view#form-container w=f p=md g=lg ${containerAttrString}:
       - rtgl-view g=sm w=f:
           - $if title:
               - rtgl-text s=lg: ${title}

package/src/primitives/button.js

@@ -161,7 +161,7 @@ class RettangoliButtonElement extends HTMLElement {
   constructor() {
     super();
     RettangoliButtonElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliButtonElement.styleSheet];
     
     // Create initial DOM structure

package/src/primitives/colorPicker.js

@@ -45,7 +45,7 @@ class RettangoliColorPickerElement extends HTMLElement {
   constructor() {
     super();
     RettangoliColorPickerElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliColorPickerElement.styleSheet];
     
     // Initialize style tracking properties

package/src/primitives/image.js

@@ -63,7 +63,7 @@ class RettangoliImageElement extends HTMLElement {
   constructor() {
     super();
     RettangoliImageElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliImageElement.styleSheet];
 
     // Create initial DOM structure

package/src/primitives/input-number.js

@@ -57,7 +57,7 @@ class RettangoliInputNumberElement extends HTMLElement {
   constructor() {
     super();
     RettangoliInputNumberElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliInputNumberElement.styleSheet];
 
     // Initialize style tracking properties

package/src/primitives/input.js

@@ -57,7 +57,7 @@ class RettangoliInputElement extends HTMLElement {
   constructor() {
     super();
     RettangoliInputElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliInputElement.styleSheet];
 
     // Initialize style tracking properties

package/src/primitives/slider.js

@@ -76,7 +76,7 @@ class RettangoliSliderElement extends HTMLElement {
   constructor() {
     super();
     RettangoliSliderElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliSliderElement.styleSheet];
 
     // Initialize style tracking properties

package/src/primitives/svg.js

@@ -30,7 +30,7 @@ class RettangoliSvgElement extends HTMLElement {
   constructor() {
     super();
     RettangoliSvgElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliSvgElement.styleSheet];
   }
 

package/src/primitives/text.js

@@ -53,7 +53,7 @@ class RettangoliTextElement extends HTMLElement {
   constructor() {
     super();
     RettangoliTextElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliTextElement.styleSheet];
     
     // Create initial DOM structure

package/src/primitives/textarea.js

@@ -47,7 +47,7 @@ class RettangoliTextAreaElement extends HTMLElement {
   constructor() {
     super();
     RettangoliTextAreaElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliTextAreaElement.styleSheet];
 
     // Initialize style tracking properties
@@ -115,6 +115,19 @@ class RettangoliTextAreaElement extends HTMLElement {
     this._updateTextareaAttributes();
   }
 
+  // Public methods to proxy focus and select to internal textarea
+  focus() {
+    if (this._textareaElement) {
+      this._textareaElement.focus();
+    }
+  }
+
+  select() {
+    if (this._textareaElement) {
+      this._textareaElement.select();
+    }
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === 'value') {
       requestAnimationFrame((() => {

package/src/primitives/view.js

@@ -67,7 +67,7 @@ class RettangoliViewElement extends HTMLElement {
   constructor() {
     super();
     RettangoliViewElement.initializeStyleSheet();
-    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliViewElement.styleSheet];
 
     // Create initial DOM structure