spaper 1.4.0 → 2.0.0

package/components/Popover.svelte

@@ -1,62 +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-light);
-  color: var(--muted-dark);
-}
-
-[popover-top].popover-secondary::after, [popover-right].popover-secondary::after,
-[popover-bottom].popover-secondary::after, [popover-left].popover-secondary::after {
-  background-color: var(--secondary-light);
-  color: var(--muted-dark);
-}
-
-[popover-top].popover-success::after, [popover-right].popover-success::after,
-[popover-bottom].popover-success::after, [popover-left].popover-success::after {
-  background-color: var(--success-light);
-  color: var(--muted-dark);
-}
-
-[popover-top].popover-warning::after, [popover-right].popover-warning::after,
-[popover-bottom].popover-warning::after, [popover-left].popover-warning::after {
-  background-color: var(--warning-light);
-  color: var(--muted-dark);
-}
-
-[popover-top].popover-danger::after, [popover-right].popover-danger::after,
-[popover-bottom].popover-danger::after, [popover-left].popover-danger::after {
-  background-color: var(--danger-light);
-  color: var(--muted-dark);
-}
-
-[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>

package/components/Skeleton.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        active?: boolean;
-        count?: number;
-        animated?: boolean;
-        circle?: boolean;
-        inline?: boolean;
-        ariaValueText?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type SkeletonProps = typeof __propDef.props;
-export declare type SkeletonEvents = typeof __propDef.events;
-export declare type SkeletonSlots = typeof __propDef.slots;
-export default class Skeleton extends SvelteComponentTyped<SkeletonProps, SkeletonEvents, SkeletonSlots> {
-}
-export {};

package/components/Table.svelte

@@ -1,73 +0,0 @@
-<table {...$$restProps}
-       class:table-alternating={striped}
-       class:table-hover={hoverable}>
-  {#if showHeader}
-    <thead>
-      <tr>
-        {#each columns as column}
-          <th class={headerCLass}>
-            {#if typeof column === 'string'}
-              {column}
-            {:else}
-              {column.label ?? column.field}
-            {/if}
-          </th>
-        {/each}
-      </tr>
-    </thead>
-  {/if}
-  <tbody>
-    {#each data as row}
-      <tr>
-        {#each getRowFiltered(row) as [columnName, val]}
-          <td class={cellCLass}>
-            {#if (tmpCol = hasContentFn(getColumnFromName(columnName)))}
-              {#if tmpCol.html}
-                {@html tmpCol.content(val)}
-              {:else}
-                {tmpCol.content(val)}
-              {/if}
-            {:else}
-              {#if hasHTMLProp(getColumnFromName(columnName))}
-                {@html val}
-              {:else}
-                {val}
-              {/if}
-            {/if}
-          </td>
-        {/each}
-      </tr>
-    {/each}
-  </tbody>
-</table>
-
-<script >;
-let tmpCol;
-export let columns = [];
-export let data = [];
-export let striped = false;
-export let hoverable = false;
-export let showHeader = true;
-export let headerCLass = '';
-export let cellCLass = '';
-function getColumnFromName(name) {
-    return columns[displayedFields.indexOf(name)];
-}
-function hasContentFn(col) {
-    return isColumnObj(col) && col.content && col;
-}
-function hasHTMLProp(col) {
-    return isColumnObj(col) && col.html && col;
-}
-function isColumnObj(arg) {
-    return arg.field;
-}
-function getRowFiltered(row) {
-    return Object.entries(row).filter(([key, _val]) => displayedFields.includes(key));
-}
-$: if (!columns.length) {
-    columns = Object.keys(data[0] || {});
-}
-let displayedFields;
-$: displayedFields = columns.length ? columns.map((column) => (typeof column === 'string' ? column : column.field)) : (data[0] ? Object.keys(data[0]) : []);
-</script>

package/components/Table.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TableColumn as Column } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        columns?: Column[];
-        data?: {}[];
-        striped?: boolean;
-        hoverable?: boolean;
-        showHeader?: boolean;
-        headerCLass?: string;
-        cellCLass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type TableProps = typeof __propDef.props;
-export declare type TableEvents = typeof __propDef.events;
-export declare type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
-}
-export {};

package/components/Tabs/Tab.svelte

@@ -1,52 +0,0 @@
-<div {...$$restProps}
-     class="{$$restProps.class ?? ''} content margin"
-     class:content--active={active}
-     id={getId(label, 'content')}
-     aria-hidden={!active}
-     aria-labelledby={getId(label, 'label')}
-     role="tabpanel"
-     tabindex={active ? 0 : -1}>
-  {#if $$slots.header}
-    <div bind:this={header}
-         style="display: none">
-      <slot name="header" />
-    </div>
-  {/if}
-  <slot />
-</div>
-
-<script >import { onMount, onDestroy, getContext } from 'svelte';
-;
-import { getId } from './utils';
-export let label;
-const key = {};
-let active = false;
-let header;
-$: if (header) {
-    header.firstChild
-        .removeAttribute('slot');
-}
-const tabsData = getContext('tabs');
-if (!tabsData)
-    throw new Error('Tab should be nested inside a Tabs');
-$: tabsData.tabs.update(tabs => (tabs.map(t => t.key === key ? Object.assign(Object.assign({}, t), { label, header }) : t)));
-onMount(() => {
-    tabsData.tabs.update(tabs => [...tabs, {
-            key,
-            label,
-            header,
-            show: () => active = true,
-            hide: () => active = false,
-        }
-    ]);
-});
-onDestroy(() => {
-    tabsData.tabs.update(tabs => (tabs.filter(t => t.key !== key)));
-});
-</script>
-
-<style>
-.content--active {
-  display: block !important;
-}
-</style>

package/components/Tabs/Tab.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        default: {};
-    };
-};
-export declare type TabProps = typeof __propDef.props;
-export declare type TabEvents = typeof __propDef.events;
-export declare type TabSlots = typeof __propDef.slots;
-export default class Tab extends SvelteComponentTyped<TabProps, TabEvents, TabSlots> {
-}
-export {};

package/components/Tabs/Tabs.svelte

@@ -1,90 +0,0 @@
-<div {...$$restProps}
-     class="row flex-{placement} tabs {$$restProps.class ?? ''}"
-     style="text-align: {contentAlign}">
-  {#each $tabs as { label, header }, index}
-    {@const selected = index == activeTab}
-    <div class="tabs-label-header"
-         class:tabs-label-header--active={selected}
-         id={getId(label, 'label')}
-         aria-selected={selected}
-         aria-controls={getId(label, 'content')}
-         role="tab"
-         tabindex={selected ? 0 : -1}
-         on:click={showContent.bind(null, index)}
-         on:keypress>
-      {#if header}
-        {@html header.innerHTML}
-      {:else}
-        {label}
-      {/if}
-    </div>
-  {/each}
-
-  <slot />
-</div>
-
-<script >import { onMount, setContext, createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-;
-;
-import { getId } from './utils';
-export let activeTab = 0;
-export let placement = 'spaces';
-export let contentAlign = 'left';
-const dispatch = createEventDispatcher();
-const tabs = writable([]);
-const tabsData = {
-    activeTab,
-    tabs,
-};
-setContext('tabs', tabsData);
-onMount(() => {
-    if (isNaN(Number(activeTab)))
-        activeTab = 0;
-    if (!$tabs.length)
-        return;
-    $tabs[activeTab].show();
-});
-function showContent(index) {
-    dispatch('change', index);
-    activeTab = index;
-    updateTabsVisility();
-}
-function updateTabsVisility() {
-    $tabs.forEach((tab, idx) => {
-        if (idx == activeTab)
-            tab.show();
-        else
-            tab.hide();
-    });
-}
-$: activeTab && updateTabsVisility();
-</script>
-
-<style >.tabs-label-header {
-  cursor: pointer;
-  color: var(--primary-light);
-  display: inline-block;
-  font-weight: 600;
-  margin: 0 0 -1px;
-  padding: 0.75rem;
-  text-align: center;
-}
-.tabs-label-header:hover:not(.tabs-label-header--active) {
-  color: var(--muted);
-}
-.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/Tabs/Tabs.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperFlexPlacement } from '../../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        activeTab?: number | string;
-        placement?: PaperFlexPlacement;
-        contentAlign?: string;
-    };
-    events: {
-        keypress: KeyboardEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type TabsProps = typeof __propDef.props;
-export declare type TabsEvents = typeof __propDef.events;
-export declare type TabsSlots = typeof __propDef.slots;
-export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
-}
-export {};

package/components/Toast/Toast.svelte

@@ -1,91 +0,0 @@
-{#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: TRANSITION_OUT_DURATION }}
-       role="alert">
-    {@html message}
-    {#if dismissible||indefinite}
-      <CloseButton ariaLabel={closeAriaLabel}
-                   on:click={close} />
-    {/if}
-  </div>
-{/if}
-
-<script >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;
-const TRANSITION_OUT_DURATION = 300;
-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;
-    removeContainer();
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-}
-function getContainer() {
-    return document.querySelector(containerSelector);
-}
-function setupContainer() {
-    new ToastContainer({
-        target: document.body,
-        props: { position },
-    });
-    return getContainer();
-}
-function insert() {
-    const container = getContainer() || setupContainer();
-    container.insertAdjacentElement('afterbegin', toastElement);
-}
-function removeContainer() {
-    const container = getContainer();
-    setTimeout(() => {
-        if (container.children.length === 1) {
-            container.remove();
-        }
-    }, TRANSITION_OUT_DURATION);
-}
-</script>
-
-<style>
-div {
-  width: 250px;
-}
-</style>

package/components/Toast/Toast.svelte.d.ts

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

@@ -1,37 +0,0 @@
-<div class="{containerClass} {position}">
-</div>
-
-<script  context="module">export const containerClass = 'paper-toast-container';
-</script>
-
-<script >;
-export let position = 'top-right';
-</script>
-
-<style >:global(.paper-toast-container:is(.top, .bottom) > div) {
-  align-self: center;
-}
-
-:global(.paper-toast-container:is([class*=right]) > div) {
-  align-self: end;
-}
-
-div {
-  height: 0;
-  position: fixed;
-  display: flex;
-  width: 100%;
-  padding: 2em;
-  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

@@ -1,18 +0,0 @@
-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 {};