@dosgato/dialog 0.0.11 → 0.0.13

package/ButtonGroup.svelte

@@ -47,7 +47,7 @@ function onKeyDown(choice, idx) {
 <ul class="dialog-btn-group" class:disabled class:valid class:invalid aria-disabled={disabled} role="radiogroup" aria-labelledby={groupid} on:blur>
   {#each choices as choice, i}
     {@const selected = choice.value === value}
-    <li bind:this={elements[i]} role="radio" class:selected tabindex={selected ? 0 : -1} aria-controls={ariaControls} on:click={onClick(choice, i)} on:keydown={onKeyDown(choice, i)} on:blur aria-describedby="{groupid} {messagesid}">{choice.label || choice.value}</li>
+    <li bind:this={elements[i]} role="radio" class:selected aria-checked={selected} tabindex={selected ? 0 : -1} aria-controls={ariaControls} on:click={onClick(choice, i)} on:keydown={onKeyDown(choice, i)} on:blur aria-describedby="{groupid} {messagesid}">{choice.label || choice.value}</li>
   {/each}
 </ul>
 

package/FieldAutocomplete.svelte

@@ -20,12 +20,7 @@ let inputvalue = '';
 let popupvalue = undefined;
 let savedLabel = '';
 let changed = false;
-if (defaultValue) {
-    const selected = choices.find(c => c.value === defaultValue);
-    inputvalue = selected.label || selected.value;
-    savedLabel = inputvalue;
-}
-const listId = randomid();
+let menuid;
 const liveTextId = randomid();
 const helpTextId = randomid();
 $: filteredChoices = changed
@@ -48,11 +43,23 @@ async function checkifchanged(e) {
             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;
+}
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:setVal let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
-  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} {onBlur} {onChange} aria-owns={listId} autocapitalize="none" type="text" autocomplete="off"  aria-autocomplete="list" role="combobox" aria-expanded="false" {disabled} aria-describedby={`${messagesid ?? ''} ${helptext.length ? helpTextId : ''}`} on:keydown={checkifchanged}>
-  <PopupMenu align="bottomleft" items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
+  {@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} {onBlur} {onChange} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={`${messagesid ?? ''} ${helptext.length ? helpTextId : ''}`} on:keydown={checkifchanged}>
+  <PopupMenu bind:menuid align="bottomleft" items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
   {#if helptext.length}
     <span id={helpTextId} class="field-help-text">{helptext}</span>
   {/if}

package/FieldHidden.svelte

@@ -0,0 +1,14 @@
+<script>import { Field, nullableSerialize, nullableDeserialize, FormStore, FORM_CONTEXT } from '@txstate-mws/svelte-forms';
+import { getContext } from 'svelte';
+export let id = undefined;
+export let path;
+export let value = '';
+export let notNull = false;
+export let conditional = undefined;
+const store = getContext(FORM_CONTEXT);
+$: store.setField(path, value);
+</script>
+
+<Field {path} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value>
+  <input type="hidden" name={path} {value} {id}>
+</Field>

package/FieldHidden.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        value?: string;
+        notNull?: boolean;
+        conditional?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldHiddenProps = typeof __propDef.props;
+export declare type FieldHiddenEvents = typeof __propDef.events;
+export declare type FieldHiddenSlots = typeof __propDef.slots;
+export default class FieldHidden extends SvelteComponentTyped<FieldHiddenProps, FieldHiddenEvents, FieldHiddenSlots> {
+}
+export {};

package/FieldMultiselect.svelte

@@ -13,7 +13,12 @@ export let getOptions;
 // that it finds, so that we can display labels on pills
 let valueToLabel = {};
 async function wrapGetOptions(search) {
-    const opts = await getOptions(search);
+    let opts = await getOptions(search);
+    // if no options are returned with the search term, we can end up with an infinite loop
+    // the first time reactToValue calls wrapGetOptions
+    if (opts.length === 0) {
+        opts = await getOptions('');
+    }
     for (const opt of opts)
         valueToLabel[opt.value] = opt.label || opt.value;
     valueToLabel = valueToLabel;

package/Form.svelte

@@ -13,7 +13,7 @@ export let preload = undefined;
 setContext(CHOOSER_API_CONTEXT, chooserClient);
 </script>
 
-<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:allMessages let:saved let:valid let:invalid let:validating let:submitting>
+<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting>
   <slot {messages} {saved} {validating} {submitting} {valid} {invalid} />
   <div class="form-errors" aria-live='assertive'>
     {#if messages.length}
@@ -21,11 +21,11 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
         {#each messages as message}
           <li>{message.message}</li>
         {/each}
-        {#if invalid}
+        {#if showingInlineErrors}
           <li>More errors. See inline messages for details.</li>
         {/if}
       </ul>
-    {:else if invalid}
+    {:else if showingInlineErrors}
       This form contains validation errors. See inline messages for details.
     {/if}
   </div>

package/chooser/Asset.svelte

@@ -67,6 +67,7 @@ function onClick(e) {
   aria-setsize={setsize}
   aria-posinset={posinset}
   aria-level={level}
+  aria-selected={isPreview}
   class="dialog-asset-file"
   class:isPreview
   on:keydown={onKeyDown}

package/chooser/AssetFolder.svelte

@@ -89,6 +89,7 @@ function onClick(e) {
   role="treeitem"
   class:isPreview
   aria-expanded={!!folder.open}
+  aria-selected={isPreview}
   aria-level={level}
   aria-setsize={setsize}
   aria-posinset={posinset}

package/chooser/Page.svelte

@@ -87,6 +87,7 @@ function onClick(e) {
   role="treeitem"
   class:isPreview
   aria-expanded={!!page.open}
+  aria-selected={isPreview}
   aria-level={level}
   aria-setsize={setsize}
   aria-posinset={posinset}

package/index.d.ts

@@ -7,6 +7,7 @@ export { default as FieldChooserLink } from './FieldChooserLink.svelte';
 export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
+export { default as FieldHidden } from './FieldHidden.svelte';
 export { default as FieldMultiple } from './FieldMultiple.svelte';
 export { default as FieldMultiselect } from './FieldMultiselect.svelte';
 export { default as FieldNumber } from './FieldNumber.svelte';
@@ -15,6 +16,7 @@ export { default as FieldSelect } from './FieldSelect.svelte';
 export { default as FieldStandard } from './FieldStandard.svelte';
 export { default as FieldText } from './FieldText.svelte';
 export { default as FieldTextArea } from './FieldTextArea.svelte';
+export { default as FileIcon } from './FileIcon.svelte';
 export { default as Form } from './Form.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';

package/index.js

@@ -7,6 +7,7 @@ export { default as FieldChooserLink } from './FieldChooserLink.svelte';
 export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
+export { default as FieldHidden } from './FieldHidden.svelte';
 export { default as FieldMultiple } from './FieldMultiple.svelte';
 export { default as FieldMultiselect } from './FieldMultiselect.svelte';
 export { default as FieldNumber } from './FieldNumber.svelte';
@@ -15,6 +16,7 @@ export { default as FieldSelect } from './FieldSelect.svelte';
 export { default as FieldStandard } from './FieldStandard.svelte';
 export { default as FieldText } from './FieldText.svelte';
 export { default as FieldTextArea } from './FieldTextArea.svelte';
+export { default as FileIcon } from './FileIcon.svelte';
 export { default as Form } from './Form.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.2.9",
-    "@txstate-mws/svelte-forms": "^0.0.18",
+    "@txstate-mws/svelte-components": "^1.2.11",
+    "@txstate-mws/svelte-forms": "^0.0.21",
     "@iconify/svelte": "^2.2.1",
     "@iconify-icons/mdi": "^1.2.22",
     "txstate-utils": "^1.7.3"
@@ -35,6 +35,7 @@
     "./FieldDate.svelte": "./FieldDate.svelte",
     "./FieldDateTime.svelte": "./FieldDateTime.svelte",
     "./FieldDualListbox.svelte": "./FieldDualListbox.svelte",
+    "./FieldHidden.svelte": "./FieldHidden.svelte",
     "./FieldMultiple.svelte": "./FieldMultiple.svelte",
     "./FieldMultiselect.svelte": "./FieldMultiselect.svelte",
     "./FieldNumber.svelte": "./FieldNumber.svelte",