@rettangoli/ui 0.1.2-rc27 → 0.1.2-rc29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc27",
+  "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

@@ -186,3 +186,42 @@ export const handleWaveformClick = (e, deps) => {
     }),
   );
 };
+
+export const handleSelectAddOption = (e, deps) => {
+  const { store, dispatchEvent } = deps;
+  const name = e.currentTarget.id.replace("select-", "");
+  dispatchEvent(
+    new CustomEvent("action-click", {
+      detail: {
+        actionId: 'select-options-add',
+        name: name,
+        formValues: store.selectFormValues(),
+      },
+    }),
+  );
+};
+
+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
@@ -52,6 +57,11 @@ propsSchema:
                     type: string
                   noClear:
                     type: boolean
+                  addOption:
+                    type: object
+                    properties:
+                      label:
+                        type: string
                   options:
                     type: array
                     items:
@@ -64,6 +74,11 @@ propsSchema:
                       required:
                         - label
                         - value
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -82,6 +97,11 @@ propsSchema:
                     const: colorPicker
                   value:
                     type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -105,6 +125,11 @@ propsSchema:
                     type: number
                   value:
                     type: number
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -128,6 +153,11 @@ propsSchema:
                     type: number
                   value:
                     type: number
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -149,6 +179,11 @@ propsSchema:
                     type: number
                   placeholder:
                     type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
                   - name
                   - label
@@ -174,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
@@ -200,6 +262,12 @@ refs:
     eventListeners:
       click:
         handler: handleActionClick
+  tooltip-icon-*:
+    eventListeners:
+      mouseenter:
+        handler: handleTooltipMouseEnter
+      mouseleave:
+        handler: handleTooltipMouseLeave
   input-*:
     eventListeners:
       input-change:
@@ -208,6 +276,8 @@ refs:
     eventListeners:
       select-change:
         handler: handleSelectChange
+      add-option-selected:
+        handler: handleSelectAddOption
   colorpicker-*:
     eventListeners:
       colorpicker-change:
@@ -240,6 +310,7 @@ refs:
 events:
   form-change: {}
   extra-event: {}
+  action-click: {}
 
 template:
   - rtgl-view w=f p=md g=lg ${containerAttrString}:
@@ -250,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}
@@ -259,7 +333,7 @@ template:
                   - $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} key=${key} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=fields[${i}].defaultValue ?no-clear=fields[${i}].noClear:
+                      - 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:
                   - $if field.inputType == "colorPicker":
                       - rtgl-color-picker#colorpicker-${field.name} key=${key} value=${field.defaultValue}:
                   - $if field.inputType == "slider":
@@ -282,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/select/select.handlers.js

@@ -138,3 +138,29 @@ export const handleClearClick = (e, deps) => {
 
   render();
 }
+
+export const handleAddOptionClick = (e, deps) => {
+  const { store, render, dispatchEvent } = deps;
+  
+  // Close the popover
+  store.closeOptionsPopover();
+
+  // Dispatch custom event for add option (no detail)
+  dispatchEvent(new CustomEvent('add-option-selected', {
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleAddOptionMouseEnter = (e, deps) => {
+  const { store, render } = deps;
+  store.setHoveredAddOption(true);
+  render();
+}
+
+export const handleAddOptionMouseLeave = (e, deps) => {
+  const { store, render } = deps;
+  store.setHoveredAddOption(false);
+  render();
+}

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

@@ -31,6 +31,7 @@ export const INITIAL_STATE = Object.freeze({
   },
   selectedValue: null,
   hoveredOptionId: null,
+  hoveredAddOption: false,
 });
 
 export const toViewData = ({ state, props, attrs }) => {
@@ -72,7 +73,10 @@ export const toViewData = ({ state, props, attrs }) => {
     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)
+    showClear: !attrs['no-clear'] && !props['no-clear'] && (currentValue !== null && currentValue !== undefined),
+    showAddOption: !!props.addOption,
+    addOptionLabel: props.addOption?.label ? `+ ${props.addOption.label}` : '+ Add',
+    addOptionBgc: state.hoveredAddOption ? 'ac' : ''
   };
 }
 
@@ -119,5 +123,9 @@ export const clearSelectedValue = (state) => {
   state.selectedValue = undefined;
 }
 
+export const setHoveredAddOption = (state, isHovered) => {
+  state.hoveredAddOption = isHovered;
+}
+
 
 

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

@@ -23,6 +23,11 @@ propsSchema:
       type: function
     no-clear:
       type: boolean
+    addOption:
+      type: object
+      properties:
+        label:
+          type: string
 
 refs:
   select-button:
@@ -45,6 +50,14 @@ refs:
         handler: handleOptionMouseEnter
       mouseleave:
         handler: handleOptionMouseLeave
+  option-add:
+    eventListeners:
+      click:
+        handler: handleAddOptionClick
+      mouseenter:
+        handler: handleAddOptionMouseEnter
+      mouseleave:
+        handler: handleAddOptionMouseLeave
 
 events: {}
 
@@ -61,3 +74,7 @@ template:
           - $for option, i in options:
               - rtgl-view#option-${i} w=f ph=lg pv=md cur=p br=md bgc=${option.bgc}:
                   - rtgl-text: ${option.label}
+          - $if showAddOption:
+              - rtgl-view w=f bw=xs bc=mu-bg bt=sm:
+              - rtgl-view#option-add w=f ph=lg pv=md cur=p br=md bgc=${addOptionBgc}:
+                  - rtgl-text c=ac: ${addOptionLabel}

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() {