@txstate-mws/svelte-components 1.6.11 → 1.6.13

package/dist/actions/elementqueries.d.ts

@@ -4,18 +4,21 @@ declare class ElementQueries {
     refresh(): void;
     fullresync(): void;
     activate(): void;
-    subscribe(el: HTMLElement, store?: WritableSubject<{
+    subscribe<S extends {
         width: number;
-    }>): () => void;
+    }>(el: HTMLElement, store?: WritableSubject<S>): () => void;
 }
 export declare const elementqueries: ElementQueries;
-interface EqOpts {
-    store: WritableSubject<{
-        width: number;
-    }>;
-}
-export declare function eq(el: HTMLElement, opts?: EqOpts): {
-    update(opts?: EqOpts): void;
+export declare function eq<S extends {
+    width: number;
+} = {
+    width: number;
+}>(el: HTMLElement, opts?: {
+    store: WritableSubject<S>;
+}): {
+    update(opts?: {
+        store: WritableSubject<S>;
+    }): void;
     destroy(): void;
 };
 export {};

package/dist/actions/elementqueries.js

@@ -7,15 +7,15 @@ class ElementQueries {
     #subscribers = 0;
     #stores = new Map();
     #processwidths() {
-        for (let i = 0; i < this.#watchlist.length; i++) {
+        for (const layer of this.#watchlist) {
             const widths = [];
             const attrs = [];
-            for (let j = 0; j < this.#watchlist[i].length; j++) {
-                widths.push(this.#watchlist[i][j].offsetWidth);
-                attrs.push(this.#watchlist[i][j].getAttribute('data-eq'));
+            for (const el of layer) {
+                widths.push(el.offsetWidth);
+                attrs.push(el.getAttribute('data-eq'));
             }
-            for (let j = 0; j < this.#watchlist[i].length; j++) {
-                const el = this.#watchlist[i][j];
+            for (let j = 0; j < layer.length; j++) {
+                const el = layer[j];
                 const w = widths[j];
                 let attrstr = '';
                 let finalw = 1600;
@@ -62,10 +62,10 @@ class ElementQueries {
     #gotoanchor() {
         // since we are dramatically resizing, we need to scroll to the proper place for an
         // anchor tag
-        const m = document.location.hash.match(/^#([a-z][\w:.-]*)$/i);
+        const m = document.location.hash.match(/^#([a-z][a-zA-Z0-9_:.\-]*)$/iv);
         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() {
@@ -100,7 +100,7 @@ class ElementQueries {
     // instead of faithfully subscribing and unsubscribing, so we'll add a subscriber that can't be
     // decremented and it will stay activated forever
     activate() {
-        this.#subscribers++;
+        this.#subscribers += 1;
         this.#activateRaw();
     }
     #deactivate() {
@@ -111,14 +111,15 @@ class ElementQueries {
         this.#hasInit = false;
     }
     subscribe(el, store) {
-        this.#subscribers++;
+        this.#subscribers += 1;
         if (store)
             this.#stores.set(el, store);
         else
             this.#stores.delete(el);
         this.#activateRaw();
         return () => {
-            if (--this.#subscribers === 0)
+            this.#subscribers -= 1;
+            if (this.#subscribers === 0)
                 this.#deactivate();
         };
     }

package/dist/actions/glue.d.ts

@@ -1,17 +1,74 @@
 import type { SettableSubject } from '@txstate-mws/svelte-store';
-export type GlueAlignOpts = 'auto' | 'bottomleft' | 'bottomright' | 'topleft' | 'topright';
+export type GlueAlignOpts = 'auto' | 'bottomleft' | 'bottomright' | 'topleft' | 'topright' | 'top' | 'bottom' | 'left' | 'right' | 'autoleft' | 'autoright' | 'topauto' | 'bottomauto' | 'automiddle' | 'middleauto' | 'middle';
 export interface GlueArgs<T extends GlueAlignStore = GlueAlignStore> {
-    target: HTMLElement;
+    /**
+     * The HTML element to which the element should be glued. The target remains where
+     * it is; the element you placed the glue action on will become position: fixed and
+     * move to align with the target.
+     */
+    target?: HTMLElement;
+    /**
+     * How to align the element relative to the target.
+     *
+     * Corner alignments:
+     * - `topleft`: element's bottom-left corner meets target's top-left corner
+     * - `topright`: element's bottom-right corner meets target's top-right corner
+     * - `bottomleft`: element's top-left corner meets target's bottom-left corner
+     * - `bottomright`: element's top-right corner meets target's bottom-right corner
+     *
+     * Side alignments (centered on the midpoint of the side):
+     * - `top`: element centered above target
+     * - `bottom`: element centered below target
+     * - `left`: element centered to the left of target
+     * - `right`: element centered to the right of target
+     *
+     * Auto alignments (choose based on available viewport space):
+     * - `auto`: choose between all four corners
+     * - `autoleft`: choose between `topleft` and `bottomleft`
+     * - `autoright`: choose between `topright` and `bottomright`
+     * - `topauto`: choose between `topleft` and `topright`
+     * - `bottomauto`: choose between `bottomleft` and `bottomright`
+     * - `automiddle`: choose between `top` and `bottom`
+     * - `middleauto`: choose between `left` and `right`
+     * - `middle`: choose between `top`, `bottom`, `left`, and `right`, or with `cover` set to true, simply center over the target
+     *
+     * When `cover` is false (default), the element is placed adjacent to the target.
+     * When `cover` is true, the element overlaps the target from the aligned side.
+     *
+     * @default 'auto'
+     */
     align?: GlueAlignOpts;
+    /**
+     * Adjusts the alignment setting behavior such that now the element will cover the target.
+     */
     cover?: boolean;
+    /**
+     * A pixel margin between the element and the target. When used with `cover`, will reveal
+     * a gap's worth of pixels of the target.
+     */
     gap?: number;
+    /**
+     * When true, increases the parent element's `min-height` to account for
+     * the positioned element's size, preventing the parent from collapsing
+     * when its child becomes `position: fixed`. Ignored if the parent has
+     * `overflow-y: auto`. The original `min-height` is restored on destroy.
+     *
+     * @default false
+     */
     adjustparentheight?: boolean;
+    /**
+     * The store that contains information about the alignment of the element. With align
+     * set to `auto`, this will tell you quickly which alignment is currently active.
+     */
     store?: SettableSubject<T>;
 }
 export interface GlueAlignStore {
-    valign: 'bottom' | 'top';
-    halign: 'left' | 'right';
+    valign: 'bottom' | 'top' | 'center';
+    halign: 'left' | 'right' | 'center';
 }
+/**
+ * Make this element `position: fixed` and move it around to align with the target element.
+ */
 export declare function glue(el: HTMLElement, { target, align, cover, gap, adjustparentheight, store }: GlueArgs): {
     update({ target: utarget, align: ualign, cover: ucover, gap: ugap, store: ustore }: GlueArgs): void;
     destroy(): void;

package/dist/actions/glue.js

@@ -1,22 +1,23 @@
 import { watchForMutations } from '../util/index.js';
 import { equal } from 'txstate-utils';
+/**
+ * Make this element `position: fixed` and move it around to align with the target element.
+ */
 export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjustparentheight = false, store }) {
     let halign;
     let valign;
-    const parent = el.offsetParent;
+    const parent = el.offsetParent instanceof HTMLElement ? el.offsetParent : undefined;
     const formerMinHeight = parent?.style.minHeight;
     if (target)
         el.style.position = 'fixed';
-    function adjustParentHeight() {
+    function adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY) {
         if (!adjustparentheight)
             return;
-        if (parent?.style.overflowY === 'auto')
+        if (parentOverflowY === 'auto')
             return;
-        const minHeight = el.offsetTop + el.offsetHeight;
-        if (minHeight > (parent?.clientHeight ?? 0)) {
-            requestAnimationFrame(() => {
-                parent.style.minHeight = String(minHeight) + 'px';
-            });
+        const minHeight = elOffsetTop + elOffsetHeight;
+        if (minHeight > parentClientHeight) {
+            parent.style.minHeight = String(minHeight) + 'px';
         }
     }
     let lastrect;
@@ -34,13 +35,55 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         const rect = { left: tmpRect.left - fixedRect.left, right: document.documentElement.clientWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
         if (equal(rect, lastrect))
             return;
+        lastrect = rect;
         let autoalign = align;
+        const leftright = rect.right > rect.left ? 'left' : 'right';
+        const topbottom = rect.bottom > rect.top ? 'bottom' : 'top';
         if (align === 'auto') {
-            const leftright = rect.right > rect.left ? 'left' : 'right';
-            const topbottom = rect.bottom > rect.top ? 'bottom' : 'top';
             autoalign = topbottom + leftright;
         }
+        else if (align === 'autoleft') {
+            autoalign = topbottom + 'left';
+        }
+        else if (align === 'autoright') {
+            autoalign = topbottom + 'right';
+        }
+        else if (align === 'topauto') {
+            autoalign = 'top' + leftright;
+        }
+        else if (align === 'bottomauto') {
+            autoalign = 'bottom' + leftright;
+        }
+        else if (align === 'automiddle') {
+            autoalign = topbottom;
+        }
+        else if (align === 'middleauto') {
+            autoalign = leftright;
+        }
+        else if (align === 'middle') {
+            if (cover) {
+                autoalign = 'middle';
+            }
+            else {
+                const maxSpace = Math.max(rect.top, rect.bottom, rect.left, rect.right);
+                if (maxSpace === rect.bottom)
+                    autoalign = 'bottom';
+                else if (maxSpace === rect.top)
+                    autoalign = 'top';
+                else if (maxSpace === rect.right)
+                    autoalign = 'right';
+                else
+                    autoalign = 'left';
+            }
+        }
         const targetHeight = rect.height;
+        const elRect = el.getBoundingClientRect();
+        const elWidth = elRect.width;
+        const elHeight = elRect.height;
+        const elOffsetTop = el.offsetTop;
+        const elOffsetHeight = el.offsetHeight;
+        const parentClientHeight = parent?.clientHeight ?? 0;
+        const parentOverflowY = parent?.style.overflowY;
         if (autoalign === 'bottomleft') {
             cancelAnimationFrame(timer);
             timer = requestAnimationFrame(() => {
@@ -48,7 +91,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 el.style.left = `${rect.left}px`;
                 el.style.removeProperty('bottom');
                 el.style.removeProperty('right');
-                adjustParentHeight();
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
             });
             valign = 'bottom';
             halign = 'left';
@@ -60,7 +103,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 el.style.removeProperty('left');
                 el.style.removeProperty('bottom');
                 el.style.right = `${rect.right}px`;
-                adjustParentHeight();
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
             });
             valign = 'bottom';
             halign = 'right';
@@ -72,7 +115,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 el.style.left = `${rect.left}px`;
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.removeProperty('right');
-                adjustParentHeight();
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
             });
             valign = 'top';
             halign = 'left';
@@ -84,14 +127,85 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 el.style.removeProperty('left');
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.right = `${rect.right}px`;
-                adjustParentHeight();
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
             });
             valign = 'top';
             halign = 'right';
         }
+        else if (autoalign === 'top') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.removeProperty('top');
+                el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
+                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
+                el.style.removeProperty('right');
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'top';
+            halign = 'center';
+        }
+        else if (autoalign === 'bottom') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
+                el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
+                el.style.removeProperty('bottom');
+                el.style.removeProperty('right');
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'bottom';
+            halign = 'center';
+        }
+        else if (autoalign === 'left') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
+                el.style.removeProperty('bottom');
+                if (cover) {
+                    el.style.left = `${rect.left + gap}px`;
+                    el.style.removeProperty('right');
+                }
+                else {
+                    el.style.removeProperty('left');
+                    el.style.right = `${rect.right + rect.width + gap}px`;
+                }
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'center';
+            halign = 'left';
+        }
+        else if (autoalign === 'right') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
+                el.style.removeProperty('bottom');
+                if (cover) {
+                    el.style.removeProperty('left');
+                    el.style.right = `${rect.right + gap}px`;
+                }
+                else {
+                    el.style.left = `${rect.left + rect.width + gap}px`;
+                    el.style.removeProperty('right');
+                }
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'center';
+            halign = 'right';
+        }
+        else if (autoalign === 'middle') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
+                el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
+                el.style.removeProperty('bottom');
+                el.style.removeProperty('right');
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'center';
+            halign = 'center';
+        }
         store?.update(v => ({ ...v, valign, halign }));
     }
-    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { destroy: watchDestroy } = watchForMutations(reposition);
     document.addEventListener('scroll', reposition, { capture: true });
     return {
@@ -116,7 +230,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         destroy() {
             watchDestroy();
             document.removeEventListener('scroll', reposition);
-            if (adjustparentheight) {
+            if (adjustparentheight && parent) {
                 if (formerMinHeight)
                     parent.style.minHeight = formerMinHeight;
                 parent.style.removeProperty('min-height');

package/dist/actions/offset.js

@@ -16,11 +16,11 @@ export function offset(el, config) {
         el.dispatchEvent(new CustomEvent('offset', { detail: current }));
     }
     let resolvedchange = config?.debounce ? debounced(lookforoffsetchange, config.debounce) : lookforoffsetchange;
-    const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent ?? document.body : config.container);
+    const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent instanceof HTMLElement ? el.offsetParent : document.body : config.container);
     const { destroy, update } = watchForPositionChangeInContainer(el, offsetContainer, resolvedchange);
     return {
         update(newConfig) {
-            const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent ?? document.body : config.container);
+            const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent instanceof HTMLElement ? el.offsetParent : document.body : config.container);
             if (newConfig?.debounce === true)
                 newConfig.debounce = 100;
             if (newConfig?.store !== config?.store) {

package/dist/actions/passactions.d.ts

@@ -6,5 +6,5 @@ export type SvelteHTMLActionType<P = any> = (node: HTMLElement, params?: P) => S
 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 = 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[]>;
+export declare function passActions(node: HTMLElement, actions: HTMLActionEntry[] | undefined): SvelteActionReturnType<HTMLActionEntry[]>;
+export declare function passActions(node: SVGElement, actions: SVGActionEntry[] | undefined): SvelteActionReturnType<SVGActionEntry[]>;

package/dist/actions/stickyfixed.js

@@ -63,10 +63,10 @@ export function stickyfixed(el, config) {
                 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;
+                    extrawidth = tstyle.borderCollapse === 'collapse' ? parseInt(window.getComputedStyle(cell).borderRightWidth, 10) : 0;
                 }
             }
-            const width = `${parseInt(window.getComputedStyle(spacer).width) + extrawidth}px`;
+            const width = `${parseInt(window.getComputedStyle(spacer).width, 10) + extrawidth}px`;
             elheight = spacer.offsetHeight;
             for (let i = 0; i < tds.length; i++)
                 tds[i].style.width = widths[i];
@@ -126,7 +126,7 @@ export function stickyfixed(el, config) {
             lastOffsetParent = offsetParent;
         }
         const table = el.closest('table');
-        const borderspacing = (table ? parseInt(window.getComputedStyle(table).borderSpacing) : 0);
+        const borderspacing = (table ? parseInt(window.getComputedStyle(table).borderSpacing, 10) : 0);
         scrollstart = offset[0].top + el.offsetTop;
         left = offset[0].left + (spacer.parentElement ? spacer.offsetLeft : el.offsetLeft);
         if (el.tagName === 'TR') {

package/dist/components/ButtonMenu.svelte

@@ -1,29 +1,34 @@
-<script lang="ts">import { randomid } from 'txstate-utils';
-import { Store } from '@txstate-mws/svelte-store';
-import PopupMenu from './PopupMenu.svelte';
-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 gap = 0;
-export let adjustparentheight = false;
-export let usePortal = 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 = '';
-export let menuDividerClass = '';
-const usemenurole = true;
+<script lang="ts">
+  import { randomid } from 'txstate-utils'
+  import { Store } from '@txstate-mws/svelte-store'
+  import type { GlueAlignOpts, GlueAlignStore } from '../actions'
+  import type { PopupMenuItem } from '../types'
+  import PopupMenu from './PopupMenu.svelte'
+
+  export let buttonelement: HTMLButtonElement
+  export let items: PopupMenuItem[] = []
+  export let menushown = false
+  export let value: string | undefined = undefined
+  export let align: GlueAlignOpts = 'auto'
+  export let cover = false
+  export let showSelected = true
+  export let width: string | undefined = undefined
+  export let computedalign = new Store<GlueAlignStore>({ valign: 'bottom', halign: 'left' })
+  export let gap = 0
+  export let adjustparentheight = false
+  export let usePortal: HTMLElement | true | undefined = undefined
+  export let loading = false
+  export let hilited: number | undefined = undefined
+  export let menuid = randomid()
+  export let emptyText: string | undefined = undefined
+  export let menuContainerClass = ''
+  export let menuClass = ''
+  export let menuItemClass = ''
+  export let menuItemHilitedClass = ''
+  export let menuItemSelectedClass = ''
+
+  const usemenurole = true
+
 </script>
 
 <PopupMenu
@@ -49,4 +54,4 @@ const usemenurole = true;
   {menuItemClass}
   {menuItemHilitedClass}
   {menuItemSelectedClass}
-  {menuDividerClass}/>
+/>

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

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import { Store } from '@txstate-mws/svelte-store';
 import type { GlueAlignOpts, GlueAlignStore } from '../actions';
-import type { PopupMenuTypes } from '../types';
+import type { PopupMenuItem } from '../types';
 declare const __propDef: {
     props: {
         buttonelement: HTMLButtonElement;
-        items?: PopupMenuTypes[];
+        items?: PopupMenuItem[];
         menushown?: boolean;
         value?: string | undefined;
         align?: GlueAlignOpts;
@@ -25,7 +25,6 @@ declare const __propDef: {
         menuItemClass?: string;
         menuItemHilitedClass?: string;
         menuItemSelectedClass?: string;
-        menuDividerClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Card.svelte

@@ -1,14 +1,18 @@
 <!-- @component
   [`Card`](https://github.com/txstate-etc/svelte-components/blob/main/src/lib/components/Card.svelte)
 -->
-<script lang="ts">export let className = '';
-import { getContext } from 'svelte';
-import { resize, passActions } from '../actions';
-import { CARDLAYOUT } from '../types';
-export let use = [];
-const block = { element: undefined };
-const { registerBlock, gutter, recalculate } = getContext(CARDLAYOUT);
-const { width, order, linebreak } = registerBlock(block);
+<script lang="ts">
+  export let className = ''
+  import { getContext } from 'svelte'
+  import { resize, passActions, type HTMLActionEntry } from '../actions'
+  import { CARDLAYOUT } from '../types'
+  import type { CardLayoutContext, Block } from '../types'
+
+  export let use: HTMLActionEntry[] = []
+
+  const block: Block = { element: undefined }
+  const { registerBlock, gutter, recalculate } = getContext<CardLayoutContext>(CARDLAYOUT)
+  const { width, order, linebreak } = registerBlock(block)
 </script>
 
 <li class="cardlayout-card {className}" bind:this={block.element} use:passActions={use} use:resize on:resize={recalculate} style="margin-bottom: {$gutter}px; width: {$width}; order: {$order};">