@rettangoli/ui 0.1.2-rc9 → 0.1.3

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

@@ -1,43 +1,82 @@
-export const INITIAL_STATE = Object.freeze({
+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 createInitialState = () => Object.freeze({
   isOpen: false,
   position: {
     x: 0,
     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 selectViewData = ({ 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 sv=true:
-      - $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.handlers.js

@@ -1,15 +1,15 @@
-export const handleHeaderClick = (e, deps) => {
+export const handleHeaderClick = (deps, event) => {
   const { store, dispatchEvent } = deps;
 
   let path;
 
   const header = store.selectHeader();
 
-  if (e.currentTarget.id === 'header-label') {
+  if (event.currentTarget.id === 'header-label') {
     path = header.labelPath;
-  } else if (e.currentTarget.id === 'header-image') {
+  } else if (event.currentTarget.id === 'header-image') {
     path = header.image.path;
-  } else if (e.currentTarget.id === 'header') {
+  } else if (event.currentTarget.id === 'header') {
     path = header.path;
   }
 
@@ -22,9 +22,9 @@ export const handleHeaderClick = (e, deps) => {
   }));
 }
 
-export const handleItemClick = (e, deps) => {
+export const handleItemClick = (deps, event) => {
   const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace('item-', '');
+  const id = event.currentTarget.id.replace('item-', '');
   const item = store.selectItem(id);
   dispatchEvent(new CustomEvent('itemClick', {
     detail: {

package/src/components/sidebar/sidebar.store.js

@@ -1,4 +1,4 @@
-export const INITIAL_STATE = Object.freeze({});
+export const createInitialState = () => Object.freeze({});
 
 const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
 
@@ -50,7 +50,7 @@ function flattenItems(items, selectedItemId = null) {
   return result;
 }
 
-export const toViewData = ({ state, props, attrs }) => {
+export const selectViewData = ({ state, props, attrs }) => {
   const attrsHeader = attrs.header ? JSON.parse(decodeURIComponent(attrs.header)) : props.header;
   const attrsItems = attrs.items ? JSON.parse(decodeURIComponent(attrs.items)) : props.items;
   const selectedItemId = attrs.selectedItemId || props.selectedItemId;
@@ -81,17 +81,17 @@ export const toViewData = ({ state, props, attrs }) => {
   const firstLetterSize = mode === 'shrunk-lg' ? 'md' : 'sm';
   const showLabels = mode === 'full';
   const showGroupLabels = mode === 'full';
-  
+
   // For items with icons in full mode, we need left alignment within the container
   // but the container itself should use flex-start alignment
   const itemContentAlign = mode === 'full' ? 'fs' : 'c';
-  
+
   // Item container alignment - only set for shrunk modes, leave default for full mode
   const itemAlignAttr = mode === 'full' ? '' : `ah=${itemAlign}`;
-  
+
   // Item width - for shrunk modes, make it square to constrain the highlight
   const itemWidth = mode === 'full' ? 'f' : itemHeight;
-  
+
   // Header width - should match item width for alignment
   const headerWidth = itemWidth;
 

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:

package/src/components/sliderInput/sliderInput.handlers.js

@@ -1,17 +1,34 @@
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   const { store, attrs } = deps;
   store.setValue(attrs.defaultValue || 0);
-} 
+}
 
-export const handleValueChange = (e, deps) => {
+export const handleOnUpdate = (changes, deps) => {
+  const { oldAttrs, newAttrs } = changes;
+  const { store, render, attrs } = deps;
+  
+  // Reset when key changes
+  if (oldAttrs?.key !== newAttrs?.key && newAttrs?.key) {
+    const defaultValue = newAttrs?.defaultValue || attrs?.defaultValue || 0;
+    store.setValue(defaultValue);
+    render();
+  } else if (oldAttrs?.defaultValue !== newAttrs?.defaultValue) {
+    // Also reset when defaultValue changes
+    const defaultValue = newAttrs?.defaultValue || 0;
+    store.setValue(defaultValue);
+    render();
+  }
+}
+
+export const handleValueChange = (deps, event) => {
   const { store, render, dispatchEvent } = deps;
-  const newValue = Number(e.detail.value);
+  const newValue = Number(event.detail.value);
 
   store.setValue(newValue);
-  
+
   // Re-render to sync slider and input
   render();
-  
+
   // Dispatch event for external listeners
   dispatchEvent(
     new CustomEvent("slider-input-value-change", {

package/src/components/sliderInput/sliderInput.store.js

@@ -1,9 +1,10 @@
-export const INITIAL_STATE = Object.freeze({
+export const createInitialState = () => Object.freeze({
   value: 0
 });
 
-export const toViewData = ({ state, attrs }) => {
+export const selectViewData = ({ state, attrs }) => {
   return {
+    key: attrs.key,
     value: state.value,
     w: attrs.w || '',
     min: attrs.min || 0,

package/src/components/sliderInput/sliderInput.view.yaml

@@ -37,5 +37,6 @@ events:
 
 template:
   - rtgl-view d=h av=c g=md w=${w}:
-    - rtgl-slider#slider w=80% type=range min=${min} max=${max} step=${step} value=${value}:
-    - rtgl-input#input w=20% type=number min=${min} max=${max} step=${step} value=${value}:
+    - rtgl-slider#slider key=${key} w=f type=range min=${min} max=${max} step=${step} value=${value}:
+    - rtgl-view w=84:
+      - rtgl-input#input key=${key} w=f type=number min=${min} max=${max} step=${step} value=${value}:

package/src/components/table/table.handlers.js

@@ -1,12 +1,12 @@
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   // No special initialization needed for basic table
 };
 
-export const handleRowClick = (e, deps) => {
+export const handleRowClick = (deps, event) => {
   const { dispatchEvent, props } = deps;
-  const rowIndex = parseInt(e.currentTarget.id.replace("row-", ""));
+  const rowIndex = parseInt(event.currentTarget.id.replace("row-", ""));
   const rowData = props.data?.rows?.[rowIndex];
-  
+
   if (rowData) {
     dispatchEvent(
       new CustomEvent("row-click", {
@@ -19,11 +19,11 @@ export const handleRowClick = (e, deps) => {
   }
 };
 
-export const handleHeaderClick = (e, deps) => {
+export const handleHeaderClick = (deps, event) => {
   const { store, render, dispatchEvent } = deps;
-  const columnKey = e.currentTarget.id.replace("header-", "");
+  const columnKey = event.currentTarget.id.replace("header-", "");
   const currentSort = store.selectSortInfo();
-  
+
   // Determine new sort direction
   let newDirection = 'asc';
   if (currentSort.column === columnKey) {
@@ -33,15 +33,15 @@ export const handleHeaderClick = (e, deps) => {
       newDirection = null; // Clear sort
     }
   }
-  
+
   if (newDirection) {
     store.setSortColumn({ column: columnKey, direction: newDirection });
   } else {
     store.clearSort();
   }
-  
+
   render();
-  
+
   // Dispatch custom event for external handling
   dispatchEvent(
     new CustomEvent("header-click", {

package/src/components/table/table.store.js

@@ -1,4 +1,4 @@
-export const INITIAL_STATE = Object.freeze({
+export const createInitialState = () => Object.freeze({
   sortColumn: null,
   sortDirection: null,
 });
@@ -23,10 +23,10 @@ const getNestedValue = (obj, path) => {
   return result;
 }
 
-export const toViewData = ({ state, props, attrs }) => {
+export const selectViewData = ({ state, props, attrs }) => {
   const containerAttrString = stringifyAttrs(attrs);
   const data = props.data || { columns: [], rows: [] };
-  
+
   // Transform rows to create cells array for easier template access
   const transformedRows = data.rows.map((row, rowIndex) => {
     const cells = data.columns.map(column => {
@@ -36,7 +36,7 @@ export const toViewData = ({ state, props, attrs }) => {
         value: value !== null && value !== undefined ? String(value) : ''
       };
     });
-    
+
     return {
       index: rowIndex,
       cells: cells

package/src/components/tabs/tabs.handlers.js

@@ -0,0 +1,10 @@
+export const handleClickItem = (deps, event) => {
+  const { dispatchEvent } = deps;
+  const id = event.currentTarget.dataset.id;
+
+  dispatchEvent(new CustomEvent('item-click', {
+    detail: {
+      id
+    }
+  }));
+}

package/src/components/tabs/tabs.store.js

@@ -0,0 +1,29 @@
+export const createInitialState = () => Object.freeze({});
+
+const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+
+const stringifyAttrs = (attrs) => {
+  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
+}
+
+export const selectViewData = ({ state, props, attrs }) => {
+  const containerAttrString = stringifyAttrs(attrs);
+
+  const items = props.items || [];
+  const selectedTab = attrs['selected-tab'];
+
+  // Mark selected tab with styling
+  const itemsWithSelection = items.map(item => ({
+    ...item,
+    isSelected: item.id === selectedTab,
+    bgColor: item.id === selectedTab ? 'ac' : '',
+    borderColor: item.id === selectedTab ? '' : 'tr',
+    textColor: item.id === selectedTab ? '' : 'mu-fg'
+  }));
+
+  return {
+    containerAttrString,
+    items: itemsWithSelection,
+    selectedTab
+  };
+}

package/src/components/tabs/tabs.view.yaml

@@ -0,0 +1,64 @@
+elementName: rtgl-tabs
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+          isSelected:
+            type: boolean
+          bgColor:
+            type: string
+          textColor:
+            type: string
+          borderColor:
+            type: string
+    selectedTab:
+      type: string
+
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+
+attrsSchema:
+  type: object
+  properties:
+    selected-tab:
+      type: string
+
+refs:
+  tab-*:
+    eventListeners:
+      click:
+        handler: handleClickItem
+
+events:
+  item-click:
+    type: object
+    properties:
+      id:
+        type: string
+
+template:
+  - rtgl-view d=h g=sm bgc=mu p=sm br=lg ${containerAttrString}:
+    - $for item in items:
+        - rtgl-view#tab-${item.id} data-id=${item.id} cur=p bgc=${item.bgColor} bw=xs bc=${item.borderColor} pv=md ph=lg br=lg:
+          - rtgl-text s=sm c=${item.textColor}: "${item.label}"

package/src/components/tooltip/tooltip.store.js

@@ -0,0 +1,12 @@
+export const createInitialState = () => Object.freeze({
+});
+
+export const selectViewData = ({ attrs }) => {
+  return {
+    open: !!attrs.open,
+    x: attrs.x || 0,
+    y: attrs.y || 0,
+    placement: attrs.placement || 'top',
+    content: attrs.content || ''
+  };
+}

package/src/components/tooltip/tooltip.view.yaml

@@ -0,0 +1,27 @@
+elementName: rtgl-tooltip
+
+viewDataSchema:
+  type: object
+
+attrsSchema:
+  type: object
+  properties:
+    open:
+      type: string
+    x:
+      type: string
+    y:
+      type: string
+    placement:
+      type: string
+    content:
+      type: string
+
+refs:
+  popover:
+
+template:
+  - rtgl-popover#popover ?open=${open} x=${x} y=${y} placement=${placement} no-overlay:
+      - rtgl-view slot=content bgc=background bc=border br=md p=sm ah=c av=c:
+          - rtgl-text ta=c s=sm c=foreground: ${content}
+