@rettangoli/ui 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/common/aspectRatio.js

@@ -0,0 +1,22 @@
+const normalizeAspectRatioValue = (value) => {
+  return `${value}`.trim().replace(/\s*\/\s*/g, "/");
+};
+
+export const normalizeAspectRatio = (value) => {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+
+  const normalizedValue = normalizeAspectRatioValue(value);
+  if (normalizedValue.length === 0) {
+    return undefined;
+  }
+
+  if (typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports("aspect-ratio", normalizedValue)
+      ? normalizedValue
+      : undefined;
+  }
+
+  return normalizedValue;
+};

package/src/common.js

@@ -262,3 +262,5 @@ export {
   applyDimensionToStyleBucket,
   applyInlineWidthDimension,
 } from "./common/dimensions.js";
+
+export { normalizeAspectRatio } from "./common/aspectRatio.js";

package/src/entry-iife-layout.js

@@ -1,4 +1,5 @@
 import RettangoliButton from './primitives/button.js'
+import RettangoliGrid from './primitives/grid.js';
 import RettangoliView from './primitives/view.js';
 import RettangoliText from './primitives/text.js';
 import RettangoliImage from './primitives/image.js';
@@ -17,6 +18,7 @@ import RettangoliPopover from './primitives/popover.js';
 
 
 customElements.define("rtgl-button", RettangoliButton({}));
+customElements.define("rtgl-grid", RettangoliGrid({}));
 customElements.define("rtgl-view", RettangoliView({}));
 customElements.define("rtgl-text", RettangoliText({}));
 customElements.define("rtgl-image", RettangoliImage({}));

package/src/entry-iife-ui.js

@@ -1,4 +1,5 @@
 import RettangoliButton from './primitives/button.js'
+import RettangoliGrid from './primitives/grid.js';
 import RettangoliView from './primitives/view.js';
 import RettangoliText from './primitives/text.js';
 import RettangoliImage from './primitives/image.js';
@@ -17,6 +18,7 @@ import RettangoliDialog from './primitives/dialog.js';
 import RettangoliPopover from './primitives/popover.js';
 
 customElements.define("rtgl-button", RettangoliButton({}));
+customElements.define("rtgl-grid", RettangoliGrid({}));
 customElements.define("rtgl-view", RettangoliView({}));
 customElements.define("rtgl-text", RettangoliText({}));
 customElements.define("rtgl-image", RettangoliImage({}));

package/src/index.js

@@ -1,4 +1,5 @@
 import RettangoliButton from './primitives/button.js'
+import RettangoliGrid from './primitives/grid.js';
 import RettangoliView from './primitives/view.js';
 import RettangoliText from './primitives/text.js';
 import RettangoliImage from './primitives/image.js';
@@ -19,6 +20,7 @@ import createGlobalUI from './deps/createGlobalUI.js';
 
 export {
     RettangoliButton,
+    RettangoliGrid,
     RettangoliView,
     RettangoliText,
     RettangoliImage,

package/src/primitives/grid.js

@@ -0,0 +1,220 @@
+import {
+  css,
+  dimensionWithUnit,
+  convertObjectToCssString,
+  styleMapKeys,
+  permutateBreakpoints,
+  overlayLinkStyles,
+  syncLinkOverlay,
+  createResponsiveStyleBuckets,
+  responsiveStyleSizes,
+  applyDimensionToStyleBucket,
+} from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import scrollStyle from "../styles/scrollStyles.js";
+import stylesGenerator from "../styles/viewStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+import anchorStyles from "../styles/anchorStyles.js";
+
+const resolveGridTemplateColumns = (cols) => {
+  if (cols == null) {
+    return null;
+  }
+
+  const normalizedCols = cols.trim();
+  if (normalizedCols === "") {
+    return null;
+  }
+
+  if (/^[1-9]\d*$/.test(normalizedCols)) {
+    return `repeat(${normalizedCols}, minmax(0, 1fr))`;
+  }
+
+  return normalizedCols;
+};
+
+class RettangoliGridElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliGridElement.styleSheet) {
+      RettangoliGridElement.styleSheet = new CSSStyleSheet();
+      RettangoliGridElement.styleSheet.replaceSync(css`
+        slot {
+          display: contents;
+        }
+        :host {
+          display: grid;
+          grid-template-columns: repeat(1, minmax(0, 1fr));
+          align-self: auto;
+          border-style: solid;
+          border-width: 0;
+          box-sizing: border-box;
+          border-color: var(--border);
+        }
+
+        ${scrollStyle}
+        ${marginStyles}
+        ${cursorStyles}
+        ${stylesGenerator}
+        ${anchorStyles}
+        ${overlayLinkStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliGridElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.adoptedStyleSheets = [RettangoliGridElement.styleSheet];
+
+    this._styleElement = document.createElement("style");
+    this._slotElement = document.createElement("slot");
+    this._linkElement = null;
+
+    this.shadow.appendChild(this._styleElement);
+    this._updateDOM();
+  }
+
+  static get observedAttributes() {
+    return [
+      "href",
+      "new-tab",
+      "rel",
+      ...permutateBreakpoints([
+        ...styleMapKeys,
+        "cols",
+        "op",
+        "wh",
+        "w",
+        "h",
+        "hide",
+        "show",
+        "sh",
+        "sv",
+        "z",
+        "overflow",
+      ]),
+    ];
+  }
+
+  _styles = createResponsiveStyleBuckets();
+
+  _lastStyleString = "";
+
+  _updateDOM() {
+    const href = this.getAttribute("href");
+    const newTab = this.hasAttribute("new-tab");
+    const rel = this.getAttribute("rel");
+
+    this._linkElement = syncLinkOverlay({
+      shadowRoot: this.shadow,
+      slotElement: this._slotElement,
+      linkElement: this._linkElement,
+      href,
+      newTab,
+      rel,
+    });
+  }
+
+  connectedCallback() {
+    this.updateStyles();
+  }
+
+  updateStyles() {
+    this._styles = createResponsiveStyleBuckets();
+
+    responsiveStyleSizes.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 cols = resolveGridTemplateColumns(
+        this.getAttribute(addSizePrefix("cols")),
+      );
+      const opacity = this.getAttribute(addSizePrefix("op"));
+      const zIndex = this.getAttribute(addSizePrefix("z"));
+
+      if (cols !== null) {
+        this._styles[size]["grid-template-columns"] = cols;
+      }
+
+      if (zIndex !== null) {
+        this._styles[size]["z-index"] = zIndex;
+      }
+
+      if (opacity !== null) {
+        this._styles[size].opacity = opacity;
+      }
+
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "width",
+        dimension: width,
+        fillValue: "var(--width-stretch)",
+        allowFlexGrow: true,
+      });
+
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "height",
+        dimension: height,
+        fillValue: "100%",
+        allowFlexGrow: true,
+      });
+
+      if (this.hasAttribute(addSizePrefix("hide"))) {
+        this._styles[size].display = "none";
+      }
+
+      if (this.hasAttribute(addSizePrefix("show"))) {
+        this._styles[size].display = "grid";
+      }
+
+      const scrollHorizontal = this.hasAttribute(addSizePrefix("sh"));
+      const scrollVertical = this.hasAttribute(addSizePrefix("sv"));
+      const overflow = this.getAttribute(addSizePrefix("overflow"));
+
+      if (scrollHorizontal && scrollVertical) {
+        this._styles[size].overflow = "scroll";
+      } else if (scrollHorizontal) {
+        this._styles[size]["overflow-x"] = "scroll";
+      } else if (scrollVertical) {
+        this._styles[size]["overflow-y"] = "scroll";
+      }
+
+      if (overflow === "hidden") {
+        this._styles[size].overflow = "hidden";
+      }
+    });
+
+    const newStyleString = convertObjectToCssString(this._styles);
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "href" || name === "new-tab" || name === "rel") {
+      this._updateDOM();
+      return;
+    }
+
+    if (oldValue !== newValue) {
+      this.updateStyles();
+    }
+  }
+}
+
+export default ({ render, html }) => {
+  return RettangoliGridElement;
+};

package/src/primitives/image.js

@@ -8,6 +8,7 @@ import {
   createResponsiveStyleBuckets,
   responsiveStyleSizes,
   applyDimensionToStyleBucket,
+  normalizeAspectRatio,
 } from "../common.js";
 import cursorStyles from "../styles/cursorStyles.js";
 import anchorStyles from "../styles/anchorStyles.js";
@@ -90,6 +91,7 @@ class RettangoliImageElement extends HTMLElement {
       "wh",
       "w",
       "h",
+      "ar",
       "hide",
       "show",
       "op",
@@ -159,6 +161,9 @@ class RettangoliImageElement extends HTMLElement {
       );
       const opacity = this.getAttribute(addSizePrefix("op"));
       const zIndex = this.getAttribute(addSizePrefix("z"));
+      const aspectRatio = normalizeAspectRatio(
+        this.getAttribute(addSizePrefix("ar")),
+      );
 
       if (zIndex !== null) {
         this._styles[size]["z-index"] = zIndex;
@@ -168,6 +173,10 @@ class RettangoliImageElement extends HTMLElement {
         this._styles[size].opacity = opacity;
       }
 
+      if (aspectRatio !== undefined) {
+        this._styles[size]["aspect-ratio"] = aspectRatio;
+      }
+
       applyDimensionToStyleBucket({
         styleBucket: this._styles[size],
         axis: "width",

package/src/primitives/view.js

@@ -10,6 +10,7 @@ import {
   responsiveStyleSizes,
   applyDimensionToStyleBucket,
   getResponsiveAttribute,
+  normalizeAspectRatio,
 } from "../common.js";
 import flexDirectionStyles from "../styles/flexDirectionStyles.js";
 import cursorStyles from "../styles/cursorStyles.js";
@@ -78,6 +79,7 @@ class RettangoliViewElement extends HTMLElement {
         "wh",
         "w",
         "h",
+        "ar",
         "hide",
         "show",
         "sh",
@@ -136,6 +138,9 @@ class RettangoliViewElement extends HTMLElement {
       );
       const opacity = this.getAttribute(addSizePrefix("op"));
       const zIndex = this.getAttribute(addSizePrefix("z"));
+      const aspectRatio = normalizeAspectRatio(
+        this.getAttribute(addSizePrefix("ar")),
+      );
 
       if (zIndex !== null) {
         this._styles[size]["z-index"] = zIndex;
@@ -145,6 +150,10 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size].opacity = opacity;
       }
 
+      if (aspectRatio !== undefined) {
+        this._styles[size]["aspect-ratio"] = aspectRatio;
+      }
+
       applyDimensionToStyleBucket({
         styleBucket: this._styles[size],
         axis: "width",