@txstate-mws/svelte-components 1.6.7 → 1.6.8

package/dist/components/ButtonMenu.svelte

@@ -1,4 +1,4 @@
-<script>import { randomid } from 'txstate-utils';
+<script lang="ts">import { randomid } from 'txstate-utils';
 import { Store } from '@txstate-mws/svelte-store';
 import PopupMenu from './PopupMenu.svelte';
 export let buttonelement;

package/dist/components/ButtonMenu.svelte.d.ts

@@ -5,27 +5,27 @@ import type { PopupMenuTypes } from '../types';
 declare const __propDef: {
     props: {
         buttonelement: HTMLButtonElement;
-        items?: PopupMenuTypes[] | undefined;
-        menushown?: boolean | undefined;
+        items?: PopupMenuTypes[];
+        menushown?: boolean;
         value?: string | undefined;
-        align?: GlueAlignOpts | undefined;
-        cover?: boolean | undefined;
-        showSelected?: boolean | undefined;
+        align?: GlueAlignOpts;
+        cover?: boolean;
+        showSelected?: boolean;
         width?: string | undefined;
-        computedalign?: Store<GlueAlignStore> | undefined;
-        gap?: number | undefined;
-        adjustparentheight?: boolean | undefined;
+        computedalign?: Store<GlueAlignStore>;
+        gap?: number;
+        adjustparentheight?: boolean;
         usePortal?: HTMLElement | true | undefined;
-        loading?: boolean | undefined;
+        loading?: boolean;
         hilited?: number | undefined;
-        menuid?: string | undefined;
+        menuid?: string;
         emptyText?: string | undefined;
-        menuContainerClass?: string | undefined;
-        menuClass?: string | undefined;
-        menuItemClass?: string | undefined;
-        menuItemHilitedClass?: string | undefined;
-        menuItemSelectedClass?: string | undefined;
-        menuDividerClass?: string | undefined;
+        menuContainerClass?: string;
+        menuClass?: string;
+        menuItemClass?: string;
+        menuItemHilitedClass?: string;
+        menuItemSelectedClass?: string;
+        menuDividerClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Card.svelte

@@ -1,7 +1,7 @@
 <!-- @component
   [`Card`](https://github.com/txstate-etc/svelte-components/blob/main/src/lib/components/Card.svelte)
 -->
-<script>export let className = '';
+<script lang="ts">export let className = '';
 import { getContext } from 'svelte';
 import { resize, passActions } from '../actions';
 import { CARDLAYOUT } from '../types';

package/dist/components/Card.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '../actions';
 declare const __propDef: {
     props: {
-        className?: string | undefined;
-        use?: HTMLActionEntry[] | undefined;
+        className?: string;
+        use?: HTMLActionEntry[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CardLayout.svelte

@@ -1,7 +1,7 @@
 <!-- @component
   [`CardLayout`](https://github.com/txstate-etc/svelte-components/blob/main/src/lib/components/CardLayout.svelte)
 -->
-<script>import { onDestroy, tick, setContext, onMount } from 'svelte';
+<script lang="ts">import { onDestroy, tick, setContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 import { resize, passActions } from '../actions';
 import { CARDLAYOUT } from '../types';

package/dist/components/CardLayout.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '../actions';
 declare const __propDef: {
     props: {
-        maxwidth?: number | undefined;
-        preserveorder?: boolean | undefined;
-        gutter?: number | undefined;
-        className?: string | undefined;
-        use?: HTMLActionEntry[] | undefined;
+        maxwidth?: number;
+        preserveorder?: boolean;
+        gutter?: number;
+        className?: string;
+        use?: HTMLActionEntry[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CollapsingTable.svelte

@@ -5,7 +5,7 @@ This component is meant to help make tables responsive by eliminating columns (f
 When there are hidden columns, the last column header becomes a dropdown button allowing the selection of another column
 to be displayed instead.
 -->
-<script>import { Store } from '@txstate-mws/svelte-store';
+<script lang="ts">import { Store } from '@txstate-mws/svelte-store';
 import { derived } from 'svelte/store';
 import { classes } from '../util';
 import DefaultPopupMenu from './PopupMenu.svelte';

package/dist/components/CollapsingTable.svelte.d.ts

@@ -3,21 +3,21 @@ import type { CollapsingTableColumn } from '../types';
 import DefaultPopupMenu from './PopupMenu.svelte';
 declare const __propDef: {
     props: {
-        tableClass?: string | undefined;
-        bodyRowClass?: string | undefined;
-        bodyCellClass?: string | undefined;
-        headerRowClass?: string | undefined;
-        headerCellClass?: string | undefined;
-        menuContainerClass?: string | undefined;
-        menuClass?: string | undefined;
-        menuItemClass?: string | undefined;
-        menuItemHilitedClass?: string | undefined;
+        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 | undefined;
-        PopupMenu?: typeof DefaultPopupMenu | undefined;
-        slots?: Record<string, boolean> | undefined;
-        stickyheader?: boolean | undefined;
+        defaultCellWidth?: number;
+        PopupMenu?: typeof DefaultPopupMenu;
+        slots?: Record<string, boolean>;
+        stickyheader?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,7 +25,7 @@ declare const __propDef: {
     slots: {
         headercell: {
             column: CollapsingTableColumn & {
-                widthPercent?: number | undefined;
+                widthPercent?: number;
             };
             key: string;
             title: string;
@@ -34,7 +34,7 @@ declare const __propDef: {
         };
         dropicon: {
             column: CollapsingTableColumn & {
-                widthPercent?: number | undefined;
+                widthPercent?: number;
             };
             item: undefined;
             value: undefined;

package/dist/components/ConditionalWrapper.svelte

@@ -22,7 +22,7 @@ With this component, you can de-duplicate like this:
 Any props you provide (except the ConditionalWrapper props like `condition`) will pass through
 to the wrapper element/component, if it gets inserted.
 -->
-<script>export let condition;
+<script lang="ts">export let condition;
 export let component = undefined;
 export let a = false;
 export let span = false;

package/dist/components/FocusLock.svelte

@@ -12,11 +12,11 @@ When they do, the escape event will be fired, allowing you to remove the dialog.
 `FocusLock`s can be nested. The user will be trapped inside the deepest `FocusLock` present in the DOM.
 When it goes away, they'll be trapped inside the previous `FocusLock`, and so on.
 -->
-<script context="module">export const FocusLockStack = [];
+<script context="module" lang="ts">export const FocusLockStack = [];
 const waitAtick = typeof requestAnimationFrame !== 'undefined' ? (resolve) => requestAnimationFrame(resolve) : resolve => resolve(0);
 </script>
 
-<script>import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+<script lang="ts">import { onMount, onDestroy, createEventDispatcher } from 'svelte';
 import { tabbable } from 'tabbable';
 import { randomid, sleep } from 'txstate-utils';
 import { buttonify } from '../actions';

package/dist/components/FocusLock.svelte.d.ts

@@ -7,16 +7,16 @@ export declare const FocusLockStack: {
 }[];
 declare const __propDef: {
     props: {
-        escapable?: boolean | undefined;
-        hidefocus?: boolean | undefined;
-        hidefocuslabel?: string | undefined;
+        escapable?: boolean;
+        hidefocus?: boolean;
+        hidefocuslabel?: string;
         initialfocus?: string | undefined;
         returnfocusto?: HTMLElement | undefined;
         /** If you expect any popup menus to be added to the body, we need to know that they
           are considered to be part of the focus lock, or else the modal will be dismissed
           when the user clicks inside. Use commas to include multiple selectors. */ includeselector?: string | undefined;
-        class?: string | undefined;
-        focusId?: string | undefined;
+        class?: string;
+        focusId?: string;
     };
     events: {
         click: MouseEvent;

package/dist/components/Loading.svelte

@@ -3,7 +3,7 @@
   until the slotted content is signals it is done loading via the `loading` boolean bind at which point the slotted content
   will be rendered.
 -->
-<script>import { afterUpdate } from 'svelte';
+<script lang="ts">import { afterUpdate } from 'svelte';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 import { resize, ResizeStore } from '../actions';
 export let loading;

package/dist/components/Lottie.svelte

@@ -2,7 +2,7 @@
   The purpose of `Lottie` is to provide a [Lottie](https://www.npmjs.com/package/lottie-web) player element
   with Screen Reader compatible attributes and lables readily available through the `alt` prop.
 -->
-<script>import { onMount } from 'svelte';
+<script lang="ts">import { onMount } from 'svelte';
 import { isBlank } from 'txstate-utils';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 export let animationData;

package/dist/components/Lottie.svelte.d.ts

@@ -2,14 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         animationData: any;
-        loop?: boolean | undefined;
+        loop?: boolean;
         name?: string | undefined;
-        speed?: number | undefined;
-        direction?: 1 | -1 | undefined;
-        paused?: boolean | undefined;
+        speed?: number;
+        direction?: 1 | -1;
+        paused?: boolean;
         width?: string | undefined;
         height?: string | undefined;
-        /** `<ScreenReaderOnly>` lable to be applied. */ alt?: string | undefined;
+        /** `<ScreenReaderOnly>` lable to be applied. */ alt?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Modal.svelte

@@ -5,7 +5,7 @@ It provides only the backdrop and a scrollable container for your content. If yo
 
 Any time the Modal is in the DOM, it will take over the screen. You make it go away by removing it from the DOM.
 -->
-<script>import { createEventDispatcher, onMount } from 'svelte';
+<script lang="ts">import { createEventDispatcher, onMount } from 'svelte';
 import { randomid } from 'txstate-utils';
 import FocusLock, { FocusLockStack } from './FocusLock.svelte';
 import { portal } from '../actions';

package/dist/components/Modal.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        opaque?: boolean | undefined;
-        containerClass?: string | undefined;
-        escapable?: boolean | undefined;
-        hidefocus?: boolean | undefined;
+        opaque?: boolean;
+        containerClass?: string;
+        escapable?: boolean;
+        hidefocus?: boolean;
         hidefocuslabel?: string | undefined;
         initialfocus?: string | undefined;
         returnfocusto?: HTMLElement | undefined;
@@ -12,7 +12,7 @@ declare const __propDef: {
         /** If you expect any popup menus to be added to the body, we need to know that they
           are considered to be part of the focus lock, or else the modal will be dismissed
           when the user clicks inside. Use commas to include multiple selectors. */ includeselector?: string | undefined;
-        focusId?: string | undefined;
+        focusId?: string;
     };
     events: {
         escape: CustomEvent<any>;

package/dist/components/MultiSelect.svelte

@@ -6,7 +6,7 @@
   controlled by the parent component via the `getOptions` function that will be used as a
   debounced callback on the contents of the text input.
 -->
-<script>import { createEventDispatcher, onMount } from 'svelte';
+<script lang="ts">import { createEventDispatcher, onMount } from 'svelte';
 import { randomid, Cache, isNotBlank } from 'txstate-utils';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 import DefaultPopupMenu from './PopupMenu.svelte';

package/dist/components/MultiSelect.svelte.d.ts

@@ -8,24 +8,24 @@ declare const __propDef: {
            * Function to pass to the component that tells it how to use the text in the text input to determine what
            * `PopupMenuItem[]` should be displayed in the `PopupMenu`. Items already 'selected' from the popup menu will
            * be tracked and automatically filtered from the popup if returned as one of the `PopupMenuItem[]` by `getOptions`. */ getOptions: (search: string) => Promise<PopupMenuTypes[]> | PopupMenuTypes[];
-        id?: string | undefined;
-        disabled?: boolean | undefined;
-        menuContainerClass?: string | undefined;
-        menuClass?: string | undefined;
-        menuItemClass?: string | undefined;
-        menuItemHilitedClass?: string | undefined;
-        inputClass?: string | undefined;
-        menuDividerClass?: string | undefined;
-        /** The maximum number of selections allowed before making new selections is disabled. Default of 0 is unlimited. */ maxSelections?: number | undefined;
+        id?: string;
+        disabled?: boolean;
+        menuContainerClass?: string;
+        menuClass?: string;
+        menuItemClass?: string;
+        menuItemHilitedClass?: string;
+        inputClass?: string;
+        menuDividerClass?: string;
+        /** The maximum number of selections allowed before making new selections is disabled. Default of 0 is unlimited. */ maxSelections?: number;
         /** Consuming components may need to make decisions about what to display or return as options in the popup based
            * on what's already selected. This component property can be used to both pass an initial set of selections but
-           * it can also be bound to provide a means to inspect what's selected. */ selected?: PopupMenuItem[] | undefined;
-        /** The text to be displayed in the input text box for contextual feedback on what the input text is expecting. */ placeholder?: string | undefined;
+           * it can also be bound to provide a means to inspect what's selected. */ selected?: PopupMenuItem[];
+        /** The text to be displayed in the input text box for contextual feedback on what the input text is expecting. */ placeholder?: string;
         /** When there are no items (e.g. it's a filtered search and there were no results), we still display one
           disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */ emptyText?: string | undefined;
         usePortal?: HTMLElement | true | undefined;
         descid?: string | undefined;
-        /** You can define your own PopupMenu and pass for that to be used or accept DefaultPopupMenu. */ PopupMenu?: typeof DefaultPopupMenu | undefined;
+        /** You can define your own PopupMenu and pass for that to be used or accept DefaultPopupMenu. */ PopupMenu?: typeof DefaultPopupMenu;
     };
     events: {
         change: CustomEvent<any>;

package/dist/components/PopupMenu.svelte

@@ -2,7 +2,7 @@
   The purpose of [`PopupMenu`](https://github.com/txstate-etc/svelte-components/blob/main/docs/PopupMenu.md) is to display a menu of options to the user, activated by clicking any element
   bound to `buttonelement`. It can also be controlled from the parent, by binding the `menushown` boolean.
 -->
-<script>import { createEventDispatcher, onDestroy, tick } from 'svelte';
+<script lang="ts">import { createEventDispatcher, onDestroy, tick } from 'svelte';
 import { isNotBlank, randomid } from 'txstate-utils';
 import { Store } from '@txstate-mws/svelte-store';
 import { glue, portal } from '../actions';

package/dist/components/PopupMenu.svelte.d.ts

@@ -7,44 +7,44 @@ declare const __propDef: {
         /** The DOM element that will act as the "button" for this menu. The menu will be placed next to the
           button and be controlled by the button. Keyboard access will be enabled when the button has focus.
           This component adds all appropriate attributes (tabindex, roles, and aria) automatically. */ buttonelement: HTMLElement;
-        /** The list of menu items to be shown. Parent may change this at any time based on user activity. */ items?: PopupMenuTypes[] | undefined;
-        menushown?: boolean | undefined;
+        /** The list of menu items to be shown. Parent may change this at any time based on user activity. */ items?: PopupMenuTypes[];
+        menushown?: boolean;
         value?: string | undefined;
         /** Control where the menu will appear. Default is to use the current viewport to make a decision to
-          maximize potential for menu growth. */ align?: GlueAlignOpts | undefined;
-        /** When the menu is active, should it cover the button or be rendered above/below it? */ cover?: boolean | undefined;
+          maximize potential for menu growth. */ align?: GlueAlignOpts;
+        /** When the menu is active, should it cover the button or be rendered above/below it? */ cover?: boolean;
         /** When an item is currently selected, should it appear in the menu (with a visual indicator), or
-          simply be removed from the list (`showSelected: false`). */ showSelected?: boolean | undefined;
+          simply be removed from the list (`showSelected: false`). */ showSelected?: boolean;
         /** When defined, this width will be passed through to the menu's CSS width. Use a valid CSS dimension
           such as 33em or 159px. Generally this will be used when you need to match the menu width to something
           else, like the button. If the width is static like 100% a simple CSS rule is likely more efficient. */ width?: string | undefined;
         /** Bind this prop to receive a store that is updated each time a menu placement decision is made. Example
           of when this is useful is when you are trying to round corners of your button and need to know whether the
           menu is above or below your button so you know which corners to round and which to leave square. Note that
-          the values do not update when the menu is hidden, so you may need to rely on `menushown` as well. */ computedalign?: Store<GlueAlignStore> | undefined;
-        /** Create some spacing between the specified button element and the menu, in pixels */ gap?: number | undefined;
+          the values do not update when the menu is hidden, so you may need to rely on `menushown` as well. */ computedalign?: Store<GlueAlignStore>;
+        /** Create some spacing between the specified button element and the menu, in pixels */ gap?: number;
         /** Set to `true` if you want the parent element's styling to increase its minHeight when necessary. Useful
-          for parent elements not styled for variable size children and which you want override the the size of. */ adjustparentheight?: boolean | undefined;
+          for parent elements not styled for variable size children and which you want override the the size of. */ adjustparentheight?: boolean;
         /**  If the menu would be clipped by an `overflow: hidden`, you can set this prop and it will be placed in
           the specified container, or the `document.body` if you simply say `true`. Placement will still be calculated
           correctly since it uses positon fixed for placement. */ usePortal?: HTMLElement | true | undefined;
         /** Useful for when your `items` need to be fetched but you want the associated element shown. Set to loading
-          until they're ready to be displayed and the popup menu will not be shown until the `loading` bind is `true`. */ loading?: boolean | undefined;
+          until they're ready to be displayed and the popup menu will not be shown until the `loading` bind is `true`. */ loading?: boolean;
         /** A bindable value for inspecting which item in `items` is currently highlighted as the item currently
           active in the list. This is not the same as `value` and the highlighted item may or may not be selected as
           for the `value` of the field. */ hilited?: number | undefined;
-        /** The id of the <ul> element that is the displayed list of items. */ menuid?: string | undefined;
+        /** The id of the <ul> element that is the displayed list of items. */ menuid?: string;
         /** When there are no items (e.g. it's a filtered search and there were no results), we still display one
           disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */ emptyText?: string | undefined;
-        menuContainerClass?: string | undefined;
-        menuClass?: string | undefined;
-        menuItemClass?: string | undefined;
-        menuItemHilitedClass?: string | undefined;
-        menuItemSelectedClass?: string | undefined;
-        menuDividerClass?: string | undefined;
-        hideSelectedIndicator?: boolean | undefined;
-        hideEmptyText?: boolean | undefined;
-        usemenurole?: boolean | undefined;
+        menuContainerClass?: string;
+        menuClass?: string;
+        menuItemClass?: string;
+        menuItemHilitedClass?: string;
+        menuItemSelectedClass?: string;
+        menuDividerClass?: string;
+        hideSelectedIndicator?: boolean;
+        hideEmptyText?: boolean;
+        usemenurole?: boolean;
     };
     slots: {
         default: {

package/dist/components/ScreenReaderOnly.svelte

@@ -2,7 +2,7 @@
   This component is for adding text that can be read by screen readers while remaining invisible to regular users.
   Useful for when aria-label isn't supported with the drawback that it can show up in copy/paste selections.
 -->
-<script>/** An id to bind with the `<span>` used to implement this component. */
+<script lang="ts">/** An id to bind with the `<span>` used to implement this component. */
 export let id = undefined;
 export let arialive = undefined;
 export let ariaatomic = undefined;

package/dist/components/ScreenReaderOnly.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         /** An id to bind with the `<span>` used to implement this component. */ id?: string | undefined;
-        arialive?: 'off' | 'assertive' | 'polite' | undefined;
-        ariaatomic?: boolean | 'false' | 'true' | undefined;
+        arialive?: "off" | "assertive" | "polite" | undefined;
+        ariaatomic?: boolean | "false" | "true" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/stores/toasts.d.ts

@@ -1,5 +1,6 @@
 import { Store } from '@txstate-mws/svelte-store';
 export interface Toast {
+    title?: string;
     message: string;
     /** default is error */
     type?: 'error' | 'warning' | 'info' | 'success';
@@ -10,7 +11,11 @@ export interface Toast {
      */
     ttlMs?: number;
 }
-export interface ToastStorage extends Required<Toast> {
+export interface ToastStorage {
+    title?: string;
+    message: string;
+    type: 'error' | 'warning' | 'info' | 'success';
+    ttlMs: number;
     /** each toast gets a random id so it can be dismissed by user interaction */
     id: string;
     /** when the toast was created, so we know when it expires */
@@ -19,7 +24,8 @@ export interface ToastStorage extends Required<Toast> {
     suspended: boolean;
 }
 export declare class ToastStore extends Store<ToastStorage[]> {
-    add(msg: string, type?: Toast['type'], ttlMs?: number): void;
+    add(toast: Toast): any;
+    add(msg: string, type?: Toast['type'], ttlMs?: number): any;
     close(id: string): void;
     suspend(id: string): void;
     resume(id: string): void;

package/dist/stores/toasts.js

@@ -1,18 +1,26 @@
 import { Store } from '@txstate-mws/svelte-store';
 import { randomid } from 'txstate-utils';
 export class ToastStore extends Store {
-    add(msg, type, ttlMs) {
-        const resolvedType = type ?? 'error';
+    add(msgOrToast, type, ttlMs) {
+        const toast = typeof msgOrToast === 'string'
+            ? {
+                message: msgOrToast,
+                type,
+                ttlMs
+            }
+            : msgOrToast;
+        const resolvedType = toast.type ?? 'error';
         const id = randomid();
         const stored = {
             id,
             stamp: new Date(),
-            message: msg,
+            title: toast.title,
+            message: toast.message,
             type: resolvedType,
             suspended: false,
-            ttlMs: ttlMs ?? (['error', 'warning'].includes(resolvedType) ? 8000 : 5000)
+            ttlMs: toast.ttlMs ?? (['error', 'warning'].includes(resolvedType) ? 8000 : 5000)
         };
-        this.update(v => [...v.filter(t => t.message !== stored.message), stored]);
+        this.update(v => [...v.filter(t => t.message !== stored.message || t.title !== stored.title), stored]);
         setTimeout(() => { this.clean(); }, stored.ttlMs);
     }
     close(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",