@granularjs/ui 0.2.0 → 0.3.0

package/src/components/SwitchGroup.js

@@ -1,8 +1,24 @@
-import { Div } from '@granularjs/core';
+import { Div, context, state, after } from '@granularjs/core';
 import { cx, splitPropsChildren } from '../utils.js';
 
+
+export const switchGroupContext = context({ name: null, selected: null });
+
 export function SwitchGroup(...args) {
-  const { props, children } = splitPropsChildren(args);
-  const { className, ...rest } = props;
-  return Div({ ...rest, className: cx('g-ui-switch-group', className) }, children);
+  const { props, rawProps, children } = splitPropsChildren(args);
+  const { className, name, selected, onChange: _onChange, ...rest } = props;
+  const { onChange } = rawProps;
+
+  const scope = switchGroupContext.scope({ name: name?.get(), selected: selected?.get() });
+  
+  after(scope.selected).change((next) => {
+    onChange?.(next);
+  });
+  
+  after(selected).change((next) => {
+    if(next === scope.selected.get()) return;
+    scope.set().selected = next;
+  })
+
+  return scope.serve(Div({ ...rest, className: cx('g-ui-switch-group', className) }, children));
 }

package/src/components/Table.js

@@ -1,4 +1,4 @@
-import { Table as HtmlTable, Thead, Tbody, Tr, Th, Td } from '@granularjs/core';
+import { Table as HtmlTable, Thead, Tbody, Tr, Th, Td, list, when, after } from '@granularjs/core';
 import { cx, splitPropsChildren, classFlag } from '../utils.js';
 
 export function Table(...args) {
@@ -10,10 +10,13 @@ export function Table(...args) {
     highlightOnHover,
     withBorder,
     withColumnBorders,
+    withRowBorders,
     className,
     style,
     ...rest
   } = props;
+
+  const hasHeaders = after(headers).compute((next) => next.length > 0);
   return HtmlTable(
     {
       ...rest,
@@ -23,20 +26,43 @@ export function Table(...args) {
         classFlag('g-ui-table-hover', highlightOnHover),
         classFlag('g-ui-table-with-border', withBorder),
         classFlag('g-ui-table-column-borders', withColumnBorders),
+        classFlag('g-ui-table-row-borders', withRowBorders),
         className
       ),
     },
-    headers.length
-      ? Thead(Tr(headers.map((header) => Th(header))))
-      : null,
-    Tbody(
-      rows.map((row) =>
-        Tr(
-          Array.isArray(row)
-            ? row.map((cell) => Td(cell))
-            : Object.values(row).map((cell) => Td(cell))
-        )
-      )
-    )
+    when(hasHeaders, () => Thead(
+      TableRow(headers, true)
+    )),
+    Tbody(list(rows, (row) => TableRow(row, false)))
   );
 }
+const TableRow = (row, header) => {
+  const isArray = after(row).compute((next) => Array.isArray(next));
+
+  const ObjectRow = (row) => {
+    const cells = after(row).compute((next) => Object.values(next));
+    return ArrayRow(cells)
+  }
+
+  const ArrayRow = (row) => {
+    return list(row, (next) => {
+      console.log('INFO ABOUT NEXT', header);
+      return header ? TableHeaderCell(next) : TableCell(next)
+    })
+  }
+
+  return Tr(
+    when(isArray,
+      () => ArrayRow(row),
+      () => ObjectRow(row)
+    )
+  )
+}
+
+const TableCell = (content) => {
+  return Td(content)
+}
+
+const TableHeaderCell = (content) => {
+  return Th(content)
+}

package/src/components/Timeline.js

@@ -1,22 +1,259 @@
-import { Div, when } from '@granularjs/core';
+import { Div, when, list, after, resolve, state } from '@granularjs/core';
 import { cx, splitPropsChildren } from '../utils.js';
 
+const DOT_CENTER_OFFSET_PX = 10;
+
+function getWeights(items) {
+  const list = items ?? [];
+  return list.map((item) => {
+    if (item == null) return 1;
+    const w = Number(item.weight);
+    return Number.isFinite(w) && w >= 0 ? w : 1;
+  });
+}
+
+function getWeightContext(items) {
+  const n = (items ?? []).length;
+  if (n < 2) return { totalWeight: 0, cumulativeWeights: [0] };
+  const weights = getWeights(items);
+  const segmentWeights = weights.slice(0, n - 1);
+  const totalWeight = segmentWeights.reduce((s, w) => s + w, 0);
+  const cumulativeWeights = [0];
+  for (let i = 0; i < segmentWeights.length; i++) {
+    cumulativeWeights.push(cumulativeWeights[i] + segmentWeights[i]);
+  }
+  return { totalWeight, cumulativeWeights };
+}
+
+function progressToActiveStepWeighted(progressPct, cumulativeWeights, totalWeight, n) {
+  if (n < 1 || totalWeight <= 0) return 0;
+  const pct = Math.max(0, Math.min(100, progressPct));
+  for (let k = n - 1; k >= 0; k--) {
+    const threshold = (cumulativeWeights[k] / totalWeight) * 100;
+    if (pct >= threshold) return k;
+  }
+  return 0;
+}
+
+function computeActiveStepAndFill(mode, active, progress, elapsedMs, stepDurationsMs, totalDurationMs, items) {
+  const m = mode;
+  const n = (items ?? []).length;
+  if (n === 0) return { activeStep: 0, progressPct: 0 };
+
+  if (m === 'step') {
+    const step = Math.max(0, Math.min(n - 1, Math.floor(active ?? 0)));
+    return { activeStep: step, progressPct: 0 };
+  }
+
+  if (m === 'percent') {
+    const pct = Math.max(0, Math.min(100, Number(progress) || 0));
+    const ctx = getWeightContext(items);
+    const step = progressToActiveStepWeighted(pct, ctx.cumulativeWeights, ctx.totalWeight, n);
+    return { activeStep: step, progressPct: pct };
+  }
+
+  if (m === 'time') {
+    const elapsed = Number(elapsedMs) || 0;
+    const durations = stepDurationsMs;
+    const total = totalDurationMs;
+    let totalDuration = 0;
+    if (Array.isArray(durations) && durations.length >= n) {
+      totalDuration = durations.slice(0, n).reduce((s, d) => s + (Number(d) || 0), 0);
+    } else if (typeof total === 'number' && total > 0) {
+      totalDuration = total;
+    }
+    if (totalDuration <= 0) return { activeStep: 0, progressPct: 0 };
+    const segment = totalDuration / n;
+    let step = 0;
+    if (Array.isArray(durations) && durations.length >= n) {
+      let cumulative = 0;
+      for (let i = 0; i < n; i++) {
+        cumulative += Number(durations[i]) || 0;
+        if (elapsed < cumulative) {
+          step = i;
+          break;
+        }
+        step = i;
+      }
+    } else {
+      step = Math.min(n - 1, Math.floor(elapsed / segment));
+    }
+    const progressPct = Math.min(100, (elapsed / totalDuration) * 100);
+    const ctx = getWeightContext(items);
+    const stepWeighted = progressToActiveStepWeighted(progressPct, ctx.cumulativeWeights, ctx.totalWeight, n);
+    return { activeStep: stepWeighted, progressPct };
+  }
+
+  return { activeStep: 0, progressPct: 0 };
+}
+
+function computeSegmentFillPercent(mode, activeStep, progressPct, segmentIndex, n, weightContext) {
+  if (n < 2 || segmentIndex < 0 || segmentIndex >= n - 1) return 0;
+  if (mode === 'step') {
+    return activeStep > segmentIndex ? 100 : 0;
+  }
+  const { totalWeight, cumulativeWeights } = weightContext ?? getWeightContext([]);
+  if (totalWeight <= 0) return 0;
+  const segmentStart = (cumulativeWeights[segmentIndex] / totalWeight) * 100;
+  const segmentEnd = (cumulativeWeights[segmentIndex + 1] / totalWeight) * 100;
+  if (progressPct <= segmentStart) return 0;
+  if (progressPct >= segmentEnd) return 100;
+  const range = segmentEnd - segmentStart;
+  return range <= 0 ? 0 : ((progressPct - segmentStart) / range) * 100;
+}
+
+let timelineIdCounter = 0;
+
+function measureSegmentLayout(timelineId) {
+  const el = document.getElementById(timelineId);
+  if (!el) return;
+  const itemEls = el.querySelectorAll('.g-ui-timeline-item');
+  if (itemEls.length < 2) return [];
+  const segments = [];
+  for (let i = 0; i < itemEls.length - 1; i++) {
+    const top = itemEls[i].offsetTop + DOT_CENTER_OFFSET_PX;
+    const height = itemEls[i + 1].offsetTop - itemEls[i].offsetTop;
+    segments.push({ top, height });
+  }
+  return segments;
+}
+
 export function Timeline(...args) {
-  const { props } = splitPropsChildren(args, { items: [] });
-  const { items, className, ...rest } = props;
+  const { props, rawProps } = splitPropsChildren(args, {
+    items: [],
+    mode: 'step',
+    active: 0,
+    progress: 0,
+    elapsedMs: 0,
+    stepDurationsMs: null,
+    totalDurationMs: null,
+    clickable: false,
+  });
+  const {
+    items,
+    mode,
+    active,
+    progress,
+    elapsedMs,
+    stepDurationsMs,
+    totalDurationMs,
+    clickable,
+    className,
+    ...rest
+  } = props;
+  const { onChange } = rawProps;
+
+  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;
+      return computeActiveStepAndFill(
+        mode,
+        active,
+        progress,
+        elapsedMs,
+        stepDurationsMs,
+        totalDurationMs,
+        items
+      );
+    }
+  );
+
+  const showTrack = after(mode).compute((m) => {
+    const v = resolve(m);
+    return v === 'time' || v === 'percent' || v === 'step';
+  });
+
+  const resolvedMode = after(mode).compute((m) => resolve(m));
+
+  function scheduleMeasure() {
+    setTimeout(() => {
+      const segments = measureSegmentLayout(timelineId);
+      if (segments.length) segmentLayout.set(segments);
+    }, 0);
+  }
+
+  after(items).change(() => scheduleMeasure());
+  scheduleMeasure();
+
   return Div(
-    { ...rest, className: cx('g-ui-timeline', className) },
-    items.map((item) =>
-      Div(
-        { className: 'g-ui-timeline-item' },
+    {
+      ...rest,
+      id: timelineId,
+      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' : '')),
+        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
+          );
+        });
+        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 step = s?.activeStep ?? 0;
+        const index = resolve(i) ?? 0;
+        if (index < step) return 'completed';
+        if (index === 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);
+            }
+          : undefined;
+      return Div(
+        {
+          className: cx('g-ui-timeline-item', itemClass),
+          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)),
+          when(item.description, () =>
+            Div({ className: 'g-ui-timeline-desc' }, item.description)
+          ),
           item.content
         )
-      )
-    )
+      );
+    })
   );
 }

package/src/components/Toast.js

@@ -1,16 +1,28 @@
-import { Div, Button, when } from '@granularjs/core';
+import { Div, Button, when, state} from '@granularjs/core';
 import { cx, splitPropsChildren } from '../utils.js';
+import { closeSvg } from '../theme/icons.js';
+import { Icon } from './Icon.js';
 
 export function Toast(...args) {
-  const { props, children } = splitPropsChildren(args);
-  const { title, onClose, className, ...rest } = props;
-  return Div(
+  const { props, rawProps, children } = splitPropsChildren(args);
+  const { title,  className, ...rest } = props;
+  const { onClose } = rawProps;
+  const visible = state(true);
+  const close = () => {
+    visible.set(false);
+    onClose?.();
+    console.log('close');
+  }
+
+  return when(visible, () => Div(
     { ...rest, className: cx('g-ui-toast', className) },
     Div(
       { className: 'g-ui-toast-row' },
       when(title, () => Div({ className: 'g-ui-toast-title' }, title)),
-      when(onClose, () => Button({ className: 'g-ui-toast-close', onClick: onClose }, '×'))
+      Button({ className: 'g-ui-toast-close', onClick: close },
+        Icon({ innerHTML: closeSvg })
+      )
     ),
     children
-  );
+  ))
 }

package/src/components/ToastStack.js

@@ -1,21 +1,15 @@
-import { Div, when } from '@granularjs/core';
+import { Div, when, list, portal } from '@granularjs/core';
 import { cx, splitPropsChildren } from '../utils.js';
+import { Toast } from './Toast.js';
 
 export function ToastStack(...args) {
-  const { props } = splitPropsChildren(args, { items: [] });
-  const { items, className, onClose, timeout, ...rest } = props;
-  return Div(
+  const { props, rawProps } = splitPropsChildren(args, { items: [] });
+  const { items, className, timeout, ...rest } = props;
+  const { onClose } = rawProps;
+  return portal(Div(
     { ...rest, className: cx('g-ui-toast-stack', className) },
-    items.map((item) =>
-      Div(
-        { className: cx('g-ui-toast', [timeout, 'g-ui-toast-auto']) },
-        Div(
-          { className: 'g-ui-toast-row' },
-          when(item.title, () => Div({ className: 'g-ui-toast-title' }, item.title)),
-          when(onClose, () => Div({ className: 'g-ui-toast-close', onClick: () => onClose(item) }, '×'))
-        ),
-        item.message
-      )
+    list(items, (item) =>
+      Toast({ title: item.title, onClose: () => onClose?.(item) }, item.message)
     )
-  );
+  ));
 }

package/src/index.js

@@ -76,6 +76,7 @@ export { SearchInput } from './components/SearchInput.js';
 export { CopyButton } from './components/CopyButton.js';
 export { ProgressRing } from './components/ProgressRing.js';
 export { Toast } from './components/Toast.js';
+export { Autocomplete } from './components/Autocomplete.js';
 export { SelectSearch } from './components/SelectSearch.js';
 export { SwitchGroup } from './components/SwitchGroup.js';
 export { RangePicker } from './components/RangePicker.js';

package/src/theme/icons.js

@@ -7,4 +7,5 @@ export const searchSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px"
 export const plusSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>';
 export const editSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h357l-80 80H200v560h560v-278l80-80v358q0 33-23.5 56.5T760-120H200Zm280-360v-80h240v80H480Zm0 160v-80h320v80H480Zm0 160v-80h320v80H480ZM360-360v-80h80v80h-80Zm0 160v-80h80v80h-80Zm0 160v-80h80v80h-80Zm160-320h280l-36-37 37-37v74H520Zm-160 0h80v-80h-80v80ZM120-600v-160l160-160h160l-80 80H200v240h-80Zm80-240v-80 80Z"/></svg>';
 export const deleteSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>';
-export const calendarTodaySvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z"/></svg>';
+export const calendarTodaySvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z"/></svg>';
+export const keyboardArrowDownSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>';