spaper 0.2.4 → 0.4.6

package/README.md

@@ -14,7 +14,7 @@ Browse [documentation and demo here](https://oli8.github.io/spaper/).
 Add a link to the CDN into your HTML file:  
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/papercss@1.8.2/dist/paper.min.css">
+<link rel="stylesheet" href="https://unpkg.com/papercss@1.8.3/dist/paper.min.css">
 ```
 
 Or use NPM:
@@ -48,3 +48,32 @@ npm i spaper
 <Alert>...</Alert>
 <Button>Click me</Button>
 ```
+
+<hr />
+
+#### Components
+
+- Alert
+- Article
+- Badge
+- Breadcrumb
+- Button
+- Card
+- CloseButton
+- Collapsible
+- CopyButton
+- Form
+- Checkbox
+- Input
+- Radio
+- Select
+- Slider
+- Switch
+- Modal
+- Navbar
+- Pagination
+- Popover
+- Progress
+- Table
+- Tabs
+- Toast

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 >var _a;
+;
+import CloseButton from './CloseButton.svelte';
 import { computeClasses } from '../utils';
 export let type = 'primary';
 export let dismissible = false;
@@ -15,11 +18,10 @@ 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 {
+<style >.alert {
   transition: all 0.25s ease-out;
 }
 .alert.closed {

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/Article.svelte

@@ -1,4 +1,5 @@
-<article class="article padding-small"
+<article {...$$restProps}
+         class="{$$restProps.class ?? ''} article padding-small"
          class:border>
   <h1 class="article-title">
     {#if $$slots.title}
@@ -31,7 +32,7 @@
   {/if}
 </article>
 
-<script lang="ts">export let title = '';
+<script >export let title = '';
 export let meta = '';
 export let textLead = '';
 export let border = false;

package/components/Article.svelte.d.ts

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

package/components/Badge.svelte

@@ -1,8 +1,10 @@
-<span class={`badge ${type}`} class:rounded>
+<span {...$$restProps}
+      class="{$$restProps.class ?? ''} badge {type}"
+      class:rounded>
   <slot />
 </span>
 
-<script lang="ts">;
+<script >;
 export let type = 'primary';
 export let rounded = false;
 </script>

package/components/Badge.svelte.d.ts

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

package/components/Breadcrumb.svelte

@@ -1,4 +1,6 @@
-<ul class="breadcrumb" class:border>
+<ul {...$$restProps}
+    class="{$$restProps.class ?? ''} breadcrumb"
+    class:border>
   {#each items as { text, href }}
     <li>
       {#if href}
@@ -10,6 +12,6 @@
   {/each}
 </ul>
 
-<script lang="ts">export let border = false;
+<script >export let border = false;
 export let items = [];
 </script>

package/components/Breadcrumb.svelte.d.ts

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

package/components/Button.svelte

@@ -2,7 +2,7 @@
   <a {...attr}
      class:disabled
      role="button"
-     {href}
+     href={href ?? 'javascript:void(0);'}
      target={external ? '_blank' : '_self'}
      on:click>
     <slot />
@@ -16,7 +16,7 @@
   </button>
 {/if}
 
-<script lang="ts">var _a;
+<script >var _a;
 ;
 import { computeClasses, getDomAttributes } from '../utils';
 export let type = null;
@@ -25,7 +25,7 @@ export let block = false;
 export let disabled = false;
 export let outline = null;
 export let isLink = false;
-export let href = 'javascript:void(0);';
+export let href = null;
 export let external = false;
 let attr;
 $: {

package/components/Card.svelte

@@ -1,4 +1,5 @@
-<div class="card"
+<div {...$$restProps}
+     class="{$$restProps.class ?? ''} card"
      style={`width: ${width}`}>
   {#if header || $$slots.header}
     <header class="card-header">
@@ -57,7 +58,8 @@
   {/if}
 </div>
 
-<script lang="ts">export let title = '';
+<script >;
+export let title = '';
 export let subTitle = '';
 export let image = '';
 export let imageAlt = '';

package/components/Card.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import type { PositionY } from "../types";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         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 >export let ariaLabel = 'close';
+</script>
+
+<style >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

@@ -14,10 +14,10 @@
   </div>
 </section>
 
-<script lang="ts" context="module">let count = 0;
+<script  context="module">let count = 0;
 </script>
 
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+<script >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); } }

package/components/CopyButton.svelte

@@ -0,0 +1,43 @@
+<Button {...$$restProps}
+        aria-label={ariaLabel}
+        on:click
+        on:click={copy}>
+  <slot />
+</Button>
+
+<script >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 } from 'svelte';
+import Button from './Button.svelte';
+import { success } from './Toast';
+export let text;
+export let successMessage = 'Copied!';
+export let ariaLabel = 'Copy to clipboard';
+const dispatch = createEventDispatcher();
+function copy() {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!text)
+            return;
+        try {
+            yield navigator.clipboard.writeText(text);
+            dispatch('copy', text);
+            if (successMessage)
+                success({
+                    message: successMessage,
+                    position: 'top',
+                    duration: 1000,
+                });
+        }
+        catch (e) {
+            console.error(e);
+        }
+    });
+}
+</script>

package/components/CopyButton.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        text: string;
+        successMessage?: string;
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+        copy: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CopyButtonProps = typeof __propDef.props;
+export declare type CopyButtonEvents = typeof __propDef.events;
+export declare type CopyButtonSlots = typeof __propDef.slots;
+export default class CopyButton extends SvelteComponentTyped<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {
+}
+export {};

package/components/Form/Checkbox.svelte

@@ -1,4 +1,5 @@
-<label class="paper-check">
+<label {...$$restProps}
+       class="{$$restProps.class ?? ''} paper-check">
   <input type="checkbox"
          {value} {name}
          {disabled}
@@ -9,7 +10,7 @@
   <span>{label}</span>
 </label>
 
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script >import { createEventDispatcher } from 'svelte';
 export let label = '';
 export let value = '';
 export let name = '';
@@ -30,7 +31,7 @@ function onChange({ target }) {
 }
 </script>
 
-<style lang="scss">input[disabled] + span::before, input[disabled] ~ span {
+<style >input[disabled] + span::before, input[disabled] ~ span {
   opacity: 0.5;
   cursor: not-allowed;
 }</style>

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

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

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

@@ -29,7 +29,7 @@
          on:change />
 {/if}
 
-<script lang="ts">var _a;
+<script >var _a;
 import { createEventDispatcher } from 'svelte';
 import { computeClasses, getDomAttributes } from '../../utils';
 ;

package/components/Form/Radio.svelte

@@ -19,7 +19,7 @@
          on:change />
 {/if}
 
-<script lang="ts">export let label = '';
+<script >export let label = '';
 export let value = '';
 export let group = '';
 </script>

package/components/Form/Select.svelte

@@ -21,7 +21,7 @@
   </select>
 {/if}
 
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script >import { createEventDispatcher } from 'svelte';
 export let label = '';
 export let value = '';
 let selectElement;

package/components/Form/Slider.svelte

@@ -24,7 +24,7 @@
   {/if}
 </label>
 
-<script lang="ts">import { onMount } from 'svelte';
+<script >import { onMount } from 'svelte';
 ;
 import { computeClasses } from '../../utils';
 export let label = '';
@@ -52,7 +52,7 @@ $: if (percentage) {
 }
 </script>
 
-<style lang="scss">label.block {
+<style >label.block {
   width: 100%;
 }
 label.disabled {

package/components/Form/Switch.svelte

@@ -1,9 +1,11 @@
 {#if tile}
-  <label class="paper-switch-tile"
+  <label {...$$restProps}
+         class="{$$restProps.class ?? ''} paper-switch-tile"
          class:disabled>
     <input bind:checked
            type="checkbox"
-           {disabled} />
+           {disabled}
+           on:change={onChange} />
     <div class="paper-switch-tile-card border">
       <div class={`paper-switch-tile-card-front border
                    ${bgClass(tile.off.background)}`}>
@@ -20,7 +22,8 @@
     <input id={domId}
            bind:checked
            type="checkbox"
-           {disabled} />
+           {disabled}
+           on:change={onChange} />
     <span class="paper-switch-slider"
           class:round></span>
   </label>
@@ -32,16 +35,17 @@
   {/if}
 {/if}
 
-<script lang="ts" context="module">let count = 0;
+<script  context="module">let count = 0;
 </script>
 
-<script lang="ts">import { onMount } from "svelte";
+<script >import { onMount, createEventDispatcher } from "svelte";
 ;
 export let checked = false;
 export let disabled = false;
 export let round = false;
 export let inline = false;
 export let tile = null;
+const dispatch = createEventDispatcher();
 let id;
 onMount(() => {
     id = count++;
@@ -50,6 +54,9 @@ let domId;
 $: domId = `paper-switch-input-${id}`;
 let prefix;
 $: prefix = 'paper-switch' + (inline ? '-2' : '');
+function onChange() {
+    dispatch('change', checked);
+}
 function bgClass(color) {
     if (!color)
         return;
@@ -57,7 +64,7 @@ function bgClass(color) {
 }
 </script>
 
-<style lang="scss">input[disabled] + span,
+<style >input[disabled] + span,
 .paper-switch-tile.disabled {
   opacity: 0.5;
   cursor: not-allowed;

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

@@ -1,11 +1,10 @@
 <svelte:window on:keydown={handleKeydown} />
 
-<div class="modal" class:active>
+<div {...$$restProps}
+     class="{$$restProps.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}
@@ -26,7 +25,8 @@
   </div>
 </div>
 
-<script lang="ts">import Button from '../Button.svelte';
+<script >import Button from '../Button.svelte';
+import CloseButton from '../CloseButton.svelte';
 export let active = false;
 export let title = '';
 export let subTitle = '';
@@ -40,15 +40,7 @@ function handleKeydown({ key }) {
 }
 </script>
 
-<style lang="scss">.btn-close {
-  border: 0;
-}
-.btn-close:hover {
-  box-shadow: none;
-  transform: none;
-}
-
-.modal.active {
+<style >.modal.active {
   opacity: 1;
   visibility: visible;
 }

package/components/Modal/Modal.svelte.d.ts

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

package/components/Navbar.svelte

@@ -1,4 +1,5 @@
-<nav class={`${$$restProps.class ?? ''} paper-navbar`}
+<nav {...$$restProps}
+     class={`${$$restProps.class ?? ''} paper-navbar`}
      class:border class:fixed
      class:split-nav={split}>
   {#if $$slots.brand}
@@ -14,7 +15,7 @@
   </div>
 </nav>
 
-<script lang="ts">export let border = true;
+<script >export let border = true;
 export let fixed = false;
 export let split = true;
 let open = false;
@@ -23,7 +24,7 @@ function collapse() {
 }
 </script>
 
-<style lang="scss">/* Papercss removes border of buttons in .collapsible */
+<style >/* Papercss removes border of buttons in .collapsible */
 .collapsible > button {
   border: 2px solid var(--primary);
 }

package/components/Pagination/Arrow.svelte

@@ -7,7 +7,7 @@
   {/if}
 </svg>
 
-<script lang="ts">;
+<script >;
 ;
 import arrowDimension from './arrow-dimension';
 export let size;

package/components/Pagination/NavigationButton.svelte

@@ -10,7 +10,7 @@
   {/if}
 </Button>
 
-<script lang="ts">import Button from '../Button.svelte';
+<script >import Button from '../Button.svelte';
 import Arrow from './Arrow.svelte';
 ;
 export let size;

package/components/Pagination/Pagination.svelte

@@ -51,7 +51,7 @@
   {/if}
 </section>
 
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script >import { createEventDispatcher } from 'svelte';
 import Button from '../Button.svelte';
 import Input from '../Form/Input.svelte';
 ;
@@ -105,7 +105,7 @@ function changePage(val) {
 }
 </script>
 
-<style lang="scss">ul, li {
+<style >ul, li {
   display: inline;
 }
 

package/components/Popover.svelte

@@ -1,11 +1,12 @@
-<div { ...{[`popover-${position}`]: label} }
+<div {...$$restProps}
+     { ...{[`popover-${position}`]: label} }
      class={`${$$restProps.class} ${bgClass(background)}`}
      class:inline
      class:active={always || active}>
   <slot />
 </div>
 
-<script lang="ts">;
+<script >;
 export let label = '';
 export let position = 'top';
 export let inline = true;
@@ -17,7 +18,7 @@ function bgClass(color) {
 }
 </script>
 
-<style lang="scss">.inline {
+<style >.inline {
   display: inline;
 }
 

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/Progress.svelte

@@ -1,4 +1,5 @@
-<div class={`progress ${$$restProps.class ?? ''}`}
+<div {...$$restProps}
+     class={`progress ${$$restProps.class ?? ''}`}
      class:margin-bottom={marginBottom}>
   <div class={`bar ${type} w-${cappedValue}`}
        class:striped class:infinite>
@@ -10,7 +11,7 @@
   </div>
 </div>
 
-<script lang="ts">;
+<script >;
 export let value = 50;
 export let type = 'primary';
 export let showValue = false;

package/components/Table.svelte

@@ -1,6 +1,6 @@
-<table class:table-alternating={striped}
-       class:table-hover={hoverable}
-       {...$$restProps}>
+<table {...$$restProps}
+       class:table-alternating={striped}
+       class:table-hover={hoverable}>
   {#if showHeader}
     <thead>
       <tr>
@@ -41,8 +41,7 @@
   </tbody>
 </table>
 
-<script lang="ts">import pick from 'lodash.pick';
-let tmpCol;
+<script >let tmpCol;
 export let columns = [];
 export let data = [];
 export let striped = false;
@@ -63,7 +62,7 @@ function isColumnObj(arg) {
     return arg.field;
 }
 function getRowFiltered(row) {
-    return Object.entries(pick(row, displayedFields));
+    return Object.entries(row).filter(([key, _val]) => displayedFields.includes(key));
 }
 $: if (!columns.length) {
     columns = Object.keys(data[0] || {});

package/components/Tabs/Tab.svelte

@@ -1,4 +1,5 @@
-<div class="content margin"
+<div {...$$restProps}
+     class="{$$restProps.class ?? ''} content margin"
      class:content--active={active}
      aria-hidden={!active}>
   {#if $$slots.header}
@@ -10,7 +11,7 @@
   <slot />
 </div>
 
-<script lang="ts">import { onMount, getContext } from 'svelte';
+<script >import { onMount, getContext } from 'svelte';
 ;
 export let label;
 const key = {};

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

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

package/components/Tabs/Tabs.svelte

@@ -1,4 +1,5 @@
-<div class={`row flex-${placement} tabs ${$$restProps.class ?? ''}`}
+<div {...$$restProps}
+     class={`row flex-${placement} tabs ${$$restProps.class ?? ''}`}
      style={`text-align: ${contentAlign}`}>
   {#each $tabs as { label, header }, index}
     <div class="tabs-label-header"
@@ -15,7 +16,7 @@
   <slot />
 </div>
 
-<script lang="ts">import { onMount, setContext, createEventDispatcher } from 'svelte';
+<script >import { onMount, setContext, createEventDispatcher } from 'svelte';
 import { writable } from 'svelte/store';
 ;
 ;
@@ -52,7 +53,7 @@ function updateTabsVisility() {
 $: activeTab && updateTabsVisility();
 </script>
 
-<style lang="scss">.tabs-label-header {
+<style >.tabs-label-header {
   cursor: pointer;
   color: var(--primary-light);
   display: inline-block;
@@ -67,4 +68,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,91 @@
+{#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: TRANSITION_OUT_DURATION }}
+       role="alert">
+    {@html message}
+    {#if dismissible||indefinite}
+      <CloseButton ariaLabel={closeAriaLabel}
+                   on:click={close} />
+    {/if}
+  </div>
+{/if}
+
+<script >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;
+const TRANSITION_OUT_DURATION = 300;
+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;
+    removeContainer();
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+}
+function getContainer() {
+    return document.querySelector(containerSelector);
+}
+function setupContainer() {
+    new ToastContainer({
+        target: document.body,
+        props: { position },
+    });
+    return getContainer();
+}
+function insert() {
+    const container = getContainer() || setupContainer();
+    container.insertAdjacentElement('afterbegin', toastElement);
+}
+function removeContainer() {
+    const container = getContainer();
+    setTimeout(() => {
+        if (container.children.length === 1) {
+            container.remove();
+        }
+    }, TRANSITION_OUT_DURATION);
+}
+</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  context="module">export const containerClass = 'paper-toast-container';
+</script>
+
+<script >;
+export let position = 'top-right';
+</script>
+
+<style >:global(.paper-toast-container:is(.top, .bottom) > div) {
+  align-self: center;
+}
+
+:global(.paper-toast-container:is([class*=right]) > div) {
+  align-self: end;
+}
+
+div {
+  height: 0;
+  position: fixed;
+  display: flex;
+  width: 100%;
+  padding: 2em;
+  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, error, danger
+});
+export default Toast;

package/index.d.ts

@@ -5,7 +5,7 @@ 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';
@@ -13,4 +13,7 @@ import Popover from './components/Popover.svelte';
 import Progress from './components/Progress.svelte';
 import Table from './components/Table.svelte';
 import Pagination from './components/Pagination';
-export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, Pagination, };
+import Toast from './components/Toast';
+import CloseButton from './components/CloseButton.svelte';
+import CopyButton from './components/CopyButton.svelte';
+export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Form, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, Pagination, Toast, CloseButton, CopyButton, };

package/index.js

@@ -5,7 +5,7 @@ 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';
@@ -13,4 +13,7 @@ import Popover from './components/Popover.svelte';
 import Progress from './components/Progress.svelte';
 import Table from './components/Table.svelte';
 import Pagination from './components/Pagination';
-export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, Pagination, };
+import Toast from './components/Toast';
+import CloseButton from './components/CloseButton.svelte';
+import CopyButton from './components/CopyButton.svelte';
+export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Form, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, Pagination, Toast, CloseButton, CopyButton, };

package/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "0.2.4",
+  "version": "0.4.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -18,13 +18,9 @@
   },
   "homepage": "https://github.com/Oli8/spaper#readme",
   "peerDependencies": {
-    "papercss": "^1.8.2"
+    "papercss": "^1.8.3"
   },
   "type": "module",
-  "dependencies": {
-    "lodash.omit": "^4.5.0",
-    "lodash.pick": "^4.4.0"
-  },
   "exports": {
     "./package.json": "./package.json",
     "./components/Alert.svelte": "./components/Alert.svelte",
@@ -33,8 +29,11 @@
     "./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/CopyButton.svelte": "./components/CopyButton.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",
@@ -48,7 +47,7 @@
     "./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/arrow-dimension": "./components/Pagination/arrow-dimension.js",
     "./components/Pagination": "./components/Pagination/index.js",
     "./components/Popover.svelte": "./components/Popover.svelte",
     "./components/Progress.svelte": "./components/Progress.svelte",
@@ -56,8 +55,12 @@
     "./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"
-  }
-}
+    "./utils": "./utils.js"
+  },
+  "svelte": "./index.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.js

@@ -1,10 +1,13 @@
-import omit from 'lodash.omit';
 const propToClass = {
     size: (pf, val) => `${pf}-${val}`,
     block: (pf, _val) => `${pf}-block`,
     type: (pf, val) => `${pf}-${val}`,
     outline: (pf, val) => `${pf}-${val}-outline`,
 };
+function omit(obj, properties) {
+    return Object.fromEntries(Object.entries(obj)
+        .filter(([key, _val]) => !properties.includes(key)));
+}
 export function computeClasses(elPrefix, props) {
     return Object.entries(props)
         .filter(([_prop, val]) => val)