spaper 0.8.6 → 0.9.6

package/README.md

@@ -63,6 +63,12 @@ Thanks to these generous people! :heart:
         <sub><b>mehdi-dalil</b></sub>
       </a>
     </td>
+    <td align="center">
+      <a href="https://github.com/t0kido">
+        <img src="https://avatars.githubusercontent.com/u/12486500?v=4" width="80px;" alt=""/><br />
+        <sub><b>t0kido</b></sub>
+      </a>
+    </td>
   </tr>
 </table>    
 

package/components/Form/Form.svelte

@@ -1,4 +1,10 @@
 <form {...$$restProps}
-      class="{$$restProps.class ?? ''} form-group">
+      class="{$$restProps.class ?? ''} form-group"
+      on:submit|preventDefault
+      on:click
+      on:keydown
+      on:mouseover
+      on:mouseenter
+      on:mouseleave>
   <slot />
 </form>

package/components/Form/Radio.svelte

@@ -6,7 +6,13 @@
          on:focus
          on:blur
          on:change />
-  <span>{label}</span>
+  <span>
+    {#if $$slots.default}
+      <slot />
+    {:else}
+      {label}
+    {/if}
+  </span>
 </label>
 
 <script >export let label = '';

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

@@ -13,7 +13,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type RadioProps = typeof __propDef.props;
 export declare type RadioEvents = typeof __propDef.events;

package/components/Skeleton.svelte

@@ -0,0 +1,55 @@
+{#if active}
+  {#each { length: count } as _}
+    {@const borderType = Math.floor(Math.random() * 6 + 1)}
+    <div {...$$restProps}
+         aria-hidden="true"
+         aria-valuetext={ariaValueText}
+         tabindex="-1"
+         role="progressbar"
+         class="border border-{borderType} margin-small"
+         class:animated
+         class:circle
+         class:inline>
+    </div>
+  {/each}
+{/if}
+
+<script >export let active = true;
+export let count = 1;
+export let animated = true;
+export let circle = false;
+export let inline = false;
+export let ariaValueText = 'Loading...';
+</script>
+
+<style >:global(.dark) div {
+  --mid-gradient: var(--primary-dark);
+}
+
+div {
+  cursor: progress;
+  border-color: transparent;
+  width: var(--width, auto);
+  min-height: 1rem;
+  height: var(--height, 100%);
+  background: var(--muted-light-10);
+  background: linear-gradient(95deg, var(--muted-light-10) 5%, var(--mid-gradient, var(--muted-light)) 20%, var(--muted-light-10) 50%);
+  background-size: 200% 100%;
+}
+div.circle {
+  border-radius: 50%;
+}
+div.inline {
+  display: inline-block;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .animated {
+    animation: loading 2s linear infinite alternate;
+  }
+}
+@keyframes loading {
+  to {
+    background-position-x: -200%;
+  }
+}</style>

package/components/Skeleton.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        active?: boolean;
+        count?: number;
+        animated?: boolean;
+        circle?: boolean;
+        inline?: boolean;
+        ariaValueText?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SkeletonProps = typeof __propDef.props;
+export declare type SkeletonEvents = typeof __propDef.events;
+export declare type SkeletonSlots = typeof __propDef.slots;
+export default class Skeleton extends SvelteComponentTyped<SkeletonProps, SkeletonEvents, SkeletonSlots> {
+}
+export {};

package/components/Table.svelte

@@ -41,7 +41,8 @@
   </tbody>
 </table>
 
-<script >let tmpCol;
+<script >;
+let tmpCol;
 export let columns = [];
 export let data = [];
 export let striped = false;

package/components/Table.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TableColumn as Column } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        columns?: Column[];
+        data?: {}[];
+        striped?: boolean;
+        hoverable?: boolean;
+        showHeader?: boolean;
+        headerCLass?: string;
+        cellCLass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TableProps = typeof __propDef.props;
+export declare type TableEvents = typeof __propDef.events;
+export declare type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/index.d.ts

@@ -16,4 +16,5 @@ import Pagination from './components/Pagination';
 import Toast from './components/Toast';
 import CloseButton from './components/CloseButton.svelte';
 import CopyButton from './components/CopyButton.svelte';
-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, };
+import Skeleton from './components/Skeleton.svelte';
+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, };

package/index.js

@@ -16,4 +16,5 @@ import Pagination from './components/Pagination';
 import Toast from './components/Toast';
 import CloseButton from './components/CloseButton.svelte';
 import CopyButton from './components/CopyButton.svelte';
-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, };
+import Skeleton from './components/Skeleton.svelte';
+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, };

package/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "0.8.6",
+  "version": "0.9.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -51,6 +51,7 @@
     "./components/Pagination": "./components/Pagination/index.js",
     "./components/Popover.svelte": "./components/Popover.svelte",
     "./components/Progress.svelte": "./components/Progress.svelte",
+    "./components/Skeleton.svelte": "./components/Skeleton.svelte",
     "./components/Table.svelte": "./components/Table.svelte",
     "./components/Tabs/Tab.svelte": "./components/Tabs/Tab.svelte",
     "./components/Tabs/Tabs.svelte": "./components/Tabs/Tabs.svelte",

package/types.d.ts

@@ -11,3 +11,12 @@ export type Attributes = Record<string, string|boolean>;
 export type PositionY = 'top' | 'bottom';
 export type PositionX = 'left' | 'right';
 export type Position = PositionX | PositionY;
+
+export interface TableColumnObj {
+  field: string;
+  label?: string;
+  content?: (text?: string) => string;
+  html?: boolean;
+}
+
+export type TableColumn = TableColumnObj | string;