spaper 1.1.0 → 1.2.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.9.1/dist/paper.min.css">
+<link rel="stylesheet" href="https://unpkg.com/papercss/dist/paper.min.css">
 ```
 
 Or use NPM:
@@ -94,6 +94,7 @@ Any donation is greatly appreciated :heart:
 - Card
 - Carousel
 - CloseButton
+- Col
 - Collapsible
 - CopyButton
 - Form
@@ -109,6 +110,7 @@ Any donation is greatly appreciated :heart:
 - Pagination
 - Popover
 - Progress
+- Row
 - Skeleton
 - Table
 - Tabs

package/components/Hero.svelte

@@ -30,9 +30,9 @@ export let size = 'default';
 export let border = true;
 export let title = '';
 export let textLead = '';
-$: classes = `hero background-${type}
+$: classes = `hero
   ${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''}
-  ${computeClasses('hero', { size })}`;
+  ${computeClasses('hero', { size, type })}`;
 </script>
 
 <style >.hero {
@@ -52,8 +52,27 @@ $: classes = `hero background-${type}
   padding: 0 1.5rem;
 }
 .hero-large {
-  padding: 5rem 5rem;
+  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/Layout/Col.svelte

@@ -0,0 +1,21 @@
+<div {...$$restProps}
+     class={classes}
+     class:col-fill={fill}
+     class:align-top={top}
+     class:align-middle={middle}
+     class:align-bottom={bottom}>
+  <slot />
+</div>
+
+<script >var _a;
+import { computeClasses } from '../../utils';
+export let col = null;
+export let sm = null;
+export let md = null;
+export let lg = null;
+export let fill = false;
+export let top = false;
+export let middle = false;
+export let bottom = false;
+$: classes = `col ${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} ${computeClasses('col', { col, sm, md, lg })}`;
+</script>

package/components/Layout/Col.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        col?: string | number;
+        sm?: string | number;
+        md?: string | number;
+        lg?: string | number;
+        fill?: boolean;
+        top?: boolean;
+        middle?: boolean;
+        bottom?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ColProps = typeof __propDef.props;
+export declare type ColEvents = typeof __propDef.events;
+export declare type ColSlots = typeof __propDef.slots;
+export default class Col extends SvelteComponentTyped<ColProps, ColEvents, ColSlots> {
+}
+export {};

package/components/Layout/Row.svelte

@@ -0,0 +1,20 @@
+<div {...$$restProps}
+     class="{$$restProps.class ?? ''} row"
+     class:flex-right={right}
+     class:flex-center={center}
+     class:flex-edges={edges}
+     class:flex-spaces={spaces}
+     class:flex-top={top}
+     class:flex-middle={middle}
+     class:flex-bottom={bottom}>
+  <slot />
+</div>
+
+<script >export let right = false;
+export let center = false;
+export let edges = false;
+export let spaces = false;
+export let top = false;
+export let middle = false;
+export let bottom = false;
+</script>

package/components/Layout/Row.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        right?: boolean;
+        center?: boolean;
+        edges?: boolean;
+        spaces?: boolean;
+        top?: boolean;
+        middle?: boolean;
+        bottom?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type RowProps = typeof __propDef.props;
+export declare type RowEvents = typeof __propDef.events;
+export declare type RowSlots = typeof __propDef.slots;
+export default class Row extends SvelteComponentTyped<RowProps, RowEvents, RowSlots> {
+}
+export {};

package/components/Layout/index.d.ts

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

package/components/Layout/index.js

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

package/index.d.ts

@@ -19,4 +19,5 @@ import CopyButton from './components/CopyButton.svelte';
 import Skeleton from './components/Skeleton.svelte';
 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, };
+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/index.js

@@ -19,4 +19,5 @@ import CopyButton from './components/CopyButton.svelte';
 import Skeleton from './components/Skeleton.svelte';
 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, };
+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/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -46,6 +46,9 @@
     "./components/Form": "./components/Form/index.js",
     "./components/Form/style.scss": "./components/Form/style.scss",
     "./components/Hero.svelte": "./components/Hero.svelte",
+    "./components/Layout/Col.svelte": "./components/Layout/Col.svelte",
+    "./components/Layout/Row.svelte": "./components/Layout/Row.svelte",
+    "./components/Layout": "./components/Layout/index.js",
     "./components/Modal/Modal.svelte": "./components/Modal/Modal.svelte",
     "./components/Modal": "./components/Modal/index.js",
     "./components/Navbar.svelte": "./components/Navbar.svelte",

package/utils.js

@@ -4,6 +4,10 @@ const propToClass = {
     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)