spaper 1.3.0 → 2.0.0

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

@@ -0,0 +1,13 @@
+import type { Writable } from 'svelte/store';
+export interface RegisteredColumn {
+    field: string;
+    label: string;
+    sortable?: boolean;
+    key: object;
+}
+export interface TableContext {
+    registerColumn: (col: RegisteredColumn) => void;
+    unregisterColumn: (key: object) => void;
+    columns: Writable<RegisteredColumn[]>;
+}
+export declare const TABLE_CONTEXT = "paper-table";

package/dist/components/Table/context.js

@@ -0,0 +1 @@
+export const TABLE_CONTEXT = 'paper-table';

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

@@ -0,0 +1,2 @@
+export { default as Table } from './Table.svelte';
+export { default as TableColumn } from './TableColumn.svelte';

package/dist/components/Table/index.js

@@ -0,0 +1,2 @@
+export { default as Table } from './Table.svelte';
+export { default as TableColumn } from './TableColumn.svelte';

package/dist/components/Tabs/Tab.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+import { onDestroy, getContext } from 'svelte'
+import type { Snippet } from 'svelte'
+import type { IconNode } from '../../icons'
+import type { TabDataType } from './utils'
+import { getId } from './utils'
+
+interface Props {
+  label: string
+  /** Icon shown to the left of the header text. */
+  icon?: IconNode | null
+  children?: Snippet
+  header?: Snippet
+  class?: string
+  [key: string]: unknown
+}
+
+let {
+  label,
+  icon = null,
+  children,
+  header: headerSnippet,
+  class: className = '',
+  ...rest
+}: Props = $props()
+
+const key = {}
+let active = $state(false)
+let headerEl = $state<HTMLElement | undefined>()
+
+const tabsData: TabDataType = getContext('tabs')
+
+if (!tabsData) throw new Error('Tab should be nested inside a Tabs')
+
+function show() {
+  active = true
+}
+function hide() {
+  active = false
+}
+
+// Register during init (not onMount) so labels exist for SSR + first paint.
+tabsData.tabs.update((tabs) => [
+  ...tabs,
+  { key, label, header: headerEl, icon, show, hide },
+])
+
+$effect(() => {
+  const nextLabel = label
+  const nextHeader = headerEl
+  const nextIcon = icon
+  tabsData.tabs.update((tabs) => {
+    const current = tabs.find((t) => t.key === key)
+    if (
+      !current ||
+      (current.label === nextLabel &&
+        current.header === nextHeader &&
+        current.icon === nextIcon)
+    ) {
+      return tabs
+    }
+    return tabs.map((t) =>
+      t.key === key
+        ? { ...t, label: nextLabel, header: nextHeader, icon: nextIcon }
+        : t,
+    )
+  })
+})
+
+onDestroy(() => {
+  tabsData.tabs.update((tabs) => tabs.filter((t) => t.key !== key))
+})
+</script>
+
+<div
+  {...rest}
+  class={['tabs-paper-content', { 'block!': active }, className]}
+  id={getId(label, 'content')}
+  aria-hidden={!active}
+  aria-labelledby={getId(label, 'label')}
+  role="tabpanel"
+  tabindex={active ? 0 : -1}
+>
+  {#if headerSnippet}
+    <div bind:this={headerEl} style="display: none">
+      {@render headerSnippet()}
+    </div>
+  {/if}
+  {@render children?.()}
+</div>

package/dist/components/Tabs/Tab.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { IconNode } from '../../icons';
+interface Props {
+    label: string;
+    /** Icon shown to the left of the header text. */
+    icon?: IconNode | null;
+    children?: Snippet;
+    header?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const Tab: import("svelte").Component<Props, {}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

package/dist/components/Tabs/Tabs.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+import { setContext, tick } from 'svelte'
+import { writable } from 'svelte/store'
+import type { TabDataType, iTab } from './utils'
+import type { PaperFlexPlacement } from '../../types'
+import { getId } from './utils'
+import Icon from '../Icon.svelte'
+
+interface Props {
+  activeTab?: number | string
+  placement?: PaperFlexPlacement
+  contentAlign?: string
+  onchange?: (index: number) => void
+  onkeypress?: (e: KeyboardEvent) => void
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  activeTab = $bindable(0),
+  placement = 'spaces',
+  contentAlign = 'left',
+  onchange,
+  onkeypress,
+  children,
+  ...rest
+}: Props = $props()
+
+const placementMap: Record<PaperFlexPlacement, string> = {
+  spaces: 'tabs-paper-around',
+  edges: 'tabs-paper-between',
+  right: 'tabs-paper-end',
+  center: 'tabs-paper-center',
+  left: 'tabs-paper-start',
+}
+
+let placementClass = $derived(placementMap[placement] ?? 'tabs-paper-around')
+let tablist = $state<HTMLDivElement | undefined>()
+let focused = $state(0)
+
+const tabs = writable<iTab[]>([])
+
+const tabsData: TabDataType = {
+  activeTab,
+  tabs,
+}
+
+setContext('tabs', tabsData)
+
+function showContent(index: number) {
+  onchange?.(index)
+  activeTab = index
+}
+
+function selectTab(index: number) {
+  focused = index
+  showContent(index)
+}
+
+async function onTabKeydown(event: KeyboardEvent, index: number) {
+  const count = $tabs.length
+  if (!count) return
+
+  let next: number | null = null
+  if (event.key === 'ArrowRight') next = (index + 1) % count
+  else if (event.key === 'ArrowLeft') next = (index - 1 + count) % count
+  else if (event.key === 'Home') next = 0
+  else if (event.key === 'End') next = count - 1
+  else if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    showContent(index)
+    return
+  } else return
+
+  event.preventDefault()
+  focused = next
+  await tick()
+  tablist?.querySelectorAll<HTMLElement>('[role="tab"]')[next]?.focus()
+}
+
+$effect(() => {
+  const list = $tabs
+  const idx = Number(activeTab)
+  if (isNaN(idx)) {
+    activeTab = 0
+    return
+  }
+  list.forEach((tab, i) => {
+    if (i === idx) tab.show()
+    else tab.hide()
+  })
+})
+
+$effect(() => {
+  const idx = Number(activeTab)
+  if (!Number.isNaN(idx)) focused = idx
+})
+</script>
+
+<div
+  {...rest}
+  class={['tabs-paper', placementClass, rest.class]}
+  style="text-align: {contentAlign}"
+>
+  <div bind:this={tablist} role="tablist" aria-orientation="horizontal">
+    {#each $tabs as { label, header, icon }, index}
+      {@const selected = index == activeTab}
+      <div
+        class={['tabs-paper-header', { 'tabs-paper-header-active': selected }]}
+        id={getId(label, 'label')}
+        aria-selected={selected}
+        aria-controls={getId(label, 'content')}
+        role="tab"
+        tabindex={index === focused ? 0 : -1}
+        onclick={() => selectTab(index)}
+        onkeydown={(event) => onTabKeydown(event, index)}
+        {onkeypress}
+      >
+        {#if icon}
+          <span class="inline-flex items-center gap-1.5">
+            <Icon name={icon} size={18} />
+            {#if header}
+              {@html header.innerHTML}
+            {:else}
+              {label}
+            {/if}
+          </span>
+        {:else if header}
+          {@html header.innerHTML}
+        {:else}
+          {label}
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,13 @@
+import type { PaperFlexPlacement } from '../../types';
+interface Props {
+    activeTab?: number | string;
+    placement?: PaperFlexPlacement;
+    contentAlign?: string;
+    onchange?: (index: number) => void;
+    onkeypress?: (e: KeyboardEvent) => void;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "activeTab">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/{components → dist/components}/Tabs/utils.d.ts

@@ -1,8 +1,10 @@
 import type { Writable } from 'svelte/store';
-interface iTab {
-    key: Object;
+import type { IconNode } from '../../icons';
+export interface iTab {
+    key: object;
     label: string;
     header?: HTMLElement;
+    icon?: IconNode | null;
     show: () => void;
     hide: () => void;
 }
@@ -11,4 +13,3 @@ export interface TabDataType {
     tabs: Writable<iTab[]>;
 }
 export declare function getId(label: string, part: 'label' | 'content'): string;
-export {};

package/dist/components/Tag.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { PaperType } from '../types'
+
+interface Props {
+  type?: PaperType
+  rounded?: boolean
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  type = 'primary',
+  rounded = false,
+  children,
+  class: className = '',
+  ...rest
+}: Props = $props()
+
+const typeClass: Record<PaperType, string> = {
+  primary: 'tag-paper-primary',
+  secondary: 'tag-paper-secondary',
+  success: 'tag-paper-success',
+  warning: 'tag-paper-warning',
+  danger: 'tag-paper-danger',
+}
+</script>
+
+<span
+  {...rest}
+  class={[
+    'tag-paper',
+    typeClass[type],
+    { 'rounded-[30%]': rounded },
+    className,
+  ]}
+>
+  {@render children?.()}
+</span>

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

@@ -0,0 +1,10 @@
+import type { PaperType } from '../types';
+interface Props {
+    type?: PaperType;
+    rounded?: boolean;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/Toast/Toast.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { onMount } from 'svelte'
+import { fly, fade } from 'svelte/transition'
+import { typeIcons } from '../../type-icons'
+import type { ToastProps } from './'
+import { computeClasses } from '../../utils'
+import CloseButton from '../CloseButton.svelte'
+import Icon from '../Icon.svelte'
+
+let {
+  icon = null,
+  hideIcon = false,
+  title = '',
+  message = '',
+  content,
+  type = 'primary',
+  duration = 2000,
+  position = 'top',
+  pauseOnHover = false,
+  dismissible = false,
+  indefinite = false,
+  closeAriaLabel = 'close',
+  class: className = '',
+  onClose = null,
+}: ToastProps = $props()
+
+const TRANSITION_OUT_DURATION: number = 300
+let active: boolean = $state(false)
+let timeoutId: number
+
+let shownIcon = $derived(hideIcon ? null : (icon ?? typeIcons[type]))
+
+let classes = $derived([
+  'alert-paper',
+  'relative',
+  'm-0',
+  'shadow-paper',
+  'w-[min(250px,calc(100vw-2rem))]',
+  computeClasses('alert-paper', { type }),
+  className,
+])
+
+onMount(() => {
+  // A local `in:` transition does not run on the first paint. Flip after mount.
+  active = true
+  if (indefinite) return
+  timeoutId = window.setTimeout(() => close(), duration)
+  return () => clearTimeout(timeoutId)
+})
+
+function pause() {
+  if (!pauseOnHover || indefinite) return
+  clearTimeout(timeoutId)
+}
+
+function dismiss() {
+  if (!pauseOnHover || indefinite) return
+  close()
+}
+
+export function close() {
+  if (!active) return
+  active = false
+  clearTimeout(timeoutId)
+  onClose?.()
+}
+</script>
+
+{#if active}
+  <div
+    class={classes}
+    onmouseenter={pause}
+    onmouseleave={dismiss}
+    in:fly={{ y: position.includes('top') ? -100 : 100 }}
+    out:fade={{ duration: TRANSITION_OUT_DURATION }}
+    role="alert"
+  >
+    <div
+      class={['flex items-start gap-2', { 'pe-6': dismissible || indefinite }]}
+    >
+      {#if shownIcon}
+        <span class={['inline-flex shrink-0', { 'h-7 items-center': title }]}>
+          <Icon name={shownIcon} size={22} />
+        </span>
+      {/if}
+      <div>
+        {#if title}
+          <p class="font-paper-heading text-xl font-bold mb-1">{title}</p>
+        {/if}
+        {#if content}
+          {@render content(close)}
+        {:else}
+          {@html message}
+        {/if}
+      </div>
+    </div>
+    {#if dismissible || indefinite}
+      <CloseButton
+        class="absolute top-4 right-4"
+        ariaLabel={closeAriaLabel}
+        onclick={() => close()}
+      />
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,6 @@
+import type { ToastProps } from './';
+declare const Toast: import("svelte").Component<ToastProps, {
+    close: () => void;
+}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/Toast/ToastContainer.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" module>
+export const containerClass = 'toast-paper-container'
+</script>
+
+<script lang="ts">
+import { onMount } from 'svelte'
+import type { ToastPosition } from './'
+
+interface Props {
+  position?: ToastPosition
+}
+
+let { position = 'top' }: Props = $props()
+
+let viewportStyle = $state('')
+
+onMount(() => {
+  const mobile = window.matchMedia('(max-width: 768px)')
+
+  function sync() {
+    if (!mobile.matches) {
+      viewportStyle = ''
+      return
+    }
+
+    const vv = window.visualViewport
+    if (!vv) {
+      viewportStyle = ''
+      return
+    }
+
+    viewportStyle = [
+      `top:${vv.offsetTop}px`,
+      `left:${vv.offsetLeft}px`,
+      `width:${vv.width}px`,
+      `height:${vv.height}px`,
+    ].join(';')
+  }
+
+  sync()
+
+  const vv = window.visualViewport
+  vv?.addEventListener('scroll', sync)
+  vv?.addEventListener('resize', sync)
+  mobile.addEventListener('change', sync)
+
+  return () => {
+    vv?.removeEventListener('scroll', sync)
+    vv?.removeEventListener('resize', sync)
+    mobile.removeEventListener('change', sync)
+  }
+})
+</script>
+
+<div class={[containerClass, position]} style={viewportStyle}></div>
+
+<style>
+:global(.toast-paper-container:is(.top, .bottom) > div) {
+  align-self: center;
+}
+:global(.toast-paper-container:is([class*='right']) > div) {
+  align-self: end;
+}
+:global(
+  .toast-paper-container:is([class*='left']):not(.top):not(.bottom) > div
+) {
+  align-self: start;
+}
+:global(.toast-paper-container > div) {
+  flex-shrink: 0;
+  pointer-events: auto;
+}
+
+div {
+  position: fixed;
+  inset-inline: 0;
+  display: flex;
+  width: 100%;
+  max-height: 100vh;
+  max-height: 100dvh;
+  padding: max(1rem, env(safe-area-inset-top, 0px))
+    max(1rem, env(safe-area-inset-right, 0px))
+    max(1rem, env(safe-area-inset-bottom, 0px))
+    max(1rem, env(safe-area-inset-left, 0px));
+  gap: 0.5rem;
+  z-index: 9999;
+  flex-direction: column;
+  pointer-events: none;
+  box-sizing: border-box;
+  overflow: visible;
+
+  &[class*='top'] {
+    top: 0;
+  }
+
+  &[class*='bottom'] {
+    bottom: 0;
+    flex-direction: column-reverse;
+  }
+}
+</style>

package/dist/components/Toast/ToastContainer.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare const containerClass = "toast-paper-container";
+import type { ToastPosition } from './';
+interface Props {
+    position?: ToastPosition;
+}
+declare const ToastContainer: import("svelte").Component<Props, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

package/{components → dist/components}/Toast/index.d.ts

@@ -1,7 +1,17 @@
+import type { Snippet } from 'svelte';
 import type { PaperType, PositionY } from '../../types';
-export declare type ToastPosition = PositionY | 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left';
-interface ToastProps {
-    message: string;
+import type { IconNode } from '../../icons';
+export type ToastPosition = PositionY | 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left';
+export interface ToastProps {
+    /** Replaces the icon chosen from `type`. */
+    icon?: IconNode | null;
+    /** Hides the icon, including the one chosen from `type`. */
+    hideIcon?: boolean;
+    /** Heading shown above the message. */
+    title?: string;
+    message?: string;
+    /** Custom content. Receives `close`. Replaces `message`. */
+    content?: Snippet<[() => void]>;
     type?: PaperType;
     duration?: number;
     position?: ToastPosition;
@@ -9,7 +19,8 @@ interface ToastProps {
     dismissible?: boolean;
     indefinite?: boolean;
     closeAriaLabel?: string;
-    onClose?: Function;
+    class?: string;
+    onClose?: Function | null;
 }
 interface ToastMethods {
     open: (props: ToastProps | string) => void;
@@ -19,9 +30,12 @@ interface ToastMethods {
     warn: (options: OpenWithTypeParams | string) => void;
     danger: (options: OpenWithTypeParams | string) => void;
     error: (options: OpenWithTypeParams | string) => void;
+    clear: (position?: ToastPosition) => void;
 }
-declare type OpenWithTypeParams = Omit<ToastProps, 'type'>;
+type OpenWithTypeParams = Omit<ToastProps, 'type'>;
 export declare function open(props: ToastProps | string): void;
+/** Dismiss active toasts immediately (optionally only one position lane). */
+export declare function clear(position?: ToastPosition): void;
 export declare const info: (options: OpenWithTypeParams | string) => void;
 export declare const success: (options: OpenWithTypeParams | string) => void;
 export declare const warning: (options: OpenWithTypeParams | string) => void;