spaper 0.9.6 → 1.1.0

package/README.md

@@ -14,7 +14,7 @@ Browse [documentation and demo here](https://oli8.github.io/spaper/).
 Add a link to the CDN into your HTML file:  
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/papercss@1.8.3/dist/paper.min.css">
+<link rel="stylesheet" href="https://unpkg.com/papercss@1.9.1/dist/paper.min.css">
 ```
 
 Or use NPM:
@@ -70,7 +70,7 @@ Thanks to these generous people! :heart:
       </a>
     </td>
   </tr>
-</table>    
+</table>
 
 
 ### Donate
@@ -82,7 +82,7 @@ Any donation is greatly appreciated :heart:
 | Github Sponsor  | https://github.com/sponsors/Oli8           |
 | PayPal          | https://paypal.me/OliCrt                   |
 | Bitcoin         | 1Ez3Ts2WShUcbeGCjhZapdxVDK77DbYjdU         |
-| Ethereum        | 0x6cd3d316a6ee6d210894981e1fcc83a00a27ede2 |
+| Ethereum        | 0xc4364cafac87fd8085dc26af4a4a8c3bbad1bd3e |
 
 #### Components
 
@@ -92,6 +92,7 @@ Any donation is greatly appreciated :heart:
 - Breadcrumb
 - Button
 - Card
+- Carousel
 - CloseButton
 - Collapsible
 - CopyButton
@@ -102,11 +103,13 @@ Any donation is greatly appreciated :heart:
 - Select
 - Slider
 - Switch
+- Hero
 - Modal
 - Navbar
 - Pagination
 - Popover
 - Progress
+- Skeleton
 - Table
 - Tabs
 - 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.d.ts

@@ -4,6 +4,13 @@ declare const __propDef: {
         [x: string]: any;
     };
     events: {
+        submit: Event;
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/Hero.svelte

@@ -0,0 +1,59 @@
+<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 background-${type}
+  ${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''}
+  ${computeClasses('hero', { size })}`;
+</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 5rem;
+}
+.hero-fullheight {
+  min-height: 100vh;
+}</style>

package/components/Hero.svelte.d.ts

@@ -0,0 +1,26 @@
+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/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/Tabs/Tab.svelte

@@ -1,9 +1,9 @@
 <div {...$$restProps}
      class="{$$restProps.class ?? ''} content margin"
      class:content--active={active}
-     id={controlLabel}
+     id={getId(label, 'content')}
      aria-hidden={!active}
-     aria-labelledby={controlLabel}
+     aria-labelledby={getId(label, 'label')}
      role="tabpanel"
      tabindex={active ? 0 : -1}>
   {#if $$slots.header}
@@ -15,9 +15,9 @@
   <slot />
 </div>
 
-<script >import { onMount, getContext } from 'svelte';
+<script >import { onMount, onDestroy, getContext } from 'svelte';
 ;
-import { genControlLabel } from './utils';
+import { getId } from './utils';
 export let label;
 const key = {};
 let active = false;
@@ -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,7 +40,9 @@ onMount(() => {
         }
     ]);
 });
-$: controlLabel = genControlLabel(label);
+onDestroy(() => {
+    tabsData.tabs.update(tabs => (tabs.filter(t => t.key !== key)));
+});
 </script>
 
 <style>

package/components/Tabs/Tabs.svelte

@@ -1,12 +1,13 @@
 <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"
          class:tabs-label-header--active={selected}
+         id={getId(label, 'label')}
          aria-selected={selected}
-         aria-controls={genControlLabel(label)}
+         aria-controls={getId(label, 'content')}
          role="tab"
          tabindex={selected ? 0 : -1}
          on:click={showContent.bind(null, index)}>
@@ -25,7 +26,7 @@
 import { writable } from 'svelte/store';
 ;
 ;
-import { genControlLabel } from './utils';
+import { getId } from './utils';
 export let activeTab = 0;
 export let placement = 'spaces';
 export let contentAlign = 'left';

package/components/Tabs/utils.d.ts

@@ -10,5 +10,5 @@ export interface TabDataType {
     activeTab: number | string;
     tabs: Writable<iTab[]>;
 }
-export declare function genControlLabel(label: string): string;
+export declare function getId(label: string, part: 'label' | 'content'): string;
 export {};

package/components/Tabs/utils.js

@@ -1,3 +1,3 @@
-export function genControlLabel(label) {
-    return `paper-tab-${label}`;
+export function getId(label, part) {
+    return `paper-tab-${label}-${part}`;
 }

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "0.9.6",
+  "version": "1.1.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",
@@ -41,6 +45,7 @@
     "./components/Form/Switch.svelte": "./components/Form/Switch.svelte",
     "./components/Form": "./components/Form/index.js",
     "./components/Form/style.scss": "./components/Form/style.scss",
+    "./components/Hero.svelte": "./components/Hero.svelte",
     "./components/Modal/Modal.svelte": "./components/Modal/Modal.svelte",
     "./components/Modal": "./components/Modal/index.js",
     "./components/Navbar.svelte": "./components/Navbar.svelte",

package/types.d.ts

@@ -20,3 +20,7 @@ export interface TableColumnObj {
 }
 
 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);
+}