spaper 0.3.6 → 0.4.6

package/README.md

@@ -59,7 +59,9 @@ npm i spaper
 - Breadcrumb
 - Button
 - Card
+- CloseButton
 - Collapsible
+- CopyButton
 - Form
 - Checkbox
 - Input

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}

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,4 +1,6 @@
-<span class={`badge ${type}`} class:rounded>
+<span {...$$restProps}
+      class="{$$restProps.class ?? ''} badge {type}"
+      class:rounded>
   <slot />
 </span>
 

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}

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 />
@@ -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">

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/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}

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

@@ -1,5 +1,6 @@
 {#if tile}
-  <label class="paper-switch-tile"
+  <label {...$$restProps}
+         class="{$$restProps.class ?? ''} paper-switch-tile"
          class:disabled>
     <input bind:checked
            type="checkbox"

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}

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}

package/components/Popover.svelte

@@ -1,4 +1,5 @@
-<div { ...{[`popover-${position}`]: label} }
+<div {...$$restProps}
+     { ...{[`popover-${position}`]: label} }
      class={`${$$restProps.class} ${bgClass(background)}`}
      class:inline
      class:active={always || active}>

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>

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>

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}

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"

package/components/Toast/ToastContainer.svelte

@@ -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/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.3.6",
+  "version": "0.4.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -31,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",