spaper 1.3.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,74 +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 = 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) {
-    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 })}`;
-// $: 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>
-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 | number | null;
-        block?: boolean;
-        type?: InputType;
-        valid?: (val: string | number) => 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/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>

package/components/Form/index.d.ts

@@ -1,9 +0,0 @@
-import Input from './Input.svelte';
-import Select from './Select.svelte';
-import Radio from './Radio.svelte';
-import Checkbox from './Checkbox.svelte';
-import Switch from './Switch.svelte';
-import Slider from './Slider.svelte';
-import Form from './Form.svelte';
-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, };

package/components/Form/style.scss

@@ -1,4 +0,0 @@
-%disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}

package/components/Hero.svelte

@@ -1,78 +0,0 @@
-<section {...$$restProps}
-         class={classes}
-         class:border>
-  <div class="hero-body">
-    {#if $$slots.title}
-      <slot name="title" />
-    {:else}
-      <h2 class="hero-title">{title}</h2>
-    {/if}
-
-    {#if $$slots.textLead || textLead}
-      <p class="hero-text-lead">
-        {#if $$slots.textLead}
-          <slot name="textLead" />
-        {:else}
-          {textLead}
-        {/if}
-      </p>
-    {/if}
-
-    <div><slot /></div>
-  </div>
-</section>
-
-<script >var _a;
-;
-import { computeClasses } from '../utils';
-export let type = 'primary';
-export let size = 'default';
-export let border = true;
-export let title = '';
-export let textLead = '';
-$: classes = `hero
-  ${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''}
-  ${computeClasses('hero', { size, type })}`;
-</script>
-
-<style >.hero {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 1.5rem 3rem;
-  margin-bottom: 20px;
-}
-.hero-title {
-  margin-block: 1rem 0.5rem;
-}
-.hero-text-lead {
-  font-size: 1.25rem;
-}
-.hero-small {
-  padding: 0 1.5rem;
-}
-.hero-large {
-  padding: 5rem;
-}
-.hero-fullheight {
-  min-height: 100vh;
-}
-.hero-primary {
-  background-color: var(--primary-light);
-}
-.hero-secondary {
-  background-color: var(--secondary-light);
-}
-.hero-success {
-  background-color: var(--success-light);
-}
-.hero-warning {
-  background-color: var(--warning-light);
-}
-.hero-danger {
-  background-color: var(--danger-light);
-}
-
-:global(.dark .hero-primary) {
-  color: var(--primary-text);
-}</style>

package/components/Hero.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperSize, PaperType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: PaperType;
-        size?: PaperSize | "fullheight";
-        border?: boolean;
-        title?: string;
-        textLead?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        textLead: {};
-        default: {};
-    };
-};
-export declare type HeroProps = typeof __propDef.props;
-export declare type HeroEvents = typeof __propDef.events;
-export declare type HeroSlots = typeof __propDef.slots;
-export default class Hero extends SvelteComponentTyped<HeroProps, HeroEvents, HeroSlots> {
-}
-export {};

package/components/Layout/Col.svelte

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

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

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