@txstate-mws/svelte-components 1.4.4 → 1.4.6

package/README.md

@@ -1,20 +1,31 @@
 # 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)
+A set of generically useful components and related `use:` actions for svelte.
+
+## `<Components>`
+*Italicized entries* point to source only (no .md file).
+- *[Card](./src/lib/components/Card.svelte)*
+- *[CardLayout](./src/lib/components/CardLayout.svelte)*
+- [CollapsingTable](./docs/CollapsingTable.md)
+- [ConditionalWrapper](./docs/ConditionalWrapper.md)
+- [FocusLock](./docs/Modal.md#FocusLock)
+- *[Loading](./src/lib/components/Loading.svelte)*
+- *[Lottie](./src/lib/components/Lottie.svelte)*
+- [Modal](./docs/Modal.md#Modal)
+- *[MultiSelect](./src/lib/components/MultiSelect.svelte)*
+- [PopupMenu](./docs/PopupMenu.md)
+- [ScreenReaderOnly](./docs/ScreenReaderOnly.md)
+
+## `use:` Actions
+*Italicized entries* point to source only (no .md file).
+- [buttonify](./docs/actions.md#buttonify)
+- *[elementqueries](./src/lib/actions/elementqueries.ts)*
+- [glue](./docs/actions.md#glue)
+- [offset](./docs/actions.md#offset)
+- *[passActions](./src/lib/actions/passactions.ts)*
+- [portal](./docs/actions.md#portal)
+- [resize](./docs/actions.md#resize)
+- *[sticky](./src/lib/actions/sticky.ts)*
+- *[stickyfixed](./src/lib/actions/stickyfixed.ts)*
 
 ## Developing
 

package/dist/actions/elementqueries.js

@@ -65,7 +65,7 @@ class ElementQueries {
         const m = document.location.hash.match(/^#([a-z][\w:.-]*)$/i);
         if (m) {
             const id = m[1];
-            requestAnimationFrame(() => document.getElementById(id) || document.querySelector(`[name="${id}"]`).scrollIntoView(true));
+            requestAnimationFrame(() => { document.getElementById(id) || document.querySelector(`[name="${id}"]`).scrollIntoView(true); });
         }
     }
     fullresync() {
@@ -75,7 +75,7 @@ class ElementQueries {
     #activate() {
         this.fullresync();
         window.addEventListener('resize', this.#boundRefresh);
-        this.#mutationobserver = new MutationObserver(() => this.fullresync());
+        this.#mutationobserver = new MutationObserver(() => { this.fullresync(); });
         this.#mutationobserver.observe(document.body, {
             subtree: true,
             childList: true,

package/dist/actions/passactions.d.ts

@@ -3,8 +3,8 @@ export interface SvelteActionReturnType<P> {
     destroy?: () => void;
 }
 export type SvelteHTMLActionType<P = any> = (node: HTMLElement, params?: P) => SvelteActionReturnType<P> | undefined;
-export type HTMLActionEntry<P extends any = any> = SvelteHTMLActionType<P> | [SvelteHTMLActionType<P>, P];
+export type HTMLActionEntry<P = any> = SvelteHTMLActionType<P> | [SvelteHTMLActionType<P>, P];
 export type SvelteSVGActionType<P = any> = (node: SVGElement, params?: P) => SvelteActionReturnType<P> | undefined;
-export type SVGActionEntry<P extends any = any> = SvelteSVGActionType<P> | [SvelteSVGActionType<P>, P];
+export type SVGActionEntry<P = any> = SvelteSVGActionType<P> | [SvelteSVGActionType<P>, P];
 export declare function passActions(node: HTMLElement, actions: HTMLActionEntry[]): SvelteActionReturnType<HTMLActionEntry[]>;
 export declare function passActions(node: SVGElement, actions: SVGActionEntry[]): SvelteActionReturnType<SVGActionEntry[]>;

package/dist/actions/resize.d.ts

@@ -13,7 +13,7 @@ interface ResizeConfig {
 export declare class ResizeStore extends Store<ElementSize> {
     constructor(initialState?: ElementSize);
 }
-export declare function resize(el: HTMLElement, config?: ResizeConfig): void | {
+export declare function resize(el: HTMLElement, config?: ResizeConfig): {
     update(newConfig?: ResizeConfig): void;
     destroy(): void;
 };

package/dist/actions/resize.js

@@ -31,8 +31,10 @@ export function resize(el, config) {
             el.dispatchEvent(new CustomEvent('resize', { detail: current }));
         }
     }
-    if (typeof ResizeObserver === 'undefined')
-        return watch(); // support SSR
+    if (typeof ResizeObserver === 'undefined') {
+        watch();
+        return;
+    } // support SSR
     let observer = new ResizeObserver(config?.debounce ? debounced(watch, config.debounce) : watch);
     observer.observe(el);
     watch();

package/dist/components/FocusLock.svelte

@@ -2,11 +2,11 @@
 const waitAtick = typeof requestAnimationFrame !== 'undefined' ? resolve => requestAnimationFrame(resolve) : resolve => resolve(0);
 </script>
 
-<script>export let returnfocusto = undefined;
-export let initialfocus = undefined;
+<script>export let escapable = true;
 export let hidefocus = true;
 export let hidefocuslabel = 'focus is above modal dialog, start tabbing';
-export let escapable = true;
+export let initialfocus = undefined;
+export let returnfocusto = 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

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

@@ -5,11 +5,11 @@ export declare const FocusLockStack: {
 }[];
 declare const __propDef: {
     props: {
-        returnfocusto?: HTMLElement | null | undefined;
-        initialfocus?: string | undefined;
+        escapable?: boolean;
         hidefocus?: boolean;
         hidefocuslabel?: string;
-        escapable?: boolean;
+        initialfocus?: string | undefined;
+        returnfocusto?: HTMLElement | null | 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

package/dist/components/Modal.svelte

@@ -1,10 +1,10 @@
-<script>export let escapable = true;
+<script>export let opaque = false;
+export let containerClass = '';
+export let escapable = true;
 export let hidefocus = true;
 export let hidefocuslabel = undefined;
-export let returnfocusto = undefined;
 export let initialfocus = undefined;
-export let containerClass = '';
-export let opaque = false;
+export let returnfocusto = undefined;
 export let usePortal = undefined;
 /**
  * If you expect any popup menus to be added to the body, we need to know that they

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

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        opaque?: boolean;
+        containerClass?: string;
         escapable?: boolean;
         hidefocus?: boolean;
         hidefocuslabel?: string | undefined;
-        returnfocusto?: HTMLElement | undefined;
         initialfocus?: string | undefined;
-        containerClass?: string;
-        opaque?: boolean;
+        returnfocusto?: HTMLElement | undefined;
         usePortal?: HTMLElement | undefined;
         /**
            * If you expect any popup menus to be added to the body, we need to know that they

package/dist/components/MultiSelect.svelte

@@ -16,6 +16,7 @@ export let selected = [];
 export let placeholder = '';
 export let emptyText = undefined;
 export let usePortal = undefined;
+export let descid = undefined;
 export let PopupMenu = DefaultPopupMenu;
 let menushown;
 let loading = false;
@@ -24,7 +25,6 @@ let hilitedpill;
 let inputvalue = '';
 let popupvalue = undefined;
 let inputelement;
-const descriptionid = randomid();
 const dispatch = createEventDispatcher();
 const optionsCache = new Cache(async (ipt) => {
     return await getOptions(ipt);
@@ -132,10 +132,10 @@ $: reactToHilite(hilitedpill, id);
         bind:this={inputelement} bind:value={inputvalue} on:blur
         on:focus={inputfocus} on:keydown={inputkeydown}
         autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"
-        aria-describedby="{descriptionid}">
+        aria-describedby={descid}>
     </li>
   </ul>
-  <ScreenReaderOnly id={descriptionid} arialive="assertive">
+  <ScreenReaderOnly arialive="assertive">
     <span>{selected.length ? selected.length + ' selected' : 'none selected'}, select {maxSelections ? 'up to ' + maxSelections : 'multiple'}, 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>

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

@@ -19,6 +19,7 @@ declare const __propDef: {
         placeholder?: string;
         emptyText?: string | undefined;
         usePortal?: HTMLElement | true | undefined;
+        descid?: string | undefined;
         PopupMenu?: typeof DefaultPopupMenu;
     };
     events: {

package/dist/components/PopupMenu.svelte

@@ -5,26 +5,26 @@ 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 items = [];
+export let menushown = false;
+export let value = undefined;
 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 adjustparentheight = false;
-export let loading = false;
 export let usePortal = undefined;
-export let emptyText = undefined;
-export let value = undefined;
+export let loading = false;
 export let hilited = undefined;
 export let menuid = randomid();
+export let emptyText = undefined;
+export let menuContainerClass = '';
+export let menuClass = '';
+export let menuItemClass = '';
+export let menuItemHilitedClass = '';
+export let menuItemSelectedClass = '';
 let menuelement;
 const itemelements = [];
 let firstactive = 0;
@@ -47,13 +47,17 @@ async function reactToMenuShown(_) {
     await tick();
     if (!menushown) {
         buttonelement.removeAttribute('aria-controls');
+        buttonelement.removeAttribute('aria-owns');
         buttonelement.setAttribute('aria-expanded', 'false');
         if (hilited)
             buttonelement.removeAttribute('aria-activedescendant');
         hilited = undefined;
     }
     else {
-        buttonelement.setAttribute('aria-controls', menuid);
+        if (buttonelement instanceof HTMLInputElement)
+            buttonelement.setAttribute('aria-owns', menuid);
+        else
+            buttonelement.setAttribute('aria-controls', menuid);
         buttonelement.setAttribute('aria-expanded', 'true');
         if (buttonelement !== document.activeElement)
             buttonelement.focus();

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

@@ -4,26 +4,26 @@ 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;
+        items?: PopupMenuItem[];
+        menushown?: boolean;
+        value?: string | undefined;
         align?: GlueAlignOpts;
         cover?: boolean;
         showSelected?: boolean;
         width?: string | undefined;
         computedalign?: Store<GlueAlignStore>;
         adjustparentheight?: boolean;
-        loading?: boolean;
         usePortal?: HTMLElement | true | undefined;
-        emptyText?: string | undefined;
-        value?: string | undefined;
+        loading?: boolean;
         hilited?: number | undefined;
         menuid?: string;
+        emptyText?: string | undefined;
+        menuContainerClass?: string;
+        menuClass?: string;
+        menuItemClass?: string;
+        menuItemHilitedClass?: string;
+        menuItemSelectedClass?: string;
     };
     events: {
         change: CustomEvent<any>;

package/dist/components/ScreenReaderOnly.svelte

@@ -1,3 +1,17 @@
+<!-- @component
+  This component is for adding text that can be read by screen readers while remaining invisible to regular users.
+  ```svelte
+  <ScreenReaderOnly {id} {arialive} {ariaatomic}>
+    {`Some descriptive text to be read about the component by screen readers.`}
+  </ScreenReaderOnly>
+  ```
+  #### Properties
+  ```ts
+  id?: string|undefined = undefined // Any ID you'd like to bind to the underlying <span>.
+  arialive?: 'off'|'assertive'|'polite'|undefined = undefined
+  ariaatomic?: boolean|'false'|'true'|undefined = undefined
+  ```
+-->
 <script>export let id = undefined;
 export let arialive = undefined;
 export let ariaatomic = undefined;

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

@@ -15,6 +15,20 @@ declare const __propDef: {
 export type ScreenReaderOnlyProps = typeof __propDef.props;
 export type ScreenReaderOnlyEvents = typeof __propDef.events;
 export type ScreenReaderOnlySlots = typeof __propDef.slots;
+/**
+ * This component is for adding text that can be read by screen readers while remaining invisible to regular users.
+ * ```svelte
+ * <ScreenReaderOnly {id} {arialive} {ariaatomic}>
+ *   {`Some descriptive text to be read about the component by screen readers.`}
+ * </ScreenReaderOnly>
+ * ```
+ * #### Properties
+ * ```ts
+ * id?: string|undefined = undefined // Any ID you'd like to bind to the underlying <span>.
+ * arialive?: 'off'|'assertive'|'polite'|undefined = undefined
+ * ariaatomic?: boolean|'false'|'true'|undefined = undefined
+ * ```
+ */
 export default class ScreenReaderOnly extends SvelteComponentTyped<ScreenReaderOnlyProps, ScreenReaderOnlyEvents, ScreenReaderOnlySlots> {
 }
 export {};

package/dist/types/CardLayout.d.ts

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

package/dist/types/CollapsingTable.d.ts

@@ -1,3 +1,6 @@
+/** ```ts
+{ key: string, title?: string, width?: number, neverhide?: boolean, bodyCellClass?: string, headerCellClass?: string }
+``` */
 export interface CollapsingTableColumn {
     key: string;
     title?: string;

package/dist/types/PopupMenu.d.ts

@@ -1,3 +1,6 @@
+/** ```ts
+{ value: string, lable? string, disabled?: boolean }
+``` */
 export interface PopupMenuItem {
     value: string;
     label?: string;

package/dist/util/util.d.ts

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

package/package.json

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