@rettangoli/ui 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "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.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:docker": "bun run build:dev && bash -lc 'IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.1.0\"; 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"
@@ -62,7 +62,7 @@
   },
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
-    "@rettangoli/fe": "1.1.0",
+    "@rettangoli/fe": "1.1.1",
     "jempl": "1.0.1"
   }
 }

package/src/components/pageOutline/pageOutline.handlers.js

@@ -1,11 +1,32 @@
+const getHeadingElements = (contentContainer) => {
+  const headings = contentContainer.querySelectorAll(
+    "h1[id], h2[id], h3[id], h4[id], rtgl-text[id]"
+  );
+  return Array.from(headings);
+};
+
+const buildItems = (headingElements) => {
+  return headingElements.map((heading) => {
+    let level = 1;
+    const tagName = heading.tagName.toLowerCase();
 
+    if (tagName === "h1") level = 1;
+    else if (tagName === "h2") level = 2;
+    else if (tagName === "h3") level = 3;
+    else if (tagName === "h4") level = 4;
+    else if (tagName === "rtgl-text") {
+      level = parseInt(heading.getAttribute("data-level") || "1", 10);
+    }
+
+    return {
+      id: heading.id,
+      href: `#${heading.id}`,
+      title: heading.textContent,
+      level
+    };
+  });
+};
 
-/**
- * 
- * @param {*} headingElements 
- * @param {*} offsetTop 
- * @param {*} deps 
- */
 const updateToLatestCurrentId = (headingElements, offsetTop, deps) => {
   const { store, render } = deps;
 
@@ -45,45 +66,51 @@ const updateToLatestCurrentId = (headingElements, offsetTop, deps) => {
 
 const startListening = (contentContainer, scrollContainer, offsetTop, deps) => {
   const { store, render } = deps;
-  
-  // Extract headings
-  const headings = contentContainer.querySelectorAll("h1[id], h2[id], h3[id], h4[id], rtgl-text[id]");
-  const headingElements = Array.from(headings);
-  
-  const items = headingElements.map((heading) => {
-    let level = 1;
-    const tagName = heading.tagName.toLowerCase();
-    
-    if (tagName === 'h1') level = 1;
-    else if (tagName === 'h2') level = 2;
-    else if (tagName === 'h3') level = 3;
-    else if (tagName === 'h4') level = 4;
-    else if (tagName === 'rtgl-text') {
-      // For rtgl-text, check if it has a data-level attribute or default to 1
-      level = parseInt(heading.getAttribute('data-level') || '1', 10);
+  let rafId = null;
+
+  const syncOutline = () => {
+    rafId = null;
+    const headingElements = getHeadingElements(contentContainer);
+    store.setItems({ items: buildItems(headingElements) });
+    updateToLatestCurrentId(headingElements, offsetTop, deps);
+    render();
+  };
+
+  const scheduleSyncOutline = () => {
+    if (rafId !== null) {
+      return;
     }
-    
-    return {
-      id: heading.id,
-      href: `#${heading.id}`,
-      title: heading.textContent,
-      level: level
-    };
-  });
-  
-  store.setItems({ items });
-  updateToLatestCurrentId(headingElements, offsetTop, deps);
-  render();
+    rafId = requestAnimationFrame(syncOutline);
+  };
 
-  const boundCheckCurrentHeading = updateToLatestCurrentId.bind(this, headingElements, offsetTop, deps);
-  
-  // Add scroll listener to the scroll container
-  scrollContainer.addEventListener("scroll", boundCheckCurrentHeading, {
+  const handleScroll = () => {
+    updateToLatestCurrentId(getHeadingElements(contentContainer), offsetTop, deps);
+  };
+
+  scheduleSyncOutline();
+
+  scrollContainer.addEventListener("scroll", handleScroll, {
     passive: true,
   });
 
+  const observer = new MutationObserver(() => {
+    scheduleSyncOutline();
+  });
+
+  observer.observe(contentContainer, {
+    childList: true,
+    subtree: true,
+    characterData: true,
+    attributes: true,
+    attributeFilter: ["id", "data-level"]
+  });
+
   return () => {
-    scrollContainer.removeEventListener("scroll", boundCheckCurrentHeading);
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+    }
+    observer.disconnect();
+    scrollContainer.removeEventListener("scroll", handleScroll);
   }
 };
 

package/src/primitives/view.js

@@ -104,7 +104,8 @@ class RettangoliViewElement extends HTMLElement {
         "av",
         "wrap",
         "no-wrap",
-        "overflow"
+        "overflow",
+        "stretch"
       ]),
     ];
   }
@@ -300,6 +301,11 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["flex-wrap"] = "nowrap";
       }
 
+      // Handle stretch
+      if (this.hasAttribute(addSizePrefix("stretch"))) {
+        this._styles[size]["align-self"] = "stretch";
+      }
+
       // Handle scroll properties
       const scrollHorizontal = this.hasAttribute(addSizePrefix("sh"));
       const scrollVertical = this.hasAttribute(addSizePrefix("sv"));