@dosgato/dialog 0.0.54 → 0.0.56

package/dist/ButtonGroup.svelte

@@ -46,7 +46,7 @@ function onKeyDown(choice, idx) {
 {/if}
 <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <ul class="dialog-btn-group" class:disabled class:valid class:invalid aria-disabled={disabled} role="radiogroup" aria-labelledby={groupid} on:blur>
-  {#each choices as choice, i}
+  {#each choices as choice, i (choice.value)}
     {@const selected = choice.value === value}
     <li bind:this={elements[i]} role="radio" class:selected aria-checked={selected} tabindex={selected ? 0 : -1} aria-controls={ariaControls} on:click={onClick(choice, i)} on:keydown={onKeyDown(choice, i)} on:blur aria-describedby="{groupid} {messagesid}">{choice.label || choice.value}</li>
   {/each}

package/dist/FieldChoices.svelte

@@ -4,7 +4,7 @@
   flex. Ordering is top down by default but can be order horizontally by toggling `leftToRight`.
   The value of the field will be an array corresponding to the values of the checkboxes that are checked.
 -->
-<script>import { getContext } from 'svelte';
+<script>import { getContext, onMount } from 'svelte';
 import { Field, FORM_CONTEXT } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { randomid } from 'txstate-utils';
@@ -46,12 +46,28 @@ function onChangeCheckbox(setVal, choice, included) {
     });
 }
 const descid = randomid();
+let val, stVal;
+function updateValue(valu, sVal) {
+    val = valu;
+    stVal = sVal;
+}
+function reactToChoices(..._) {
+    if (!stVal)
+        return;
+    const choiceSet = new Set(choices?.map(c => c.value));
+    const filtered = val?.filter(v => choiceSet.has(v));
+    if (filtered?.length !== val?.length)
+        stVal(filtered);
+}
+$: reactToChoices(choices);
+onMount(reactToChoices);
 </script>
 
 <Field {path} {defaultValue} {conditional} let:path let:value let:onBlur let:setVal let:messages let:valid let:invalid>
+  {@const _ = updateValue(value, setVal)}
   <Container {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
     <div class="dialog-choices {className}" class:valid class:invalid>
-      {#each choices as choice, idx}
+      {#each choices as choice, idx (choice.value)}
         {@const checkid = `${path}.${idx}`}
         {@const included = value && value.includes(choice.value)}
         {@const label = choice.label || (typeof choice.value === 'string' ? choice.value : '')}

package/dist/FieldChooserLink.svelte

@@ -1,10 +1,16 @@
+<script context="module">function reconstructUrl(url) {
+    const urlToTest = (/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)+([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])/.test(url)) ? `https://${url}` : url;
+    return new URL(urlToTest).toString();
+}
+</script>
 <script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
-import { isNotBlank, randomid } from 'txstate-utils';
+import { isBlank, isNotBlank, randomid } from 'txstate-utils';
 import { Chooser, ChooserStore, CHOOSER_API_CONTEXT } from './chooser';
 import Details from './chooser/Details.svelte';
 import Thumbnail from './chooser/Thumbnail.svelte';
 import FieldStandard from './FieldStandard.svelte';
+import InlineMessage from './InlineMessage.svelte';
 import { getDescribedBy } from './';
 export let id = undefined;
 export let path;
@@ -56,6 +62,11 @@ function userUrlEntry() {
 async function userUrlEntryDebounced() {
     const url = this.value;
     store.clearPreview();
+    if (isBlank(url)) {
+        selectedAsset = undefined;
+        formStore.setField(finalPath, undefined);
+        return;
+    }
     let found = false;
     if (chooserClient.findByUrl) {
         const item = await chooserClient.findByUrl(url);
@@ -83,18 +94,24 @@ async function userUrlEntryDebounced() {
         }
     }
     if (!found) {
-        try {
-            selectedAsset = {
-                type: 'raw',
-                id: urlToValueCache[url] ?? chooserClient.urlToValue?.(new URL(url).toString()),
-                url
-            };
+        if (urlToValueCache[url]) {
+            selectedAsset = { type: 'raw', id: urlToValueCache[url], url };
         }
-        catch {
-            // here we "select" a raw url so that we do not interrupt the users' typing, but
-            // we set its id to 'undefined' so that nothing makes it into the form until it's
-            // a valid URL
-            selectedAsset = { type: 'raw', url, id: undefined };
+        else {
+            try {
+                const reconstructed = reconstructUrl(url);
+                selectedAsset = {
+                    type: 'raw',
+                    id: chooserClient.urlToValue?.(reconstructed) ?? reconstructed,
+                    url
+                };
+            }
+            catch {
+                // here we "select" a raw url so that we do not interrupt the users' typing, but
+                // we set its id to 'undefined' so that nothing makes it into the form until it's
+                // a valid URL
+                selectedAsset = { type: 'raw', id: undefined, url };
+            }
         }
     }
     formStore.setField(finalPath, selectedAsset?.id);
@@ -112,7 +129,7 @@ async function updateSelected(..._) {
             if (!selectedAsset) {
                 const urlFromValue = chooserClient.valueToUrl?.($value) ?? $value;
                 try {
-                    selectedAsset = { type: 'raw', id: $value, url: new URL(urlFromValue).toString() };
+                    selectedAsset = { type: 'raw', id: $value, url: reconstructUrl(urlFromValue) };
                 }
                 catch {
                     selectedAsset = { type: 'broken', id: $value, url: $value };
@@ -129,7 +146,7 @@ $: updateSelected($value);
 </script>
 
 <FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} {related} {helptext} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
-  {#if selectedAsset}
+  {#if selectedAsset?.id}
     <div class="dialog-chooser-container">
       <Thumbnail item={selectedAsset} />
       <Details item={selectedAsset} />
@@ -141,6 +158,9 @@ $: updateSelected($value);
     {/if}
     <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
   </div>
+  {#if selectedAsset?.url.length && !selectedAsset.id}
+    <InlineMessage message={{ message: 'Entry does not match an internal resource and is not a valid URL. Nothing will be saved.', type: 'warning' }} />
+  {/if}
   {#if modalshown}
     <Chooser {store} {label} {pages} {assets} {images} {initialSource} {initialPath} {folders} {required} on:change={onChange(setVal)} on:escape={hide} />
   {/if}

package/dist/FieldRadio.svelte

@@ -1,4 +1,5 @@
 <script>import { Field } from '@txstate-mws/svelte-forms';
+import { onMount } from 'svelte';
 import Switcher from './Switcher.svelte';
 let className = '';
 export { className as class };
@@ -20,8 +21,25 @@ export let datetime = false;
 export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
+let val, stVal, finalDeserialize;
+function updateValue(valu, sVal, fDes) {
+    val = valu;
+    stVal = sVal;
+    finalDeserialize = fDes;
+}
+function reactToChoices(..._) {
+    if (!stVal)
+        return;
+    if (!choices.length)
+        stVal(finalDeserialize(''));
+    if (!choices.some(o => o.value === val))
+        stVal(notNull ? choices[0].value : finalDeserialize(''));
+}
+$: reactToChoices(choices);
+onMount(reactToChoices);
 </script>
 
-<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize>
+<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize let:setVal let:deserialize>
+  {@const _ = updateValue(value, setVal, deserialize)}
   <Switcher bind:id class={className} name={path} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
 </Field>

package/dist/FieldSelect.svelte

@@ -1,4 +1,5 @@
-<script>import { getDescribedBy } from './';
+<script>import { onMount } from 'svelte';
+import { getDescribedBy } from './';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';
 export { className as class };
@@ -22,9 +23,26 @@ export let datetime = false;
 export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
+let val, stVal, finalDeserialize;
+function updateValue(valu, sVal, fDes) {
+    val = valu;
+    stVal = sVal;
+    finalDeserialize = fDes;
+}
+function reactToChoices(..._) {
+    if (!stVal)
+        return;
+    if (!choices.length)
+        stVal(finalDeserialize(''));
+    if (!choices.some(o => o.value === val))
+        stVal(notNull ? choices[0].value : finalDeserialize(''));
+}
+$: reactToChoices(choices);
+onMount(reactToChoices);
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize let:deserialize let:setVal>
+  {@const _ = updateValue(value, setVal, deserialize)}
   <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}

package/dist/Switcher.svelte

@@ -32,7 +32,7 @@ $: width = (horizontal ? 100 / Math.min(choices.length, choices.length === 4 &&
 </script>
 <Container {id} {label} {messages} descid={groupid} {required} {related} {helptext} let:helptextid>
   <div class="dialog-radio {className}" use:eq={{ store }} class:horizontal role="radiogroup" aria-labelledby={groupid} class:valid class:invalid>
-    {#each choices as choice, idx}
+    {#each choices as choice, idx (choice.value)}
       {@const radioid = `${groupid}.${idx}`}
       <label for={radioid} style:width>
         <Radio id={radioid} {name} value={choice.value} selected={iptValue === choice.value} disabled={choice.disabled} {onChange} {onBlur} {helptextid} {extradescid} />

package/dist/TabStore.d.ts

@@ -17,6 +17,7 @@ interface ITabStore extends ElementSize {
     visited: Record<string, boolean>;
     tabids: Record<string, string>;
     panelids: Record<string, string>;
+    accordionOnMobile: boolean;
 }
 export declare class TabStore extends Store<ITabStore> {
     initialTab?: string | undefined;

package/dist/TabStore.js

@@ -19,7 +19,8 @@ export class TabStore extends Store {
             requireNext: false,
             tabids: tabs.reduce((acc, curr) => ({ ...acc, [curr.name]: randomid() }), {}),
             panelids: tabs.reduce((acc, curr) => ({ ...acc, [curr.name]: randomid() }), {}),
-            clientWidth: 1024
+            clientWidth: 1024,
+            accordionOnMobile: true
         }));
         this.initialTab = initialTab;
     }
@@ -49,7 +50,7 @@ export class TabStore extends Store {
         return derivedStore(this, v => v.panelids[v.tabs[v.current].name]);
     }
     accordion() {
-        return derivedStore(this, v => v.clientWidth && v.clientWidth < 500);
+        return derivedStore(this, v => v.accordionOnMobile && v.clientWidth && v.clientWidth < 500);
     }
     left() {
         this.update(v => ({ ...v, current: Math.max(0, v.current - 1) }));

package/dist/Tabs.svelte

@@ -10,7 +10,7 @@ export let active = undefined;
 export let store = new TabStore(tabs, active);
 export let disableDialogControl = false;
 export let accordionOnMobile = true;
-$: store.update(v => ({ ...v, tabs }));
+$: store.update(v => ({ ...v, tabs, accordionOnMobile }));
 const activeStore = new Store({});
 const tabelements = [];
 let activeelement;
@@ -30,7 +30,7 @@ const accordion = store.accordion();
 $: cols = Math.min(Math.floor(($store.clientWidth ?? 1024) / 90), $store.tabs.length);
 $: scalefactor = Math.min(roundTo(($store.clientWidth ?? 1024) / (cols * 130), 4), 1);
 $: wrapping = cols !== $store.tabs.length;
-$: dialogContext.hasTabs = !$accordion || !accordionOnMobile;
+$: dialogContext.hasTabs = !$accordion;
 function onClick(idx) {
     return () => store.activate(idx);
 }
@@ -87,7 +87,7 @@ onMount(reactToCurrent);
 </script>
 
 {#if $store.tabs.length > 1}
-  {#if !$accordion || !accordionOnMobile}
+  {#if !$accordion}
     <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
     <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
       {#each $store.tabs as tab, idx (tab.name)}

package/dist/colorpicker/FieldColorPicker.svelte

@@ -1,6 +1,7 @@
-<script>import FieldStandard from '../FieldStandard.svelte';
-import { Radio } from '..';
+<script>import { onMount } from 'svelte';
 import { randomid, shouldUseWhiteText } from 'txstate-utils';
+import FieldStandard from '../FieldStandard.svelte';
+import { Radio } from '..';
 export let id = undefined;
 let className = '';
 export { className as class };
@@ -14,15 +15,31 @@ export let defaultValue = notNull ? (addAllOption ? 'alternating' : options[0].v
 export let conditional = undefined;
 export let helptext = undefined;
 const groupid = randomid();
+let val, stVal;
+function updateValue(valu, sVal) {
+    val = valu;
+    stVal = sVal;
+}
+function reactToOptions(..._) {
+    if (!stVal)
+        return;
+    if (!options.length)
+        stVal(addAllOption ? 'alternating' : undefined);
+    if (val !== 'alternating' && !options.some(o => o.value === val))
+        stVal(notNull ? options[0].value : (addAllOption ? 'alternating' : undefined));
+}
+$: reactToOptions(options);
+onMount(reactToOptions);
 </script>
 
-<FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid>
+<FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid let:setVal>
+  {@const _ = updateValue(value, setVal)}
   <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
     {#if addAllOption}
       <label for={`${path}.alt`} class="colorsel alternating">
         <Radio id={`${path}.alt`} name={path} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
         <span class="alternating-bg">
-          {#each options as option}
+          {#each options as option (option.value)}
             <span style:background-color={option.color}></span>
           {/each}
         </span>

package/dist/tree/Tree.svelte

@@ -1,12 +1,13 @@
 <script>import { resize } from '@txstate-mws/svelte-components';
 import { derivedStore, Store } from '@txstate-mws/svelte-store';
 import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext } from 'svelte';
-import { toArray } from 'txstate-utils';
+import { isNotBlank } from 'txstate-utils';
 import LoadIcon from './LoadIcon.svelte';
 import TreeNode from './TreeNode.svelte';
-import { getHashId, TreeStore, TREE_STORE_CONTEXT } from './treestore';
+import { getHashId, transformSearchable, TreeStore, TREE_STORE_CONTEXT } from './treestore';
 export let headers;
 export let searchable = undefined;
+export let filter = '';
 export let nodeClass = undefined;
 export let singleSelect = undefined;
 export let enableResize = false;
@@ -24,8 +25,10 @@ export let moveHandler = undefined;
 export let copyHandler = undefined;
 export let dropEffect = undefined;
 export let store = new TreeStore(fetchChildren, { copyHandler, dragEligible, dropEffect, moveHandler });
+if (searchable)
+    store.searchableFn = transformSearchable(searchable);
 setContext(TREE_STORE_CONTEXT, store);
-const { rootItems, headerOverride } = store;
+const { filteredRootItems, headerOverride } = store;
 let checkboxelement;
 const headerelements = [];
 const treeWidth = new Store({});
@@ -57,14 +60,14 @@ function onDragEnd() {
 }
 let search = '';
 let searchTimer = 0;
-$: searchableFn = searchable == null ? undefined : (typeof searchable === 'function' ? (itm) => toArray(searchable(itm)) : (itm) => [itm[searchable]]);
+$: store.filter(filter);
 function onKeyUp(e) {
-    if (!searchableFn)
+    if (!store.searchableFn)
         return;
     if (e.key.length === 1) {
         search += e.key;
         const searchItems = $store.focused?.parent ? $store.focused.parent.children : $store.rootItems;
-        const newFocus = searchItems?.find(itm => searchableFn(itm).some(str => str.toLocaleLowerCase().startsWith(search.toLocaleLowerCase())));
+        const newFocus = searchItems?.find(itm => store.searchableFn(itm).some(str => str.toLocaleLowerCase().startsWith(search.toLocaleLowerCase())));
         if (newFocus)
             store.focus(newFocus);
         clearTimeout(searchTimer);
@@ -150,24 +153,24 @@ afterUpdate(() => {
 <div class="tree-header" class:resizing={!!dragheaderid} use:resize={{ store: treeWidth }} aria-hidden="true" on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined}>
   <div class="checkbox" bind:this={checkboxelement}>&nbsp;</div>
   {#each headers as header, i (header.label)}
-    <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" style:width={$headerOverride[header.id] ?? $headerSizes?.[i]}>{header.label}{#if i === 0 && $store.loading}<LoadIcon />{/if}{#if i === 0 && search}&nbsp;(searching: {search}){/if}</div>
+    <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" style:width={$headerOverride[header.id] ?? $headerSizes?.[i]}>{header.label}{#if i === 0 && $store.loading}<LoadIcon />{/if}{#if i === 0 && isNotBlank(search)}&nbsp;(searching: {search}){/if}</div>
     {#if enableResize && i !== headers.length - 1}<div class="tree-separator" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
   {/each}
 </div>
-{#if mounted && $rootItems?.length}
+{#if mounted && $filteredRootItems?.length}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul bind:this={store.treeElement} role="tree" class:resizing={!!dragheaderid} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined} on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:keyup={onKeyUp}>
-    {#each $rootItems as item, i (item.id)}
+    {#each $filteredRootItems as item, i (item.id)}
       <TreeNode
         {item}
         {headers}
         {headerSizes}
         {nodeClass}
         posinset={i + 1}
-        setsize={$rootItems.length}
+        setsize={$filteredRootItems.length}
         level={item.level}
-        prev={$rootItems[i - 1]}
-        next={$rootItems[i + 1]}
+        prev={$filteredRootItems[i - 1]}
+        next={$filteredRootItems[i + 1]}
         on:choose
         on:deselect
       />

package/dist/tree/Tree.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import { TreeStore } from './treestore';
-import type { DragEligibleFn, CopyHandlerFn, DropEffectFn, FetchChildrenFn, MoveHandlerFn, TreeHeader, TreeItemFromDB } from './treestore';
+import type { DragEligibleFn, CopyHandlerFn, DropEffectFn, FetchChildrenFn, MoveHandlerFn, TreeHeader, TreeItemFromDB, SearchableType } from './treestore';
 declare class __sveltets_Render<T extends TreeItemFromDB> {
     props(): {
         headers: TreeHeader<T>[];
-        searchable?: keyof T | ((item: T) => string | string[]) | undefined;
+        searchable?: SearchableType<T>;
+        filter?: string | undefined;
         nodeClass?: ((itm: T) => string) | undefined;
         singleSelect?: boolean | undefined;
         enableResize?: boolean | undefined;

package/dist/tree/treestore.d.ts

@@ -18,6 +18,7 @@ export interface ITreeStore<T extends TreeItemFromDB> {
     loading?: boolean;
     rootItems?: TypedTreeItem<T>[];
     itemsById: Record<string, TypedTreeItem<T> | undefined>;
+    filter?: string;
     focused?: TypedTreeItem<T>;
     selected: Map<string, TypedTreeItem<T>>;
     selectedItems: TypedTreeItem<T>[];
@@ -33,6 +34,7 @@ export type DragEligibleFn<T extends TreeItemFromDB> = (selectedItems: TypedTree
 export type DropEffectFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], dropTarget: TypedTreeItem<T>, above: boolean, userWantsCopy: boolean) => 'move' | 'copy' | 'none';
 export type MoveHandlerFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], dropTarget: TypedTreeItem<T>, above: boolean) => boolean | Promise<boolean>;
 export type CopyHandlerFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], dropTarget: TypedTreeItem<T>, above: boolean, userWantsRecursive: boolean | undefined) => boolean | Promise<boolean>;
+export type SearchableFn<T extends TreeItemFromDB> = (item: TypedTreeItem<T>) => string[];
 export interface TreeHeader<T extends TreeItemFromDB> {
     id: string;
     label: string;
@@ -48,7 +50,9 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     #private;
     fetchChildren: FetchChildrenFn<T>;
     treeElement?: HTMLElement;
-    rootItems: import("svelte/store").Readable<any>;
+    rootItems: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>[] | undefined, ITreeStore<T>>;
+    filterTerm: import("@txstate-mws/svelte-store").DerivedStore<string | undefined, ITreeStore<T>>;
+    filteredRootItems: import("svelte/store").Readable<TypedTreeItem<T>[] | undefined>;
     draggable: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
     dragging: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
     selectedUndraggable: import("@txstate-mws/svelte-store").DerivedStore<boolean | undefined, ITreeStore<T>>;
@@ -60,13 +64,15 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     copyHandler?: CopyHandlerFn<T>;
     dragEligibleHandler?: DragEligibleFn<T>;
     dropEffectHandler?: DropEffectFn<T>;
+    searchableFn?: SearchableFn<T>;
     singleSelect?: boolean;
     private refreshPromise?;
-    constructor(fetchChildren: FetchChildrenFn<T>, { moveHandler, copyHandler, dragEligible, dropEffect, singleSelect }?: {
+    constructor(fetchChildren: FetchChildrenFn<T>, { moveHandler, copyHandler, dragEligible, dropEffect, searchableFn, singleSelect }?: {
         moveHandler?: MoveHandlerFn<T>;
         copyHandler?: CopyHandlerFn<T>;
         dragEligible?: DragEligibleFn<T>;
         dropEffect?: DropEffectFn<T>;
+        searchableFn?: SearchableFn<T>;
         singleSelect?: boolean;
     });
     visit(item: TypedTreeItem<T>, cb: (item: TypedTreeItem<T>) => Promise<void>): Promise<void>;
@@ -77,6 +83,7 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     trigger(): void;
     fetch(item?: TypedTreeItem<T>): Promise<TypedTreeItem<T>[]>;
     refresh(item?: TypedTreeItem<T>, skipNotify?: boolean): Promise<void>;
+    filter(term: string | undefined, notify?: boolean): void;
     focus(item: TypedTreeItem<T> | undefined, notify?: boolean): void;
     select(item: TypedTreeItem<T>, { clear, notify, toggle }: {
         clear?: boolean | undefined;
@@ -118,3 +125,5 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
 export declare const hashedIds: Record<string, string>;
 export declare function getHashId(str: string): string;
 export declare const lazyObserver: IntersectionObserver | undefined;
+export type SearchableType<T> = keyof T | (keyof T)[] | ((item: T) => string | string[]) | undefined;
+export declare function transformSearchable<T>(searchable: SearchableType<T>): undefined | ((itm: T) => string[]);

package/dist/tree/treestore.js

@@ -1,12 +1,27 @@
 import { ActiveStore, derivedStore } from '@txstate-mws/svelte-store';
 import { derived } from 'svelte/store';
-import { hashid, keyby } from 'txstate-utils';
+import { hashid, isBlank, keyby, toArray } from 'txstate-utils';
 export const TREE_STORE_CONTEXT = {};
-const rootItems = v => v.rootItems;
 export class TreeStore extends ActiveStore {
     fetchChildren;
     treeElement;
-    rootItems = derived(this, rootItems);
+    rootItems = derivedStore(this, 'rootItems');
+    filterTerm = derivedStore(this, 'filter');
+    filteredRootItems = derived([this.rootItems, this.filterTerm], ([rootItems, filter]) => {
+        if (!this.searchableFn || !rootItems?.length || isBlank(filter))
+            return this.value.rootItems;
+        const ret = [];
+        for (const itm of this.value.rootItems ?? []) {
+            let found = false;
+            for (const val of this.searchableFn(itm)) {
+                if (val.startsWith(filter))
+                    found = true;
+            }
+            if (found)
+                ret.push(itm);
+        }
+        return ret;
+    });
     draggable = derivedStore(this, v => v.draggable && !v.loading);
     dragging = derivedStore(this, 'dragging');
     selectedUndraggable = derivedStore(this, 'selectedUndraggable');
@@ -18,15 +33,17 @@ export class TreeStore extends ActiveStore {
     copyHandler;
     dragEligibleHandler;
     dropEffectHandler;
+    searchableFn;
     singleSelect;
     refreshPromise;
-    constructor(fetchChildren, { moveHandler, copyHandler, dragEligible, dropEffect, singleSelect } = {}) {
+    constructor(fetchChildren, { moveHandler, copyHandler, dragEligible, dropEffect, searchableFn, singleSelect } = {}) {
         super({ itemsById: {}, selected: new Map(), selectedItems: [], copied: new Map(), dragging: false, draggable: !!moveHandler, headerWidthOverrides: {} });
         this.fetchChildren = fetchChildren;
         this.moveHandler = moveHandler;
         this.copyHandler = copyHandler;
         this.dragEligibleHandler = dragEligible;
         this.dropEffectHandler = dropEffect;
+        this.searchableFn = searchableFn;
         this.singleSelect = singleSelect;
     }
     async visit(item, cb) {
@@ -125,6 +142,11 @@ export class TreeStore extends ActiveStore {
         await this.refreshPromise;
         this.refreshPromise = undefined;
     }
+    filter(term, notify = true) {
+        this.value.filter = term;
+        if (notify)
+            this.trigger();
+    }
     focus(item, notify = true) {
         this.value.focused = item;
         if (notify)
@@ -357,3 +379,13 @@ export const lazyObserver = typeof IntersectionObserver !== 'undefined'
         }
     }, { rootMargin: '500px' })
     : undefined;
+export function transformSearchable(searchable) {
+    console.log('transformSearchable', searchable);
+    return searchable == null
+        ? undefined
+        : (typeof searchable === 'function'
+            ? (itm) => toArray(searchable(itm))
+            : (Array.isArray(searchable)
+                ? (itm) => searchable.map(k => itm[k])
+                : (itm) => [itm[searchable]]));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",