spaper 1.2.0 → 1.3.0

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

@@ -1,14 +1,18 @@
-<div {...$$restProps}
-     class={classes}
-     class:col-fill={fill}
-     class:align-top={top}
-     class:align-middle={middle}
-     class:align-bottom={bottom}>
+<svelte:element
+  this={as}
+  {...$$restProps}
+  class={classes}
+  class:col-fill={fill}
+  class:align-top={top}
+  class:align-middle={middle}
+  class:align-bottom={bottom}
+>
   <slot />
-</div>
+</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;

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

@@ -2,6 +2,7 @@ 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;

package/components/Layout/Row.svelte

@@ -1,16 +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}>
+<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 />
-</div>
+</svelte:element>
 
-<script >export let right = false;
+<script >export let as = 'div';
+export let right = false;
 export let center = false;
 export let edges = false;
 export let spaces = false;

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        as?: keyof HTMLElementTagNameMap;
         right?: boolean;
         center?: boolean;
         edges?: boolean;

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/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "1.2.0",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -70,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 {};