spaper 0.2.6 → 0.3.6

package/README.md

@@ -14,7 +14,7 @@ Browse [documentation and demo here](https://oli8.github.io/spaper/).
 Add a link to the CDN into your HTML file:  
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/papercss@1.8.2/dist/paper.min.css">
+<link rel="stylesheet" href="https://unpkg.com/papercss@1.8.3/dist/paper.min.css">
 ```
 
 Or use NPM:

package/components/Alert.svelte

@@ -8,7 +8,7 @@
   {/if}
 </div>
 
-<script lang="ts">var _a;
+<script >var _a;
 ;
 import CloseButton from './CloseButton.svelte';
 import { computeClasses } from '../utils';
@@ -21,7 +21,7 @@ function close() {
 $: classes = `${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} alert ${computeClasses('alert', { type })}`;
 </script>
 
-<style lang="scss">.alert {
+<style >.alert {
   transition: all 0.25s ease-out;
 }
 .alert.closed {

package/components/Article.svelte

@@ -31,7 +31,7 @@
   {/if}
 </article>
 
-<script lang="ts">export let title = '';
+<script >export let title = '';
 export let meta = '';
 export let textLead = '';
 export let border = false;

package/components/Badge.svelte

@@ -2,7 +2,7 @@
   <slot />
 </span>
 
-<script lang="ts">;
+<script >;
 export let type = 'primary';
 export let rounded = false;
 </script>

package/components/Breadcrumb.svelte

@@ -10,6 +10,6 @@
   {/each}
 </ul>
 
-<script lang="ts">export let border = false;
+<script >export let border = false;
 export let items = [];
 </script>

package/components/Button.svelte

@@ -16,7 +16,7 @@
   </button>
 {/if}
 
-<script lang="ts">var _a;
+<script >var _a;
 ;
 import { computeClasses, getDomAttributes } from '../utils';
 export let type = null;

package/components/Card.svelte

@@ -57,7 +57,7 @@
   {/if}
 </div>
 
-<script lang="ts">;
+<script >;
 export let title = '';
 export let subTitle = '';
 export let image = '';

package/components/CloseButton.svelte

@@ -5,10 +5,10 @@
   X
 </button>
 
-<script lang="ts">export let ariaLabel = 'close';
+<script >export let ariaLabel = 'close';
 </script>
 
-<style lang="scss">button {
+<style >button {
   float: right;
   border: 0;
   padding: 0;

package/components/Collapsible.svelte

@@ -14,10 +14,10 @@
   </div>
 </section>
 
-<script lang="ts" context="module">let count = 0;
+<script  context="module">let count = 0;
 </script>
 
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+<script >var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }

package/components/Form/Checkbox.svelte

@@ -9,7 +9,7 @@
   <span>{label}</span>
 </label>
 
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script >import { createEventDispatcher } from 'svelte';
 export let label = '';
 export let value = '';
 export let name = '';
@@ -30,7 +30,7 @@ function onChange({ target }) {
 }
 </script>
 
-<style lang="scss">input[disabled] + span::before, input[disabled] ~ span {
+<style >input[disabled] + span::before, input[disabled] ~ span {
   opacity: 0.5;
   cursor: not-allowed;
 }</style>

package/components/Form/Input.svelte

@@ -29,7 +29,7 @@
          on:change />
 {/if}
 
-<script lang="ts">var _a;
+<script >var _a;
 import { createEventDispatcher } from 'svelte';
 import { computeClasses, getDomAttributes } from '../../utils';
 ;

package/components/Form/Radio.svelte

@@ -19,7 +19,7 @@
          on:change />
 {/if}
 
-<script lang="ts">export let label = '';
+<script >export let label = '';
 export let value = '';
 export let group = '';
 </script>

package/components/Form/Select.svelte

@@ -21,7 +21,7 @@
   </select>
 {/if}
 
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script >import { createEventDispatcher } from 'svelte';
 export let label = '';
 export let value = '';
 let selectElement;

package/components/Form/Slider.svelte

@@ -24,7 +24,7 @@
   {/if}
 </label>
 
-<script lang="ts">import { onMount } from 'svelte';
+<script >import { onMount } from 'svelte';
 ;
 import { computeClasses } from '../../utils';
 export let label = '';
@@ -52,7 +52,7 @@ $: if (percentage) {
 }
 </script>
 
-<style lang="scss">label.block {
+<style >label.block {
   width: 100%;
 }
 label.disabled {

package/components/Form/Switch.svelte

@@ -3,7 +3,8 @@
          class:disabled>
     <input bind:checked
            type="checkbox"
-           {disabled} />
+           {disabled}
+           on:change={onChange} />
     <div class="paper-switch-tile-card border">
       <div class={`paper-switch-tile-card-front border
                    ${bgClass(tile.off.background)}`}>
@@ -20,7 +21,8 @@
     <input id={domId}
            bind:checked
            type="checkbox"
-           {disabled} />
+           {disabled}
+           on:change={onChange} />
     <span class="paper-switch-slider"
           class:round></span>
   </label>
@@ -32,16 +34,17 @@
   {/if}
 {/if}
 
-<script lang="ts" context="module">let count = 0;
+<script  context="module">let count = 0;
 </script>
 
-<script lang="ts">import { onMount } from "svelte";
+<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++;
@@ -50,6 +53,9 @@ 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;
@@ -57,7 +63,7 @@ function bgClass(color) {
 }
 </script>
 
-<style lang="scss">input[disabled] + span,
+<style >input[disabled] + span,
 .paper-switch-tile.disabled {
   opacity: 0.5;
   cursor: not-allowed;

package/components/Modal/Modal.svelte

@@ -23,7 +23,7 @@
   </div>
 </div>
 
-<script lang="ts">import Button from '../Button.svelte';
+<script >import Button from '../Button.svelte';
 import CloseButton from '../CloseButton.svelte';
 export let active = false;
 export let title = '';
@@ -38,7 +38,7 @@ function handleKeydown({ key }) {
 }
 </script>
 
-<style lang="scss">.modal.active {
+<style >.modal.active {
   opacity: 1;
   visibility: visible;
 }

package/components/Navbar.svelte

@@ -14,7 +14,7 @@
   </div>
 </nav>
 
-<script lang="ts">export let border = true;
+<script >export let border = true;
 export let fixed = false;
 export let split = true;
 let open = false;
@@ -23,7 +23,7 @@ function collapse() {
 }
 </script>
 
-<style lang="scss">/* Papercss removes border of buttons in .collapsible */
+<style >/* Papercss removes border of buttons in .collapsible */
 .collapsible > button {
   border: 2px solid var(--primary);
 }

package/components/Pagination/Arrow.svelte

@@ -7,7 +7,7 @@
   {/if}
 </svg>
 
-<script lang="ts">;
+<script >;
 ;
 import arrowDimension from './arrow-dimension';
 export let size;

package/components/Pagination/NavigationButton.svelte

@@ -10,7 +10,7 @@
   {/if}
 </Button>
 
-<script lang="ts">import Button from '../Button.svelte';
+<script >import Button from '../Button.svelte';
 import Arrow from './Arrow.svelte';
 ;
 export let size;

package/components/Pagination/Pagination.svelte

@@ -51,7 +51,7 @@
   {/if}
 </section>
 
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script >import { createEventDispatcher } from 'svelte';
 import Button from '../Button.svelte';
 import Input from '../Form/Input.svelte';
 ;
@@ -105,7 +105,7 @@ function changePage(val) {
 }
 </script>
 
-<style lang="scss">ul, li {
+<style >ul, li {
   display: inline;
 }
 

package/components/Popover.svelte

@@ -5,7 +5,7 @@
   <slot />
 </div>
 
-<script lang="ts">;
+<script >;
 export let label = '';
 export let position = 'top';
 export let inline = true;
@@ -17,7 +17,7 @@ function bgClass(color) {
 }
 </script>
 
-<style lang="scss">.inline {
+<style >.inline {
   display: inline;
 }
 

package/components/Progress.svelte

@@ -10,7 +10,7 @@
   </div>
 </div>
 
-<script lang="ts">;
+<script >;
 export let value = 50;
 export let type = 'primary';
 export let showValue = false;

package/components/Table.svelte

@@ -41,8 +41,7 @@
   </tbody>
 </table>
 
-<script lang="ts">import pick from 'lodash.pick';
-let tmpCol;
+<script >let tmpCol;
 export let columns = [];
 export let data = [];
 export let striped = false;
@@ -63,7 +62,7 @@ function isColumnObj(arg) {
     return arg.field;
 }
 function getRowFiltered(row) {
-    return Object.entries(pick(row, displayedFields));
+    return Object.entries(row).filter(([key, _val]) => displayedFields.includes(key));
 }
 $: if (!columns.length) {
     columns = Object.keys(data[0] || {});

package/components/Tabs/Tab.svelte

@@ -10,7 +10,7 @@
   <slot />
 </div>
 
-<script lang="ts">import { onMount, getContext } from 'svelte';
+<script >import { onMount, getContext } from 'svelte';
 ;
 export let label;
 const key = {};

package/components/Tabs/Tabs.svelte

@@ -15,7 +15,7 @@
   <slot />
 </div>
 
-<script lang="ts">import { onMount, setContext, createEventDispatcher } from 'svelte';
+<script >import { onMount, setContext, createEventDispatcher } from 'svelte';
 import { writable } from 'svelte/store';
 ;
 ;
@@ -52,7 +52,7 @@ function updateTabsVisility() {
 $: activeTab && updateTabsVisility();
 </script>
 
-<style lang="scss">.tabs-label-header {
+<style >.tabs-label-header {
   cursor: pointer;
   color: var(--primary-light);
   display: inline-block;

package/components/Toast/Toast.svelte

@@ -14,7 +14,7 @@
   </div>
 {/if}
 
-<script lang="ts">import { onMount } from 'svelte';
+<script >import { onMount } from 'svelte';
 import { fly, fade } from 'svelte/transition';
 ;
 ;

package/components/Toast/ToastContainer.svelte

@@ -1,14 +1,14 @@
 <div class="{containerClass} {position}">
 </div>
 
-<script lang="ts" context="module">export const containerClass = 'paper-toast-container';
+<script  context="module">export const containerClass = 'paper-toast-container';
 </script>
 
-<script lang="ts">;
+<script >;
 export let position = 'top-right';
 </script>
 
-<style lang="scss">:global(.paper-toast-container:is(.top, .bottom) > div) {
+<style >:global(.paper-toast-container:is(.top, .bottom) > div) {
   align-self: center;
 }
 

package/components/Toast/index.js

@@ -32,6 +32,6 @@ export const warn = warning;
 export const danger = openType('danger');
 export const error = danger;
 Object.assign(Toast, {
-    open, info, success, warning, warn, danger
+    open, info, success, warning, warn, error, danger
 });
 export default Toast;

package/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "0.2.6",
+  "version": "0.3.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -18,13 +18,9 @@
   },
   "homepage": "https://github.com/Oli8/spaper#readme",
   "peerDependencies": {
-    "papercss": "^1.8.2"
+    "papercss": "^1.8.3"
   },
   "type": "module",
-  "dependencies": {
-    "lodash.omit": "^4.5.0",
-    "lodash.pick": "^4.4.0"
-  },
   "exports": {
     "./package.json": "./package.json",
     "./components/Alert.svelte": "./components/Alert.svelte",
@@ -50,7 +46,7 @@
     "./components/Pagination/Arrow.svelte": "./components/Pagination/Arrow.svelte",
     "./components/Pagination/NavigationButton.svelte": "./components/Pagination/NavigationButton.svelte",
     "./components/Pagination/Pagination.svelte": "./components/Pagination/Pagination.svelte",
-    "./components/Pagination/arrow-dimension.js": "./components/Pagination/arrow-dimension.js",
+    "./components/Pagination/arrow-dimension": "./components/Pagination/arrow-dimension.js",
     "./components/Pagination": "./components/Pagination/index.js",
     "./components/Popover.svelte": "./components/Popover.svelte",
     "./components/Progress.svelte": "./components/Progress.svelte",
@@ -63,6 +59,7 @@
     "./components/Toast": "./components/Toast/index.js",
     "./components/style.scss": "./components/style.scss",
     ".": "./index.js",
-    "./utils.js": "./utils.js"
-  }
+    "./utils": "./utils.js"
+  },
+  "svelte": "./index.js"
 }

package/utils.js

@@ -1,10 +1,13 @@
-import omit from 'lodash.omit';
 const propToClass = {
     size: (pf, val) => `${pf}-${val}`,
     block: (pf, _val) => `${pf}-block`,
     type: (pf, val) => `${pf}-${val}`,
     outline: (pf, val) => `${pf}-${val}-outline`,
 };
+function omit(obj, properties) {
+    return Object.fromEntries(Object.entries(obj)
+        .filter(([key, _val]) => !properties.includes(key)));
+}
 export function computeClasses(elPrefix, props) {
     return Object.entries(props)
         .filter(([_prop, val]) => val)