spaper 1.1.1 → 1.3.0

package/README.md

@@ -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/Form/Form.svelte

@@ -5,6 +5,7 @@
       on:keydown
       on:mouseover
       on:mouseenter
-      on:mouseleave>
+      on:mouseleave
+      on:focus>
   <slot />
 </form>

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        focus: FocusEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/Form/Input.svelte

@@ -35,14 +35,18 @@ import { computeClasses, getDomAttributes } from '../../utils';
 ;
 ;
 export let label = '';
-export let value = '';
+export let value = null;
 export let block = false;
 export let type = 'text';
 export let valid = null;
 export let noResize = false;
 const dispatch = createEventDispatcher();
+// let value_ = value
 function onInput({ target }) {
     dispatch('input', target.value);
+    // console.log(type)
+    // const valueToDispatch = type === 'number' ? parseFloat(target.value) : target.value;
+    // dispatch('input', valueToDispatch);
 }
 let isValid = true;
 $: if (valid) {
@@ -58,6 +62,9 @@ $: {
 }
 let classes;
 $: classes = `${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} ${computeClasses('input', { block })}`;
+// $: console.log('value in input', value, value === null)
+// FIXME: change value twice... use other var? value_?
+// $: if (type === 'number' && value !== null) value = Number(value)
 </script>
 
 <style>

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

@@ -4,10 +4,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
-        value?: string;
+        value?: string | number | null;
         block?: boolean;
         type?: InputType;
-        valid?: (val: string) => boolean;
+        valid?: (val: string | number) => boolean;
         noResize?: boolean;
     };
     events: {

package/components/Layout/Col.svelte

@@ -0,0 +1,25 @@
+<svelte:element
+  this={as}
+  {...$$restProps}
+  class={classes}
+  class:col-fill={fill}
+  class:align-top={top}
+  class:align-middle={middle}
+  class:align-bottom={bottom}
+>
+  <slot />
+</svelte:element>
+
+<script >var _a;
+import { computeClasses } from '../../utils';
+export let as = 'div';
+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,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        as?: keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap;
+        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,24 @@
+<svelte:element
+  this={as}
+  {...$$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 />
+</svelte:element>
+
+<script >export let as = 'div';
+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,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        as?: keyof HTMLElementTagNameMap;
+        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/components/Skeleton.svelte

@@ -6,7 +6,7 @@
          aria-valuetext={ariaValueText}
          tabindex="-1"
          role="progressbar"
-         class="border border-{borderType} margin-small"
+         class="{$$restProps.class ?? ''} border border-{borderType} margin-small"
          class:animated
          class:circle
          class:inline>

package/components/Tabs/Tabs.svelte

@@ -10,7 +10,8 @@
          aria-controls={getId(label, 'content')}
          role="tab"
          tabindex={selected ? 0 : -1}
-         on:click={showContent.bind(null, index)}>
+         on:click={showContent.bind(null, index)}
+         on:keypress>
       {#if header}
         {@html header.innerHTML}
       {:else}

package/components/Tabs/Tabs.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         contentAlign?: string;
     };
     events: {
+        keypress: KeyboardEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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.1",
+  "version": "1.3.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",
@@ -67,6 +70,7 @@
     "./components/Toast": "./components/Toast/index.js",
     "./components/style.scss": "./components/style.scss",
     ".": "./index.js",
+    "./types": "./types.js",
     "./utils": "./utils.js"
   },
   "svelte": "./index.js"

package/types.d.ts

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

package/types.js

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

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)