spaper 1.3.0 → 2.0.0

package/dist/components/ScrollTop.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+import { fade } from 'svelte/transition'
+import Button from './Button.svelte'
+import Icon from './Icon.svelte'
+import { ArrowUp, type IconNode } from '../icons'
+
+interface Props {
+  /** Element to scroll. The page, when unset. */
+  target?: HTMLElement | null
+  /** Scroll animation. */
+  behavior?: ScrollBehavior
+  rounded?: boolean
+  /** Icon geometry. `ArrowUp` when unset. */
+  icon?: IconNode | null
+  ariaLabel?: string
+  onclick?: (e: MouseEvent) => void
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  target = null,
+  behavior = 'smooth',
+  rounded = false,
+  icon = ArrowUp,
+  ariaLabel = 'To top',
+  onclick,
+  children,
+  class: className = '',
+  ...rest
+}: Props = $props()
+
+let scrolled = $state(false)
+
+$effect(() => {
+  const node = target ?? window
+
+  function read() {
+    return target ? target.scrollTop : window.scrollY
+  }
+
+  function onScroll() {
+    scrolled = read() > 0
+  }
+
+  onScroll()
+  node.addEventListener('scroll', onScroll, { passive: true })
+  return () => node.removeEventListener('scroll', onScroll)
+})
+
+function scrollTop(e: MouseEvent) {
+  onclick?.(e)
+  ;(target ?? window).scrollTo({ top: 0, behavior })
+}
+</script>
+
+{#if scrolled}
+  <div transition:fade={{ duration: 200 }}>
+    <Button
+      {...rest}
+      class={[
+        'fixed right-6 bottom-6 inline-flex items-center justify-center',
+        {
+          'aspect-square rounded-paper-circle!': rounded,
+        },
+        className,
+      ]}
+      aria-label={ariaLabel}
+      nativeType="button"
+      onclick={scrollTop}
+    >
+      {#if children}
+        {@render children()}
+      {:else}
+        <Icon name={icon} size={22} />
+      {/if}
+    </Button>
+  </div>
+{/if}

package/dist/components/ScrollTop.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type IconNode } from '../icons';
+interface Props {
+    /** Element to scroll. The page, when unset. */
+    target?: HTMLElement | null;
+    /** Scroll animation. */
+    behavior?: ScrollBehavior;
+    rounded?: boolean;
+    /** Icon geometry. `ArrowUp` when unset. */
+    icon?: IconNode | null;
+    ariaLabel?: string;
+    onclick?: (e: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const ScrollTop: import("svelte").Component<Props, {}, "">;
+type ScrollTop = ReturnType<typeof ScrollTop>;
+export default ScrollTop;

package/dist/components/Skeleton.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+type Shape = 'rectangle' | 'square' | 'circle'
+
+interface Props {
+  active?: boolean
+  count?: number
+  animated?: boolean
+  shape?: Shape
+  /** Width and height for `square` and `circle`. */
+  size?: string | number | null
+  /** @deprecated Use `shape="circle"`. */
+  circle?: boolean
+  inline?: boolean
+  /** Class on each skeleton. When `count` is greater than 1, `class` is on the group. */
+  itemClass?: string
+  ariaLabel?: string
+  /** @deprecated Use `ariaLabel`. */
+  ariaValueText?: string
+  [key: string]: any
+}
+
+let {
+  active = true,
+  count = 1,
+  animated = true,
+  shape = 'rectangle',
+  size = null,
+  circle = false,
+  inline = false,
+  itemClass = '',
+  ariaLabel,
+  ariaValueText,
+  class: className = '',
+  ...rest
+}: Props = $props()
+
+const statusLabel = $derived(ariaLabel ?? ariaValueText ?? 'Loading...')
+
+const circleClasses = [
+  'skeleton-paper-circle-1',
+  'skeleton-paper-circle-2',
+  'skeleton-paper-circle-3',
+  'skeleton-paper-circle-4',
+  'skeleton-paper-circle-5',
+  'skeleton-paper-circle-6',
+]
+
+const resolvedShape = $derived<Shape>(
+  shape === 'rectangle' && circle ? 'circle' : shape,
+)
+
+const cssSize = $derived.by(() => {
+  if (resolvedShape === 'rectangle' || size == null || size === '') return null
+  return typeof size === 'number' ? `${size}px` : size
+})
+
+const boxStyle = $derived(
+  cssSize
+    ? `--paper-skeleton-width: ${cssSize}; --paper-skeleton-height: ${cssSize};`
+    : `--paper-skeleton-width: var(--width, auto); --paper-skeleton-height: var(--height, 100%);`,
+)
+const mergedStyle = $derived(
+  typeof rest.style === 'string' && rest.style
+    ? `${rest.style}; ${boxStyle}`
+    : boxStyle,
+)
+</script>
+
+{#if active}
+  <div
+    class={[
+      count > 1 && (inline ? 'inline-flex flex-wrap' : 'flex flex-col'),
+      count > 1 && resolvedShape !== 'circle' && 'skeleton-paper-group',
+      count > 1 ? className : inline ? 'inline-block h-full' : 'h-full',
+    ]}
+    role="status"
+    aria-busy="true"
+    aria-label={statusLabel}
+  >
+    {#each { length: count } as _, i}
+      {@const shapeVariant =
+        resolvedShape === 'circle'
+          ? circleClasses[i % 6]
+          : count === 1
+            ? 'skeleton-paper-1'
+            : ''}
+      <div
+        {...rest}
+        aria-hidden="true"
+        class={[
+          'skeleton-paper',
+          shapeVariant,
+          {
+            'skeleton-paper-static': !animated,
+            'skeleton-paper-inline': inline,
+          },
+          itemClass,
+          count === 1 && className,
+        ]}
+        style={mergedStyle}
+      ></div>
+    {/each}
+  </div>
+{/if}

package/dist/components/Skeleton.svelte.d.ts

@@ -0,0 +1,21 @@
+type Shape = 'rectangle' | 'square' | 'circle';
+interface Props {
+    active?: boolean;
+    count?: number;
+    animated?: boolean;
+    shape?: Shape;
+    /** Width and height for `square` and `circle`. */
+    size?: string | number | null;
+    /** @deprecated Use `shape="circle"`. */
+    circle?: boolean;
+    inline?: boolean;
+    /** Class on each skeleton. When `count` is greater than 1, `class` is on the group. */
+    itemClass?: string;
+    ariaLabel?: string;
+    /** @deprecated Use `ariaLabel`. */
+    ariaValueText?: string;
+    [key: string]: any;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Spinner.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+import type { PaperSize, PaperColor } from '../types'
+
+interface Props {
+  /** When false, the spinner is not rendered. */
+  active?: boolean
+  /** When false, the spinner is not animated. */
+  animated?: boolean
+  /** Sits inside a line of text. */
+  inline?: boolean
+  type?: PaperColor
+  size?: PaperSize
+  ariaLabel?: string
+  [key: string]: any
+}
+
+let {
+  active = true,
+  animated = true,
+  inline = false,
+  type = 'secondary',
+  size = 'default',
+  ariaLabel = 'Loading...',
+  ...rest
+}: Props = $props()
+
+const sizeClass: Record<PaperSize, string> = {
+  small: 'spinner-paper-sm',
+  default: '',
+  large: 'spinner-paper-lg',
+}
+
+const typeClass: Record<PaperColor, string> = {
+  primary: 'spinner-paper-primary',
+  secondary: 'spinner-paper-secondary',
+  success: 'spinner-paper-success',
+  warning: 'spinner-paper-warning',
+  danger: 'spinner-paper-danger',
+  muted: 'spinner-paper-muted',
+}
+</script>
+
+{#if active}
+  <div
+    {...rest}
+    role="status"
+    aria-label={ariaLabel}
+    class={[
+      'spinner-paper',
+      typeClass[type],
+      sizeClass[size],
+      {
+        'spinner-paper-static': !animated,
+        'spinner-paper-inline': inline,
+      },
+      rest.class,
+    ]}
+  ></div>
+{/if}

package/dist/components/Spinner.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { PaperSize, PaperColor } from '../types';
+interface Props {
+    /** When false, the spinner is not rendered. */
+    active?: boolean;
+    /** When false, the spinner is not animated. */
+    animated?: boolean;
+    /** Sits inside a line of text. */
+    inline?: boolean;
+    type?: PaperColor;
+    size?: PaperSize;
+    ariaLabel?: string;
+    [key: string]: any;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/Table/Table.svelte

@@ -0,0 +1,292 @@
+<script lang="ts">
+import { setContext } from 'svelte'
+import { writable } from 'svelte/store'
+import type {
+  TableColumnObj as ColumnObj,
+  TableColumn as Column,
+  TableSort,
+} from '../../types'
+import Icon from '../Icon.svelte'
+import {
+  ArrowDownWideNarrow,
+  ArrowUpDown,
+  ArrowUpNarrowWide,
+} from '../../icons'
+import {
+  TABLE_CONTEXT,
+  type RegisteredColumn,
+  type TableContext,
+} from './context'
+
+interface Props {
+  columns?: Column[]
+  data?: Record<string, any>[]
+  striped?: boolean
+  hoverable?: boolean
+  showHeader?: boolean
+  /** Header clicks cycle the sort. */
+  sortable?: boolean
+  /**
+   * Active sort. `1` is ascending, `-1` is descending.
+   * Click a header to cycle ascending, descending, then unsorted.
+   */
+  sort?: TableSort | null
+  headerCLass?: string
+  cellCLass?: string
+  children?: import('svelte').Snippet<[any]>
+  header?: import('svelte').Snippet<[any]>
+  cell?: import('svelte').Snippet<[any]>
+  empty?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  columns = [],
+  data = [],
+  striped = false,
+  hoverable = false,
+  showHeader = true,
+  sortable = false,
+  sort = $bindable(null),
+  headerCLass = '',
+  cellCLass = '',
+  children,
+  header,
+  cell,
+  empty,
+  ...rest
+}: Props = $props()
+
+const registeredColumns = writable<RegisteredColumn[]>([])
+const counts = new Map<string, number>()
+const keyToField = new Map<object, string>()
+
+const tableContext: TableContext = {
+  columns: registeredColumns,
+  registerColumn(col) {
+    keyToField.set(col.key, col.field)
+    const n = (counts.get(col.field) ?? 0) + 1
+    counts.set(col.field, n)
+    if (n === 1) {
+      registeredColumns.update((list) => [...list, col])
+    }
+  },
+  unregisterColumn(key) {
+    const field = keyToField.get(key)
+    if (!field) return
+    keyToField.delete(key)
+
+    const n = (counts.get(field) ?? 1) - 1
+    if (n <= 0) {
+      counts.delete(field)
+      registeredColumns.update((list) => list.filter((c) => c.field !== field))
+    } else {
+      counts.set(field, n)
+    }
+  },
+}
+
+setContext(TABLE_CONTEXT, tableContext)
+
+function isColumnObj(arg: Column): arg is ColumnObj {
+  return typeof arg === 'object' && arg !== null && 'field' in arg
+}
+
+function columnField(column: Column | RegisteredColumn): string {
+  return typeof column === 'string' ? column : column.field
+}
+
+function columnLabel(column: Column | RegisteredColumn): string {
+  if (typeof column === 'string') return column
+  return column.label ?? column.field
+}
+
+function columnSortable(column: Column | RegisteredColumn): boolean {
+  if (typeof column === 'string') return sortable
+  return column.sortable ?? sortable
+}
+
+const deprecatedColumnFields = new Set<string>()
+
+$effect(() => {
+  for (const column of columns) {
+    if (!isColumnObj(column) || (!column.content && !column.html)) continue
+    if (deprecatedColumnFields.has(column.field)) continue
+    deprecatedColumnFields.add(column.field)
+    console.warn(
+      `[spaper] Table column "${column.field}": \`content\` and \`html\` are deprecated. Use <TableColumn> instead.`,
+    )
+  }
+})
+
+let useColumnChildren = $derived(!!children)
+let propColumns = $derived(
+  columns.length ? columns : data[0] ? Object.keys(data[0]) : [],
+)
+let headerColumns = $derived(
+  useColumnChildren ? $registeredColumns : propColumns,
+)
+let columnCount = $derived(
+  Math.max(headerColumns.length, propColumns.length, 1),
+)
+
+function compareValues(a: unknown, b: unknown): number {
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+  return String(a ?? '').localeCompare(String(b ?? ''), undefined, {
+    numeric: true,
+    sensitivity: 'base',
+  })
+}
+
+let sortedData = $derived.by(() => {
+  if (!sort) return data
+  const { field, order } = sort
+  return data.toSorted((a, b) => compareValues(a[field], b[field]) * order)
+})
+
+/** Columns opened by a presort stay clickable after the sort is cleared. */
+let stickySortable = $state<string[]>([])
+
+$effect(() => {
+  const field = sort?.field
+  if (!field || stickySortable.includes(field)) return
+  stickySortable.push(field)
+})
+
+function toggleSort(field: string) {
+  if (sort?.field !== field) {
+    sort = { field, order: 1 }
+    return
+  }
+  if (sort.order === 1) {
+    sort = { field, order: -1 }
+    return
+  }
+  sort = null
+}
+
+function ariaSort(field: string): 'ascending' | 'descending' | 'none' {
+  if (sort?.field !== field) return 'none'
+  return sort.order === 1 ? 'ascending' : 'descending'
+}
+
+function sortIcon(field: string) {
+  if (sort?.field !== field) return ArrowUpDown
+  return sort.order === 1 ? ArrowUpNarrowWide : ArrowDownWideNarrow
+}
+</script>
+
+<table
+  {...rest}
+  class={[
+    'table-paper',
+    {
+      'table-paper-alternating': striped,
+      'table-paper-hover': hoverable,
+    },
+    rest.class,
+  ]}
+>
+  {#if showHeader}
+    <thead>
+      <tr>
+        {#each headerColumns as column, columnIndex}
+          {@const field = columnField(column)}
+          {@const canSort =
+            columnSortable(column) ||
+            stickySortable.includes(field) ||
+            sort?.field === field}
+          <th
+            class={[
+              {
+                'hover:bg-(--paper-table-header-hover,var(--paper-table-hover-bg))':
+                  canSort,
+              },
+              headerCLass,
+            ]}
+            aria-sort={canSort ? ariaSort(field) : undefined}
+          >
+            {#if canSort}
+              <button
+                type="button"
+                class="inline-flex w-full cursor-pointer items-center gap-1 bg-transparent p-0 text-left font-[inherit] text-inherit"
+                onclick={() => toggleSort(field)}
+              >
+                {#if header}
+                  {@render header?.({ column, columnIndex })}
+                {:else}
+                  {columnLabel(column)}
+                {/if}
+                <Icon
+                  name={sortIcon(field)}
+                  size={16}
+                  aria-hidden="true"
+                  type={sort?.field === field ? null : 'muted'}
+                />
+              </button>
+            {:else if header}
+              {@render header?.({ column, columnIndex })}
+            {:else}
+              {columnLabel(column)}
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+  {/if}
+  <tbody>
+    {#if useColumnChildren}
+      {#if !data.length}
+        <tr class="hidden" aria-hidden="true">
+          {@render children?.({ row: {}, rowIndex: -1 })}
+        </tr>
+      {/if}
+      {#each sortedData as row, rowIndex}
+        <tr>
+          {@render children?.({ row, rowIndex })}
+        </tr>
+      {/each}
+    {:else}
+      {#each sortedData as row, rowIndex}
+        <tr>
+          {#each propColumns as column, columnIndex}
+            {@const field = columnField(column)}
+            {@const value = row[field]}
+            <td class={cellCLass}>
+              {#if cell}
+                {@render cell?.({
+                  row,
+                  column,
+                  value,
+                  field,
+                  rowIndex,
+                  columnIndex,
+                })}
+              {:else}
+                {@const colObj = isColumnObj(column) ? column : null}
+                {#if colObj?.content}
+                  {#if colObj.html}
+                    {@html colObj.content(value)}
+                  {:else}
+                    {colObj.content(value)}
+                  {/if}
+                {:else if colObj?.html}
+                  {@html value}
+                {:else}
+                  {value}
+                {/if}
+              {/if}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    {/if}
+    {#if !data.length && empty}
+      <tr>
+        <td colspan={columnCount}>
+          {@render empty()}
+        </td>
+      </tr>
+    {/if}
+  </tbody>
+</table>

package/dist/components/Table/Table.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { TableColumn as Column, TableSort } from '../../types';
+interface Props {
+    columns?: Column[];
+    data?: Record<string, any>[];
+    striped?: boolean;
+    hoverable?: boolean;
+    showHeader?: boolean;
+    /** Header clicks cycle the sort. */
+    sortable?: boolean;
+    /**
+     * Active sort. `1` is ascending, `-1` is descending.
+     * Click a header to cycle ascending, descending, then unsorted.
+     */
+    sort?: TableSort | null;
+    headerCLass?: string;
+    cellCLass?: string;
+    children?: import('svelte').Snippet<[any]>;
+    header?: import('svelte').Snippet<[any]>;
+    cell?: import('svelte').Snippet<[any]>;
+    empty?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Table: import("svelte").Component<Props, {}, "sort">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Table/TableColumn.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+import { getContext, onMount, onDestroy } from 'svelte'
+import { TABLE_CONTEXT, type TableContext } from './context'
+
+interface Props {
+  field: string
+  label?: string
+  row?: Record<string, any>
+  rowIndex?: number
+  /** Overrides the table `sortable` prop for this column. */
+  sortable?: boolean
+  html?: boolean
+  content?: ((val?: any) => string) | null
+  cellClass?: string
+  children?: import('svelte').Snippet<[any]>
+}
+
+let {
+  field,
+  label = undefined,
+  row = undefined,
+  rowIndex = undefined,
+  sortable = undefined,
+  html = false,
+  content = null,
+  cellClass = '',
+  children,
+}: Props = $props()
+
+const table = getContext<TableContext>(TABLE_CONTEXT)
+
+if (!table) throw new Error('<TableColumn> must be used inside <Table>')
+
+const key = {}
+
+let value = $derived(row?.[field])
+let headerLabel = $derived(label ?? field)
+
+onMount(() => {
+  table.registerColumn({ field, label: headerLabel, sortable, key })
+})
+
+onDestroy(() => {
+  table.unregisterColumn(key)
+})
+</script>
+
+<td class={cellClass}>
+  {#if children}
+    {@render children?.({ row, value, rowIndex, field })}
+  {:else if content}
+    {#if html}
+      {@html content(value)}
+    {:else}
+      {content(value)}
+    {/if}
+  {:else if html}
+    {@html value}
+  {:else}
+    {value}
+  {/if}
+</td>

package/dist/components/Table/TableColumn.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    field: string;
+    label?: string;
+    row?: Record<string, any>;
+    rowIndex?: number;
+    /** Overrides the table `sortable` prop for this column. */
+    sortable?: boolean;
+    html?: boolean;
+    content?: ((val?: any) => string) | null;
+    cellClass?: string;
+    children?: import('svelte').Snippet<[any]>;
+}
+declare const TableColumn: import("svelte").Component<Props, {}, "">;
+type TableColumn = ReturnType<typeof TableColumn>;
+export default TableColumn;