@rettangoli/ui 1.0.10 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -37,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.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:docker": "bun run build:dev && bash -lc 'IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.10\"; docker pull \"$IMAGE\" >/dev/null 2>&1; 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"

package/src/common/carousel.js

@@ -0,0 +1,155 @@
+import { dimensionWithUnit } from "../common.js";
+import { parseFlexBasisDimension } from "./dimensions.js";
+
+const toCarouselFlexBasisCss = ({ 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 clampCarouselIndex = ({ index, maxIndex }) => {
+  if (!Number.isFinite(index)) {
+    return 0;
+  }
+
+  if (!Number.isFinite(maxIndex) || maxIndex < 0) {
+    return 0;
+  }
+
+  return Math.min(Math.max(Math.trunc(index), 0), maxIndex);
+};
+
+export const resolveCarouselBooleanAttribute = ({
+  value,
+  defaultValue = false,
+}) => {
+  if (value === undefined || value === null) {
+    return defaultValue;
+  }
+
+  const normalizedValue = `${value}`.trim().toLowerCase();
+  if (normalizedValue.length === 0) {
+    return true;
+  }
+
+  if (
+    normalizedValue === "false" ||
+    normalizedValue === "0" ||
+    normalizedValue === "no" ||
+    normalizedValue === "off" ||
+    normalizedValue === "none"
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+export const resolveCarouselSnapType = (snap) => {
+  if (snap === undefined || snap === null) {
+    return "x mandatory";
+  }
+
+  const normalizedSnap = `${snap}`.trim().toLowerCase();
+  if (
+    normalizedSnap === "" ||
+    normalizedSnap === "true" ||
+    normalizedSnap === "1" ||
+    normalizedSnap === "yes"
+  ) {
+    return "x mandatory";
+  }
+
+  if (
+    normalizedSnap === "false" ||
+    normalizedSnap === "0" ||
+    normalizedSnap === "no" ||
+    normalizedSnap === "off" ||
+    normalizedSnap === "none"
+  ) {
+    return "none";
+  }
+
+  return "x mandatory";
+};
+
+export const resolveCarouselScrollLeft = ({
+  slideLeft,
+  slideWidth,
+  viewportWidth,
+  scrollPaddingInlineStart = 0,
+  scrollPaddingInlineEnd = 0,
+  snapAlign = "center",
+  maxScrollLeft = Number.POSITIVE_INFINITY,
+}) => {
+  if (
+    !Number.isFinite(slideLeft) ||
+    !Number.isFinite(slideWidth) ||
+    !Number.isFinite(viewportWidth)
+  ) {
+    return 0;
+  }
+
+  const snapportStart = scrollPaddingInlineStart;
+  const snapportEnd = viewportWidth - scrollPaddingInlineEnd;
+  const snapportWidth = Math.max(snapportEnd - snapportStart, 0);
+
+  let targetScrollLeft;
+  if (snapAlign === "start") {
+    targetScrollLeft = slideLeft - snapportStart;
+  } else if (snapAlign === "end") {
+    targetScrollLeft = (slideLeft + slideWidth) - snapportEnd;
+  } else {
+    targetScrollLeft =
+      (slideLeft + (slideWidth / 2)) -
+      (snapportStart + (snapportWidth / 2));
+  }
+
+  const normalizedMaxScrollLeft = Number.isFinite(maxScrollLeft)
+    ? Math.max(maxScrollLeft, 0)
+    : Number.POSITIVE_INFINITY;
+
+  return Math.min(Math.max(targetScrollLeft, 0), normalizedMaxScrollLeft);
+};
+
+export const resolveCarouselViewportPaddingCss = ({
+  slideWidthCss,
+  snapAlign = "center",
+}) => {
+  const normalizedSnapAlign = `${snapAlign ?? ""}`.trim().toLowerCase();
+  if (normalizedSnapAlign !== "center") {
+    return "0px";
+  }
+
+  const normalizedSlideWidthCss =
+    slideWidthCss && `${slideWidthCss}`.trim().length > 0
+      ? `${slideWidthCss}`.trim()
+      : "100%";
+
+  return `max(calc((100% - (${normalizedSlideWidthCss})) / 2), 0px)`;
+};
+
+export const resolveCarouselSlideWidthCss = ({
+  slideWidth,
+  gapVar = "var(--rtgl-carousel-gap, 0px)",
+}) => {
+  if (slideWidth == null || `${slideWidth}`.trim() === "" || slideWidth === "f") {
+    return "100%";
+  }
+
+  const flexBasis = parseFlexBasisDimension(`${slideWidth}`.trim());
+  if (flexBasis) {
+    return toCarouselFlexBasisCss({
+      ...flexBasis,
+      gapVar,
+    });
+  }
+
+  return dimensionWithUnit(`${slideWidth}`.trim()) ?? "100%";
+};

package/src/entry-iife-layout.js

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

package/src/entry-iife-ui.js

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

package/src/index.js

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