@granularjs/ui 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granularjs/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "90+ production-ready UI components for Granular. Dark/light themes, CSS variables, accessible, zero dependencies beyond @granularjs/core.",
   "type": "module",
   "main": "./dist/granular-ui.min.js",

package/src/components/List.js

@@ -17,11 +17,6 @@ export function List(...args) {
     value && typeof value === 'object' && typeof value.tagName === 'string' &&
     value.tagName.toLowerCase() === 'li';
   const wrapChild = (child) => {
-    console.log('INFO ABOUT ITEM', child,
-      typeof child,
-      typeof child?.tagName,
-      child?.tagName?.toLowerCase()
-    );
     const wrapValue = (value) => {
       if (value?.nodeType === 'granular-list-node') return value;
       if (value == null || value === false) return null;
@@ -55,12 +50,17 @@ export function List(...args) {
 
 export function ListItem(...args) {
   const { props, children } = splitPropsChildren(args, { withBorder: false });
-  const { leftSection, rightSection, title, body, withBorder, className, ...rest } = props;
+  const { leftSection, rightSection, title, body, withBorder, className, verticalPadding, horizontalPadding, ...rest } = props;
   const hasStructured = after(title, body).compute(([nextTitle, nextBody]) => !!nextTitle || !!nextBody);
   return Li(
     {
       ...rest,
-      className: cx('g-ui-list-item', classFlag('g-ui-list-item-border', withBorder), className),
+      className: cx('g-ui-list-item',
+        classFlag('g-ui-list-item-border', withBorder),
+        classVar('g-ui-list-item-vertical-padding-', verticalPadding, 'md'),
+        classVar('g-ui-list-item-horizontal-padding-', horizontalPadding, 'md'),
+        className
+      ),
     },
     Div(
       { className: 'g-ui-list-item-shell' },

package/src/components/Table.js

@@ -46,7 +46,6 @@ const TableRow = (row, header) => {
 
   const ArrayRow = (row) => {
     return list(row, (next) => {
-      console.log('INFO ABOUT NEXT', header);
       return header ? TableHeaderCell(next) : TableCell(next)
     })
   }

package/src/components/Timeline.js

@@ -1,7 +1,17 @@
-import { Div, when, list, after, resolve, state } from '@granularjs/core';
-import { cx, splitPropsChildren } from '../utils.js';
+import { Div, when, list, after, resolve, state, Img, Span } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
 
-const DOT_CENTER_OFFSET_PX = 10;
+const PIN_CENTER_OFFSET = { xs: 6, sm: 8, md: 10, lg: 12, xl: 14 };
+const LINE_WIDTH_CSS = { xs: '2px', sm: '3px', md: '4px', lg: '6px', xl: '8px' };
+const PIN_HALF_CSS = { xs: '6px', sm: '8px', md: '10px', lg: '12px', xl: '14px' };
+const PIN_COLUMN_CENTER_PX = 14;
+
+function resolveActiveColor(color) {
+  if (color == null || color === '') return 'var(--g-ui-primary)';
+  const s = String(color).trim();
+  if (s.startsWith('#')) return s;
+  return `var(--g-ui-${s})`;
+}
 
 function getWeights(items) {
   const list = items ?? [];
@@ -106,12 +116,14 @@ let timelineIdCounter = 0;
 
 function measureSegmentLayout(timelineId) {
   const el = document.getElementById(timelineId);
-  if (!el) return;
+  if (!el) return [];
   const itemEls = el.querySelectorAll('.g-ui-timeline-item');
   if (itemEls.length < 2) return [];
+  const pinSize = el.dataset.pinSize || 'md';
+  const offset = PIN_CENTER_OFFSET[pinSize] ?? PIN_CENTER_OFFSET.md;
   const segments = [];
   for (let i = 0; i < itemEls.length - 1; i++) {
-    const top = itemEls[i].offsetTop + DOT_CENTER_OFFSET_PX;
+    const top = itemEls[i].offsetTop + offset;
     const height = itemEls[i + 1].offsetTop - itemEls[i].offsetTop;
     segments.push({ top, height });
   }
@@ -128,6 +140,13 @@ export function Timeline(...args) {
     stepDurationsMs: null,
     totalDurationMs: null,
     clickable: false,
+    pinRadius: 'md',
+    reverseActive: false,
+    lineWidth: 'md',
+    pinSize: 'md',
+    activeColor: 'primary',
+    align: 'left',
+    pinMode: 'default',
   });
   const {
     items,
@@ -138,14 +157,22 @@ export function Timeline(...args) {
     stepDurationsMs,
     totalDurationMs,
     clickable,
+    pinRadius,
+    reverseActive,
+    lineWidth,
+    pinSize,
+    activeColor,
+    align,
+    pinMode,
     className,
     ...rest
   } = props;
   const { onChange } = rawProps;
 
+  const activeColorResolved = after(activeColor).compute((c) => resolveActiveColor(resolve(c)));
+
   const timelineId = `g-ui-timeline-${++timelineIdCounter}`;
   const segmentLayout = state([]);
-
   const state_ = after(mode, active, progress, elapsedMs, stepDurationsMs, totalDurationMs, items).compute(
     (values) => {
       const [mode, active, progress, elapsedMs, stepDurationsMs, totalDurationMs, items] = values;
@@ -160,6 +187,19 @@ export function Timeline(...args) {
       );
     }
   );
+  const reverseTrackLayout = after(segmentLayout, reverseActive).compute(([segs, rev]) => {
+    if (!resolve(rev) || !segs?.length) return null;
+    const first = segs[0];
+    let totalHeight = 0;
+    for (const s of segs) totalHeight += s.height;
+    return { top: first.top, height: totalHeight };
+  });
+
+  const reverseFillHeight = after(state_).compute((s) =>
+    s?.progressPct != null ? `${Math.max(0, Math.min(100, s.progressPct))}%` : '0%'
+  );
+
+
 
   const showTrack = after(mode).compute((m) => {
     const v = resolve(m);
@@ -176,83 +216,162 @@ export function Timeline(...args) {
   }
 
   after(items).change(() => scheduleMeasure());
+  after(pinSize).change(() => scheduleMeasure());
   scheduleMeasure();
 
   return Div(
     {
       ...rest,
       id: timelineId,
+      'data-pin-size': after(pinSize).compute((s) => resolve(s) ?? 'md'),
+      'data-active-color': after(activeColor).compute((a) => {
+        const v = resolve(a);
+        if (v == null || typeof v !== 'string') return 'primary';
+        const s = String(v).trim();
+        if (s.startsWith('#')) return 'custom';
+        return s || 'primary';
+      }),
+      style: after(activeColor, lineWidth, pinSize).compute(([a, lw, ps]) => {
+        const res = {
+          '--g-ui-timeline-line-width': LINE_WIDTH_CSS[resolve(lw)] ?? '4px',
+          '--g-ui-timeline-track-offset': `calc(${PIN_COLUMN_CENTER_PX}px - var(--g-ui-timeline-line-width) / 2)`,
+          '--g-ui-timeline-pin-half': PIN_HALF_CSS[resolve(ps)] ?? '10px',
+        };
+        const colorVal = resolve(a);
+        if (colorVal && String(colorVal).trim().startsWith('#'))
+          res['--g-ui-timeline-active-color'] = String(colorVal).trim();
+        return res;
+      }),
       className: cx(
         'g-ui-timeline',
         after(mode).compute((m) => (m ? `g-ui-timeline-mode-${resolve(m)}` : '')),
         after(showTrack).compute((show) => (show ? 'g-ui-timeline-has-track' : '')),
         after(clickable).compute((c) => (resolve(c) ? 'g-ui-timeline-clickable' : '')),
+        after(reverseActive).compute((r) => (resolve(r) ? 'g-ui-timeline-reverse' : '')),
+        after(align).compute((a) => (resolve(a) === 'right' ? 'g-ui-timeline-align-right' : '')),
+        classVar('g-ui-timeline-pin-radius-', pinRadius, 'md'),
+        classVar('g-ui-timeline-line-width-', lineWidth, 'md'),
+        classVar('g-ui-timeline-pin-size-', pinSize, 'md'),
+        after(pinMode).compute((p) => (p ? `g-ui-timeline-pin-mode-${resolve(p)}` : '')),
         className
       ),
     },
     when(showTrack, () =>
-      list(segmentLayout, (seg, idx) => {
-        const segStyle = after(seg).compute((s) =>
-          s ? { top: `${s.top}px`, height: `${s.height}px` } : {}
-        );
-        const fillPct = after(state_, idx, items, resolvedMode).compute(([s, i, its, m]) => {
-          const itsList = its ?? [];
-          const n = itsList.length;
-          const weightContext = getWeightContext(itsList);
-          return computeSegmentFillPercent(
-            m,
-            s?.activeStep ?? 0,
-            s?.progressPct ?? 0,
-            resolve(i) ?? 0,
-            n,
-            weightContext
+      after(reverseActive).compute((rev) => {
+        if (resolve(rev)) {
+          return Div(
+            {
+              className: 'g-ui-timeline-track-segment g-ui-timeline-track-reverse',
+              style: after(reverseTrackLayout).compute((l) =>
+                l ? { top: `${l.top}px`, height: `${l.height}px` } : {}
+              ),
+            },
+            Div({
+              className: 'g-ui-timeline-track-fill',
+              style: after(reverseFillHeight).compute((h) => (h ? { height: h } : { height: '0%' })),
+            })
+          );
+        }
+        return list(segmentLayout, (seg, idx) => {
+          const segStyle = after(seg).compute((s) =>
+            s ? { top: `${s.top}px`, height: `${s.height}px` } : {}
+          );
+          const fillPct = after(state_, idx, items, resolvedMode).compute(([s, i, its, m]) => {
+            const itsList = its ?? [];
+            const n = itsList.length;
+            const weightContext = getWeightContext(itsList);
+            return computeSegmentFillPercent(
+              m,
+              s?.activeStep ?? 0,
+              s?.progressPct ?? 0,
+              resolve(i) ?? 0,
+              n,
+              weightContext
+            );
+          });
+          const fillHeight = after(fillPct).compute((p) => `${Math.max(0, Math.min(100, p))}%`);
+          return Div(
+            {
+              className: 'g-ui-timeline-track-segment',
+              style: after(segStyle).compute((x) => x),
+            },
+            Div({
+              className: 'g-ui-timeline-track-fill',
+              style: after(fillHeight).compute((h) => (h ? { height: h } : { height: '0%' })),
+            })
           );
         });
-        const fillHeight = after(fillPct).compute((p) => `${Math.max(0, Math.min(100, p))}%`);
-        return Div(
-          {
-            className: 'g-ui-timeline-track-segment',
-            style: after(segStyle).compute((x) => x),
-          },
-          Div({
-            className: 'g-ui-timeline-track-fill',
-            style: after(fillHeight).compute((h) => (h ? { height: h } : { height: '0%' })),
-          })
-        );
       })
     ),
     list(items, (item, idx) => {
-      const itemState = after(state_, idx).compute(([s, i]) => {
+      const itemState = after(state_, idx, items, reverseActive).compute(([s, i, its, rev]) => {
         const step = s?.activeStep ?? 0;
         const index = resolve(i) ?? 0;
-        if (index < step) return 'completed';
-        if (index === step) return 'active';
+        const n = (its ?? []).length;
+        const logicalIndex = resolve(rev) ? n - 1 - index : index;
+        if (logicalIndex < step) return 'completed';
+        if (logicalIndex === step) return 'active';
         return 'future';
       });
       const itemClass = after(itemState).compute((st) => (st ? `g-ui-timeline-item-${st}` : ''));
       const handleClick =
         resolve(clickable) && typeof onChange === 'function'
           ? () => {
-              const i = resolve(idx);
-              if (typeof i === 'number') onChange(i);
-            }
+            const i = resolve(idx);
+            if (typeof i === 'number') onChange(i);
+          }
           : undefined;
+      const pinModeVal = after(pinMode).compute((p) => resolve(p) ?? 'default');
+      const pinExtra = after(pinModeVal, item).compute(([mode, it]) => {
+        const m = mode ?? 'default';
+        if (m === 'icon' && (it?.icon != null || it?.pinIcon != null))
+          return Span(
+            { className: 'g-ui-timeline-pin-icon material-symbols-outlined' },
+            it.icon ?? it.pinIcon ?? ''
+          );
+        if (m === 'image' && (it?.image != null || it?.pinImage != null || it?.src != null))
+          return Img({
+            className: 'g-ui-timeline-pin-image',
+            src: it.image ?? it.pinImage ?? it.src,
+            alt: it.pinImageAlt ?? '',
+          });
+        if (m === 'custom' && it?.pinContent != null) return it.pinContent;
+        return null;
+      });
+      const hasPinExtra = after(pinModeVal, item).compute(([mode, it]) => {
+        const m = mode ?? 'default';
+        if (m === 'icon') return it?.icon != null || it?.pinIcon != null;
+        if (m === 'image') return it?.image != null || it?.pinImage != null || it?.src != null;
+        if (m === 'custom') return it?.pinContent != null;
+        return false;
+      });
+      const dotBlock = Div(
+        { className: 'g-ui-timeline-dot' },
+        Div({ className: 'g-ui-timeline-dot-inner' }),
+        when(hasPinExtra, () => pinExtra)
+      );
+      const contentBlock = Div(
+        { className: 'g-ui-timeline-content' },
+        when(item.title, () => Div({ className: 'g-ui-timeline-title' }, item.title)),
+        when(item.description, () =>
+          Div({ className: 'g-ui-timeline-desc' }, item.description)
+        ),
+        item.content
+      );
       return Div(
         {
           className: cx('g-ui-timeline-item', itemClass),
+          style: after(activeColorResolved).compute((c) =>
+            c ? { '--g-ui-timeline-active-color': c } : undefined
+          ),
           onClick: handleClick,
           role: handleClick ? 'button' : undefined,
           tabIndex: handleClick ? 0 : undefined,
         },
-        Div({ className: 'g-ui-timeline-dot' }),
-        Div(
-          { className: 'g-ui-timeline-content' },
-          when(item.title, () => Div({ className: 'g-ui-timeline-title' }, item.title)),
-          when(item.description, () =>
-            Div({ className: 'g-ui-timeline-desc' }, item.description)
-          ),
-          item.content
-        )
+        Div({ className: 'g-ui-dot-wrapper' },
+          dotBlock,
+        ),
+        contentBlock
       );
     })
   );

package/src/theme/styles.js

@@ -1812,6 +1812,8 @@ body .g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
   align-self: flex-start;
   justify-self: end;
   color: currentColor;
+  position: relative;
+  left: 3px;
 }
 .g-ui-list-unordered > li:not(.g-ui-list-nested-item)::before {
   content: '•';
@@ -2134,10 +2136,16 @@ body .g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
   gap: 0;
   position: relative;
 }
+.g-ui-timeline[data-active-color="primary"] { --g-ui-timeline-active-color: var(--g-ui-primary); }
+.g-ui-timeline[data-active-color="success"] { --g-ui-timeline-active-color: var(--g-ui-success); }
+.g-ui-timeline[data-active-color="danger"] { --g-ui-timeline-active-color: var(--g-ui-danger); }
+.g-ui-timeline[data-active-color="error"] { --g-ui-timeline-active-color: var(--g-ui-danger); }
+.g-ui-timeline[data-active-color="warning"] { --g-ui-timeline-active-color: var(--g-ui-warning); }
+.g-ui-timeline[data-active-color="info"] { --g-ui-timeline-active-color: var(--g-ui-info); }
 .g-ui-timeline-track-segment {
   position: absolute;
-  left: 8px;
-  width: 4px;
+  left: var(--g-ui-timeline-track-offset, 12px);
+  width: var(--g-ui-timeline-line-width, 4px);
   background: var(--g-ui-border-muted);
   border-radius: 2px;
   z-index: 0;
@@ -2151,11 +2159,19 @@ body .g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
   width: 100%;
   height: 0%;
   min-height: 0;
-  background: var(--g-ui-primary);
-  border-radius: 2px;
+  background: var(--g-ui-timeline-active-color, var(--g-ui-primary));
+  border-radius: inherit;
   transition: height 0.25s ease;
   z-index: 1;
 }
+.g-ui-timeline-reverse .g-ui-timeline-track-fill {
+  top: auto;
+  bottom: 0;
+}
+.g-ui-timeline-align-right .g-ui-timeline-track-segment {
+  left: auto;
+  right: var(--g-ui-timeline-track-offset, 12px);
+}
 .g-ui-timeline-has-track .g-ui-timeline-item::before {
   display: none;
 }
@@ -2168,20 +2184,48 @@ body .g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
   padding-bottom: var(--g-ui-space-24);
   z-index: 1;
 }
+.g-ui-timeline-item .g-ui-timeline-dot {
+  justify-self: center;
+}
+.g-ui-timeline-align-right {
+  width: max-content;
+  max-width: 100%;
+}
+.g-ui-timeline-align-right .g-ui-timeline-item {
+  grid-template-columns: auto 28px;
+  max-width: 100%;
+}
+.g-ui-timeline-align-right .g-ui-timeline-item .g-ui-timeline-dot {
+  order: 2;
+  justify-self: center;
+}
+.g-ui-timeline-align-right .g-ui-timeline-item .g-ui-timeline-content {
+  order: 1;
+  justify-self: end;
+  text-align: right;
+  min-width: 0;
+}
+.g-ui-timeline-align-right .g-ui-timeline-item::before {
+  left: auto;
+  right: var(--g-ui-timeline-track-offset, 12px);
+}
 .g-ui-timeline-item:last-child {
   padding-bottom: 0;
 }
 .g-ui-timeline-item::before {
   content: '';
   position: absolute;
-  left: 8px;
-  top: 20px;
+  left: var(--g-ui-timeline-track-offset, 12px);
+  top: var(--g-ui-timeline-pin-half, 10px);
   bottom: 0;
-  width: 4px;
+  width: var(--g-ui-timeline-line-width, 4px);
   background: var(--g-ui-border-muted);
 }
 .g-ui-timeline-item:last-child::before {
   display: none;
+}
+.g-ui-dot-wrapper {
+  
 }
 .g-ui-timeline-dot {
   width: 20px;
@@ -2193,15 +2237,73 @@ body .g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
   position: relative;
   z-index: 1;
   transition: border-color 0.2s ease, background 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.g-ui-timeline-pin-size-xs .g-ui-timeline-dot { width: 12px; height: 12px; border-width: 2px; }
+.g-ui-timeline-pin-size-sm .g-ui-timeline-dot { width: 16px; height: 16px; border-width: 3px; }
+.g-ui-timeline-pin-size-md .g-ui-timeline-dot { width: 20px; height: 20px; border-width: 4px; }
+.g-ui-timeline-pin-size-lg .g-ui-timeline-dot { width: 24px; height: 24px; border-width: 4px; }
+.g-ui-timeline-pin-size-xl .g-ui-timeline-dot { width: 28px; height: 28px; border-width: 4px; }
+.g-ui-timeline-line-width-xs .g-ui-timeline-track-segment { width: 2px; left: 13px; }
+.g-ui-timeline-line-width-sm .g-ui-timeline-track-segment { width: 3px; }
+.g-ui-timeline-line-width-md .g-ui-timeline-track-segment { width: 4px; }
+.g-ui-timeline-line-width-lg .g-ui-timeline-track-segment { width: 6px; left: 11px; }
+.g-ui-timeline-line-width-xl .g-ui-timeline-track-segment { width: 10px; left: 9px; }
+.g-ui-timeline-pin-radius-xs .g-ui-timeline-dot { border-radius: 2px; }
+.g-ui-timeline-pin-radius-sm .g-ui-timeline-dot { border-radius: 4px; }
+.g-ui-timeline-pin-radius-md .g-ui-timeline-dot { border-radius: 50%; }
+.g-ui-timeline-pin-radius-lg .g-ui-timeline-dot { border-radius: 50%; }
+.g-ui-timeline-pin-radius-xl .g-ui-timeline-dot { border-radius: 50%; }
+.g-ui-timeline-dot-inner {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: inherit;
+  position: absolute;
+  inset: 0;
+}
+.g-ui-timeline-pin-mode-icon .g-ui-timeline-dot,
+.g-ui-timeline-pin-mode-image .g-ui-timeline-dot,
+.g-ui-timeline-pin-mode-custom .g-ui-timeline-dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.g-ui-timeline-pin-mode-icon .g-ui-timeline-dot .g-ui-timeline-pin-icon,
+.g-ui-timeline-pin-mode-image .g-ui-timeline-dot .g-ui-timeline-pin-image,
+.g-ui-timeline-pin-mode-custom .g-ui-timeline-dot > *:not(.g-ui-timeline-dot-inner) {
+  position: relative;
+  z-index: 1;
+}
+.g-ui-timeline-pin-mode-icon .g-ui-timeline-dot .g-ui-timeline-pin-icon {
+  font-size: 12px;
+  line-height: 1;
+  color: inherit;
+}
+.g-ui-timeline-pin-size-sm .g-ui-timeline-pin-mode-icon .g-ui-timeline-dot .g-ui-timeline-pin-icon { font-size: 10px; }
+.g-ui-timeline-pin-size-lg .g-ui-timeline-dot .g-ui-timeline-pin-icon { font-size: 14px; }
+.g-ui-timeline-pin-size-xl .g-ui-timeline-dot .g-ui-timeline-pin-icon { font-size: 16px; }
+.g-ui-timeline-pin-mode-icon .g-ui-timeline-dot .g-ui-timeline-dot-inner,
+.g-ui-timeline-pin-mode-image .g-ui-timeline-dot .g-ui-timeline-dot-inner,
+.g-ui-timeline-pin-mode-custom .g-ui-timeline-dot .g-ui-timeline-dot-inner {
+  display: none;
+}
+.g-ui-timeline-pin-mode-image .g-ui-timeline-dot .g-ui-timeline-pin-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
 }
 .g-ui-timeline-item-completed .g-ui-timeline-dot {
-  border-color: var(--g-ui-primary);
-  background: var(--g-ui-primary);
+  border-color: var(--g-ui-timeline-active-color, var(--g-ui-primary));
+  background: var(--g-ui-timeline-active-color, var(--g-ui-primary));
 }
 .g-ui-timeline-item-active .g-ui-timeline-dot {
-  border-color: var(--g-ui-primary);
+  border-color: var(--g-ui-timeline-active-color, var(--g-ui-primary));
   background: var(--g-ui-bg);
-  box-shadow: 0 0 0 2px var(--g-ui-bg), 0 0 0 4px var(--g-ui-primary);
+  box-shadow: 0 0 0 2px var(--g-ui-bg), 0 0 0 4px var(--g-ui-timeline-active-color, var(--g-ui-primary));
 }
 .g-ui-timeline-item-future .g-ui-timeline-dot {
   border-color: var(--g-ui-border-muted);
@@ -2211,7 +2313,7 @@ body .g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
   cursor: pointer;
 }
 .g-ui-timeline-clickable .g-ui-timeline-item:hover .g-ui-timeline-dot {
-  border-color: var(--g-ui-primary-muted, var(--g-ui-primary));
+  border-color: var(--g-ui-primary-muted, var(--g-ui-timeline-active-color));
 }
 .g-ui-timeline-content {
   display: flex;