@txstate-mws/svelte-components 1.0.4 → 1.1.0

package/actions/stickyfixed.js

@@ -1,157 +0,0 @@
-import { bodyOffset, watchForPositionChange } from '../util/index.js';
-/**
- * An implementation of stickyness based on `positon: fixed`. Only use when
- * `position: sticky` won't work for you. If `position: sticky` does work for you, use it,
- * it performs better.
- *
- * Reasons `position: sticky` might not work:
- * 1) it cannot work on a thead or tr, only td and th (and non-table elements)
- * 2) it gets confused if any parent elements have an `overflow` set, even `overflow: hidden`
- * 3) it always stays within the boundaries of the closest parent element that has a `position`
- *     * use:sticky accepts a `target` element as a parameter, defining the bounding container
- *
- * Note that this implementation gets great animation performance at the cost of extra complexity.
- * It does a lot of work like cloning the element you place it on, placing the cloned element next
- * to yours in the DOM, setting widths to match between them, watching for mutations to keep them
- * in sync, etc. Some of this work may get foiled if you have a complex html/css/js situation.
- *
- * You may also want to try use:sticky. It is based on setting `transform: translateY()` as appropriate,
- * and is less fragile than this. However, it cannot do its work before the scroll on mobile, only after,
- * so it will visually lag a bit on mobile.
- */
-export function stickyfixed(el, config) {
-    let floating;
-    let translateY;
-    let scrollstart = Number.MAX_SAFE_INTEGER;
-    let scrollend = Number.MAX_SAFE_INTEGER;
-    let spacer;
-    let elheight;
-    let left;
-    let top = 0;
-    function generatespacer(mutations) {
-        if (mutations?.every(m => m.attributeName === 'style'))
-            return;
-        spacer?.remove();
-        spacer = el.cloneNode(true);
-        spacer.setAttribute('aria-hidden', 'true');
-        spacer.style.position = '';
-        spacer.style.top = '';
-        spacer.style.left = '';
-        spacer.style.width = '';
-        const tds = Array.from(spacer.querySelectorAll('td,th'));
-        for (const td of tds)
-            td.style.width = '';
-        if (floating)
-            el.parentElement?.insertBefore(spacer, el);
-    }
-    const mutationobserver = new MutationObserver(generatespacer);
-    mutationobserver.observe(el, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        characterData: true
-    });
-    generatespacer();
-    function adjustwidths() {
-        const tds = Array.from(el.querySelectorAll('td,th'));
-        if (floating) {
-            const spacertds = Array.from(spacer.querySelectorAll('td,th'));
-            const widths = spacertds.map(td => window.getComputedStyle(td).width);
-            const table = spacer.closest('table');
-            let extrawidth = 0;
-            if (table) {
-                const cell = el.querySelector('th:last-child,td:last-child');
-                if (cell) {
-                    const tstyle = window.getComputedStyle(table);
-                    extrawidth = tstyle.borderCollapse === 'collapse' ? parseInt(window.getComputedStyle(cell).borderRightWidth) : 0;
-                }
-            }
-            const width = `${parseInt(window.getComputedStyle(spacer).width) + extrawidth}px`;
-            elheight = spacer.offsetHeight;
-            for (let i = 0; i < tds.length; i++)
-                tds[i].style.width = widths[i];
-            el.style.width = width;
-        }
-        else {
-            for (const td of tds)
-                td.style.width = '';
-            el.style.width = '';
-            elheight = el.offsetHeight;
-        }
-    }
-    const resizeobserver = new ResizeObserver(adjustwidths);
-    function recalc(scroll) {
-        const newTranslateY = Math.max(Math.min(scroll - 1, scrollend) - scrollstart, 0);
-        const newFloating = newTranslateY > 0;
-        const newTop = Math.max(Math.min(scrollend - scroll, 0), -2 * elheight);
-        if (newFloating !== floating) {
-            floating = newFloating;
-            if (floating) {
-                el.parentElement?.insertBefore(spacer, el);
-                el.style.position = 'fixed';
-                el.style.top = `${Math.min(scrollend - scroll, 0)}px`;
-                el.style.left = `${left}px`;
-                resizeobserver.observe(spacer);
-            }
-            else {
-                el.style.position = '';
-                el.style.top = '';
-                el.style.left = '';
-                resizeobserver.disconnect();
-                spacer.remove();
-            }
-            adjustwidths();
-        }
-        if (newTranslateY !== translateY) {
-            translateY = newTranslateY;
-            config?.store?.update(v => ({ ...v, translateY, floating }));
-        }
-        if (top !== newTop) {
-            top = newTop;
-            if (floating)
-                el.style.top = `${top}px`;
-        }
-    }
-    function onscroll(e) {
-        recalc(window.scrollY);
-    }
-    let lastOffsetParent = el.offsetParent;
-    function onpositionchange(offset) {
-        const offsetParent = el.offsetParent;
-        if (!(offsetParent instanceof HTMLElement))
-            return;
-        if (lastOffsetParent !== offsetParent) {
-            offset[0] = bodyOffset(offsetParent);
-            update(offsetParent, onpositionchange);
-            lastOffsetParent = offsetParent;
-        }
-        const table = el.closest('table');
-        const borderspacing = (table ? parseInt(window.getComputedStyle(table).borderSpacing) : 0);
-        scrollstart = offset[0].top + el.offsetTop;
-        left = offset[0].left + (spacer.parentElement ? spacer.offsetLeft : el.offsetLeft);
-        if (el.tagName === 'TR') {
-            scrollstart -= borderspacing;
-        }
-        const containeroffset = config?.target ? offset[1] ?? offset[0] : offset[0];
-        scrollend = Math.max(scrollstart, containeroffset.top + (config?.target ?? offsetParent).clientHeight - el.offsetHeight);
-        recalc(window.scrollY);
-    }
-    const { destroy, update } = watchForPositionChange([el.offsetParent, config?.target], onpositionchange);
-    window.addEventListener('scroll', onscroll, { passive: true });
-    function stickyUpdate(newConfig) {
-        if (newConfig?.store !== config?.store)
-            newConfig?.store?.update(v => ({ ...v, translateY, floating }));
-        config = newConfig;
-        update([el.offsetParent, config?.target], onpositionchange);
-    }
-    function stickyDestroy() {
-        resizeobserver.disconnect();
-        mutationobserver.disconnect();
-        window.removeEventListener('scroll', onscroll);
-        destroy();
-    }
-    return {
-        update: stickyUpdate,
-        destroy: stickyDestroy
-    };
-}

package/components/CollapsingTable.svelte.d.ts

@@ -1,59 +0,0 @@
-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/components/ConditionalWrapper.svelte.d.ts

@@ -1,23 +0,0 @@
-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

@@ -1,107 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-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.d.ts

@@ -1,27 +0,0 @@
-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/components/PopupMenu.svelte

@@ -1,279 +0,0 @@
-<script >import { createEventDispatcher, onDestroy, tick } from 'svelte';
-import { randomid } from 'txstate-utils';
-import { Store } from '@txstate-mws/svelte-store';
-import { glue, portal } from '../actions';
-import ScreenReaderOnly from './ScreenReaderOnly.svelte';
-const dispatch = createEventDispatcher();
-export let menushown = false;
-export let menuContainerClass = '';
-export let menuClass = '';
-export let menuItemClass = '';
-export let menuItemHilitedClass = '';
-export let menuItemSelectedClass = '';
-export let items = [];
-export let buttonelement;
-export let align = 'auto';
-export let cover = false;
-export let showSelected = true;
-export let width = undefined;
-export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
-export let usePortal = undefined;
-export let emptyText = undefined;
-export let value = undefined;
-let hilited = undefined;
-let menuelement;
-const itemelements = [];
-const menuid = randomid();
-let firstactive = 0;
-let lastactive = items.length - 1;
-function hiddenItem(item) {
-    return !!item && !showSelected && item.value === value;
-}
-async function reactToItems(..._) {
-    firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm));
-    lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1;
-    if (hilited && items[hilited]?.disabled)
-        hilited = firstactive;
-}
-$: reactToItems(items, value);
-async function reactToMenuShown(_) {
-    if (!buttonelement) {
-        hilited = undefined;
-        return;
-    }
-    await tick();
-    if (!menushown) {
-        hilited = undefined;
-        buttonelement.removeAttribute('aria-controls');
-        buttonelement.setAttribute('aria-expanded', 'false');
-    }
-    else {
-        buttonelement.setAttribute('aria-controls', menuid);
-        buttonelement.setAttribute('aria-expanded', 'true');
-    }
-    buttonelement.focus();
-}
-$: reactToMenuShown(menushown);
-function move(idx) {
-    if (!menushown)
-        return;
-    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) {
-    if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        if (menushown) {
-            let i = (hilited ?? firstactive - 1) + 1;
-            while (items[i]?.disabled || hiddenItem(items[i]))
-                i++;
-            move(i);
-        }
-        else {
-            menushown = true;
-            move(firstactive);
-        }
-    }
-    else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        if (menushown) {
-            let i = (hilited ?? lastactive + 1) - 1;
-            while (items[i]?.disabled || hiddenItem(items[i]))
-                i--;
-            move(i);
-        }
-        else {
-            menushown = true;
-            move(lastactive);
-        }
-    }
-    else if (e.key === 'Enter') {
-        e.preventDefault();
-        if (menushown) {
-            menushown = false;
-            if (typeof hilited !== 'undefined') {
-                value = items[hilited]?.value;
-                dispatch('change', items[hilited]);
-            }
-        }
-        else {
-            menushown = true;
-            move(firstactive);
-        }
-    }
-    else if (e.key === ' ') {
-        // buttonelement might be a text input if this popup is searchable,
-        // so we want to allow spaces to be entered without changing the menu situation
-        if (menushown) {
-            if (typeof hilited !== 'undefined') {
-                e.preventDefault();
-                menushown = false;
-                value = items[hilited]?.value;
-                dispatch('change', items[hilited]);
-            }
-            else {
-                if (buttonelement.tagName !== 'INPUT') {
-                    e.preventDefault();
-                    menushown = false;
-                }
-            }
-        }
-        else {
-            if (buttonelement.tagName !== 'INPUT') {
-                e.preventDefault();
-                menushown = true;
-                move(firstactive);
-            }
-        }
-    }
-    else if (menushown && e.key === 'Escape') {
-        e.preventDefault();
-        e.stopPropagation();
-        menushown = false;
-    }
-}
-function onbuttonclick(e) {
-    e.preventDefault();
-    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;
-}
-function cleanup(element) {
-    if (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');
-        element.removeAttribute('aria-activedescendant');
-    }
-}
-onDestroy(() => cleanup(buttonelement));
-// if buttonelement changes we need to handle listeners and aria
-let lastbuttonelement;
-function reactToButtonElement(buttonelement) {
-    cleanup(lastbuttonelement);
-    lastbuttonelement = buttonelement;
-    if (buttonelement) {
-        buttonelement.setAttribute('aria-haspopup', 'listbox');
-        buttonelement.addEventListener('click', onbuttonclick);
-        buttonelement.addEventListener('keydown', onkeydown);
-        buttonelement.addEventListener('blur', onblur);
-    }
-}
-$: reactToButtonElement(buttonelement);
-const onclick = (item) => (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (item.disabled)
-        return;
-    menushown = false;
-    value = item.value;
-    dispatch('change', item);
-};
-$: 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 || item.value !== value}
-          <li
-            id={`${menuid}-${i}`}
-            bind:this={itemelements[i]}
-            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass || '' : ''} ${value === item.value ? menuItemSelectedClass || '' : ''}`}
-            class:disabled={!!item.disabled}
-            class:hilited={!menuItemHilitedClass && i === hilited}
-            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={value === item.value}>{item.label || item.value}</slot></li>
-        {/if}
-      {/each}
-      {#if items.length === 0}
-        <li role="option" class={`${menuItemClass} disabled`} aria-live="assertive">
-          <slot name="noresults">
-            {#if !emptyText}
-              <span aria-hidden="true">{'¯\\_(ツ)_/¯'}</span><ScreenReaderOnly>{emptyText || 'empty popup menu'}</ScreenReaderOnly>
-            {:else}
-              {emptyText}
-            {/if}
-          </slot>
-        </li>
-      {/if}
-    </ul>
-  </div>
-{/if}
-
-<style>
-  div {
-    position: absolute !important;
-  }
-  ul {
-    list-style: none;
-  }
-  ul.defaultmenu {
-    margin: 0;
-    padding: 0.4em;
-    background: white;
-    border: 1px solid slategray;
-    border-radius: 3px;
-    min-width: 10em;
-    max-height: 20em;
-    overflow-y: auto;
-  }
-  ul.defaultmenu li.disabled {
-    color: rgba(0,0,0,0.6);
-  }
-  ul.defaultmenu::-webkit-scrollbar {
-    appearance: none;
-    width: 7px;
-  }
-  ul.defaultmenu::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: rgba(0,0,0,.5);
-    box-shadow: 0 0 1px rgba(255,255,255,.5);
-  }
-  ul.defaultmenu::-webkit-scrollbar-track {
-    background-color: rgba(0,0,0,.1);
-  }
-  li {
-    cursor: pointer;
-  }
-  li.hilited {
-    background: lightblue;
-  }
-  li.disabled {
-    cursor: auto;
-  }
-  li.selected {
-    position: relative;
-  }
-  ul.hasSelected li {
-    padding-left: 1.4em;
-  }
-  li.selected:after {
-    content: ' ';
-    position: absolute;
-    left: 0.5em;
-    top: calc(50% - 0.11em);
-    transform: translateY(-50%) rotate(38deg);
-    display: block;
-    height: 0.786em;
-    width: 0.4286em;
-    border-bottom: 0.2em solid;
-    border-right: 0.2em solid;
-    box-sizing: border-box;
-  }
-</style>