spaper 0.4.6 → 0.7.6

package/README.md

@@ -51,6 +51,33 @@ npm i spaper
 
 <hr />
 
+### Sponsors
+
+Thanks to these generous people! :heart:
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/mehdi-dalil">
+        <img src="https://avatars.githubusercontent.com/u/65339771?v=4" width="80px;" alt=""/><br />
+        <sub><b>mehdi-dalil</b></sub>
+      </a>
+    </td>
+  </tr>
+</table>    
+
+
+### Donate
+
+Any donation is greatly appreciated :heart:
+
+| Source          | Link / Address                             |
+| :-------------- | :------------------------------------------|
+| Github Sponsor  | https://github.com/sponsors/Oli8           |
+| PayPal          | https://paypal.me/OliCrt                   |
+| Bitcoin         | 1Ez3Ts2WShUcbeGCjhZapdxVDK77DbYjdU         |
+| Ethereum        | 0x6cd3d316a6ee6d210894981e1fcc83a00a27ede2 |
+
 #### Components
 
 - Alert

package/components/Button.svelte

@@ -9,6 +9,7 @@
   </a>
 {:else}
   <button {...attr}
+          type={nativeType}
           class:disabled
           disabled={disabled}
           on:click>
@@ -24,6 +25,7 @@ export let size = 'default';
 export let block = false;
 export let disabled = false;
 export let outline = null;
+export let nativeType = null;
 export let isLink = false;
 export let href = null;
 export let external = false;

package/components/Button.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         block?: boolean;
         disabled?: boolean;
         outline?: PaperType;
+        nativeType?: 'submit' | 'reset' | 'button';
         isLink?: boolean;
         href?: string;
         external?: boolean;

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/Slider.svelte

@@ -10,8 +10,7 @@
          bind:this={rangeEl}
          bind:value
          class={classes}
-         {min} {max} {step}
-         on:input={updateOutput} />
+         {min} {max} {step} />
   {#if !hideValue}
     <output>
       {#if $$slots.output}
@@ -42,11 +41,12 @@ let outputValue;
 onMount(() => {
     outputValue = rangeEl.value;
 });
-function updateOutput({ target }) {
-    outputValue = target.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));
 }

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,16 @@
   </div>
 </div>
 
-<script >import Button from '../Button.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() {
     active = false;
 }
@@ -38,6 +48,9 @@ function handleKeydown({ key }) {
     if (key === 'Escape')
         close();
 }
+$: if (!active) {
+    dispatch('close');
+}
 </script>
 
 <style >.modal.active {

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

@@ -1,13 +1,18 @@
 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: {
+        close: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -1,7 +1,11 @@
 <div {...$$restProps}
      class="{$$restProps.class ?? ''} content margin"
      class:content--active={active}
-     aria-hidden={!active}>
+     id={controlLabel}
+     aria-hidden={!active}
+     aria-labelledby={controlLabel}
+     role="tabpanel"
+     tabindex={active ? 0 : -1}>
   {#if $$slots.header}
     <div bind:this={header}
          style="display: none">
@@ -13,6 +17,7 @@
 
 <script >import { onMount, getContext } from 'svelte';
 ;
+import { genControlLabel } from './utils';
 export let label;
 const key = {};
 let active = false;
@@ -33,6 +38,7 @@ onMount(() => {
         }
     ]);
 });
+$: controlLabel = genControlLabel(label);
 </script>
 
 <style>

package/components/Tabs/Tabs.svelte

@@ -2,8 +2,13 @@
      class={`row flex-${placement} tabs ${$$restProps.class ?? ''}`}
      style={`text-align: ${contentAlign}`}>
   {#each $tabs as { label, header }, index}
+    {@const selected = index == activeTab}
     <div class="tabs-label-header"
-         class:tabs-label-header--active={index == activeTab}
+         class:tabs-label-header--active={selected}
+         aria-selected={selected}
+         aria-controls={genControlLabel(label)}
+         role="tab"
+         tabindex={selected ? 0 : -1}
          on:click={showContent.bind(null, index)}>
       {#if header}
         {@html header.innerHTML}
@@ -20,6 +25,7 @@
 import { writable } from 'svelte/store';
 ;
 ;
+import { genControlLabel } from './utils';
 export let activeTab = 0;
 export let placement = 'spaces';
 export let contentAlign = 'left';

package/components/Tabs/index.d.ts

@@ -1,15 +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 { Tabs, Tab };
+export { default as Tabs } from './Tabs.svelte';
+export { default as Tab } from './Tab.svelte';

package/components/Tabs/index.js

@@ -1,3 +1,2 @@
-import Tabs from './Tabs.svelte';
-import Tab from './Tab.svelte';
-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/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "0.4.6",
+  "version": "0.7.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -55,6 +55,7 @@
     "./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",
@@ -63,4 +64,4 @@
     "./utils": "./utils.js"
   },
   "svelte": "./index.js"
-}
+}

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 {};