@dosgato/dialog 0.0.9 → 0.0.12

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,12 @@ let inputvalue = '';
 let popupvalue = undefined;
 let savedLabel = '';
 let changed = false;
+let menuid;
 if (defaultValue) {
     const selected = choices.find(c => c.value === defaultValue);
     inputvalue = selected.label || selected.value;
     savedLabel = inputvalue;
 }
-const listId = randomid();
 const liveTextId = randomid();
 const helpTextId = randomid();
 $: filteredChoices = changed
@@ -50,9 +50,9 @@ async function checkifchanged(e) {
 }
 </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>
-  <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={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: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} 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/FieldDate.svelte

@@ -14,6 +14,6 @@ export let conditional = undefined;
 export let required = false;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={dateSerialize} deserialize={dateDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange>
-  <Input type="date" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} />
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={dateSerialize} deserialize={dateDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
+  <Input type="date" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {messagesid} />
 </FieldStandard>

package/FieldDualListbox.svelte

@@ -15,8 +15,8 @@ export let choices;
 export let defaultValue = [];
 export let conditional = undefined;
 export let required = false;
-let itemsToAdd = []; //the items selected in the left listbox
-let itemsToRemove = []; //the items selected in the right listbox
+let itemsToAdd = []; // the items selected in the left listbox
+let itemsToRemove = []; // the items selected in the right listbox
 let instructions = 'test';
 $: {
     if (itemsToAdd.length === 1)
@@ -46,10 +46,6 @@ function addToAvailable(value, setVal) {
         setVal(selected);
     };
 }
-let valueToLabel = {};
-for (const choice of choices) {
-    valueToLabel[choice.value] = choice.label || choice.value;
-}
 function valueToSelectedChoices(value) {
     // keep the selected options ordered as they were in the available options
     const valueSet = new Set(value);
@@ -88,7 +84,7 @@ function onkeydown(value, setVal) {
     <ScreenReaderOnly>
       <span aria-live="polite">{instructions}</span>
     </ScreenReaderOnly>
-    <Listbox label={sourceLabel} multiselect={multiselect} items={getAvailable(value)} {descid} {valid} {invalid} on:change={e => itemsToAdd = e.detail} selected={itemsToAdd} on:blur={onBlur}/>
+    <Listbox label={sourceLabel} multiselect={multiselect} items={getAvailable(value)} {descid} {valid} {invalid} on:change={e => { itemsToAdd = e.detail }} selected={itemsToAdd} on:blur={onBlur}/>
     <div class="toolbar">
       <button type="button" class="toolbar-button" title="Move selection to {selectedLabel}" disabled={itemsToAdd.length === 0} on:click={addToSelected(value, setVal)}>
         <Icon icon={menuRight} width='3em'/>
@@ -97,7 +93,7 @@ function onkeydown(value, setVal) {
         <Icon icon={menuLeft} width='3em'/>
       </button>
     </div>
-    <Listbox label={selectedLabel} multiselect={multiselect} items={valueToSelectedChoices(value)} {descid} {valid} {invalid} on:change={e => itemsToRemove = e.detail} selected={itemsToRemove} on:blur={onBlur}/>
+    <Listbox label={selectedLabel} multiselect={multiselect} items={valueToSelectedChoices(value)} {descid} {valid} {invalid} on:change={e => { itemsToRemove = e.detail }} selected={itemsToRemove} on:blur={onBlur}/>
   </div>
 </FieldStandard>
 
@@ -115,4 +111,4 @@ function onkeydown(value, setVal) {
     border: 0;
     padding: 0;
   }
-</style>
+</style>

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

@@ -14,8 +14,8 @@ export let conditional = undefined;
 export let required = false;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange>
-  <select {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
+  <select {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={messagesid}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}
       <option value={choice.value} disabled={choice.disabled} selected={value === choice.value}>{choice.label || choice.value}</option>

package/FieldText.svelte

@@ -15,6 +15,6 @@ export let conditional = undefined;
 export let required = false;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange>
-  <Input {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength}></Input>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
+  <Input {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid}></Input>
 </FieldStandard>

package/FieldTextArea.svelte

@@ -0,0 +1,24 @@
+<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+import FieldStandard from './FieldStandard.svelte';
+let className = '';
+export { className as class };
+export let id = undefined;
+export let path;
+export let label = '';
+export let notNull = false;
+export let defaultValue = notNull ? '' : undefined;
+export let maxlength = undefined;
+export let rows = undefined;
+export let conditional = undefined;
+export let required = false;
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
+  <textarea name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:blur={onBlur} on:keyup={onChange} {maxlength}></textarea>
+</FieldStandard>
+
+<style>
+  textarea {
+    resize: vertical;
+  }
+</style>

package/FieldTextArea.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        notNull?: boolean;
+        defaultValue?: any;
+        maxlength?: number | undefined;
+        rows?: number | undefined;
+        conditional?: boolean | undefined;
+        required?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldTextAreaProps = typeof __propDef.props;
+export declare type FieldTextAreaEvents = typeof __propDef.events;
+export declare type FieldTextAreaSlots = typeof __propDef.slots;
+export default class FieldTextArea extends SvelteComponentTyped<FieldTextAreaProps, FieldTextAreaEvents, FieldTextAreaSlots> {
+}
+export {};

package/Form.svelte

@@ -13,8 +13,23 @@ 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: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:allMessages 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}
+      <ul>
+        {#each messages as message}
+          <li>{message.message}</li>
+        {/each}
+        {#if invalid}
+          <li>More errors. See inline messages for details.</li>
+        {/if}
+      </ul>
+    {:else if invalid}
+      This form contains validation errors. See inline messages for details.
+    {/if}
+  </div>
+  <slot name="submit" {saved} {validating} {submitting} {valid} {invalid} />
 </Form>
 
 <style>
@@ -24,4 +39,8 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
   :global(.dialog-form) {
     padding: 0;
   }
+  .form-errors {
+    color: #9a3332;
+    padding: 1em;
+  }
 </style>

package/index.d.ts

@@ -14,6 +14,7 @@ export { default as FieldRadio } from './FieldRadio.svelte';
 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 Form } from './Form.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';

package/index.js

@@ -14,6 +14,7 @@ export { default as FieldRadio } from './FieldRadio.svelte';
 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 Form } from './Form.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';

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.9",
+  "version": "0.0.12",
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.2.9",
+    "@txstate-mws/svelte-components": "^1.2.11",
     "@txstate-mws/svelte-forms": "^0.0.18",
     "@iconify/svelte": "^2.2.1",
     "@iconify-icons/mdi": "^1.2.22",
@@ -42,6 +42,7 @@
     "./FieldSelect.svelte": "./FieldSelect.svelte",
     "./FieldStandard.svelte": "./FieldStandard.svelte",
     "./FieldText.svelte": "./FieldText.svelte",
+    "./FieldTextArea.svelte": "./FieldTextArea.svelte",
     "./FileIcon.svelte": "./FileIcon.svelte",
     "./Form.svelte": "./Form.svelte",
     "./Icon.svelte": "./Icon.svelte",