@txstate-mws/svelte-components 1.0.4 → 1.1.0

package/tests/PopupMenu.test.js

@@ -0,0 +1,55 @@
+import { test, expect } from '@playwright/test'
+import { goto } from './common.js'
+
+test.beforeEach(async ({ page }) => {
+  await goto(page, '/popupmenu')
+})
+
+test('menu toggles when button is clicked', async ({ page }) => {
+  const button = page.locator('#test-button')
+  const monday = page.locator('text="Monday"')
+  await expect(button).toHaveCount(1)
+  await expect(monday).toHaveCount(0)
+  button.click()
+  await expect(monday).toHaveCount(1)
+  button.click()
+  await expect(monday).toHaveCount(0)
+  button.press('Enter')
+  await expect(monday).toHaveCount(1)
+  button.press('Enter')
+  await expect(monday).toHaveCount(0)
+})
+
+test('has five menu items', async ({ page }) => {
+  const button = page.locator('#test-button')
+  await expect(button).toHaveCount(1)
+  button.click()
+  await expect(page.locator('text="Monday"')).toHaveCount(1)
+  await expect(page.locator('text="Tuesday"')).toHaveCount(1)
+  await expect(page.locator('text="Wednesday"')).toHaveCount(1)
+  await expect(page.locator('text="Thursday"')).toHaveCount(1)
+  await expect(page.locator('text="Friday"')).toHaveCount(1)
+})
+
+test('clicking a menu option selects it', async ({ page }) => {
+  const button = page.locator('#test-button')
+  await expect(button).toHaveCount(1)
+  button.click()
+  const option = page.locator('text="Monday"')
+  await expect(option).toHaveCount(1)
+  await expect(page.locator('text=selected: 1')).toHaveCount(0)
+  option.click()
+  await expect(page.locator('text=selected: 1')).toHaveCount(1)
+})
+
+test('may select a menu option with the keyboard', async ({ page }) => {
+  const button = page.locator('#test-button')
+  await expect(button).toHaveCount(1)
+  button.click()
+  const option = page.locator('text="Monday"')
+  await expect(option).toHaveCount(1)
+  await expect(page.locator('text=selected: 1')).toHaveCount(0)
+  await button.press('ArrowDown')
+  await button.press('Enter')
+  await expect(page.locator('text=selected: 1')).toHaveCount(1)
+})

package/tests/common.js

@@ -0,0 +1,4 @@
+export async function goto (page, href) {
+  await page.goto(href, { waitUntil: 'commit' })
+  await page.evaluate(() => new Promise(resolve => window.addEventListener('sveltekit:start', resolve)))
+}

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"module": "es2020",
+		"lib": ["es2020", "DOM"],
+		"target": "es2020",
+		/**
+			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+			to enforce using \`import type\` instead of \`import\` for Types.
+			*/
+		"importsNotUsedAsValues": "error",
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+		/**
+			To have warnings/errors of the Svelte compiler at the correct position,
+			enable source maps by default.
+			*/
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": ".",
+		"allowJs": true,
+		"checkJs": true,
+		"paths": {
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+}

package/actions/buttonify.d.ts

@@ -1,8 +0,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.
- */
-export declare function buttonify(node: HTMLElement): {
-    destroy(): void;
-};

package/actions/buttonify.js

@@ -1,26 +0,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.
- */
-export function buttonify(node) {
-    function keydown(e) {
-        if (e.key === 'Enter') {
-            if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
-                e.preventDefault();
-                e.stopPropagation();
-                node.dispatchEvent(new CustomEvent('click'));
-            }
-        }
-    }
-    node.addEventListener('keydown', keydown);
-    if (node.tabIndex < 0)
-        node.tabIndex = 0;
-    node.setAttribute('role', 'button');
-    node.style.cursor = 'pointer';
-    return {
-        destroy() {
-            node.removeEventListener('keydown', keydown);
-        }
-    };
-}

package/actions/glue.d.ts

@@ -1,16 +0,0 @@
-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;
-    align?: GlueAlignOpts;
-    cover?: boolean;
-    store?: SettableSubject<T>;
-}
-export interface GlueAlignStore {
-    valign: 'bottom' | 'top';
-    halign: 'left' | 'right';
-}
-export declare function glue(el: HTMLElement, { target, align, cover, store }: GlueArgs): {
-    update({ target: utarget, align: ualign, cover: ucover, store: ustore }: GlueArgs): void;
-    destroy: () => void;
-};

package/actions/glue.js

@@ -1,82 +0,0 @@
-import { sharedOffsetParent, targetOffset, watchForPositionChangeInContainer } from '../util/index.js';
-let setBodyRelative = false;
-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 = 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 } : targetOffset(el.offsetParent, sharedOffset);
-        if (align === 'auto') {
-            const rect = target.getBoundingClientRect();
-            const leftright = window.innerWidth - rect.right > rect.left ? 'left' : 'right';
-            const topbottom = window.innerHeight - rect.bottom > rect.top ? 'bottom' : 'top';
-            autoalign = topbottom + leftright;
-        }
-        const targetHeight = target.offsetHeight;
-        if (autoalign === 'bottomleft') {
-            requestAnimationFrame(() => {
-                el.style.top = `${offset.top + (cover ? 0 : targetHeight) - parentoffset.top}px`;
-                el.style.left = `${offset.left - parentoffset.left}px`;
-                el.style.bottom = '';
-                el.style.right = '';
-            });
-            valign = 'bottom';
-            halign = 'left';
-        }
-        else if (autoalign === 'bottomright') {
-            requestAnimationFrame(() => {
-                el.style.top = `${offset.top + (cover ? 0 : targetHeight) - parentoffset.top}px`;
-                el.style.left = '';
-                el.style.bottom = '';
-                el.style.right = `${offset.right - parentoffset.right}px`;
-            });
-            valign = 'bottom';
-            halign = 'right';
-        }
-        else if (autoalign === 'topleft') {
-            requestAnimationFrame(() => {
-                el.style.top = '';
-                el.style.left = `${offset.left - parentoffset.left}px`;
-                el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`;
-                el.style.right = '';
-            });
-            valign = 'top';
-            halign = 'left';
-        }
-        else if (autoalign === 'topright') {
-            requestAnimationFrame(() => {
-                el.style.top = '';
-                el.style.left = '';
-                el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`;
-                el.style.right = `${offset.right - parentoffset.right}px`;
-            });
-            valign = 'top';
-            halign = 'right';
-        }
-        store?.update(v => ({ ...v, valign, halign }));
-    }
-    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 => ({ ...v, valign, halign }));
-                store = ustore;
-            }
-            if (target !== utarget) {
-                sharedOffset = sharedOffsetParent(el, utarget);
-                target = utarget;
-                update(target, sharedOffset, reposition);
-            }
-        },
-        destroy
-    };
-}

package/actions/index.d.ts

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

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

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

@@ -1,35 +0,0 @@
-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.d.ts

@@ -1,4 +0,0 @@
-export declare function portal(el: HTMLElement, target?: HTMLElement | null): {
-    update: (target?: HTMLElement | null) => void;
-    destroy: () => void;
-};

package/actions/portal.js

@@ -1,13 +0,0 @@
-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/actions/resize.d.ts

@@ -1,20 +0,0 @@
-import { Store } from '@txstate-mws/svelte-store';
-import type { SettableSubject } from '@txstate-mws/svelte-store';
-export interface ElementSize {
-    clientWidth?: number;
-    clientHeight?: number;
-    offsetWidth?: number;
-    offsetHeight?: number;
-}
-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): void;
-    destroy(): void;
-};
-export {};

package/actions/resize.js

@@ -1,45 +0,0 @@
-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 ?? { clientWidth: 1024, clientHeight: 1024, offsetWidth: 1024, offsetHeight: 1024 });
-    }
-}
-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 (!ResizeObserver)
-        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/actions/sticky.d.ts

@@ -1,33 +0,0 @@
-import type { SettableSubject } from '@txstate-mws/svelte-store';
-export interface StickyArgs<T extends StickyStore = StickyStore> {
-    target?: HTMLElement;
-    store?: SettableSubject<T>;
-}
-export interface StickyStore {
-    floating?: boolean;
-    translateY?: number;
-}
-/**
- * A robust implementation of stickyness based on `transform: translateY()`. Only use when
- * `position: sticky` won't work for you. If `position: sticky` does work for you, use it,
- * it performs better.
- *
- * Reasons `position: sticky` might not work:
- * 1) it cannot work on a thead or tr, only td and th (and non-table elements)
- * 2) it gets confused if any parent elements have an `overflow` set, even `overflow: hidden`
- * 3) it always stays within the boundaries of the closest parent element that has a `position`
- *     * use:sticky accepts a `target` element as a parameter, defining the bounding container
- *
- * Note that if the element you place this on has other transforms, this is going to overwrite them.
- *
- * The main drawback to this approach is that it cannot do its work before scroll on mobile, only after,
- * so on mobile you are going to see it visually lag a little during scrolling.
- *
- * You may also want to try use:stickyfixed. It is based on setting `position: fixed` when appropriate,
- * 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.
- */
-export declare function sticky(el: HTMLElement, config?: StickyArgs): {
-    update: (newConfig?: StickyArgs) => void;
-    destroy: () => void;
-};

package/actions/sticky.js

@@ -1,85 +0,0 @@
-import { bodyOffset, watchForPositionChange } from '../util/index.js';
-let scrolled = false;
-/**
- * A robust implementation of stickyness based on `transform: translateY()`. Only use when
- * `position: sticky` won't work for you. If `position: sticky` does work for you, use it,
- * it performs better.
- *
- * Reasons `position: sticky` might not work:
- * 1) it cannot work on a thead or tr, only td and th (and non-table elements)
- * 2) it gets confused if any parent elements have an `overflow` set, even `overflow: hidden`
- * 3) it always stays within the boundaries of the closest parent element that has a `position`
- *     * use:sticky accepts a `target` element as a parameter, defining the bounding container
- *
- * Note that if the element you place this on has other transforms, this is going to overwrite them.
- *
- * The main drawback to this approach is that it cannot do its work before scroll on mobile, only after,
- * so on mobile you are going to see it visually lag a little during scrolling.
- *
- * You may also want to try use:stickyfixed. It is based on setting `position: fixed` when appropriate,
- * 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.
- */
-export function sticky(el, config) {
-    let floating;
-    let translateY;
-    let scrollstart = Number.MAX_SAFE_INTEGER;
-    let scrollend = Number.MAX_SAFE_INTEGER;
-    function recalc(scroll) {
-        const newTranslateY = Math.max(Math.min(scroll, scrollend) - scrollstart, 0);
-        if (newTranslateY !== translateY) {
-            el.style.transform = `translateY(${newTranslateY}px)`;
-            translateY = newTranslateY;
-            floating = scroll >= scrollstart;
-            config?.store?.update(v => ({ ...v, translateY, floating }));
-        }
-    }
-    function onscroll(e) {
-        recalc(window.scrollY);
-    }
-    function onwheel(e) {
-        e.preventDefault();
-        const scroll = window.scrollY + e.deltaY;
-        recalc(scroll);
-        if (!scrolled) {
-            window.scrollTo({ top: scroll });
-            scrolled = true;
-            setTimeout(() => {
-                scrolled = false;
-            }, 0);
-        }
-    }
-    let lastOffsetParent = el.offsetParent;
-    function onpositionchange(offset) {
-        const offsetParent = el.offsetParent;
-        if (!(offsetParent instanceof HTMLElement))
-            return;
-        if (lastOffsetParent !== offsetParent) {
-            offset[0] = bodyOffset(offsetParent);
-            update(offsetParent, onpositionchange);
-            lastOffsetParent = offsetParent;
-        }
-        scrollstart = offset[0].top + el.offsetTop;
-        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 } = watchForPositionChange([el.offsetParent, config?.target], onpositionchange);
-    window.addEventListener('scroll', onscroll, { passive: true });
-    window.addEventListener('wheel', onwheel, { passive: false });
-    function stickyUpdate(newConfig) {
-        if (newConfig?.store !== config?.store)
-            newConfig?.store?.update(v => ({ ...v, translateY, floating }));
-        config = newConfig;
-        update([el.offsetParent, config?.target], onpositionchange);
-    }
-    function stickyDestroy() {
-        window.removeEventListener('scroll', onscroll);
-        window.removeEventListener('wheel', onwheel);
-        destroy();
-    }
-    return {
-        update: stickyUpdate,
-        destroy: stickyDestroy
-    };
-}

package/actions/stickyfixed.d.ts

@@ -1,25 +0,0 @@
-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,
- * it performs better.
- *
- * Reasons `position: sticky` might not work:
- * 1) it cannot work on a thead or tr, only td and th (and non-table elements)
- * 2) it gets confused if any parent elements have an `overflow` set, even `overflow: hidden`
- * 3) it always stays within the boundaries of the closest parent element that has a `position`
- *     * use:sticky accepts a `target` element as a parameter, defining the bounding container
- *
- * Note that this implementation gets great animation performance at the cost of extra complexity.
- * It does a lot of work like cloning the element you place it on, placing the cloned element next
- * to yours in the DOM, setting widths to match between them, watching for mutations to keep them
- * in sync, etc. Some of this work may get foiled if you have a complex html/css/js situation.
- *
- * You may also want to try use:sticky. It is based on setting `transform: translateY()` as appropriate,
- * 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.
- */
-export declare function stickyfixed(el: HTMLElement, config?: StickyArgs): {
-    update: (newConfig?: StickyArgs) => void;
-    destroy: () => void;
-};