@dosgato/dialog 0.0.39 → 0.0.41

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.39",
+  "version": "0.0.41",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.8",
     "@txstate-mws/svelte-forms": "^1.3.4",

package/tree/Tree.svelte

@@ -2,6 +2,7 @@
 import { derivedStore, Store } from '@txstate-mws/svelte-store';
 import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext } from 'svelte';
 import { hashid } from 'txstate-utils';
+import LoadIcon from './LoadIcon.svelte';
 import TreeNode from './TreeNode.svelte';
 import { TreeStore, TREE_STORE_CONTEXT } from './treestore';
 export let headers;
@@ -92,16 +93,15 @@ function headerDragEnd() {
 function headerDragReset() {
     store.resetHeaderOverride();
 }
-let mounted = false;
 onMount(async () => {
     document.addEventListener('dragend', onDragEnd);
+    const saveFocusId = $store.focused?.id;
     await store.refresh();
-    if ($store.focused?.id) {
+    if ($store.focused?.id && $store.focused.id === saveFocusId) {
         const el = document.getElementById(hashid($store.focused.id));
         el?.scrollIntoView({ block: 'center' });
     }
     headerSizes.set(calcHeaderSizes()); // seems to need a kick on first mount
-    mounted = true;
 });
 onDestroy(() => {
     document.removeEventListener('dragend', onDragEnd);
@@ -123,15 +123,15 @@ afterUpdate(() => {
 
 <svelte:window on:mouseup={headerDragEnd} />
 
-<div class="tree-header" class:mounted 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="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}</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}</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 $rootItems?.length}
-  <ul bind:this={store.treeElement} class:mounted role="tree" class:resizing={!!dragheaderid} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined} on:mouseup={headerDragEnd} on:touchend={headerDragEnd}>
+  <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}>
     {#each $rootItems as item, i (item.id)}
       <TreeNode
         {item}
@@ -161,10 +161,6 @@ afterUpdate(() => {
     left: 0;
     z-index: 1;
     font-size: 0.9em;
-    opacity: 0;
-  }
-  .tree-header.mounted {
-    opacity: 1;
   }
   .tree-header.resizing {
     cursor: col-resize;
@@ -200,10 +196,6 @@ afterUpdate(() => {
     margin: 0;
     list-style: none;
     font-size: 0.9em;
-    opacity: 0;
-  }
-  ul.mounted {
-    opacity: 1;
   }
   :global([data-eq~="650px"]) ul {
     font-size: 0.8em;

package/tree/treestore.js

@@ -101,6 +101,8 @@ export class TreeStore extends ActiveStore {
                 this.value.rootItems = children;
             }
             this.addLookup(children);
+            // if any selected items disappeared in the refresh, we need to remove them from the selection map
+            this.cleanSelected();
             // if the focused item disappeared in the refresh, we need to replace it,
             // as without a focus the tree becomes invisible to keyboard nav
             if (!this.value.itemsById[this.value.focused?.id ?? ''])