@txstate-mws/svelte-components 1.0.3 → 1.1.2

package/README.md

@@ -1,24 +1,24 @@
-# create-svelte
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm init svelte@next
-
-# create a new project in my-app
-npm init svelte@next my-app
-```
-
-> Note: the `@next` is temporary
+# svelte-components
+A set of generically useful components for svelte.
+
+## Components
+- [CollapsingTable](/docs/CollapsingTable.md)
+- [ConditionalWrapper](/docs/ConditionalWrapper.md)
+- [FocusLock](/docs/Modal.md#FocusLock)
+- [Modal](/docs/Modal.md#Modal)
+- [PopupMenu](/docs/PopupMenu.md)
+- [ScreenReaderOnly](/docs/ScreenReaderOnly.md)
+
+## Actions
+- [use:buttonify](/docs/actions.md#use:buttonify)
+- [use:glue](/docs/actions.md#use:glue)
+- [use:offset](/docs/actions.md#use:offset)
+- [use:portal](/docs/actions.md#use:portal)
+- [use:resize](/docs/actions.md#use:resize)
 
 ## Developing
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Installed dependencies with `npm install`, then start the development server:
 
 ```bash
 npm run dev
@@ -27,14 +27,10 @@ npm run dev
 npm run dev -- --open
 ```
 
-## Building
-
-To create a production version of your app:
+## Publishing to npm
 
 ```bash
-npm run build
+npm run package
+cd package
+npm publish
 ```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment.

package/actions/resize.js

@@ -3,7 +3,19 @@ import { Store } from '@txstate-mws/svelte-store';
 import { debounced } from '../util/index.js';
 export class ResizeStore extends Store {
     constructor(initialState) {
-        super(initialState ?? { clientWidth: 1024, clientHeight: 1024, offsetWidth: 1024, offsetHeight: 1024 });
+        super(initialState ?? typeof window === 'undefined'
+            ? {
+                clientWidth: 1024,
+                clientHeight: 1024,
+                offsetWidth: 1024,
+                offsetHeight: 1024
+            }
+            : {
+                clientWidth: window.innerWidth,
+                clientHeight: window.innerHeight,
+                offsetWidth: window.innerWidth,
+                offsetHeight: window.innerHeight
+            });
     }
 }
 export function resize(el, config) {
@@ -19,7 +31,7 @@ export function resize(el, config) {
             el.dispatchEvent(new CustomEvent('resize', { detail: current }));
         }
     }
-    if (!ResizeObserver)
+    if (typeof ResizeObserver === 'undefined')
         return watch(); // support SSR
     let observer = new ResizeObserver(config?.debounce ? debounced(watch, config.debounce) : watch);
     observer.observe(el);

package/actions/sticky.js

@@ -34,7 +34,7 @@ export function sticky(el, config) {
             config?.store?.update(v => ({ ...v, translateY, floating }));
         }
     }
-    function onscroll(e) {
+    function onscroll(_) {
         recalc(window.scrollY);
     }
     function onwheel(e) {

package/actions/stickyfixed.js

@@ -112,7 +112,7 @@ export function stickyfixed(el, config) {
                 el.style.top = `${top}px`;
         }
     }
-    function onscroll(e) {
+    function onscroll(_) {
         recalc(window.scrollY);
     }
     let lastOffsetParent = el.offsetParent;

package/components/Card.svelte

@@ -0,0 +1,23 @@
+<script >export let className = '';
+import { getContext } from 'svelte';
+import { resize } from '../actions';
+import { CARDLAYOUT } from '../types';
+const block = { element: undefined };
+const { registerBlock, gutter, recalculate } = getContext(CARDLAYOUT);
+const { width, order, linebreak } = registerBlock(block);
+</script>
+
+<li class="cardlayout-card {className}" bind:this={block.element} use:resize on:resize={recalculate} style="margin-bottom: {$gutter}px; width: {$width}; order: {$order};">
+  <slot></slot>
+</li>
+{#if $linebreak}
+  <li aria-hidden="true" class="cardlayout-columnbreak" style:order={$order}></li>
+{/if}
+
+<style>
+  .cardlayout-columnbreak {
+    width: 0;
+    height: 100%;
+    visibility: hidden;
+  }
+</style>

package/components/Card.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        className?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CardProps = typeof __propDef.props;
+export declare type CardEvents = typeof __propDef.events;
+export declare type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+}
+export {};

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

@@ -0,0 +1,179 @@
+<script >import { createEventDispatcher } from 'svelte';
+import { randomid } from 'txstate-utils';
+import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+import DefaultPopupMenu from './PopupMenu.svelte';
+import { debouncedPromise, modifierKey, selectionIsLeft } from '../util';
+export let id = randomid();
+export let name;
+export let getOptions;
+export let menuContainerClass = undefined;
+export let menuClass = undefined;
+export let menuItemClass = undefined;
+export let menuItemHilitedClass = undefined;
+export let selected = [];
+export let placeholder = '';
+export let emptyText = undefined;
+export let PopupMenu = DefaultPopupMenu;
+let menushown;
+let options = [];
+let hilitedpill;
+let inputvalue = '';
+let popupvalue = undefined;
+let inputelement;
+const descriptionid = randomid();
+$: debouncedGetOptions = debouncedPromise(getOptions, 100, []);
+$: selectedSet = new Set(selected.map(s => s.value));
+async function reactToInput(..._) {
+    const saveval = inputvalue;
+    const rawOptions = await debouncedGetOptions(saveval);
+    if (inputvalue !== saveval)
+        return; // ignore any results that are out of date
+    options = rawOptions.filter(o => !selectedSet.has(o.value));
+    if (typeof document !== 'undefined' && inputelement === document.activeElement)
+        menushown = true;
+}
+$: reactToInput(inputvalue, debouncedGetOptions, selectedSet);
+$: availablemessage = options.filter(o => o.value).length + ' autocomplete choices available';
+function addSelection(e) {
+    inputvalue = '';
+    const opt = { ...e.detail, label: e.detail.label || e.detail.value };
+    selected = [...selected, opt];
+    popupvalue = undefined;
+}
+function removeSelection(opt, idx, nextfocus = 1) {
+    if (hilitedpill === opt.value) {
+        hilitedpill = selected[idx + nextfocus]?.value;
+    }
+    selected = selected.filter(s => s.value !== opt.value);
+}
+function inputkeydown(e) {
+    if (modifierKey(e))
+        return;
+    if (e.key === 'ArrowLeft' && selectionIsLeft(inputelement)) {
+        const idx = hilitedpill ? selected.findIndex(s => s.value === hilitedpill) : selected.length;
+        if (idx !== 0)
+            hilitedpill = selected[idx - 1].value;
+    }
+    else if (e.key === 'ArrowRight' && selectionIsLeft(inputelement)) {
+        if (hilitedpill)
+            e.preventDefault();
+        const idx = hilitedpill ? selected.findIndex(s => s.value === hilitedpill) : undefined;
+        if (idx != null) {
+            if (idx === selected.length - 1)
+                hilitedpill = undefined;
+            else
+                hilitedpill = selected[idx + 1].value;
+        }
+    }
+    else if (['Backspace', 'Delete', 'Clear', ' ', 'Enter'].includes(e.key)) {
+        if (hilitedpill) {
+            const idx = selected.findIndex(s => s.value === hilitedpill);
+            removeSelection(selected[idx], idx, e.key === 'Delete' ? 1 : -1);
+            e.preventDefault();
+        }
+        else if (e.key === 'Backspace' && selectionIsLeft(inputelement)) {
+            removeSelection(selected[selected.length - 1], selected.length - 1, -1);
+            e.preventDefault();
+        }
+    }
+}
+function inputfocus() {
+    reactToInput();
+}
+let popuphilited;
+$: if (popuphilited != null)
+    hilitedpill = undefined;
+function reactToHilite(..._) {
+    if (!inputelement)
+        return;
+    if (hilitedpill) {
+        popuphilited = undefined;
+        inputelement.setAttribute('aria-activedescendant', id + hilitedpill);
+    }
+    else
+        inputelement.removeAttribute('aria-activedescendant');
+}
+$: reactToHilite(hilitedpill, id);
+const dispatch = createEventDispatcher();
+$: dispatch('change', selected);
+</script>
+
+<fieldset>
+  <ul class="multiselect-selected" role="listbox" on:click={() => inputelement.focus()}>
+    {#each selected as option, i}
+      <li id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
+        on:click|preventDefault|stopPropagation={() => removeSelection(option, i, 1)}
+        aria-selected="true">
+        {option.label || option.value}
+        <ScreenReaderOnly>, click to remove</ScreenReaderOnly>
+      </li>
+    {/each}
+    <li class="input">
+      <input type="text" id={id} name={name} placeholder={placeholder}
+        bind:this={inputelement} bind:value={inputvalue}
+        on:focus={inputfocus} on:keydown={inputkeydown}
+        autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"
+        aria-describedby="{descriptionid}">
+    </li>
+  </ul>
+  <ScreenReaderOnly id={descriptionid} arialive="assertive">
+    <span>{selected.length ? selected.length + ' selected' : 'select multiple, none selected'}, up down to choose, left right to hilite existing choices</span>
+    {#if menushown}<span>{availablemessage}, touch users explore to find autocomplete menu</span>{/if}
+  </ScreenReaderOnly>
+  <slot></slot>
+</fieldset>
+<svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft' {emptyText} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={options} buttonelement={inputelement} on:change={addSelection}></svelte:component>
+
+<style>
+  fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+  fieldset * {
+    box-sizing: border-box;
+  }
+  .multiselect-selected {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    padding: var(--multiselect-padding, 0.3em);
+    border: var(--multiselect-border, 1px solid #666666);
+    border-radius: var(--multiselect-radius, 0.3em);
+  }
+  .multiselect-selected:focus-within {
+    outline-width: var(--multiselect-focus-width, 2px);
+    outline-style: solid;
+    outline-color: var(--multiselect-focus-color, Highlight);
+  }
+  li.input {
+    flex-grow: 1;
+  }
+  input {
+    outline: 0;
+    border: 0;
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .multiselect-pill {
+    cursor: pointer;
+    flex-grow: 0;
+    margin-right: 0.3em;
+    line-height: 1;
+    border-radius: var(--multiselect-pill-radius, 0.8em);
+    border: var(--multiselect-pill-border, 1px solid gray);
+    background-color: var(--multiselect-pill-bg, transparent);
+    color: var(--multiselect-pill-text, black);
+    padding: var(--multiselect-pill-padding, 0.3em 0.5em);
+  }
+  .multiselect-pill.hilited {
+    outline: 0;
+    background-color: var(--multiselect-pill-selected, gray);
+    border: var(--multiselect-pill-selected-border, 1px solid transparent);
+    color: var(--multiselect-pill-selected-text, white);
+  }
+</style>

package/components/MultiSelect.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import DefaultPopupMenu from './PopupMenu.svelte';
+import type { PopupMenuItem } from '../types';
+declare const __propDef: {
+    props: {
+        id?: string;
+        name: string;
+        getOptions: (search: string) => Promise<PopupMenuItem[]> | PopupMenuItem[];
+        menuContainerClass?: string | undefined;
+        menuClass?: string | undefined;
+        menuItemClass?: string | undefined;
+        menuItemHilitedClass?: string | undefined;
+        selected?: {
+            value: string;
+            label: string;
+        }[];
+        placeholder?: string;
+        emptyText?: string | undefined;
+        PopupMenu?: typeof DefaultPopupMenu;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type MultiSelectProps = typeof __propDef.props;
+export declare type MultiSelectEvents = typeof __propDef.events;
+export declare type MultiSelectSlots = typeof __propDef.slots;
+export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
+}
+export {};

package/components/PopupMenu.svelte

@@ -3,6 +3,7 @@ import { randomid } from 'txstate-utils';
 import { Store } from '@txstate-mws/svelte-store';
 import { glue, portal } from '../actions';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+import { modifierKey } from '../util';
 const dispatch = createEventDispatcher();
 export let menushown = false;
 export let menuContainerClass = '';
@@ -20,7 +21,7 @@ export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
 export let usePortal = undefined;
 export let emptyText = undefined;
 export let value = undefined;
-let hilited = undefined;
+export let hilited = undefined;
 let menuelement;
 const itemelements = [];
 const menuid = randomid();
@@ -43,15 +44,17 @@ async function reactToMenuShown(_) {
     }
     await tick();
     if (!menushown) {
-        hilited = undefined;
         buttonelement.removeAttribute('aria-controls');
         buttonelement.setAttribute('aria-expanded', 'false');
+        if (hilited)
+            buttonelement.removeAttribute('aria-activedescendant');
+        hilited = undefined;
     }
     else {
         buttonelement.setAttribute('aria-controls', menuid);
         buttonelement.setAttribute('aria-expanded', 'true');
+        buttonelement.focus();
     }
-    buttonelement.focus();
 }
 $: reactToMenuShown(menushown);
 function move(idx) {
@@ -64,6 +67,8 @@ function move(idx) {
     buttonelement.setAttribute('aria-activedescendant', `${menuid}-${hilited}`);
 }
 function onkeydown(e) {
+    if (modifierKey(e))
+        return;
     if (e.key === 'ArrowDown') {
         e.preventDefault();
         if (menushown) {
@@ -74,7 +79,7 @@ function onkeydown(e) {
         }
         else {
             menushown = true;
-            move(firstactive);
+            tick().then(() => move(firstactive));
         }
     }
     else if (e.key === 'ArrowUp') {
@@ -87,7 +92,7 @@ function onkeydown(e) {
         }
         else {
             menushown = true;
-            move(lastactive);
+            tick().then(() => move(lastactive));
         }
     }
     else if (e.key === 'Enter') {
@@ -101,7 +106,7 @@ function onkeydown(e) {
         }
         else {
             menushown = true;
-            move(firstactive);
+            tick().then(() => move(firstactive));
         }
     }
     else if (e.key === ' ') {
@@ -125,7 +130,7 @@ function onkeydown(e) {
             if (buttonelement.tagName !== 'INPUT') {
                 e.preventDefault();
                 menushown = true;
-                move(firstactive);
+                tick().then(() => move(firstactive));
             }
         }
     }
@@ -135,14 +140,17 @@ function onkeydown(e) {
         menushown = false;
     }
 }
+let blurTimer;
 function onbuttonclick(e) {
     e.preventDefault();
+    cancelAnimationFrame(blurTimer);
     menushown = !menushown;
 }
 async function onblur(e) {
     // tabindex=-1 on our menu elements means e.relatedTarget will be set
-    if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget)))
-        menushown = false;
+    if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget))) {
+        blurTimer = requestAnimationFrame(() => { menushown = false; });
+    }
 }
 function cleanup(element) {
     if (element) {

package/components/PopupMenu.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         usePortal?: HTMLElement | true | undefined;
         emptyText?: string | undefined;
         value?: string | undefined;
+        hilited?: number | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/index.d.ts

@@ -1,6 +1,9 @@
+export { default as CardLayout } from './CardLayout.svelte';
+export { default as Card } from './Card.svelte';
 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 MultiSelect } from './MultiSelect.svelte';
 export { default as PopupMenu } from './PopupMenu.svelte';
 export { default as ScreenReaderOnly } from './ScreenReaderOnly.svelte';

package/components/index.js

@@ -1,6 +1,9 @@
+export { default as CardLayout } from './CardLayout.svelte';
+export { default as Card } from './Card.svelte';
 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 MultiSelect } from './MultiSelect.svelte';
 export { default as PopupMenu } from './PopupMenu.svelte';
 export { default as ScreenReaderOnly } from './ScreenReaderOnly.svelte';

package/package.json

@@ -1,32 +1,33 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.0.3",
+  "version": "1.1.2",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
-    "@txstate-mws/svelte-store": "^1.0.2",
+    "@txstate-mws/svelte-store": "^1.0.3",
     "tabbable": "^5.2.1",
     "txstate-utils": "^1.6.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
+    "@playwright/test": "^1.18.1",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/svelte": "^3.0.3",
-    "@testing-library/user-event": "^13.5.0",
     "@types/tabbable": "^3.1.2",
     "eslint-config-standard-with-typescript": "^21.0.1",
     "eslint-plugin-svelte3": "^3.2.1",
     "svelte": "^3.44.0",
-    "svelte2tsx": "^0.5.1",
     "svelte-check": "^2.2.6",
-    "svelte-jester": "^2.3.1",
     "svelte-preprocess": "^4.9.4",
-    "ts-jest": "^27.1.3",
+    "svelte2tsx": "^0.5.2",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:txstate-etc/svelte-components.git"
+  },
+  "author": "Nick Wing",
+  "license": "MIT",
   "exports": {
     "./package.json": "./package.json",
     "./actions/buttonify": "./actions/buttonify.js",
@@ -37,14 +38,18 @@
     "./actions/resize": "./actions/resize.js",
     "./actions/sticky": "./actions/sticky.js",
     "./actions/stickyfixed": "./actions/stickyfixed.js",
+    "./components/Card.svelte": "./components/Card.svelte",
+    "./components/CardLayout.svelte": "./components/CardLayout.svelte",
     "./components/CollapsingTable.svelte": "./components/CollapsingTable.svelte",
     "./components/ConditionalWrapper.svelte": "./components/ConditionalWrapper.svelte",
     "./components/FocusLock.svelte": "./components/FocusLock.svelte",
     "./components/Modal.svelte": "./components/Modal.svelte",
+    "./components/MultiSelect.svelte": "./components/MultiSelect.svelte",
     "./components/PopupMenu.svelte": "./components/PopupMenu.svelte",
     "./components/ScreenReaderOnly.svelte": "./components/ScreenReaderOnly.svelte",
     "./components": "./components/index.js",
     ".": "./index.js",
+    "./types/CardLayout": "./types/CardLayout.js",
     "./types/CollapsingTable": "./types/CollapsingTable.js",
     "./types/PopupMenu": "./types/PopupMenu.js",
     "./types": "./types/index.js",

package/types/CardLayout.d.ts

@@ -0,0 +1,14 @@
+import type { SettableSubject } from '@txstate-mws/svelte-store';
+export declare const CARDLAYOUT: {};
+export interface Block {
+    element: HTMLElement;
+    order?: SettableSubject<number>;
+    linebreak?: SettableSubject<boolean>;
+    width?: SettableSubject<string>;
+    height?: number;
+}
+export interface CardLayoutContext {
+    registerBlock: (block: Block) => Block;
+    recalculate: () => void;
+    gutter: SettableSubject<number>;
+}

package/types/CardLayout.js

@@ -0,0 +1 @@
+export const CARDLAYOUT = {};

package/types/index.d.ts

@@ -1,2 +1,3 @@
+export * from './CardLayout.js';
 export * from './CollapsingTable.js';
 export * from './PopupMenu.js';

package/types/index.js

@@ -1,2 +1,3 @@
+export * from './CardLayout.js';
 export * from './CollapsingTable.js';
 export * from './PopupMenu.js';

package/util/repositioned.js

@@ -1,5 +1,4 @@
-import equal from 'fast-deep-equal';
-import { isNotNull, randomid, toArray } from 'txstate-utils';
+import { equal, isNotNull, randomid, toArray } from 'txstate-utils';
 import { bodyOffset, targetOffset } from './bodyoffset.js';
 const observers = new Map();
 let mutationobserver;

package/util/util.d.ts

@@ -1,2 +1,5 @@
 export declare function classes(...classNames: (string | undefined)[]): string;
 export declare function debounced(fn: Function, timeout: number): (...args: any[]) => void;
+export declare function debouncedPromise<T>(fn: (..._: any) => Promise<T> | T, timeout: number, defaultValue: T): (..._: any) => Promise<T>;
+export declare function modifierKey(e: any): any;
+export declare function selectionIsLeft(ele: HTMLInputElement | HTMLTextAreaElement): boolean;

package/util/util.js

@@ -8,3 +8,26 @@ export function debounced(fn, timeout) {
         timer = setTimeout(() => fn(...args), timeout);
     };
 }
+export function debouncedPromise(fn, timeout, defaultValue) {
+    let version = 0;
+    return async (...args) => {
+        const myversion = ++version;
+        return await new Promise(resolve => {
+            setTimeout(() => {
+                if (version === myversion) {
+                    version = 0;
+                    resolve(fn(...args));
+                }
+                else {
+                    resolve(defaultValue);
+                }
+            }, timeout);
+        });
+    };
+}
+export function modifierKey(e) {
+    return e.ctrlKey || e.altKey || e.metaKey || e.key === 'Insert';
+}
+export function selectionIsLeft(ele) {
+    return ele.selectionStart === 0 && ele.selectionEnd === 0;
+}