@dosgato/dialog 0.0.8 → 0.0.11

package/FieldAutocomplete.svelte

@@ -50,8 +50,8 @@ 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}>
+<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"/>
   {#if helptext.length}
     <span id={helpTextId} class="field-help-text">{helptext}</span>

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/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/chooser/ChooserAPI.d.ts

@@ -3,10 +3,10 @@ export declare type ChooserType = 'asset' | 'page';
 export declare type AnyItem = Asset | Folder | Page;
 export interface Client<F = any> {
     getSources: (type: ChooserType) => Promise<Source[]>;
-    getChildren: (source: string, path: string, filters: F) => Promise<(AnyItem)[]>;
-    find: (source: string, path: string, searchstring: string, filters: F) => Promise<(AnyItem)[]>;
-    findById: (id: string) => Promise<AnyItem>;
-    findByUrl?: (url: string) => Promise<AnyItem>;
+    getChildren: (source: string, path: string, filters: F) => Promise<AnyItem[]>;
+    find: (source: string, path: string, searchstring: string, filters: F) => Promise<AnyItem[]>;
+    findById: (id: string) => Promise<AnyItem | undefined>;
+    findByUrl?: (url: string) => Promise<AnyItem | undefined>;
     urlToValue?: (url: string) => string;
     upload: (source: string, path: string, files: FileList) => Promise<void>;
 }

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,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.8",
+  "version": "0.0.11",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.2.9",
     "@txstate-mws/svelte-forms": "^0.0.18",
@@ -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",