@rettangoli/ui 0.1.2-rc3 → 0.1.2-rc31

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/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 = (e, deps) => {
+  const { store, render, getRefIds, attrs } = deps;
+
+  const value = store.selectValue();
+  store.setTempValue(value)
+
+  store.openPopover({
+    position: {
+      x: e.currentTarget.getBoundingClientRect().left,
+      y: e.currentTarget.getBoundingClientRect().bottom,
+    }
+  });
+
+  const { input } = getRefIds();
+  input.elm.value = value;
+  render();
+
+  if (attrs['auto-focus']) {
+    setTimeout(() => {
+      input.elm.focus();
+    }, 50)
+  }
+}
+
+export const handlePopoverClose = (e, deps) => {
+  const { store, render } = deps;
+  store.closePopover();
+  render();
+}
+
+export const handleInputChange = (e, deps) => {
+  const { store, render, dispatchEvent } = deps;
+  const value = e.detail.value;
+
+  store.setTempValue(value);
+
+  dispatchEvent(new CustomEvent('temp-input-change', {
+    detail: { value },
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleSubmitClick = (e, deps) => {
+  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 = (e, deps) => {
+  const { store, render, dispatchEvent, getRefIds } = deps;
+
+  if (e.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 (e.key === 'Escape') {
+    store.closePopover();
+    render();
+  }
+}

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

@@ -0,0 +1,48 @@
+export const INITIAL_STATE = Object.freeze({
+  isOpen: false,
+  position: {
+    x: 0,
+    y: 0,
+  },
+  value: '',
+  tempValue: '',
+});
+
+export const toViewData = ({ 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,26 +1,64 @@
+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.update((state) => {
-        state.selectedValue = selectedOption.value;
-        state.selectedLabel = selectedOption.label;
-      });
+      store.updateSelectOption(selectedOption);
       render();
     }
   }
 }
 
+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 = (e, deps) => {
-  const { store, render, getRefIds } = deps;
+  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();
 }
@@ -56,6 +94,73 @@ export const handleOptionClick = (e, deps) => {
     detail: { selectedValue: option.value },
     bubbles: true
   }));
+
+  render();
+}
+
+export const handleOptionMouseEnter = (e, deps) => {
+  const { store, render } = deps;
+  const id = parseInt(e.currentTarget.id.replace('option-', ''));
+  store.setHoveredOption(id);
+  render();
+}
+
+export const handleOptionMouseLeave = (e, deps) => {
+  const { store, render } = deps;
+  store.clearHoveredOption();
+  render();
+}
+
+export const handleClearClick = (e, deps) => {
+  const { store, render, dispatchEvent, props } = deps;
+
+  e.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 = (e, deps) => {
+  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 = (e, deps) => {
+  const { store, render } = deps;
+  store.setHoveredAddOption(true);
+  render();
+}
+
+export const handleAddOptionMouseLeave = (e, deps) => {
+  const { store, render } = deps;
+  store.setHoveredAddOption(false);
   render();
 }

package/src/components/select/select.store.js

@@ -1,3 +1,28 @@
+import { deepEqual } from '../../common.js';
+
+// Attributes that should not be passed through to the container
+// These are either handled internally or have special meaning
+const blacklistedAttrs = [
+  "id", 
+  "class", 
+  "style", 
+  "slot",
+  // Select-specific props that are handled separately
+  "placeholder",
+  "selectedValue", 
+  "selected-value",
+  "onChange",
+  "on-change",
+  "options"
+];
+
+const stringifyAttrs = (attrs) => {
+  return Object.entries(attrs || {})
+    .filter(([key]) => !blacklistedAttrs.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" ");
+};
+
 export const INITIAL_STATE = Object.freeze({
   isOpen: false,
   position: {
@@ -5,39 +30,53 @@ export const INITIAL_STATE = Object.freeze({
     y: 0,
   },
   selectedValue: null,
-  selectedLabel: null,
+  hoveredOptionId: null,
+  hoveredAddOption: false,
 });
 
-export const toViewData = ({ state, props }) => {
-  // Calculate display label
-  let displayLabel = props.placeholder || 'Select an option';
+export const toViewData = ({ state, props, attrs }) => {
+  // Generate container attribute string
+  const containerAttrString = stringifyAttrs(attrs);
   
   // Use state's selected value if available, otherwise use props.selectedValue
   const currentValue = state.selectedValue !== null ? state.selectedValue : props.selectedValue;
-  
+
+  // Calculate display label from value
+  let displayLabel = props.placeholder || 'Select an option';
+  let isPlaceholderLabel = true;
   if (currentValue !== null && currentValue !== undefined && props.options) {
-    const selectedOption = props.options.find(opt => opt.value === currentValue);
+    const selectedOption = props.options.find(opt => deepEqual(opt.value, currentValue));
     if (selectedOption) {
       displayLabel = selectedOption.label;
+      isPlaceholderLabel = false;
     }
-  } else if (state.selectedLabel) {
-    displayLabel = state.selectedLabel;
   }
-  
+
   // Map options to include isSelected flag and computed background color
-  const optionsWithSelection = (props.options || []).map(option => ({
-    ...option,
-    isSelected: option.value === currentValue,
-    bgc: option.value === currentValue ? 'mu' : ''
-  }));
-  
+  const optionsWithSelection = (props.options || []).map((option, index) => {
+    const isSelected = deepEqual(option.value, currentValue);
+    const isHovered = state.hoveredOptionId === index;
+    return {
+      ...option,
+      isSelected,
+      bgc: isHovered ? 'ac' : (isSelected ? 'mu' : '')
+    };
+  });
+
   return {
+    containerAttrString,
     isOpen: state.isOpen,
     position: state.position,
     options: optionsWithSelection,
     selectedValue: currentValue,
     selectedLabel: displayLabel,
-    placeholder: props.placeholder || 'Select an option'
+    selectedLabelColor: isPlaceholderLabel ? "mu-fg" : "fg",
+    placeholder: props.placeholder || 'Select an option',
+    hasValue: currentValue !== null && currentValue !== undefined,
+    showClear: !attrs['no-clear'] && !props['no-clear'] && (currentValue !== null && currentValue !== undefined),
+    showAddOption: !!props.addOption,
+    addOptionLabel: props.addOption?.label ? `+ ${props.addOption.label}` : '+ Add',
+    addOptionBgc: state.hoveredAddOption ? 'ac' : ''
   };
 }
 
@@ -45,10 +84,18 @@ export const selectState = ({ state }) => {
   return state;
 }
 
+export const selectSelectedValue = ({ state }) => {
+  return state.selectedValue;
+}
+
 export const openOptionsPopover = (state, payload) => {
-  const { position } = payload;
+  const { position, selectedIndex } = payload;
   state.position = position;
   state.isOpen = true;
+  // Set hoveredOptionId to the selected option's index if available
+  if (selectedIndex !== undefined && selectedIndex !== null) {
+    state.hoveredOptionId = selectedIndex;
+  }
 }
 
 export const closeOptionsPopover = (state) => {
@@ -57,9 +104,28 @@ export const closeOptionsPopover = (state) => {
 
 export const updateSelectOption = (state, option) => {
   state.selectedValue = option.value;
-  state.selectedLabel = option.label;
   state.isOpen = false;
 }
 
+export const resetSelection = (state) => {
+  state.selectedValue = undefined;
+}
+
+export const setHoveredOption = (state, optionId) => {
+  state.hoveredOptionId = optionId;
+}
+
+export const clearHoveredOption = (state) => {
+  state.hoveredOptionId = null;
+}
+
+export const clearSelectedValue = (state) => {
+  state.selectedValue = undefined;
+}
+
+export const setHoveredAddOption = (state, isHovered) => {
+  state.hoveredAddOption = isHovered;
+}
+
 
 

package/src/components/select/select.view.yaml

@@ -11,8 +11,6 @@ propsSchema:
       items:
         type: object
         properties:
-          id:
-            type: string
           label:
             type: string
           value:
@@ -23,28 +21,60 @@ propsSchema:
       type: string
     onChange:
       type: function
+    no-clear:
+      type: boolean
+    addOption:
+      type: object
+      properties:
+        label:
+          type: string
 
 refs:
   select-button:
     eventListeners:
       click:
         handler: handleButtonClick
+  clear-button:
+    eventListeners:
+      click:
+        handler: handleClearClick
   popover:
     eventListeners:
-      click-overlay:
+      close:
         handler: handleClickOptionsPopoverOverlay
   option-*:
     eventListeners:
       click:
         handler: handleOptionClick
+      mouseenter:
+        handler: handleOptionMouseEnter
+      mouseleave:
+        handler: handleOptionMouseLeave
+  option-add:
+    eventListeners:
+      click:
+        handler: handleAddOptionClick
+      mouseenter:
+        handler: handleAddOptionMouseEnter
+      mouseleave:
+        handler: handleAddOptionMouseLeave
 
 events: {}
 
 template:
-  - rtgl-button#select-button v=ol:
-    - ${selectedLabel}
-  - rtgl-popover#popover .isOpen=isOpen .position=position:
-    - rtgl-view wh=300 g=xs slot=content bgc=background br=md:
-      - $for option, i in options:
-        - rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=${option.bgc}:
-          - rtgl-text: ${option.label}
+  - rtgl-button#select-button v=ol ${containerAttrString}:
+      - rtgl-view d=h av=c w=f:
+          - rtgl-text c=${selectedLabelColor}: ${selectedLabel}
+          - rtgl-view mh=md flex=1:
+          - $if showClear:
+              - rtgl-svg#clear-button mr=md svg=x wh=16 c=mu-fg cur=p:
+          - rtgl-svg svg=chevronDown wh=16 c=mu-fg:
+  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} placement=right-start:
+      - rtgl-view wh=300 g=xs slot=content bgc=background br=md sv=true:
+          - $for option, i in options:
+              - rtgl-view#option-${i} w=f ph=lg pv=md cur=p br=md bgc=${option.bgc}:
+                  - rtgl-text: ${option.label}
+          - $if showAddOption:
+              - rtgl-view w=f bw=xs bc=mu-bg bt=sm:
+              - rtgl-view#option-add w=f ph=lg pv=md cur=p br=md bgc=${addOptionBgc}:
+                  - rtgl-text c=ac: ${addOptionLabel}

package/src/components/sidebar/sidebar.view.yaml

@@ -174,7 +174,7 @@ template:
               $else:
                 - rtgl-view mt=md h=1 bgc=mu-bg:
           $else:
-            - rtgl-view#item-${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=p title="${item.title}":
+            - rtgl-view#item-${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=p:
               - $if item.icon:
                   - $if showLabels:
                       - rtgl-view d=h ah=${itemContentAlign} g=sm: