spaper 0.2.6 → 0.5.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:
@@ -51,6 +51,33 @@ npm i spaper
 
 <hr />
 
+### Sponsors
+
+Thanks to these generous people! :heart:
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/mehdi-dalil">
+        <img src="https://avatars.githubusercontent.com/u/65339771?v=4" width="80px;" alt=""/><br />
+        <sub><b>mehdi-dalil</b></sub>
+      </a>
+    </td>
+  </tr>
+</table>    
+
+
+### Donate
+
+Any donation is greatly appreciated :heart:
+
+| Source          | Link / Address                             |
+| :-------------- | :------------------------------------------|
+| Github Sponsor  | https://github.com/sponsors/Oli8           |
+| PayPal          | https://paypal.me/OliCrt                   |
+| Bitcoin         | 1Ez3Ts2WShUcbeGCjhZapdxVDK77DbYjdU         |
+| Ethereum        | 0x6cd3d316a6ee6d210894981e1fcc83a00a27ede2 |
+
 #### Components
 
 - Alert
@@ -59,7 +86,9 @@ npm i spaper
 - Breadcrumb
 - Button
 - Card
+- CloseButton
 - Collapsible
+- CopyButton
 - Form
 - Checkbox
 - Input

package/components/Alert.svelte

@@ -8,7 +8,7 @@
   {/if}
 </div>
 
-<script lang="ts">var _a;
+<script >var _a;
 ;
 import CloseButton from './CloseButton.svelte';
 import { computeClasses } from '../utils';
@@ -21,7 +21,7 @@ function close() {
 $: 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/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,13 +2,14 @@
   <a {...attr}
      class:disabled
      role="button"
-     {href}
+     href={href ?? 'javascript:void(0);'}
      target={external ? '_blank' : '_self'}
      on:click>
     <slot />
   </a>
 {:else}
   <button {...attr}
+          type={nativeType}
           class:disabled
           disabled={disabled}
           on:click>
@@ -16,7 +17,7 @@
   </button>
 {/if}
 
-<script lang="ts">var _a;
+<script >var _a;
 ;
 import { computeClasses, getDomAttributes } from '../utils';
 export let type = null;
@@ -24,8 +25,9 @@ export let size = 'default';
 export let block = false;
 export let disabled = false;
 export let outline = null;
+export let nativeType = null;
 export let isLink = false;
-export let href = 'javascript:void(0);';
+export let href = null;
 export let external = false;
 let attr;
 $: {

package/components/Button.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         block?: boolean;
         disabled?: boolean;
         outline?: PaperType;
+        nativeType?: 'submit' | 'reset' | 'button';
         isLink?: boolean;
         href?: string;
         external?: boolean;

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,7 @@
   {/if}
 </div>
 
-<script lang="ts">;
+<script >;
 export let title = '';
 export let subTitle = '';
 export let image = '';

package/components/Card.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { PositionY } from "../types";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         title?: string;
         subTitle?: string;
         image?: string;

package/components/CloseButton.svelte

@@ -5,10 +5,10 @@
   X
 </button>
 
-<script lang="ts">export let ariaLabel = 'close';
+<script >export let ariaLabel = 'close';
 </script>
 
-<style lang="scss">button {
+<style >button {
   float: right;
   border: 0;
   padding: 0;

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

@@ -1,6 +1,8 @@
 <svelte:window on:keydown={handleKeydown} />
 
-<div class="modal" class:active>
+<div {...$$restProps}
+     class="{$$restProps.class ?? ''} modal"
+     class:active>
   <div class="modal-body">
     <CloseButton on:click={close} />
     {#if title}
@@ -23,7 +25,7 @@
   </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 = '';
@@ -38,7 +40,7 @@ function handleKeydown({ key }) {
 }
 </script>
 
-<style lang="scss">.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/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,6 +1,11 @@
-<div class="content margin"
+<div {...$$restProps}
+     class="{$$restProps.class ?? ''} content margin"
      class:content--active={active}
-     aria-hidden={!active}>
+     id={controlLabel}
+     aria-hidden={!active}
+     aria-labelledby={controlLabel}
+     role="tabpanel"
+     tabindex={active ? 0 : -1}>
   {#if $$slots.header}
     <div bind:this={header}
          style="display: none">
@@ -10,8 +15,9 @@
   <slot />
 </div>
 
-<script lang="ts">import { onMount, getContext } from 'svelte';
+<script >import { onMount, getContext } from 'svelte';
 ;
+import { genControlLabel } from './index';
 export let label;
 const key = {};
 let active = false;
@@ -32,6 +38,7 @@ onMount(() => {
         }
     ]);
 });
+$: controlLabel = genControlLabel(label);
 </script>
 
 <style>

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,8 +1,14 @@
-<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}
+    {@const selected = index == activeTab}
     <div class="tabs-label-header"
-         class:tabs-label-header--active={index == activeTab}
+         class:tabs-label-header--active={selected}
+         aria-selected={selected}
+         aria-controls={genControlLabel(label)}
+         role="tab"
+         tabindex={selected ? 0 : -1}
          on:click={showContent.bind(null, index)}>
       {#if header}
         {@html header.innerHTML}
@@ -15,10 +21,11 @@
   <slot />
 </div>
 
-<script lang="ts">import { onMount, setContext, createEventDispatcher } from 'svelte';
+<script >import { onMount, setContext, createEventDispatcher } from 'svelte';
 import { writable } from 'svelte/store';
 ;
 ;
+import { genControlLabel } from './index';
 export let activeTab = 0;
 export let placement = 'spaces';
 export let contentAlign = 'left';
@@ -52,7 +59,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;

package/components/Tabs/index.d.ts

@@ -12,4 +12,5 @@ export interface TabDataType {
     activeTab: number | string;
     tabs: Writable<iTab[]>;
 }
+export declare function genControlLabel(label: string): string;
 export { Tabs, Tab };

package/components/Tabs/index.js

@@ -1,3 +1,6 @@
 import Tabs from './Tabs.svelte';
 import Tab from './Tab.svelte';
+export function genControlLabel(label) {
+    return `paper-tab-${label}`;
+}
 export { Tabs, Tab };

package/components/Toast/Toast.svelte

@@ -14,7 +14,7 @@
   </div>
 {/if}
 
-<script lang="ts">import { onMount } from 'svelte';
+<script >import { onMount } from 'svelte';
 import { fly, fade } from 'svelte/transition';
 ;
 ;

package/components/Toast/ToastContainer.svelte

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

package/components/Toast/index.js

@@ -32,6 +32,6 @@ export const warn = warning;
 export const danger = openType('danger');
 export const error = danger;
 Object.assign(Toast, {
-    open, info, success, warning, warn, danger
+    open, info, success, warning, warn, error, danger
 });
 export default Toast;

package/index.d.ts

@@ -14,4 +14,6 @@ import Progress from './components/Progress.svelte';
 import Table from './components/Table.svelte';
 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, };
+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

@@ -14,4 +14,6 @@ import Progress from './components/Progress.svelte';
 import Table from './components/Table.svelte';
 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, };
+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.6",
+  "version": "0.5.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",
@@ -35,6 +31,7 @@
     "./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",
@@ -50,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",
@@ -63,6 +60,7 @@
     "./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/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)