@dosgato/dialog 0.0.39 → 0.0.42

package/FieldAutocomplete.svelte

@@ -1,7 +1,7 @@
 <script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
-import { randomid } from 'txstate-utils';
-import { PopupMenu, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+import { isBlank, isNotBlank, randomid } from 'txstate-utils';
+import { modifierKey, PopupMenu, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { getDescribedBy } from './';
 import { onMount } from 'svelte';
 export let id = undefined;
@@ -13,47 +13,63 @@ export { className as class };
 export let notNull = false;
 export let disabled = false;
 export let choices;
-export let defaultValue = notNull ? choices[0].value : undefined;
+export let defaultValue = undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
 export let helptext = undefined;
 let inputvalue = '';
 let popupvalue = undefined;
-let savedLabel = '';
-let changed = false;
 let menuid;
 const liveTextId = randomid();
-$: filteredChoices = changed
-    ? choices.filter((item) => {
-        return item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase());
-    })
-    : choices;
+$: finalserialize = !notNull ? nullableSerialize : v => v;
+$: finaldeserialize = !notNull ? nullableDeserialize : v => v;
+$: valueToLabel = Object.fromEntries(choices.map(c => [c.value, c.label || c.value]));
+$: labelToValue = Object.fromEntries(choices.map(c => [c.label || c.value, c.value]));
+$: filteredChoices = choices.filter((item) => {
+    return item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase());
+});
+let menushown = false;
+let savedVal = defaultValue;
+function onKeyUp(setVal) {
+    return (e) => {
+        if (!modifierKey(e)) {
+            const val = labelToValue[inputvalue.trim()];
+            menushown = !val;
+            // we need to make sure the form state stays up to date with what's shown in the text field
+            // if the text field has only a substring of a valid label the form state value should remain
+            // empty, but once the text field has a valid label the form state should be updated
+            if (savedVal !== val) {
+                savedVal = val;
+                setVal(val);
+            }
+        }
+    };
+}
 function onchangepopup(setVal) {
     return (e) => {
         inputvalue = e.detail.label || e.detail.value;
-        savedLabel = inputvalue;
         popupvalue = undefined;
+        savedVal = e.detail.value;
         setVal(e.detail.value);
-        changed = false;
     };
 }
-async function checkifchanged(e) {
-    await setTimeout(function () {
-        if (inputelement.value !== savedLabel)
-            changed = true;
-    }, 1);
-}
-const valueToLabel = {};
-for (const choice of choices)
-    valueToLabel[choice.value] = choice.label || choice.value;
-let set = false;
-function reactToInitialValue(value) {
-    if (!value || set)
-        return;
-    inputvalue = valueToLabel[value];
-    savedLabel = inputvalue;
-    set = true;
+function reactToValue(value, setVal) {
+    const dsvalue = finaldeserialize(value);
+    if (dsvalue !== savedVal) {
+        const label = valueToLabel[dsvalue];
+        // if the form state value changes from the outside we need to replace the text field content
+        // with the new label
+        // if the new form state value is undefined, we should let them keep any half-finished typing they
+        // might have in the field, but if they have a fully valid entry in the field, it needs to disappear
+        // to reflect the new reality that the form value has gone away
+        if (label != null || (savedVal && valueToLabel[savedVal]))
+            inputvalue = label ?? '';
+        savedVal = dsvalue;
+        // if the form state value changes from the outside to an invalid value, we have to clear it out
+        if (isNotBlank(dsvalue) && isBlank(label))
+            setVal(finaldeserialize(''));
+    }
 }
 let portal;
 onMount(() => {
@@ -61,10 +77,10 @@ onMount(() => {
 });
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:setVal let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  {@const _ = reactToInitialValue(value)}
-  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} aria-expanded={false} aria-controls={menuid} on:blur={onBlur} on:change={onChange} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid])} on:keydown={checkifchanged}>
-  <PopupMenu bind:menuid align="bottomleft" usePortal={portal} items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={finalserialize} deserialize={finaldeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:messagesid let:helptextid>
+  {@const _ = reactToValue(value, setVal)}
+  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} aria-expanded={false} aria-controls={menuid} on:blur={onBlur} on:keyup={onKeyUp(setVal)} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid])}>
+  <PopupMenu bind:menushown bind:menuid align="bottomleft" usePortal={portal} items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
   <ScreenReaderOnly arialive="polite" ariaatomic={true} id={liveTextId}>
     {filteredChoices.length} {filteredChoices.length === 1 ? 'option' : 'options'} available.
   </ScreenReaderOnly>

package/FieldAutocomplete.svelte.d.ts

@@ -13,7 +13,7 @@ declare const __propDef: {
             value: string;
             disabled?: boolean | undefined;
         }[];
-        defaultValue?: any;
+        defaultValue?: string | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         inputelement?: HTMLInputElement | undefined;

package/FieldMultiselect.svelte

@@ -11,6 +11,7 @@ export let disabled = false;
 export let defaultValue = [];
 export let conditional = undefined;
 export let required = false;
+export let maxSelections = 0;
 export let getOptions;
 // each time we run getOptions we will save the value -> label mappings
 // that it finds, so that we can display labels on pills
@@ -54,7 +55,7 @@ async function reactToValue(value) {
   <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
     {@const _ = reactToValue(value)}
     <div class:valid class:invalid>
-      <MultiSelect {id} name={path} usePortal={portal} {disabled} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}></MultiSelect>
+      <MultiSelect {id} name={path} usePortal={portal} {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}></MultiSelect>
     </div>
   </FieldStandard>
 {/if}

package/FieldMultiselect.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         defaultValue?: string[] | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
+        maxSelections?: number | undefined;
         getOptions: (search: string) => Promise<PopupMenuItem[]>;
     };
     events: {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.39",
+  "version": "0.0.42",
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.3.8",
+    "@txstate-mws/svelte-components": "^1.3.9",
     "@txstate-mws/svelte-forms": "^1.3.4",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",

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 ?? ''])