@rettangoli/ui 0.1.2-rc30 → 0.1.2-rc32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc30",
+  "version": "0.1.2-rc32",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -49,7 +49,7 @@
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@rettangoli/fe": "0.0.7-rc12",
+    "@rettangoli/fe": "0.0.7-rc14",
     "commander": "^13.1.0",
     "jempl": "0.1.4-rc1",
     "js-yaml": "^4.1.0",

package/src/common.js

@@ -159,14 +159,23 @@ const spacing = {
 
 function convertObjectToCssString(styleObject, selector = ':host') {
   let result = "";
-  for (const [size, mediaQuery] of Object.entries(mediaQueries)) {
+  // Process in correct order for max-width media queries: default first, then largest to smallest
+  const orderedSizes = ["default", "xl", "lg", "md", "sm"];
+  
+  for (const size of orderedSizes) {
+    const mediaQuery = mediaQueries[size];
+    if (!styleObject[size] || Object.keys(styleObject[size]).length === 0) {
+      continue;
+    }
+    
     if (size !== "default") {
       result += `${mediaQuery} {\n`;
     }
     let cssString = "";
     for (const [key, value] of Object.entries(styleObject[size])) {
       if (value !== undefined && value !== null) {
-        cssString += `${key}: ${value};\n`;
+        // Add !important to override imported styles
+        cssString += `${key}: ${value} !important;\n`;
       }
     }
     result += `${selector} {

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

@@ -3,9 +3,10 @@
 /**
  * 
  * @param {*} headingElements 
+ * @param {*} offsetTop 
  * @param {*} deps 
  */
-const updateToLatestCurrentId = (headingElements, deps) => {
+const updateToLatestCurrentId = (headingElements, offsetTop, deps) => {
   const { store, render } = deps;
 
   let currentHeadingId;
@@ -14,7 +15,9 @@ const updateToLatestCurrentId = (headingElements, deps) => {
   headingElements.forEach((heading) => {
     const rect = heading.getBoundingClientRect();
     
-    if (rect.top <= 20) {
+    // A heading is "current" if it's at or above the offset line
+    // We want the heading that's closest to the offset but still above it
+    if (rect.top <= offsetTop) {
       if (rect.top > closestTopPosition) {
         closestTopPosition = rect.top;
         currentHeadingId = heading.id;
@@ -22,46 +25,83 @@ const updateToLatestCurrentId = (headingElements, deps) => {
     }
   });
   
+  // If no heading is above the threshold, select the first visible heading below it
+  if (!currentHeadingId) {
+    let lowestTop = Infinity;
+    headingElements.forEach((heading) => {
+      const rect = heading.getBoundingClientRect();
+      if (rect.top > offsetTop && rect.top < lowestTop) {
+        lowestTop = rect.top;
+        currentHeadingId = heading.id;
+      }
+    });
+  }
+  
   if (currentHeadingId && currentHeadingId !== store.selectCurrentId()) {
     store.setCurrentId(currentHeadingId);
     render();
   }
 };
 
-const startListening = (contentContainer, deps) => {
+const startListening = (contentContainer, scrollContainer, offsetTop, deps) => {
   const { store, render } = deps;
   
   // Extract headings
-  const headings = contentContainer.querySelectorAll("rtgl-text[id]");
+  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) => ({
-    id: heading.id,
-    href: `#${heading.id}`,
-    title: heading.textContent
-  }));
+  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);
+    }
+    
+    return {
+      id: heading.id,
+      href: `#${heading.id}`,
+      title: heading.textContent,
+      level: level
+    };
+  });
   
   store.setItems(items);
-  updateToLatestCurrentId(headingElements, deps);
+  updateToLatestCurrentId(headingElements, offsetTop, deps);
   render();
 
-  const boundCheckCurrentHeading = updateToLatestCurrentId.bind(this, headingElements, deps);
+  const boundCheckCurrentHeading = updateToLatestCurrentId.bind(this, headingElements, offsetTop, deps);
   
-  // Add scroll listener to the content container
-  contentContainer.addEventListener("scroll", boundCheckCurrentHeading, {
+  // Add scroll listener to the scroll container
+  scrollContainer.addEventListener("scroll", boundCheckCurrentHeading, {
     passive: true,
   });
 
   return () => {
-    contentContainer.removeEventListener("scroll", boundCheckCurrentHeading);
+    scrollContainer.removeEventListener("scroll", boundCheckCurrentHeading);
   }
 };
 
 export const handleBeforeMount = (deps) => {
   const { attrs } = deps;
   requestAnimationFrame(() => {
-    const targetElement = document.getElementById(attrs['target-id'])
-    const stopListening = startListening(targetElement, deps)
+    const targetElement = document.getElementById(attrs['target-id']);
+    
+    // Get scroll container - default to window for page scroll if not specified
+    let scrollContainer = window;
+    if (attrs['scroll-container-id']) {
+      scrollContainer = document.getElementById(attrs['scroll-container-id']) || window;
+    }
+    
+    // Get offset top - default to 100px if not specified
+    const offsetTop = parseInt(attrs['offset-top'] || '100', 10);
+    
+    const stopListening = startListening(targetElement, scrollContainer, offsetTop, deps);
     return () => {
       stopListening();
     }

package/src/components/pageOutline/pageOutline.store.js

@@ -5,11 +5,56 @@ export const INITIAL_STATE = Object.freeze({
 });
 
 export const toViewData = ({ state }) => {
+  // Find all parent IDs for the current active item
+  const getActiveParentIds = (items, currentId) => {
+    const activeParentIds = new Set();
+    const currentIndex = items.findIndex(item => item.id === currentId);
+    
+    if (currentIndex === -1) return activeParentIds;
+    
+    const currentLevel = items[currentIndex].level;
+    
+    // Look backwards for all parents (items with lower level)
+    for (let i = currentIndex - 1; i >= 0; i--) {
+      if (items[i].level < currentLevel) {
+        // This is a parent - mark all ancestors
+        let ancestorLevel = items[i].level;
+        activeParentIds.add(items[i].id);
+        
+        // Continue looking for grandparents
+        for (let j = i - 1; j >= 0; j--) {
+          if (items[j].level < ancestorLevel) {
+            activeParentIds.add(items[j].id);
+            ancestorLevel = items[j].level;
+          }
+        }
+        break; // Found the immediate parent chain
+      }
+    }
+    
+    return activeParentIds;
+  };
+  
+  const activeParentIds = getActiveParentIds(state.items, state.currentId);
+  
   return {
     items: state.items.map((item) => {
+      const mlValues = {
+        1: '0',
+        2: '12px',
+        3: '24px',
+        4: '32px'
+      };
+
+      const isDirectlyActive = item.id === state.currentId;
+      const isParentActive = activeParentIds.has(item.id);
+      const active = isDirectlyActive || isParentActive;
+      
       return {
         ...item,
-        c: item.id === state.currentId ? 'fg' : 'mu-fg'
+        c: active ? 'fg' : 'mu-fg',
+        ml: mlValues[item.level] || '',
+        bc: active ? "fg" : "mu-fg"
       }
     }),
     currentId: state.currentId

package/src/components/pageOutline/pageOutline.view.yaml

@@ -27,8 +27,10 @@ events:
     type: object
 
 template:
-  - rtgl-view h=f w=272:
-    - rtgl-view w=f g=sm mt=xl:
-      - $for item, i in items:
-        - rtgl-view pv=xs av=c href=${item.href}:
-          - rtgl-text s=sm c=${item.c} h-c=fg: ${item.title}
+  - rtgl-view h=f w=272 pr=md:
+      - rtgl-view w=f mt=xl:
+          - $for item, i in items:
+              - rtgl-view d=h bwl=xs bc="${item.bc}" pv=sm av=c href=${item.href} pl=md:
+                  - rtgl-view w=${item.ml}:
+                  - rtgl-text s=sm c=${item.c} h-c=fg: ${item.title}
+

package/src/primitives/colorPicker.js

@@ -81,8 +81,8 @@ class RettangoliColorPickerElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
-        "visible",
+        "hide",
+        "show",
         "op",
         "z",
       ])
@@ -177,11 +177,11 @@ class RettangoliColorPickerElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/image.js

@@ -85,7 +85,8 @@ class RettangoliImageElement extends HTMLElement {
       "wh",
       "w",
       "h",
-      "hidden",
+      "hide",
+      "show",
       "height",
       "width",
       "z",
@@ -198,11 +199,11 @@ class RettangoliImageElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/input.js

@@ -94,8 +94,8 @@ class RettangoliInputElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
-        "visible",
+        "hide",
+        "show",
         "op",
         "z",
       ])
@@ -186,11 +186,11 @@ class RettangoliInputElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/slider.js

@@ -115,8 +115,8 @@ class RettangoliSliderElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
-        "visible",
+        "hide",
+        "show",
         "op",
         "z",
       ])
@@ -212,11 +212,11 @@ class RettangoliSliderElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/view.js

@@ -89,10 +89,17 @@ class RettangoliViewElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
+        "hide",
+        "show",
         "sh",
         "sv",
-        "z"
+        "z",
+        "d",
+        "ah",
+        "av",
+        "flex",
+        "fw",
+        "overflow"
       ]),
     ];
   }
@@ -136,14 +143,13 @@ class RettangoliViewElement extends HTMLElement {
       this._linkElement = null;
     }
   }
+  
+  connectedCallback() {
+    // Force update styles when connected to ensure responsive attributes are processed
+    this.updateStyles();
+  }
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    // Handle href and target changes
-    if (name === "href" || name === "target") {
-      this._updateDOM();
-      return;
-    }
-    
+  updateStyles() {
     // Reset styles for fresh calculation
     this._styles = {
       default: {},
@@ -158,6 +164,7 @@ class RettangoliViewElement extends HTMLElement {
         return `${size === "default" ? "" : `${size}-`}${tag}`;
       };
 
+
       const wh = this.getAttribute(addSizePrefix("wh"));
       const width = dimensionWithUnit(
         wh === null ? this.getAttribute(addSizePrefix("w")) : wh,
@@ -192,12 +199,110 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
-        this._styles[size].display = "none !important";
+      if (this.hasAttribute(addSizePrefix("hide"))) {
+        this._styles[size].display = "none";
+      }
+
+      if (this.hasAttribute(addSizePrefix("show"))) {
+        this._styles[size].display = "flex";
+      }
+
+      // Handle flex direction and alignment
+      const direction = this.getAttribute(addSizePrefix("d"));
+      const alignHorizontal = this.getAttribute(addSizePrefix("ah"));
+      const alignVertical = this.getAttribute(addSizePrefix("av"));
+
+
+      if (direction === "h") {
+        this._styles[size]["flex-direction"] = "row";
+      } else if (direction === "v") {
+        this._styles[size]["flex-direction"] = "column";
+      } else if (size === "default" && !direction) {
+        // Check if any responsive direction attributes exist
+        const hasResponsiveDirection = ["sm", "md", "lg", "xl"].some(
+          breakpoint => this.hasAttribute(`${breakpoint}-d`)
+        );
+        if (hasResponsiveDirection) {
+          // Explicitly set column for default to ensure responsive overrides work
+          this._styles[size]["flex-direction"] = "column";
+        }
+      }
+
+      // Handle alignment based on direction
+      const isHorizontal = direction === "h";
+      const isVerticalOrDefault = direction === "v" || !direction;
+
+      // For horizontal direction: ah controls justify-content, av controls align-items
+      if (isHorizontal) {
+        if (alignHorizontal === "c") {
+          this._styles[size]["justify-content"] = "center";
+        } else if (alignHorizontal === "e") {
+          this._styles[size]["justify-content"] = "flex-end";
+        } else if (alignHorizontal === "s") {
+          this._styles[size]["justify-content"] = "flex-start";
+        }
+
+        if (alignVertical === "c") {
+          this._styles[size]["align-items"] = "center";
+          this._styles[size]["align-content"] = "center";
+        } else if (alignVertical === "e") {
+          this._styles[size]["align-items"] = "flex-end";
+          this._styles[size]["align-content"] = "flex-end";
+        } else if (alignVertical === "s") {
+          this._styles[size]["align-items"] = "flex-start";
+        }
+      }
+
+      // For vertical/default direction: ah controls align-items, av controls justify-content
+      if (isVerticalOrDefault && (alignHorizontal !== null || alignVertical !== null)) {
+        if (alignHorizontal === "c") {
+          this._styles[size]["align-items"] = "center";
+        } else if (alignHorizontal === "e") {
+          this._styles[size]["align-items"] = "flex-end";
+        } else if (alignHorizontal === "s") {
+          this._styles[size]["align-items"] = "flex-start";
+        }
+
+        if (alignVertical === "c") {
+          this._styles[size]["justify-content"] = "center";
+        } else if (alignVertical === "e") {
+          this._styles[size]["justify-content"] = "flex-end";
+        } else if (alignVertical === "s") {
+          this._styles[size]["justify-content"] = "flex-start";
+        }
+      }
+
+      // Handle flex property
+      const flex = this.getAttribute(addSizePrefix("flex"));
+      if (flex !== null) {
+        this._styles[size]["flex"] = flex;
+      }
+
+      // Handle flex-wrap
+      const flexWrap = this.getAttribute(addSizePrefix("fw"));
+      if (flexWrap === "w") {
+        this._styles[size]["flex-wrap"] = "wrap";
+      }
+
+      // Handle scroll properties
+      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";
+        this._styles[size]["flex-wrap"] = "nowrap";
+      } else if (scrollHorizontal) {
+        this._styles[size]["overflow-x"] = "scroll";
+        this._styles[size]["flex-wrap"] = "nowrap";
+      } else if (scrollVertical) {
+        this._styles[size]["overflow-y"] = "scroll";
+        this._styles[size]["flex-wrap"] = "nowrap";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
-        this._styles[size].display = "flex !important";
+      if (overflow === "hidden") {
+        this._styles[size]["overflow"] = "hidden";
+        this._styles[size]["flex-wrap"] = "nowrap";
       }
     });
 
@@ -207,6 +312,20 @@ class RettangoliViewElement extends HTMLElement {
       this._styleElement.textContent = newStyleString;
       this._lastStyleString = newStyleString;
     }
+    
+  }
+  
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Handle href and target changes
+    if (name === "href" || name === "target") {
+      this._updateDOM();
+      return;
+    }
+    
+    // Update styles for all other attributes
+    if (oldValue !== newValue) {
+      this.updateStyles();
+    }
   }
 }