@granularjs/ui 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granularjs/ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "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/Autocomplete.js

@@ -0,0 +1,179 @@
+import { Div, state, after, list, when } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveValue, classFlag } from '../utils.js';
+import { TextInput } from './TextInput.js';
+import { ScrollArea } from './ScrollArea.js';
+
+function getByPath(obj, path) {
+  if (path == null || path === '') return obj;
+  const keys = String(path).trim().split('.');
+  let v = obj;
+  for (const k of keys) v = v?.[k];
+  return v;
+}
+
+function defaultFilter(query, item, getLabel) {
+  const label = getLabel(item);
+  return String(label ?? '').toLowerCase().includes(String(query ?? '').toLowerCase());
+}
+
+export function Autocomplete(...args) {
+  const { props, rawProps } = splitPropsChildren(args, {
+    data: [],
+    size: 'md',
+    valuePath: 'value',
+    labelPath: 'label',
+  });
+  const {
+    data,
+    value,
+    size,
+    valuePath,
+    labelPath,
+    filter,
+    placeholder,
+    label,
+    description,
+    error,
+    leftSection,
+    rightSection,
+    className,
+    inputClassName,
+    disabled,
+    ...rest
+  } = props;
+  const { onChange, renderItem } = rawProps;
+
+  const opened = state(false);
+  const query = state('');
+  const currentValue = state(resolveValue(value));
+
+  after(value).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved === currentValue.get()) return;
+    currentValue.set(resolved);
+  });
+
+  const dataResolved = after(data).compute((d) => (Array.isArray(d) ? d : []));
+
+  const selectedItem = after(dataResolved, currentValue, valuePath).compute(([items, val, vPath]) => {
+    if (val === undefined || val === null) return null;
+    const getVal = (it) => (vPath == null || vPath === '' ? it : getByPath(it, vPath));
+    return items.find((it) => getVal(it) === val) ?? null;
+  });
+
+  const displayText = after(selectedItem, opened, query, labelPath).compute(([sel, isOpen, q, lPath]) => {
+    const getLabelCur = (item) =>
+      lPath == null || lPath === '' ? String(item ?? '') : String(getByPath(item, lPath) ?? '');
+    if (isOpen) return q ?? '';
+    return sel ? getLabelCur(sel) : '';
+  });
+
+  const filteredItems = after(dataResolved, query, filter, labelPath).compute(([items, q, filterVal, lPath]) => {
+    const getLabelCur = (item) =>
+      lPath == null || lPath === '' ? String(item ?? '') : String(getByPath(item, lPath) ?? '');
+    const fn = resolveValue(filterVal) ?? defaultFilter;
+    return items.filter((item) => fn(q, item, getLabelCur));
+  });
+
+  const selectItem = (item) => {
+    const vPath = resolveValue(valuePath);
+    const val = vPath == null || vPath === '' ? item : getByPath(item, vPath);
+    currentValue.set(val);
+    query.set('');
+    opened.set(false);
+    onChange?.(val);
+  };
+
+  const open = () => {
+    if (resolveValue(disabled)) return;
+    opened.set(true);
+    const sel = selectedItem.get();
+    const lPath = resolveValue(labelPath);
+    const getLabelCur = (item) =>
+      lPath == null || lPath === '' ? String(item ?? '') : String(getByPath(item, lPath) ?? '');
+    query.set(sel ? getLabelCur(sel) : '');
+  };
+  const close = () => {
+    opened.set(false);
+    const sel = selectedItem.get();
+    const lPath = resolveValue(labelPath);
+    const getLabelCur = (item) =>
+      lPath == null || lPath === '' ? String(item ?? '') : String(getByPath(item, lPath) ?? '');
+    query.set(sel ? getLabelCur(sel) : '');
+  };
+
+  const { onChange: _omitOnChange, ...restForInput } = rest;
+  const inputProps = {
+    ...restForInput,
+    size,
+    label,
+    description,
+    error,
+    leftSection,
+    rightSection,
+    placeholder: resolveValue(placeholder) ?? undefined,
+    disabled,
+    value: displayText,
+    onInput: (ev) => query.set(ev?.target?.value ?? ''),
+    onFocus: open,
+    onClick: open,
+    onBlur: () => setTimeout(() => close(), 150),
+  };
+
+  const getValueForItem = (item) => {
+    const vPath = resolveValue(valuePath);
+    return vPath == null || vPath === '' ? item : getByPath(item, vPath);
+  };
+
+  const itemActiveClass = (item) =>
+    after(currentValue, valuePath).compute(([v, vPath]) => {
+      const getVal = (it) => (vPath == null || vPath === '' ? it : getByPath(it, vPath));
+      return getVal(item) === v ? 'g-ui-autocomplete-item-active' : '';
+    });
+
+  const renderOption = (item) => {
+    if (renderItem && typeof renderItem === 'function') {
+      const node = renderItem(item);
+      if (node != null)
+        return Div(
+          {
+            className: cx('g-ui-autocomplete-item', itemActiveClass(item)),
+            onClick: () => selectItem(item),
+            role: 'option',
+          },
+          node
+        );
+    }
+    return Div(
+      {
+        className: cx('g-ui-autocomplete-item', itemActiveClass(item)),
+        onClick: () => selectItem(item),
+        role: 'option',
+      },
+      after(labelPath).compute((lPath) =>
+        lPath == null || lPath === '' ? String(item ?? '') : String(getByPath(item, lPath) ?? '')
+      )
+    );
+  };
+
+  return Div(
+    { className: cx('g-ui-autocomplete', className, classFlag('g-ui-autocomplete-disabled', disabled)) },
+    TextInput({
+      ...inputProps,
+      className: cx('g-ui-autocomplete-input-wrapper', inputProps.className),
+      inputClassName: cx('g-ui-autocomplete-input', inputClassName),
+    }),
+    when(opened, () =>
+      Div(
+        {
+          className: 'g-ui-autocomplete-dropdown',
+          role: 'listbox',
+        },
+        ScrollArea(
+          { className: 'g-ui-autocomplete-list', style: { maxHeight: '240px' } },
+          list(filteredItems, (item) => renderOption(item))
+        )
+      )
+    )
+  );
+}

package/src/components/DateInput.js

@@ -70,8 +70,8 @@ export function DateInput(...args) {
   const opened = state(false);
 
   after(value).change((next) => {
-    if (value.get() == next) return;
     const resolved = resolveDate(next);
+    if (isSameDay(resolved, currentDate.get())) return;
     if (resolved == null) {
       currentDate.set(null);
       textValue.set('');
@@ -83,8 +83,6 @@ export function DateInput(...args) {
 
   after(textValue).change((next) => {
     const parsed = parseDate(next);
-    console.log('parsed', parsed);
-    console.log('currentDate', currentDate.get());
     if (!parsed) return;
     if (isSameDay(parsed, currentDate.get())) return;
     currentDate.set(parsed);

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/Pagination.js

@@ -5,7 +5,8 @@ export function Pagination(...args) {
   const { props, rawProps } = splitPropsChildren(args, { total: 1, size: 'md' });
   const { page, total, size, className, ...rest } = props;
   const { onChange } = rawProps;
-  const currentState = state(resolveValue(page ?? 1));
+  const currentState = state(resolveValue(page) ?? 1);
+
   after(page).change((next) => {
     const resolved = resolveValue(next);
     if (resolved == null) return;

package/src/components/ProgressRing.js

@@ -1,11 +1,45 @@
-import { Div } from '@granularjs/core';
-import { cx, splitPropsChildren } from '../utils.js';
+import { Div, after, resolve } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+function clampValue(v) {
+  const n = Number(v);
+  if (Number.isNaN(n)) return 0;
+  return Math.max(0, Math.min(100, n));
+}
 
 export function ProgressRing(...args) {
-  const { props } = splitPropsChildren(args, { size: 'md' });
-  const { size, className, ...rest } = props;
-  return Div({
-    ...rest,
-    className: cx('g-ui-progress-ring', [size, (value) => `g-ui-progress-ring-size-${value}`], className),
+  const { props } = splitPropsChildren(args, { size: 'md', value: null, color: 'primary' });
+  const { size, value, color, className, ...rest } = props;
+
+  const hasValue = after(value).compute((v) => v != null && v !== '');
+  const ringValue = after(value).compute((v) => clampValue(v));
+  const style = after(ringValue, hasValue).compute(([val, has]) => {
+    if (!has) return {};
+    const num = Number(val);
+    const deg = Number.isNaN(num) ? 0 : Math.max(0, Math.min(360, num * 3.6));
+    return {
+      background: `conic-gradient(var(--g-ui-progress-ring-fill, var(--g-ui-primary)) 0deg ${deg}deg, var(--g-ui-border-muted) ${deg}deg 360deg)`,
+    };
   });
+  const indeterminateClass = after(hasValue).compute((has) => (has ? '' : 'g-ui-progress-ring-indeterminate'));
+  const ariaValueNow = after(hasValue, value).compute(([has, v]) => (has ? clampValue(v) : undefined));
+
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-progress-ring',
+        classVar('g-ui-progress-ring-', color, 'primary'),
+        [size, (s) => `g-ui-progress-ring-size-${resolve(s) ?? 'md'}`],
+        indeterminateClass,
+        className
+      ),
+      style,
+      role: 'progressbar',
+      'aria-valuemin': 0,
+      'aria-valuemax': 100,
+      'aria-valuenow': ariaValueNow,
+    },
+    Div({ className: 'g-ui-progress-ring-hole' })
+  );
 }

package/src/components/Radio.js

@@ -1,13 +1,42 @@
-import { Div, Input, Label, Span, when } from '@granularjs/core';
+import { Div, Input, Label, Span, when, after, state } from '@granularjs/core';
 import { cx, splitPropsChildren, classVar } from '../utils.js';
+import { radioGroupContext } from './RadioGroup.js';
+
 
 export function Radio(...args) {
-  const { props } = splitPropsChildren(args, { size: 'md' });
-  const { label, description, size, className, inputProps, ...rest } = props;
+  const { props, rawProps } = splitPropsChildren(args, { size: 'md' });
+  const { label, name, value, checked, description, size, className, inputProps, ...rest } = props;
+  const { onChange } = rawProps;
+
+  const checkedState = state(checked?.get() ?? false);
+
+  const radioGroupState = radioGroupContext.state();
+  const inputName = after(radioGroupState.name, name).compute(([radioGroupName, inputGroupName]) => radioGroupName || inputGroupName);
+
+  after(checked, radioGroupState.selected).change((values) => {
+    const [checkedValue, selectedValue] = values;
+    if (radioGroupState.get().name) {
+      checkedState.set(selectedValue === value.get());
+    } else {
+      checkedState.set(checkedValue);
+    }
+  });
+
+  after(checkedState).change((next) => {
+    onChange?.(next);
+    if (!next) return;
+    if (radioGroupState.get().name) {
+      radioGroupState.set().selected = value.get();
+    }
+  });
+
   const control = Label(
     { className: 'g-ui-radio-control' },
     Input({
       type: 'radio',
+      name: inputName,
+      value: value,
+      checked: checkedState,
       className: cx('g-ui-radio-input', classVar('g-ui-radio-size-', size, 'md'), inputProps?.className),
       ...rest,
     }),

package/src/components/RadioGroup.js

@@ -1,8 +1,28 @@
-import { Div } from '@granularjs/core';
+import { Div, context, after } from '@granularjs/core';
 import { cx, splitPropsChildren } from '../utils.js';
 
+export const radioGroupContext = context({ name: '', selected: null });
+
 export function RadioGroup(...args) {
-  const { props, children } = splitPropsChildren(args);
-  const { className, ...rest } = props;
-  return Div({ ...rest, className: cx('g-ui-stack g-ui-gap-sm', className) }, children);
+  const { props, children, rawProps } = splitPropsChildren(args);
+  const { className, name, selected, onChange: _onChange, ...rest } = props;
+  const { onChange } = rawProps;
+
+  const scope = radioGroupContext.scope({ name: name?.get(), selected: selected?.get() });
+  console.log('selected?.get()', selected?.get())
+
+  after(name).change((next) => {
+    scope.set().name = next;
+  });
+  after(selected).change((next) => {
+    if (next === scope.selected.get()) return;
+    scope.set().selected = next;
+  });
+
+  after(scope.selected).change((next) => {
+    onChange?.(next);
+  });
+
+
+  return scope.serve(Div({ ...rest, className: cx('g-ui-stack g-ui-gap-sm', className) }, children));
 }

package/src/components/RangePicker.js

@@ -1,45 +1,85 @@
-import { Div, state, after } from '@granularjs/core';
+import { Div, Span, state, after } from '@granularjs/core';
 import { cx, splitPropsChildren, resolveValue } from '../utils.js';
-import { TextInput } from './TextInput.js';
+import { DateInput } from './DateInput.js';
+
+function resolveDate(v) {
+  const resolved = resolveValue(v);
+  if (resolved instanceof Date) return resolved;
+  if (resolved == null || resolved === '') return null;
+  const d = new Date(resolved);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+function toDatePair(value) {
+  const raw = resolveValue(value);
+  if (raw == null) return [null, null];
+  const arr = Array.isArray(raw) ? raw : [raw];
+  return [resolveDate(arr[0]), resolveDate(arr[1])];
+}
+
+function isSameDay(a, b) {
+  if (!a || !b) return a === b;
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
 
 export function RangePicker(...args) {
   const { props, rawProps } = splitPropsChildren(args, { size: 'md' });
-  const { value, size, className, ...rest } = props;
+  const { value, size, minDate, maxDate, className, placeholderMin, placeholderMax, ...rest } = props;
   const { onChange } = rawProps;
-  const currentState = state(resolveValue(value) ?? ['', '']);
+
+  const [initialStart, initialEnd] = toDatePair(value);
+  const startState = state(initialStart);
+  const endState = state(initialEnd);
 
   after(value).change((next) => {
-    const resolved = resolveValue(next);
-    if (resolved == null) return;
-    currentState.set(resolved);
+    const [s, e] = toDatePair(next);
+    if (isSameDay(s, startState.get()) && isSameDay(e, endState.get())) return;
+    startState.set(s);
+    endState.set(e);
   });
 
-  const setValue = (next) => {
-    currentState.set(next);
-    onChange?.(next);
+  const notify = () => {
+    const s = startState.get();
+    const e = endState.get();
+    onChange?.([s ?? null, e ?? null]);
+  };
+
+  const setStart = (date) => {
+    const end = endState.get();
+    if (date && end && date > end) endState.set(date);
+    startState.set(date);
+    notify();
+  };
+
+  const setEnd = (date) => {
+    const start = startState.get();
+    if (date && start && date < start) startState.set(date);
+    endState.set(date);
+    notify();
   };
 
   return Div(
     { ...rest, className: cx('g-ui-range-picker', props.className ?? className) },
-    TextInput({
+    DateInput({
+      ...rest,
       size,
-      type: 'text',
-      inputMode: 'numeric',
-      value: after(currentState).compute((current) => current?.[0] ?? ''),
-      onInput: (ev) => {
-        const current = currentState.get() ?? ['', ''];
-        setValue([ev.target.value, current[1]]);
-      },
+      value: startState,
+      onChange: setStart,
+      maxDate: endState,
+      placeholder: resolveValue(placeholderMin) ?? undefined,
     }),
-    TextInput({
+    Span({ className: 'g-ui-range-picker-separator' }, '–'),
+    DateInput({
+      ...rest,
       size,
-      type: 'text',
-      inputMode: 'numeric',
-      value: after(currentState).compute((current) => current?.[1] ?? ''),
-      onInput: (ev) => {
-        const current = currentState.get() ?? ['', ''];
-        setValue([current[0], ev.target.value]);
-      },
+      value: endState,
+      onChange: setEnd,
+      minDate: startState,
+      placeholder: resolveValue(placeholderMax) ?? undefined,
     })
   );
 }

package/src/components/Select.js

@@ -1,5 +1,7 @@
 import { Div, Span, when, state, after } from '@granularjs/core';
 import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
+import { keyboardArrowDownSvg } from '../theme/icons.js';
+import { Icon } from './Icon.js';
 
 export function Select(...args) {
   const { props, rawProps } = splitPropsChildren(args, { data: [], size: 'md' });
@@ -44,7 +46,7 @@ export function Select(...args) {
         Span({ className: 'g-ui-select-value' }, displayLabel)
       ),
       when(rightSection, () => Div({ className: 'g-ui-input-section' }, rightSection), () =>
-        Span({ className: 'g-ui-select-caret' }, '▾')
+        Span({ className: 'g-ui-select-caret' }, Icon({ innerHTML: keyboardArrowDownSvg }))
       )
     ),
     when(open, () =>

package/src/components/SelectSearch.js

@@ -1,37 +1,5 @@
-import { Div, Span } from '@granularjs/core';
-import { cx, splitPropsChildren } from '../utils.js';
-import { state } from '@granularjs/core';
-import { TextInput } from './TextInput.js';
+import { Autocomplete } from './Autocomplete.js';
 
 export function SelectSearch(...args) {
-  const { props, rawProps } = splitPropsChildren(args, { data: [] });
-  const { data, className, ...rest } = props;
-  const { onChange } = rawProps;
-  const query = state('');
-
-  const items = data.filter((item) =>
-    String(item.label || '').toLowerCase().includes(String(query.get()).toLowerCase())
-  );
-
-  return Div(
-    { ...rest, className: cx('g-ui-select-search', className) },
-    TextInput({
-      inputClassName: 'g-ui-select-search-input',
-      placeholder: 'Search...',
-      value: query,
-      onInput: (ev) => query.set(ev?.target?.value ?? ''),
-    }),
-    Div(
-      { className: 'g-ui-select-search-list' },
-      items.map((item) =>
-        Div(
-          {
-            className: 'g-ui-select-search-item',
-            onClick: () => onChange?.(item.value),
-          },
-          item.label
-        )
-      )
-    )
-  );
+  return Autocomplete(...args);
 }

package/src/components/Slider.js

@@ -1,4 +1,4 @@
-import { Div, after, state, when } from '@granularjs/core';
+import { Div, after, state, when, list } from '@granularjs/core';
 import { cx, splitPropsChildren, classVar, classFlag, resolveBool, resolveValue } from '../utils.js';
 
 export function Slider(...args) {
@@ -21,10 +21,14 @@ export function Slider(...args) {
     ...rest
   } = props;
   const currentState = state(resolveValue(value ?? min));
+
+  const hasMarks = after(marks).compute((m) => m && m.length > 0);
+  
   after(value).change((next) => {
     if (next == null) return;
     currentState.set(resolveValue(next));
   });
+
   const getBounds = () => {
     const minValue = Number(resolveValue(min));
     const maxValue = Number(resolveValue(max));
@@ -33,11 +37,13 @@ export function Slider(...args) {
     }
     return { minValue: Math.min(minValue, maxValue), maxValue: Math.max(minValue, maxValue) };
   };
+
   const getStep = () => {
     const stepValue = Number(resolveValue(step));
     if (Number.isFinite(stepValue) && stepValue > 0) return stepValue;
     return 1;
   };
+
   const setValue = (next) => {
     const { minValue, maxValue } = getBounds();
     const stepValue = getStep();
@@ -47,6 +53,7 @@ export function Slider(...args) {
     currentState.set(stepped);
     onChange?.(stepped);
   };
+
   const percent = after(currentState).compute((v) => {
     const { minValue, maxValue } = getBounds();
     const range = maxValue - minValue;
@@ -54,6 +61,7 @@ export function Slider(...args) {
     const pct = ((Number(v ?? minValue) - minValue) / range) * 100;
     return Math.max(0, Math.min(100, pct));
   });
+
   const updateFromEvent = (ev, getRect) => {
     const rect = getRect?.();
     if (!rect || rect.width === 0) return;
@@ -62,6 +70,7 @@ export function Slider(...args) {
     const { minValue, maxValue } = getBounds();
     setValue(minValue + ratio * (maxValue - minValue));
   };
+
   const startDrag = (ev) => {
     if (resolveBool(disabled)) return;
     ev.preventDefault?.();
@@ -78,6 +87,7 @@ export function Slider(...args) {
     window.addEventListener('pointermove', handleMove);
     window.addEventListener('pointerup', handleUp);
   };
+
   return Div(
     {
       ...rest,
@@ -99,9 +109,10 @@ export function Slider(...args) {
         style: after(percent).compute((p) => ({ left: `${p}%` })),
       })
     ),
+    when(hasMarks, () => Div({ className: 'g-ui-slider-marks-placeholder' })),
     when(marks, () => Div(
       { className: 'g-ui-slider-marks' },
-      marks.map((mark) => SliderMark({ mark, getBounds }))
+      list(marks, (mark) => SliderMark({ mark, getBounds }))
     ))
   );
 }
@@ -110,8 +121,8 @@ export const SliderMark = ({ mark, getBounds }) => {
   const { minValue, maxValue } = getBounds();
   const range = maxValue - minValue;
 
-  const value = mark.value ?? mark;
-  const label = mark.label ?? String(mark.value) ?? value;
+  const value = after(mark).compute((m) => m.value ?? m);
+  const label = after(mark).compute((m) => m.label ?? String(m.value) ?? value);
 
   const markValue = Number(value);
   let pct = 0;

package/src/components/Stepper.js

@@ -1,4 +1,4 @@
-import { Div } from '@granularjs/core';
+import { Div, list } from '@granularjs/core';
 import { cx, splitPropsChildren } from '../utils.js';
 
 export function Stepper(...args) {
@@ -6,10 +6,11 @@ export function Stepper(...args) {
   const { active, items, className, ...rest } = props;
   return Div(
     { ...rest, className: cx('g-ui-stepper', className) },
-    items.map((item, idx) =>
+    list(items, (item, idx) =>
       Div(
         { className: cx('g-ui-stepper-item', [active, (value) => {
-          if (idx === value) return 'g-ui-stepper-active';
+          console.log('value', value, 'idx', idx);
+          if (idx.get() === value) return 'g-ui-stepper-active';
           return '';
         }]) },
         Div({ className: 'g-ui-stepper-index' }, String(idx + 1)),