@rettangoli/ui 0.1.31 → 1.0.0-rc1

package/src/primitives/image.js

@@ -4,11 +4,15 @@ import {
   convertObjectToCssString,
   styleMapKeys,
   permutateBreakpoints,
+  syncLinkWrapper,
+  createResponsiveStyleBuckets,
+  responsiveStyleSizes,
+  applyDimensionToStyleBucket,
 } 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";
+import viewStylesForTarget from "../styles/viewStylesForTarget.js";
+import marginStylesForTarget from "../styles/marginStylesForTarget.js";
 
 // Internal implementation without uhtml
 class RettangoliImageElement extends HTMLElement {
@@ -19,14 +23,14 @@ class RettangoliImageElement extends HTMLElement {
       RettangoliImageElement.styleSheet = new CSSStyleSheet();
       RettangoliImageElement.styleSheet.replaceSync(css`
         :host {
+          display: contents;
+        }
+        img, a {
           border-style: solid;
           box-sizing: border-box;
           overflow: hidden;
           border-width: 0;
         }
-        slot {
-          display: contents;
-        }
         :host([of="con"]) img {
           object-fit: contain;
         }
@@ -36,10 +40,6 @@ class RettangoliImageElement extends HTMLElement {
         :host([of="none"]) img {
           object-fit: none;
         }
-        img {
-          height: 100%;
-          width: 100%;
-        }
         :host([w]:not([h]):not([wh])) img,
         :host([sm-w]:not([sm-h]):not([sm-wh])) img,
         :host([md-w]:not([md-h]):not([md-wh])) img,
@@ -56,12 +56,8 @@ class RettangoliImageElement extends HTMLElement {
           width: 100%;
         }
 
-        :host([href]) {
-          cursor: pointer;
-        }
-
-        ${viewStyles}
-        ${marginStyles}
+        ${viewStylesForTarget('img, a')}
+        ${marginStylesForTarget('img, a')}
         ${cursorStyles}
       `);
     }
@@ -87,87 +83,69 @@ class RettangoliImageElement extends HTMLElement {
       ...styleMapKeys,
       "key",
       "src",
+      "alt",
       "href",
-      "target",
+      "new-tab",
+      "rel",
       "wh",
       "w",
       "h",
       "hide",
       "show",
-      "height",
-      "width",
+      "op",
       "z",
+      "of",
     ]);
   }
 
-  _styles = {
-    default: {},
-    sm: {},
-    md: {},
-    lg: {},
-    xl: {},
-  };
+  _styles = createResponsiveStyleBuckets();
 
   _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);
+    const newTab = this.hasAttribute("new-tab");
+    const rel = this.getAttribute("rel");
+
+    this._linkElement = syncLinkWrapper({
+      shadowRoot: this.shadow,
+      childElement: this._imgElement,
+      linkElement: this._linkElement,
+      href,
+      newTab,
+      rel,
+    });
+  }
 
-      // 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);
-      }
-    }
+  connectedCallback() {
+    this._updateImageAttributes();
+    this.updateStyles();
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    // Handle href and target changes
-    if (name === "href" || name === "target") {
+    // Handle href and link behavior changes
+    if (name === "href" || name === "new-tab" || name === "rel") {
       this._updateDOM();
       return;
     }
+
+    // Handle image attributes
+    if (name === "src" || name === "alt") {
+      this._updateImageAttributes();
+      return;
+    }
+
+    // Update styles for all other attributes
+    if (oldValue !== newValue) {
+      this.updateStyles();
+    }
+  }
+
+  updateStyles() {
     // Reset styles for fresh calculation
-    this._styles = {
-      default: {},
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {},
-    };
-
-    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+    this._styles = createResponsiveStyleBuckets();
+
+    responsiveStyleSizes.forEach((size) => {
       const addSizePrefix = (tag) => {
         return `${size === "default" ? "" : `${size}-`}${tag}`;
       };
@@ -179,7 +157,7 @@ class RettangoliImageElement extends HTMLElement {
       const height = dimensionWithUnit(
         wh === null ? this.getAttribute(addSizePrefix("h")) : wh,
       );
-      const opacity = this.getAttribute(addSizePrefix("o"));
+      const opacity = this.getAttribute(addSizePrefix("op"));
       const zIndex = this.getAttribute(addSizePrefix("z"));
 
       if (zIndex !== null) {
@@ -190,21 +168,19 @@ class RettangoliImageElement extends HTMLElement {
         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;
-      }
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "width",
+        dimension: width,
+        fillValue: "var(--width-stretch)",
+      });
 
-      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;
-      }
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "height",
+        dimension: height,
+        fillValue: "100%",
+      });
 
       if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
@@ -216,34 +192,28 @@ class RettangoliImageElement extends HTMLElement {
     });
 
     // Update styles only if changed
-    const newStyleString = convertObjectToCssString(this._styles);
+    const newStyleString = convertObjectToCssString(this._styles, 'img, a');
     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");
+    const alt = this.getAttribute("alt");
 
     if (src !== null) {
       this._imgElement.setAttribute("src", src);
+    } else {
+      this._imgElement.removeAttribute("src");
     }
-    if (width !== null) {
-      this._imgElement.setAttribute("width", width);
-    }
-    if (height !== null) {
-      this._imgElement.setAttribute("height", height);
-    }
-  }
 
-  connectedCallback() {
-    this._updateImageAttributes();
+    if (alt !== null) {
+      this._imgElement.setAttribute("alt", alt);
+    } else {
+      this._imgElement.removeAttribute("alt");
+    }
   }
 }
 

package/src/primitives/input-number.js

@@ -2,16 +2,28 @@ import {
   css,
   dimensionWithUnit,
   convertObjectToCssString,
-  styleMapKeys,
   permutateBreakpoints,
+  createResponsiveStyleBuckets,
+  responsiveStyleSizes,
+  applyDimensionToStyleBucket,
 } from "../common.js";
 import cursorStyles from "../styles/cursorStyles.js";
 import marginStyles from "../styles/marginStyles.js";
 
+const inputNumberStyleMapKeys = ["mt", "mr", "mb", "ml", "m", "mh", "mv", "cur"];
+
 // Internal implementation without uhtml
 class RettangoliInputNumberElement extends HTMLElement {
   static styleSheet = null;
 
+  static inputSpecificAttributes = [
+    "disabled",
+    "step",
+    "min",
+    "max",
+    "s",
+  ];
+
   static initializeStyleSheet() {
     if (!RettangoliInputNumberElement.styleSheet) {
       RettangoliInputNumberElement.styleSheet = new CSSStyleSheet();
@@ -61,13 +73,7 @@ class RettangoliInputNumberElement extends HTMLElement {
     this.shadow.adoptedStyleSheets = [RettangoliInputNumberElement.styleSheet];
 
     // Initialize style tracking properties
-    this._styles = {
-      default: {},
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {},
-    };
+    this._styles = createResponsiveStyleBuckets();
     this._lastStyleString = "";
 
     // Create initial DOM structure
@@ -77,14 +83,14 @@ class RettangoliInputNumberElement extends HTMLElement {
     this.shadow.appendChild(this._styleElement);
     this.shadow.appendChild(this._inputElement);
 
-    // Bind event handler
-    this._inputElement.addEventListener('input', this._onChange);
+    // Bind event handlers
+    this._inputElement.addEventListener('input', this._onInput);
+    this._inputElement.addEventListener('change', this._onChange);
   }
 
   static get observedAttributes() {
     return [
       "key",
-      "type",
       "placeholder",
       "disabled",
       "value",
@@ -93,7 +99,7 @@ class RettangoliInputNumberElement extends HTMLElement {
       "max",
       "s",
       ...permutateBreakpoints([
-        ...styleMapKeys,
+        ...inputNumberStyleMapKeys,
         "wh",
         "w",
         "h",
@@ -117,75 +123,79 @@ class RettangoliInputNumberElement extends HTMLElement {
     this._inputElement.focus();
   }
 
-  _onChange = (event) => {
+  _emitValueEvent = (eventName) => {
     const inputValue = this._inputElement.value;
+    if (inputValue.trim() === "") {
+      this.dispatchEvent(new CustomEvent(eventName, {
+        detail: {
+          value: null,
+        },
+        bubbles: true,
+      }));
+      return;
+    }
+
     let numericValue = parseFloat(inputValue);
 
     // Only process if the value is a valid number (not NaN)
     if (!isNaN(numericValue)) {
-      // Enforce minimum value if set
-      const minAttr = this.getAttribute("min");
-      if (minAttr !== null) {
-        const minValue = parseFloat(minAttr);
-        if (!isNaN(minValue) && numericValue < minValue) {
-          numericValue = minValue;
-          this._inputElement.value = minValue.toString();
-        }
-      }
-
-      // Enforce maximum value if set
-      const maxAttr = this.getAttribute("max");
-      if (maxAttr !== null) {
-        const maxValue = parseFloat(maxAttr);
-        if (!isNaN(maxValue) && numericValue > maxValue) {
-          numericValue = maxValue;
-          this._inputElement.value = maxValue.toString();
-        }
-      }
+      numericValue = this._clampValueToBounds(numericValue);
+      this._inputElement.value = numericValue.toString();
 
-      this.dispatchEvent(new CustomEvent('input-change', {
+      this.dispatchEvent(new CustomEvent(eventName, {
         detail: {
           value: numericValue,
         },
+        bubbles: true,
       }));
     }
   };
 
+  _onInput = () => {
+    this._emitValueEvent('value-input');
+  };
+
+  _onChange = () => {
+    this._emitValueEvent('value-change');
+  };
+
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === 'value') {
-      requestAnimationFrame((() => {
-        const value = this.getAttribute("value");
-        this._inputElement.value = value ?? "";
-      }))
+    if (oldValue === newValue) {
+      return;
     }
 
-    if (name === 'placeholder') {
-      requestAnimationFrame((() => {
-        const placeholder = this.getAttribute("placeholder");
-        if (placeholder === undefined || placeholder === 'null') {
-          this._inputElement.removeAttribute('placeholder');
-        } else {
-          this._inputElement.setAttribute('placeholder', placeholder ?? "");
-        }
-      }))
+    if (name === "key") {
+      this._syncValueAttribute();
+      return;
+    }
+
+    if (name === "value") {
+      this._syncValueAttribute();
+      return;
+    }
+
+    if (name === "placeholder") {
+      this._syncPlaceholderAttribute();
+      return;
     }
 
     // Handle input-specific attributes first
-    if (["type", "disabled", "step", "min", "max", "s"].includes(name)) {
+    if (RettangoliInputNumberElement.inputSpecificAttributes.includes(name)) {
       this._updateInputAttributes();
+      if (name === "min" || name === "max") {
+        this._syncValueAttribute();
+      }
       return;
     }
 
+    this.updateStyles();
+  }
+
+  updateStyles() {
     // Reset styles for fresh calculation
-    this._styles = {
-      default: {},
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {},
-    };
-
-    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+    this._styles = createResponsiveStyleBuckets();
+
+    responsiveStyleSizes.forEach((size) => {
       const addSizePrefix = (tag) => {
         return `${size === "default" ? "" : `${size}-`}${tag}`;
       };
@@ -208,28 +218,26 @@ class RettangoliInputNumberElement extends HTMLElement {
         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;
-      }
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "width",
+        dimension: width,
+        fillValue: "var(--width-stretch)",
+      });
 
-      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;
-      }
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "height",
+        dimension: height,
+        fillValue: "100%",
+      });
 
       if (this.hasAttribute(addSizePrefix("hide"))) {
-        this._styles[size].display = "none !important";
+        this._styles[size].display = "none";
       }
 
       if (this.hasAttribute(addSizePrefix("show"))) {
-        this._styles[size].display = "block !important";
+        this._styles[size].display = "block";
       }
     });
 
@@ -241,33 +249,68 @@ class RettangoliInputNumberElement extends HTMLElement {
     }
   }
 
-  _updateInputAttributes() {
-    const type = this.getAttribute("type") || "number";
-    const step = this.getAttribute("step");
-    const min = this.getAttribute("min");
-    const max = this.getAttribute("max");
-    const isDisabled = this.hasAttribute('disabled');
+  _setOrRemoveInputAttribute(name, value) {
+    if (value === null || value === undefined || value === "null") {
+      this._inputElement.removeAttribute(name);
+      return;
+    }
+    this._inputElement.setAttribute(name, value);
+  }
 
-    this._inputElement.setAttribute("type", type);
+  _clampValueToBounds(value) {
+    let nextValue = value;
 
-    if (step !== null) {
-      this._inputElement.setAttribute("step", step);
-    } else {
-      this._inputElement.removeAttribute("step");
+    const minAttr = this.getAttribute("min");
+    if (minAttr !== null) {
+      const minValue = parseFloat(minAttr);
+      if (!isNaN(minValue)) {
+        nextValue = Math.max(nextValue, minValue);
+      }
     }
 
-    if (min !== null) {
-      this._inputElement.setAttribute("min", min);
-    } else {
-      this._inputElement.removeAttribute("min");
+    const maxAttr = this.getAttribute("max");
+    if (maxAttr !== null) {
+      const maxValue = parseFloat(maxAttr);
+      if (!isNaN(maxValue)) {
+        nextValue = Math.min(nextValue, maxValue);
+      }
     }
 
-    if (max !== null) {
-      this._inputElement.setAttribute("max", max);
-    } else {
-      this._inputElement.removeAttribute("max");
+    return nextValue;
+  }
+
+  _syncValueAttribute() {
+    const value = this.getAttribute("value");
+    if (value === null || value === undefined || value === "") {
+      this._inputElement.value = "";
+      return;
+    }
+
+    const numericValue = parseFloat(value);
+    if (isNaN(numericValue)) {
+      this._inputElement.value = "";
+      return;
     }
 
+    const clampedValue = this._clampValueToBounds(numericValue);
+    this._inputElement.value = clampedValue.toString();
+  }
+
+  _syncPlaceholderAttribute() {
+    this._setOrRemoveInputAttribute("placeholder", this.getAttribute("placeholder"));
+  }
+
+  _updateInputAttributes() {
+    const step = this.getAttribute("step");
+    const min = this.getAttribute("min");
+    const max = this.getAttribute("max");
+    const isDisabled = this.hasAttribute('disabled');
+
+    this._inputElement.setAttribute("type", "number");
+    this._setOrRemoveInputAttribute("step", step);
+    this._setOrRemoveInputAttribute("min", min);
+    this._setOrRemoveInputAttribute("max", max);
+
     if (isDisabled) {
       this._inputElement.setAttribute("disabled", "");
     } else {
@@ -277,6 +320,9 @@ class RettangoliInputNumberElement extends HTMLElement {
 
   connectedCallback() {
     this._updateInputAttributes();
+    this._syncValueAttribute();
+    this._syncPlaceholderAttribute();
+    this.updateStyles();
   }
 }
 
@@ -285,4 +331,4 @@ export default ({ render, html }) => {
   // Note: render and html parameters are accepted but not used
   // This maintains backward compatibility with existing code
   return RettangoliInputNumberElement;
-};
+};