@txstate-mws/svelte-components 0.0.67 → 1.0.3

package/components/CollapsingTable.svelte.d.ts

@@ -0,0 +1,59 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CollapsingTableColumn } from '../types';
+import DefaultPopupMenu from './PopupMenu.svelte';
+declare const __propDef: {
+    props: {
+        tableClass?: string;
+        bodyRowClass?: string;
+        bodyCellClass?: string;
+        headerRowClass?: string;
+        headerCellClass?: string;
+        menuContainerClass?: string;
+        menuClass?: string;
+        menuItemClass?: string;
+        menuItemHilitedClass?: string;
+        items: any[];
+        config?: CollapsingTableColumn[] | undefined;
+        defaultCellWidth?: number;
+        PopupMenu?: typeof DefaultPopupMenu;
+        slots?: Record<string, boolean>;
+        stickyheader?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        headercell: {
+            column: CollapsingTableColumn & {
+                widthPercent?: number;
+            };
+            key: string;
+            title: string;
+            item: any;
+            value: any;
+        };
+        dropicon: {
+            column: CollapsingTableColumn & {
+                widthPercent?: number;
+            };
+            item: any;
+            value: any;
+        };
+        default: {
+            key: string;
+            value: any;
+            item: any;
+        };
+        footer: {
+            item: any;
+            key: any;
+            value: any;
+        };
+    };
+};
+export declare type CollapsingTableProps = typeof __propDef.props;
+export declare type CollapsingTableEvents = typeof __propDef.events;
+export declare type CollapsingTableSlots = typeof __propDef.slots;
+export default class CollapsingTable extends SvelteComponentTyped<CollapsingTableProps, CollapsingTableEvents, CollapsingTableSlots> {
+}
+export {};

package/{dist/ts/components → components}/ConditionalWrapper.svelte

@@ -1,10 +1,9 @@
-<script lang="ts">
-  export let condition: boolean|undefined = undefined
-  export let component: Function|undefined = undefined
-  export let a = false
-  export let span = false
-  export let element: HTMLElement|undefined = undefined
-  $: passthrough = (({ condition, component, a, span, element, ...passthrough }) => passthrough)($$props)
+<script >export let condition;
+export let component = undefined;
+export let a = false;
+export let span = false;
+export let element = undefined;
+$: passthrough = (({ condition, component, a, span, element, ...passthrough }) => passthrough)($$props);
 </script>
 
 {#if condition || (typeof condition === 'undefined' && component)}

package/components/ConditionalWrapper.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        condition: boolean | undefined;
+        component?: Function | undefined;
+        a?: boolean;
+        span?: boolean;
+        element?: HTMLElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ConditionalWrapperProps = typeof __propDef.props;
+export declare type ConditionalWrapperEvents = typeof __propDef.events;
+export declare type ConditionalWrapperSlots = typeof __propDef.slots;
+export default class ConditionalWrapper extends SvelteComponentTyped<ConditionalWrapperProps, ConditionalWrapperEvents, ConditionalWrapperSlots> {
+}
+export {};

package/{dist/components → components}/FocusLock.svelte

@@ -1,10 +1,10 @@
-<script context="module">const FocusLockStack = [];
+<script context="module" >const FocusLockStack = [];
 </script>
 
-<script>export let returnfocusto = undefined;
+<script >export let returnfocusto = undefined;
 export let initialfocus = undefined;
 export let hidefocus = true;
-export let hidefocuslabel = "focus is above modal dialog, start tabbing";
+export let hidefocuslabel = 'focus is above modal dialog, start tabbing';
 export let escapable = true;
 let className = '';
 export { className as class };
@@ -17,6 +17,7 @@ const dispatch = createEventDispatcher();
 let lockelement;
 let abovelockelement;
 let active = true;
+let listenforescape = false;
 if (initialfocus)
     hidefocus = false;
 onMount(async () => {
@@ -30,7 +31,9 @@ onMount(async () => {
     if (typeof returnfocusto === 'undefined') {
         returnfocusto = document.querySelector(':focus');
     }
-    await sleep(1);
+    await sleep(1); // sapper resets focus on page load, so we'll wait a millisecond in case our modal is on screen at load
+    if (!lockelement)
+        return; // in case we already unmounted
     if (initialfocus) {
         const focusEl = lockelement.querySelector(initialfocus);
         if (focusEl instanceof HTMLElement)
@@ -39,20 +42,13 @@ onMount(async () => {
     else {
         setInitialFocus();
     }
+    setTimeout(() => { listenforescape = true; }, 0);
 });
 onDestroy(async () => {
     const wasactive = active;
-    let focuswasinside;
-    try {
-        focuswasinside = lockelement.matches(':focus-within');
-    }
-    catch (e) {
-        // browser doesn't support :focus-within
-        focuswasinside = true;
-    }
     active = false;
     await tick();
-    if (returnfocusto && wasactive && focuswasinside) {
+    if (returnfocusto && wasactive) {
         returnfocusto.focus();
     }
     FocusLockStack.pop();
@@ -61,37 +57,43 @@ onDestroy(async () => {
         prevFocusLock.unpause();
 });
 const setInitialFocus = () => {
-    const firstfocus = tabbable(lockelement)[0];
+    const firstfocus = lockelement ? tabbable(lockelement)[0] : undefined;
     if (firstfocus && firstfocus.focus) {
         firstfocus.focus();
     }
 };
 const setLastFocus = () => {
-    const lastfocus = tabbable(lockelement).slice(-1)[0];
+    const lastfocus = lockelement ? tabbable(lockelement).slice(-1)[0] : undefined;
     if (lastfocus && lastfocus.focus) {
         lastfocus.focus();
     }
 };
 const keydown = (e) => {
-    if (active && e.key === "Escape" && escapable) {
+    if (active && e.key === 'Escape' && escapable) {
         e.preventDefault();
         dispatch('escape');
     }
 };
 const focusin = (e) => {
-    if (active && e.target instanceof HTMLElement && !(lockelement === null || lockelement === void 0 ? void 0 : lockelement.contains(e.target))) {
+    if (active && e.target instanceof HTMLElement && !lockelement?.contains(e.target)) {
         if (e.target === abovelockelement)
             setLastFocus();
         else
             setInitialFocus();
     }
 };
+const windowclick = (_) => {
+    if (listenforescape && active) {
+        returnfocusto = undefined;
+        dispatch('escape');
+    }
+};
 </script>
-
+<svelte:window on:click={windowclick} />
 <div class={className} role="alertdialog" aria-modal="true" on:click|stopPropagation on:keydown|stopPropagation={keydown} on:focusin={focusin}>
   <div bind:this={abovelockelement} tabindex="0"></div>
   <div bind:this={lockelement} on:keydown={keydown}>
-    {#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() =>{ hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
+    {#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() => { hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
     <slot></slot>
   </div>
   <div tabindex="0"></div>

package/components/FocusLock.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        returnfocusto?: HTMLElement | null | undefined;
+        initialfocus?: string | undefined;
+        hidefocus?: boolean;
+        hidefocuslabel?: string;
+        escapable?: boolean;
+        class?: string;
+    };
+    events: {
+        click: MouseEvent;
+        escape: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FocusLockProps = typeof __propDef.props;
+export declare type FocusLockEvents = typeof __propDef.events;
+export declare type FocusLockSlots = typeof __propDef.slots;
+export default class FocusLock extends SvelteComponentTyped<FocusLockProps, FocusLockEvents, FocusLockSlots> {
+}
+export {};

package/components/Modal.svelte

@@ -0,0 +1,53 @@
+<script >export let escapable = true;
+export let hidefocus = true;
+export let hidefocuslabel = undefined;
+export let returnfocusto = undefined;
+export let initialfocus = undefined;
+export let containerClass = '';
+export let opaque = false;
+export let usePortal = undefined;
+import { createEventDispatcher, onMount } from 'svelte';
+import FocusLock from './FocusLock.svelte';
+import { portal } from '../actions';
+const dispatch = createEventDispatcher();
+const endmodal = () => {
+    dispatch('escape');
+};
+onMount(() => {
+    document.body.style.marginRight = (window.innerWidth - document.body.clientWidth) + 'px';
+    document.body.style.overflow = 'hidden';
+    return () => {
+        document.body.style.overflow = '';
+        document.body.style.marginRight = '';
+    };
+});
+</script>
+
+<div use:portal={usePortal} class="modal-backdrop" class:opaque on:click|stopPropagation|preventDefault={() => escapable && endmodal()}>
+  <FocusLock class="modal-container {containerClass}" {escapable} on:escape {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus}>
+    <slot></slot>
+  </FocusLock>
+</div>
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--modal-bg, rgba(0, 0, 0, 0.7));
+    z-index: 2147483000;
+    display: flex;
+    justify-content: center;
+    align-items: center
+  }
+  .modal-backdrop.opaque {
+    background-color: var(--modal-bg-opaque, #4c4c4c);
+  }
+  .modal-backdrop :global(.modal-container) {
+    max-width: 100vw;
+    max-height: 100vh;
+    overflow: auto;
+  }
+</style>

package/components/Modal.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        escapable?: boolean;
+        hidefocus?: boolean;
+        hidefocuslabel?: string | undefined;
+        returnfocusto?: HTMLElement | undefined;
+        initialfocus?: string | undefined;
+        containerClass?: string;
+        opaque?: boolean;
+        usePortal?: HTMLElement | undefined;
+    };
+    events: {
+        escape: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ModalProps = typeof __propDef.props;
+export declare type ModalEvents = typeof __propDef.events;
+export declare type ModalSlots = typeof __propDef.slots;
+export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
+}
+export {};

package/{dist/components → components}/PopupMenu.svelte

@@ -1,7 +1,7 @@
-<script>import { glue, portal } from '../actions';
-import { createEventDispatcher, onDestroy, tick } from 'svelte';
+<script >import { createEventDispatcher, onDestroy, tick } from 'svelte';
 import { randomid } from 'txstate-utils';
-import { DeepStore } from '../lib';
+import { Store } from '@txstate-mws/svelte-store';
+import { glue, portal } from '../actions';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 const dispatch = createEventDispatcher();
 export let menushown = false;
@@ -16,27 +16,26 @@ export let align = 'auto';
 export let cover = false;
 export let showSelected = true;
 export let width = undefined;
-export let computedalign = new DeepStore({ valign: 'bottom', halign: 'left' });
+export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
 export let usePortal = undefined;
 export let emptyText = undefined;
-export let hilited = undefined;
-export let selected = undefined;
+export let value = undefined;
+let hilited = undefined;
 let menuelement;
-let itemelements = [];
+const itemelements = [];
 const menuid = randomid();
 let firstactive = 0;
 let lastactive = items.length - 1;
 function hiddenItem(item) {
-    return !!item && !showSelected && item.value === (selected === null || selected === void 0 ? void 0 : selected.value);
+    return !!item && !showSelected && item.value === value;
 }
 async function reactToItems(..._) {
-    var _a;
     firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm));
     lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1;
-    if (hilited && ((_a = items[hilited]) === null || _a === void 0 ? void 0 : _a.disabled))
+    if (hilited && items[hilited]?.disabled)
         hilited = firstactive;
 }
-$: reactToItems(items, selected);
+$: reactToItems(items, value);
 async function reactToMenuShown(_) {
     if (!buttonelement) {
         hilited = undefined;
@@ -56,22 +55,20 @@ async function reactToMenuShown(_) {
 }
 $: reactToMenuShown(menushown);
 function move(idx) {
-    var _a;
     if (!menushown)
         return;
-    if ((_a = items[idx]) === null || _a === void 0 ? void 0 : _a.disabled)
+    if (items[idx]?.disabled)
         return;
     hilited = Math.max(firstactive, Math.min(lastactive, idx));
     itemelements[hilited].scrollIntoView({ block: 'center' });
     buttonelement.setAttribute('aria-activedescendant', `${menuid}-${hilited}`);
 }
 function onkeydown(e) {
-    var _a, _b;
     if (e.key === 'ArrowDown') {
         e.preventDefault();
         if (menushown) {
-            let i = (hilited !== null && hilited !== void 0 ? hilited : firstactive - 1) + 1;
-            while (((_a = items[i]) === null || _a === void 0 ? void 0 : _a.disabled) || hiddenItem(items[i]))
+            let i = (hilited ?? firstactive - 1) + 1;
+            while (items[i]?.disabled || hiddenItem(items[i]))
                 i++;
             move(i);
         }
@@ -83,8 +80,8 @@ function onkeydown(e) {
     else if (e.key === 'ArrowUp') {
         e.preventDefault();
         if (menushown) {
-            let i = (hilited !== null && hilited !== void 0 ? hilited : lastactive + 1) - 1;
-            while (((_b = items[i]) === null || _b === void 0 ? void 0 : _b.disabled) || hiddenItem(items[i]))
+            let i = (hilited ?? lastactive + 1) - 1;
+            while (items[i]?.disabled || hiddenItem(items[i]))
                 i--;
             move(i);
         }
@@ -98,8 +95,8 @@ function onkeydown(e) {
         if (menushown) {
             menushown = false;
             if (typeof hilited !== 'undefined') {
-                selected = items[hilited];
-                dispatch('change', items[hilited].value);
+                value = items[hilited]?.value;
+                dispatch('change', items[hilited]);
             }
         }
         else {
@@ -114,8 +111,8 @@ function onkeydown(e) {
             if (typeof hilited !== 'undefined') {
                 e.preventDefault();
                 menushown = false;
-                selected = items[hilited];
-                dispatch('change', items[hilited].value);
+                value = items[hilited]?.value;
+                dispatch('change', items[hilited]);
             }
             else {
                 if (buttonelement.tagName !== 'INPUT') {
@@ -144,7 +141,7 @@ function onbuttonclick(e) {
 }
 async function onblur(e) {
     // tabindex=-1 on our menu elements means e.relatedTarget will be set
-    if (!(e.relatedTarget instanceof HTMLElement && (menuelement === null || menuelement === void 0 ? void 0 : menuelement.contains(e.relatedTarget))))
+    if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget)))
         menushown = false;
 }
 function cleanup(element) {
@@ -152,6 +149,7 @@ function cleanup(element) {
         element.removeEventListener('click', onbuttonclick);
         element.removeEventListener('keydown', onkeydown);
         element.removeEventListener('blur', onblur);
+        element.removeAttribute('aria-disabled');
         element.removeAttribute('aria-haspopup');
         element.removeAttribute('aria-expanded');
         element.removeAttribute('aria-controls');
@@ -178,29 +176,29 @@ const onclick = (item) => (e) => {
     if (item.disabled)
         return;
     menushown = false;
-    selected = item;
-    dispatch('change', item.value);
+    value = item.value;
+    dispatch('change', item);
 };
-$: hasSelected = showSelected && !!items.find(itm => itm.value === (selected === null || selected === void 0 ? void 0 : selected.value));
+$: hasSelected = showSelected && items.some(itm => itm.value === value);
 </script>
 
 {#if menushown}
   <div use:portal={usePortal === true ? document.body : (usePortal || null)} use:glue={{ target: buttonelement, align, cover, store: computedalign }} class={menuContainerClass}>
     <ul bind:this={menuelement} id={menuid} role='listbox' style={width ? `width: ${width}` : ''} class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass} on:keydown={onkeydown}>
       {#each items as item, i (item.value)}
-        {#if showSelected || !selected || item.value !== selected.value}
+        {#if showSelected || item.value !== value}
           <li
             id={`${menuid}-${i}`}
             bind:this={itemelements[i]}
-            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass || '' : ''} ${selected && selected.value === item.value ? menuItemSelectedClass || '' : ''}`}
+            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass || '' : ''} ${value === item.value ? menuItemSelectedClass || '' : ''}`}
             class:disabled={!!item.disabled}
             class:hilited={!menuItemHilitedClass && i === hilited}
-            class:selected={showSelected && !menuItemSelectedClass && selected && selected.value === item.value}
+            class:selected={showSelected && !menuItemSelectedClass && value === item.value}
             on:click={onclick(item)}
             role="option"
             tabindex=-1
             aria-disabled={item.disabled}
-          ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={selected && selected.value === item.value}>{item.label || item.value}</slot></li>
+          ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
         {/if}
       {/each}
       {#if items.length === 0}

package/components/PopupMenu.svelte.d.ts

@@ -0,0 +1,44 @@
+import { SvelteComponentTyped } from "svelte";
+import { Store } from '@txstate-mws/svelte-store';
+import type { GlueAlignOpts, GlueAlignStore } from '../actions';
+import type { PopupMenuItem } from '../types';
+declare const __propDef: {
+    props: {
+        menushown?: boolean;
+        menuContainerClass?: string;
+        menuClass?: string;
+        menuItemClass?: string;
+        menuItemHilitedClass?: string;
+        menuItemSelectedClass?: string;
+        items?: PopupMenuItem[];
+        buttonelement: HTMLElement;
+        align?: GlueAlignOpts;
+        cover?: boolean;
+        showSelected?: boolean;
+        width?: string | undefined;
+        computedalign?: Store<GlueAlignStore>;
+        usePortal?: HTMLElement | true | undefined;
+        emptyText?: string | undefined;
+        value?: string | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            item: PopupMenuItem;
+            label: string;
+            hilited: boolean;
+            selected: boolean;
+        };
+        noresults: {};
+    };
+};
+export declare type PopupMenuProps = typeof __propDef.props;
+export declare type PopupMenuEvents = typeof __propDef.events;
+export declare type PopupMenuSlots = typeof __propDef.slots;
+export default class PopupMenu extends SvelteComponentTyped<PopupMenuProps, PopupMenuEvents, PopupMenuSlots> {
+}
+export {};

package/{dist/ts/components → components}/ScreenReaderOnly.svelte

@@ -1,7 +1,6 @@
-<script>
-  export let id = ''
-  export let arialive = ''
-  export let ariaatomic = ''
+<script >export let id = undefined;
+export let arialive = undefined;
+export let ariaatomic = undefined;
 </script>
 
 <style>
@@ -23,4 +22,4 @@
   }
 </style>
 
-<span id={id} class="sr-only" aria-live={arialive} aria-atomic={ariaatomic}><slot/></span>
+<span {id} class="sr-only" aria-live={arialive} aria-atomic={ariaatomic}><slot/></span>

package/components/ScreenReaderOnly.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        arialive?: 'off' | 'assertive' | 'polite' | undefined;
+        ariaatomic?: boolean | 'false' | 'true' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ScreenReaderOnlyProps = typeof __propDef.props;
+export declare type ScreenReaderOnlyEvents = typeof __propDef.events;
+export declare type ScreenReaderOnlySlots = typeof __propDef.slots;
+export default class ScreenReaderOnly extends SvelteComponentTyped<ScreenReaderOnlyProps, ScreenReaderOnlyEvents, ScreenReaderOnlySlots> {
+}
+export {};

package/components/index.js

@@ -0,0 +1,6 @@
+export { default as CollapsingTable } from './CollapsingTable.svelte';
+export { default as FocusLock } from './FocusLock.svelte';
+export { default as ConditionalWrapper } from './ConditionalWrapper.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as PopupMenu } from './PopupMenu.svelte';
+export { default as ScreenReaderOnly } from './ScreenReaderOnly.svelte';

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './actions/index.js';
+export * from './types/index.js';
+export * from './util/index.js';

package/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './actions/index.js';
+export * from './types/index.js';
+export * from './util/index.js';