@rettangoli/ui 1.0.5 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -19,7 +19,8 @@
   "module": "./src/index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/yuusoft-org/rettangoli.git"
+    "url": "https://github.com/yuusoft-org/rettangoli",
+    "directory": "packages/rettangoli-ui"
   },
   "author": {
     "name": "Luciano Hanyon Wu",
@@ -36,7 +37,7 @@
     "build": "rtgl fe build -o ./.generated/fe-entry.js && bun run esbuild.js && bun run esbuild-dev.js && npm run copy:css",
     "prepack": "npm run build",
     "vt:generate": "bun run build:dev && rtgl vt generate",
-    "vt:docker": "bun run build:dev && bash -lc 'IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27\"; docker pull \"$IMAGE\" >/dev/null 2>&1 || IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc26\"; docker run --rm --user $(id -u):$(id -g) -v \"$PWD:/app\" -w /app \"$IMAGE\" rtgl vt screenshot'",
+    "vt:docker": "bun run build:dev && bash -lc 'IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.5\"; docker pull \"$IMAGE\" >/dev/null 2>&1 || IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27\"; docker run --rm --user $(id -u):$(id -g) -v \"$PWD:/app\" -w /app \"$IMAGE\" rtgl vt screenshot'",
     "vt:report": "bun run vt:docker && rtgl vt report",
     "vt:accept": "rtgl vt accept",
     "serve": "bunx serve .rettangoli/vt/_site"
@@ -61,12 +62,7 @@
   },
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
-    "@rettangoli/fe": "1.0.3",
-    "commander": "^13.1.0",
-    "jempl": "1.0.0",
-    "js-yaml": "^4.1.0",
-    "liquidjs": "^10.21.0",
-    "snabbdom": "^3.6.2"
+    "@rettangoli/fe": "1.0.4",
+    "jempl": "1.0.1"
   }
 }

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/components/card/card.schema.yaml

@@ -0,0 +1,15 @@
+componentName: rtgl-card
+propsSchema:
+  type: object
+  properties:
+    head:
+      type: string
+    desc:
+      type: string
+    size:
+      type: string
+      enum: [sm, md, lg]
+events: []
+methods:
+  type: object
+  properties: {}

package/src/components/card/card.store.js

@@ -0,0 +1,87 @@
+const blacklistedProps = [
+  'id',
+  'class',
+  'style',
+  'slot',
+  'head',
+  'desc',
+  'size',
+  'd',
+  'ah',
+  'av',
+  'wrap',
+  'noWrap',
+  'g',
+  'gh',
+  'gv',
+  'p',
+  'pt',
+  'pr',
+  'pb',
+  'pl',
+  'pv',
+  'ph',
+  'bw',
+  'bwt',
+  'bwr',
+  'bwb',
+  'bwl',
+  'bc',
+  'br',
+  'shadow',
+  'bgc',
+  'href',
+  'newTab',
+  'rel',
+  'cur',
+  'sv',
+  'sh',
+  'overflow',
+];
+
+const sizePresets = {
+  sm: {
+    cardAttrString: 'p=md sm-p=sm g=md sm-g=sm',
+    headerAttrString: 'g=xs',
+    headingSize: 'lg',
+    subheadingSize: 'sm',
+  },
+  md: {
+    cardAttrString: 'p=lg md-p=md sm-p=md g=lg md-g=md sm-g=md',
+    headerAttrString: 'g=sm',
+    headingSize: 'h4',
+    subheadingSize: 'sm',
+  },
+  lg: {
+    cardAttrString: 'p=xl lg-p=lg md-p=md sm-p=md g=lg md-g=md sm-g=md',
+    headerAttrString: 'g=sm',
+    headingSize: 'h3',
+    subheadingSize: 'md',
+  },
+};
+
+const stringifyProps = (props = {}) => {
+  return Object.entries(props)
+    .filter(([key]) => !blacklistedProps.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(' ');
+};
+
+export const createInitialState = () => Object.freeze({});
+
+export const selectViewData = ({ props = {} }) => {
+  const size = sizePresets[props.size] ? props.size : 'md';
+  const preset = sizePresets[size];
+
+  return {
+    containerAttrString: stringifyProps(props),
+    cardAttrString: preset.cardAttrString,
+    headerAttrString: preset.headerAttrString,
+    headingSize: preset.headingSize,
+    subheadingSize: preset.subheadingSize,
+    head: props.head || '',
+    desc: props.desc || '',
+    hasHeader: !!(props.head || props.desc),
+    size,
+  };
+};

package/src/components/card/card.view.yaml

@@ -0,0 +1,18 @@
+styles:
+  :host:
+    display: block
+  slot:
+    display: block
+    min-width: 0
+  .rtgl-card-body:
+    min-width: 0
+template:
+  - 'rtgl-view class="rtgl-card" d=v w=f bgc=bg bw=xs bc=bo br=xl shadow=sm ${cardAttrString} ${containerAttrString}':
+      - $if hasHeader:
+          - 'rtgl-view class="rtgl-card-header" d=v w=f ${headerAttrString}':
+              - $if head:
+                  - rtgl-text class="rtgl-card-heading" s=${headingSize} w=f: ${head}
+              - $if desc:
+                  - rtgl-text class="rtgl-card-desc" s=${subheadingSize} c=mu-fg w=f: ${desc}
+      - div class=rtgl-card-body:
+          - slot: null

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",