@rettangoli/ui 0.1.2-rc28 → 0.1.2-rc29

package/package.json

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

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

@@ -200,3 +200,28 @@ export const handleSelectAddOption = (e, deps) => {
     }),
   );
 };
+
+export const handleTooltipMouseEnter = (e, deps) => {
+  const { store, render, props } = deps;
+  const fieldName = e.currentTarget.id.replace('tooltip-icon-', '');
+  
+  // Find the field with matching name to get tooltip content
+  const form = props.form;
+  const field = form.fields.find(f => f.name === fieldName);
+  
+  if (field && field.tooltip) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    store.showTooltip({
+      x: rect.left + rect.width / 2,
+      y: rect.top - 8,
+      content: field.tooltip.content
+    });
+    render();
+  }
+};
+
+export const handleTooltipMouseLeave = (e, deps) => {
+  const { store, render } = deps;
+  store.hideTooltip();
+  render();
+};

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

@@ -26,6 +26,12 @@ function pick(obj, keys) {
 
 export const INITIAL_STATE = Object.freeze({
   formValues: {},
+  tooltipState: {
+    open: false,
+    x: 0,
+    y: 0,
+    content: ''
+  },
 });
 
 // Lodash-like utility functions for nested property access
@@ -140,6 +146,7 @@ export const toViewData = ({ state, props, attrs }) => {
       buttons: [],
     },
     formValues: state.formValues,
+    tooltipState: state.tooltipState,
   };
 };
 
@@ -174,3 +181,19 @@ export const setFormFieldValue = (state, { name, value, props }) => {
   );
   state.formValues = formValues;
 };
+
+export const showTooltip = (state, { x, y, content }) => {
+  state.tooltipState = {
+    open: true,
+    x: x,
+    y: y,
+    content: content
+  };
+};
+
+export const hideTooltip = (state) => {
+  state.tooltipState = {
+    ...state.tooltipState,
+    open: false
+  };
+};

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

@@ -33,6 +33,11 @@ propsSchema:
                     const: inputText
                   placeholder:
                     type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -69,6 +74,11 @@ propsSchema:
                       required:
                         - label
                         - value
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -87,6 +97,11 @@ propsSchema:
                     const: colorPicker
                   value:
                     type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -110,6 +125,11 @@ propsSchema:
                     type: number
                   value:
                     type: number
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -133,6 +153,11 @@ propsSchema:
                     type: number
                   value:
                     type: number
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -154,6 +179,11 @@ propsSchema:
                     type: number
                   placeholder:
                     type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -179,6 +209,33 @@ propsSchema:
                     type: object
                   waveformData:
                     type: object
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: popover-input
+                  placeholder:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -205,6 +262,12 @@ refs:
     eventListeners:
       click:
         handler: handleActionClick
+  tooltip-icon-*:
+    eventListeners:
+      mouseenter:
+        handler: handleTooltipMouseEnter
+      mouseleave:
+        handler: handleTooltipMouseLeave
   input-*:
     eventListeners:
       input-change:
@@ -258,7 +321,10 @@ template:
           - $for field, i in fields:
               - rtgl-view g=md w=f:
                   - rtgl-view g=sm:
-                      - rtgl-text: ${field.label}
+                      - rtgl-view d=h g=md av=c:
+                          - rtgl-text: ${field.label}
+                          - $if field.tooltip:
+                              - rtgl-svg#tooltip-icon-${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs:
                       - rtgl-text s=sm c=mu-fg: ${field.description}
                   - $if field.inputType == "read-only-text":
                       - rtgl-text s=sm: ${field.defaultValue}
@@ -290,3 +356,4 @@ template:
           - rtgl-view d=h ah=e g=sm w=f:
               - $for button, i in actions.buttons:
                   - rtgl-button#action-${button.id}: ${button.content}
+      - rtgl-tooltip ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} placement="top" content="${tooltipState.content}":

package/src/components/tooltip/tooltip.store.js

@@ -0,0 +1,12 @@
+export const INITIAL_STATE = Object.freeze({
+});
+
+export const toViewData = ({ attrs }) => {
+  return {
+    open: !!attrs.open,
+    x: attrs.x || 0,
+    y: attrs.y || 0,
+    placement: attrs.placement || 'top',
+    content: attrs.content || ''
+  };
+}

package/src/components/tooltip/tooltip.view.yaml

@@ -0,0 +1,27 @@
+elementName: rtgl-tooltip
+
+viewDataSchema:
+  type: object
+
+attrsSchema:
+  type: object
+  properties:
+    open:
+      type: string
+    x:
+      type: string
+    y:
+      type: string
+    placement:
+      type: string
+    content:
+      type: string
+
+refs:
+  popover:
+
+template:
+  - rtgl-popover#popover ?open=${open} x=${x} y=${y} placement=${placement} no-overlay:
+      - rtgl-view slot=content bgc=background bc=border br=md p=sm ah=c av=c:
+          - rtgl-text ta=c s=sm c=foreground: ${content}
+

package/src/primitives/button.js

@@ -296,6 +296,16 @@ class RettangoliButtonElement extends HTMLElement {
       this._buttonElement.style.maxWidth = "";
     }
   }
+  
+  // Public method to get the actual button's bounding rect
+  // This is needed because the host element has display: contents
+  getBoundingClientRect() {
+    if (this._buttonElement) {
+      return this._buttonElement.getBoundingClientRect();
+    }
+    // Fallback to host element
+    return super.getBoundingClientRect();
+  }
 }
 
 // Export factory function to maintain API compatibility

package/src/primitives/popover.js

@@ -28,7 +28,7 @@ class RettangoliPopoverElement extends HTMLElement {
           outline: none;
         }
 
-        :host([open]) .popover-overlay {
+        :host([open]:not([no-overlay])) .popover-overlay {
           display: block;
         }
 
@@ -36,6 +36,11 @@ class RettangoliPopoverElement extends HTMLElement {
           display: block;
           visibility: hidden;
         }
+        
+        /* For no-overlay mode, make the container non-interactive */
+        :host([no-overlay]) .popover-container {
+          pointer-events: none;
+        }
 
         :host([open][positioned]) .popover-container {
           visibility: visible;
@@ -96,7 +101,7 @@ class RettangoliPopoverElement extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["open", "x", "y", "placement"];
+    return ["open", "x", "y", "placement", "no-overlay"];
   }
 
   connectedCallback() {