@rettangoli/ui 0.1.0

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,218 @@
+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;
+        }
+        :host([s="sm"]) input {
+          font-size: var(--xs-font-size);
+          font-weight: var(--xs-font-weight);
+          line-height: var(--xs-line-height);
+          letter-spacing: var(--xs-letter-spacing);
+          padding-left: var(--spacing-sm);
+          padding-right: var(--spacing-sm);
+          height: 24px;
+        }
+        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",
+      "s",
+      ...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", "s"].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/slider.js

@@ -0,0 +1,269 @@
+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 RettangoliSliderElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliSliderElement.styleSheet) {
+      RettangoliSliderElement.styleSheet = new CSSStyleSheet();
+      RettangoliSliderElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+        input[type="range"] {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 200px;
+          height: 8px;
+          background: var(--muted);
+          border-radius: var(--border-radius-full);
+          outline: none;
+          cursor: pointer;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 20px;
+          height: 20px;
+          background: var(--foreground);
+          border-radius: 50%;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+        input[type="range"]::-moz-range-thumb {
+          width: 20px;
+          height: 20px;
+          background: var(--foreground);
+          border-radius: 50%;
+          cursor: pointer;
+          border: none;
+          transition: all 0.2s ease;
+        }
+        input[type="range"]:hover::-webkit-slider-thumb {
+          transform: scale(1.1);
+        }
+        input[type="range"]:hover::-moz-range-thumb {
+          transform: scale(1.1);
+        }
+        input[type="range"]:focus {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+        input[type="range"]:disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+        input[type="range"]:disabled::-webkit-slider-thumb {
+          cursor: not-allowed;
+        }
+        input[type="range"]:disabled::-moz-range-thumb {
+          cursor: not-allowed;
+        }
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliSliderElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliSliderElement.styleSheet];
+    
+    // Initialize style tracking properties
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+    this._lastStyleString = "";
+    
+    // Create initial DOM structure
+    this._inputElement = document.createElement('input');
+    this._inputElement.type = 'range';
+    this._styleElement = document.createElement('style');
+    
+    this.shadow.appendChild(this._styleElement);
+    this.shadow.appendChild(this._inputElement);
+
+    // Bind event handlers
+    this._inputElement.addEventListener('input', this._onInput);
+    this._inputElement.addEventListener('change', this._onChange);
+  }
+
+  static get observedAttributes() {
+    return [
+      "key", 
+      "value",
+      "min",
+      "max",
+      "step",
+      "disabled",
+      ...permutateBreakpoints([
+        ...styleMapKeys,
+        "wh",
+        "w",
+        "h",
+        "hidden",
+        "visible",
+        "op",
+        "z",
+      ])
+    ];
+  }
+
+  get value() {
+    return this._inputElement.value;
+  }
+
+  set value(newValue) {
+    this._inputElement.value = newValue;
+  }
+
+  _onInput = (event) => {
+    this.dispatchEvent(new CustomEvent('slider-input', {
+      detail: {
+        value: this._inputElement.value,
+      },
+    }));
+  };
+
+  _onChange = (event) => {
+    this.dispatchEvent(new CustomEvent('slider-change', {
+      detail: {
+        value: this._inputElement.value,
+      },
+    }));
+  };
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Handle input-specific attributes first
+    if (["value", "min", "max", "step", "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[type="range"]');
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
+  }
+
+  _updateInputAttributes() {
+    const value = this.getAttribute("value");
+    const min = this.getAttribute("min");
+    const max = this.getAttribute("max");
+    const step = this.getAttribute("step");
+    const isDisabled = this.hasAttribute('disabled');
+
+    if (value !== null) {
+      this._inputElement.value = value;
+    }
+
+    if (min !== null) {
+      this._inputElement.min = min;
+    } else {
+      this._inputElement.min = "0";
+    }
+
+    if (max !== null) {
+      this._inputElement.max = max;
+    } else {
+      this._inputElement.max = "100";
+    }
+
+    if (step !== null) {
+      this._inputElement.step = step;
+    } else {
+      this._inputElement.step = "1";
+    }
+    
+    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 RettangoliSliderElement;
+};