spaper 1.4.0 → 2.0.0

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

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        submit: Event;
-        click: MouseEvent;
-        keydown: KeyboardEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        focus: FocusEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type FormProps = typeof __propDef.props & svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]>;
-export declare type FormEvents = typeof __propDef.events;
-export declare type FormSlots = typeof __propDef.slots;
-export default class Form extends SvelteComponentTyped<FormProps, FormEvents, FormSlots> {
-}
-export {};

package/components/Form/Input.svelte

@@ -1,67 +0,0 @@
-{#if type === 'textarea'}
-  <textarea {...attr}
-            bind:value
-            class:no-resize={noResize}
-            on:input={onInput}
-            on:focus
-            on:blur
-            on:change></textarea>
-{:else if label}
-  <label>
-    {label}
-    <input {...attr}
-           bind:value
-           class:border-danger={!isValid && value}
-           class:border-success={isValid && value && valid}
-           on:input={onInput}
-           on:focus
-           on:blur
-           on:change />
-  </label>
-{:else}
-  <input {...attr}
-         bind:value
-         class:border-danger={!isValid && value}
-         class:border-success={isValid && value && valid}
-         on:input={onInput}
-         on:focus
-         on:blur
-         on:change />
-{/if}
-
-<script >var _a;
-import { createEventDispatcher } from 'svelte';
-import { computeClasses, getDomAttributes } from '../../utils';
-;
-;
-export let label = '';
-export let value = '';
-export let block = false;
-export let type = 'text';
-export let valid = null;
-export let noResize = false;
-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']
-    });
-}
-let classes;
-$: classes = `${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} ${computeClasses('input', { block })}`;
-</script>
-
-<style>
-label {
-  width: 100%;
-}
-</style>

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

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { InputType } from './';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        value?: string;
-        block?: boolean;
-        type?: InputType;
-        valid?: (val: string) => boolean;
-        noResize?: boolean;
-    };
-    events: {
-        focus: FocusEvent;
-        blur: FocusEvent;
-        change: Event;
-        input: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type InputProps = typeof __propDef.props;
-export declare type InputEvents = typeof __propDef.events;
-export declare type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
-}
-export {};

package/components/Form/NumberInput/DecrementButton.svelte

@@ -1,9 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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

@@ -1,129 +0,0 @@
-{#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

@@ -1,36 +0,0 @@
-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/Radio.svelte

@@ -1,26 +0,0 @@
-<label class="paper-radio">
-  <input type="radio"
-         {value}
-         {...$$restProps}
-         bind:group
-         on:focus
-         on:blur
-         on:change />
-  <span>
-    {#if $$slots.default}
-      <slot />
-    {:else}
-      {label}
-    {/if}
-  </span>
-</label>
-
-<script >export let label = '';
-export let value = '';
-export let group = '';
-</script>
-
-<style >input[disabled] + span::before, input[disabled] ~ span {
-  opacity: 0.5;
-  cursor: not-allowed;
-}</style>

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

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        value?: string;
-        group?: string;
-    };
-    events: {
-        focus: FocusEvent;
-        blur: FocusEvent;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type RadioProps = typeof __propDef.props;
-export declare type RadioEvents = typeof __propDef.events;
-export declare type RadioSlots = typeof __propDef.slots;
-export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
-}
-export {};

package/components/Form/Select.svelte

@@ -1,40 +0,0 @@
-{#if label}
-  <label>
-    {label}
-    <select bind:this={selectElement}
-            bind:value
-            {...$$restProps}
-            on:change={onChange}
-            on:blur
-            on:focus>
-      <slot />
-    </select>
-  </label>
-{:else}
-  <select bind:this={selectElement}
-          bind:value
-          {...$$restProps}
-          on:change={onChange}
-          on:blur
-          on:focus>
-    <slot />
-  </select>
-{/if}
-
-<script >import { createEventDispatcher } from 'svelte';
-export let label = '';
-export let value = '';
-let selectElement;
-const dispatch = createEventDispatcher();
-function onChange({ target }) {
-    dispatch('change', target.value);
-}
-$: if (selectElement && value !== undefined) {
-    const options = selectElement.querySelectorAll('option');
-    const opt = Array.from(options).find((opt) => {
-        return opt.value == value;
-    });
-    if (opt)
-        opt.selected = true;
-}
-</script>

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

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        value?: string;
-    };
-    events: {
-        blur: FocusEvent;
-        focus: FocusEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type SelectProps = typeof __propDef.props;
-export declare type SelectEvents = typeof __propDef.events;
-export declare type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
-}
-export {};

package/components/Form/Slider.svelte

@@ -1,124 +0,0 @@
-<label class:block
-       class:disabled
-       {...$$restProps}>
-  {#if $$slots.default}
-    <slot />
-  {:else}
-    {label}
-  {/if}
-  <input type="range"
-         bind:this={rangeEl}
-         bind:value
-         class={classes}
-         {min} {max} {step} />
-  {#if !hideValue}
-    <output>
-      {#if $$slots.output}
-        <slot name="output" />
-      {:else}
-        {outputValue}
-        {#if percentage}%{/if}
-      {/if}
-    </output>
-  {/if}
-</label>
-
-<script >import { onMount } from 'svelte';
-;
-import { computeClasses } from '../../utils';
-export let label = '';
-export let min = 0;
-export let max = 100;
-export let step = 1;
-export let block = false;
-export let hideValue = false;
-export let value = null;
-export let background = 'secondary';
-export let percentage = false;
-export let disabled = false;
-let rangeEl;
-let outputValue;
-onMount(() => {
-    outputValue = rangeEl.value;
-});
-let classes;
-$: classes = `range-${background} ${computeClasses('input', { block })}`;
-// need to react to programmatic change to `value` as well as slider variations
-$: if (value !== null) {
-    outputValue = String(value);
-}
-$: if (percentage) {
-    outputValue = String(Math.round(Number(outputValue) / Number(max) * 100));
-}
-</script>
-
-<style >label.block {
-  width: 100%;
-}
-label.disabled {
-  pointer-events: none;
-}
-
-input {
-  margin-bottom: 0.35rem;
-}
-
-input[type=range].range-primary::-webkit-slider-runnable-track {
-  background: var(--primary);
-}
-
-input[type=range].range-primary::-moz-range-track {
-  background: var(--primary);
-}
-
-input[type=range].range-primary::-ms-track {
-  background: var(--primary);
-}
-
-input[type=range].range-secondary::-webkit-slider-runnable-track {
-  background: var(--secondary);
-}
-
-input[type=range].range-secondary::-moz-range-track {
-  background: var(--secondary);
-}
-
-input[type=range].range-secondary::-ms-track {
-  background: var(--secondary);
-}
-
-input[type=range].range-success::-webkit-slider-runnable-track {
-  background: var(--success);
-}
-
-input[type=range].range-success::-moz-range-track {
-  background: var(--success);
-}
-
-input[type=range].range-success::-ms-track {
-  background: var(--success);
-}
-
-input[type=range].range-warning::-webkit-slider-runnable-track {
-  background: var(--warning);
-}
-
-input[type=range].range-warning::-moz-range-track {
-  background: var(--warning);
-}
-
-input[type=range].range-warning::-ms-track {
-  background: var(--warning);
-}
-
-input[type=range].range-danger::-webkit-slider-runnable-track {
-  background: var(--danger);
-}
-
-input[type=range].range-danger::-moz-range-track {
-  background: var(--danger);
-}
-
-input[type=range].range-danger::-ms-track {
-  background: var(--danger);
-}</style>

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

@@ -1,30 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperType } from '../../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        min?: number | string;
-        max?: number | string;
-        step?: number | string;
-        block?: boolean;
-        hideValue?: boolean;
-        value?: number | string;
-        background?: PaperType;
-        percentage?: boolean;
-        disabled?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        output: {};
-    };
-};
-export declare type SliderProps = typeof __propDef.props;
-export declare type SliderEvents = typeof __propDef.events;
-export declare type SliderSlots = typeof __propDef.slots;
-export default class Slider extends SvelteComponentTyped<SliderProps, SliderEvents, SliderSlots> {
-}
-export {};

package/components/Form/Switch.svelte

@@ -1,71 +0,0 @@
-{#if tile}
-  <label {...$$restProps}
-         class="{$$restProps.class ?? ''} paper-switch-tile"
-         class:disabled>
-    <input bind:checked
-           type="checkbox"
-           {disabled}
-           on:change={onChange} />
-    <div class="paper-switch-tile-card border">
-      <div class={`paper-switch-tile-card-front border
-                   ${bgClass(tile.off.background)}`}>
-        {tile.off.label}
-      </div>
-      <div class={`paper-switch-tile-card-back border
-                   ${bgClass(tile.on.background)}`}>
-        {tile.on.label}
-      </div>
-    </div>
-  </label>
-{:else}
-  <label class={prefix}>
-    <input id={domId}
-           bind:checked
-           type="checkbox"
-           {disabled}
-           on:change={onChange} />
-    <span class="paper-switch-slider"
-          class:round></span>
-  </label>
-  {#if $$slots.default}
-    <label class={`${prefix}-label`}
-           for={domId}>
-      <slot />
-    </label>
-  {/if}
-{/if}
-
-<script  context="module">let count = 0;
-</script>
-
-<script >import { onMount, createEventDispatcher } from "svelte";
-;
-export let checked = false;
-export let disabled = false;
-export let round = false;
-export let inline = false;
-export let tile = null;
-const dispatch = createEventDispatcher();
-let id;
-onMount(() => {
-    id = count++;
-});
-let domId;
-$: domId = `paper-switch-input-${id}`;
-let prefix;
-$: prefix = 'paper-switch' + (inline ? '-2' : '');
-function onChange() {
-    dispatch('change', checked);
-}
-function bgClass(color) {
-    if (!color)
-        return;
-    return `background-${color}`;
-}
-</script>
-
-<style >input[disabled] + span,
-.paper-switch-tile.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}</style>