@dosgato/dialog 0.0.55 → 0.0.57

package/dist/FieldSelect.svelte

@@ -1,5 +1,4 @@
 <script>import { onMount } from 'svelte';
-import { isBlank } from 'txstate-utils';
 import { getDescribedBy } from './';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';

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/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;
+        search += e.key.toLocaleLowerCase();
         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)));
         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.toLocaleLowerCase().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?.toLocaleLowerCase();
+        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.55",
+  "version": "0.0.57",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",