rettangoli-ui 0.1.0-rc2 → 0.1.0-rc4

package/src/primitives/button.js

@@ -0,0 +1,306 @@
+import { css, dimensionWithUnit } from "../common.js";
+import flexChildStyles from "../styles/flexChildStyles.js";
+import buttonMarginStyles from "../styles/buttonMarginStyles.js";
+import anchorStyles from "../styles/anchorStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliButtonElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliButtonElement.styleSheet) {
+      RettangoliButtonElement.styleSheet = new CSSStyleSheet();
+      RettangoliButtonElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+        slot {
+          display: contents;
+        }
+
+        button {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: var(--spacing-lg);
+          border-width: 0px;
+          border-style: solid;
+          border-color: var(--border);
+          padding: 0px;
+          height: 32px;
+          padding-left: 16px;
+          padding-right: 16px;
+          border-radius: 4px;
+
+          font-size: var(--sm-font-size);
+          font-weight: var(--sm-font-weight);
+          line-height: var(--sm-line-height);
+          letter-spacing: var(--sm-letter-spacing);
+
+          background-color: var(--primary);
+          color: var(--primary-foreground);
+        }
+
+        button:hover {
+          cursor: pointer;
+          background-color: color-mix(
+            in srgb,
+            var(--primary) 85%,
+            white 15%
+          );
+        }
+
+        button:disabled {
+          cursor: not-allowed;
+        }
+
+        button:active {
+          cursor: pointer;
+          background-color: color-mix(
+            in srgb,
+            var(--primary) 80%,
+            white 20%
+          );
+        }
+
+        :host([v="pr"]) button:hover {
+          background-color: color-mix(
+              in srgb,
+              var(--primary) 85%,
+              white 15%
+            );
+        }
+
+        :host([v="pr"]) button:active {
+          background-color: color-mix(
+              in srgb,
+              var(--primary) 80%,
+              white 20%
+            );
+        }
+
+        :host([v="se"]) button:hover {
+          background-color: color-mix(
+              in srgb,
+              var(--secondary) 85%,
+              white 15%
+            );
+        }
+
+        :host([v="se"]) button:active {
+          background-color: color-mix(
+              in srgb,
+              var(--secondary) 80%,
+              white 20%
+            );
+        }
+
+        :host([v="de"]) button:hover {
+          background-color: color-mix(
+              in srgb,
+              var(--destructive) 85%,
+              white 15%
+            );
+        }
+
+        :host([v="de"]) button:active {
+          background-color: color-mix(
+              in srgb,
+              var(--destructive) 80%,
+              white 20%
+            );
+        }
+
+        :host([v="ol"]) button:hover {
+          background-color: var(--accent);
+        }
+
+        :host([v="gh"]) button:hover {
+          background-color: var(--accent);
+        }
+
+        :host([v="lk"]) button:hover {
+          text-decoration: underline;
+        }
+
+        /* Square button styles */
+        :host([sq]) button {
+          width: 32px;
+          height: 32px;
+          padding: 0;
+          gap: 0;
+        }
+
+        :host([sq][s="sm"]) button {
+          width: 24px;
+          height: 24px;
+          padding: 0;
+          gap: 0;
+        }
+
+        :host([sq][s="lg"]) button {
+          width: 40px;
+          height: 40px;
+          padding: 0;
+          gap: 0;
+        }
+
+        ${anchorStyles}
+        
+        a {
+          display: contents;
+        }
+
+        ${buttonMarginStyles}
+        ${flexChildStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliButtonElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliButtonElement.styleSheet];
+    
+    // Create initial DOM structure
+    this._containerElement = null;
+    this._buttonElement = document.createElement('button');
+    this._slotElement = document.createElement('slot');
+    this._iconElement = null;
+    
+    this._buttonElement.appendChild(this._slotElement);
+  }
+
+  static get observedAttributes() {
+    return ["key", "href", "target", "w", "t", "icon", "disabled", "v", "s", "sq", "ip"];
+  }
+
+  connectedCallback() {
+    this._updateButton();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._updateButton();
+  }
+
+  _updateButton() {
+    // Clear shadow DOM
+    this.shadow.innerHTML = '';
+    
+    // Update icon
+    this._updateIcon();
+    
+    // Update width styling (skip for square buttons)
+    if (!this.hasAttribute('sq')) {
+      this._updateWidth();
+    }
+    
+    // Update disabled state
+    const isDisabled = this.hasAttribute('disabled');
+    if (isDisabled) {
+      this._buttonElement.setAttribute('disabled', '');
+    } else {
+      this._buttonElement.removeAttribute('disabled');
+    }
+    
+    // Handle href (link) vs button
+    const href = this.getAttribute("href");
+    if (href) {
+      // Create anchor wrapper
+      const anchorElement = document.createElement('a');
+      anchorElement.setAttribute('href', href);
+      
+      const target = this.getAttribute("target");
+      if (target) {
+        anchorElement.setAttribute('target', target);
+      }
+      
+      anchorElement.appendChild(this._buttonElement);
+      this.shadow.appendChild(anchorElement);
+      this._containerElement = anchorElement;
+    } else {
+      // Direct button
+      this.shadow.appendChild(this._buttonElement);
+      this._containerElement = this._buttonElement;
+    }
+  }
+
+  _updateIcon() {
+    // Remove existing icon if any
+    if (this._iconElement) {
+      this._iconElement.remove();
+      this._iconElement = null;
+    }
+    
+    const icon = this.getAttribute("icon");
+    if (icon) {
+      const colorMap = {
+        pr: 'pr-fg',
+        se: 'ac-fg',
+        de: 'pr-fg',
+        ol: 'ac-fg',
+        gh: 'ac-fg',
+        lk: 'ac-fg'
+      };
+      const sizeMap = {
+        sm: 14,
+        md: 18,
+        lg: 22
+      };
+      const color = colorMap[this.getAttribute("v")] || 'pr-fg';
+      
+      // For square buttons, use button size (s attribute), otherwise use icon size (t attribute)
+      let size = 18; // default
+      if (this.hasAttribute('sq')) {
+        const buttonSizeMap = {
+          sm: 14,
+          lg: 22
+        };
+        const buttonSize = this.getAttribute("s");
+        size = buttonSizeMap[buttonSize] || 18;
+      } else {
+        size = sizeMap[this.getAttribute("t")] || 18;
+      }
+      
+      this._iconElement = document.createElement('rtgl-svg');
+      this._iconElement.setAttribute('svg', icon);
+      this._iconElement.setAttribute('c', color);
+      this._iconElement.setAttribute('wh', size.toString());
+      
+      // Insert icon based on position (default is right, 's' means start/left)
+      const iconPosition = this.getAttribute("ip");
+      if (iconPosition === 's') {
+        // Insert icon before slot (left position)
+        this._buttonElement.insertBefore(this._iconElement, this._slotElement);
+      } else {
+        // Insert icon after slot (right position - default)
+        this._buttonElement.appendChild(this._iconElement);
+      }
+    }
+  }
+
+  _updateWidth() {
+    const width = dimensionWithUnit(this.getAttribute("w"));
+    
+    if (width === "f") {
+      this._buttonElement.style.width = "var(--width-stretch)";
+    } else if (width !== undefined && width !== null) {
+      this._buttonElement.style.width = width;
+      this._buttonElement.style.minWidth = width;
+      this._buttonElement.style.maxWidth = width;
+    } else {
+      this._buttonElement.style.width = "";
+      this._buttonElement.style.minWidth = "";
+      this._buttonElement.style.maxWidth = "";
+    }
+  }
+}
+
+// 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 RettangoliButtonElement;
+};

package/src/primitives/image.js

@@ -0,0 +1,234 @@
+import {
+  css,
+  dimensionWithUnit,
+  convertObjectToCssString,
+  styleMapKeys,
+  permutateBreakpoints
+} from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+import viewStyles from "../styles/viewStyles.js";
+import anchorStyles from "../styles/anchorStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliImageElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliImageElement.styleSheet) {
+      RettangoliImageElement.styleSheet = new CSSStyleSheet();
+      RettangoliImageElement.styleSheet.replaceSync(css`
+        :host {
+          border-style: solid;
+          box-sizing: border-box;
+          overflow: hidden;
+          border-width: 0;
+        }
+        slot {
+          display: contents;
+        }
+        :host([of="con"]) img {
+          object-fit: contain;
+        }
+        :host([of="cov"]) img {
+          object-fit: cover;
+        }
+        :host([of="none"]) img {
+          object-fit: none;
+        }
+        img {
+          height: 100%;
+          width: 100%;
+        }
+        
+        ${anchorStyles}
+        
+        a {
+          display: block;
+          height: 100%;
+          width: 100%;
+        }
+        
+        :host([href]) {
+          cursor: pointer;
+        }
+        
+        ${viewStyles}
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliImageElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliImageElement.styleSheet];
+    
+    // Create initial DOM structure
+    this._styleElement = document.createElement('style');
+    this._imgElement = document.createElement('img');
+    this._linkElement = null;
+    
+    this.shadow.appendChild(this._styleElement);
+    this._updateDOM();
+  }
+
+  static get observedAttributes() {
+    return permutateBreakpoints([...styleMapKeys, "key", "src", "href", "target", "wh", "w", "h", "hidden", "height", "width"]);
+  }
+
+  _styles = {
+    default: {},
+    sm: {},
+    md: {},
+    lg: {},
+    xl: {},
+  };
+
+  _lastStyleString = "";
+
+  _updateDOM() {
+    const href = this.getAttribute("href");
+    const target = this.getAttribute("target");
+
+    if (href) {
+      if (!this._linkElement) {
+        // Create link wrapper
+        this._linkElement = document.createElement("a");
+      }
+      
+      // Update link attributes
+      this._linkElement.href = href;
+      if (target) {
+        this._linkElement.target = target;
+      } else {
+        this._linkElement.removeAttribute("target");
+      }
+      
+      // Wrap image in link
+      this._linkElement.appendChild(this._imgElement);
+      
+      // Ensure link is in shadow DOM
+      if (this._linkElement.parentNode !== this.shadow) {
+        this.shadow.appendChild(this._linkElement);
+      }
+    } else if (this._linkElement) {
+      // Remove link wrapper
+      if (this._imgElement.parentNode === this._linkElement) {
+        this.shadow.appendChild(this._imgElement);
+      }
+      if (this._linkElement.parentNode === this.shadow) {
+        this.shadow.removeChild(this._linkElement);
+      }
+      this._linkElement = null;
+    } else {
+      // Ensure image is in shadow DOM
+      if (this._imgElement.parentNode !== this.shadow) {
+        this.shadow.appendChild(this._imgElement);
+      }
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Handle href and target changes
+    if (name === "href" || name === "target") {
+      this._updateDOM();
+      return;
+    }
+    // Reset styles for fresh calculation
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+
+    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+      const addSizePrefix = (tag) => {
+        return `${size === "default" ? "" : `${size}-`}${tag}`;
+      };
+
+      const wh = this.getAttribute(addSizePrefix("wh"));
+      const width = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("w")) : wh
+      );
+      const height = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("h")) : wh
+      );
+      const opacity = this.getAttribute(addSizePrefix("o"));
+      const zIndex = this.getAttribute(addSizePrefix("z"));
+
+      if (zIndex !== null) {
+        this._styles[size]["z-index"] = zIndex;
+      }
+
+      if (opacity !== null) {
+        this._styles[size].opacity = opacity;
+      }
+
+      if (width === "f") {
+        this._styles[size].width = "var(--width-stretch)";
+      } else if (width !== undefined) {
+        this._styles[size].width = width;
+        this._styles[size]["min-width"] = width;
+        this._styles[size]["max-width"] = width;
+      }
+
+      if (height === "f") {
+        this._styles[size].height = "100%";
+      } else if (height !== undefined) {
+        this._styles[size].height = height;
+        this._styles[size]["min-height"] = height;
+        this._styles[size]["max-height"] = height;
+      }
+
+      if (this.hasAttribute(addSizePrefix("hidden"))) {
+        this._styles[size].display = "none !important";
+      }
+
+      if (this.hasAttribute(addSizePrefix("visible"))) {
+        this._styles[size].display = "block !important";
+      }
+    });
+
+    // Update styles only if changed
+    const newStyleString = convertObjectToCssString(this._styles);
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
+
+    // Update img attributes
+    this._updateImageAttributes();
+  }
+
+  _updateImageAttributes() {
+    const src = this.getAttribute("src");
+    const width = this.getAttribute("width");
+    const height = this.getAttribute("height");
+
+    if (src !== null) {
+      this._imgElement.setAttribute("src", src);
+    }
+    if (width !== null) {
+      this._imgElement.setAttribute("width", width);
+    }
+    if (height !== null) {
+      this._imgElement.setAttribute("height", height);
+    }
+  }
+
+  connectedCallback() {
+    this._updateImageAttributes();
+  }
+}
+
+// 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 RettangoliImageElement;
+};