spaper 1.0.0 → 1.1.1

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/dist/paper.min.css">
 ```
 
 Or use NPM:
@@ -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
 
@@ -103,6 +103,7 @@ Any donation is greatly appreciated :heart:
 - Select
 - Slider
 - Switch
+- Hero
 - Modal
 - Navbar
 - Pagination
@@ -111,4 +112,4 @@ Any donation is greatly appreciated :heart:
 - Skeleton
 - Table
 - Tabs
-- Toast
+- Toast

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,78 @@
+<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
+  ${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''}
+  ${computeClasses('hero', { size, type })}`;
+</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;
+}
+.hero-fullheight {
+  min-height: 100vh;
+}
+.hero-primary {
+  background-color: var(--primary-light);
+}
+.hero-secondary {
+  background-color: var(--secondary-light);
+}
+.hero-success {
+  background-color: var(--success-light);
+}
+.hero-warning {
+  background-color: var(--warning-light);
+}
+.hero-danger {
+  background-color: var(--danger-light);
+}
+
+:global(.dark .hero-primary) {
+  color: var(--primary-text);
+}</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/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}
@@ -17,7 +17,7 @@
 
 <script >import { onMount, onDestroy, getContext } from 'svelte';
 ;
-import { genControlLabel } from './utils';
+import { getId } from './utils';
 export let label;
 const key = {};
 let active = false;
@@ -43,7 +43,6 @@ onMount(() => {
 onDestroy(() => {
     tabsData.tabs.update(tabs => (tabs.filter(t => t.key !== key)));
 });
-$: controlLabel = genControlLabel(label);
 </script>
 
 <style>

package/components/Tabs/Tabs.svelte

@@ -5,8 +5,9 @@
     {@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

@@ -18,4 +18,5 @@ import CloseButton from './components/CloseButton.svelte';
 import CopyButton from './components/CopyButton.svelte';
 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, };
+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

@@ -18,4 +18,5 @@ import CloseButton from './components/CloseButton.svelte';
 import CopyButton from './components/CopyButton.svelte';
 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, };
+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": "1.0.0",
+  "version": "1.1.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -45,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",