@txstate-mws/svelte-components 1.1.0 → 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/{src/lib/components → components}/CollapsingTable.svelte

@@ -1,77 +1,75 @@
-<script lang="ts">
-  import { Store } from '@txstate-mws/svelte-store'
-  import { derived } from 'svelte/store'
-  import type { CollapsingTableColumn, PopupMenuItem } from '$lib/types'
-  import { classes } from '$lib/util'
-  import DefaultPopupMenu from './PopupMenu.svelte'
-  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
-
-  export let tableClass = ''
-  export let bodyRowClass = ''
-  export let bodyCellClass = ''
-  export let headerRowClass = ''
-  export let headerCellClass = ''
-  export let menuContainerClass = ''
-  export let menuClass = ''
-  export let menuItemClass = ''
-  export let menuItemHilitedClass = ''
-  export let items: any[]
-  export let config: CollapsingTableColumn[]|undefined = undefined
-  export let defaultCellWidth = 150
-  export let PopupMenu = DefaultPopupMenu
-  export let slots: Record<string, boolean> = $$slots
-  export let stickyheader: boolean = false
-  let columns: CollapsingTableColumn[]
-  let width: number = 320
-  let selected: PopupMenuItem | undefined
-  let identifyingkeys: string[] = []
-  $: firstrow = items?.[0] ?? {}
-  $: columns = config ?? Object.keys(firstrow).map(key => ({ key }))
-  function reactToColumns (columns: CollapsingTableColumn[]) {
+<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 = '';
+export let bodyRowClass = '';
+export let bodyCellClass = '';
+export let headerRowClass = '';
+export let headerCellClass = '';
+export let menuContainerClass = '';
+export let menuClass = '';
+export let menuItemClass = '';
+export let menuItemHilitedClass = '';
+export let items;
+export let config = undefined;
+export let defaultCellWidth = 150;
+export let PopupMenu = DefaultPopupMenu;
+export let slots = $$slots;
+export let stickyheader = false;
+let columns;
+let width = 320;
+let selected;
+let identifyingkeys = [];
+$: firstrow = items?.[0] ?? {};
+$: columns = config ?? Object.keys(firstrow).map(key => ({ key }));
+function reactToColumns(columns) {
     if (!columns.some(c => c.neverhide)) {
-      columns[0].neverhide = true
+        columns[0].neverhide = true;
     }
     const sortedcolumns = columns // stable sort
-      .map((c, i) => ({ col: c, idx: i }))
-      .sort((a, b) => ((a.col.neverhide ? 0 : 1) - (b.col.neverhide ? 0 : 1)) || a.idx - b.idx)
-      .map(o => o.col)
+        .map((c, i) => ({ col: c, idx: i }))
+        .sort((a, b) => ((a.col.neverhide ? 0 : 1) - (b.col.neverhide ? 0 : 1)) || a.idx - b.idx)
+        .map(o => o.col);
     if (!selected) {
-      const firstcol = sortedcolumns.find(c => !c.neverhide)
-      selected = firstcol ? { value: firstcol.key } : undefined
+        const firstcol = sortedcolumns.find(c => !c.neverhide);
+        selected = firstcol ? { value: firstcol.key } : undefined;
     }
-    identifyingkeys = sortedcolumns.filter(c => c.neverhide).map(c => c.key)
-    return sortedcolumns
-  }
-  $: sortedcolumns = reactToColumns(columns)
-
-  $: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'))
-
-  const state = new Store({
-    keepcolumns: [] as (CollapsingTableColumn & { widthPercent?: number })[],
-    hiddencolumns: [] as CollapsingTableColumn[],
-    dropdowncolumn: undefined as (CollapsingTableColumn & { widthPercent?: number }) | undefined
-  })
-  const menuitems = derived(state, obj => obj.hiddencolumns.map(c => ({ value: c.key, label: c.title })))
-  function react (..._: any[]) {
-    const selectedcol = sortedcolumns.find(c => c.key === selected?.value) ?? columns[1]
-    const keepcolumns: CollapsingTableColumn[] = []
-    const hiddencolumns: CollapsingTableColumn[] = []
-    let used = sortedcolumns.filter(c => c.neverhide || c === selectedcol).reduce((sum, col) => sum + (col.width ?? defaultCellWidth), 0)
+    identifyingkeys = sortedcolumns.filter(c => c.neverhide).map(c => c.key);
+    return sortedcolumns;
+}
+$: sortedcolumns = reactToColumns(columns);
+$: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'));
+const state = new Store({
+    keepcolumns: [],
+    hiddencolumns: [],
+    dropdowncolumn: undefined
+});
+const menuitems = derived(state, obj => obj.hiddencolumns.map(c => ({ value: c.key, label: c.title })));
+function react(..._) {
+    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) => sum + (col.width ?? defaultCellWidth), 0);
     for (const col of sortedcolumns) {
-      if (col.neverhide || col === selectedcol || used + (col.width ?? defaultCellWidth) < width) {
-        keepcolumns.push(col)
-        if (col !== selectedcol && !col.neverhide) used += col.width ?? defaultCellWidth
-      } else hiddencolumns.push(col)
+        if (col.neverhide || col === selectedcol || used + (col.width ?? defaultCellWidth) < width) {
+            keepcolumns.push(col);
+            if (col !== selectedcol && !col.neverhide)
+                used += col.width ?? defaultCellWidth;
+        }
+        else
+            hiddencolumns.push(col);
     }
     for (const col of keepcolumns) {
-      (col as any).widthPercent = 100 * (col.width ?? 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)
-  const headers: HTMLElement[] = []
-  $: menubuttonelement = headers[$state.keepcolumns.length - 1]
+    const dropdowncolumn = hiddencolumns.length ? keepcolumns[keepcolumns.length - 1] : undefined;
+    state.set({ keepcolumns, hiddencolumns, dropdowncolumn });
+}
+$: react(width, selected);
+const headers = [];
+$: menubuttonelement = headers[$state.keepcolumns.length - 1];
 </script>
 
 <div bind:clientWidth={width}>

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/{src/lib/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/components/FocusLock.svelte

@@ -0,0 +1,107 @@
+<script context="module" >const FocusLockStack = [];
+</script>
+
+<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 escapable = true;
+let className = '';
+export { className as class };
+import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
+import { tabbable } from 'tabbable';
+import { sleep } from 'txstate-utils';
+import { buttonify } from '../actions';
+import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+const dispatch = createEventDispatcher();
+let lockelement;
+let abovelockelement;
+let active = true;
+let listenforescape = false;
+if (initialfocus)
+    hidefocus = false;
+onMount(async () => {
+    const prevFocusLock = FocusLockStack.slice(-1)[0];
+    if (prevFocusLock)
+        prevFocusLock.pause();
+    FocusLockStack.push({
+        pause: () => { active = false; },
+        unpause: () => { active = true; }
+    });
+    if (typeof returnfocusto === 'undefined') {
+        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)
+            focusEl.focus();
+    }
+    else {
+        setInitialFocus();
+    }
+    setTimeout(() => { listenforescape = true; }, 0);
+});
+onDestroy(async () => {
+    const wasactive = active;
+    active = false;
+    await tick();
+    if (returnfocusto && wasactive) {
+        returnfocusto.focus();
+    }
+    FocusLockStack.pop();
+    const prevFocusLock = FocusLockStack.slice(-1)[0];
+    if (prevFocusLock)
+        prevFocusLock.unpause();
+});
+const setInitialFocus = () => {
+    const firstfocus = lockelement ? tabbable(lockelement)[0] : undefined;
+    if (firstfocus && firstfocus.focus) {
+        firstfocus.focus();
+    }
+};
+const setLastFocus = () => {
+    const lastfocus = lockelement ? tabbable(lockelement).slice(-1)[0] : undefined;
+    if (lastfocus && lastfocus.focus) {
+        lastfocus.focus();
+    }
+};
+const keydown = (e) => {
+    if (active && e.key === 'Escape' && escapable) {
+        e.preventDefault();
+        dispatch('escape');
+    }
+};
+const focusin = (e) => {
+    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}
+    <slot></slot>
+  </div>
+  <div tabindex="0"></div>
+</div>
+
+<style>
+  .hiddenfocus {
+    opacity: 0;
+    outline: 0;
+  }
+</style>

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/{src/lib/components → components}/Modal.svelte

@@ -1,28 +1,26 @@
-<script lang="ts">
-  export let escapable = true
-  export let hidefocus = true
-  export let hidefocuslabel: string|undefined = undefined
-  export let returnfocusto: HTMLElement|undefined = undefined
-  export let initialfocus: string|undefined = undefined
-  export let containerClass = ''
-  export let opaque = false
-  export let usePortal: HTMLElement|undefined = undefined
-  import { createEventDispatcher, onMount } from 'svelte'
-  import FocusLock from './FocusLock.svelte'
-  import { portal } from '$lib/actions'
-
-  const dispatch = createEventDispatcher()
-  const endmodal = () => {
-    dispatch('escape')
-  }
-  onMount(() => {
-    document.body.style.marginRight = (window.innerWidth - document.body.clientWidth) + 'px'
-    document.body.style.overflow = 'hidden'
+<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 = ''
-    }
-  })
+        document.body.style.overflow = '';
+        document.body.style.marginRight = '';
+    };
+});
 </script>
 
 <div use:portal={usePortal} class="modal-backdrop" class:opaque on:click|stopPropagation|preventDefault={() => escapable && endmodal()}>