spaper 1.2.0 → 1.4.0

package/README.md

@@ -100,6 +100,7 @@ Any donation is greatly appreciated :heart:
 - Form
 - Checkbox
 - Input
+- NuberInput
 - Radio
 - Select
 - Slider

package/components/Form/Form.svelte

@@ -5,6 +5,18 @@
       on:keydown
       on:mouseover
       on:mouseenter
-      on:mouseleave>
+      on:mouseleave
+      on:focus>
   <slot />
 </form>
+
+<style >form {
+  /* NOTE: set back PaperCSS margins for our structure
+    <label> being parent of <input> instead of a sibling */
+}
+form :global(label) {
+  margin-block-end: 0;
+}
+form :global(input) {
+  margin-block-start: 0.5rem;
+}</style>

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/NumberInput/DecrementButton.svelte

@@ -0,0 +1,9 @@
+<Button {...$$restProps} {type} on:click={clickHandler}>
+  -
+</Button>
+
+<script >;
+import Button from '../../Button.svelte';
+export let clickHandler;
+export let type;
+</script>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PaperType } from '../../../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        clickHandler: (e: MouseEvent) => any;
+        type: PaperType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DecrementButtonProps = typeof __propDef.props;
+export declare type DecrementButtonEvents = typeof __propDef.events;
+export declare type DecrementButtonSlots = typeof __propDef.slots;
+export default class DecrementButton extends SvelteComponentTyped<DecrementButtonProps, DecrementButtonEvents, DecrementButtonSlots> {
+}
+export {};

package/components/Form/NumberInput/IncrementButton.svelte

@@ -0,0 +1,9 @@
+<Button {...$$restProps} {type} on:click={clickHandler}>
+  +
+</Button>
+
+<script >;
+import Button from '../../Button.svelte';
+export let clickHandler;
+export let type;
+</script>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PaperType } from '../../../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        clickHandler: (e: MouseEvent) => any;
+        type: PaperType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type IncrementButtonProps = typeof __propDef.props;
+export declare type IncrementButtonEvents = typeof __propDef.events;
+export declare type IncrementButtonSlots = typeof __propDef.slots;
+export default class IncrementButton extends SvelteComponentTyped<IncrementButtonProps, IncrementButtonEvents, IncrementButtonSlots> {
+}
+export {};

package/components/Form/NumberInput/NumberInput.svelte

@@ -0,0 +1,129 @@
+{#if label}
+  <div class="number-input-wrapper">
+    {#if controls}
+      <DecrementButton
+        clickHandler={() => value -= step}
+        type={controlsType}
+        disabled={!canDecrement}
+      />
+    {/if}
+    <label>
+      {label}
+      <input {...attr}
+             inputmode="numeric"
+             bind:value={formattedValue}
+             class:border-danger={!isValid && value}
+             class:border-success={isValid && value && valid}
+             aria-valuemin={min}
+             aria-valuemax={max}
+             aria-valuenow={value}
+             on:input={onInput}
+             on:focus
+             on:blur
+             on:change />
+    </label>
+    {#if controls}
+      <IncrementButton
+        clickHandler={() => value += step}
+        type={controlsType}
+        disabled={!canIncrement}
+      />
+    {/if}
+  </div>
+{:else}
+  <div class="number-input-wrapper">
+    {#if controls}
+      <DecrementButton
+        clickHandler={() => value -= step}
+        type={controlsType}
+        disabled={!canDecrement}
+      />
+    {/if}
+    <input {...attr}
+           inputmode="numeric"
+           bind:value={formattedValue}
+           class:border-danger={!isValid && value}
+           class:border-success={isValid && value && valid}
+           aria-valuemin={min}
+           aria-valuemax={max}
+           aria-valuenow={value}
+           on:input={onInput}
+           on:focus
+           on:blur
+           on:change />
+    {#if controls}
+      <IncrementButton
+        clickHandler={() => value += step}
+        type={controlsType}
+        disabled={!canIncrement}
+      />
+    {/if}
+  </div>
+{/if}
+
+<script >var _a;
+import { createEventDispatcher } from 'svelte';
+import { DecrementButton, IncrementButton } from './';
+import { computeClasses, getDomAttributes } from '../../../utils';
+;
+export let label = '';
+export let value = null;
+export let step = 1;
+export let min = null;
+export let max = null;
+export let disabled = false;
+export let controls = true;
+export let controlsType = 'secondary';
+export let block = false;
+export let valid = null;
+export let prefix = '';
+export let suffix = '';
+export let format = null;
+export let formatOptions = undefined;
+const dispatch = createEventDispatcher();
+function onInput({ target }) {
+    dispatch('input', target.value);
+}
+let isValid = true;
+$: if (valid) {
+    isValid = valid(value);
+}
+let attr;
+$: {
+    attr = getDomAttributes({
+        props: $$props,
+        classes,
+        toOmit: ['block', 'value', 'valid', 'noResize', 'min', 'max']
+    });
+}
+let classes;
+$: classes = `${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} ${computeClasses('input', { block })}`;
+$: canDecrement = !disabled && (min !== null ? value - step >= min : true);
+$: canIncrement = !disabled && (max !== null ? value + step <= max : true);
+let formattedValue = '';
+$: if (value !== null) {
+    formattedValue = String(value);
+    if (format) {
+        if (typeof format === 'string') {
+            formattedValue = new Intl.NumberFormat(format === 'locale' ? undefined : format, formatOptions).format(value);
+        }
+        else {
+            formattedValue = format(value);
+        }
+    }
+    formattedValue = [
+        prefix,
+        formattedValue,
+        suffix,
+    ].join(' ').trim();
+}
+</script>
+
+<style >:global(.number-input-wrapper) {
+  display: flex;
+  gap: 0.25rem;
+}
+:global(.number-input-wrapper) :global(.paper-btn) {
+  align-self: flex-end;
+  padding: 0.5rem;
+}</style>

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

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PaperType } from '../../../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string;
+        value?: number | null;
+        step?: number;
+        min?: number | null;
+        max?: number | null;
+        disabled?: boolean;
+        controls?: boolean;
+        controlsType?: PaperType;
+        block?: boolean;
+        valid?: (val: number | null) => boolean;
+        prefix?: string;
+        suffix?: string;
+        format?: string | ((val: number | null) => string);
+        formatOptions?: Intl.NumberFormatOptions | undefined;
+    };
+    events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+        change: Event;
+        input: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NumberInputProps = typeof __propDef.props;
+export declare type NumberInputEvents = typeof __propDef.events;
+export declare type NumberInputSlots = typeof __propDef.slots;
+export default class NumberInput extends SvelteComponentTyped<NumberInputProps, NumberInputEvents, NumberInputSlots> {
+}
+export {};

package/components/Form/NumberInput/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as DecrementButton } from './DecrementButton.svelte';
+export { default as IncrementButton } from './IncrementButton.svelte';

package/components/Form/NumberInput/index.js

@@ -0,0 +1,3 @@
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as DecrementButton } from './DecrementButton.svelte';
+export { default as IncrementButton } from './IncrementButton.svelte';

package/components/Form/index.d.ts

@@ -5,5 +5,6 @@ import Checkbox from './Checkbox.svelte';
 import Switch from './Switch.svelte';
 import Slider from './Slider.svelte';
 import Form from './Form.svelte';
+import { NumberInput } from './NumberInput';
 export declare type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'time' | 'date' | 'month' | 'week' | 'datetime-local' | 'color' | 'textarea';
-export { Input, Select, Radio, Checkbox, Switch, Slider, Form, };
+export { Input, Select, Radio, Checkbox, Switch, Slider, Form, NumberInput, };

package/components/Form/index.js

@@ -5,4 +5,5 @@ import Checkbox from './Checkbox.svelte';
 import Switch from './Switch.svelte';
 import Slider from './Slider.svelte';
 import Form from './Form.svelte';
-export { Input, Select, Radio, Checkbox, Switch, Slider, Form, };
+import { NumberInput } from './NumberInput';
+export { Input, Select, Radio, Checkbox, Switch, Slider, Form, NumberInput, };

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/Popover.svelte

@@ -24,27 +24,32 @@ function bgClass(color) {
 
 [popover-top].popover-primary::after, [popover-right].popover-primary::after,
 [popover-bottom].popover-primary::after, [popover-left].popover-primary::after {
-  background-color: var(--primary);
+  background-color: var(--primary-light);
+  color: var(--muted-dark);
 }
 
 [popover-top].popover-secondary::after, [popover-right].popover-secondary::after,
 [popover-bottom].popover-secondary::after, [popover-left].popover-secondary::after {
-  background-color: var(--secondary);
+  background-color: var(--secondary-light);
+  color: var(--muted-dark);
 }
 
 [popover-top].popover-success::after, [popover-right].popover-success::after,
 [popover-bottom].popover-success::after, [popover-left].popover-success::after {
-  background-color: var(--success);
+  background-color: var(--success-light);
+  color: var(--muted-dark);
 }
 
 [popover-top].popover-warning::after, [popover-right].popover-warning::after,
 [popover-bottom].popover-warning::after, [popover-left].popover-warning::after {
-  background-color: var(--warning);
+  background-color: var(--warning-light);
+  color: var(--muted-dark);
 }
 
 [popover-top].popover-danger::after, [popover-right].popover-danger::after,
 [popover-bottom].popover-danger::after, [popover-left].popover-danger::after {
-  background-color: var(--danger);
+  background-color: var(--danger-light);
+  color: var(--muted-dark);
 }
 
 [popover-top], [popover-right],

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

@@ -5,7 +5,7 @@ import Breadcrumb from './components/Breadcrumb.svelte';
 import Navbar from './components/Navbar.svelte';
 import Modal from './components/Modal';
 import { Tabs, Tab } from './components/Tabs';
-import { Input, Select, Radio, Checkbox, Switch, Slider, Form } from './components/Form';
+import { Input, Select, Radio, Checkbox, Switch, Slider, Form, NumberInput } from './components/Form';
 import Article from './components/Article.svelte';
 import Card from './components/Card.svelte';
 import Collapsible from './components/Collapsible.svelte';
@@ -20,4 +20,4 @@ import Skeleton from './components/Skeleton.svelte';
 import { Carousel, CarouselItem } from './components/Carousel';
 import Hero from './components/Hero.svelte';
 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, };
+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, NumberInput, };

package/index.js

@@ -5,7 +5,7 @@ import Breadcrumb from './components/Breadcrumb.svelte';
 import Navbar from './components/Navbar.svelte';
 import Modal from './components/Modal';
 import { Tabs, Tab } from './components/Tabs';
-import { Input, Select, Radio, Checkbox, Switch, Slider, Form } from './components/Form';
+import { Input, Select, Radio, Checkbox, Switch, Slider, Form, NumberInput, } from './components/Form';
 import Article from './components/Article.svelte';
 import Card from './components/Card.svelte';
 import Collapsible from './components/Collapsible.svelte';
@@ -20,4 +20,4 @@ import Skeleton from './components/Skeleton.svelte';
 import { Carousel, CarouselItem } from './components/Carousel';
 import Hero from './components/Hero.svelte';
 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, };
+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, NumberInput, };

package/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "1.2.0",
+  "version": "1.4.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.2"
+    "papercss": "^1.9.2"
   },
   "type": "module",
   "exports": {
@@ -39,6 +39,10 @@
     "./components/Form/Checkbox.svelte": "./components/Form/Checkbox.svelte",
     "./components/Form/Form.svelte": "./components/Form/Form.svelte",
     "./components/Form/Input.svelte": "./components/Form/Input.svelte",
+    "./components/Form/NumberInput/DecrementButton.svelte": "./components/Form/NumberInput/DecrementButton.svelte",
+    "./components/Form/NumberInput/IncrementButton.svelte": "./components/Form/NumberInput/IncrementButton.svelte",
+    "./components/Form/NumberInput/NumberInput.svelte": "./components/Form/NumberInput/NumberInput.svelte",
+    "./components/Form/NumberInput": "./components/Form/NumberInput/index.js",
     "./components/Form/Radio.svelte": "./components/Form/Radio.svelte",
     "./components/Form/Select.svelte": "./components/Form/Select.svelte",
     "./components/Form/Slider.svelte": "./components/Form/Slider.svelte",
@@ -70,6 +74,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 {};