@rettangoli/ui 0.1.31 → 1.0.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.31",
+  "version": "1.0.0-rc1",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -23,10 +23,11 @@
   },
   "license": "MIT",
   "scripts": {
+    "check:contracts": "rtgl fe check",
     "build:dev": "rtgl fe build -d && bun run esbuild-dev.js",
     "build": "rtgl fe build && bun run esbuild.js",
-    "vt:generate": "bun run build:dev && rtgl vt generate",
-    "vt:docker": "bun run build:dev && docker run --rm --user $(id -u):$(id -g) -v \"$PWD:/app\" -w /app han4wluc/rtgl:playwright-v1.57.0-rtgl-v0.0.36 rtgl vt generate",
+    "vt:generate": "bun run build:dev && rtgl vt generate --skip-screenshots",
+    "vt:docker": "bun run build:dev && docker run --rm --user $(id -u):$(id -g) -v \"$PWD:/app\" -w /app han4wluc/rtgl:playwright-v1.57.0-rtgl-v0.0.38 rtgl vt generate",
     "vt:report": "bun run vt:docker && rtgl vt report",
     "vt:accept": "rtgl vt accept",
     "serve": "bunx serve .rettangoli/vt/_site"
@@ -50,7 +51,7 @@
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@rettangoli/fe": "0.0.14",
+    "@rettangoli/fe": "1.0.0-rc1",
     "commander": "^13.1.0",
     "jempl": "1.0.0",
     "js-yaml": "^4.1.0",

package/src/common/dimensions.js

@@ -0,0 +1,72 @@
+const FLEX_GROW_DIMENSION_REGEX = /^([1-9]|1[0-2])fg$/;
+
+export const isFlexGrowDimension = (dimension) => {
+  return typeof dimension === "string" && FLEX_GROW_DIMENSION_REGEX.test(dimension);
+};
+
+export const applyDimensionToStyleBucket = ({
+  styleBucket,
+  axis,
+  dimension,
+  fillValue,
+  allowFlexGrow = false,
+  lockBounds = true,
+}) => {
+  if (dimension === undefined) {
+    return;
+  }
+
+  if (dimension === "f") {
+    styleBucket[axis] = fillValue;
+    return;
+  }
+
+  if (allowFlexGrow && isFlexGrowDimension(dimension)) {
+    styleBucket["flex-grow"] = dimension.slice(0, -2);
+    styleBucket["flex-basis"] = "0%";
+    return;
+  }
+
+  styleBucket[axis] = dimension;
+  if (lockBounds) {
+    styleBucket[`min-${axis}`] = dimension;
+    styleBucket[`max-${axis}`] = dimension;
+  }
+};
+
+export const applyInlineWidthDimension = ({
+  style,
+  width,
+  fillValue = "var(--width-stretch)",
+  allowFlexGrow = true,
+  flexMinWidth = "0",
+}) => {
+  if (width === "f") {
+    style.width = fillValue;
+    style.flexGrow = "";
+    style.flexBasis = "";
+    style.minWidth = "";
+    return;
+  }
+
+  if (allowFlexGrow && isFlexGrowDimension(width)) {
+    style.width = "";
+    style.flexGrow = width.slice(0, -2);
+    style.flexBasis = "0%";
+    style.minWidth = flexMinWidth;
+    return;
+  }
+
+  if (width != null) {
+    style.width = width;
+    style.flexGrow = "";
+    style.flexBasis = "";
+    style.minWidth = "";
+    return;
+  }
+
+  style.width = "";
+  style.flexGrow = "";
+  style.flexBasis = "";
+  style.minWidth = "";
+};

package/src/common/link.js

@@ -0,0 +1,111 @@
+export const overlayLinkStyles = `
+  :host([href]) {
+    cursor: pointer;
+    position: relative;
+  }
+
+  :host([href]) a {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+`;
+
+export const applyLinkAttributes = ({ linkElement, href, newTab, rel }) => {
+  linkElement.href = href;
+
+  if (newTab) {
+    linkElement.target = "_blank";
+  } else {
+    linkElement.removeAttribute("target");
+  }
+
+  if (rel != null) {
+    linkElement.rel = rel;
+  } else if (newTab) {
+    linkElement.rel = "noopener noreferrer";
+  } else {
+    linkElement.removeAttribute("rel");
+  }
+};
+
+export const syncLinkOverlay = ({
+  shadowRoot,
+  slotElement,
+  linkElement,
+  href,
+  newTab,
+  rel,
+}) => {
+  if (slotElement.parentNode !== shadowRoot) {
+    shadowRoot.appendChild(slotElement);
+  }
+
+  if (!href) {
+    if (linkElement && linkElement.parentNode === shadowRoot) {
+      shadowRoot.removeChild(linkElement);
+    }
+    return null;
+  }
+
+  const nextLinkElement = linkElement || document.createElement("a");
+  applyLinkAttributes({
+    linkElement: nextLinkElement,
+    href,
+    newTab,
+    rel,
+  });
+
+  if (nextLinkElement.parentNode !== shadowRoot) {
+    shadowRoot.appendChild(nextLinkElement);
+  }
+
+  return nextLinkElement;
+};
+
+export const syncLinkWrapper = ({
+  shadowRoot,
+  childElement,
+  linkElement,
+  href,
+  newTab,
+  rel,
+}) => {
+  if (!href) {
+    if (linkElement) {
+      if (childElement.parentNode === linkElement) {
+        shadowRoot.appendChild(childElement);
+      }
+      if (linkElement.parentNode === shadowRoot) {
+        shadowRoot.removeChild(linkElement);
+      }
+      return null;
+    }
+
+    if (childElement.parentNode !== shadowRoot) {
+      shadowRoot.appendChild(childElement);
+    }
+    return null;
+  }
+
+  const nextLinkElement = linkElement || document.createElement("a");
+  applyLinkAttributes({
+    linkElement: nextLinkElement,
+    href,
+    newTab,
+    rel,
+  });
+
+  if (childElement.parentNode !== nextLinkElement) {
+    nextLinkElement.appendChild(childElement);
+  }
+
+  if (nextLinkElement.parentNode !== shadowRoot) {
+    shadowRoot.appendChild(nextLinkElement);
+  }
+
+  return nextLinkElement;
+};

package/src/common/responsive.js

@@ -0,0 +1,8 @@
+export const responsiveStyleSizes = ["default", "sm", "md", "lg", "xl"];
+
+export const createResponsiveStyleBuckets = () => {
+  return responsiveStyleSizes.reduce((acc, size) => {
+    acc[size] = {};
+    return acc;
+  }, {});
+};

package/src/common.js

@@ -7,7 +7,7 @@ function css(strings, ...values) {
   return str;
 }
 
-const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+const breakpoints = ["sm", "md", "lg", "xl"];
 
 const styleMap = {
   mt: "margin-top",
@@ -36,8 +36,6 @@ const styleMap = {
   br: "border-radius",
   pos: "position",
   shadow: "box-shadow",
-  ta: "text-align",
-  c: "color",
   cur: "cursor",
 };
 
@@ -59,7 +57,7 @@ const mediaQueries = {
   sm: "@media only screen and (max-width: 640px)",
 };
 
-const generateCSS = (styles, descendants = {}) => {
+const generateCSS = (styles, descendants = {}, targetSelector = null) => {
   let css = "";
 
   for (const [size, mediaQuery] of Object.entries(mediaQueries)) {
@@ -77,6 +75,16 @@ const generateCSS = (styles, descendants = {}) => {
         const hoverAttributeWithBreakpoint =
           size === "default" ? `h-${attr}` : `${size}-h-${attr}`;
 
+        // Build selector: either :host([...]) or :host([...]) targetSelector
+        const buildSelector = (attrStr) => {
+          const base = `:host([${attrStr}="${value}"])`;
+          if (targetSelector) {
+            // Generate: :host([...]) target1, :host([...]) target2
+            return targetSelector.split(',').map(t => `${base} ${t.trim()}`).join(', ');
+          }
+          return base + dscendant;
+        };
+
         if (cssProperties) {
           // Handle multiple properties if mapped in styleMap
           const properties = cssProperties.split(" ");
@@ -85,20 +93,20 @@ const generateCSS = (styles, descendants = {}) => {
             .join(" ");
 
           css += `
-            :host([${attributeWithBreakpoint}="${value}"])${dscendant}{
+            ${buildSelector(attributeWithBreakpoint)}{
               ${propertyRules}
             }
-            :host([${hoverAttributeWithBreakpoint}="${value}"]:hover)${dscendant}{
+            ${buildSelector(hoverAttributeWithBreakpoint)}:hover{
               ${propertyRules}
             }
           `;
         } else {
           // Attribute is not mapped, handle directly
           css += `
-            :host([${attributeWithBreakpoint}="${value}"])${dscendant}{
+            ${buildSelector(attributeWithBreakpoint)}{
               ${rule}
             }
-            :host([${hoverAttributeWithBreakpoint}="${value}"]:hover)${dscendant}{
+            ${buildSelector(hoverAttributeWithBreakpoint)}:hover{
               ${rule}
             }
           `;
@@ -129,11 +137,20 @@ const endsWithPercentage = (inputStr) => {
   return /%$/.test(inputStr);
 };
 
+const endsWithFlexGrowUnit = (inputStr) => {
+  // Matches integers 1-12 followed by "fg"
+  return /^([1-9]|1[0-2])fg$/.test(inputStr);
+};
+
 const dimensionWithUnit = (dimension) => {
   if (dimension === undefined) {
     return;
   }
 
+  if (endsWithFlexGrowUnit(dimension)) {
+    return dimension;
+  }
+
   if (endsWithPercentage(dimension)) {
     return dimension;
   }
@@ -216,3 +233,21 @@ export {
   convertObjectToCssString,
   mediaQueries,
 };
+
+export {
+  overlayLinkStyles,
+  applyLinkAttributes,
+  syncLinkOverlay,
+  syncLinkWrapper,
+} from "./common/link.js";
+
+export {
+  responsiveStyleSizes,
+  createResponsiveStyleBuckets,
+} from "./common/responsive.js";
+
+export {
+  isFlexGrowDimension,
+  applyDimensionToStyleBucket,
+  applyInlineWidthDimension,
+} from "./common/dimensions.js";

package/src/components/accordionItem/accordionItem.handlers.js

@@ -1,5 +1,5 @@
 export const handleClickHeader = (deps, payload) => {
   const { store, render } = deps;
-  store.toggleOpen();
+  store.toggleOpen({});
   render();
 };

package/src/components/accordionItem/accordionItem.schema.yaml

@@ -0,0 +1,14 @@
+componentName: rtgl-accordion-item
+propsSchema:
+  type: object
+  properties:
+    label:
+      type: string
+    content:
+      type: string
+    w:
+      type: string
+events: []
+methods:
+  type: object
+  properties: {}

package/src/components/accordionItem/accordionItem.store.js

@@ -2,25 +2,25 @@ export const createInitialState = () => Object.freeze({
   open: false
 });
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'title', 'content'];
+const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'label', 'content'];
 
-const stringifyAttrs = (attrs) => {
-  return Object.entries(attrs)
+const stringifyAttrs = (props = {}) => {
+  return Object.entries(props)
     .filter(([key]) => !blacklistedAttrs.includes(key))
     .map(([key, value]) => `${key}=${value}`)
     .join(' ');
 };
 
-export const selectViewData = ({ state, props, attrs }) => {
+export const selectViewData = ({ state, props }) => {
   return {
-    title: attrs['title'] || '',
-    content: attrs['content'] || '',
+    label: props.label || '',
+    content: props.content || '',
     openClass: state.open ? 'content-wrapper open' : 'content-wrapper',
     chevronIcon: state.open ? 'chevronUp' : 'chevronDown',
-    containerAttrString: stringifyAttrs(attrs)
+    containerAttrString: stringifyAttrs(props),
   };
 };
 
-export const toggleOpen = (state) => {
+export const toggleOpen = ({ state }) => {
   state.open = !state.open;
 };

package/src/components/accordionItem/accordionItem.view.yaml

@@ -1,55 +1,25 @@
-elementName: rtgl-accordion-item
-
-viewDataSchema:
-  type: object
-  properties:
-    title:
-      type: string
-    content:
-      type: string
-    openClass:
-      type: string
-    chevronIcon:
-      type: string
-    containerAttrString:
-      type: string
-
-attrsSchema:
-  type: object
-  properties:
-    title:
-      type: string
-    content:
-      type: string
-    w:
-      type: string
-
 refs:
   header:
     eventListeners:
       click:
         handler: handleClickHeader
-
 styles:
   .content-wrapper:
     display: grid
     grid-template-rows: 0fr
     transition: grid-template-rows 0.2s ease-out
-
   .content-wrapper.open:
     grid-template-rows: 1fr
-
   .content-inner:
     overflow: hidden
-
 template:
   - rtgl-view d=v ${containerAttrString}:
-      - rtgl-view#header d=h av=c w=f pv=md cur=p:
-          - rtgl-text: ${title}
-          - rtgl-view flex=1:
-          - rtgl-svg svg=${chevronIcon} wh=16 c=mu-fg:
+      - rtgl-view#header d=h av=c w=f pv=md cur=pointer:
+          - rtgl-text: ${label}
+          - rtgl-view w=1fg: null
+          - rtgl-svg svg=${chevronIcon} wh=16 c=mu-fg: null
       - div class="${openClass}":
           - div class=content-inner:
               - rtgl-view pb=md:
                   - rtgl-text c=mu-fg: ${content}
-                  - slot name=content:
+                  - slot name=content: null

package/src/components/breadcrumb/breadcrumb.handlers.js

@@ -1,10 +1,31 @@
 export const handleClickItem = (deps, payload) => {
-  const { dispatchEvent } = deps;
+  const { dispatchEvent, props } = deps;
   const event = payload._event;
-  const id = event.currentTarget.dataset.id;
+  const index = Number(event.currentTarget.dataset.index);
+  const item = Array.isArray(props.items) ? props.items[index] : undefined;
+
+  if (!item) {
+    return;
+  }
+
+  if (item.disabled || item.current) {
+    event.preventDefault();
+    return;
+  }
+
+  const hasHref = typeof item.href === 'string' && item.href.length > 0;
+  if (!hasHref) {
+    event.preventDefault();
+  }
+
   dispatchEvent(new CustomEvent('item-click', {
     detail: {
-      id
+      id: item.id,
+      path: item.path,
+      href: item.href,
+      item,
+      index,
+      trigger: event.type,
     }
   }));
 }

package/src/components/breadcrumb/breadcrumb.schema.yaml

@@ -0,0 +1,51 @@
+componentName: rtgl-breadcrumb
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+          href:
+            type: string
+          path:
+            type: string
+          current:
+            type: boolean
+          disabled:
+            type: boolean
+          click:
+            type: boolean
+          newTab:
+            type: boolean
+          rel:
+            type: string
+    sep:
+      type: string
+      default: breadcrumb-arrow
+    max:
+      type: number
+events:
+  item-click:
+    type: object
+    properties:
+      id:
+        type: string
+      path:
+        type: string
+      href:
+        type: string
+      item:
+        type: object
+      index:
+        type: number
+      trigger:
+        type: string
+methods:
+  type: object
+  properties: {}

package/src/components/breadcrumb/breadcrumb.store.js

@@ -1,22 +1,78 @@
 export const createInitialState = () => Object.freeze({});
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'items', 'sep', 'max', 'separator'];
 
-const stringifyAttrs = (attrs) => {
-  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
+const stringifyAttrs = (props = {}) => {
+  return Object.entries(props).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
 }
 
-export const selectViewData = ({ props, attrs }) => {
-  const containerAttrString = stringifyAttrs(attrs);
+const toNumber = (value) => {
+  if (value === undefined || value === null || value === '') {
+    return undefined;
+  }
 
-  const items = props.items || [];
-  const separator = props.separator || 'breadcrumb-arrow';
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? undefined : parsed;
+};
+
+const escapeAttrValue = (value) => `${value}`.replace(/"/g, '"');
+
+const collapseItems = (items, max) => {
+  if (!max || max < 3 || items.length <= max) {
+    return items;
+  }
+
+  const tailCount = max - 2;
+  return [
+    items[0],
+    { isEllipsis: true, label: '...' },
+    ...items.slice(-tailCount),
+  ];
+};
+
+const normalizeItems = (items) => {
+  return items.map((item, index) => {
+    const hasHref = typeof item.href === 'string' && item.href.length > 0;
+    const hasPath = item.path !== undefined && item.path !== null && `${item.path}` !== '';
+    const isCurrent = !!item.current;
+    const isDisabled = !!item.disabled;
+    const isInteractive = !isCurrent && !isDisabled && (hasHref || hasPath || !!item.click);
+    const relValue = item.rel || (item.newTab ? 'noopener noreferrer' : '');
+    const linkExtraAttrs = [
+      item.newTab ? 'target="_blank"' : '',
+      relValue ? `rel="${escapeAttrValue(relValue)}"` : '',
+    ].filter(Boolean).join(' ');
+
+    return {
+      ...item,
+      label: item.label || '',
+      index,
+      href: hasHref ? item.href : undefined,
+      path: hasPath ? item.path : undefined,
+      isCurrent,
+      isDisabled,
+      isInteractive,
+      linkExtraAttrs,
+      c: isCurrent ? 'fg' : 'mu-fg',
+    };
+  });
+};
+
+export const selectViewData = ({ props }) => {
+  const containerAttrString = stringifyAttrs(props);
+
+  const items = Array.isArray(props.items) ? props.items : [];
+  const max = toNumber(props.max);
+  const sep = props.sep || 'breadcrumb-arrow';
+
+  const normalizedItems = normalizeItems(items);
+  const collapsedItems = collapseItems(normalizedItems, max);
 
   // Add separators between items, but not after the last one
   const itemsWithSeparators = [];
-  items.forEach((item, index) => {
+  collapsedItems.forEach((item, index) => {
     itemsWithSeparators.push(item);
-    if (index < items.length - 1) {
+    if (index < collapsedItems.length - 1) {
       itemsWithSeparators.push({ isSeparator: true });
     }
   });
@@ -24,6 +80,6 @@ export const selectViewData = ({ props, attrs }) => {
   return {
     containerAttrString,
     items: itemsWithSeparators,
-    separator
+    sep
   };
 }