@rettangoli/ui 1.0.21 → 1.0.22

package/package.json

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

package/src/components/sidebar/sidebar.handlers.js

@@ -24,10 +24,12 @@ export const handleHeaderClick = (deps, payload) => {
 }
 
 export const handleItemClick = (deps, payload) => {
-  const { store, dispatchEvent } = deps;
+  const { store, dispatchEvent, render } = deps;
   const event = payload._event;
   const id = event.currentTarget.dataset.itemId || event.currentTarget.id.slice('item'.length);
   const item = store.selectItem(id);
+  store.hideTooltip({});
+  render();
   dispatchEvent(new CustomEvent('item-click', {
     detail: {
       item,
@@ -36,3 +38,43 @@ export const handleItemClick = (deps, payload) => {
     composed: true
   }));
 }
+
+export const handleItemMouseEnter = (deps, payload) => {
+  const { props, store, render } = deps;
+  const showCompactTooltip = props.showCompactTooltip === true ||
+    props.showCompactTooltip === '' ||
+    props.showCompactTooltip === 'true';
+
+  if (!showCompactTooltip || (props.mode || 'full') === 'full') {
+    return;
+  }
+
+  const event = payload._event;
+  const id = event.currentTarget.dataset.itemId || event.currentTarget.id.slice('item'.length);
+  const item = store.selectItem(id);
+
+  if (!item || item.type === 'groupLabel') {
+    return;
+  }
+
+  const rect = event.currentTarget.getBoundingClientRect();
+  const content = item.tooltip || item.label || item.title;
+
+  if (!content) {
+    return;
+  }
+
+  store.showTooltip({
+    x: rect.right,
+    y: rect.top + rect.height / 2,
+    place: 'r',
+    content,
+  });
+  render();
+};
+
+export const handleItemMouseLeave = (deps) => {
+  const { store, render } = deps;
+  store.hideTooltip({});
+  render();
+};

package/src/components/sidebar/sidebar.schema.yaml

@@ -7,6 +7,9 @@ propsSchema:
     hideHeader:
       type: boolean
       default: false
+    showCompactTooltip:
+      type: boolean
+      default: false
     w:
       type: string
     bwr:
@@ -38,12 +41,18 @@ propsSchema:
       items:
         type: object
         properties:
+          label:
+            type: string
           title:
             type: string
+            description: Deprecated item text field. Use label instead.
           slug:
             type: string
           type:
             type: string
+            description: Item row type. Supports item, groupLabel, divider, and spacer.
+          tooltip:
+            type: string
           items:
             type: array
           testId:

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

@@ -1,6 +1,14 @@
-export const createInitialState = () => Object.freeze({});
-
-const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'header', 'items', 'selectedItemId', 'mode', 'hideHeader', 'w', 'bwr'];
+export const createInitialState = () => Object.freeze({
+  tooltipState: {
+    open: false,
+    x: 0,
+    y: 0,
+    place: 'r',
+    content: '',
+  },
+});
+
+const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'header', 'items', 'selectedItemId', 'mode', 'hideHeader', 'showCompactTooltip', 'w', 'bwr'];
 
 const stringifyAttrs = (props = {}) => {
   return Object.entries(props).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
@@ -49,20 +57,35 @@ const resolveSidebarWidth = (value, mode) => {
   return mode === 'full' ? 272 : 64;
 };
 
+const resolveItemLabel = (item = {}) => {
+  if (item.label !== undefined && item.label !== null) {
+    return item.label;
+  }
+  if (item.title !== undefined && item.title !== null) {
+    return item.title;
+  }
+  return '';
+};
+
 function flattenItems(items, selectedItemId = null) {
   let result = [];
 
   for (const item of items) {
     const itemId = item.id || item.href || item.path;
-    const isSelected = selectedItemId === itemId;
+    const isSelected = itemId !== undefined && itemId !== null && selectedItemId === itemId;
+    const label = resolveItemLabel(item);
 
-    // Add the parent item if it's not just a group label
+    // Normalize all sidebar rows to a single shape so the view can branch on type.
     result.push({
       id: itemId,
-      title: item.title,
+      label,
+      title: item.title ?? label,
       href: item.href,
       type: item.type || 'item',
       icon: item.icon,
+      testId: item.testId,
+      tooltip: item.tooltip,
+      path: item.path,
       hrefAttr: item.href ? `href=${item.href}` : '',
       isSelected,
       itemBgc: isSelected ? 'ac' : 'bg',
@@ -73,14 +96,19 @@ function flattenItems(items, selectedItemId = null) {
     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;
+        const isSubSelected = subItemId !== undefined && subItemId !== null && selectedItemId === subItemId;
+        const label = resolveItemLabel(subItem);
 
         result.push({
           id: subItemId,
-          title: subItem.title,
+          label,
+          title: subItem.title ?? label,
           href: subItem.href,
           type: subItem.type || 'item',
           icon: subItem.icon,
+          testId: subItem.testId,
+          tooltip: subItem.tooltip,
+          path: subItem.path,
           hrefAttr: subItem.href ? `href=${subItem.href}` : '',
           isSelected: isSubSelected,
           itemBgc: isSubSelected ? 'ac' : 'bg',
@@ -93,7 +121,7 @@ function flattenItems(items, selectedItemId = null) {
   return result;
 }
 
-export const selectViewData = ({ props }) => {
+export const selectViewData = ({ state, props }) => {
   const resolvedHeader = parseMaybeEncodedJson(props.header) || props.header;
   const resolvedItems = parseMaybeEncodedJson(props.items) || props.items;
   const selectedItemId = props.selectedItemId;
@@ -114,6 +142,7 @@ export const selectViewData = ({ props }) => {
   const items = resolvedItems ? flattenItems(resolvedItems, selectedItemId) : [];
 
   const showHeader = !parseBooleanProp(props.hideHeader);
+  const showCompactTooltip = parseBooleanProp(props.showCompactTooltip);
   const rightBorderWidth = props.bwr || 'xs';
   // Computed values based on mode
   const sidebarWidth = resolveSidebarWidth(props.w, mode);
@@ -126,6 +155,7 @@ export const selectViewData = ({ props }) => {
   const firstLetterSize = mode === 'shrunk-lg' ? 'md' : 'sm';
   const showLabels = mode === 'full';
   const showGroupLabels = mode === 'full';
+  const enableCompactTooltip = showCompactTooltip && !showLabels;
 
   // For items with icons in full mode, we need left alignment within the container
   // but the container itself should use flex-start alignment
@@ -141,7 +171,7 @@ export const selectViewData = ({ props }) => {
   const headerWidth = itemWidth;
 
   const ah = mode === 'shrunk-lg' || mode === 'shrunk-md' ? 'c' : '';
-  const listAttrString = mode === 'full' ? 'sv' : 'sv hsb';
+  const listAttrString = mode === 'full' ? 'd=v sv' : 'd=v sv hsb';
 
   return {
     containerAttrString,
@@ -166,7 +196,15 @@ export const selectViewData = ({ props }) => {
     ah,
     listAttrString,
     showHeader,
+    enableCompactTooltip,
     rightBorderWidth,
+    tooltipState: state.tooltipState || {
+      open: false,
+      x: 0,
+      y: 0,
+      place: 'r',
+      content: '',
+    },
   };
 }
 
@@ -189,3 +227,21 @@ export const selectItem = ({ props }, id) => {
 export const setState = ({ state }) => {
   // State management if needed
 };
+
+export const showTooltip = ({ state }, payload = {}) => {
+  const { x, y, place = 'r', content = '' } = payload;
+  state.tooltipState = {
+    open: true,
+    x,
+    y,
+    place,
+    content,
+  };
+};
+
+export const hideTooltip = ({ state }) => {
+  state.tooltipState = {
+    ...state.tooltipState,
+    open: false,
+  };
+};

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

@@ -15,6 +15,10 @@ refs:
     eventListeners:
       click:
         handler: handleItemClick
+      mouseenter:
+        handler: handleItemMouseEnter
+      mouseleave:
+        handler: handleItemMouseLeave
 anchors:
   - - $if header.image && header.image.src:
         - $if header.image.href:
@@ -77,24 +81,31 @@ template:
                                 - rtgl-text s=lg: ${header.label}
       - rtgl-view w=f h=1fg ph=${headerPadding} pb=lg g=xs ah=${ah} ${listAttrString}:
           - $for item, i in items:
-              - $if item.type == "groupLabel":
+              - $if item.type == "divider":
+                  - rtgl-view w=f pv=md:
+                      - rtgl-view h=1 w=f bgc=mu: null
+                $elif item.type == "spacer":
+                  - rtgl-view h=1fg w=f: null
+                $elif item.type == "groupLabel":
                   - $if showGroupLabels:
                       - rtgl-view mt=md h=32 av=c ph=md:
-                          - rtgl-text s=xs c=mu-fg: ${item.title}
+                          - rtgl-text s=xs c=mu-fg: ${item.label}
                     $else:
                       - rtgl-view mt=md h=1 bgc=mu: null
                 $else:
-                  - rtgl-view#item${i} data-item-id=${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=pointer data-testid=${item.testId}:
+                  - rtgl-view#item${i} data-item-id=${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=pointer data-testid=${item.testId} aria-label="${item.label}":
                       - $if item.icon:
                           - $if showLabels:
                               - rtgl-view d=h ah=${itemContentAlign} g=sm:
                                   - rtgl-svg wh=16 svg=${item.icon} c=fg: null
-                                  - rtgl-text s=sm: ${item.title}
+                                  - rtgl-text s=sm: ${item.label}
                             $else:
                               - rtgl-svg wh=${iconSize} svg=${item.icon} c=fg: null
                         $else:
                           - $if showLabels:
-                              - rtgl-text s=sm: ${item.title}
+                              - rtgl-text s=sm: ${item.label}
                             $else:
                               - rtgl-view wh=${iconSize} br=f bgc=mu av=c ah=c:
-                                  - rtgl-text s=${firstLetterSize} c=fg: ${item.title.charAt(0).toUpperCase()}
+                                  - rtgl-text s=${firstLetterSize} c=fg: ${item.label.charAt(0).toUpperCase()}
+      - $if enableCompactTooltip:
+          - rtgl-tooltip#tooltip s="md" ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} place=${tooltipState.place} content="${tooltipState.content}": null

package/src/components/tooltip/tooltip.schema.yaml

@@ -10,6 +10,9 @@ propsSchema:
       type: string
     place:
       type: string
+    s:
+      type: string
+      enum: [sm, md, lg]
     content:
       type: string
 events: []

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

@@ -1,12 +1,40 @@
 export const createInitialState = () => Object.freeze({
 });
 
+const sizePresets = {
+  sm: {
+    textSize: 'sm',
+    paddingX: 'md',
+    paddingY: 'sm',
+    maxWidth: 'min(320px, calc(100vw - 16px))',
+  },
+  md: {
+    textSize: 'sm',
+    paddingX: 'lg',
+    paddingY: 'md',
+    maxWidth: 'min(360px, calc(100vw - 16px))',
+  },
+  lg: {
+    textSize: 'md',
+    paddingX: 'lg',
+    paddingY: 'md',
+    maxWidth: 'min(420px, calc(100vw - 16px))',
+  },
+};
+
 export const selectViewData = ({ props }) => {
+  const size = sizePresets[props.s] ? props.s : 'sm';
+  const preset = sizePresets[size];
+
   return {
     open: !!props.open,
     x: props.x || 0,
     y: props.y || 0,
     place: props.place || 't',
-    content: props.content || ''
+    content: props.content || '',
+    textSize: preset.textSize,
+    paddingX: preset.paddingX,
+    paddingY: preset.paddingY,
+    popoverStyle: `--rtgl-popover-content-padding: 0; --rtgl-popover-content-min-width: 0; --rtgl-popover-content-max-width: ${preset.maxWidth}`,
   };
 }

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

@@ -1,5 +1,5 @@
 template:
-  - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} no-overlay:
-      - rtgl-view slot=content bc=bo br=md p=sm ah=c av=c:
-          - rtgl-text ta=c s=sm c=fg: ${content}
+  - 'rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} no-overlay style="${popoverStyle}"':
+      - rtgl-view slot=content bc=bo br=md ph=${paddingX} pv=${paddingY} ah=s av=c:
+          - rtgl-text ta=s s=${textSize} c=fg: ${content}
 refs: {}

package/src/primitives/popover.js

@@ -57,8 +57,8 @@ class RettangoliPopoverElement extends HTMLElement {
           border: 1px solid var(--border);
           border-radius: var(--rtgl-popover-content-border-radius, var(--border-radius-md));
           padding: var(--rtgl-popover-content-padding, var(--spacing-md));
-          min-width: 200px;
-          max-width: 400px;
+          min-width: var(--rtgl-popover-content-min-width, 200px);
+          max-width: var(--rtgl-popover-content-max-width, 400px);
         }
       `);
     }