spaper 1.3.0 → 2.0.0

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 {};

package/components/Popover.svelte

@@ -1,57 +0,0 @@
-<div {...$$restProps}
-     { ...{[`popover-${position}`]: label} }
-     class={`${$$restProps.class} ${bgClass(background)}`}
-     class:inline
-     class:active={always || active}>
-  <slot />
-</div>
-
-<script >;
-export let label = '';
-export let position = 'top';
-export let inline = true;
-export let background = 'primary';
-export let active = false;
-export let always = false;
-function bgClass(color) {
-    return `popover-${color}`;
-}
-</script>
-
-<style >.inline {
-  display: inline;
-}
-
-[popover-top].popover-primary::after, [popover-right].popover-primary::after,
-[popover-bottom].popover-primary::after, [popover-left].popover-primary::after {
-  background-color: var(--primary);
-}
-
-[popover-top].popover-secondary::after, [popover-right].popover-secondary::after,
-[popover-bottom].popover-secondary::after, [popover-left].popover-secondary::after {
-  background-color: var(--secondary);
-}
-
-[popover-top].popover-success::after, [popover-right].popover-success::after,
-[popover-bottom].popover-success::after, [popover-left].popover-success::after {
-  background-color: var(--success);
-}
-
-[popover-top].popover-warning::after, [popover-right].popover-warning::after,
-[popover-bottom].popover-warning::after, [popover-left].popover-warning::after {
-  background-color: var(--warning);
-}
-
-[popover-top].popover-danger::after, [popover-right].popover-danger::after,
-[popover-bottom].popover-danger::after, [popover-left].popover-danger::after {
-  background-color: var(--danger);
-}
-
-[popover-top], [popover-right],
-[popover-bottom], [popover-left] {
-  margin: 0;
-}
-[popover-top].active::after, [popover-right].active::after,
-[popover-bottom].active::after, [popover-left].active::after {
-  opacity: 1;
-}</style>

package/components/Popover.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperType, Position } from "../types";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        position?: Position;
-        inline?: boolean;
-        background?: PaperType;
-        active?: boolean;
-        always?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type PopoverProps = typeof __propDef.props;
-export declare type PopoverEvents = typeof __propDef.events;
-export declare type PopoverSlots = typeof __propDef.slots;
-export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
-}
-export {};

package/components/Progress.svelte

@@ -1,39 +0,0 @@
-<div {...$$restProps}
-     class={`progress ${$$restProps.class ?? ''}`}
-     class:margin-bottom={marginBottom}>
-  <div class={`bar ${type} w-${cappedValue}`}
-       class:striped class:infinite>
-    {#if $$slots.default}
-      <slot />
-    {:else if showValue}
-      {cappedValue}%
-    {/if}
-  </div>
-</div>
-
-<script >;
-export let value = 50;
-export let type = 'primary';
-export let showValue = false;
-export let striped = false;
-export let infinite = false;
-export let marginBottom = true;
-let cappedValue;
-$: cappedValue = Math.max(Math.min(+value, 100), 0);
-</script>
-
-<style>
-.bar.infinite {
-  position: relative;
-  animation: in-progress 3s infinite;
-}
-
-@keyframes in-progress {
-  from {
-    right: 100%;
-  }
-  to {
-    right: -100%;
-  }
-}
-</style>

package/components/Progress.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperType } from "../types";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: number | string;
-        type?: PaperType;
-        showValue?: boolean;
-        striped?: boolean;
-        infinite?: boolean;
-        marginBottom?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type ProgressProps = typeof __propDef.props;
-export declare type ProgressEvents = typeof __propDef.events;
-export declare type ProgressSlots = typeof __propDef.slots;
-export default class Progress extends SvelteComponentTyped<ProgressProps, ProgressEvents, ProgressSlots> {
-}
-export {};

package/components/Skeleton.svelte

@@ -1,55 +0,0 @@
-{#if active}
-  {#each { length: count } as _}
-    {@const borderType = Math.floor(Math.random() * 6 + 1)}
-    <div {...$$restProps}
-         aria-hidden="true"
-         aria-valuetext={ariaValueText}
-         tabindex="-1"
-         role="progressbar"
-         class="{$$restProps.class ?? ''} border border-{borderType} margin-small"
-         class:animated
-         class:circle
-         class:inline>
-    </div>
-  {/each}
-{/if}
-
-<script >export let active = true;
-export let count = 1;
-export let animated = true;
-export let circle = false;
-export let inline = false;
-export let ariaValueText = 'Loading...';
-</script>
-
-<style >:global(.dark) div {
-  --mid-gradient: var(--primary-dark);
-}
-
-div {
-  cursor: progress;
-  border-color: transparent;
-  width: var(--width, auto);
-  min-height: 1rem;
-  height: var(--height, 100%);
-  background: var(--muted-light-10);
-  background: linear-gradient(95deg, var(--muted-light-10) 5%, var(--mid-gradient, var(--muted-light)) 20%, var(--muted-light-10) 50%);
-  background-size: 200% 100%;
-}
-div.circle {
-  border-radius: 50%;
-}
-div.inline {
-  display: inline-block;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .animated {
-    animation: loading 2s linear infinite alternate;
-  }
-}
-@keyframes loading {
-  to {
-    background-position-x: -200%;
-  }
-}</style>