spaper 1.3.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

@@ -9,3 +9,14 @@
       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/Input.svelte

@@ -35,18 +35,14 @@ import { computeClasses, getDomAttributes } from '../../utils';
 ;
 ;
 export let label = '';
-export let value = null;
+export let value = '';
 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) {
@@ -62,9 +58,6 @@ $: {
 }
 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 | number | null;
+        value?: string;
         block?: boolean;
         type?: InputType;
-        valid?: (val: string | number) => boolean;
+        valid?: (val: string) => boolean;
         noResize?: boolean;
     };
     events: {

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/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/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.3.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",