@txstate-mws/svelte-components 1.1.0 → 1.1.1

package/components/Modal.svelte.d.ts

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

package/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

@@ -0,0 +1,287 @@
+<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';
+import { modifierKey } from '../util';
+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;
+export 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) {
+        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();
+    }
+}
+$: 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 (modifierKey(e))
+        return;
+    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;
+            tick().then(() => 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;
+            tick().then(() => 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;
+            tick().then(() => 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;
+                tick().then(() => move(firstactive));
+            }
+        }
+    }
+    else if (menushown && e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        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))) {
+        blurTimer = requestAnimationFrame(() => { 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>

package/components/PopupMenu.svelte.d.ts

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

package/{src/lib/components → components}/ScreenReaderOnly.svelte

@@ -1,7 +1,6 @@
-<script lang="ts">
-  export let id: string|undefined = undefined
-  export let arialive: 'off' | 'assertive' | 'polite' | undefined = undefined
-  export let ariaatomic: boolean | 'false' | 'true' | undefined = undefined
+<script >export let id = undefined;
+export let arialive = undefined;
+export let ariaatomic = undefined;
 </script>
 
 <style>

package/components/ScreenReaderOnly.svelte.d.ts

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

package/components/index.d.ts

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

@@ -0,0 +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/index.d.ts

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

package/index.js

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