spaper 0.8.6 → 1.0.0

package/README.md

@@ -63,8 +63,14 @@ Thanks to these generous people! :heart:
         <sub><b>mehdi-dalil</b></sub>
       </a>
     </td>
+    <td align="center">
+      <a href="https://github.com/t0kido">
+        <img src="https://avatars.githubusercontent.com/u/12486500?v=4" width="80px;" alt=""/><br />
+        <sub><b>t0kido</b></sub>
+      </a>
+    </td>
   </tr>
-</table>    
+</table>
 
 
 ### Donate
@@ -86,6 +92,7 @@ Any donation is greatly appreciated :heart:
 - Breadcrumb
 - Button
 - Card
+- Carousel
 - CloseButton
 - Collapsible
 - CopyButton
@@ -101,6 +108,7 @@ Any donation is greatly appreciated :heart:
 - Pagination
 - Popover
 - Progress
+- Skeleton
 - Table
 - Tabs
-- Toast
+- Toast

package/components/Card.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { PositionY } from "../types";
+import type { PositionY } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/components/Carousel/Carousel.svelte

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

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

@@ -0,0 +1,32 @@
+{#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

@@ -0,0 +1,18 @@
+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/index.d.ts

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

package/components/Carousel/index.js

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

package/components/Carousel/types.d.ts

@@ -0,0 +1,14 @@
+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/Carousel/types.js

@@ -0,0 +1 @@
+export {};

package/components/Form/Form.svelte

@@ -1,4 +1,10 @@
 <form {...$$restProps}
-      class="{$$restProps.class ?? ''} form-group">
+      class="{$$restProps.class ?? ''} form-group"
+      on:submit|preventDefault
+      on:click
+      on:keydown
+      on:mouseover
+      on:mouseenter
+      on:mouseleave>
   <slot />
 </form>

package/components/Form/Radio.svelte

@@ -6,7 +6,13 @@
          on:focus
          on:blur
          on:change />
-  <span>{label}</span>
+  <span>
+    {#if $$slots.default}
+      <slot />
+    {:else}
+      {label}
+    {/if}
+  </span>
 </label>
 
 <script >export let label = '';

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

@@ -13,7 +13,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type RadioProps = typeof __propDef.props;
 export declare type RadioEvents = typeof __propDef.events;

package/components/Pagination/Pagination.svelte

@@ -1,5 +1,5 @@
 <section {...$$restProps}>
-  {#if navigation}
+  {#if showNavigation}
     <NavigationButton
       type={highlightedStyle}
       {size} action="previous"
@@ -12,26 +12,27 @@
   {#if simple}
     {current} / {pageCount}
   {:else}
-    <ul class="padding-none">
+    <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}>
-              {idx}
+              {displayedPageLabel(idx)}
             </Button>
           {:else if shouldDisplayEllipsis(idx)}
             …
           {/if}
         </li>
       {/each}
-    </ul>
+    </ol>
   {/if}
 
-  {#if navigation}
+  {#if showNavigation}
     <NavigationButton
       type={highlightedStyle}
       {size} action="next"
@@ -62,12 +63,14 @@ 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;
@@ -79,6 +82,8 @@ 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))
@@ -103,20 +108,30 @@ function changePage(val) {
     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 >ul, li {
+<style >ol, li {
   display: inline;
 }
 
-ul li {
+ol li {
   text-indent: 0;
 }
-ul li::before {
+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

@@ -9,12 +9,14 @@ declare const __propDef: {
         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;

package/components/Skeleton.svelte

@@ -0,0 +1,55 @@
+{#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="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

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

@@ -41,7 +41,8 @@
   </tbody>
 </table>
 
-<script >let tmpCol;
+<script >;
+let tmpCol;
 export let columns = [];
 export let data = [];
 export let striped = false;

package/components/Table.svelte.d.ts

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

@@ -15,7 +15,7 @@
   <slot />
 </div>
 
-<script >import { onMount, getContext } from 'svelte';
+<script >import { onMount, onDestroy, getContext } from 'svelte';
 ;
 import { genControlLabel } from './utils';
 export let label;
@@ -27,6 +27,8 @@ $: if (header) {
         .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, {
@@ -38,6 +40,9 @@ onMount(() => {
         }
     ]);
 });
+onDestroy(() => {
+    tabsData.tabs.update(tabs => (tabs.filter(t => t.key !== key)));
+});
 $: controlLabel = genControlLabel(label);
 </script>
 

package/components/Tabs/Tabs.svelte

@@ -1,6 +1,6 @@
 <div {...$$restProps}
-     class={`row flex-${placement} tabs ${$$restProps.class ?? ''}`}
-     style={`text-align: ${contentAlign}`}>
+     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"

package/index.d.ts

@@ -16,4 +16,6 @@ import Pagination from './components/Pagination';
 import Toast from './components/Toast';
 import CloseButton from './components/CloseButton.svelte';
 import CopyButton from './components/CopyButton.svelte';
-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, };
+import Skeleton from './components/Skeleton.svelte';
+import { Carousel, CarouselItem } from './components/Carousel';
+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, };

package/index.js

@@ -16,4 +16,6 @@ import Pagination from './components/Pagination';
 import Toast from './components/Toast';
 import CloseButton from './components/CloseButton.svelte';
 import CopyButton from './components/CopyButton.svelte';
-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, };
+import Skeleton from './components/Skeleton.svelte';
+import { Carousel, CarouselItem } from './components/Carousel';
+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, };

package/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "0.8.6",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/Oli8/spaper#readme",
   "peerDependencies": {
-    "papercss": "^1.8.3"
+    "papercss": "^1.8.2"
   },
   "type": "module",
   "exports": {
@@ -29,6 +29,10 @@
     "./components/Breadcrumb.svelte": "./components/Breadcrumb.svelte",
     "./components/Button.svelte": "./components/Button.svelte",
     "./components/Card.svelte": "./components/Card.svelte",
+    "./components/Carousel/Carousel.svelte": "./components/Carousel/Carousel.svelte",
+    "./components/Carousel/CarouselItem.svelte": "./components/Carousel/CarouselItem.svelte",
+    "./components/Carousel": "./components/Carousel/index.js",
+    "./components/Carousel/types": "./components/Carousel/types.js",
     "./components/CloseButton.svelte": "./components/CloseButton.svelte",
     "./components/Collapsible.svelte": "./components/Collapsible.svelte",
     "./components/CopyButton.svelte": "./components/CopyButton.svelte",
@@ -51,6 +55,7 @@
     "./components/Pagination": "./components/Pagination/index.js",
     "./components/Popover.svelte": "./components/Popover.svelte",
     "./components/Progress.svelte": "./components/Progress.svelte",
+    "./components/Skeleton.svelte": "./components/Skeleton.svelte",
     "./components/Table.svelte": "./components/Table.svelte",
     "./components/Tabs/Tab.svelte": "./components/Tabs/Tab.svelte",
     "./components/Tabs/Tabs.svelte": "./components/Tabs/Tabs.svelte",

package/types.d.ts

@@ -11,3 +11,16 @@ export type Attributes = Record<string, string|boolean>;
 export type PositionY = 'top' | 'bottom';
 export type PositionX = 'left' | 'right';
 export type Position = PositionX | PositionY;
+
+export interface TableColumnObj {
+  field: string;
+  label?: string;
+  content?: (text?: string) => string;
+  html?: boolean;
+}
+
+export type TableColumn = TableColumnObj | string;
+
+export type Transition = 'blur'
+  | 'fade' | 'fly' | 'slide'
+  | 'scale' | 'draw' | 'crossfade';

package/utils.d.ts

@@ -9,4 +9,8 @@ export declare function getDomAttributes({ props, classes, toOmit }: getDomAttri
 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,3 +1,4 @@
+import * as transition from 'svelte/transition';
 const propToClass = {
     size: (pf, val) => `${pf}-${val}`,
     block: (pf, _val) => `${pf}-block`,
@@ -20,3 +21,10 @@ export function getDomAttributes({ props, classes, toOmit = [] }) {
         ...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);
+}