@rettangoli/ui 1.2.1 → 1.2.3

package/package.json

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

package/src/components/dropdownMenu/dropdownMenu.view.yaml

@@ -14,25 +14,24 @@ styles:
     text-decoration: none
     color: inherit
 template:
-  - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place}:
-      - rtgl-view w=${w} h=${h} sv g=xs slot=content bgc=bg pv=sm:
-          - $for item, i in items:
-              - $if item.isLabel:
-                  - rtgl-view w=f ph=lg pv=md:
-                      - rtgl-text s=sm c=mu-fg: ${item.label}
-                $elif item.isItem && item.isDisabled:
-                  - rtgl-view w=f ph=lg pv=md br=md bgc=${item.bgc}:
-                      - rtgl-text c=${item.c}: ${item.label}
-                $elif item.isItem && item.hasHref && item.linkExtraAttrs:
-                  - a#option${i} href=${item.href} ${item.linkExtraAttrs} data-index=${item.index} data-testid=${item.testId}:
-                      - rtgl-view w=f h-bgc=${item.hoverBgc} ph=lg pv=md cur=pointer br=md bgc=${item.bgc}:
-                          - rtgl-text c=${item.c}: ${item.label}
-                $elif item.isItem && item.hasHref:
-                  - a#option${i} href=${item.href} data-index=${item.index} data-testid=${item.testId}:
-                      - rtgl-view w=f h-bgc=${item.hoverBgc} ph=lg pv=md cur=pointer br=md bgc=${item.bgc}:
-                          - rtgl-text c=${item.c}: ${item.label}
-                $elif item.isItem:
-                  - rtgl-view#option${i} w=f h-bgc=${item.hoverBgc} ph=lg pv=md cur=pointer br=md bgc=${item.bgc} data-index=${item.index} data-testid=${item.testId}:
-                      - rtgl-text c=${item.c}: ${item.label}
-                $elif item.isSeparator:
-                  - rtgl-view w=f h=1 ph=lg mv=md bgc=bo: null
+  - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} content-w=${w} content-h=${h} content-sv=true content-g=xs content-pv=sm:
+      - $for item, i in items:
+          - $if item.isLabel:
+              - rtgl-view w=f p=md:
+                  - rtgl-text s=sm c=mu-fg: ${item.label}
+            $elif item.isItem && item.isDisabled:
+              - rtgl-view w=f p=md bgc=${item.bgc}:
+                  - rtgl-text s=sm c=${item.c}: ${item.label}
+            $elif item.isItem && item.hasHref && item.linkExtraAttrs:
+              - a#option${i} href=${item.href} ${item.linkExtraAttrs} data-index=${item.index} data-testid=${item.testId}:
+                  - rtgl-view w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc}:
+                      - rtgl-text s=sm c=${item.c}: ${item.label}
+            $elif item.isItem && item.hasHref:
+              - a#option${i} href=${item.href} data-index=${item.index} data-testid=${item.testId}:
+                  - rtgl-view w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc}:
+                      - rtgl-text s=sm c=${item.c}: ${item.label}
+            $elif item.isItem:
+              - rtgl-view#option${i} w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc} data-index=${item.index} data-testid=${item.testId}:
+                  - rtgl-text s=sm c=${item.c}: ${item.label}
+            $elif item.isSeparator:
+              - rtgl-view w=f h=1 bgc=mu mv=sm: null

package/src/components/popoverInput/popoverInput.view.yaml

@@ -20,9 +20,8 @@ refs:
 template:
   - rtgl-view#textDisplay w=f cur=pointer:
       - rtgl-text c=${valueColor}: ${value}
-  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y}:
-      - rtgl-view g=md w=240 slot=content bgc=bg bw=xs bc=bo br=md pv=sm:
-          - rtgl-text: ${label}
-          - rtgl-input#input w=f placeholder=${placeholder} ?disabled=${disabled}: null
-          - rtgl-view w=f ah=e:
-              - rtgl-button#submit ?disabled=${disabled}: Submit
+  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} content-g=md content-w=240 content-pv=sm:
+      - rtgl-text: ${label}
+      - rtgl-input#input w=f placeholder=${placeholder} ?disabled=${disabled}: null
+      - rtgl-view w=f ah=e:
+          - rtgl-button#submit ?disabled=${disabled}: Submit

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

@@ -36,12 +36,11 @@ template:
           - $if showClear:
               - rtgl-svg#clearButton ml=md svg=x wh=16 c=mu-fg cur=pointer data-testid="select-clear-button": null
           - rtgl-svg ml=md svg=chevronDown wh=16 c=mu-fg: null
-  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs:
-      - rtgl-view wh=300 g=xs slot=content bgc=bg sv=true pv=sm:
-          - $for option, i in options:
-              - rtgl-view#option${i} w=f ph=lg pv=md cur=pointer bgc=${option.bgc} data-testid=${option.testId}:
-                  - rtgl-text s=sm: ${option.label}
-          - $if showAddOption:
-              - rtgl-view w=f bw=xs bc=mu bwt=sm: null
-              - rtgl-view#optionAdd w=f ph=lg pv=md cur=pointer bgc=${addOptionBgc} data-testid="select-add-option":
-                  - rtgl-text s=sm c=ac: ${addOptionLabel}
+  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs content-wh=300 content-g=xs content-sv=true content-pv=sm:
+      - $for option, i in options:
+          - rtgl-view#option${i} w=f ph=lg pv=md cur=pointer bgc=${option.bgc} data-testid=${option.testId}:
+              - rtgl-text s=sm: ${option.label}
+      - $if showAddOption:
+          - rtgl-view w=f bw=xs bc=mu bwt=sm: null
+          - rtgl-view#optionAdd w=f ph=lg pv=md cur=pointer bgc=${addOptionBgc} data-testid="select-add-option":
+              - rtgl-text s=sm c=ac: ${addOptionLabel}

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

@@ -31,6 +31,6 @@ export const selectViewData = ({ props }) => {
     content: props.content || '',
     textSize: preset.textSize,
     padding: preset.padding,
-    contentStyle: `padding: 0; min-width: 0; max-width: ${preset.maxWidth}; background-color: var(--muted);`,
+    contentStyle: `padding: 0; min-width: 0; max-width: ${preset.maxWidth};`,
   };
 }

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

@@ -1,6 +1,5 @@
 template:
-  - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} no-overlay:
-      - 'rtgl-view slot=content style="${contentStyle}" bgc=mu':
-          - rtgl-view p=${padding} ah=s av=c:
-              - rtgl-text ta=s s=${textSize} c=fg: ${content}
+  - 'rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} no-overlay content-bgc=mu content-style="${contentStyle}"':
+      - rtgl-view p=${padding} ah=s av=c:
+          - rtgl-text ta=s s=${textSize} c=fg: ${content}
 refs: {}

package/src/primitives/popover.js

@@ -1,5 +1,8 @@
 import { css } from "../common.js";
 
+const CONTENT_WRAPPER_ATTR = "data-rtgl-popover-content";
+const DEFAULT_CONTENT_STYLE = "min-width: 200px; max-width: 400px; box-sizing: border-box;";
+
 class RettangoliPopoverElement extends HTMLElement {
   static styleSheet = null;
 
@@ -55,17 +58,6 @@ class RettangoliPopoverElement extends HTMLElement {
         slot[name="content"] {
           display: contents;
         }
-
-        ::slotted([slot="content"]) {
-          display: block;
-          box-sizing: border-box;
-          background-color: var(--background);
-          border: 1px solid var(--border);
-          border-radius: var(--border-radius-md);
-          padding: var(--spacing-md);
-          min-width: 200px;
-          max-width: 400px;
-        }
       `);
     }
   }
@@ -119,6 +111,7 @@ class RettangoliPopoverElement extends HTMLElement {
 
     // Store reference for content slot
     this._slotElement = null;
+    this._contentWrapper = null;
 
     // Track if we're open
     this._isOpen = false;
@@ -132,10 +125,26 @@ class RettangoliPopoverElement extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["open", "x", "y", "place", "no-overlay"];
+    return [
+      "open",
+      "x",
+      "y",
+      "place",
+      "no-overlay",
+      "content-w",
+      "content-h",
+      "content-wh",
+      "content-g",
+      "content-sv",
+      "content-pv",
+      "content-bgc",
+      "content-style",
+    ];
   }
 
   connectedCallback() {
+    this._syncContentWrapper({ reposition: false });
+
     // Check initial open attribute
     if (this.hasAttribute('open')) {
       this._show();
@@ -164,11 +173,103 @@ class RettangoliPopoverElement extends HTMLElement {
     } else if (name === 'no-overlay' && oldValue !== newValue && this._isOpen) {
       this._hide();
       this._show();
+    } else if (name.startsWith("content-")) {
+      this._syncContentWrapper();
+    }
+  }
+
+  _isIgnorableTextNode(node) {
+    return node?.nodeType === Node.TEXT_NODE && node.textContent?.trim() === "";
+  }
+
+  _ensureContentWrapper() {
+    if (this._contentWrapper?.parentNode === this) {
+      return this._contentWrapper;
+    }
+
+    const existingWrapper = Array.from(this.children).find((child) => child.hasAttribute(CONTENT_WRAPPER_ATTR));
+
+    if (existingWrapper) {
+      this._contentWrapper = existingWrapper;
+    } else {
+      this._contentWrapper = document.createElement("rtgl-view");
+      this._contentWrapper.setAttribute(CONTENT_WRAPPER_ATTR, "");
+      this._contentWrapper.setAttribute("part", "content");
+      this._contentWrapper.setAttribute("bgc", "bg");
+      this._contentWrapper.setAttribute("bw", "xs");
+      this._contentWrapper.setAttribute("bc", "bo");
+      this._contentWrapper.setAttribute("br", "md");
+      this._contentWrapper.setAttribute("ph", "md");
+      this._contentWrapper.setAttribute("pv", "md");
+      this._contentWrapper.setAttribute("style", DEFAULT_CONTENT_STYLE);
+    }
+
+    if (this._contentWrapper.parentNode !== this) {
+      this.appendChild(this._contentWrapper);
+    }
+
+    return this._contentWrapper;
+  }
+
+  _syncContentWrapperAttributes() {
+    const wrapper = this._ensureContentWrapper();
+    const attrs = [
+      ["content-w", "w"],
+      ["content-h", "h"],
+      ["content-wh", "wh"],
+      ["content-g", "g"],
+      ["content-sv", "sv"],
+    ];
+
+    for (const [sourceAttr, targetAttr] of attrs) {
+      const value = this.getAttribute(sourceAttr);
+
+      if (value === null) {
+        wrapper.removeAttribute(targetAttr);
+      } else {
+        wrapper.setAttribute(targetAttr, value);
+      }
+    }
+
+    wrapper.setAttribute("bgc", this.getAttribute("content-bgc") || "bg");
+    wrapper.setAttribute("ph", "md");
+    wrapper.setAttribute("pv", this.getAttribute("content-pv") || "md");
+
+    const contentStyle = this.getAttribute("content-style");
+    wrapper.setAttribute("style", contentStyle ? `${DEFAULT_CONTENT_STYLE} ${contentStyle}` : DEFAULT_CONTENT_STYLE);
+  }
+
+  _syncContentWrapper({ reposition = true } = {}) {
+    const wrapper = this._ensureContentWrapper();
+    const nodesToWrap = Array.from(this.childNodes).filter((node) => node !== wrapper && !this._isIgnorableTextNode(node));
+
+    for (const node of nodesToWrap) {
+      if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "content") {
+        node.removeAttribute("slot");
+      }
+
+      wrapper.appendChild(node);
+    }
+
+    this._syncContentWrapperAttributes();
+
+    const hasContent = Array.from(wrapper.childNodes).some((node) => !this._isIgnorableTextNode(node));
+
+    if (hasContent) {
+      wrapper.setAttribute("slot", "content");
+    } else {
+      wrapper.removeAttribute("slot");
+    }
+
+    if (reposition && this._isOpen) {
+      this._updatePosition();
     }
   }
 
   _show() {
     if (!this._isOpen) {
+      this._syncContentWrapper({ reposition: false });
+
       // Create and append slot for content only if it doesn't exist
       if (!this._slotElement) {
         this._slotElement = document.createElement('slot');
@@ -226,6 +327,7 @@ class RettangoliPopoverElement extends HTMLElement {
     // Calculate position based on place
     // We'll position after the popover is rendered to get its dimensions
     requestAnimationFrame(() => {
+      this._syncContentWrapper({ reposition: false });
       const rect = this._popoverContainer.getBoundingClientRect();
       const { left, top } = this._calculatePosition(x, y, rect.width, rect.height, place);
 
@@ -313,6 +415,10 @@ class RettangoliPopoverElement extends HTMLElement {
   get popover() {
     return this._popoverContainer;
   }
+
+  get content() {
+    return this._contentWrapper;
+  }
 }
 
 // Export factory function to maintain API compatibility