@dosgato/dialog 0.0.41 → 0.0.43

package/Dialog.svelte

@@ -55,7 +55,9 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
         {#if isNotBlank(cancelText)}
           <Button cancel {describedby} on:click={() => dispatch('escape')}>{cancelText}</Button>
         {/if}
-        <Button class="primary" disabled={disabled || (hasRequired && !ignoreTabs)} {describedby} on:click={() => dispatch('continue')}><Icon icon={continueIcon} inline />{continueText}</Button>
+        {#if isNotBlank(continueText)}
+          <Button class="primary" disabled={disabled || (hasRequired && !ignoreTabs)} {describedby} on:click={() => dispatch('continue')}><Icon icon={continueIcon} inline />{continueText}</Button>
+        {/if}
         {#if nextTitle && !ignoreTabs}
           <Button class="next" disabled={!nextTitle} on:click={onNext}>Next<ScreenReaderOnly> Tab ({nextTitle})</ScreenReaderOnly> <Icon width="1.2em" icon={arrowRightLight} inline /></Button>
         {/if}

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/Tab.svelte

@@ -15,12 +15,16 @@ const idx = $store.tabs.findIndex(t => t.name === name);
 const last = idx === $store.tabs.length - 1;
 </script>
 
-{#if $accordion}
-  <div bind:this={tabelements[idx]} id={$tabid} class="tabs-tab" class:last aria-selected={active} aria-controls={$panelid} role="tab" tabindex={0} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={$store.tabs[idx].icon} inline />{$title}<i class="tabs-accordion-arrow" aria-hidden="true"></i></div>
-{/if}
-<div id={$panelid} hidden={!active} role="tabpanel" tabindex="-1" aria-labelledby={$tabid} class="tabs-panel" class:accordion={$accordion}>
+{#if $store.tabs.length > 1}
+  {#if $accordion}
+    <div bind:this={tabelements[idx]} id={$tabid} class="tabs-tab" class:last aria-selected={active} aria-controls={$panelid} role="tab" tabindex={0} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={$store.tabs[idx].icon} inline />{$title}<i class="tabs-accordion-arrow" aria-hidden="true"></i></div>
+  {/if}
+  <div id={$panelid} hidden={!active} role="tabpanel" tabindex="-1" aria-labelledby={$tabid} class="tabs-panel" class:accordion={$accordion}>
+    <slot />
+  </div>
+{:else}
   <slot />
-</div>
+{/if}
 
 <style>
   .tabs-panel {

package/Tabs.svelte

@@ -85,20 +85,24 @@ $: reactToCurrent($activeStore);
 onMount(reactToCurrent);
 </script>
 
-{#if !$accordion}
-  <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
-    {#each $store.tabs as tab, idx (tab.name)}
-      {@const active = isActive(idx, $store.current)}
-      {@const left = idx % cols === 0}
-      <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.name]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.name]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
-    {/each}
-  </ul>
-  <div bind:this={activeelement} class="tabs-active"></div>
-  <slot current={$store.current} />
-{:else}
-  <div use:resize={{ store }} class="tabs-container">
+{#if $store.tabs.length > 1}
+  {#if !$accordion}
+    <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
+      {#each $store.tabs as tab, idx (tab.name)}
+        {@const active = isActive(idx, $store.current)}
+        {@const left = idx % cols === 0}
+        <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.name]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.name]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
+      {/each}
+    </ul>
+    <div bind:this={activeelement} class="tabs-active"></div>
     <slot current={$store.current} />
-  </div>
+  {:else}
+    <div use:resize={{ store }} class="tabs-container">
+      <slot current={$store.current} />
+    </div>
+  {/if}
+{:else}
+  <slot current={$store.current} />
 {/if}
 
 <style>

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.41",
+  "version": "0.0.43",
   "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",