@txstate-mws/svelte-components 1.0.2 → 1.1.1

package/README.md

@@ -1,17 +1,36 @@
 # 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)
+## 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)
+
+## Developing
+
+Installed dependencies with `npm install`, then start the development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Publishing to npm
+
+```bash
+npm run package
+cd package
+npm publish
+```

package/{dist/actions → actions}/buttonify.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonify = void 0;
 /**
  * Turns any HTML element into an accessible button that responds to keyboard events and has
  * role="button" and the tabindex attribute set. You are still responsible for making sure it has
  * readable content or a good label.
  */
-function buttonify(node) {
+export function buttonify(node) {
     function keydown(e) {
         if (e.key === 'Enter') {
             if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
@@ -27,5 +24,3 @@ function buttonify(node) {
         }
     };
 }
-exports.buttonify = buttonify;
-//# sourceMappingURL=buttonify.js.map

package/{dist/ts/actions → actions}/glue.d.ts

@@ -1,4 +1,4 @@
-import { SettableSubject } from '../lib';
+import type { SettableSubject } from '@txstate-mws/svelte-store';
 export declare type GlueAlignOpts = 'auto' | 'bottomleft' | 'bottomright' | 'topleft' | 'topright';
 export interface GlueArgs<T extends GlueAlignStore = GlueAlignStore> {
     target: HTMLElement;

package/{dist/actions → actions}/glue.js

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.glue = void 0;
-const lib_1 = require("../lib");
+import { sharedOffsetParent, targetOffset, watchForPositionChangeInContainer } from '../util/index.js';
 let setBodyRelative = false;
-function glue(el, { target, align = 'auto', cover = false, store }) {
+export function glue(el, { target, align = 'auto', cover = false, store }) {
     if (!setBodyRelative) {
         setBodyRelative = true;
         document.body.style.position = 'relative';
     }
     let halign;
     let valign;
-    let sharedOffset = (0, lib_1.sharedOffsetParent)(el, target);
+    let sharedOffset = sharedOffsetParent(el, target);
     function reposition(offset) {
         if (!target || !sharedOffset || !(el.offsetParent instanceof HTMLElement))
             return;
         let autoalign = align;
-        const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : (0, lib_1.targetOffset)(el.offsetParent, sharedOffset);
+        const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : targetOffset(el.offsetParent, sharedOffset);
         if (align === 'auto') {
             const rect = target.getBoundingClientRect();
             const leftright = window.innerWidth - rect.right > rect.left ? 'left' : 'right';
@@ -63,19 +60,19 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
             valign = 'top';
             halign = 'right';
         }
-        store === null || store === void 0 ? void 0 : store.update(v => (Object.assign(Object.assign({}, v), { valign, halign })));
+        store?.update(v => ({ ...v, valign, halign }));
     }
-    const { destroy, update } = (0, lib_1.watchForPositionChangeInContainer)(target, sharedOffset, reposition);
+    const { destroy, update } = watchForPositionChangeInContainer(target, sharedOffset, reposition);
     return {
         update({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }) {
             align = ualign;
             cover = ucover;
             if (ustore && ustore !== store) {
-                ustore.update(v => (Object.assign(Object.assign({}, v), { valign, halign })));
+                ustore.update(v => ({ ...v, valign, halign }));
                 store = ustore;
             }
             if (target !== utarget) {
-                sharedOffset = (0, lib_1.sharedOffsetParent)(el, utarget);
+                sharedOffset = sharedOffsetParent(el, utarget);
                 target = utarget;
                 update(target, sharedOffset, reposition);
             }
@@ -83,5 +80,3 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
         destroy
     };
 }
-exports.glue = glue;
-//# sourceMappingURL=glue.js.map

package/actions/index.d.ts

@@ -0,0 +1,7 @@
+export * from './buttonify.js';
+export * from './glue.js';
+export * from './offset.js';
+export * from './portal.js';
+export * from './resize.js';
+export * from './sticky.js';
+export * from './stickyfixed.js';

package/actions/index.js

@@ -0,0 +1,7 @@
+export * from './buttonify.js';
+export * from './glue.js';
+export * from './offset.js';
+export * from './portal.js';
+export * from './resize.js';
+export * from './sticky.js';
+export * from './stickyfixed.js';

package/actions/offset.d.ts

@@ -0,0 +1,15 @@
+import { Store } from '@txstate-mws/svelte-store';
+import type { WritableSubject } from '@txstate-mws/svelte-store';
+import type { ElementOffsets } from '../util/index.js';
+interface OffsetConfig<T extends ElementOffsets = ElementOffsets> {
+    debounce?: boolean | number;
+    store?: WritableSubject<T>;
+}
+export declare class OffsetStore extends Store<ElementOffsets> {
+    constructor(initialState?: ElementOffsets);
+}
+export declare function offset(el: HTMLElement, config?: OffsetConfig): {
+    update(newConfig?: OffsetConfig): void;
+    destroy: () => void;
+};
+export {};

package/actions/offset.js

@@ -0,0 +1,35 @@
+import { Store } from '@txstate-mws/svelte-store';
+import { debounced, watchForPositionChange } from '../util/index.js';
+export class OffsetStore extends Store {
+    constructor(initialState) {
+        super(initialState ?? { top: 0, right: 0, bottom: 0, left: 0 });
+    }
+}
+export function offset(el, config) {
+    if (config?.debounce === true)
+        config.debounce = 100;
+    let lastOffset = {};
+    function lookforoffsetchange(current) {
+        lastOffset = current;
+        if (config?.store)
+            config.store.update(v => ({ ...v, ...current }));
+        el.dispatchEvent(new CustomEvent('offset', { detail: current }));
+    }
+    let resolvedchange = config?.debounce ? debounced(lookforoffsetchange, config.debounce) : lookforoffsetchange;
+    const { destroy, update } = watchForPositionChange(el, resolvedchange);
+    return {
+        update(newConfig) {
+            if (newConfig?.debounce === true)
+                newConfig.debounce = 100;
+            if (newConfig?.store !== config?.store) {
+                newConfig?.store?.update(v => ({ ...v, ...lastOffset }));
+            }
+            if (newConfig?.debounce !== config?.debounce) {
+                resolvedchange = newConfig?.debounce ? debounced(lookforoffsetchange, newConfig.debounce) : lookforoffsetchange;
+                update(el, resolvedchange);
+            }
+            config = newConfig;
+        },
+        destroy
+    };
+}

package/actions/portal.js

@@ -0,0 +1,13 @@
+export function portal(el, target = document.body) {
+    function update(target = document.body) {
+        target?.appendChild(el);
+    }
+    function destroy() {
+        el.parentElement?.removeChild(el);
+    }
+    update(target);
+    return {
+        update,
+        destroy
+    };
+}

package/{dist/ts/actions → actions}/resize.d.ts

@@ -1,4 +1,5 @@
-import { SettableSubject } from '../lib';
+import { Store } from '@txstate-mws/svelte-store';
+import type { SettableSubject } from '@txstate-mws/svelte-store';
 export interface ElementSize {
     clientWidth?: number;
     clientHeight?: number;
@@ -9,8 +10,11 @@ interface ResizeConfig {
     debounce?: boolean | number;
     store?: SettableSubject<ElementSize>;
 }
+export declare class ResizeStore extends Store<ElementSize> {
+    constructor(initialState?: ElementSize);
+}
 export declare function resize(el: HTMLElement, config?: ResizeConfig): void | {
-    update(newConfig?: ResizeConfig | undefined): void;
+    update(newConfig?: ResizeConfig): void;
     destroy(): void;
 };
 export {};

package/actions/resize.js

@@ -0,0 +1,57 @@
+import { equal } from 'txstate-utils';
+import { Store } from '@txstate-mws/svelte-store';
+import { debounced } from '../util/index.js';
+export class ResizeStore extends Store {
+    constructor(initialState) {
+        super(initialState ?? typeof window === 'undefined'
+            ? {
+                clientWidth: 1024,
+                clientHeight: 1024,
+                offsetWidth: 1024,
+                offsetHeight: 1024
+            }
+            : {
+                clientWidth: window.innerWidth,
+                clientHeight: window.innerHeight,
+                offsetWidth: window.innerWidth,
+                offsetHeight: window.innerHeight
+            });
+    }
+}
+export function resize(el, config) {
+    if (config?.debounce === true)
+        config.debounce = 100;
+    let lastSize = {};
+    function watch() {
+        const current = { clientWidth: el.clientWidth, clientHeight: el.clientHeight, offsetWidth: el.offsetWidth, offsetHeight: el.offsetHeight };
+        if (!equal(lastSize, current)) {
+            lastSize = current;
+            if (config?.store)
+                config.store.set(current);
+            el.dispatchEvent(new CustomEvent('resize', { detail: current }));
+        }
+    }
+    if (typeof ResizeObserver === 'undefined')
+        return watch(); // support SSR
+    let observer = new ResizeObserver(config?.debounce ? debounced(watch, config.debounce) : watch);
+    observer.observe(el);
+    watch();
+    return {
+        update(newConfig) {
+            if (newConfig?.debounce === true)
+                newConfig.debounce = 100;
+            if (newConfig?.store !== config?.store) {
+                newConfig?.store?.set(lastSize);
+            }
+            if (!!newConfig?.debounce !== !!config?.debounce) {
+                observer.disconnect();
+                observer = new ResizeObserver(newConfig?.debounce ? debounced(watch, newConfig.debounce) : watch);
+                observer.observe(el);
+            }
+            config = newConfig;
+        },
+        destroy() {
+            observer.disconnect();
+        }
+    };
+}

package/{dist/ts/actions → actions}/sticky.d.ts

@@ -1,4 +1,4 @@
-import { SettableSubject } from '../lib';
+import type { SettableSubject } from '@txstate-mws/svelte-store';
 export interface StickyArgs<T extends StickyStore = StickyStore> {
     target?: HTMLElement;
     store?: SettableSubject<T>;
@@ -28,6 +28,6 @@ export interface StickyStore {
  * fragile if your markup/CSS situation is very complex.
  */
 export declare function sticky(el: HTMLElement, config?: StickyArgs): {
-    update: (newConfig?: StickyArgs<StickyStore> | undefined) => void;
+    update: (newConfig?: StickyArgs) => void;
     destroy: () => void;
 };

package/{dist/actions → actions}/sticky.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sticky = void 0;
-const lib_1 = require("../lib");
+import { bodyOffset, watchForPositionChange } from '../util/index.js';
 let scrolled = false;
 /**
  * A robust implementation of stickyness based on `transform: translateY()`. Only use when
@@ -23,22 +20,21 @@ let scrolled = false;
  * and therefore animates better than this. However, it has a lot more work to do and is more
  * fragile if your markup/CSS situation is very complex.
  */
-function sticky(el, config) {
+export function sticky(el, config) {
     let floating;
     let translateY;
     let scrollstart = Number.MAX_SAFE_INTEGER;
     let scrollend = Number.MAX_SAFE_INTEGER;
     function recalc(scroll) {
-        var _a;
         const newTranslateY = Math.max(Math.min(scroll, scrollend) - scrollstart, 0);
         if (newTranslateY !== translateY) {
             el.style.transform = `translateY(${newTranslateY}px)`;
             translateY = newTranslateY;
             floating = scroll >= scrollstart;
-            (_a = config === null || config === void 0 ? void 0 : config.store) === null || _a === void 0 ? void 0 : _a.update(v => (Object.assign(Object.assign({}, v), { translateY, floating })));
+            config?.store?.update(v => ({ ...v, translateY, floating }));
         }
     }
-    function onscroll(e) {
+    function onscroll(_) {
         recalc(window.scrollY);
     }
     function onwheel(e) {
@@ -55,29 +51,27 @@ function sticky(el, config) {
     }
     let lastOffsetParent = el.offsetParent;
     function onpositionchange(offset) {
-        var _a;
         const offsetParent = el.offsetParent;
         if (!(offsetParent instanceof HTMLElement))
             return;
         if (lastOffsetParent !== offsetParent) {
-            offset[0] = (0, lib_1.bodyOffset)(offsetParent);
+            offset[0] = bodyOffset(offsetParent);
             update(offsetParent, onpositionchange);
             lastOffsetParent = offsetParent;
         }
         scrollstart = offset[0].top + el.offsetTop;
-        const containeroffset = (config === null || config === void 0 ? void 0 : config.target) ? offset[1] : offset[0];
-        scrollend = Math.max(scrollstart, containeroffset.top + ((_a = config === null || config === void 0 ? void 0 : config.target) !== null && _a !== void 0 ? _a : offsetParent).clientHeight - el.offsetHeight);
+        const containeroffset = config?.target ? offset[1] : offset[0];
+        scrollend = Math.max(scrollstart, containeroffset.top + (config?.target ?? offsetParent).clientHeight - el.offsetHeight);
         recalc(window.scrollY);
     }
-    const { destroy, update } = (0, lib_1.watchForPositionChange)([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+    const { destroy, update } = watchForPositionChange([el.offsetParent, config?.target], onpositionchange);
     window.addEventListener('scroll', onscroll, { passive: true });
     window.addEventListener('wheel', onwheel, { passive: false });
     function stickyUpdate(newConfig) {
-        var _a;
-        if ((newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) !== (config === null || config === void 0 ? void 0 : config.store))
-            (_a = newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) === null || _a === void 0 ? void 0 : _a.update(v => (Object.assign(Object.assign({}, v), { translateY, floating })));
+        if (newConfig?.store !== config?.store)
+            newConfig?.store?.update(v => ({ ...v, translateY, floating }));
         config = newConfig;
-        update([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+        update([el.offsetParent, config?.target], onpositionchange);
     }
     function stickyDestroy() {
         window.removeEventListener('scroll', onscroll);
@@ -89,5 +83,3 @@ function sticky(el, config) {
         destroy: stickyDestroy
     };
 }
-exports.sticky = sticky;
-//# sourceMappingURL=sticky.js.map

package/{dist/ts/actions → actions}/stickyfixed.d.ts

@@ -1,4 +1,4 @@
-import { StickyArgs } from './sticky';
+import type { StickyArgs } from './sticky.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,
@@ -20,6 +20,6 @@ import { StickyArgs } from './sticky';
  * so it will visually lag a bit on mobile.
  */
 export declare function stickyfixed(el: HTMLElement, config?: StickyArgs): {
-    update: (newConfig?: StickyArgs<import("./sticky").StickyStore> | undefined) => void;
+    update: (newConfig?: StickyArgs) => void;
     destroy: () => void;
 };

package/{dist/actions → actions}/stickyfixed.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.stickyfixed = void 0;
-const lib_1 = require("../lib");
+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,
@@ -22,7 +19,7 @@ const lib_1 = require("../lib");
  * 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.
  */
-function stickyfixed(el, config) {
+export function stickyfixed(el, config) {
     let floating;
     let translateY;
     let scrollstart = Number.MAX_SAFE_INTEGER;
@@ -32,10 +29,9 @@ function stickyfixed(el, config) {
     let left;
     let top = 0;
     function generatespacer(mutations) {
-        var _a;
-        if (mutations === null || mutations === void 0 ? void 0 : mutations.every(m => m.attributeName === 'style'))
+        if (mutations?.every(m => m.attributeName === 'style'))
             return;
-        spacer === null || spacer === void 0 ? void 0 : spacer.remove();
+        spacer?.remove();
         spacer = el.cloneNode(true);
         spacer.setAttribute('aria-hidden', 'true');
         spacer.style.position = '';
@@ -46,7 +42,7 @@ function stickyfixed(el, config) {
         for (const td of tds)
             td.style.width = '';
         if (floating)
-            (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(spacer, el);
+            el.parentElement?.insertBefore(spacer, el);
     }
     const mutationobserver = new MutationObserver(generatespacer);
     mutationobserver.observe(el, {
@@ -85,14 +81,13 @@ function stickyfixed(el, config) {
     }
     const resizeobserver = new ResizeObserver(adjustwidths);
     function recalc(scroll) {
-        var _a, _b;
         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) {
-                (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(spacer, el);
+                el.parentElement?.insertBefore(spacer, el);
                 el.style.position = 'fixed';
                 el.style.top = `${Math.min(scrollend - scroll, 0)}px`;
                 el.style.left = `${left}px`;
@@ -109,7 +104,7 @@ function stickyfixed(el, config) {
         }
         if (newTranslateY !== translateY) {
             translateY = newTranslateY;
-            (_b = config === null || config === void 0 ? void 0 : config.store) === null || _b === void 0 ? void 0 : _b.update(v => (Object.assign(Object.assign({}, v), { translateY, floating })));
+            config?.store?.update(v => ({ ...v, translateY, floating }));
         }
         if (top !== newTop) {
             top = newTop;
@@ -117,17 +112,16 @@ function stickyfixed(el, config) {
                 el.style.top = `${top}px`;
         }
     }
-    function onscroll(e) {
+    function onscroll(_) {
         recalc(window.scrollY);
     }
     let lastOffsetParent = el.offsetParent;
     function onpositionchange(offset) {
-        var _a, _b;
         const offsetParent = el.offsetParent;
         if (!(offsetParent instanceof HTMLElement))
             return;
         if (lastOffsetParent !== offsetParent) {
-            offset[0] = (0, lib_1.bodyOffset)(offsetParent);
+            offset[0] = bodyOffset(offsetParent);
             update(offsetParent, onpositionchange);
             lastOffsetParent = offsetParent;
         }
@@ -138,18 +132,17 @@ function stickyfixed(el, config) {
         if (el.tagName === 'TR') {
             scrollstart -= borderspacing;
         }
-        const containeroffset = (config === null || config === void 0 ? void 0 : config.target) ? (_a = offset[1]) !== null && _a !== void 0 ? _a : offset[0] : offset[0];
-        scrollend = Math.max(scrollstart, containeroffset.top + ((_b = config === null || config === void 0 ? void 0 : config.target) !== null && _b !== void 0 ? _b : offsetParent).clientHeight - el.offsetHeight);
+        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 } = (0, lib_1.watchForPositionChange)([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+    const { destroy, update } = watchForPositionChange([el.offsetParent, config?.target], onpositionchange);
     window.addEventListener('scroll', onscroll, { passive: true });
     function stickyUpdate(newConfig) {
-        var _a;
-        if ((newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) !== (config === null || config === void 0 ? void 0 : config.store))
-            (_a = newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) === null || _a === void 0 ? void 0 : _a.update(v => (Object.assign(Object.assign({}, v), { translateY, floating })));
+        if (newConfig?.store !== config?.store)
+            newConfig?.store?.update(v => ({ ...v, translateY, floating }));
         config = newConfig;
-        update([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+        update([el.offsetParent, config?.target], onpositionchange);
     }
     function stickyDestroy() {
         resizeobserver.disconnect();
@@ -162,5 +155,3 @@ function stickyfixed(el, config) {
         destroy: stickyDestroy
     };
 }
-exports.stickyfixed = stickyfixed;
-//# sourceMappingURL=stickyfixed.js.map

package/components/Card.svelte

@@ -0,0 +1,23 @@
+<script >export let className = '';
+import { getContext } from 'svelte';
+import { resize } from '../actions';
+import { CARDLAYOUT } from '../types';
+const block = { element: undefined };
+const { registerBlock, gutter, recalculate } = getContext(CARDLAYOUT);
+const { width, order, linebreak } = registerBlock(block);
+</script>
+
+<li class="cardlayout-card {className}" bind:this={block.element} use:resize on:resize={recalculate} style="margin-bottom: {$gutter}px; width: {$width}; order: {$order};">
+  <slot></slot>
+</li>
+{#if $linebreak}
+  <li aria-hidden="true" class="cardlayout-columnbreak" style:order={$order}></li>
+{/if}
+
+<style>
+  .cardlayout-columnbreak {
+    width: 0;
+    height: 100%;
+    visibility: hidden;
+  }
+</style>

package/components/Card.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        className?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CardProps = typeof __propDef.props;
+export declare type CardEvents = typeof __propDef.events;
+export declare type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+}
+export {};