spaper 1.3.0 → 2.0.0

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

package/components/Toast/index.js

@@ -1,37 +0,0 @@
-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, error, danger
-});
-export default Toast;

package/index.d.ts

@@ -1,23 +0,0 @@
-import Button from './components/Button.svelte';
-import Alert from './components/Alert.svelte';
-import Badge from './components/Badge.svelte';
-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, Form } from './components/Form';
-import Article from './components/Article.svelte';
-import Card from './components/Card.svelte';
-import Collapsible from './components/Collapsible.svelte';
-import Popover from './components/Popover.svelte';
-import Progress from './components/Progress.svelte';
-import Table from './components/Table.svelte';
-import Pagination from './components/Pagination';
-import Toast from './components/Toast';
-import CloseButton from './components/CloseButton.svelte';
-import CopyButton from './components/CopyButton.svelte';
-import Skeleton from './components/Skeleton.svelte';
-import { Carousel, CarouselItem } from './components/Carousel';
-import Hero from './components/Hero.svelte';
-import { Col, Row } from './components/Layout';
-export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Form, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, Pagination, Toast, CloseButton, CopyButton, Skeleton, Carousel, CarouselItem, Hero, Col, Row, };

package/types.d.ts

@@ -1,16 +0,0 @@
-export declare type PaperSize = 'small' | 'default' | 'large';
-export declare type PaperType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
-export declare type PaperFlexPlacement = 'spaces' | 'edges' | 'right' | 'center' | 'left';
-export declare type PaperAlign = 'left' | 'center' | 'right';
-export declare type Attributes = Record<string, string | boolean>;
-export declare type PositionY = 'top' | 'bottom';
-export declare type PositionX = 'left' | 'right';
-export declare type Position = PositionX | PositionY;
-export interface TableColumnObj {
-    field: string;
-    label?: string;
-    content?: (val?: any) => string;
-    html?: boolean;
-}
-export declare type TableColumn = TableColumnObj | string;
-export declare type Transition = 'blur' | 'fade' | 'fly' | 'slide' | 'scale' | 'draw' | 'crossfade';

package/utils.d.ts

@@ -1,16 +0,0 @@
-import type { Attributes } from './types';
-interface getDomAttributesParams {
-    props: Attributes;
-    classes: string;
-    toOmit?: string[];
-}
-export declare function computeClasses(elPrefix: string, props: Record<string, any>): string;
-export declare function getDomAttributes({ props, classes, toOmit }: getDomAttributesParams): Attributes;
-export declare type ComponentProps<T extends {
-    $set: (...args: any) => any;
-}> = NonNullable<Parameters<T['$set']>[0]>;
-export declare function configureTransition(node: any, { name, disabled }: {
-    name: any;
-    disabled: any;
-}): any;
-export {};

package/utils.js

@@ -1,34 +0,0 @@
-import * as transition from 'svelte/transition';
-const propToClass = {
-    size: (pf, val) => `${pf}-${val}`,
-    block: (pf, _val) => `${pf}-block`,
-    type: (pf, val) => `${pf}-${val}`,
-    outline: (pf, val) => `${pf}-${val}-outline`,
-    col: (pf, val) => `${pf}-${val}`,
-    sm: (_pf, val) => `sm-${val}`,
-    md: (_pf, val) => `md-${val}`,
-    lg: (_pf, val) => `lg-${val}`,
-};
-function omit(obj, properties) {
-    return Object.fromEntries(Object.entries(obj)
-        .filter(([key, _val]) => !properties.includes(key)));
-}
-export function computeClasses(elPrefix, props) {
-    return Object.entries(props)
-        .filter(([_prop, val]) => val)
-        .map(([prop, val]) => propToClass[prop](elPrefix, val))
-        .join(' ');
-}
-;
-export function getDomAttributes({ props, classes, toOmit = [] }) {
-    return {
-        ...omit(props, toOmit), class: classes
-    };
-}
-export function configureTransition(node, { name, disabled }) {
-    if (disabled
-        || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-        return;
-    }
-    return transition[name](node);
-}