@dosgato/dialog 0.0.12 → 0.0.14

package/FieldAutocomplete.svelte

@@ -21,11 +21,6 @@ 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 liveTextId = randomid();
 const helpTextId = randomid();
 $: filteredChoices = changed
@@ -48,9 +43,21 @@ 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>
+<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}

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

@@ -13,8 +13,9 @@ export let allowlastpass = false;
 export let maxlength = undefined;
 export let conditional = undefined;
 export let required = false;
+export let use = [];
 </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>
-  <Input {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid}></Input>
+  <Input {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {use}></Input>
 </FieldStandard>

package/FieldText.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
         class?: string;
@@ -12,6 +13,7 @@ declare const __propDef: {
         maxlength?: number | undefined;
         conditional?: boolean | undefined;
         required?: boolean;
+        use?: HTMLActionEntry[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldTextArea.svelte

@@ -1,4 +1,5 @@
-<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+<script>import { passActions } from '@txstate-mws/svelte-components';
+import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';
 export { className as class };
@@ -11,10 +12,11 @@ export let maxlength = undefined;
 export let rows = undefined;
 export let conditional = undefined;
 export let required = false;
+export let use = [];
 </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>
+  <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} use:passActions={use}></textarea>
 </FieldStandard>
 
 <style>

package/FieldTextArea.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
         class?: string;
@@ -11,6 +12,7 @@ declare const __propDef: {
         rows?: number | undefined;
         conditional?: boolean | undefined;
         required?: boolean;
+        use?: HTMLActionEntry[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,4 +1,5 @@
-<script>import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms';
+<script>import { passActions } from '@txstate-mws/svelte-components';
+import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms';
 let className = '';
 export { className as class };
 export let name;
@@ -17,6 +18,7 @@ export let invalid = false;
 export let onChange;
 export let onBlur;
 export let onSelect = undefined;
+export let use = [];
 function resolveMinMax(dt) {
     if (typeof dt === 'undefined')
         return undefined;
@@ -30,4 +32,4 @@ $: minStr = resolveMinMax(min);
 $: maxStr = resolveMinMax(max);
 </script>
 
-<input {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange}>
+<input {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>

package/Input.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
         class?: string;
@@ -22,6 +23,7 @@ declare const __propDef: {
         onChange: any;
         onBlur: any;
         onSelect?: any;
+        use?: HTMLActionEntry[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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.12",
+  "version": "0.0.14",
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.2.11",
-    "@txstate-mws/svelte-forms": "^0.0.18",
+    "@txstate-mws/svelte-components": "^1.3.0",
+    "@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",