@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/floating/notification/NeoNotificationItem.svelte

@@ -0,0 +1,459 @@
+<script lang="ts">
+  import type { NeoNotificationItemProps } from './neo-notification-item.model.js';
+
+  import { debounce } from '@dvcol/common-utils/common/debounce';
+  import { flyFrom } from '@dvcol/svelte-utils';
+  import { focusin } from '@dvcol/svelte-utils/focusin';
+  import { hovering } from '@dvcol/svelte-utils/hovering';
+  import { onDestroy, onMount } from 'svelte';
+
+  import { NeoNotificationPlacements } from '../common/neo-placement.model.js';
+  import { NeoNotificationEvent, NeoNotificationStatus, NeoNotificationType } from './neo-notification.model.js';
+  import NeoSimpleNotification from './NeoSimpleNotification.svelte';
+  import { computeBorderRadius } from '../../utils/border.utils.js';
+  import { getColorVariable } from '../../utils/colors.utils.js';
+  import { coerce, computeGlassFilter, computeShadowElevation, PositiveMinMaxElevation } from '../../utils/shadow.utils.js';
+
+  let {
+    // Snippets
+    children,
+    before,
+    after,
+
+    // State
+    ref = $bindable(),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+
+    tag = 'li',
+
+    index,
+    item,
+    posinset,
+    setsize,
+    visible = 0,
+
+    // Style
+    elevation: _elevation = 1,
+    blur: _blur,
+    color: _color,
+    filled,
+    tinted,
+    rounded: _rounded,
+    borderless,
+
+    // Behavior
+    expand,
+    reverse,
+    draggable,
+    swipeable,
+    placement = NeoNotificationPlacements.BottomEnd,
+    threshold = { x: 3, y: 2 },
+    stagger = 16,
+    swiped,
+    restartOnTouch,
+
+    progress,
+    loading,
+    close = true,
+
+    // Events
+
+    onChange: onStateChange,
+    onDrag,
+    onCancel,
+
+    // Other Props
+
+    containerProps: _containerProps,
+    progressProps,
+    actionProps,
+    closeProps,
+    ...rest
+  }: NeoNotificationItemProps = $props();
+
+  const { tag: containerTag, ...containerProps } = $derived(_containerProps ?? {});
+  const { id, tag: itemTag, ...itemProps } = $derived(item?.containerProps ?? {});
+
+  const elevation = $derived(coerce(item.elevation ?? _elevation!, PositiveMinMaxElevation));
+  const blur = $derived(coerce(item.blur ?? _blur ?? _elevation!, PositiveMinMaxElevation));
+
+  const filter = $derived(computeGlassFilter(blur, true));
+  const shadow = $derived(computeShadowElevation(elevation, { glass: true }, PositiveMinMaxElevation));
+
+  const color = $derived.by(() => {
+    if (item.color) return getColorVariable(item.color);
+    if (_color) return getColorVariable(_color);
+    if (item.type === NeoNotificationType.Info) return getColorVariable('primary');
+    return getColorVariable(item.type);
+  });
+
+  const rounded = $derived.by(() => {
+    const isRounded = item.rounded ?? _rounded;
+    if (isRounded === true) return 'xl';
+    return isRounded;
+  });
+
+  const first = $derived(index === visible - 1);
+  const last = $derived(index === 0);
+
+  function getNotifications() {
+    const parent = ref?.parentElement;
+    const array = parent?.querySelectorAll<HTMLElement>('.neo-notification-stack-item:not([inert])');
+    return { parent, array };
+  }
+
+  function getTotalHeight(el?: HTMLElement): number {
+    if (!el) return 0;
+    const styles = getComputedStyle(el);
+    return el.offsetHeight + (Number.parseFloat(styles.marginTop) || 0) + (Number.parseFloat(styles.marginBottom) || 0);
+  }
+
+  const translate = $derived.by(() => {
+    if ((posinset === setsize) && reverse) return;
+    if (!expand) return `0 ${(reverse ? 0 : -getTotalHeight(ref)) + stagger * (visible - 1 - index) * (reverse ? 1 : -1)}px`;
+
+    const { parent, array } = getNotifications();
+    if (!array?.length) return;
+    const heights = Array.from(array).map(getTotalHeight);
+    if (!heights?.length) return;
+    const bottom = reverse ? index + 1 : index;
+    const offset = heights.slice(bottom, heights.length).reduce((acc, h) => acc + h, 0);
+    const position = heights.length - 1 - index;
+    const gap = parent ? Number.parseFloat(getComputedStyle(parent).gap) || 0 : 0;
+    return `0 ${reverse ? '' : '-'}${offset + gap * position}px`;
+  });
+
+  const scale = $derived.by(() => {
+    if (expand) return;
+    return 1 - (visible - 1 - index) * 0.05;
+  });
+
+  let initial: Record<'x' | 'y', number> | false = $state(false);
+  let offset: Record<'x' | 'y', number> = $state({ x: 0, y: 0 });
+
+  const transform = $derived.by(() => {
+    if (!draggable || !initial) return;
+    return `translate(${offset.x}px, ${offset.y}px)`;
+  });
+
+  function onDragMove(event: PointerEvent) {
+    if (!draggable || !initial) return;
+    offset = { x: event.movementX + offset.x, y: event.movementY + offset.y };
+    onDrag?.({ item, index, event, offset, initial });
+  };
+
+  function cancelDrag({
+    top = placement?.startsWith('top'),
+    bottom = placement?.startsWith('bottom'),
+    start = placement?.endsWith('start'),
+    end = placement?.endsWith('end'),
+    fraction = threshold,
+  } = {}) {
+    if (!ref) return false;
+    const { x, y } = typeof fraction === 'number' ? { x: fraction, y: fraction } : fraction;
+    if (top && (offset.y < -ref.clientHeight / y)) return true;
+    if (bottom && (offset.y > ref.clientHeight / y)) return true;
+    if (end && (offset.x > ref.clientWidth / x)) return true;
+    return start && (offset.x < -ref.clientWidth / x);
+  }
+
+  function resetState() {
+    initial = false;
+    setTimeout(() => {
+      offset = { x: 0, y: 0 };
+    });
+  }
+
+  let cancelled = $state(false);
+  function cancelItem(event: PointerEvent | WheelEvent | MouseEvent, status = NeoNotificationStatus.Dismissed) {
+    if (cancelled || !cancelDrag()) return cancelled;
+    cancelled = true;
+    item.cancel(status);
+    onCancel?.({ item, index, event });
+    return cancelled;
+  }
+
+  function onDragEnd(event: PointerEvent) {
+    cancelItem(event);
+    window.removeEventListener('pointermove', onDragMove);
+    window.removeEventListener('pointerup', onDragEnd);
+    window.removeEventListener('pointercancel', onDragEnd);
+    window.removeEventListener('pointerleave', onDragEnd);
+    resetState();
+    onDrag?.({ item, index, event, offset, initial });
+  }
+
+  function onDragStart(event: PointerEvent) {
+    if (!draggable) return;
+    if (event.button !== 0) return; // Only left click
+    initial = { x: event.clientX, y: event.clientY };
+    event.preventDefault();
+    window.addEventListener('pointermove', onDragMove);
+    window.addEventListener('pointerup', onDragEnd);
+    window.addEventListener('pointercancel', onDragEnd);
+    window.addEventListener('pointerleave', onDragEnd);
+    onDrag?.({ item, index, event, offset, initial });
+  }
+
+  const debounceReset = debounce(resetState, 100);
+
+  function onWheel(event: WheelEvent) {
+    if (!swipeable) return;
+    event.preventDefault();
+    if (swiped) return;
+    const axis = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? 'x' : 'y';
+    const off = axis === 'x' ? 'y' : 'x';
+    if (['top', 'bottom'].includes(placement) && axis === 'x') return;
+    if (placement?.endsWith('start') && axis === 'x' && (event.deltaX < 0)) return;
+    if (placement?.endsWith('end') && axis === 'x' && (event.deltaX > 0)) return;
+    if (placement?.startsWith('top') && axis === 'y' && (event.deltaY < 0)) return;
+    if (placement?.startsWith('bottom') && axis === 'y' && (event.deltaY > 0)) return;
+    debounceReset.cancel();
+    const delta = axis === 'x' ? event.deltaX : event.deltaY;
+    if (!initial) initial = ({ [axis]: delta, [off]: 0 } as Record<'x' | 'y', number>);
+    offset[axis] -= delta;
+    onDrag?.({ item, index, event, offset, initial });
+    if (cancelItem(event)) {
+      removeWheel();
+      return resetState();
+    }
+    debounceReset();
+  }
+
+  function removeWheel() {
+    window?.removeEventListener('wheel', onWheel);
+    ref?.removeEventListener('pointerleave', onLeave);
+  }
+
+  const debounceLeave = debounce(removeWheel, 300);
+
+  function onLeave() {
+    if (!cancelled) return debounceLeave();
+    removeWheel();
+  }
+
+  function onEnter() {
+    if (!swipeable || !ref) return;
+    debounceLeave.cancel();
+    window.addEventListener('wheel', onWheel, { passive: false });
+    ref.addEventListener('pointerleave', onLeave);
+  }
+
+  const inParams = $derived({
+    y: last && !first ? 0 : `${reverse ? '-' : ''}150%`,
+    duration: 600,
+    scale: 1,
+    delay: last && !first ? 300 : 10,
+    opacity: last && !first ? 0 : 1,
+  });
+
+  const outParams = $derived.by(() => {
+    let x: string | number = 0;
+    let y: string | number = last && !first && !expand ? 0 : `${reverse ? '-' : ''}50%`;
+
+    // If moving left/right
+    if (Math.abs(offset.y) < Math.abs(offset.x)) {
+      if (placement?.endsWith('start')) {
+        x = '-50%';
+        y = 0;
+      } else if (placement?.endsWith('end')) {
+        x = '50%';
+        y = 0;
+      }
+    }
+
+    return {
+      x,
+      y,
+      duration: 600,
+      scale: 0.95,
+      opacity: 0,
+    };
+  });
+
+  const onChange = debounce((_, event: PointerEvent | FocusEvent) => {
+    if (Math.abs(offset.x) > 16 || Math.abs(offset.y) > 16) return;
+    onStateChange?.({ item, index, hovered, focused, event });
+  }, 100);
+
+  $effect(() => {
+    if (!ref) return;
+    ref.addEventListener('pointerdown', onDragStart);
+    ref.addEventListener('pointerenter', onEnter);
+    return () => {
+      if (!ref) return;
+      ref.removeEventListener('pointerdown', onDragStart);
+      ref.removeEventListener('pointerenter', onEnter);
+    };
+  });
+
+  onMount(() => {
+    item.visible = Date.now();
+    item.onChange?.(NeoNotificationEvent.Visible, item);
+  });
+
+  onDestroy(() => {
+    item.hidden = Date.now();
+    item.onChange?.(NeoNotificationEvent.Hidden, item);
+  });
+</script>
+
+<svelte:element
+  {...rest}
+  {...containerProps}
+  {...itemProps}
+  bind:this={ref}
+  this={itemTag ?? containerTag ?? tag}
+  data-id={id}
+  data-index={index}
+  data-first={first}
+  data-last={last}
+  data-visible={visible}
+  aria-setsize={setsize}
+  aria-posinset={posinset}
+  class:neo-notification-stack-item={true}
+  class:neo-draggable={draggable}
+  class:neo-dragging={transform}
+  class:neo-rounded={rounded}
+  class:neo-tinted={item.tinted ?? tinted}
+  class:neo-filled={item.filled ?? filled}
+  class:neo-flat={!elevation}
+  class:neo-borderless={item.borderless ?? borderless}
+  style:--neo-notification-border-radius={computeBorderRadius(item.rounded ?? rounded)}
+  style:--neo-notification-color={color}
+  style:--neo-notification-box-shadow={shadow}
+  style:--neo-notification-filter={filter}
+  style:--neo-notification-elevation={index}
+  style:scale
+  style:translate
+  style:transform
+  use:focusin={{
+    get focusin() {
+      return focused;
+    },
+    set focusin(_value) {
+      focused = _value;
+    },
+    onChange,
+  }}
+  use:hovering={{
+    get hovered() {
+      return hovered;
+    },
+    set hovered(_value) {
+      hovered = _value;
+    },
+    onChange,
+  }}
+  in:flyFrom={inParams}
+  out:flyFrom={outParams}
+>
+  {#if item.render}
+    {@render item.render?.(item)}
+  {:else if children}
+    {@render children?.(item)}
+  {:else}
+    <NeoSimpleNotification
+      {before}
+      {after}
+
+      {item}
+      {index}
+
+      {restartOnTouch}
+      {progress}
+      {loading}
+      {close}
+
+      {rounded}
+
+      {progressProps}
+      {actionProps}
+      {closeProps}
+
+      {onCancel}
+    />
+  {/if}
+</svelte:element>
+
+<style>.neo-notification-stack-item {
+  color: var(--neo-notification-color, inherit);
+  background-color: var(--neo-notification-bg-color, var(--neo-glass-background-color));
+  border: var(--neo-border-width, 1px) solid var(--neo-notification-border-color, var(--neo-glass-background-color));
+  border-color: var(--neo-notification-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color));
+  border-radius: var(--neo-notification-border-radius, var(--neo-border-radius));
+  outline: none;
+  box-shadow: var(--neo-notification-box-shadow, var(--neo-glass-box-shadow-raised-1));
+  backdrop-filter: var(--neo-notification-content-filter, var(--neo-blur-3));
+  z-index: var(--neo-notification-z-index, calc(var(--neo-z-index-layer-top, 1000) + var(--neo-notification-elevation, 1)));
+}
+.neo-notification-stack-item.neo-tinted {
+  background-color: var(--neo-notification-bg-color, var(--neo-glass-background-color-tinted));
+}
+.neo-notification-stack-item.neo-filled {
+  background-color: var(--neo-notification-bg-color, var(--neo-background-color));
+  border-color: var(--neo-notification-border-color, var(--neo-filled-top-border-color) var(--neo-filled-right-border-color) var(--neo-filled-bottom-border-color) var(--neo-filled-left-border-color));
+}
+.neo-notification-stack-item.neo-flat {
+  border-color: var(--neo-notification-border-color, var(--neo-glass-border-color-flat));
+}
+.neo-notification-stack-item.neo-borderless {
+  border-color: transparent;
+}
+.neo-notification-stack-item.neo-rounded {
+  border-radius: var(--neo-notification-border-radius, var(--neo-notification-border-radius-rounded, var(--neo-border-radius-xxl)));
+}
+.neo-notification-stack-item {
+  position: absolute;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin: var(--neo-notification-margin, var(--neo-gap-4xs));
+  transition: transform 0.6s ease, translate 0.6s ease, width 0.3s ease, height 0.3s ease, scale 0.3s ease, box-shadow 0.3s ease-out, backdrop-filter 0.3s ease, border-radius 0.3s ease, border-color 0.3s ease;
+  pointer-events: auto;
+  will-change: transform, opacity, scale, translate, backdrop-filter;
+}
+.neo-notification-stack-item[inert] {
+  z-index: var(--neo-z-index-layer-top, 2000000000);
+}
+.neo-notification-stack-item.neo-draggable {
+  cursor: grab;
+  touch-action: none;
+}
+.neo-notification-stack-item.neo-dragging {
+  transition: none;
+}
+
+.neo-notification {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+.neo-notification :global(.neo-notification-close-button) {
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+}
+.neo-notification:hover :global(.neo-notification-close-button), .neo-notification:active :global(.neo-notification-close-button), .neo-notification:focus :global(.neo-notification-close-button), .neo-notification:focus-within :global(.neo-notification-close-button), .neo-notification:focus-visible :global(.neo-notification-close-button) {
+  opacity: 1;
+}
+.neo-notification-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: max-content;
+  min-width: min(10rem, 80vw);
+  max-width: calc(100vw - 2rem);
+  padding: var(--neo-notification-padding, 0.5rem 1rem);
+}
+.neo-notification-actions {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  height: stretch;
+  height: -webkit-fill-available; /* Chrome/Safari */
+  height: -moz-available; /* Firefox */
+}</style>

package/dist/floating/notification/NeoNotificationItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoNotificationItemProps } from './neo-notification-item.model.js';
+declare const NeoNotificationItem: import("svelte").Component<NeoNotificationItemProps<"li">, {}, "ref" | "hovered" | "focused">;
+type NeoNotificationItem = ReturnType<typeof NeoNotificationItem>;
+export default NeoNotificationItem;

package/dist/floating/notification/NeoNotificationProvider.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+
+  import type { NeoNotificationProviderContext, NeoNotificationStackService, NotificationProviderProps } from './neo-notification-provider.model.js';
+
+  import { getUUID } from '@dvcol/common-utils/common/string';
+  import { SvelteMap } from 'svelte/reactivity';
+
+  import {
+
+    setNeoNotificationProviderContext,
+  } from './neo-notification-provider.model.js';
+  import NeoNotificationStack from './NeoNotificationStack.svelte';
+  import { NeoErrorNotificationDuplicateId } from '../../utils/error.utils.js';
+
+  let {
+    // Snippets
+    children,
+
+    // States
+    services = $bindable(new SvelteMap<NeoNotificationStackService['id'], NeoNotificationStackService>()),
+
+    // Other props
+    stack = { id: `default-${getUUID()}` },
+  }: NotificationProviderProps = $props();
+
+  setNeoNotificationProviderContext(
+    {
+      register: (service: NeoNotificationStackService) => {
+        if (services.has(service.id)) throw new NeoErrorNotificationDuplicateId(service.id!);
+        services.set(service.id, service);
+        console.info('Registered notification stack service:', service.id);
+      },
+      unregister: (id: NeoNotificationStackService['id']) => {
+        if (!services.has(id)) return;
+        services.delete(id);
+      },
+      get: (id?: NeoNotificationStackService['id']) => {
+        if (!id) return services.values().next().value;
+        return services.get(id);
+      },
+    } satisfies NeoNotificationProviderContext,
+  );
+</script>
+
+{@render children?.(services)}
+
+{#if stack}
+  <NeoNotificationStack {...stack} />
+{/if}

package/dist/floating/notification/NeoNotificationProvider.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationProviderProps } from './neo-notification-provider.model.js';
+declare const NeoNotificationProvider: import("svelte").Component<NotificationProviderProps, {}, "services">;
+type NeoNotificationProvider = ReturnType<typeof NeoNotificationProvider>;
+export default NeoNotificationProvider;