@rettangoli/ui 0.1.2-rc3 → 0.1.2-rc31

package/src/primitives/dialog.js

@@ -0,0 +1,254 @@
+import { css } from "../common.js";
+
+class RettangoliDialogElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliDialogElement.styleSheet) {
+      RettangoliDialogElement.styleSheet = new CSSStyleSheet();
+      RettangoliDialogElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+
+        dialog {
+          padding: 0;
+          border: none;
+          background: transparent;
+          margin: auto;
+          overflow-y: scroll;
+          color: inherit;
+          max-height: 100vh;
+          height: 100vh;
+          max-width: 100vw;
+          scrollbar-width: none;
+          outline: none;
+        }
+
+        dialog::backdrop {
+          background-color: rgba(0, 0, 0, 0.5);
+        }
+
+        slot[name="content"] {
+          background-color: var(--background) !important;
+          display: block;
+          padding: var(--spacing-lg);
+          border: 1px solid var(--border);
+          border-radius: var(--border-radius-md);
+          margin-left: var(--spacing-lg);
+          margin-right: var(--spacing-lg);
+          width: fit-content;
+          max-width: calc(100vw - 2 * var(--spacing-lg));
+          /* Default margins will be set dynamically via JavaScript for adaptive centering */
+          margin-top: 40px;
+          margin-bottom: 40px;
+        }
+
+        /* Size attribute styles */
+        :host([s="sm"]) slot[name="content"] {
+          width: 33vw;
+        }
+
+        :host([s="md"]) slot[name="content"] {
+          width: 50vw;
+        }
+
+        :host([s="lg"]) slot[name="content"] {
+          width: 80vw;
+        }
+
+        :host([s="f"]) slot[name="content"] {
+          width: 100vw;
+          margin-left: 0;
+          margin-right: 0;
+        }
+
+        @keyframes dialog-in {
+          from {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+
+        dialog[open] slot[name="content"] {
+          animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+        }
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliDialogElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.adoptedStyleSheets = [RettangoliDialogElement.styleSheet];
+
+    // Create dialog element
+    this._dialogElement = document.createElement('dialog');
+    this.shadow.appendChild(this._dialogElement);
+
+    // Store reference for content slot
+    this._slotElement = null;
+    this._isConnected = false;
+
+    // Handle click outside - emit custom event
+    this._dialogElement.addEventListener('click', (e) => {
+      if (e.target === this._dialogElement) {
+        this.dispatchEvent(new CustomEvent('close', {
+          detail: {}
+        }));
+      }
+    });
+
+    // Handle right-click on overlay to close dialog
+    this._dialogElement.addEventListener('contextmenu', (e) => {
+      if (e.target === this._dialogElement) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('close', {
+          detail: {}
+        }));
+      }
+    });
+
+    // Handle ESC key - prevent native close and emit custom event
+    this._dialogElement.addEventListener('cancel', (e) => {
+      e.preventDefault();
+      this.dispatchEvent(new CustomEvent('close', {
+        detail: {}
+      }));
+    });
+  }
+
+  static get observedAttributes() {
+    return ["open", "w", "s"];
+  }
+
+  connectedCallback() {
+    this._updateDialog();
+    this._isConnected = true;
+    // Check initial open attribute
+    if (this.hasAttribute('open')) {
+      this._showModal();
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'open') {
+      if (newValue !== null && !this._dialogElement.open && this._isConnected) {
+        this._showModal();
+      } else if (newValue === null && this._dialogElement.open) {
+        this._hideModal();
+      }
+    } else if (name === 'w') {
+      this._updateWidth();
+    } else if (name === 's') {
+      // Size is handled via CSS :host() selectors
+    }
+  }
+
+  _updateDialog() {
+    this._updateWidth();
+  }
+
+  _updateWidth() {
+    const width = this.getAttribute('w');
+    if (width) {
+      this._dialogElement.style.width = width;
+    } else {
+      this._dialogElement.style.width = '';
+    }
+  }
+
+  // Internal methods
+  _showModal() {
+    if (!this._dialogElement.open) {
+      // 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._dialogElement.appendChild(this._slotElement);
+      }
+
+      this._dialogElement.showModal();
+
+      // Reset scroll position
+      this._dialogElement.scrollTop = 0;
+
+      // Apply adaptive centering
+      this._applyAdaptiveCentering();
+    }
+  }
+
+  _hideModal() {
+    if (this._dialogElement.open) {
+      this._dialogElement.close();
+
+      // Remove slot to unmount content
+      if (this._slotElement) {
+        // Reset any inline styles applied for adaptive centering
+        this._slotElement.style.marginTop = '';
+        this._slotElement.style.marginBottom = '';
+        
+        this._dialogElement.removeChild(this._slotElement);
+        this._slotElement = null;
+      }
+
+      // Reset dialog height
+      this._dialogElement.style.height = '';
+
+      // Don't emit any event when programmatically closed via attribute
+    }
+  }
+
+  _applyAdaptiveCentering() {
+    if (!this._slotElement) {
+      return;
+    }
+
+    // Use requestAnimationFrame to ensure DOM has updated
+    requestAnimationFrame(() => {
+      if (!this._slotElement) return;
+      
+      // Get the actual height of the content
+      const contentHeight = this._slotElement.offsetHeight;
+      const viewportHeight = window.innerHeight;
+      
+      // Calculate centered position with minimum margins for scrollability
+      const minMargin = 40; // Minimum margin in pixels to ensure scrollability
+      
+      if (contentHeight >= viewportHeight - (2 * minMargin)) {
+        // Content is too tall, use minimum margins to allow scrolling
+        // Start near the top with small margin so content isn't pushed too far down
+        this._slotElement.style.marginTop = `${minMargin}px`;
+        this._slotElement.style.marginBottom = `${minMargin}px`;
+        // Keep dialog at full height for scrolling
+        this._dialogElement.style.height = '100vh';
+      } else {
+        // Content fits, center it vertically
+        const totalMargin = viewportHeight - contentHeight;
+        const margin = Math.floor(totalMargin / 2);
+        this._slotElement.style.marginTop = `${margin}px`;
+        this._slotElement.style.marginBottom = `${margin}px`;
+        // Set dialog height to auto to prevent unnecessary scrollbar
+        this._dialogElement.style.height = 'auto';
+      }
+    });
+  }
+
+
+  // Expose dialog element for advanced usage
+  get dialog() {
+    return this._dialogElement;
+  }
+}
+
+// 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 RettangoliDialogElement;
+};

package/src/primitives/input.js

@@ -1,5 +1,5 @@
-import { 
-  css, 
+import {
+  css,
   dimensionWithUnit,
   convertObjectToCssString,
   styleMapKeys,
@@ -59,7 +59,7 @@ class RettangoliInputElement extends HTMLElement {
     RettangoliInputElement.initializeStyleSheet();
     this.shadow = this.attachShadow({ mode: "closed" });
     this.shadow.adoptedStyleSheets = [RettangoliInputElement.styleSheet];
-    
+
     // Initialize style tracking properties
     this._styles = {
       default: {},
@@ -69,11 +69,11 @@ class RettangoliInputElement extends HTMLElement {
       xl: {},
     };
     this._lastStyleString = "";
-    
+
     // Create initial DOM structure
     this._inputElement = document.createElement('input');
     this._styleElement = document.createElement('style');
-    
+
     this.shadow.appendChild(this._styleElement);
     this.shadow.appendChild(this._inputElement);
 
@@ -83,10 +83,11 @@ class RettangoliInputElement extends HTMLElement {
 
   static get observedAttributes() {
     return [
-      "key", 
-      "type", 
-      "placeholder", 
+      "key",
+      "type",
+      "placeholder",
       "disabled",
+      "value",
       "s",
       ...permutateBreakpoints([
         ...styleMapKeys,
@@ -105,6 +106,14 @@ class RettangoliInputElement extends HTMLElement {
     return this._inputElement.value;
   }
 
+  set value(newValue) {
+    this._inputElement.value = newValue;
+  }
+
+  focus() {
+    this._inputElement.focus();
+  }
+
   _onChange = (event) => {
     this.dispatchEvent(new CustomEvent('input-change', {
       detail: {
@@ -114,8 +123,17 @@ class RettangoliInputElement extends HTMLElement {
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame((() => {
+        const value = this.getAttribute("value");
+        this._inputElement.value = value ?? "";
+      }))
+      return;
+    }
+
     // Handle input-specific attributes first
-    if (["type", "placeholder", "disabled", "s"].includes(name)) {
+    if (["type", "placeholder", "disabled", "value", "step", "s"].includes(name)) {
       this._updateInputAttributes();
       return;
     }
@@ -188,16 +206,28 @@ class RettangoliInputElement extends HTMLElement {
   _updateInputAttributes() {
     const type = this.getAttribute("type") || "text";
     const placeholder = this.getAttribute("placeholder");
+    const value = this.getAttribute("value");
+    const step = this.getAttribute("step");
     const isDisabled = this.hasAttribute('disabled');
 
     this._inputElement.setAttribute("type", type);
-    
+
     if (placeholder !== null) {
       this._inputElement.setAttribute("placeholder", placeholder);
     } else {
       this._inputElement.removeAttribute("placeholder");
     }
-    
+
+    if (value !== null) {
+      this._inputElement.value = value;
+    }
+
+    if (step !== null) {
+      this._inputElement.setAttribute("step", step);
+    } else {
+      this._inputElement.removeAttribute("step");
+    }
+
     if (isDisabled) {
       this._inputElement.setAttribute("disabled", "");
     } else {

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;
+};