@txstate-mws/svelte-components 1.2.10 → 1.3.0

package/actions/glue.d.ts

@@ -11,6 +11,6 @@ export interface GlueAlignStore {
     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;
+    update({ target, align, cover, store }: GlueArgs): void;
     destroy: () => void;
 };

package/actions/index.d.ts

@@ -6,3 +6,4 @@ export * from './portal.js';
 export * from './resize.js';
 export * from './sticky.js';
 export * from './stickyfixed.js';
+export * from './passactions.js';

package/actions/index.js

@@ -6,3 +6,4 @@ export * from './portal.js';
 export * from './resize.js';
 export * from './sticky.js';
 export * from './stickyfixed.js';
+export * from './passactions.js';

package/actions/passactions.d.ts

@@ -0,0 +1,10 @@
+export interface SvelteActionReturnType<P> {
+    update?: (newParams: P) => void;
+    destroy?: () => void;
+}
+export declare type SvelteHTMLActionType<P = any> = (node: HTMLElement, params?: P) => SvelteActionReturnType<P> | undefined;
+export declare type HTMLActionEntry<P extends any = any> = SvelteHTMLActionType<P> | [SvelteHTMLActionType<P>, P];
+export declare type SvelteSVGActionType<P = any> = (node: SVGElement, params?: P) => SvelteActionReturnType<P> | undefined;
+export declare type SVGActionEntry<P extends any = 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/actions/passactions.js

@@ -0,0 +1,36 @@
+import { toArray } from 'txstate-utils';
+export function passActions(node, actions) {
+    let actionReturns = new Map();
+    for (const actionEntry of actions ?? []) {
+        const [action, params] = toArray(actionEntry);
+        actionReturns.set(action, action(node, params));
+    }
+    return {
+        update(actions) {
+            const newActionReturns = new Map();
+            // accept new actions and update actions we already had
+            for (const actionEntry of actions ?? []) {
+                const [action, params] = toArray(actionEntry);
+                if (actionReturns.has(action)) {
+                    const existing = actionReturns.get(action);
+                    newActionReturns.set(action, existing);
+                    existing?.update?.(params);
+                }
+                else {
+                    newActionReturns.set(action, action(node, params));
+                }
+            }
+            // destroy any actions that were removed
+            for (const [action, actionReturn] of actionReturns.entries()) {
+                if (!newActionReturns.has(action))
+                    actionReturn?.destroy?.();
+            }
+            actionReturns = newActionReturns;
+        },
+        destroy() {
+            for (const actionReturn of actionReturns.values()) {
+                actionReturn?.destroy?.();
+            }
+        }
+    };
+}

package/components/Card.svelte

@@ -1,13 +1,14 @@
 <script>export let className = '';
 import { getContext } from 'svelte';
-import { resize } from '../actions';
+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>
 
-<li class="cardlayout-card {className}" bind:this={block.element} use:resize on:resize={recalculate} style="margin-bottom: {$gutter}px; width: {$width}; order: {$order};">
+<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};">
   <slot></slot>
 </li>
 {#if $linebreak}

package/components/Card.svelte.d.ts

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

package/components/CardLayout.svelte

@@ -1,11 +1,12 @@
 <script>import { onDestroy, tick, setContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
-import { resize } from '../actions';
+import { resize, passActions } from '../actions';
 import { CARDLAYOUT } from '../types';
 export let maxwidth = 500;
 export let preserveorder = false;
 export let gutter = 10;
 export let className = '';
+export let use = [];
 const ssr = typeof navigator === 'undefined' || navigator.userAgent.includes('jsdom');
 const blocks = [];
 const gutterstore = writable(gutter);
@@ -177,7 +178,7 @@ function onResize(e) {
 onMount(() => triggerrecalc(layoutelement.clientWidth));
 </script>
 
-<ul class="cardlayout {className}" class:ssr style:height={ssr ? undefined : `${fullheight + gutter}px`} bind:this={layoutelement} use:resize on:resize={onResize}>
+<ul class="cardlayout {className}" class:ssr style:height={ssr ? undefined : `${fullheight + gutter}px`} bind:this={layoutelement} use:resize on:resize={onResize} use:passActions={use}>
   <slot></slot>
 </ul>
 

package/components/CardLayout.svelte.d.ts

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

package/components/PopupMenu.svelte

@@ -22,9 +22,9 @@ export let usePortal = undefined;
 export let emptyText = undefined;
 export let value = undefined;
 export let hilited = undefined;
+export let menuid = randomid();
 let menuelement;
 const itemelements = [];
-const menuid = randomid();
 let firstactive = 0;
 let lastactive = items.length - 1;
 function hiddenItem(item) {
@@ -207,15 +207,16 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
             on:click={onclick(item)}
             role="option"
             tabindex=-1
+            aria-selected={value === item.value}
             aria-disabled={item.disabled}
           ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
         {/if}
       {/each}
       {#if items.length === 0}
-        <li role="option" class={`${menuItemClass} disabled`} aria-live="assertive">
+        <li role="option" class={`${menuItemClass} disabled`} aria-live="assertive" aria-selected={false}>
           <slot name="noresults">
             {#if !emptyText}
-              <span aria-hidden="true">{'¯\\_(ツ)_/¯'}</span><ScreenReaderOnly>{emptyText || 'empty popup menu'}</ScreenReaderOnly>
+              <span aria-hidden="true">{'¯\\_(ツ)_/¯'}</span><ScreenReaderOnly>{emptyText || 'no results found'}</ScreenReaderOnly>
             {:else}
               {emptyText}
             {/if}
@@ -229,7 +230,7 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
 <style>
   div {
     position: absolute !important;
-    z-index: var(--popup-z, calc(var(--modal-z) + 1));
+    z-index: var(--popup-z, calc(var(--modal-z, 3000) + 1));
   }
   ul {
     list-style: none;

package/components/PopupMenu.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         emptyText?: string | undefined;
         value?: string | undefined;
         hilited?: number | undefined;
+        menuid?: string;
     };
     events: {
         change: CustomEvent<any>;

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.2.10",
+  "version": "1.3.0",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",
-    "tabbable": "^5.2.1",
-    "txstate-utils": "^1.6.0"
+    "tabbable": "^6.0.0",
+    "txstate-utils": "^1.7.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.18.1",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
-    "@sveltejs/package": "next",
+    "@sveltejs/package": "1.0.0-next.3",
     "@types/tabbable": "^3.1.2",
-    "eslint-config-standard-with-typescript": "^21.0.1",
-    "eslint-plugin-svelte3": "^3.2.1",
+    "eslint-config-standard-with-typescript": "^23.0.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.9.4",
@@ -36,6 +36,7 @@
     "./actions/glue": "./actions/glue.js",
     "./actions": "./actions/index.js",
     "./actions/offset": "./actions/offset.js",
+    "./actions/passactions": "./actions/passactions.js",
     "./actions/portal": "./actions/portal.js",
     "./actions/resize": "./actions/resize.js",
     "./actions/sticky": "./actions/sticky.js",