spaper 0.6.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/Button.svelte

@@ -1,9 +1,9 @@
 {#if isLink || href}
-  <a {...attr}
-     class:disabled
+  <a class:disabled
      role="button"
      href={href ?? 'javascript:void(0);'}
-     target={external ? '_blank' : '_self'}
+     target={external ? '_blank' : null}
+     {...attr}
      on:click>
     <slot />
   </a>

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/Form.svelte.d.ts

@@ -1,11 +1,4 @@
-/** @typedef {typeof __propDef.props}  FormProps */
-/** @typedef {typeof __propDef.events}  FormEvents */
-/** @typedef {typeof __propDef.slots}  FormSlots */
-export default class Form {
-}
-export type FormProps = typeof __propDef.props;
-export type FormEvents = typeof __propDef.events;
-export type FormSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -17,4 +10,9 @@ declare const __propDef: {
         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/Radio.svelte

@@ -1,15 +1,4 @@
-{#if label}
-  <label>
-    {label}
-    <input type="radio"
-           {value}
-           {...$$restProps}
-           bind:group
-           on:focus
-           on:blur
-           on:change />
-  </label>
-{:else}
+<label class="paper-radio">
   <input type="radio"
          {value}
          {...$$restProps}
@@ -17,9 +6,21 @@
          on:focus
          on:blur
          on:change />
-{/if}
+  <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

@@ -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/Modal/Modal.svelte

@@ -1,9 +1,9 @@
 <svelte:window on:keydown={handleKeydown} />
 
-<div {...$$restProps}
-     class="{$$restProps.class ?? ''} modal"
+<div class="modal"
      class:active>
-  <div class="modal-body">
+  <div {...$$restProps}
+       class="{$$restProps.class ?? ''} modal-body">
     <CloseButton on:click={close} />
     {#if title}
       <h4 class="modal-title">{title}</h4>
@@ -12,7 +12,13 @@
       <h5 class="modal-subtitle">{subTitle}</h5>
     {/if}
     <p class="modal-text">
-      <slot />
+      {#if content}
+        {content}
+      {:else if component}
+        <svelte:component this={component} />
+      {:else}
+        <slot />
+      {/if}
     </p>
     <footer>
       {#if $$slots.footer}
@@ -25,12 +31,14 @@
   </div>
 </div>
 
-<script >import { createEventDispatcher } from 'svelte';
+<script >import { createEventDispatcher, SvelteComponent } from 'svelte';
 import Button from '../Button.svelte';
 import CloseButton from '../CloseButton.svelte';
 export let active = false;
 export let title = '';
 export let subTitle = '';
+export let content = '';
+export let component = null;
 export let closeBtnText = 'Close';
 const dispatch = createEventDispatcher();
 function close() {
@@ -40,7 +48,7 @@ function handleKeydown({ key }) {
     if (key === 'Escape')
         close();
 }
-$: if (active === false) {
+$: if (!active) {
     dispatch('close');
 }
 </script>

package/components/Modal/Modal.svelte.d.ts

@@ -1,10 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
         active?: boolean;
         title?: string;
         subTitle?: string;
+        content?: string;
+        component?: typeof SvelteComponent;
         closeBtnText?: string;
     };
     events: {

package/components/Modal/index.d.ts

@@ -1,2 +1,13 @@
+import type { SvelteComponent } from 'svelte';
+import type { ComponentProps } from '../../utils';
 import Modal from './Modal.svelte';
-export default Modal;
+declare type ModalProps = ComponentProps<Modal>;
+declare type ProgrammaticModalProps = Omit<ModalProps, 'active'>;
+interface ProgrammaticModal {
+    open?: (props: ProgrammaticModalProps) => ProgrammaticModalInstance;
+    close?: () => void;
+}
+declare type ProgrammaticModalComponent = ProgrammaticModal & typeof SvelteComponent;
+declare type ProgrammaticModalInstance = ProgrammaticModal & SvelteComponent;
+declare const _default: ProgrammaticModalComponent;
+export default _default;

package/components/Modal/index.js

@@ -1,11 +1,16 @@
 import Modal from './Modal.svelte';
+const TRANSITION_TIME = 235;
 function open(props) {
     const modal = new Modal({
         target: document.body,
-        props: { active: true, ...props },
-        intro: true
+        props,
     });
-    modal.close = modal.$destroy;
+    // Preserve transition
+    setTimeout(modal.$set.bind(modal, { active: true }), 1);
+    modal.close = () => {
+        modal.$set({ active: false });
+        setTimeout(modal.$destroy, TRANSITION_TIME);
+    };
     return modal;
 }
 Modal.open = open;

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/components/Tabs/Tab.svelte

@@ -17,7 +17,7 @@
 
 <script >import { onMount, getContext } from 'svelte';
 ;
-import { genControlLabel } from './index';
+import { genControlLabel } from './utils';
 export let label;
 const key = {};
 let active = false;

package/components/Tabs/Tabs.svelte

@@ -25,7 +25,7 @@
 import { writable } from 'svelte/store';
 ;
 ;
-import { genControlLabel } from './index';
+import { genControlLabel } from './utils';
 export let activeTab = 0;
 export let placement = 'spaces';
 export let contentAlign = 'left';

package/components/Tabs/index.d.ts

@@ -1,16 +1,2 @@
-import type { Writable } from 'svelte/store';
-import Tabs from './Tabs.svelte';
-import Tab from './Tab.svelte';
-export interface iTab {
-    key: Object;
-    label: string;
-    header?: HTMLElement;
-    show: () => void;
-    hide: () => void;
-}
-export interface TabDataType {
-    activeTab: number | string;
-    tabs: Writable<iTab[]>;
-}
-export declare function genControlLabel(label: string): string;
-export { Tabs, Tab };
+export { default as Tabs } from './Tabs.svelte';
+export { default as Tab } from './Tab.svelte';

package/components/Tabs/index.js

@@ -1,6 +1,2 @@
-import Tabs from './Tabs.svelte';
-import Tab from './Tab.svelte';
-export function genControlLabel(label) {
-    return `paper-tab-${label}`;
-}
-export { Tabs, Tab };
+export { default as Tabs } from './Tabs.svelte';
+export { default as Tab } from './Tab.svelte';

package/components/Tabs/utils.d.ts

@@ -0,0 +1,14 @@
+import type { Writable } from 'svelte/store';
+interface iTab {
+    key: Object;
+    label: string;
+    header?: HTMLElement;
+    show: () => void;
+    hide: () => void;
+}
+export interface TabDataType {
+    activeTab: number | string;
+    tabs: Writable<iTab[]>;
+}
+export declare function genControlLabel(label: string): string;
+export {};

package/components/Tabs/utils.js

@@ -0,0 +1,3 @@
+export function genControlLabel(label) {
+    return `paper-tab-${label}`;
+}

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.6.6",
+  "version": "0.9.6",
   "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.8.3"
   },
   "type": "module",
   "exports": {
@@ -51,10 +51,12 @@
     "./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",
     "./components/Tabs": "./components/Tabs/index.js",
+    "./components/Tabs/utils": "./components/Tabs/utils.js",
     "./components/Toast/Toast.svelte": "./components/Toast/Toast.svelte",
     "./components/Toast/ToastContainer.svelte": "./components/Toast/ToastContainer.svelte",
     "./components/Toast": "./components/Toast/index.js",

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;

package/utils.d.ts

@@ -6,4 +6,7 @@ interface getDomAttributesParams {
 }
 export declare function computeClasses(elPrefix: string, props: Record<string, any>): string;
 export declare function getDomAttributes({ props, classes, toOmit }: getDomAttributesParams): Attributes;
+export declare type ComponentProps<T extends {
+    $set: (...args: any) => any;
+}> = NonNullable<Parameters<T['$set']>[0]>;
 export {};