@rettangoli/ui 1.0.0-rc13 → 1.0.0-rc15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.0-rc13",
+  "version": "1.0.0-rc15",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -27,14 +27,17 @@
   },
   "license": "MIT",
   "scripts": {
-    "check:contracts": "rtgl fe check",
+    "test": "vitest run --reporter=verbose",
+    "test:puty": "vitest run puty.spec.js --reporter=verbose",
+    "check:contracts": "rtgl check --dir src/components",
+    "check:contracts:yahtml": "rtgl check --dir src/components",
     "copy:css": "node copy-css.js",
     "build:dev": "rtgl fe build -d && bun run esbuild-dev.js && npm run copy:css",
     "build": "rtgl fe build && bun run esbuild.js && bun run esbuild-dev.js && npm run copy:css && npm run verify:vt-bundle",
     "verify:vt-bundle": "rg -q 'customElements\\.define\\(\"rtgl-button\"' vt/static/public/main.js",
     "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-rc13\"; docker pull \"$IMAGE\" >/dev/null 2>&1 || IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc12\"; 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.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:report": "bun run vt:docker && rtgl vt report",
     "vt:accept": "rtgl vt accept",
     "serve": "bunx serve .rettangoli/vt/_site"
@@ -44,7 +47,9 @@
     "looks-same": "^9.0.1",
     "pixelmatch": "^6.0.0",
     "playwright": "1.57.0",
-    "pngjs": "^7.0.0"
+    "pngjs": "^7.0.0",
+    "puty": "^0.1.1",
+    "vitest": "^4.0.15"
   },
   "keywords": [
     "ui",
@@ -58,7 +63,7 @@
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@rettangoli/fe": "1.0.0-rc1",
+    "@rettangoli/fe": "workspace:*",
     "commander": "^13.1.0",
     "jempl": "1.0.0",
     "js-yaml": "^4.1.0",

package/src/common/dimensions.js

@@ -1,32 +1,101 @@
 const FLEX_GROW_DIMENSION_REGEX = /^([1-9]|1[0-2])fg$/;
+const FLEX_BASIS_DIMENSION_REGEX = /^([1-9]\d*)\/([1-9]\d*)fb$/;
 
 export const isFlexGrowDimension = (dimension) => {
   return typeof dimension === "string" && FLEX_GROW_DIMENSION_REGEX.test(dimension);
 };
 
+export const parseFlexBasisDimension = (dimension) => {
+  if (typeof dimension !== "string") {
+    return null;
+  }
+
+  const match = dimension.match(FLEX_BASIS_DIMENSION_REGEX);
+  if (!match) {
+    return null;
+  }
+
+  const numerator = Number(match[1]);
+  const denominator = Number(match[2]);
+  if (!Number.isInteger(numerator) || !Number.isInteger(denominator) || denominator <= 0 || numerator > denominator) {
+    return null;
+  }
+
+  return { numerator, denominator };
+};
+
+export const isFlexBasisDimension = (dimension) => {
+  return parseFlexBasisDimension(dimension) !== null;
+};
+
+function toFlexBasisCss({ numerator, denominator, gapVar }) {
+  if (numerator === denominator) {
+    return "100%";
+  }
+
+  if (numerator === 1) {
+    return `calc((100% - ((${denominator} - 1) * ${gapVar})) / ${denominator})`;
+  }
+
+  return `calc(((100% - ((${denominator} - 1) * ${gapVar})) * ${numerator}) / ${denominator})`;
+}
+
 export const applyDimensionToStyleBucket = ({
   styleBucket,
   axis,
   dimension,
   fillValue,
   allowFlexGrow = false,
+  flexMinDimension = "0",
   lockBounds = true,
 }) => {
+  const resetWidthFlexBasisState = () => {
+    if (!allowFlexGrow || axis !== "width") {
+      return;
+    }
+    styleBucket["flex-grow"] = "0";
+    styleBucket["flex-shrink"] = "1";
+    styleBucket["flex-basis"] = "auto";
+  };
+
+  const clearAxisBounds = () => {
+    styleBucket[`min-${axis}`] = "unset";
+    styleBucket[`max-${axis}`] = "unset";
+  };
+
   if (dimension === undefined) {
     return;
   }
 
   if (dimension === "f") {
+    resetWidthFlexBasisState();
     styleBucket[axis] = fillValue;
+    clearAxisBounds();
     return;
   }
 
   if (allowFlexGrow && isFlexGrowDimension(dimension)) {
     styleBucket["flex-grow"] = dimension.slice(0, -2);
     styleBucket["flex-basis"] = "0%";
+    styleBucket[`min-${axis}`] = flexMinDimension;
+    styleBucket[`max-${axis}`] = "unset";
+    return;
+  }
+
+  const flexBasis = allowFlexGrow ? parseFlexBasisDimension(dimension) : null;
+  if (flexBasis) {
+    styleBucket["flex-grow"] = "0";
+    styleBucket["flex-shrink"] = "0";
+    styleBucket["flex-basis"] = toFlexBasisCss({
+      ...flexBasis,
+      gapVar: "var(--rtgl-flex-gap, 0px)",
+    });
+    styleBucket[`min-${axis}`] = flexMinDimension;
+    styleBucket[`max-${axis}`] = "unset";
     return;
   }
 
+  resetWidthFlexBasisState();
   styleBucket[axis] = dimension;
   if (lockBounds) {
     styleBucket[`min-${axis}`] = dimension;
@@ -52,14 +121,29 @@ export const applyInlineWidthDimension = ({
   if (allowFlexGrow && isFlexGrowDimension(width)) {
     style.width = "";
     style.flexGrow = width.slice(0, -2);
+    style.flexShrink = "";
     style.flexBasis = "0%";
     style.minWidth = flexMinWidth;
     return;
   }
 
+  const inlineFlexBasis = allowFlexGrow ? parseFlexBasisDimension(width) : null;
+  if (inlineFlexBasis) {
+    style.width = "";
+    style.flexGrow = "0";
+    style.flexShrink = "0";
+    style.flexBasis = toFlexBasisCss({
+      ...inlineFlexBasis,
+      gapVar: "var(--rtgl-flex-gap, 0px)",
+    });
+    style.minWidth = flexMinWidth;
+    return;
+  }
+
   if (width != null) {
     style.width = width;
     style.flexGrow = "";
+    style.flexShrink = "";
     style.flexBasis = "";
     style.minWidth = "";
     return;
@@ -67,6 +151,7 @@ export const applyInlineWidthDimension = ({
 
   style.width = "";
   style.flexGrow = "";
+  style.flexShrink = "";
   style.flexBasis = "";
   style.minWidth = "";
 };

package/src/common/responsive.js

@@ -6,3 +6,75 @@ export const createResponsiveStyleBuckets = () => {
     return acc;
   }, {});
 };
+
+const responsiveBreakpointsSmallToLarge = ["sm", "md", "lg", "xl"];
+
+const getResponsiveAttributeName = ({ size, attr }) => {
+  return size === "default" ? attr : `${size}-${attr}`;
+};
+
+export const getResponsiveFallbackSizes = ({
+  size,
+  includeDefault = true,
+}) => {
+  if (size === "default") {
+    return ["default"];
+  }
+
+  const sizeIndex = responsiveBreakpointsSmallToLarge.indexOf(size);
+  if (sizeIndex === -1) {
+    return includeDefault ? ["default"] : [];
+  }
+
+  const fallbackSizes = responsiveBreakpointsSmallToLarge.slice(sizeIndex);
+  if (includeDefault) {
+    fallbackSizes.push("default");
+  }
+
+  return fallbackSizes;
+};
+
+export const getResponsiveAttribute = ({
+  element,
+  size,
+  attr,
+  includeDefault = true,
+}) => {
+  const fallbackSizes = getResponsiveFallbackSizes({
+    size,
+    includeDefault,
+  });
+
+  for (const fallbackSize of fallbackSizes) {
+    const attrName = getResponsiveAttributeName({
+      size: fallbackSize,
+      attr,
+    });
+    const value = element.getAttribute(attrName);
+    if (value !== null) {
+      return value;
+    }
+  }
+
+  return null;
+};
+
+export const hasResponsiveAttribute = ({
+  element,
+  size,
+  attr,
+  includeDefault = true,
+}) => {
+  const fallbackSizes = getResponsiveFallbackSizes({
+    size,
+    includeDefault,
+  });
+
+  return fallbackSizes.some((fallbackSize) => {
+    const attrName = getResponsiveAttributeName({
+      size: fallbackSize,
+      attr,
+    });
+    return element.hasAttribute(attrName);
+  });
+};

package/src/common.js

@@ -24,9 +24,9 @@ const styleMap = {
   p: "padding",
   ph: "padding-left padding-right",
   pv: "padding-top padding-bottom",
-  g: "gap",
-  gv: "row-gap",
-  gh: "column-gap",
+  g: "gap --rtgl-flex-gap",
+  gv: "row-gap --rtgl-flex-gap",
+  gh: "column-gap --rtgl-flex-gap",
   bw: "border-width",
   bwt: "border-top-width",
   bwr: "border-right-width",
@@ -152,7 +152,7 @@ const endsWithFlexGrowUnit = (inputStr) => {
 };
 
 const dimensionWithUnit = (dimension) => {
-  if (dimension === undefined) {
+  if (dimension === undefined || dimension === null) {
     return;
   }
 
@@ -253,6 +253,8 @@ export {
 export {
   responsiveStyleSizes,
   createResponsiveStyleBuckets,
+  getResponsiveAttribute,
+  hasResponsiveAttribute,
 } from "./common/responsive.js";
 
 export {

package/src/components/dropdownMenu/dropdownMenu.schema.yaml

@@ -30,7 +30,7 @@ propsSchema:
           testId:
             type: string
     open:
-      type: string
+      type: boolean
     x:
       type: string
     'y':