spaper 1.4.0 → 2.0.0

package/components/Form/index.d.ts

@@ -1,10 +0,0 @@
-import Input from './Input.svelte';
-import Select from './Select.svelte';
-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';
-import { NumberInput } from './NumberInput';
-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, Form, NumberInput, };

package/components/Form/style.scss

@@ -1,4 +0,0 @@
-%disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}

package/components/Hero.svelte

@@ -1,78 +0,0 @@
-<section {...$$restProps}
-         class={classes}
-         class:border>
-  <div class="hero-body">
-    {#if $$slots.title}
-      <slot name="title" />
-    {:else}
-      <h2 class="hero-title">{title}</h2>
-    {/if}
-
-    {#if $$slots.textLead || textLead}
-      <p class="hero-text-lead">
-        {#if $$slots.textLead}
-          <slot name="textLead" />
-        {:else}
-          {textLead}
-        {/if}
-      </p>
-    {/if}
-
-    <div><slot /></div>
-  </div>
-</section>
-
-<script >var _a;
-;
-import { computeClasses } from '../utils';
-export let type = 'primary';
-export let size = 'default';
-export let border = true;
-export let title = '';
-export let textLead = '';
-$: classes = `hero
-  ${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''}
-  ${computeClasses('hero', { size, type })}`;
-</script>
-
-<style >.hero {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 1.5rem 3rem;
-  margin-bottom: 20px;
-}
-.hero-title {
-  margin-block: 1rem 0.5rem;
-}
-.hero-text-lead {
-  font-size: 1.25rem;
-}
-.hero-small {
-  padding: 0 1.5rem;
-}
-.hero-large {
-  padding: 5rem;
-}
-.hero-fullheight {
-  min-height: 100vh;
-}
-.hero-primary {
-  background-color: var(--primary-light);
-}
-.hero-secondary {
-  background-color: var(--secondary-light);
-}
-.hero-success {
-  background-color: var(--success-light);
-}
-.hero-warning {
-  background-color: var(--warning-light);
-}
-.hero-danger {
-  background-color: var(--danger-light);
-}
-
-:global(.dark .hero-primary) {
-  color: var(--primary-text);
-}</style>

package/components/Hero.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperSize, PaperType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: PaperType;
-        size?: PaperSize | "fullheight";
-        border?: boolean;
-        title?: string;
-        textLead?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        textLead: {};
-        default: {};
-    };
-};
-export declare type HeroProps = typeof __propDef.props;
-export declare type HeroEvents = typeof __propDef.events;
-export declare type HeroSlots = typeof __propDef.slots;
-export default class Hero extends SvelteComponentTyped<HeroProps, HeroEvents, HeroSlots> {
-}
-export {};

package/components/Layout/Col.svelte

@@ -1,25 +0,0 @@
-<svelte:element
-  this={as}
-  {...$$restProps}
-  class={classes}
-  class:col-fill={fill}
-  class:align-top={top}
-  class:align-middle={middle}
-  class:align-bottom={bottom}
->
-  <slot />
-</svelte:element>
-
-<script >var _a;
-import { computeClasses } from '../../utils';
-export let as = 'div';
-export let col = null;
-export let sm = null;
-export let md = null;
-export let lg = null;
-export let fill = false;
-export let top = false;
-export let middle = false;
-export let bottom = false;
-$: classes = `col ${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} ${computeClasses('col', { col, sm, md, lg })}`;
-</script>

package/components/Layout/Col.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        as?: keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap;
-        col?: string | number;
-        sm?: string | number;
-        md?: string | number;
-        lg?: string | number;
-        fill?: boolean;
-        top?: boolean;
-        middle?: boolean;
-        bottom?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type ColProps = typeof __propDef.props;
-export declare type ColEvents = typeof __propDef.events;
-export declare type ColSlots = typeof __propDef.slots;
-export default class Col extends SvelteComponentTyped<ColProps, ColEvents, ColSlots> {
-}
-export {};

package/components/Layout/Row.svelte

@@ -1,24 +0,0 @@
-<svelte:element
-  this={as}
-  {...$$restProps}
-  class="{$$restProps.class ?? ''} row"
-  class:flex-right={right}
-  class:flex-center={center}
-  class:flex-edges={edges}
-  class:flex-spaces={spaces}
-  class:flex-top={top}
-  class:flex-middle={middle}
-  class:flex-bottom={bottom}
->
-  <slot />
-</svelte:element>
-
-<script >export let as = 'div';
-export let right = false;
-export let center = false;
-export let edges = false;
-export let spaces = false;
-export let top = false;
-export let middle = false;
-export let bottom = false;
-</script>

package/components/Layout/Row.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        as?: keyof HTMLElementTagNameMap;
-        right?: boolean;
-        center?: boolean;
-        edges?: boolean;
-        spaces?: boolean;
-        top?: boolean;
-        middle?: boolean;
-        bottom?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type RowProps = typeof __propDef.props;
-export declare type RowEvents = typeof __propDef.events;
-export declare type RowSlots = typeof __propDef.slots;
-export default class Row extends SvelteComponentTyped<RowProps, RowEvents, RowSlots> {
-}
-export {};

package/components/Layout/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Col } from './Col.svelte';
-export { default as Row } from './Row.svelte';

package/components/Layout/index.js

@@ -1,2 +0,0 @@
-export { default as Col } from './Col.svelte';
-export { default as Row } from './Row.svelte';

package/components/Modal/Modal.svelte

@@ -1,62 +0,0 @@
-<svelte:window on:keydown={handleKeydown} />
-
-<div class="modal"
-     class:active>
-  <div {...$$restProps}
-       class="{$$restProps.class ?? ''} modal-body">
-    <CloseButton on:click={close} />
-    {#if title}
-      <h4 class="modal-title">{title}</h4>
-    {/if}
-    {#if subTitle}
-      <h5 class="modal-subtitle">{subTitle}</h5>
-    {/if}
-    <p class="modal-text">
-      {#if content}
-        {content}
-      {:else if component}
-        <svelte:component this={component} />
-      {:else}
-        <slot />
-      {/if}
-    </p>
-    <footer>
-      {#if $$slots.footer}
-        <slot name="footer" />
-      {/if}
-      <Button on:click={close}>
-        {closeBtnText}
-      </Button>
-    </footer>
-  </div>
-</div>
-
-<script >import { createEventDispatcher, SvelteComponent } from 'svelte';
-import Button from '../Button.svelte';
-import CloseButton from '../CloseButton.svelte';
-export let active = false;
-export let title = '';
-export let subTitle = '';
-export let content = '';
-export let component = null;
-export let closeBtnText = 'Close';
-const dispatch = createEventDispatcher();
-function close() {
-    active = false;
-}
-function handleKeydown({ key }) {
-    if (key === 'Escape')
-        close();
-}
-$: if (!active) {
-    dispatch('close');
-}
-</script>
-
-<style >.modal.active {
-  opacity: 1;
-  visibility: visible;
-}
-.modal.active .modal-body {
-  top: 50%;
-}</style>

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

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { SvelteComponent } from 'svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        active?: boolean;
-        title?: string;
-        subTitle?: string;
-        content?: string;
-        component?: typeof SvelteComponent;
-        closeBtnText?: string;
-    };
-    events: {
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        footer: {};
-    };
-};
-export declare type ModalProps = typeof __propDef.props;
-export declare type ModalEvents = typeof __propDef.events;
-export declare type ModalSlots = typeof __propDef.slots;
-export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
-}
-export {};

package/components/Modal/index.d.ts

@@ -1,13 +0,0 @@
-import type { SvelteComponent } from 'svelte';
-import type { ComponentProps } from '../../utils';
-import Modal from './Modal.svelte';
-declare type ModalProps = ComponentProps<Modal>;
-declare type ProgrammaticModalProps = Omit<ModalProps, 'active'>;
-interface ProgrammaticModal {
-    open?: (props: ProgrammaticModalProps) => ProgrammaticModalInstance;
-    close?: () => void;
-}
-declare type ProgrammaticModalComponent = ProgrammaticModal & typeof SvelteComponent;
-declare type ProgrammaticModalInstance = ProgrammaticModal & SvelteComponent;
-declare const _default: ProgrammaticModalComponent;
-export default _default;

package/components/Modal/index.js

@@ -1,17 +0,0 @@
-import Modal from './Modal.svelte';
-const TRANSITION_TIME = 235;
-function open(props) {
-    const modal = new Modal({
-        target: document.body,
-        props,
-    });
-    // Preserve transition
-    setTimeout(modal.$set.bind(modal, { active: true }), 1);
-    modal.close = () => {
-        modal.$set({ active: false });
-        setTimeout(modal.$destroy, TRANSITION_TIME);
-    };
-    return modal;
-}
-Modal.open = open;
-export default Modal;

package/components/Navbar.svelte

@@ -1,40 +0,0 @@
-<nav {...$$restProps}
-     class={`${$$restProps.class ?? ''} paper-navbar`}
-     class:border class:fixed
-     class:split-nav={split}>
-  {#if $$slots.brand}
-    <div class="nav-brand">
-      <slot name="brand" />
-    </div>
-  {/if}
-  <div class="collapsible">
-    <button on:click={collapse}>☰</button>
-    <div class="collapsible-body" class:open>
-      <slot />
-    </div>
-  </div>
-</nav>
-
-<script >export let border = true;
-export let fixed = false;
-export let split = true;
-let open = false;
-function collapse() {
-    open = !open;
-}
-</script>
-
-<style >/* Papercss removes border of buttons in .collapsible */
-.collapsible > button {
-  border: 2px solid var(--primary);
-}
-.collapsible-body.open {
-  margin: 0;
-  max-height: 960px;
-  opacity: 1;
-  padding: 0;
-}
-
-:global(.paper-navbar li a.paper-btn) {
-  display: initial;
-}</style>

package/components/Navbar.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        border?: boolean;
-        fixed?: boolean;
-        split?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        brand: {};
-        default: {};
-    };
-};
-export declare type NavbarProps = typeof __propDef.props;
-export declare type NavbarEvents = typeof __propDef.events;
-export declare type NavbarSlots = typeof __propDef.slots;
-export default class Navbar extends SvelteComponentTyped<NavbarProps, NavbarEvents, NavbarSlots> {
-}
-export {};

package/components/Pagination/Arrow.svelte

@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-     width={dimension} height={dimension} viewBox="0 0 24 24">
-  {#if type === 'right'}
-    <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
-  {:else}
-    <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
-  {/if}
-</svg>
-
-<script >;
-;
-import arrowDimension from './arrow-dimension';
-export let size;
-export let type;
-let dimension;
-$: dimension = arrowDimension[size];
-</script>

package/components/Pagination/Arrow.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperSize } from '../../types';
-import type { Direction } from '.';
-declare const __propDef: {
-    props: {
-        size: PaperSize;
-        type: Direction;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type ArrowProps = typeof __propDef.props;
-export declare type ArrowEvents = typeof __propDef.events;
-export declare type ArrowSlots = typeof __propDef.slots;
-export default class Arrow extends SvelteComponentTyped<ArrowProps, ArrowEvents, ArrowSlots> {
-}
-export {};

package/components/Pagination/NavigationButton.svelte

@@ -1,23 +0,0 @@
-<Button {size} {type}
-        isLink {disabled}
-        aria-label={ariaLabel}
-        on:click={clickHandler}>
-  {#if label}
-    {label}
-  {:else}
-    <Arrow {size}
-      type={action === 'next' ? 'right' : 'left'} />
-  {/if}
-</Button>
-
-<script >import Button from '../Button.svelte';
-import Arrow from './Arrow.svelte';
-;
-export let size;
-export let label;
-export let action;
-export let type;
-export let disabled;
-export let clickHandler;
-export let ariaLabel;
-</script>

package/components/Pagination/NavigationButton.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperSize, PaperType } from '../../types';
-declare const __propDef: {
-    props: {
-        size: PaperSize;
-        label: string;
-        action: 'previous' | 'next';
-        type: PaperType;
-        disabled: boolean;
-        clickHandler: (e: MouseEvent) => any;
-        ariaLabel: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type NavigationButtonProps = typeof __propDef.props;
-export declare type NavigationButtonEvents = typeof __propDef.events;
-export declare type NavigationButtonSlots = typeof __propDef.slots;
-export default class NavigationButton extends SvelteComponentTyped<NavigationButtonProps, NavigationButtonEvents, NavigationButtonSlots> {
-}
-export {};

package/components/Pagination/Pagination.svelte

@@ -1,137 +0,0 @@
-<section {...$$restProps}>
-  {#if showNavigation}
-    <NavigationButton
-      type={highlightedStyle}
-      {size} action="previous"
-      label={previousLabel}
-      disabled={current <= 1}
-      clickHandler={changePage.bind(null, current-1)}
-      ariaLabel={ariaPreviousLabel} />
-  {/if}
-
-  {#if simple}
-    {current} / {pageCount}
-  {:else}
-    <ol class="padding-none">
-      {#each pages as {idx, show}}
-        <li>
-          {#if show}
-            <Button {size} isLink
-                    class={bullets ? 'paper-pagination-btn--rounded' : ''}
-                    on:click={changePage.bind(null, idx)}
-                    type={idx === current ? highlightedStyle : defaultStyle}
-                    aria-label={ariaPageLabel?.(idx) ?? `Page ${idx}`}
-                    aria-current={idx === current}>
-              {displayedPageLabel(idx)}
-            </Button>
-          {:else if shouldDisplayEllipsis(idx)}
-            …
-          {/if}
-        </li>
-      {/each}
-    </ol>
-  {/if}
-
-  {#if showNavigation}
-    <NavigationButton
-      type={highlightedStyle}
-      {size} action="next"
-      label={nextLabel}
-      disabled={current >= pageCount}
-      clickHandler={changePage.bind(null, current+1)}
-      ariaLabel={ariaNextLabel} />
-  {/if}
-
-  {#if jumper}
-    <span on:keypress={submitJumper}>
-      <Input class="paper-pagination-input"
-             bind:value={jumperValue}
-             type="number" placeholder="Go to"
-             min="1" max={pageCount} step="1" />
-    </span>
-  {/if}
-</section>
-
-<script >import { createEventDispatcher } from 'svelte';
-import Button from '../Button.svelte';
-import Input from '../Form/Input.svelte';
-;
-import NavigationButton from './NavigationButton.svelte';
-export let total;
-export let pageSize = 10;
-export let current = 1;
-export let size = 'small';
-export let navigation = true;
-export let simple = false;
-export let bullets = false;
-export let previousLabel = null;
-export let nextLabel = null;
-export let highlightedStyle = 'secondary';
-export let defaultStyle = null;
-export let rangeBetween = null;
-export let jumper = false;
-export let pageLabel = null;
-export let ariaPreviousLabel = 'previous page';
-export let ariaNextLabel = 'next page';
-export let ariaPageLabel = null;
-const dispatch = createEventDispatcher();
-let jumperValue;
-let pageCount;
-$: pageCount = Math.ceil(total / pageSize);
-let pages;
-$: if (current) {
-    pages = Array.from({ length: pageCount }, (_, i) => ({ idx: ++i, show: shouldDisplayButton(i) }));
-}
-let showNavigation;
-$: showNavigation = navigation && !bullets;
-function submitJumper({ code }) {
-    const toPage = Number(jumperValue);
-    if (code !== 'Enter' || pageInvalid(toPage))
-        return;
-    changePage(toPage);
-}
-function pageInvalid(idx) {
-    return idx < 1 || idx > pageCount || !Number.isInteger(idx);
-}
-function shouldDisplayButton(idx) {
-    if (!rangeBetween || [1, pageCount].includes(idx))
-        return true;
-    return idx >= (current - rangeBetween)
-        && idx <= (current + rangeBetween);
-}
-function shouldDisplayEllipsis(idx) {
-    return pages[idx - 2].show;
-}
-function changePage(val) {
-    if (pageInvalid(val))
-        return;
-    current = val;
-    dispatch('change', current);
-}
-function displayedPageLabel(idx) {
-    var _a;
-    if (bullets)
-        return '';
-    return (_a = pageLabel === null || pageLabel === void 0 ? void 0 : pageLabel(idx)) !== null && _a !== void 0 ? _a : idx;
-}
-</script>
-
-<style >ol, li {
-  display: inline;
-}
-
-ol li {
-  text-indent: 0;
-}
-ol li::before {
-  content: "";
-}
-
-:global(.paper-pagination-input) {
-  display: inline;
-  width: 4rem;
-}
-
-:global(.paper-pagination-btn--rounded) {
-  border-radius: 50%;
-}</style>

package/components/Pagination/Pagination.svelte.d.ts

@@ -1,36 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperSize, PaperType } from '../../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        total: number;
-        pageSize?: number;
-        current?: number;
-        size?: PaperSize;
-        navigation?: boolean;
-        simple?: boolean;
-        bullets?: boolean;
-        previousLabel?: string;
-        nextLabel?: string;
-        highlightedStyle?: PaperType;
-        defaultStyle?: PaperType;
-        rangeBetween?: number;
-        jumper?: boolean;
-        pageLabel?: (idx: number) => string | number;
-        ariaPreviousLabel?: string;
-        ariaNextLabel?: string;
-        ariaPageLabel?: (idx: number) => string;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type PaginationProps = typeof __propDef.props;
-export declare type PaginationEvents = typeof __propDef.events;
-export declare type PaginationSlots = typeof __propDef.slots;
-export default class Pagination extends SvelteComponentTyped<PaginationProps, PaginationEvents, PaginationSlots> {
-}
-export {};