spaper 1.4.0 → 2.0.0

package/components/Button.svelte

@@ -1,41 +0,0 @@
-{#if isLink || href}
-  <a class:disabled
-     role="button"
-     href={href ?? 'javascript:void(0);'}
-     target={external ? '_blank' : null}
-     {...attr}
-     on:click>
-    <slot />
-  </a>
-{:else}
-  <button {...attr}
-          type={nativeType}
-          class:disabled
-          disabled={disabled}
-          on:click>
-    <slot />
-  </button>
-{/if}
-
-<script >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 nativeType = null;
-export let isLink = false;
-export let href = null;
-export let external = false;
-let attr;
-$: {
-    attr = getDomAttributes({
-        props: $$restProps,
-        classes,
-    });
-}
-let classes;
-$: 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,30 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperSize, PaperType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: PaperType;
-        size?: PaperSize;
-        block?: boolean;
-        disabled?: boolean;
-        outline?: PaperType;
-        nativeType?: 'submit' | 'reset' | 'button';
-        isLink?: boolean;
-        href?: string;
-        external?: boolean;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type ButtonProps = typeof __propDef.props;
-export declare type ButtonEvents = typeof __propDef.events;
-export declare type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};

package/components/Card.svelte

@@ -1,70 +0,0 @@
-<div {...$$restProps}
-     class="{$$restProps.class ?? ''} card"
-     style={`width: ${width}`}>
-  {#if header || $$slots.header}
-    <header class="card-header">
-      {#if $$slots.header}
-        <slot name="header" />
-      {:else}
-        {header}
-      {/if}
-    </header>
-  {/if}
-
-  {#if image && imagePlacement === 'top'}
-    <img src={image}
-         alt={imageAlt} />
-  {/if}
-
-  <div class="card-body">
-    <h4 class="card-title">
-      {#if $$slots.title}
-        <slot name="title" />
-      {:else}
-        {title}
-      {/if}
-    </h4>
-    <h5 class="card-subtitle">
-      {#if $$slots.subTitle}
-        <slot name="subTitle" />
-      {:else}
-        {subTitle}
-      {/if}
-    </h5>
-
-    <p class="card-text">
-      <slot />
-    </p>
-
-    {#if $$slots.bottom}
-      <slot name="bottom" />
-    {/if}
-  </div>
-
-  {#if image && imagePlacement === 'bottom'}
-    <img src={image}
-         class="image-bottom"
-         alt={imageAlt} />
-  {/if}
-
-  {#if footer || $$slots.footer}
-    <footer class="card-footer">
-      {#if $$slots.footer}
-        <slot name="footer" />
-      {:else}
-        {footer}
-      {/if}
-    </footer>
-  {/if}
-</div>
-
-<script >;
-export let title = '';
-export let subTitle = '';
-export let image = '';
-export let imageAlt = '';
-export let imagePlacement = 'top';
-export let header = '';
-export let footer = '';
-export let width = '100%';
-</script>

package/components/Card.svelte.d.ts

@@ -1,32 +0,0 @@
-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?: PositionY;
-        header?: string;
-        footer?: string;
-        width?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        title: {};
-        subTitle: {};
-        default: {};
-        bottom: {};
-        footer: {};
-    };
-};
-export declare type CardProps = typeof __propDef.props;
-export declare type CardEvents = typeof __propDef.events;
-export declare type CardSlots = typeof __propDef.slots;
-export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
-}
-export {};

package/components/Carousel/Carousel.svelte

@@ -1,128 +0,0 @@
-<section {...$$restProps} tabindex="0"
-         class="{$$restProps.class ?? ''} carousel"
-         on:click
-         on:keydown
-         on:keydown={handleKeydown}
-         on:mouseover
-         on:focus
-         on:mouseenter
-         on:mouseenter={pause}
-         on:mouseleave
-         on:mouseleave={resume}>
-  <div class="carousel-panel">
-    <slot />
-    {#if bullets}
-      <Pagination class="carousel-bullets margin-top-small"
-                  total={length}
-                  pageSize={1}
-                  current={index + 1}
-                  bullets
-                  on:change={navigationHandler} />
-    {/if}
-  </div>
-</section>
-
-<script >import { onMount, setContext, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-;
-;
-import Pagination from '../Pagination/Pagination.svelte';
-export let index = 0;
-export let interval = 2500;
-export let autoplay = true;
-export let repeat = true;
-export let pauseOnHover = true;
-export let bullets = true;
-export let keyNavigation = true;
-export let transition = 'fade';
-const dispatch = createEventDispatcher();
-let intervalId;
-const items = writable([]);
-const transitionStore = writable(transition);
-const itemsData = {
-    activeItem: index,
-    items,
-    transition: transitionStore,
-};
-setContext('carouselItems', itemsData);
-onMount(() => {
-    $items[index].show();
-    if (autoplay) {
-        setUpAutoplay();
-        return () => clearInterval(intervalId);
-    }
-});
-function setUpAutoplay() {
-    if (intervalId)
-        clearInterval(intervalId);
-    intervalId = window.setInterval(() => {
-        index = (index + 1) % length;
-        if (!repeat && index === length - 1) {
-            clearInterval(intervalId);
-        }
-    }, interval);
-}
-function navigationHandler({ detail: value }) {
-    goToItem(value - 1);
-}
-function goToItem(idx) {
-    if (autoplay) {
-        setUpAutoplay();
-    }
-    index = idx;
-}
-function pause() {
-    if (!pauseOnHover || !autoplay)
-        return;
-    clearInterval(intervalId);
-}
-function resume() {
-    if (!pauseOnHover || !autoplay)
-        return;
-    setUpAutoplay();
-}
-function handleKeydown({ key }) {
-    if (!keyNavigation)
-        return;
-    switch (key) {
-        case 'ArrowRight':
-            goToItem((index + 1) % length);
-            break;
-        case 'ArrowLeft':
-            goToItem((length + index - 1) % length);
-            break;
-    }
-}
-function updateTabsVisility() {
-    $items.forEach((item, idx) => {
-        if (idx === index)
-            item.show();
-        else
-            item.hide();
-    });
-}
-$: if (index > -1) {
-    updateTabsVisility();
-    dispatch('change', index);
-}
-$: $transitionStore = transition;
-$: ({ length } = $items);
-</script>
-
-<style >.carousel {
-  outline: none;
-}
-.carousel-panel {
-  position: relative;
-  display: inline-block;
-  min-height: var(--min-height, 120px);
-  height: var(--height, auto);
-  max-height: var(--max-height, none);
-  min-width: var(--min-width, 0);
-  width: var(--width, auto);
-  max-width: var(--min-width, none);
-}
-
-:global(.carousel-bullets) {
-  text-align: center;
-}</style>

package/components/Carousel/Carousel.svelte.d.ts

@@ -1,35 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Transition } from '../../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        index?: number;
-        interval?: number;
-        autoplay?: boolean;
-        repeat?: boolean;
-        pauseOnHover?: boolean;
-        bullets?: boolean;
-        keyNavigation?: boolean;
-        transition?: Transition | null;
-    };
-    events: {
-        click: MouseEvent;
-        keydown: KeyboardEvent;
-        mouseover: MouseEvent;
-        focus: FocusEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type CarouselProps = typeof __propDef.props;
-export declare type CarouselEvents = typeof __propDef.events;
-export declare type CarouselSlots = typeof __propDef.slots;
-export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
-}
-export {};

package/components/Carousel/CarouselItem.svelte

@@ -1,32 +0,0 @@
-{#if active}
-  <div {...$$restProps}
-       class="{$$restProps.class ?? ''} carousel-item"
-       in:configureTransition={{
-         name: $transition,
-         disabled: !$transition,
-       }}>
-    <slot />
-  </div>
-{/if}
-
-<script >import { onMount, onDestroy, getContext } from 'svelte';
-;
-import { configureTransition } from '../../utils';
-const key = Symbol();
-let active = false;
-const itemsData = getContext('carouselItems');
-if (!itemsData)
-    throw new Error('CarouselItem should be nested inside a Carousel');
-onMount(() => {
-    itemsData.items.update(items => [...items, {
-            key,
-            show: () => active = true,
-            hide: () => active = false,
-        }
-    ]);
-});
-onDestroy(() => {
-    itemsData.items.update(items => (items.filter(item => item.key !== key)));
-});
-$: ({ transition } = itemsData);
-</script>

package/components/Carousel/CarouselItem.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type CarouselItemProps = typeof __propDef.props;
-export declare type CarouselItemEvents = typeof __propDef.events;
-export declare type CarouselItemSlots = typeof __propDef.slots;
-export default class CarouselItem extends SvelteComponentTyped<CarouselItemProps, CarouselItemEvents, CarouselItemSlots> {
-}
-export {};

package/components/Carousel/types.d.ts

@@ -1,14 +0,0 @@
-import type { Transition } from '../../types';
-import type { Writable } from 'svelte/store';
-export interface iCarouselItem {
-    key: Symbol;
-    show: () => void;
-    hide: () => void;
-}
-export declare type CarouselItemsStore = Writable<iCarouselItem[]>;
-export declare type TransitionStore = Writable<Transition>;
-export interface CarouselItemsData {
-    activeItem: number;
-    items: CarouselItemsStore;
-    transition: TransitionStore;
-}

package/components/CloseButton.svelte

@@ -1,23 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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,49 +0,0 @@
-<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">
-    <slot />
-  </div>
-</section>
-
-<script  context="module">let count = 0;
-</script>
-
-<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, 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;
-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>

package/components/Collapsible.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        open?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        trigger: {};
-        default: {};
-    };
-};
-export declare type CollapsibleProps = typeof __propDef.props;
-export declare type CollapsibleEvents = typeof __propDef.events;
-export declare type CollapsibleSlots = typeof __propDef.slots;
-export default class Collapsible extends SvelteComponentTyped<CollapsibleProps, CollapsibleEvents, CollapsibleSlots> {
-}
-export {};

package/components/CopyButton.svelte

@@ -1,43 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-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,37 +0,0 @@
-<label {...$$restProps}
-       class="{$$restProps.class ?? ''} paper-check">
-  <input type="checkbox"
-         {value} {name}
-         {disabled}
-         checked={group.includes(value) || checked}
-         on:focus
-         on:blur
-         on:change={onChange} />
-  <span>{label}</span>
-</label>
-
-<script >import { createEventDispatcher } from 'svelte';
-export let label = '';
-export let value = '';
-export let name = '';
-export let group = [];
-export let checked = false;
-export let disabled = false;
-const dispatch = createEventDispatcher();
-function onChange({ target }) {
-    const { value, checked: _checked } = target;
-    checked = _checked;
-    if (_checked) {
-        group = [...group, value];
-    }
-    else {
-        group = group.filter((item) => item !== value);
-    }
-    dispatch('change', checked);
-}
-</script>
-
-<style >input[disabled] + span::before, input[disabled] ~ span {
-  opacity: 0.5;
-  cursor: not-allowed;
-}</style>

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

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        value?: string;
-        name?: string;
-        group?: string[];
-        checked?: boolean;
-        disabled?: boolean;
-    };
-    events: {
-        focus: FocusEvent;
-        blur: FocusEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type CheckboxProps = typeof __propDef.props;
-export declare type CheckboxEvents = typeof __propDef.events;
-export declare type CheckboxSlots = typeof __propDef.slots;
-export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
-}
-export {};

package/components/Form/Form.svelte

@@ -1,22 +0,0 @@
-<form {...$$restProps}
-      class="{$$restProps.class ?? ''} form-group"
-      on:submit|preventDefault
-      on:click
-      on:keydown
-      on:mouseover
-      on:mouseenter
-      on:mouseleave
-      on:focus>
-  <slot />
-</form>
-
-<style >form {
-  /* NOTE: set back PaperCSS margins for our structure
-    <label> being parent of <input> instead of a sibling */
-}
-form :global(label) {
-  margin-block-end: 0;
-}
-form :global(input) {
-  margin-block-start: 0.5rem;
-}</style>