spaper 0.1.2 → 0.2.5

package/README.md

@@ -48,3 +48,33 @@ npm i spaper
 <Alert>...</Alert>
 <Button>Click me</Button>
 ```
+
+<hr />
+
+#### Components
+
+- Alert
+- Article
+- Badge
+- Breadcrumb
+- Button
+- Card
+- Collapsible
+- Checkbox
+- Input
+- Radio
+- Select
+- Slider
+- Switch
+- Modal
+- Navbar
+- Pagination
+- Popover
+- Progress
+- Table
+- Tabs
+
+##### Coming soon:
+- Form
+- Toast
+- Step

package/components/Alert.svelte

@@ -1,13 +1,16 @@
-<div class={classes}
+<div {...$$restProps}
+     class={classes}
      class:closed class:dismissible
      role="alert">
   <slot />
   {#if dismissible}
-    <span class="btn-close" on:click={close}>X</span>
+    <CloseButton on:click={close} />
   {/if}
 </div>
 
-<script lang="ts">;
+<script lang="ts">var _a;
+;
+import CloseButton from './CloseButton.svelte';
 import { computeClasses } from '../utils';
 export let type = 'primary';
 export let dismissible = false;
@@ -15,8 +18,7 @@ let closed = false;
 function close() {
     closed = true;
 }
-let classes;
-$: classes = `alert ${computeClasses('alert', { type })}`;
+$: classes = `${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} alert ${computeClasses('alert', { type })}`;
 </script>
 
 <style lang="scss">.alert {

package/components/Alert.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import type { PaperType } from '../types';
 declare const __propDef: {
     props: {
-        type?: any;
+        [x: string]: any;
+        type?: PaperType;
         dismissible?: boolean;
     };
     events: {

package/components/Button.svelte

@@ -1,5 +1,5 @@
 {#if isLink || href}
-  <a class={classes}
+  <a {...attr}
      class:disabled
      role="button"
      {href}
@@ -8,7 +8,7 @@
     <slot />
   </a>
 {:else}
-  <button class={classes}
+  <button {...attr}
           class:disabled
           disabled={disabled}
           on:click>
@@ -16,16 +16,24 @@
   </button>
 {/if}
 
-<script lang="ts">;
-import { computeClasses } from '../utils';
+<script lang="ts">var _a;
+;
+import { computeClasses, getDomAttributes } from '../utils';
 export let type = null;
 export let size = 'default';
 export let block = false;
 export let disabled = false;
 export let outline = null;
 export let isLink = false;
-export let href = '';
+export let href = 'javascript:void(0);';
 export let external = false;
+let attr;
+$: {
+    attr = getDomAttributes({
+        props: $$restProps,
+        classes,
+    });
+}
 let classes;
-$: classes = `paper-btn ${computeClasses('btn', { size, block, type, outline })}`;
+$: classes = `paper-btn ${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} ${computeClasses('btn', { size, block, type, outline })}`;
 </script>

package/components/Button.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import type { PaperSize, PaperType } from '../types';
 declare const __propDef: {
     props: {
-        type?: any;
-        size?: any;
+        [x: string]: any;
+        type?: PaperType;
+        size?: PaperSize;
         block?: boolean;
         disabled?: boolean;
-        outline?: any;
+        outline?: PaperType;
         isLink?: boolean;
         href?: string;
         external?: boolean;

package/components/Card.svelte

@@ -57,7 +57,8 @@
   {/if}
 </div>
 
-<script lang="ts">export let title = '';
+<script lang="ts">;
+export let title = '';
 export let subTitle = '';
 export let image = '';
 export let imageAlt = '';

package/components/Card.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { PositionY } from "../types";
 declare const __propDef: {
     props: {
         title?: string;
         subTitle?: string;
         image?: string;
         imageAlt?: string;
-        imagePlacement?: 'top' | 'bottom';
+        imagePlacement?: PositionY;
         header?: string;
         footer?: string;
         width?: string;

package/components/CloseButton.svelte

@@ -0,0 +1,23 @@
+<button {...$$restProps}
+        class="{$$restProps.class ?? ''} btn-close"
+        aria-label={ariaLabel}
+        on:click>
+  X
+</button>
+
+<script lang="ts">export let ariaLabel = 'close';
+</script>
+
+<style lang="scss">button {
+  float: right;
+  border: 0;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+  transform: none;
+}
+button:hover, button:focus {
+  transform: none;
+  box-shadow: none;
+  border: 0;
+}</style>

package/components/CloseButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CloseButtonProps = typeof __propDef.props;
+export declare type CloseButtonEvents = typeof __propDef.events;
+export declare type CloseButtonSlots = typeof __propDef.slots;
+export default class CloseButton extends SvelteComponentTyped<CloseButtonProps, CloseButtonEvents, CloseButtonSlots> {
+}
+export {};

package/components/Collapsible.svelte

@@ -1,31 +1,49 @@
-<div class="collapsible">
-  <label on:click={toggle}>
+<section {...$$restProps}
+         class="{$$restProps.class ?? ''} collapsible">
+  <input id={domId} type="checkbox"
+         bind:checked={open}>
+  <label for={domId}>
     {#if $$slots.trigger}
       <slot name="trigger" />
     {:else}
       {label}
     {/if}
   </label>
-  <div class="collapsible-body"
-       class:open>
+  <div class="collapsible-body">
     <slot />
   </div>
-</div>
+</section>
 
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script lang="ts" context="module">let count = 0;
+</script>
+
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createEventDispatcher, onMount } from 'svelte';
 export let label = '';
 export let open = false;
+let id;
+onMount(() => __awaiter(void 0, void 0, void 0, function* () {
+    id = count++;
+}));
 const dispatch = createEventDispatcher();
 const ANIMATION_DELAY = 235;
-function toggle() {
-    open = !open;
-    setTimeout(dispatch.bind(this, open ? 'open' : 'close'), ANIMATION_DELAY);
+let eventEnabled = false;
+let domId;
+// Needs to start with 'collapsible'
+$: domId = `collapsible-input-${id}`;
+$: {
+    // Prevent event from initialization
+    if (eventEnabled) {
+        setTimeout(dispatch.bind(this, open ? 'open' : 'close'), ANIMATION_DELAY);
+    }
+    eventEnabled = true;
 }
 </script>
-
-<style lang="scss">.collapsible-body.open {
-  margin: 0;
-  max-height: 960px;
-  opacity: 1;
-  padding: 0.75rem;
-}</style>

package/components/Collapsible.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label?: string;
         open?: boolean;
     };

package/components/Form/Form.svelte

@@ -0,0 +1,4 @@
+<form {...$$restProps}
+      class="{$$restProps.class ?? ''} form-group">
+  <slot />
+</form>

package/components/Form/Form.svelte.d.ts

@@ -0,0 +1,20 @@
+/** @typedef {typeof __propDef.props}  FormProps */
+/** @typedef {typeof __propDef.events}  FormEvents */
+/** @typedef {typeof __propDef.slots}  FormSlots */
+export default class Form {
+}
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/Form/Input.svelte

@@ -31,8 +31,7 @@
 
 <script lang="ts">var _a;
 import { createEventDispatcher } from 'svelte';
-import omit from 'lodash.omit';
-import { computeClasses } from '../../utils';
+import { computeClasses, getDomAttributes } from '../../utils';
 ;
 ;
 export let label = '';
@@ -51,8 +50,11 @@ $: if (valid) {
 }
 let attr;
 $: {
-    const props = omit($$props, ['block', 'value', 'valid', 'noResize']);
-    attr = Object.assign(Object.assign({}, props), { class: classes });
+    attr = getDomAttributes({
+        props: $$props,
+        classes,
+        toOmit: ['block', 'value', 'valid', 'noResize']
+    });
 }
 let classes;
 $: classes = `${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} ${computeClasses('input', { block })}`;

package/components/Form/Switch.svelte

@@ -5,13 +5,11 @@
            type="checkbox"
            {disabled} />
     <div class="paper-switch-tile-card border">
-      <div class={`paper-switch-tile-card-front
-                   border
+      <div class={`paper-switch-tile-card-front border
                    ${bgClass(tile.off.background)}`}>
         {tile.off.label}
       </div>
-      <div class={`paper-switch-tile-card-back
-                   border
+      <div class={`paper-switch-tile-card-back border
                    ${bgClass(tile.on.background)}`}>
         {tile.on.label}
       </div>
@@ -19,7 +17,7 @@
   </label>
 {:else}
   <label class={prefix}>
-    <input bind:this={checkbox}
+    <input id={domId}
            bind:checked
            type="checkbox"
            {disabled} />
@@ -28,26 +26,30 @@
   </label>
   {#if $$slots.default}
     <label class={`${prefix}-label`}
-           on:click={toggle}>
+           for={domId}>
       <slot />
     </label>
   {/if}
 {/if}
 
-<script lang="ts">;
+<script lang="ts" context="module">let count = 0;
+</script>
+
+<script lang="ts">import { onMount } from "svelte";
+;
 export let checked = false;
 export let disabled = false;
 export let round = false;
 export let inline = false;
 export let tile = null;
-let checkbox;
+let id;
+onMount(() => {
+    id = count++;
+});
+let domId;
+$: domId = `paper-switch-input-${id}`;
 let prefix;
 $: prefix = 'paper-switch' + (inline ? '-2' : '');
-function toggle() {
-    if (disabled)
-        return;
-    checkbox.checked = !checkbox.checked;
-}
 function bgClass(color) {
     if (!color)
         return;

package/components/Form/index.d.ts

@@ -4,5 +4,6 @@ import Radio from './Radio.svelte';
 import Checkbox from './Checkbox.svelte';
 import Switch from './Switch.svelte';
 import Slider from './Slider.svelte';
+import Form from './Form.svelte';
 export declare type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'time' | 'date' | 'month' | 'week' | 'datetime-local' | 'color' | 'textarea';
-export { Input, Select, Radio, Checkbox, Switch, Slider, };
+export { Input, Select, Radio, Checkbox, Switch, Slider, Form, };

package/components/Form/index.js

@@ -4,4 +4,5 @@ import Radio from './Radio.svelte';
 import Checkbox from './Checkbox.svelte';
 import Switch from './Switch.svelte';
 import Slider from './Slider.svelte';
-export { Input, Select, Radio, Checkbox, Switch, Slider, };
+import Form from './Form.svelte';
+export { Input, Select, Radio, Checkbox, Switch, Slider, Form, };

package/components/Modal/Modal.svelte

@@ -2,10 +2,7 @@
 
 <div class="modal" class:active>
   <div class="modal-body">
-    <button class="btn-close"
-            on:click={close}>
-      X
-    </button>
+    <CloseButton on:click={close} />
     {#if title}
       <h4 class="modal-title">{title}</h4>
     {/if}
@@ -27,6 +24,7 @@
 </div>
 
 <script lang="ts">import Button from '../Button.svelte';
+import CloseButton from '../CloseButton.svelte';
 export let active = false;
 export let title = '';
 export let subTitle = '';
@@ -40,15 +38,7 @@ function handleKeydown({ key }) {
 }
 </script>
 
-<style lang="scss">.btn-close {
-  border: 0;
-}
-.btn-close:hover {
-  box-shadow: none;
-  transform: none;
-}
-
-.modal.active {
+<style lang="scss">.modal.active {
   opacity: 1;
   visibility: visible;
 }

package/components/Navbar.svelte

@@ -1,4 +1,5 @@
-<nav class:border class:fixed
+<nav class={`${$$restProps.class ?? ''} paper-navbar`}
+     class:border class:fixed
      class:split-nav={split}>
   {#if $$slots.brand}
     <div class="nav-brand">
@@ -31,4 +32,8 @@ function collapse() {
   max-height: 960px;
   opacity: 1;
   padding: 0;
+}
+
+:global(.paper-navbar li a.paper-btn) {
+  display: initial;
 }</style>

package/components/Navbar.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         border?: boolean;
         fixed?: boolean;
         split?: boolean;

package/components/Pagination/Arrow.svelte

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+     width={dimension} height={dimension} viewBox="0 0 24 24">
+  {#if type === 'right'}
+    <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
+  {:else}
+    <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
+  {/if}
+</svg>
+
+<script lang="ts">;
+;
+import arrowDimension from './arrow-dimension';
+export let size;
+export let type;
+let dimension;
+$: dimension = arrowDimension[size];
+</script>

package/components/Pagination/Arrow.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PaperSize } from '../../types';
+import type { Direction } from '.';
+declare const __propDef: {
+    props: {
+        size: PaperSize;
+        type: Direction;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ArrowProps = typeof __propDef.props;
+export declare type ArrowEvents = typeof __propDef.events;
+export declare type ArrowSlots = typeof __propDef.slots;
+export default class Arrow extends SvelteComponentTyped<ArrowProps, ArrowEvents, ArrowSlots> {
+}
+export {};

package/components/Pagination/NavigationButton.svelte

@@ -0,0 +1,23 @@
+<Button {size} {type}
+        isLink {disabled}
+        aria-label={ariaLabel}
+        on:click={clickHandler}>
+  {#if label}
+    {label}
+  {:else}
+    <Arrow {size}
+      type={action === 'next' ? 'right' : 'left'} />
+  {/if}
+</Button>
+
+<script lang="ts">import Button from '../Button.svelte';
+import Arrow from './Arrow.svelte';
+;
+export let size;
+export let label;
+export let action;
+export let type;
+export let disabled;
+export let clickHandler;
+export let ariaLabel;
+</script>

package/components/Pagination/NavigationButton.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PaperSize, PaperType } from '../../types';
+declare const __propDef: {
+    props: {
+        size: PaperSize;
+        label: string;
+        action: 'previous' | 'next';
+        type: PaperType;
+        disabled: boolean;
+        clickHandler: (e: MouseEvent) => any;
+        ariaLabel: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NavigationButtonProps = typeof __propDef.props;
+export declare type NavigationButtonEvents = typeof __propDef.events;
+export declare type NavigationButtonSlots = typeof __propDef.slots;
+export default class NavigationButton extends SvelteComponentTyped<NavigationButtonProps, NavigationButtonEvents, NavigationButtonSlots> {
+}
+export {};

package/components/Pagination/Pagination.svelte

@@ -0,0 +1,122 @@
+<section {...$$restProps}>
+  {#if navigation}
+    <NavigationButton
+      type={highlightedStyle}
+      {size} action="previous"
+      label={previousLabel}
+      disabled={current <= 1}
+      clickHandler={changePage.bind(null, current-1)}
+      ariaLabel={ariaPreviousLabel} />
+  {/if}
+
+  {#if simple}
+    {current} / {pageCount}
+  {:else}
+    <ul class="padding-none">
+      {#each pages as {idx, show}}
+        <li>
+          {#if show}
+            <Button {size} isLink
+                    on:click={changePage.bind(null, idx)}
+                    type={idx === current ? highlightedStyle : defaultStyle}
+                    aria-label={ariaPageLabel?.(idx) ?? `Page ${idx}`}
+                    aria-current={idx === current}>
+              {idx}
+            </Button>
+          {:else if shouldDisplayEllipsis(idx)}
+            …
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#if navigation}
+    <NavigationButton
+      type={highlightedStyle}
+      {size} action="next"
+      label={nextLabel}
+      disabled={current >= pageCount}
+      clickHandler={changePage.bind(null, current+1)}
+      ariaLabel={ariaNextLabel} />
+  {/if}
+
+  {#if jumper}
+    <span on:keypress={submitJumper}>
+      <Input class="paper-pagination-input"
+             bind:value={jumperValue}
+             type="number" placeholder="Go to"
+             min="1" max={pageCount} step="1" />
+    </span>
+  {/if}
+</section>
+
+<script lang="ts">import { createEventDispatcher } from 'svelte';
+import Button from '../Button.svelte';
+import Input from '../Form/Input.svelte';
+;
+import NavigationButton from './NavigationButton.svelte';
+export let total;
+export let pageSize = 10;
+export let current = 1;
+export let size = 'small';
+export let navigation = true;
+export let simple = false;
+export let previousLabel = null;
+export let nextLabel = null;
+export let highlightedStyle = 'secondary';
+export let defaultStyle = null;
+export let rangeBetween = null;
+export let jumper = false;
+export let ariaPreviousLabel = 'previous page';
+export let ariaNextLabel = 'next page';
+export let ariaPageLabel = null;
+const dispatch = createEventDispatcher();
+let jumperValue;
+let pageCount;
+$: pageCount = Math.ceil(total / pageSize);
+let pages;
+$: if (current) {
+    pages = Array.from({ length: pageCount }, (_, i) => ({ idx: ++i, show: shouldDisplayButton(i) }));
+}
+function submitJumper({ code }) {
+    const toPage = Number(jumperValue);
+    if (code !== 'Enter' || pageInvalid(toPage))
+        return;
+    changePage(toPage);
+}
+function pageInvalid(idx) {
+    return idx < 1 || idx > pageCount || !Number.isInteger(idx);
+}
+function shouldDisplayButton(idx) {
+    if (!rangeBetween || [1, pageCount].includes(idx))
+        return true;
+    return idx >= (current - rangeBetween)
+        && idx <= (current + rangeBetween);
+}
+function shouldDisplayEllipsis(idx) {
+    return pages[idx - 2].show;
+}
+function changePage(val) {
+    if (pageInvalid(val))
+        return;
+    current = val;
+    dispatch('change', current);
+}
+</script>
+
+<style lang="scss">ul, li {
+  display: inline;
+}
+
+ul li {
+  text-indent: 0;
+}
+ul li::before {
+  content: "";
+}
+
+:global(.paper-pagination-input) {
+  display: inline;
+  width: 4rem;
+}</style>

package/components/Pagination/Pagination.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PaperSize, PaperType } from '../../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        total: number;
+        pageSize?: number;
+        current?: number;
+        size?: PaperSize;
+        navigation?: boolean;
+        simple?: boolean;
+        previousLabel?: string;
+        nextLabel?: string;
+        highlightedStyle?: PaperType;
+        defaultStyle?: PaperType;
+        rangeBetween?: number;
+        jumper?: boolean;
+        ariaPreviousLabel?: string;
+        ariaNextLabel?: string;
+        ariaPageLabel?: (idx: number) => string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PaginationProps = typeof __propDef.props;
+export declare type PaginationEvents = typeof __propDef.events;
+export declare type PaginationSlots = typeof __propDef.slots;
+export default class Pagination extends SvelteComponentTyped<PaginationProps, PaginationEvents, PaginationSlots> {
+}
+export {};

package/components/Pagination/arrow-dimension.d.ts

@@ -0,0 +1,3 @@
+import type { PaperSize } from '../../types';
+declare const arrowDimension: Record<PaperSize, number>;
+export default arrowDimension;

package/components/Pagination/arrow-dimension.js

@@ -0,0 +1,6 @@
+const arrowDimension = {
+    'small': 10,
+    'default': 14,
+    'large': 24,
+};
+export default arrowDimension;

package/components/Pagination/index.d.ts

@@ -0,0 +1,3 @@
+import Pagination from './Pagination.svelte';
+export declare type Direction = 'left' | 'right';
+export default Pagination;

package/components/Pagination/index.js

@@ -0,0 +1,2 @@
+import Pagination from './Pagination.svelte';
+export default Pagination;

package/components/Popover.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { PaperType } from "../types";
+import type { PaperType, Position } from "../types";
 declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
-        position?: 'top' | 'right' | 'bottom' | 'left';
+        position?: Position;
         inline?: boolean;
         background?: PaperType;
         active?: boolean;

package/components/Tabs/Tabs.svelte

@@ -67,4 +67,15 @@ $: activeTab && updateTabsVisility();
 .tabs-label-header--active {
   color: var(--primary);
   border-bottom: 3px solid var(--secondary);
+}
+
+:global(.tabs input) {
+  display: block;
+}
+
+:global(.tabs label) {
+  all: inherit;
+}
+:global(.tabs label):hover {
+  all: inherit;
 }</style>

package/components/Toast/Toast.svelte

@@ -0,0 +1,78 @@
+{#if active}
+  <div class={classes}
+       bind:this={toastElement}
+       on:mouseenter={pause}
+       on:mouseleave={dismiss}
+       in:fly={{ y: position.includes('top') ? -100 : 100 }}
+       out:fade={{ duration: 300 }}
+       role="alert">
+    {@html message}
+    {#if dismissible||indefinite}
+      <CloseButton ariaLabel={closeAriaLabel}
+                   on:click={close} />
+    {/if}
+  </div>
+{/if}
+
+<script lang="ts">import { onMount } from 'svelte';
+import { fly, fade } from 'svelte/transition';
+;
+;
+import { computeClasses } from '../../utils';
+import ToastContainer, { containerClass } from './ToastContainer.svelte';
+import CloseButton from '../CloseButton.svelte';
+export let message;
+export let type = 'primary';
+export let duration = 2000;
+export let position = 'top-right';
+export let pauseOnHover = false;
+export let dismissible = false;
+export let indefinite = false;
+export let closeAriaLabel = 'close';
+export let onClose = null;
+let active = true;
+let toastElement;
+let timeoutId;
+$: containerSelector = `.${containerClass}.${position}`;
+$: classes = `alert margin-small shadow ${computeClasses('alert', { type })}`;
+onMount(() => {
+    insert();
+    if (!indefinite) {
+        timeoutId = window.setTimeout(close, duration);
+    }
+    if (timeoutId) {
+        return () => clearTimeout(timeoutId);
+    }
+});
+function pause() {
+    if (!pauseOnHover || indefinite)
+        return;
+    clearTimeout(timeoutId);
+}
+function dismiss() {
+    if (!pauseOnHover || indefinite)
+        return;
+    close();
+}
+function close() {
+    active = false;
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+}
+function setupContainer() {
+    new ToastContainer({
+        target: document.body,
+        props: { position },
+    });
+    return document.querySelector(containerSelector);
+}
+function insert() {
+    const container = document.querySelector(containerSelector) || setupContainer();
+    container.insertAdjacentElement('afterbegin', toastElement);
+}
+</script>
+
+<style>
+div {
+  width: 250px;
+}
+</style>

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

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PaperType } from '../../types';
+import type { ToastPosition } from './';
+declare const __propDef: {
+    props: {
+        message: string;
+        type?: PaperType;
+        duration?: number;
+        position?: ToastPosition;
+        pauseOnHover?: boolean;
+        dismissible?: boolean;
+        indefinite?: boolean;
+        closeAriaLabel?: string;
+        onClose?: Function;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ToastProps = typeof __propDef.props;
+export declare type ToastEvents = typeof __propDef.events;
+export declare type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponentTyped<ToastProps, ToastEvents, ToastSlots> {
+}
+export {};

package/components/Toast/ToastContainer.svelte

@@ -0,0 +1,37 @@
+<div class="{containerClass} {position}">
+</div>
+
+<script lang="ts" context="module">export const containerClass = 'paper-toast-container';
+</script>
+
+<script lang="ts">;
+export let position = 'top-right';
+</script>
+
+<style lang="scss">:global(.paper-toast-container:is(.top, .bottom) > div) {
+  align-self: center;
+}
+
+:global(.paper-toast-container:is([class*=right]) > div) {
+  align-self: end;
+}
+
+div {
+  position: fixed;
+  display: flex;
+  width: 100%;
+  padding: 2em;
+  overflow: hidden;
+  z-index: 9999;
+  flex-direction: column;
+}
+div[class*=top] {
+  top: 0;
+}
+div[class*=bottom] {
+  bottom: 0;
+  flex-direction: column-reverse;
+}
+div[class*=left] {
+  left: 0;
+}</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+export declare const containerClass = "paper-toast-container";
+import type { ToastPosition } from './';
+declare const __propDef: {
+    props: {
+        position?: ToastPosition;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ToastContainerProps = typeof __propDef.props;
+export declare type ToastContainerEvents = typeof __propDef.events;
+export declare type ToastContainerSlots = typeof __propDef.slots;
+export default class ToastContainer extends SvelteComponentTyped<ToastContainerProps, ToastContainerEvents, ToastContainerSlots> {
+}
+export {};

package/components/Toast/index.d.ts

@@ -0,0 +1,32 @@
+import type { PaperType, PositionY } from '../../types';
+export declare type ToastPosition = PositionY | 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left';
+interface ToastProps {
+    message: string;
+    type?: PaperType;
+    duration?: number;
+    position?: ToastPosition;
+    pauseOnHover?: boolean;
+    dismissible?: boolean;
+    indefinite?: boolean;
+    closeAriaLabel?: string;
+    onClose?: Function;
+}
+interface ToastMethods {
+    open: (props: ToastProps | string) => void;
+    info: (options: OpenWithTypeParams | string) => void;
+    success: (options: OpenWithTypeParams | string) => void;
+    warning: (options: OpenWithTypeParams | string) => void;
+    warn: (options: OpenWithTypeParams | string) => void;
+    danger: (options: OpenWithTypeParams | string) => void;
+    error: (options: OpenWithTypeParams | string) => void;
+}
+declare type OpenWithTypeParams = Omit<ToastProps, 'type'>;
+export declare function open(props: ToastProps | string): 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;
+export declare const warn: (options: OpenWithTypeParams | string) => void;
+export declare const danger: (options: OpenWithTypeParams | string) => void;
+export declare const error: (options: OpenWithTypeParams | string) => void;
+declare const _default: ToastMethods;
+export default _default;

package/components/Toast/index.js

@@ -0,0 +1,37 @@
+import Toast from './Toast.svelte';
+export function open(props) {
+    if (typeof props === 'string')
+        props = { message: props };
+    new Toast({
+        target: document.body,
+        props,
+        intro: true,
+    });
+}
+function openType(type) {
+    return (options) => {
+        const props = {
+            type,
+            message: '',
+        };
+        if (typeof options === 'string')
+            props.message = options;
+        else
+            Object.assign(props, options);
+        new Toast({
+            target: document.body,
+            props,
+            intro: true,
+        });
+    };
+}
+export const info = openType('secondary');
+export const success = openType('success');
+export const warning = openType('warning');
+export const warn = warning;
+export const danger = openType('danger');
+export const error = danger;
+Object.assign(Toast, {
+    open, info, success, warning, warn, danger
+});
+export default Toast;

package/index.d.ts

@@ -5,11 +5,13 @@ import Breadcrumb from './components/Breadcrumb.svelte';
 import Navbar from './components/Navbar.svelte';
 import Modal from './components/Modal';
 import { Tabs, Tab } from './components/Tabs';
-import { Input, Select, Radio, Checkbox, Switch, Slider } from './components/Form';
+import { Input, Select, Radio, Checkbox, Switch, Slider, Form } from './components/Form';
 import Article from './components/Article.svelte';
 import Card from './components/Card.svelte';
 import Collapsible from './components/Collapsible.svelte';
 import Popover from './components/Popover.svelte';
 import Progress from './components/Progress.svelte';
 import Table from './components/Table.svelte';
-export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, };
+import Pagination from './components/Pagination';
+import Toast from './components/Toast';
+export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Form, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, Pagination, Toast, };

package/index.js

@@ -5,11 +5,13 @@ import Breadcrumb from './components/Breadcrumb.svelte';
 import Navbar from './components/Navbar.svelte';
 import Modal from './components/Modal';
 import { Tabs, Tab } from './components/Tabs';
-import { Input, Select, Radio, Checkbox, Switch, Slider } from './components/Form';
+import { Input, Select, Radio, Checkbox, Switch, Slider, Form } from './components/Form';
 import Article from './components/Article.svelte';
 import Card from './components/Card.svelte';
 import Collapsible from './components/Collapsible.svelte';
 import Popover from './components/Popover.svelte';
 import Progress from './components/Progress.svelte';
 import Table from './components/Table.svelte';
-export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, };
+import Pagination from './components/Pagination';
+import Toast from './components/Toast';
+export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Form, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, Pagination, Toast, };

package/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "0.1.2",
+  "version": "0.2.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -33,8 +33,10 @@
     "./components/Breadcrumb.svelte": "./components/Breadcrumb.svelte",
     "./components/Button.svelte": "./components/Button.svelte",
     "./components/Card.svelte": "./components/Card.svelte",
+    "./components/CloseButton.svelte": "./components/CloseButton.svelte",
     "./components/Collapsible.svelte": "./components/Collapsible.svelte",
     "./components/Form/Checkbox.svelte": "./components/Form/Checkbox.svelte",
+    "./components/Form/Form.svelte": "./components/Form/Form.svelte",
     "./components/Form/Input.svelte": "./components/Form/Input.svelte",
     "./components/Form/Radio.svelte": "./components/Form/Radio.svelte",
     "./components/Form/Select.svelte": "./components/Form/Select.svelte",
@@ -45,12 +47,20 @@
     "./components/Modal/Modal.svelte": "./components/Modal/Modal.svelte",
     "./components/Modal": "./components/Modal/index.js",
     "./components/Navbar.svelte": "./components/Navbar.svelte",
+    "./components/Pagination/Arrow.svelte": "./components/Pagination/Arrow.svelte",
+    "./components/Pagination/NavigationButton.svelte": "./components/Pagination/NavigationButton.svelte",
+    "./components/Pagination/Pagination.svelte": "./components/Pagination/Pagination.svelte",
+    "./components/Pagination/arrow-dimension.js": "./components/Pagination/arrow-dimension.js",
+    "./components/Pagination": "./components/Pagination/index.js",
     "./components/Popover.svelte": "./components/Popover.svelte",
     "./components/Progress.svelte": "./components/Progress.svelte",
     "./components/Table.svelte": "./components/Table.svelte",
     "./components/Tabs/Tab.svelte": "./components/Tabs/Tab.svelte",
     "./components/Tabs/Tabs.svelte": "./components/Tabs/Tabs.svelte",
     "./components/Tabs": "./components/Tabs/index.js",
+    "./components/Toast/Toast.svelte": "./components/Toast/Toast.svelte",
+    "./components/Toast/ToastContainer.svelte": "./components/Toast/ToastContainer.svelte",
+    "./components/Toast": "./components/Toast/index.js",
     "./components/style.scss": "./components/style.scss",
     ".": "./index.js",
     "./utils.js": "./utils.js"

package/types.d.ts

@@ -7,3 +7,7 @@ export type PaperFlexPlacement = 'spaces' | 'edges' | 'right' | 'center' | 'left
 export type PaperAlign = 'left' | 'center' | 'right';
 
 export type Attributes = Record<string, string|boolean>;
+
+export type PositionY = 'top' | 'bottom';
+export type PositionX = 'left' | 'right';
+export type Position = PositionX | PositionY;

package/utils.d.ts

@@ -1 +1,9 @@
+import type { Attributes } from './types';
+interface getDomAttributesParams {
+    props: Attributes;
+    classes: string;
+    toOmit?: string[];
+}
 export declare function computeClasses(elPrefix: string, props: Record<string, any>): string;
+export declare function getDomAttributes({ props, classes, toOmit }: getDomAttributesParams): Attributes;
+export {};

package/utils.js

@@ -1,3 +1,4 @@
+import omit from 'lodash.omit';
 const propToClass = {
     size: (pf, val) => `${pf}-${val}`,
     block: (pf, _val) => `${pf}-block`,
@@ -11,3 +12,8 @@ export function computeClasses(elPrefix, props) {
         .join(' ');
 }
 ;
+export function getDomAttributes({ props, classes, toOmit = [] }) {
+    return {
+        ...omit(props, toOmit), class: classes
+    };
+}