rettangoli-ui 0.1.0-rc1 → 0.1.0-rc3

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

package/src/primitives/input.js

@@ -0,0 +1,208 @@
+import { 
+  css, 
+  dimensionWithUnit,
+  convertObjectToCssString,
+  styleMapKeys,
+  permutateBreakpoints,
+} from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliInputElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliInputElement.styleSheet) {
+      RettangoliInputElement.styleSheet = new CSSStyleSheet();
+      RettangoliInputElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+        input {
+          background-color: var(--background);
+          font-size: var(--sm-font-size);
+          font-weight: var(--sm-font-weight);
+          line-height: var(--sm-line-height);
+          letter-spacing: var(--sm-letter-spacing);
+          border: 1px solid var(--ring);
+          border-radius: var(--border-radius-lg);
+          padding-left: var(--spacing-md);
+          padding-right: var(--spacing-md);
+          height: 32px;
+          color: var(--foreground);
+          outline: none;
+        }
+        input:focus {
+          border-color: var(--foreground);
+        }
+        input:disabled {
+          cursor: not-allowed;
+        }
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliInputElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliInputElement.styleSheet];
+    
+    // Initialize style tracking properties
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      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);
+
+    // Bind event handler
+    this._inputElement.addEventListener('keydown', this._onChange);
+  }
+
+  static get observedAttributes() {
+    return [
+      "key", 
+      "type", 
+      "placeholder", 
+      "disabled",
+      ...permutateBreakpoints([
+        ...styleMapKeys,
+        "wh",
+        "w",
+        "h",
+        "hidden",
+        "visible",
+        "op",
+        "z",
+      ])
+    ];
+  }
+
+  get value() {
+    return this._inputElement.value;
+  }
+
+  _onChange = (event) => {
+    this.dispatchEvent(new CustomEvent('input-keydown', {
+      detail: {
+        value: this._inputElement.value,
+      },
+    }));
+  };
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Handle input-specific attributes first
+    if (["type", "placeholder", "disabled"].includes(name)) {
+      this._updateInputAttributes();
+      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("op"));
+      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 - targeting input element
+    const newStyleString = convertObjectToCssString(this._styles, 'input');
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
+  }
+
+  _updateInputAttributes() {
+    const type = this.getAttribute("type") || "text";
+    const placeholder = this.getAttribute("placeholder");
+    const isDisabled = this.hasAttribute('disabled');
+
+    this._inputElement.setAttribute("type", type);
+    
+    if (placeholder !== null) {
+      this._inputElement.setAttribute("placeholder", placeholder);
+    } else {
+      this._inputElement.removeAttribute("placeholder");
+    }
+    
+    if (isDisabled) {
+      this._inputElement.setAttribute("disabled", "");
+    } else {
+      this._inputElement.removeAttribute("disabled");
+    }
+  }
+
+  connectedCallback() {
+    this._updateInputAttributes();
+  }
+}
+
+// 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 RettangoliInputElement;
+};

package/src/primitives/svg.js

@@ -0,0 +1,95 @@
+import { css, dimensionWithUnit } from "../common.js";
+import flexChildStyles from "../styles/flexChildStyles.js";
+import paddingSvgStyles from "../styles/paddingSvgStyles.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import textColorStyles from "../styles/textColorStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliSvgElement extends HTMLElement {
+  static styleSheet = null;
+  static _icons = {};
+
+  static initializeStyleSheet() {
+    if (!RettangoliSvgElement.styleSheet) {
+      RettangoliSvgElement.styleSheet = new CSSStyleSheet();
+      RettangoliSvgElement.styleSheet.replaceSync(css`
+        :host {
+          color: var(--foreground);
+        }
+        ${textColorStyles}
+        ${paddingSvgStyles}
+        ${flexChildStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliSvgElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliSvgElement.styleSheet];
+  }
+
+  static get observedAttributes() {
+    return ["key", "svg", "w", "h", "wh"];
+  }
+
+  static get icons() {
+    return RettangoliSvgElement._icons;
+  }
+
+  static addIcon(iconName, icon) {
+    RettangoliSvgElement._icons[iconName] = icon;
+  }
+
+  connectedCallback() {
+    this._updateSizing();
+    this._render();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._updateSizing();
+    this._render();
+  }
+
+  _updateSizing() {
+    const wh = this.getAttribute("wh");
+    const width = dimensionWithUnit(
+      wh === null ? this.getAttribute("w") : wh
+    );
+    const height = dimensionWithUnit(
+      wh === null ? this.getAttribute("h") : wh
+    );
+
+    if (width) {
+      this.style.width = width;
+    }
+    if (height) {
+      this.style.height = height;
+    }
+  }
+
+  _render() {
+    try {
+      const iconName = this.getAttribute("svg");
+      const svgStringContent =
+        RettangoliSvgElement._icons[iconName] ||
+        (window["rtglIcons"] || {})[iconName];
+      if (svgStringContent) {
+        this.shadow.innerHTML = svgStringContent;
+        return;
+      }
+    } catch (error) {
+      console.log("error in rtgl-svg render", error);
+    }
+    this.shadow.innerHTML = "";
+  }
+}
+
+// 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 RettangoliSvgElement;
+};

package/src/primitives/text.js

@@ -0,0 +1,141 @@
+import { css, dimensionWithUnit } from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import textStyles from "../styles/textStyles.js";
+import textColorStyles from "../styles/textColorStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliTextElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliTextElement.styleSheet) {
+      RettangoliTextElement.styleSheet = new CSSStyleSheet();
+      RettangoliTextElement.styleSheet.replaceSync(css`
+        :host {
+          display: block;
+          font-size: var(--md-font-size);
+          font-weight: var(--md-font-weight);
+          line-height: var(--md-line-height);
+          letter-spacing: var(--md-letter-spacing);
+        }
+        slot {
+          display: contents;
+        }
+        :host ::slotted(a) {
+          text-decoration: var(--anchor-text-decoration);
+          color: var(--anchor-color);
+        }
+        :host ::slotted(a:hover) {
+          text-decoration: var(--anchor-text-decoration-hover);
+          color: var(--anchor-color-hover);
+        }
+        :host([href]) {
+          cursor: pointer;
+          position: relative;
+        }
+        :host([href]) a {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 1;
+        }
+        ${textStyles}
+        ${textColorStyles}
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliTextElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliTextElement.styleSheet];
+    
+    // Create initial DOM structure
+    this._slotElement = document.createElement('slot');
+    this._linkElement = null;
+    this._updateDOM();
+  }
+
+  static get observedAttributes() {
+    return ["key", "w", "ellipsis", "href", "target"];
+  }
+
+  connectedCallback() {
+    this._updateStyling();
+    this._updateDOM();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "href" || name === "target") {
+      this._updateDOM();
+    } else {
+      this._updateStyling();
+    }
+  }
+
+  _updateStyling() {
+    const width = dimensionWithUnit(this.getAttribute("w"));
+    const ellipsis = this.hasAttribute("ellipsis");
+
+    if (ellipsis) {
+      this.style.overflow = "hidden";
+      this.style.textOverflow = "ellipsis";
+      this.style.whiteSpace = "nowrap";
+    } else {
+      this.style.overflow = "";
+      this.style.textOverflow = "";
+      this.style.whiteSpace = "";
+    }
+
+    if (width === "f") {
+      this.style.width = "var(--width-stretch)";
+    } else if (width !== undefined) {
+      this.style.width = width;
+    } else {
+      this.style.width = "";
+    }
+  }
+
+  _updateDOM() {
+    const href = this.getAttribute("href");
+    const target = this.getAttribute("target");
+
+    // Ensure slot is always in the shadow DOM
+    if (this._slotElement.parentNode !== this.shadow) {
+      this.shadow.appendChild(this._slotElement);
+    }
+
+    if (href) {
+      if (!this._linkElement) {
+        // Create link overlay only if it doesn't exist
+        this._linkElement = document.createElement("a");
+        this.shadow.appendChild(this._linkElement);
+      }
+
+      // Update link attributes
+      this._linkElement.href = href;
+      if (target) {
+        this._linkElement.target = target;
+      } else {
+        this._linkElement.removeAttribute("target");
+      }
+    } else if (this._linkElement) {
+      // Remove link overlay
+      this.shadow.removeChild(this._linkElement);
+      this._linkElement = null;
+    }
+  }
+}
+
+// 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 RettangoliTextElement;
+};