@dosgato/dialog 0.0.48 → 0.0.50

package/dist/FieldCodeEditor.svelte.d.ts

@@ -11,7 +11,7 @@ declare const __propDef: {
         rows?: number | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
-        use?: HTMLActionEntry<any>[] | undefined;
+        use?: HTMLActionEntry[] | undefined;
         inputelement?: HTMLTextAreaElement | undefined;
         related?: number | true | undefined;
         extradescid?: string | undefined;

package/dist/FieldText.svelte.d.ts

@@ -13,7 +13,7 @@ declare const __propDef: {
         maxlength?: number | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
-        use?: HTMLActionEntry<any>[] | undefined;
+        use?: HTMLActionEntry[] | undefined;
         inputelement?: HTMLInputElement | undefined;
         related?: number | true | undefined;
         extradescid?: string | undefined;

package/dist/FieldTextArea.svelte.d.ts

@@ -12,7 +12,7 @@ declare const __propDef: {
         rows?: number | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
-        use?: HTMLActionEntry<any>[] | undefined;
+        use?: HTMLActionEntry[] | undefined;
         inputelement?: HTMLTextAreaElement | undefined;
         related?: number | true | undefined;
         extradescid?: string | undefined;

package/dist/Input.svelte.d.ts

@@ -25,7 +25,7 @@ declare const __propDef: {
         onChange: any;
         onBlur: any;
         onSelect?: any;
-        use?: HTMLActionEntry<any>[] | undefined;
+        use?: HTMLActionEntry[] | undefined;
         inputelement?: HTMLInputElement | undefined;
     };
     events: {

package/dist/chooser/ChooserAPI.d.ts

@@ -56,6 +56,7 @@ interface Item {
 export interface Folder extends Item {
     type: 'folder';
     hasChildren: boolean;
+    childCount: number;
     acceptsUpload: boolean;
     url: string;
 }

package/dist/chooser/ChooserStore.d.ts

@@ -18,7 +18,7 @@ export interface IAssetStore {
     activetype: ChooserType;
     activesource: number;
     initialized: boolean;
-    preview?: AnyUIItem;
+    preview?: AnyItem | AnyUIItem;
 }
 export interface ChooserStoreOptions<F> {
     pages?: boolean;
@@ -44,11 +44,11 @@ export declare class ChooserStore<F = any> extends Store<IAssetStore> {
     setOptions(options: ChooserStoreOptions<F>): void;
     sources: import("@txstate-mws/svelte-store").DerivedStore<UISource[], IAssetStore>;
     source: import("@txstate-mws/svelte-store").DerivedStore<UISource | undefined, IAssetStore>;
-    preview: import("@txstate-mws/svelte-store").DerivedStore<AnyUIItem | undefined, IAssetStore>;
+    preview: import("@txstate-mws/svelte-store").DerivedStore<AnyItem | AnyUIItem | undefined, IAssetStore>;
     getSource(state?: IAssetStore): UISource | undefined;
     getSourceIndex(name: string, state?: IAssetStore, type?: ChooserType): number;
     init(options: ChooserStoreOptions<F>): Promise<void>;
-    setPreview(item?: AnyUIItem): void;
+    setPreview(item?: AnyItem | AnyUIItem): void;
     clearPreview(): void;
     setSource(name?: string, init?: boolean): void;
 }

package/dist/chooser/ChooserStore.js

@@ -1,6 +1,6 @@
 import { Store, derivedStore } from '@txstate-mws/svelte-store';
 import { tick } from 'svelte';
-import { findIndex, isBlank } from 'txstate-utils';
+import { findIndex } from 'txstate-utils';
 export const CHOOSER_STORE_CONTEXT = {};
 const nofilter = (x) => true;
 export function combinePath(path, name) {

package/dist/chooser/Details.svelte

@@ -42,7 +42,7 @@ export let item;
       </div>
       <div>
         <dt>Contents:</dt>
-        <dd>{item.children?.length ?? 0} sub-items</dd>
+        <dd>{item.childCount} sub-items</dd>
       </div>
     </div>
   {/if}

package/dist/chooser/Details.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import { type AnyUIItem, type RawURL } from './ChooserStore';
+import type { AnyItem } from './ChooserAPI';
+import { type RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
-        item: AnyUIItem | RawURL;
+        item: AnyItem | RawURL;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/tree/Tree.svelte

@@ -95,15 +95,11 @@ function headerDragReset() {
 let mounted = false;
 onMount(async () => {
     document.addEventListener('dragend', onDragEnd);
-    const saveFocusId = $store.focused?.id;
     headerSizes.set(calcHeaderSizes()); // seems to need a kick on first mount
     await new Promise(resolve => requestAnimationFrame(resolve));
     // need to wait long enough for headers to redraw before trying to mount the rows
     await new Promise(resolve => requestAnimationFrame(resolve));
     mounted = true;
-    const el = saveFocusId ? document.getElementById(getHashId(saveFocusId)) : undefined;
-    if ($store.focused?.id && $store.focused.id === saveFocusId)
-        el?.scrollIntoView({ block: 'center' });
     await store.refresh();
 });
 onDestroy(() => {
@@ -159,7 +155,7 @@ afterUpdate(() => {
   .tree-header {
     display: flex;
     align-items: center;
-    background-color: var(--tree-head-bg, #555555);
+    background-color: var(--tree-head-bg, #757575);
     color: var(--tree-head-text, white);
     position: sticky;
     top: 0;

package/dist/tree/TreeNode.svelte

@@ -3,10 +3,10 @@ import checkboxBlankOutline from '@iconify-icons/mdi/checkbox-blank-outline';
 import menuDown from '@iconify-icons/mdi/menu-down';
 import menuRight from '@iconify-icons/mdi/menu-right';
 import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, onMount } from 'svelte';
 import { isNotBlank, toArray } from 'txstate-utils';
 import { Icon } from '..';
-import { TREE_STORE_CONTEXT, getHashId } from './treestore';
+import { TREE_STORE_CONTEXT, getHashId, lazyObserver } from './treestore';
 import LoadIcon from './LoadIcon.svelte';
 import TreeCell from './TreeCell.svelte';
 export let headers;
@@ -243,6 +243,14 @@ function onDragLeaveAbove(e) {
     else
         dragOverAbove--;
 }
+let display = $focused && $focused.id === item.id;
+onMount(async () => {
+    if ($focused && $focused.id === item.id)
+        nodeelement.scrollIntoView({ block: 'center' });
+    nodeelement.addEventListener('lazy', () => { display = true; });
+    lazyObserver.observe(nodeelement);
+    return () => lazyObserver.unobserve(nodeelement);
+});
 $: if ($dragging) {
     dragOver = 0;
     dragOverAbove = 0;
@@ -287,6 +295,7 @@ $: if ($dragging) {
     on:mousedown={e => { if (e.shiftKey) e.preventDefault() }}
     on:dblclick={onDblClick}
   >
+  {#if display}
     <!-- keyboard users have modifier keys, they don't ever focus the checkbox -->
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div class="checkbox" on:click={onCheckClick}>
@@ -315,6 +324,7 @@ $: if ($dragging) {
       {#if item.hasChildren && !showChildren}, right arrow to show children{/if}
       {#if $selected.size > 0}, command-enter to select multiple, shift-enter to select all from last selection{/if}
     </ScreenReaderOnly>
+  {/if}
   </div>
   {#if showChildren && item.children}
     <ul role="group">
@@ -346,6 +356,7 @@ $: if ($dragging) {
     border-bottom: var(--tree-border, 1px dashed #aaaaaa);
     width: 100%;
     overflow: hidden;
+    min-height: 2.9em;
   }
   :global(.resizing) .tree-node {
     cursor: col-resize;
@@ -373,7 +384,7 @@ $: if ($dragging) {
     color: var(--tree-selected-text, inherit);
   }
   .tree-node.dragOver {
-    background-color: var(--tree-droppable, #555555);
+    background-color: var(--tree-droppable, #757575);
     color: var(--tree-droppable-text, white);
   }
   .tree-node.dropDisabled {
@@ -387,7 +398,7 @@ $: if ($dragging) {
     height: 6px;
   }
   .drop-above.dragOverAbove {
-    background-color: var(--tree-droppable, #555555);
+    background-color: var(--tree-droppable, #757575);
   }
   li {
     position: relative;

package/dist/tree/treestore.d.ts

@@ -117,3 +117,4 @@ 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;

package/dist/tree/treestore.js

@@ -345,3 +345,14 @@ export function getHashId(str) {
     hashedIds[str] ??= hashid(str);
     return hashedIds[str];
 }
+const lazyEvent = new CustomEvent('lazy');
+export const lazyObserver = typeof IntersectionObserver !== 'undefined'
+    ? new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                entry.target.dispatchEvent(lazyEvent);
+                lazyObserver.unobserve(entry.target);
+            }
+        }
+    }, { rootMargin: '500px' })
+    : undefined;

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.48",
+  "version": "0.0.50",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -39,7 +39,7 @@
     "svelte-preprocess": "^5.0.0",
     "svelte2tsx": "^0.6.0",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
+    "typescript": "^5.0.2"
   },
   "peerDependencies": {
     "svelte": "^3.53.1"