@rettangoli/ui 0.1.2-rc8 → 0.1.3

package/src/primitives/popover.js

@@ -0,0 +1,280 @@
+import { css } from "../common.js";
+
+class RettangoliPopoverElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliPopoverElement.styleSheet) {
+      RettangoliPopoverElement.styleSheet = new CSSStyleSheet();
+      RettangoliPopoverElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+
+        .popover-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          z-index: 999;
+          display: none;
+        }
+
+        .popover-container {
+          position: fixed;
+          z-index: 1000;
+          display: none;
+          outline: none;
+        }
+
+        :host([open]:not([no-overlay])) .popover-overlay {
+          display: block;
+        }
+
+        :host([open]) .popover-container {
+          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;
+        }
+
+        slot[name="content"] {
+          display: block;
+          background-color: var(--muted);
+          border: 1px solid var(--border);
+          border-radius: var(--border-radius-md);
+          padding: var(--spacing-md);
+          min-width: 200px;
+          max-width: 400px;
+        }
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliPopoverElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.adoptedStyleSheets = [RettangoliPopoverElement.styleSheet];
+
+    // Create overlay
+    this._popoverOverlay = document.createElement('div');
+    this._popoverOverlay.className = 'popover-overlay';
+    this.shadow.appendChild(this._popoverOverlay);
+
+    // Handle overlay clicks to close popover
+    this._popoverOverlay.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('close', {
+        detail: {}
+      }));
+    });
+
+    // Handle right-click on overlay to close popover
+    this._popoverOverlay.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      this.dispatchEvent(new CustomEvent('close', {
+        detail: {}
+      }));
+    });
+
+    // Create popover container
+    this._popoverContainer = document.createElement('div');
+    this._popoverContainer.className = 'popover-container';
+    this.shadow.appendChild(this._popoverContainer);
+
+    // Store reference for content slot
+    this._slotElement = null;
+
+    // Track if we're open
+    this._isOpen = false;
+
+    // Bind event handlers
+    this._handleEscKey = this._handleEscKey.bind(this);
+  }
+
+  static get observedAttributes() {
+    return ["open", "x", "y", "placement", "no-overlay"];
+  }
+
+  connectedCallback() {
+    // Check initial open attribute
+    if (this.hasAttribute('open')) {
+      this._show();
+    }
+  }
+
+  disconnectedCallback() {
+    // Clean up event listeners
+    this._removeGlobalListeners();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'open') {
+      if (newValue !== null && !this._isOpen) {
+        this._show();
+      } else if (newValue === null && this._isOpen) {
+        this._hide();
+      }
+    } else if ((name === 'x' || name === 'y' || name === 'placement') && this._isOpen) {
+      this._updatePosition();
+    }
+  }
+
+  _show() {
+    if (!this._isOpen) {
+      // Create and append slot for content only if it doesn't exist
+      if (!this._slotElement) {
+        this._slotElement = document.createElement('slot');
+        this._slotElement.setAttribute('name', 'content');
+        this._popoverContainer.appendChild(this._slotElement);
+      }
+
+      this._isOpen = true;
+      this._updatePosition();
+      this._addGlobalListeners();
+    }
+  }
+
+  _hide() {
+    if (this._isOpen) {
+      this._isOpen = false;
+
+      // Remove slot to unmount content
+      if (this._slotElement) {
+        this._popoverContainer.removeChild(this._slotElement);
+        this._slotElement = null;
+      }
+
+      this._removeGlobalListeners();
+    }
+  }
+
+  _updatePosition() {
+    const x = parseFloat(this.getAttribute('x') || '0');
+    const y = parseFloat(this.getAttribute('y') || '0');
+    const placement = this.getAttribute('placement') || 'bottom-start';
+
+    // Remove positioned attribute to hide during repositioning
+    this.removeAttribute('positioned');
+
+    // Calculate position based on placement
+    // We'll position after the popover is rendered to get its dimensions
+    requestAnimationFrame(() => {
+      const rect = this._popoverContainer.getBoundingClientRect();
+      const { left, top } = this._calculatePosition(x, y, rect.width, rect.height, placement);
+
+      // Set position first
+      this._popoverContainer.style.left = `${left}px`;
+      this._popoverContainer.style.top = `${top}px`;
+
+      // Then make visible in next frame to prevent flicker
+      requestAnimationFrame(() => {
+        this.setAttribute('positioned', '');
+      });
+    });
+  }
+
+  _calculatePosition(x, y, width, height, placement) {
+    const offset = 8; // Small offset from the cursor
+    let left = x;
+    let top = y;
+
+    switch (placement) {
+      case 'top':
+        left = x - width / 2;
+        top = y - height - offset;
+        break;
+      case 'top-start':
+        left = x;
+        top = y - height - offset;
+        break;
+      case 'top-end':
+        left = x - width;
+        top = y - height - offset;
+        break;
+      case 'right':
+        left = x + offset;
+        top = y - height / 2;
+        break;
+      case 'right-start':
+        left = x + offset;
+        top = y;
+        break;
+      case 'right-end':
+        left = x + offset;
+        top = y - height;
+        break;
+      case 'bottom':
+        left = x - width / 2;
+        top = y + offset;
+        break;
+      case 'bottom-start':
+        left = x;
+        top = y + offset;
+        break;
+      case 'bottom-end':
+        left = x - width;
+        top = y + offset;
+        break;
+      case 'left':
+        left = x - width - offset;
+        top = y - height / 2;
+        break;
+      case 'left-start':
+        left = x - width - offset;
+        top = y;
+        break;
+      case 'left-end':
+        left = x - width - offset;
+        top = y - height;
+        break;
+    }
+
+    // Ensure popover stays within viewport
+    const padding = 8;
+    left = Math.max(padding, Math.min(left, window.innerWidth - width - padding));
+    top = Math.max(padding, Math.min(top, window.innerHeight - height - padding));
+
+    return { left, top };
+  }
+
+  _addGlobalListeners() {
+    // Use setTimeout to avoid immediate triggering
+    setTimeout(() => {
+      document.addEventListener('keydown', this._handleEscKey);
+    }, 0);
+  }
+
+  _removeGlobalListeners() {
+    document.removeEventListener('keydown', this._handleEscKey);
+  }
+
+
+  _handleEscKey(e) {
+    if (e.key === 'Escape') {
+      this.dispatchEvent(new CustomEvent('close', {
+        detail: {}
+      }));
+    }
+  }
+
+  // Expose popover container for advanced usage
+  get popover() {
+    return this._popoverContainer;
+  }
+}
+
+// Export factory function to maintain API compatibility
+export default ({ render, html }) => {
+  // Note: render and html parameters are accepted but not used
+  // This maintains backward compatibility with existing code
+  return RettangoliPopoverElement;
+};

package/src/primitives/slider.js

@@ -115,8 +115,8 @@ class RettangoliSliderElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
-        "visible",
+        "hide",
+        "show",
         "op",
         "z",
       ])
@@ -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();
@@ -202,11 +212,11 @@ class RettangoliSliderElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/svg.js

@@ -1,6 +1,7 @@
 import { css, dimensionWithUnit } from "../common.js";
 import flexChildStyles from "../styles/flexChildStyles.js";
 import paddingSvgStyles from "../styles/paddingSvgStyles.js";
+import marginStyles from "../styles/marginStyles.js";
 import cursorStyles from "../styles/cursorStyles.js";
 import textColorStyles from "../styles/textColorStyles.js";
 
@@ -18,6 +19,7 @@ class RettangoliSvgElement extends HTMLElement {
         }
         ${textColorStyles}
         ${paddingSvgStyles}
+        ${marginStyles}
         ${flexChildStyles}
         ${cursorStyles}
       `);

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/primitives/view.js

@@ -89,10 +89,17 @@ class RettangoliViewElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
+        "hide",
+        "show",
         "sh",
         "sv",
-        "z"
+        "z",
+        "d",
+        "ah",
+        "av",
+        "flex",
+        "fw",
+        "overflow"
       ]),
     ];
   }
@@ -136,14 +143,13 @@ class RettangoliViewElement extends HTMLElement {
       this._linkElement = null;
     }
   }
+  
+  connectedCallback() {
+    // Force update styles when connected to ensure responsive attributes are processed
+    this.updateStyles();
+  }
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    // Handle href and target changes
-    if (name === "href" || name === "target") {
-      this._updateDOM();
-      return;
-    }
-    
+  updateStyles() {
     // Reset styles for fresh calculation
     this._styles = {
       default: {},
@@ -158,6 +164,7 @@ class RettangoliViewElement extends HTMLElement {
         return `${size === "default" ? "" : `${size}-`}${tag}`;
       };
 
+
       const wh = this.getAttribute(addSizePrefix("wh"));
       const width = dimensionWithUnit(
         wh === null ? this.getAttribute(addSizePrefix("w")) : wh,
@@ -192,12 +199,110 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
-        this._styles[size].display = "none !important";
+      if (this.hasAttribute(addSizePrefix("hide"))) {
+        this._styles[size].display = "none";
+      }
+
+      if (this.hasAttribute(addSizePrefix("show"))) {
+        this._styles[size].display = "flex";
+      }
+
+      // Handle flex direction and alignment
+      const direction = this.getAttribute(addSizePrefix("d"));
+      const alignHorizontal = this.getAttribute(addSizePrefix("ah"));
+      const alignVertical = this.getAttribute(addSizePrefix("av"));
+
+
+      if (direction === "h") {
+        this._styles[size]["flex-direction"] = "row";
+      } else if (direction === "v") {
+        this._styles[size]["flex-direction"] = "column";
+      } else if (size === "default" && !direction) {
+        // Check if any responsive direction attributes exist
+        const hasResponsiveDirection = ["sm", "md", "lg", "xl"].some(
+          breakpoint => this.hasAttribute(`${breakpoint}-d`)
+        );
+        if (hasResponsiveDirection) {
+          // Explicitly set column for default to ensure responsive overrides work
+          this._styles[size]["flex-direction"] = "column";
+        }
+      }
+
+      // Handle alignment based on direction
+      const isHorizontal = direction === "h";
+      const isVerticalOrDefault = direction === "v" || !direction;
+
+      // For horizontal direction: ah controls justify-content, av controls align-items
+      if (isHorizontal) {
+        if (alignHorizontal === "c") {
+          this._styles[size]["justify-content"] = "center";
+        } else if (alignHorizontal === "e") {
+          this._styles[size]["justify-content"] = "flex-end";
+        } else if (alignHorizontal === "s") {
+          this._styles[size]["justify-content"] = "flex-start";
+        }
+
+        if (alignVertical === "c") {
+          this._styles[size]["align-items"] = "center";
+          this._styles[size]["align-content"] = "center";
+        } else if (alignVertical === "e") {
+          this._styles[size]["align-items"] = "flex-end";
+          this._styles[size]["align-content"] = "flex-end";
+        } else if (alignVertical === "s") {
+          this._styles[size]["align-items"] = "flex-start";
+        }
+      }
+
+      // For vertical/default direction: ah controls align-items, av controls justify-content
+      if (isVerticalOrDefault && (alignHorizontal !== null || alignVertical !== null)) {
+        if (alignHorizontal === "c") {
+          this._styles[size]["align-items"] = "center";
+        } else if (alignHorizontal === "e") {
+          this._styles[size]["align-items"] = "flex-end";
+        } else if (alignHorizontal === "s") {
+          this._styles[size]["align-items"] = "flex-start";
+        }
+
+        if (alignVertical === "c") {
+          this._styles[size]["justify-content"] = "center";
+        } else if (alignVertical === "e") {
+          this._styles[size]["justify-content"] = "flex-end";
+        } else if (alignVertical === "s") {
+          this._styles[size]["justify-content"] = "flex-start";
+        }
+      }
+
+      // Handle flex property
+      const flex = this.getAttribute(addSizePrefix("flex"));
+      if (flex !== null) {
+        this._styles[size]["flex"] = flex;
+      }
+
+      // Handle flex-wrap
+      const flexWrap = this.getAttribute(addSizePrefix("fw"));
+      if (flexWrap === "w") {
+        this._styles[size]["flex-wrap"] = "wrap";
+      }
+
+      // Handle scroll properties
+      const scrollHorizontal = this.hasAttribute(addSizePrefix("sh"));
+      const scrollVertical = this.hasAttribute(addSizePrefix("sv"));
+      const overflow = this.getAttribute(addSizePrefix("overflow"));
+
+      if (scrollHorizontal && scrollVertical) {
+        this._styles[size]["overflow"] = "scroll";
+        this._styles[size]["flex-wrap"] = "nowrap";
+      } else if (scrollHorizontal) {
+        this._styles[size]["overflow-x"] = "scroll";
+        this._styles[size]["flex-wrap"] = "nowrap";
+      } else if (scrollVertical) {
+        this._styles[size]["overflow-y"] = "scroll";
+        this._styles[size]["flex-wrap"] = "nowrap";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
-        this._styles[size].display = "flex !important";
+      if (overflow === "hidden") {
+        this._styles[size]["overflow"] = "hidden";
+        this._styles[size]["flex-wrap"] = "nowrap";
       }
     });
 
@@ -207,6 +312,20 @@ class RettangoliViewElement extends HTMLElement {
       this._styleElement.textContent = newStyleString;
       this._lastStyleString = newStyleString;
     }
+    
+  }
+  
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Handle href and target changes
+    if (name === "href" || name === "target") {
+      this._updateDOM();
+      return;
+    }
+    
+    // Update styles for all other attributes
+    if (oldValue !== newValue) {
+      this.updateStyles();
+    }
   }
 }
 

package/src/setup.js

@@ -1,7 +1,12 @@
 import { createWebPatch } from '@rettangoli/fe';
+import createGlobalUI from './deps/createGlobalUI';
 import { h } from 'snabbdom/build/h';
 
-const componentDependencies = {}
+const globalUI = createGlobalUI();
+
+const componentDependencies = {
+  globalUI: globalUI
+}
 
 const deps = {
   components: componentDependencies,
@@ -13,4 +18,4 @@ export {
   h,
   patch,
   deps,
-}
+}

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",
     },
 };
 

package/src/components/dialog/dialog.handlers.js

@@ -1,5 +0,0 @@
-
-export const handleClickDialogueOverlay = (e, deps) => {
-  const { dispatchEvent } = deps;
-  dispatchEvent(new CustomEvent('close-dialogue'));
-}

package/src/components/dialog/dialog.store.js

@@ -1,25 +0,0 @@
-export const INITIAL_STATE = Object.freeze({
-
-});
-
-export const toViewData = ({ props, attrs }) => {
-  return {
-    isOpen: props.isOpen,
-    w: attrs.w || 600,
-    position: {
-      x: 0,
-      y: 0
-    }
-  };
-}
-
-export const selectState = ({ state }) => {
-  return state;
-}
-
-export const setState = (state) => {
-  // do doSomething
-}
-
-
-