spaper 0.2.4 → 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/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/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/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/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,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,5 @@ 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';
+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,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,5 @@ 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';
+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.2.4",
+  "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",
@@ -56,8 +58,11 @@
     "./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;