@rettangoli/ui 0.1.2-rc8 → 0.1.3

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 handleOnMount = (deps) => {
+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

@@ -1,15 +1,60 @@
-export const INITIAL_STATE = Object.freeze({
+export const createInitialState = () => Object.freeze({
   items: [],
   currentId: null,
   contentContainer: null
 });
 
-export const toViewData = ({ state }) => {
+export const selectViewData = ({ 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/components/popoverInput/popoverInput.handlers.js

@@ -0,0 +1,99 @@
+export const handleBeforeMount = (deps) => {
+  const { store, props } = deps;
+
+  if (props.value !== undefined || props.defaultValue !== undefined) {
+    store.setValue(props.value || props.defaultValue || '');
+  }
+}
+
+export const handleOnUpdate = (changes, deps) => {
+  const { oldProps, newProps} = changes
+  const { store, props, render } = deps;
+
+  if (oldProps.defaultValue !== newProps.defaultValue) {
+    store.setValue(props.defaultValue || '');
+  }
+
+  render();
+}
+
+export const handleTextClick = (deps, event) => {
+  const { store, render, getRefIds, attrs } = deps;
+
+  const value = store.selectValue();
+  store.setTempValue(value)
+
+  store.openPopover({
+    position: {
+      x: event.currentTarget.getBoundingClientRect().left,
+      y: event.currentTarget.getBoundingClientRect().bottom,
+    }
+  });
+
+  const { input } = getRefIds();
+  input.elm.value = value;
+  render();
+
+  if (attrs['auto-focus']) {
+    setTimeout(() => {
+      input.elm.focus();
+    }, 50)
+  }
+}
+
+export const handlePopoverClose = (deps, event) => {
+  const { store, render } = deps;
+  store.closePopover();
+  render();
+}
+
+export const handleInputChange = (deps, event) => {
+  const { store, render, dispatchEvent } = deps;
+  const value = event.detail.value;
+
+  store.setTempValue(value);
+
+  dispatchEvent(new CustomEvent('temp-input-change', {
+    detail: { value },
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleSubmitClick = (deps, event) => {
+  const { store, render, dispatchEvent, getRefIds } = deps;
+  const { input } = getRefIds()
+  const value = input.elm.value;
+
+  store.setValue(value)
+  store.closePopover();
+
+  dispatchEvent(new CustomEvent('input-change', {
+    detail: { value },
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleInputKeydown = (deps, event) => {
+  const { store, render, dispatchEvent, getRefIds } = deps;
+
+  if (event.key === 'Enter') {
+    const { input } = getRefIds()
+    const value = input.elm.value;
+
+    store.closePopover();
+    // Dispatch custom event
+    dispatchEvent(new CustomEvent('input-change', {
+      detail: { value },
+      bubbles: true
+    }));
+
+    render();
+  } else if (event.key === 'Escape') {
+    store.closePopover();
+    render();
+  }
+}

package/src/components/popoverInput/popoverInput.store.js

@@ -0,0 +1,48 @@
+export const createInitialState = () => Object.freeze({
+  isOpen: false,
+  position: {
+    x: 0,
+    y: 0,
+  },
+  value: '',
+  tempValue: '',
+});
+
+export const selectViewData = ({ attrs, state, props }) => {
+  // Use state's current value if it has been modified, otherwise use props
+  const value = state.value || '-';
+
+  return {
+    isOpen: state.isOpen,
+    position: state.position,
+    value: value ?? '-',
+    tempValue: state.tempValue,
+    placeholder: props.placeholder ?? '',
+    label: attrs.label,
+  };
+}
+
+export const setTempValue = (state, value) => {
+  state.tempValue = value;
+}
+
+export const openPopover = (state, payload) => {
+  const { position } = payload;
+  state.position = position;
+  state.isOpen = true;
+  // Reset the current value to match the display value when opening
+  state.hasUnsavedChanges = false;
+}
+
+export const closePopover = (state) => {
+  state.isOpen = false;
+  state.tempValue = '';
+}
+
+export const setValue = (state, value) => {
+  state.value = value;
+}
+
+export const selectValue = ({ state }) => {
+  return state.value;
+}

package/src/components/popoverInput/popoverInput.view.yaml

@@ -0,0 +1,55 @@
+elementName: rtgl-popover-input
+
+viewDataSchema:
+  type: object
+
+attrsSchema:
+  type: object
+  properties:
+    auto-focus:
+      type: boolean
+
+propsSchema:
+  type: object
+  properties:
+    value:
+      type: string
+    defaultValue:
+      type: string
+    placeholder:
+      type: string
+    onChange:
+      type: function
+
+refs:
+  text-display:
+    eventListeners:
+      click:
+        handler: handleTextClick
+  popover:
+    eventListeners:
+      close:
+        handler: handlePopoverClose
+  input:
+    eventListeners:
+      input-change:
+        handler: handleInputChange
+      keydown:
+        handler: handleInputKeydown
+  submit:
+    eventListeners:
+      click:
+        handler: handleSubmitClick
+
+events:
+  input-change: {}
+
+template:
+  - rtgl-view#text-display w=f cur=p:
+    - rtgl-text: ${value}
+  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y}:
+    - rtgl-view g=md w=240 slot=content bgc=background br=md:
+      - rtgl-text: ${label}
+      - rtgl-input#input w=f placeholder=${placeholder}:
+      - rtgl-view w=f ah=e:
+        - rtgl-button#submit: Submit

package/src/components/select/select.handlers.js

@@ -1,9 +1,10 @@
+import { deepEqual } from '../../common.js';
 
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   const { store, props, render } = deps;
-  
+
   if (props.selectedValue !== null && props.selectedValue !== undefined && props.options) {
-    const selectedOption = props.options.find(opt => opt.value === props.selectedValue);
+    const selectedOption = props.options.find(opt => deepEqual(opt.value, props.selectedValue));
     if (selectedOption) {
       store.updateSelectOption(selectedOption);
       render();
@@ -11,26 +12,66 @@ export const handleOnMount = (deps) => {
   }
 }
 
-export const handleButtonClick = (e, deps) => {
-  const { store, render, getRefIds } = deps;
+export const handleOnUpdate = (changes, deps) => {
+  const { oldAttrs, newAttrs, oldProps, newProps } = changes;
+  const { store, props, render } = deps;
+
+  // Check if key changed
+  if (oldAttrs?.key !== newAttrs?.key && newAttrs?.key) {
+    // Clear current state using store action
+    store.resetSelection();
+
+    // Re-apply the prop value if available
+    const selectedValue = newProps?.selectedValue || props?.selectedValue;
+    const options = newProps?.options || props?.options;
+
+    if (selectedValue !== null && selectedValue !== undefined && options) {
+      const selectedOption = options.find(opt => deepEqual(opt.value, selectedValue));
+      if (selectedOption) {
+        store.updateSelectOption(selectedOption);
+      }
+    }
+    render();
+  }
+}
+
+export const handleButtonClick = (deps, event) => {
+  const { store, render, getRefIds, props } = deps;
+
+  const button = getRefIds()['select-button'].elm;
+
+  // Get first child's bounding rectangle (since button has display: contents)
+  const firstChild = button.firstElementChild;
+  const rect = firstChild ? firstChild.getBoundingClientRect() : button.getBoundingClientRect();
+
+  // Find the index of the currently selected option
+  const storeSelectedValue = store.selectSelectedValue();
+  const currentValue = storeSelectedValue !== null ? storeSelectedValue : props.selectedValue;
+  let selectedIndex = null;
+  if (currentValue !== null && currentValue !== undefined && props.options) {
+    selectedIndex = props.options.findIndex(opt => deepEqual(opt.value, currentValue));
+    if (selectedIndex === -1) selectedIndex = null;
+  }
+
   store.openOptionsPopover({
     position: {
-      y: e.clientY,
-      x: e.clientX,
-    }
+      y: rect.bottom + 12,  // Bottom edge of button
+      x: rect.left - 24,    // Left edge of button
+    },
+    selectedIndex
   })
   render();
 }
 
-export const handleClickOptionsPopoverOverlay = (e, deps) => {
+export const handleClickOptionsPopoverOverlay = (deps, event) => {
   const { store, render } = deps;
   store.closeOptionsPopover();
   render();
 }
 
-export const handleOptionClick = (e, deps) => {
+export const handleOptionClick = (deps, event) => {
   const { render, dispatchEvent, props, store } = deps;
-  const id = e.currentTarget.id.replace('option-', '');
+  const id = event.currentTarget.id.replace('option-', '');
 
   const option = props.options[id];
 
@@ -53,6 +94,73 @@ export const handleOptionClick = (e, deps) => {
     detail: { selectedValue: option.value },
     bubbles: true
   }));
-  
+
+  render();
+}
+
+export const handleOptionMouseEnter = (deps, event) => {
+  const { store, render } = deps;
+  const id = parseInt(event.currentTarget.id.replace('option-', ''));
+  store.setHoveredOption(id);
+  render();
+}
+
+export const handleOptionMouseLeave = (deps, event) => {
+  const { store, render } = deps;
+  store.clearHoveredOption();
+  render();
+}
+
+export const handleClearClick = (deps, event) => {
+  const { store, render, dispatchEvent, props } = deps;
+
+  event.stopPropagation();
+
+  // Clear the internal state
+  store.clearSelectedValue();
+
+  // Call onChange if provided
+  if (props.onChange && typeof props.onChange === 'function') {
+    props.onChange(undefined);
+  }
+
+  // Dispatch custom event for backward compatibility
+  dispatchEvent(new CustomEvent('option-selected', {
+    detail: { value: undefined, label: undefined },
+    bubbles: true
+  }));
+
+  // Also dispatch select-change event to match form's event listener pattern
+  dispatchEvent(new CustomEvent('select-change', {
+    detail: { selectedValue: undefined },
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleAddOptionClick = (deps, event) => {
+  const { store, render, dispatchEvent } = deps;
+
+  // Close the popover
+  store.closeOptionsPopover();
+
+  // Dispatch custom event for add option (no detail)
+  dispatchEvent(new CustomEvent('add-option-selected', {
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleAddOptionMouseEnter = (deps, event) => {
+  const { store, render } = deps;
+  store.setHoveredAddOption(true);
+  render();
+}
+
+export const handleAddOptionMouseLeave = (deps, event) => {
+  const { store, render } = deps;
+  store.setHoveredAddOption(false);
   render();
 }