rettangoli-ui 0.1.0-rc3 → 0.1.0-rc4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rettangoli-ui",
-  "version": "0.1.0-rc3",
+  "version": "0.1.0-rc4",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/dialog/dialog.view.yaml

@@ -21,20 +21,21 @@ events:
     properties: {}
 
 styles:
-  '@keyframes dialog-in':
-    from:
-      opacity: 0
-      transform: scale(0.95)
-    to:
-      opacity: 1
-      transform: scale(1)
+  # '@keyframes dialog-in':
+  #   from:
+  #     opacity: 0
+  #     transform: scale(0.95)
+  #   to:
+  #     opacity: 1
+  #     transform: scale(1)
 
-  '#dialog-container':
-    animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1)
-    transform-origin: top
+  # '#dialog-container':
+  #   animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1)
+  #   transform-origin: top
 
 template:
   - $if isOpen:
-    - rtgl-view#dialog-overlay pos=fix cor=full ah=c av=c:
+    - rtgl-view pos=fix cor=full ah=c av=c:
+      - 'rtgl-view#dialog-overlay pos=fix cor=full ah=c av=c bgc=bg op=0.5':
       - rtgl-view#dialog-container pos=fix bw=xs p=lg bgc=bg w=600 br=sm:
         - slot name=content:

package/src/components/dropdownMenu/dropdownMenu.handlers.js

@@ -0,0 +1,5 @@
+
+export const handleClickPopoverOverlay = (e, deps) => {
+  const { dispatchEvent } = deps;
+  dispatchEvent(new CustomEvent('click-overlay'));
+}

package/src/components/dropdownMenu/dropdownMenu.store.js

@@ -0,0 +1,25 @@
+
+export const INITIAL_STATE = Object.freeze({
+});
+
+export const toViewData = ({ state, props }) => {
+  return {
+    items: props.items || [],
+    isOpen: props.isOpen || false,
+    position: props.position || {
+      x: 0,
+      y: 0,
+    },
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const setState = (state) => {
+  // do doSomething
+}
+
+
+

package/src/components/dropdownMenu/dropdownMenu.view.yaml

@@ -0,0 +1,52 @@
+elementName: rtgl-dropdown-menu
+
+viewDataSchema:
+  type: object
+
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          type:
+            type: string
+            enum:
+              - label
+              - item
+              - separator
+    isOpen:
+      type: boolean
+    position:
+      type: object
+      properties:
+        x:
+          type: number
+        y:
+          type: number
+
+refs:
+  popover:
+    eventListeners:
+      click-overlay:
+        handler: handleClickPopoverOverlay
+
+events: {}
+
+template:
+  - rtgl-popover#popover .isOpen=isOpen .position=position:
+    - rtgl-view wh=300 g=xs slot=content bgc=background br=md:
+      - $for item, i in items:
+        - $if item.type == 'label':
+            - rtgl-view w=f ph=lg pv=md:
+              - rtgl-text s=sm c=mu-fg: ${item.label}
+          $elif item.type == 'item':
+            - rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=mu:
+              - rtgl-text: ${item.label}
+          $elif item.type == 'separator':
+            - rtgl-view w=f h=1 ph=lg mv=md bgc=bo:
+            

package/src/components/popover/popover.handlers.js

@@ -1,17 +1,5 @@
-export const handleClickOverlay = (e, deps) => {
-  const { props, dispatchEvent, store, render } = deps;
-  if (props.isOpen !== undefined) {
-    dispatchEvent(new CustomEvent('closePopover'));
-    return;
-  }
-  store.setClose();
-  render();
-}
 
-export const open = (payload, deps) => {
-  const { position } = payload;
-  const { store, render } = deps;
-  store.setOpen(position);
-  render();
+export const handleClickOverlay = (e, deps) => {
+  const { dispatchEvent } = deps;
+  dispatchEvent(new CustomEvent('click-overlay'));
 }
-

package/src/components/popover/popover.store.js

@@ -1,37 +1,12 @@
-export const INITIAL_STATE = Object.freeze({
-  isOpen: false,
-  position: {
-    x: 0,
-    y: 0
-  },
-});
+export const INITIAL_STATE = Object.freeze({});
 
 export const toViewData = ({ state, props }) => {
-  if (props.isOpen !== undefined) {
-    return {
-      isOpen: props.isOpen,
-      position: {
-        x: 0,
-        y: 0
-      }
-    }
-  }
   return {
-    isOpen: state.isOpen,
-    position: state.position,
+    isOpen: props.isOpen,
+    position: props.position,
   };
 }
 
 export const selectState = ({ state }) => {
   return state;
 }
-
-export const setOpen = (state, position) => {
-  state.isOpen = true;
-  state.position = position;
-}
-
-export const setClose = (state) => {
-  state.isOpen = false;
-  state.position = { x: 0, y: 0 };
-}

package/src/components/popover/popover.view.yaml

@@ -23,6 +23,13 @@ propsSchema:
       default: bottom
     isOpen:
       type: boolean
+    position:
+      type: object
+      properties:
+        x:
+          type: number
+        y:
+          type: number
 
 refs:
   popoverOverlay:
@@ -46,5 +53,5 @@ styles:
 template:
   - $if isOpen:
     - rtgl-view#popoverOverlay pos=fix cor=full:
-    - 'rtgl-view#popoverContainer pos=fix style="left: ${position.x}px; top: ${position.y}px;" id=floatingElement bw=xs p=md bgc=bg':
+    - 'rtgl-view#popoverContainer pos=fix style="left: ${position.x}px; top: ${position.y}px;" id=floatingElement bw=xs p=md bgc=mu':
       - slot name=content:

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

@@ -1,15 +1,46 @@
 
 export const handleOnMount = (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);
+    if (selectedOption) {
+      store.update((state) => {
+        state.selectedValue = selectedOption.value;
+        state.selectedLabel = selectedOption.label;
+      });
+      render();
+    }
+  }
 }
 
 export const handleButtonClick = (e, deps) => {
   const { store, render, getRefIds } = deps;
-  const refIds = getRefIds();
-  refIds.popover.elm.transformedHandlers.open({
+  store.openOptionsPopover({
     position: {
+      y: e.clientY,
       x: e.clientX,
-      y: e.clientY
     }
-  });
+  })
+  render();
+}
+
+export const handleClickOptionsPopoverOverlay = (e, deps) => {
+  const { store, render } = deps;
+  store.closeOptionsPopover();
+  render();
+}
+
+export const handleOptionClick = (e, deps) => {
+  const { render, dispatchEvent, props } = deps;
+  const id = e.currentTarget.id.replace('option-', '');
+
+  const option = props.options[id];
 
+  dispatchEvent(new CustomEvent('option-selected', {
+    detail: { value: option.value, label: option.label },
+    bubbles: true
+  }));
+  
+  render();
 }

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

@@ -1,11 +1,43 @@
 export const INITIAL_STATE = Object.freeze({
   isOpen: false,
+  position: {
+    x: 0,
+    y: 0,
+  },
+  selectedValue: null,
+  selectedLabel: null,
 });
 
 export const toViewData = ({ state, props }) => {
+  // Calculate display label
+  let displayLabel = props.placeholder || 'Select an option';
+  
+  // Use state's selected value if available, otherwise use props.selectedValue
+  const currentValue = state.selectedValue !== null ? state.selectedValue : props.selectedValue;
+  
+  if (currentValue !== null && currentValue !== undefined && props.options) {
+    const selectedOption = props.options.find(opt => opt.value === currentValue);
+    if (selectedOption) {
+      displayLabel = selectedOption.label;
+    }
+  } 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' : ''
+  }));
+  
   return {
     isOpen: state.isOpen,
-    options: props.options || []
+    position: state.position,
+    options: optionsWithSelection,
+    selectedValue: currentValue,
+    selectedLabel: displayLabel,
+    placeholder: props.placeholder || 'Select an option'
   };
 }
 
@@ -13,12 +45,20 @@ export const selectState = ({ state }) => {
   return state;
 }
 
-export const setOpen = (state) => {
-  state.open = true;
+export const openOptionsPopover = (state, payload) => {
+  const { position } = payload;
+  state.position = position;
+  state.isOpen = true;
 }
 
-export const setState = (state) => {
-  // do doSomething
+export const closeOptionsPopover = (state) => {
+  state.isOpen = false;
+}
+
+export const selectOption = (state, option) => {
+  state.selectedValue = option.value;
+  state.selectedLabel = option.label;
+  state.isOpen = false;
 }
 
 

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

@@ -7,32 +7,44 @@ propsSchema:
   type: object
   properties:
     options:
-    items:
       type: array
       items:
         type: object
         properties:
           id:
             type: string
-          lalbel:
+          label:
             type: string
           value:
             type: any
+    selectedValue:
+      type: any
+    placeholder:
+      type: string
+    onChange:
+      type: function
 
 refs:
   select-button:
     eventListeners:
       click:
         handler: handleButtonClick
-  popover: {}
-
+  popover:
+    eventListeners:
+      click-overlay:
+        handler: handleClickOptionsPopoverOverlay
+  option-*:
+    eventListeners:
+      click:
+        handler: handleOptionClick
 
 events: {}
 
 template:
-  - rtgl-button#select-button v=ol: Placeholder
-  - rtgl-popover#popover:
-    - rtgl-view wh=300 g=xs slot=content:
+  - 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 w=f h-bgc=mu ph=lg pv=md cur=p br=md:
+        - rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=${option.bgc}:
           - rtgl-text: ${option.label}

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

@@ -6,30 +6,42 @@ const stringifyAttrs = (attrs) => {
   return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
 }
 
-function flattenItems(items) {
+function flattenItems(items, selectedItemId = null) {
   let result = [];
 
   for (const item of items) {
+    const itemId = item.id || item.href || item.path;
+    const isSelected = selectedItemId === itemId;
+    
     // Add the parent item if it's not just a group label
     result.push({
-      id: item.id || item.href || item.path,
+      id: itemId,
       title: item.title,
       href: item.href,
       type: item.type || 'item',
       icon: item.icon,
       hrefAttr: item.href ? `href=${item.href}` : '',
+      isSelected,
+      itemBgc: isSelected ? 'ac' : 'bg',
+      itemHoverBgc: isSelected ? 'ac' : 'mu',
     });
 
     // Add child items if they exist
     if (item.items && Array.isArray(item.items)) {
       for (const subItem of item.items) {
+        const subItemId = subItem.id || subItem.href || subItem.path;
+        const isSubSelected = selectedItemId === subItemId;
+        
         result.push({
-          id: subItem.id || subItem.href || subItem.path,
+          id: subItemId,
           title: subItem.title,
           href: subItem.href,
           type: subItem.type || 'item',
           icon: subItem.icon,
           hrefAttr: subItem.href ? `href=${subItem.href}` : '',
+          isSelected: isSubSelected,
+          itemBgc: isSubSelected ? 'ac' : 'bg',
+          itemHoverBgc: isSubSelected ? 'ac' : 'mu',
         });
       }
     }
@@ -41,6 +53,7 @@ function flattenItems(items) {
 export const toViewData = ({ 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;
 
   const containerAttrString = stringifyAttrs(attrs);
   const mode = attrs.mode || 'full';
@@ -55,7 +68,7 @@ export const toViewData = ({ state, props, attrs }) => {
     },
   };
 
-  const items = attrsItems ? flattenItems(attrsItems) : [];
+  const items = attrsItems ? flattenItems(attrsItems, selectedItemId) : [];
 
   // Computed values based on mode
   const sidebarWidth = mode === 'full' ? 272 : 64;
@@ -100,7 +113,8 @@ export const toViewData = ({ state, props, attrs }) => {
     itemContentAlign,
     itemAlignAttr,
     itemWidth,
-    headerWidth
+    headerWidth,
+    selectedItemId
   };
 }
 

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

@@ -37,6 +37,8 @@ viewDataSchema:
       type: string
     headerWidth:
       type: string
+    selectedItemId:
+      type: string
     header:
       type: object
       properties:
@@ -74,6 +76,8 @@ viewDataSchema:
 propsSchema:
   type: object
   properties:
+    selectedItemId:
+      type: string
     header:
       type: object
       properties:
@@ -170,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=mu br=lg bgc=bg 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 title="${item.title}":
               - $if item.icon:
                   - $if showLabels:
                       - rtgl-view d=h ah=${itemContentAlign} g=sm:

package/src/primitives/button.js

@@ -23,7 +23,7 @@ class RettangoliButtonElement extends HTMLElement {
           flex-direction: row;
           align-items: center;
           justify-content: center;
-          gap: var(--spacing-sm);
+          gap: var(--spacing-lg);
           border-width: 0px;
           border-style: solid;
           border-color: var(--border);
@@ -124,6 +124,28 @@ class RettangoliButtonElement extends HTMLElement {
           text-decoration: underline;
         }
 
+        /* Square button styles */
+        :host([sq]) button {
+          width: 32px;
+          height: 32px;
+          padding: 0;
+          gap: 0;
+        }
+
+        :host([sq][s="sm"]) button {
+          width: 24px;
+          height: 24px;
+          padding: 0;
+          gap: 0;
+        }
+
+        :host([sq][s="lg"]) button {
+          width: 40px;
+          height: 40px;
+          padding: 0;
+          gap: 0;
+        }
+
         ${anchorStyles}
         
         a {
@@ -152,7 +174,7 @@ class RettangoliButtonElement extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["key", "href", "target", "w", "t", "icon", "disabled", "v", "s"];
+    return ["key", "href", "target", "w", "t", "icon", "disabled", "v", "s", "sq", "ip"];
   }
 
   connectedCallback() {
@@ -170,8 +192,10 @@ class RettangoliButtonElement extends HTMLElement {
     // Update icon
     this._updateIcon();
     
-    // Update width styling
-    this._updateWidth();
+    // Update width styling (skip for square buttons)
+    if (!this.hasAttribute('sq')) {
+      this._updateWidth();
+    }
     
     // Update disabled state
     const isDisabled = this.hasAttribute('disabled');
@@ -226,15 +250,34 @@ class RettangoliButtonElement extends HTMLElement {
         lg: 22
       };
       const color = colorMap[this.getAttribute("v")] || 'pr-fg';
-      const size = sizeMap[this.getAttribute("t")] || 18;
+      
+      // For square buttons, use button size (s attribute), otherwise use icon size (t attribute)
+      let size = 18; // default
+      if (this.hasAttribute('sq')) {
+        const buttonSizeMap = {
+          sm: 14,
+          lg: 22
+        };
+        const buttonSize = this.getAttribute("s");
+        size = buttonSizeMap[buttonSize] || 18;
+      } else {
+        size = sizeMap[this.getAttribute("t")] || 18;
+      }
       
       this._iconElement = document.createElement('rtgl-svg');
       this._iconElement.setAttribute('svg', icon);
       this._iconElement.setAttribute('c', color);
       this._iconElement.setAttribute('wh', size.toString());
       
-      // Insert icon before slot
-      this._buttonElement.insertBefore(this._iconElement, this._slotElement);
+      // Insert icon based on position (default is right, 's' means start/left)
+      const iconPosition = this.getAttribute("ip");
+      if (iconPosition === 's') {
+        // Insert icon before slot (left position)
+        this._buttonElement.insertBefore(this._iconElement, this._slotElement);
+      } else {
+        // Insert icon after slot (right position - default)
+        this._buttonElement.appendChild(this._iconElement);
+      }
     }
   }
 

package/src/primitives/view.js

@@ -83,6 +83,7 @@ class RettangoliViewElement extends HTMLElement {
     return [
       "href",
       "target",
+      "op",
       ...permutateBreakpoints([
         ...styleMapKeys,
         "wh",
@@ -141,6 +142,7 @@ class RettangoliViewElement extends HTMLElement {
       this._updateDOM();
       return;
     }
+    
     // Reset styles for fresh calculation
     this._styles = {
       default: {},