@txstate-mws/svelte-components 1.0.2 → 1.1.1

package/components/CardLayout.svelte

@@ -0,0 +1,197 @@
+<script >import { onDestroy, tick, setContext, onMount } from 'svelte';
+import { writable } from 'svelte/store';
+import { browser } from '$app/env';
+import { resize } from '../actions';
+import { CARDLAYOUT } from '../types';
+export let maxwidth = 500;
+export let preserveorder = false;
+export let gutter = 10;
+export let className = '';
+const blocks = [];
+const gutterstore = writable(gutter);
+let defaultOrder = 0;
+setContext(CARDLAYOUT, {
+    registerBlock: (block) => {
+        blocks.push(block);
+        hardrecalc();
+        onDestroy(() => {
+            blocks.splice(blocks.indexOf(block), 1);
+            hardrecalc();
+        });
+        block.order = writable(defaultOrder++);
+        block.linebreak = writable(false);
+        const cols = savecolumns || Math.ceil(1024 / maxwidth);
+        block.width = writable(`calc(${100.0 / cols}% - ${gutter * (cols - 1) / cols}px)`);
+        return block;
+    },
+    recalculate: () => {
+        hardrecalc();
+    },
+    gutter: gutterstore
+});
+$: gutterstore.set(gutter);
+let layoutelement;
+let cycle1 = 0;
+let cycle2 = 0;
+function detectcycle(w) {
+    if (cycle1 === 0 && Math.abs(w - cycle2) > 5) {
+        cycle1 = w;
+    }
+    else if (cycle2 === 0 && Math.abs(w - cycle1) > 5) {
+        cycle2 = w;
+    }
+    else if (w === cycle1 || w === cycle2) {
+        return true;
+    }
+    else {
+        cycle1 = 0;
+        cycle2 = 0;
+    }
+    return false;
+}
+let savecolumns = 0;
+let optimal;
+let fullheight = 0;
+let hardrequired = false;
+async function recalculate(realw) {
+    const columns = Math.ceil(realw / maxwidth);
+    const guttereach = gutter * (columns - 1) / columns;
+    const cycling = detectcycle(realw);
+    if (columns !== savecolumns) {
+        for (const block of blocks)
+            block.width.set(`calc(${100.0 / columns}% - ${guttereach}px`);
+        await tick();
+    }
+    // collect all the card heights at this new column width
+    for (const block of blocks)
+        block.height = block.element?.offsetHeight ?? 200;
+    if (columns !== savecolumns || hardrequired) { // only do real work if number of columns has changed, recalculate triggers on resize
+        if (preserveorder) {
+            optimal = [blocks];
+            if (columns > 1) {
+                const totalheight = blocks.reduce((totalheight, block) => totalheight + block.height + gutter, 0);
+                const tallestblock = Math.max(...blocks.map(b => b.height));
+                const minheight = Math.max(totalheight / columns, tallestblock);
+                let shortestoverall = totalheight;
+                // 2d packing problem is NP-hard so this is an O(n) heuristic
+                // optimal configuration would be if each column is `minheight` so start there
+                // then relax it in increments and see if the overall height shrinks
+                const increment = Math.max(1, Math.floor(Math.min(minheight, tallestblock) * 0.05));
+                for (let colmaxheight = minheight; colmaxheight < minheight + tallestblock + gutter; colmaxheight += increment) {
+                    let colheight = 0;
+                    let colidx = 0;
+                    let tallestcol = 0;
+                    let tallestcolidx = 0;
+                    const arrangement = [];
+                    for (const block of blocks) {
+                        if (colheight + block.height > colmaxheight && colidx < columns - 1) {
+                            if (colheight > tallestcol) {
+                                tallestcol = colheight;
+                                tallestcolidx = colidx;
+                            }
+                            colidx++;
+                            colheight = 0;
+                        }
+                        if (!arrangement[colidx])
+                            arrangement[colidx] = [];
+                        arrangement[colidx].push(block);
+                        colheight += block.height + gutter;
+                    }
+                    if (colheight > tallestcol) {
+                        tallestcol = colheight;
+                        tallestcolidx = colidx;
+                    }
+                    if (tallestcol < shortestoverall) {
+                        shortestoverall = tallestcol;
+                        optimal = arrangement;
+                    }
+                    // if leftmost column is tallest, increasing the allowable height can never make the overall height shorter
+                    if (tallestcolidx === 0)
+                        break;
+                }
+            }
+        }
+        else {
+            optimal = [];
+            const heights = Array.apply(null, Array(columns)).map((_) => 0); // initializes heights to an array of zeroes
+            // begin sorting blocks into columns
+            for (const block of blocks) {
+                // find the column with the smallest current height
+                const colidx = heights.reduce((acc, curr, curridx) => curr < heights[acc] ? curridx : acc, 0);
+                // record the height we are adding to the chosen column
+                heights[colidx] += block.height + gutter;
+                // move the current card to the chosen column
+                if (!optimal[colidx])
+                    optimal[colidx] = [];
+                optimal[colidx].push(block);
+            }
+        }
+        // we created the optimal arrangement, now move the block elements to
+        // reflect it
+        let order = 0;
+        for (let i = 0; i < optimal.length; i++) {
+            for (let j = 0; j < optimal[i].length; j++) {
+                const block = optimal[i][j];
+                block.order.set(order++);
+                block.linebreak.set(j === optimal[i].length - 1 && i < optimal.length - 1);
+            }
+        }
+        savecolumns = columns;
+        hardrequired = false;
+    }
+    // re-adjust container height
+    const saveheight = fullheight;
+    fullheight = 0;
+    for (let i = 0; i < optimal.length; i++) {
+        let top = 0;
+        for (const block of optimal[i]) {
+            top += block.height + gutter;
+        }
+        fullheight = Math.max(fullheight, top);
+    }
+    if (cycling && saveheight < fullheight)
+        fullheight = saveheight;
+}
+let savewidth = 0;
+let timer = 0;
+function triggerrecalc(width) {
+    if (width === savewidth && !hardrequired)
+        return;
+    cancelAnimationFrame(timer);
+    timer = requestAnimationFrame(() => {
+        recalculate(width);
+        savewidth = width;
+    });
+}
+function hardrecalc() {
+    if (!layoutelement)
+        return;
+    hardrequired = true;
+    cycle1 = 0;
+    cycle2 = 0;
+    triggerrecalc(layoutelement.clientWidth);
+}
+function onResize(e) {
+    triggerrecalc(e.detail.clientWidth);
+}
+onMount(() => triggerrecalc(layoutelement.clientWidth));
+</script>
+
+<ul class="cardlayout {className}" class:ssr={!browser} style:height={browser ? `${fullheight + gutter}px` : undefined} bind:this={layoutelement} use:resize on:resize={onResize}>
+  <slot></slot>
+</ul>
+
+<style>
+  .cardlayout {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-content: space-between;
+  }
+  .cardlayout.ssr {
+    flex-direction: row;
+  }
+</style>

package/components/CardLayout.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        maxwidth?: number;
+        preserveorder?: boolean;
+        gutter?: number;
+        className?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CardLayoutProps = typeof __propDef.props;
+export declare type CardLayoutEvents = typeof __propDef.events;
+export declare type CardLayoutSlots = typeof __propDef.slots;
+export default class CardLayout extends SvelteComponentTyped<CardLayoutProps, CardLayoutEvents, CardLayoutSlots> {
+}
+export {};

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

@@ -1,6 +1,6 @@
-<script>var _a;
-import { Store, classes } from '../lib';
+<script >import { Store } from '@txstate-mws/svelte-store';
 import { derived } from 'svelte/store';
+import { classes } from '../util';
 import DefaultPopupMenu from './PopupMenu.svelte';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 export let tableClass = '';
@@ -22,8 +22,8 @@ let columns;
 let width = 320;
 let selected;
 let identifyingkeys = [];
-$: firstrow = (_a = items === null || items === void 0 ? void 0 : items[0]) !== null && _a !== void 0 ? _a : {};
-$: columns = config !== null && config !== void 0 ? config : Object.keys(firstrow).map(key => ({ key }));
+$: firstrow = items?.[0] ?? {};
+$: columns = config ?? Object.keys(firstrow).map(key => ({ key }));
 function reactToColumns(columns) {
     if (!columns.some(c => c.neverhide)) {
         columns[0].neverhide = true;
@@ -40,7 +40,7 @@ function reactToColumns(columns) {
     return sortedcolumns;
 }
 $: sortedcolumns = reactToColumns(columns);
-$: itemkeys = items.map(item => { var _a, _b; return (_b = (_a = item.id) !== null && _a !== void 0 ? _a : item._id) !== null && _b !== void 0 ? _b : identifyingkeys.map(k => item[k]).join('.'); });
+$: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'));
 const state = new Store({
     keepcolumns: [],
     hiddencolumns: [],
@@ -48,28 +48,27 @@ const state = new Store({
 });
 const menuitems = derived(state, obj => obj.hiddencolumns.map(c => ({ value: c.key, label: c.title })));
 function react(..._) {
-    var _a, _b, _c, _d;
-    const selectedcol = (_a = sortedcolumns.find(c => c.key === (selected === null || selected === void 0 ? void 0 : selected.value))) !== null && _a !== void 0 ? _a : columns[1];
+    const selectedcol = sortedcolumns.find(c => c.key === selected?.value) ?? columns[1];
     const keepcolumns = [];
     const hiddencolumns = [];
-    let used = sortedcolumns.filter(c => c.neverhide || c === selectedcol).reduce((sum, col) => { var _a; return sum + ((_a = col.width) !== null && _a !== void 0 ? _a : defaultCellWidth); }, 0);
+    let used = sortedcolumns.filter(c => c.neverhide || c === selectedcol).reduce((sum, col) => sum + (col.width ?? defaultCellWidth), 0);
     for (const col of sortedcolumns) {
-        if (col.neverhide || col === selectedcol || used + ((_b = col.width) !== null && _b !== void 0 ? _b : defaultCellWidth) < width) {
+        if (col.neverhide || col === selectedcol || used + (col.width ?? defaultCellWidth) < width) {
             keepcolumns.push(col);
             if (col !== selectedcol && !col.neverhide)
-                used += (_c = col.width) !== null && _c !== void 0 ? _c : defaultCellWidth;
+                used += col.width ?? defaultCellWidth;
         }
         else
             hiddencolumns.push(col);
     }
     for (const col of keepcolumns) {
-        col.widthPercent = 100 * ((_d = col.width) !== null && _d !== void 0 ? _d : defaultCellWidth) / used;
+        col.widthPercent = 100 * (col.width ?? defaultCellWidth) / used;
     }
     const dropdowncolumn = hiddencolumns.length ? keepcolumns[keepcolumns.length - 1] : undefined;
     state.set({ keepcolumns, hiddencolumns, dropdowncolumn });
 }
 $: react(width, selected);
-let headers = [];
+const headers = [];
 $: menubuttonelement = headers[$state.keepcolumns.length - 1];
 </script>
 
@@ -113,7 +112,7 @@ $: menubuttonelement = headers[$state.keepcolumns.length - 1];
   </table>
 </div>
 {#if $menuitems.length > 0}
-  <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} on:change={e => selected = e.detail}></svelte:component>
+  <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} on:change={e => { selected = e.detail }}></svelte:component>
 {/if}
 
 <style>

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
-  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 };
@@ -32,6 +32,8 @@ onMount(async () => {
         returnfocusto = document.querySelector(':focus');
     }
     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)
@@ -40,7 +42,7 @@ onMount(async () => {
     else {
         setInitialFocus();
     }
-    setTimeout(() => listenforescape = true, 0);
+    setTimeout(() => { listenforescape = true; }, 0);
 });
 onDestroy(async () => {
     const wasactive = active;
@@ -55,25 +57,25 @@ 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
@@ -91,7 +93,7 @@ const 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/{dist/components → components}/Modal.svelte

@@ -1,12 +1,13 @@
-<script>export let escapable = true;
+<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;
-import FocusLock from './FocusLock.svelte';
+export let usePortal = undefined;
 import { createEventDispatcher, onMount } from 'svelte';
+import FocusLock from './FocusLock.svelte';
 import { portal } from '../actions';
 const dispatch = createEventDispatcher();
 const endmodal = () => {
@@ -22,7 +23,7 @@ onMount(() => {
 });
 </script>
 
-<div use:portal class="modal-backdrop" class:opaque on:click|stopPropagation|preventDefault={() => escapable && endmodal()}>
+<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>
@@ -36,7 +37,7 @@ onMount(() => {
     width: 100vw;
     height: 100vh;
     background-color: var(--modal-bg, rgba(0, 0, 0, 0.7));
-    z-index: 100;
+    z-index: 2147483000;
     display: flex;
     justify-content: center;
     align-items: center

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