@granularjs/ui 0.1.0

package/src/components/MultiSelect.js

@@ -0,0 +1,153 @@
+import { Div, Span, Input, when, after, state } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
+import { checkedSvg, closeSvg } from '../theme/icons.js';
+
+export function MultiSelect(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { data: [], size: 'md', searchable: true });
+  const { value, data, size, className, placeholder, searchable, ...rest } = props;
+  const { onChange, onSearchChange } = rawProps;
+  const currentState = state(resolveValue(value) ?? []);
+  const searchState = state('');
+  const openState = state(false);
+  const rootNode = state(null);
+
+  const normalizeData = (items) => {
+    const resolved = resolveValue(items) ?? [];
+    return resolved.map((item) => {
+      if (typeof item === 'string') return { value: item, label: item };
+      if (item && typeof item === 'object') return item;
+      return { value: String(item), label: String(item) };
+    });
+  };
+
+  after(value).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved == null) return;
+    currentState.set(resolved);
+  });
+  let outsideCleanup = null;
+  after(openState).change((next) => {
+    if (outsideCleanup) {
+      outsideCleanup();
+      outsideCleanup = null;
+    }
+    if (!next) return;
+    const handler = (ev) => {
+      const root = rootNode.get();
+      if (!root) return;
+      if (root.contains(ev.target)) return;
+      openState.set(false);
+    };
+    document.addEventListener('mousedown', handler);
+    outsideCleanup = () => document.removeEventListener('mousedown', handler);
+  });
+  after(searchState).change((next) => {
+    onSearchChange?.(next);
+  });
+
+  const toggle = (val) => {
+    const selected = currentState.get() ?? [];
+    const next = selected.includes(val)
+      ? selected.filter((v) => v !== val)
+      : selected.concat(val);
+    currentState.set(next);
+    onChange?.(next);
+  };
+
+  const normalizedData = after(data).compute((nextData) => normalizeData(nextData));
+  const filteredItems = after(normalizedData, searchState).compute(([items, query]) => {
+    const q = String(resolveValue(query) ?? '').toLowerCase().trim();
+    if (!q) return items;
+    return items.filter((item) => String(item.label ?? '').toLowerCase().includes(q));
+  });
+  const isEmpty = after(currentState, searchState).compute(([nextSelected, query]) => {
+    const list = resolveValue(nextSelected) ?? [];
+    const q = String(resolveValue(query) ?? '');
+    return (!list.length) && !q;
+  });
+  const isSearchable = after(searchable).compute((next) => !!next);
+
+  return Div(
+    { ...rest, node: rootNode, className: cx('g-ui-select-multi-root', className) },
+    Div(
+      {
+        className: cx('g-ui-select-multi', classVar('g-ui-select-multi-size-', size, 'md')),
+        onClick: () => openState.set(true),
+      },
+      after(normalizedData, currentState).compute(([items, current]) => {
+        const list = resolveValue(current) ?? [];
+        return list.map((val) => {
+          const match = (items ?? []).find((entry) => entry.value === val);
+          const label = match?.label ?? val;
+          return Span(
+            {
+              className: 'g-ui-select-tag',
+            },
+            Span(
+              {
+                className: 'g-ui-select-tag-label',
+                onClick: (ev) => {
+                  ev?.stopPropagation?.();
+                },
+              },
+              label
+            ),
+            Span({
+              className: 'g-ui-select-tag-remove',
+              innerHTML: closeSvg,
+              onClick: (ev) => {
+                ev?.stopPropagation?.();
+                toggle(val);
+              },
+            })
+          );
+        });
+      }),
+      when(isEmpty, () => Span({ className: 'g-ui-select-multi-placeholder' }, placeholder ?? 'Select...')),
+      when(isSearchable, () =>
+        Input({
+          className: 'g-ui-select-multi-input',
+          value: searchState,
+          onInput: (ev) => searchState.set(ev.target?.value ?? ''),
+          onFocus: () => openState.set(true),
+        })
+      )
+    ),
+    when(openState, () =>
+      Div(
+        { className: 'g-ui-select-dropdown' },
+        after(filteredItems).compute((items) => {
+          if (!items.length) {
+            return Div({ className: 'g-ui-select-item' }, 'Nothing found');
+          }
+          return items.map((item) =>
+            Div(
+              {
+                className: cx(
+                  'g-ui-select-item',
+                  item.disabled && 'g-ui-select-item-disabled',
+                  after(currentState).compute((current) => {
+                    const list = resolveValue(current) ?? [];
+                    return list.includes(item.value) ? 'g-ui-select-item-active' : '';
+                  })
+                ),
+                onClick: () => {
+                  if (item.disabled) return;
+                  toggle(item.value);
+                },
+              },
+              Span({
+                className: 'g-ui-select-item-check',
+                innerHTML: after(currentState).compute((current) => {
+                  const list = resolveValue(current) ?? [];
+                  return list.includes(item.value) ? checkedSvg : '';
+                }),
+              }),
+              Span({ className: 'g-ui-select-item-label' }, item.label)
+            )
+          );
+        })
+      )
+    )
+  );
+}

package/src/components/NavLink.js

@@ -0,0 +1,72 @@
+import { A, Div, Span, when, after, state } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classFlag, resolveValue, toPx } from '../utils.js';
+
+export function NavLink(...args) {
+  const { props, rawProps, children } = splitPropsChildren(args, { variant: 'subtle', childrenOffset: 24 });
+  const {
+    label,
+    description,
+    leftSection,
+    rightSection,
+    active,
+    disabled,
+    variant,
+    childrenOffset,
+    opened,
+    defaultOpened,
+    className,
+    padding,
+    ...rest
+  } = props;
+  const { onClick, onChange } = rawProps;
+  const hasChildren = children.length > 0;
+  const openState = state(resolveValue(opened) ?? resolveValue(defaultOpened) ?? false);
+  after(opened).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved == null) return;
+    openState.set(!!resolved);
+  });
+  const childrenStyle = after(childrenOffset).compute((next) => ({
+    paddingLeft: toPx(resolveValue(next ?? 24)) ?? '24px',
+  }));
+
+  const handleClick = (ev) => {
+    if (resolveValue(disabled)) {
+      ev?.preventDefault?.();
+      return;
+    }
+    if (hasChildren) {
+      const next = !openState.get();
+      openState.set(next);
+      onChange?.(next);
+    }
+    onClick?.(ev);
+  };
+
+  return Div(
+    { className: cx('g-ui-navlink-root', className) },
+    A(
+      {
+        ...rest,
+        className: cx(
+          'g-ui-navlink',
+          classVar('g-ui-navlink-variant-', variant, 'subtle'),
+          classFlag('g-ui-navlink-active', active),
+          classFlag('g-ui-navlink-disabled', disabled),
+          classVar('g-ui-navlink-padding-', padding, 'md')
+        ),
+        onClick: handleClick,
+      },
+      when(leftSection, () => Span({ className: 'g-ui-navlink-section g-ui-navlink-left' }, leftSection)),
+      Div(
+        { className: 'g-ui-navlink-body' },
+        when(label, () => Div({ className: 'g-ui-navlink-label' }, label)),
+        when(description, () => Div({ className: 'g-ui-navlink-description' }, description))
+      ),
+      when(rightSection, () => Span({ className: 'g-ui-navlink-section g-ui-navlink-right' }, rightSection))
+    ),
+    hasChildren
+      ? when(openState, () => Div({ className: 'g-ui-navlink-children', style: childrenStyle }, children))
+      : null
+  );
+}

package/src/components/Notification.js

@@ -0,0 +1,42 @@
+import { Button, Div, Span, when, after } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveBool } from '../utils.js';
+import { Loading } from './Loading.js';
+import { closeSvg } from '../theme/icons.js';
+
+export function Notification(...args) {
+  const { props, rawProps, children } = splitPropsChildren(args, { color: 'blue', withCloseButton: true });
+  const {
+    title,
+    color,
+    icon,
+    loading,
+    withCloseButton,
+    withBorder,
+    className,
+    style,
+  } = props;
+  const { onClose } = rawProps;
+  const showLoader = after(icon, loading).compute(([nextIcon, nextLoading]) => !nextIcon && !!nextLoading);
+  const withIcon = after(icon, loading).compute(([nextIcon, nextLoading]) => !!nextIcon || !!nextLoading);
+  return Div(
+    {
+      className: cx(
+        'g-ui-notification',
+        [withBorder, 'g-ui-notification-bordered'],
+        [color, (value) => `g-ui-notification-${value}`],
+        [withIcon, 'g-ui-notification-with-icon'],
+        className
+      ),
+    },
+    when(icon, () => Span({ className: 'g-ui-notification-icon' }, icon)),
+    when(showLoader, () => Loading({ size: 'sm', className: 'g-ui-notification-loader' })),
+    Div(
+      { className: 'g-ui-notification-body' },
+      when(title, () => Div({ className: 'g-ui-notification-title' }, title)),
+      children
+    ),
+    when(withCloseButton, () =>
+      Button({ type: 'button', className: 'g-ui-notification-close', onClick: () => onClose?.() }, Span({ innerHTML: closeSvg }))
+    )
+  );
+}

package/src/components/Notifications.js

@@ -0,0 +1,59 @@
+import { Div, when, after } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
+import { Notification } from './Notification.js';
+
+export function Notifications(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { items: [], position: 'top-right' });
+  const { items, position, className, ...rest } = props;
+  const { onRemove } = rawProps;
+  const timers = new Map();
+
+  const getId = (item, index) => item?.id ?? item?.key ?? index;
+
+  const notifications = after(items).compute((nextItems) => {
+    const list = resolveValue(nextItems) ?? [];
+    const active = new Set();
+    list.forEach((item, index) => {
+      const id = getId(item, index);
+      active.add(id);
+      if (item?.autoClose && !timers.has(id)) {
+        const timeout = setTimeout(() => {
+          timers.delete(id);
+          onRemove?.(item);
+        }, item.autoClose);
+        timers.set(id, timeout);
+      }
+    });
+    for (const [id, handle] of timers.entries()) {
+      if (!active.has(id)) {
+        clearTimeout(handle);
+        timers.delete(id);
+      }
+    }
+    return list.map((item, index) =>
+      Notification(
+        {
+          key: getId(item, index),
+          title: item.title,
+          color: item.color,
+          icon: item.icon,
+          loading: item.loading,
+          withCloseButton: item.withCloseButton,
+          withBorder: item.withBorder,
+          onClose: () => {
+            item.onClose?.();
+            onRemove?.(item);
+          },
+        },
+        item.message ?? item.body ?? item.content ?? item.text
+      )
+    );
+  });
+  return Div(
+    {
+      ...rest,
+      className: cx('g-ui-notifications', classVar('g-ui-notifications-position-', position, 'top-right'), className),
+    },
+    notifications
+  );
+}