@dosgato/dialog 0.0.32 → 0.0.34

package/Button.svelte.d.ts

@@ -2,15 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import type { IconifyIcon } from '@iconify/svelte';
 declare const __propDef: {
     props: {
-        type?: 'button' | 'submit';
-        disabled?: boolean;
-        compact?: boolean;
-        cancel?: boolean;
-        destructive?: boolean;
-        secondary?: boolean;
+        type?: "button" | "submit" | undefined;
+        disabled?: boolean | undefined;
+        compact?: boolean | undefined;
+        cancel?: boolean | undefined;
+        destructive?: boolean | undefined;
+        secondary?: boolean | undefined;
         describedby?: string | undefined;
         element?: HTMLElement | undefined;
-        icon?: IconifyIcon;
+        icon?: IconifyIcon | undefined;
         class?: string | undefined;
     };
     events: {

package/ButtonGroup.svelte.d.ts

@@ -2,15 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import { type PopupMenuItem } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        name?: string;
+        name?: string | undefined;
         choices: PopupMenuItem[];
-        value?: string;
+        value?: string | undefined;
         groupid?: string | undefined;
         messagesid?: string | undefined;
         ariaControls?: string | undefined;
-        disabled?: boolean;
-        valid?: boolean;
-        invalid?: boolean;
+        disabled?: boolean | undefined;
+        valid?: boolean | undefined;
+        invalid?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;

package/Checkbox.svelte.d.ts

@@ -8,10 +8,10 @@ declare const __propDef: {
         onBlur?: any;
         descid?: string | undefined;
         messagesid?: string | undefined;
-        disabled?: boolean;
-        valid?: boolean;
-        invalid?: boolean;
-        inputelement?: HTMLInputElement;
+        disabled?: boolean | undefined;
+        valid?: boolean | undefined;
+        invalid?: boolean | undefined;
+        inputelement?: HTMLInputElement | undefined;
         helptextid?: string | undefined;
     };
     events: {

package/Container.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         label: string;
         helptext?: string | undefined;
         messages: Feedback[];
-        required?: boolean;
+        required?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,7 +15,7 @@ declare const __propDef: {
     slots: {
         default: {
             messagesid: any;
-            helptextid: string;
+            helptextid: string | undefined;
         };
     };
 };

package/Dialog.svelte

@@ -44,7 +44,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     {#if escapable}
       <button type="button" class="escape" on:click={() => dispatch('escape')}><Icon icon={xLight} width="2em" hiddenLabel="Close Dialog" /></button>
     {/if}
-    <div id={descid} class="content">
+    <div id={descid} class="dialog-content">
       <slot></slot>
     </div>
     <footer class="actions">
@@ -111,7 +111,8 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     margin-right: 0.4em;
   }
 
-  .content {
+  .dialog-content {
+    position: relative;
     margin: 0 -1em;
     padding: 1em;
     min-height: 5em;

package/Dialog.svelte.d.ts

@@ -13,17 +13,17 @@ import type { IconifyIcon } from '@iconify/svelte';
 declare const __propDef: {
     props: {
         initialfocus?: string | undefined;
-        title?: string;
-        icon?: IconifyIcon;
-        size?: 'tiny' | 'small' | 'normal' | 'large' | 'xl';
+        title?: string | undefined;
+        icon?: IconifyIcon | undefined;
+        size?: "small" | "normal" | "tiny" | "large" | "xl" | undefined;
         cancelText?: string | undefined;
-        continueText?: string;
-        continueIcon?: IconifyIcon;
-        escapable?: boolean;
-        disabled?: boolean;
-        ignoreTabs?: boolean;
-        labelid?: string;
-        descid?: string;
+        continueText?: string | undefined;
+        continueIcon?: IconifyIcon | undefined;
+        escapable?: boolean | undefined;
+        disabled?: boolean | undefined;
+        ignoreTabs?: boolean | undefined;
+        labelid?: string | undefined;
+        descid?: string | undefined;
     };
     events: {
         escape: CustomEvent<any>;
@@ -34,11 +34,11 @@ declare const __propDef: {
     slots: {
         default: {};
         buttons: {
-            nextTitle: string;
-            prevTitle: string;
+            nextTitle: string | undefined;
+            prevTitle: string | undefined;
             hasRequired: boolean;
-            onPrev: () => void;
-            onNext: () => void;
+            onPrev: (() => void) | undefined;
+            onNext: (() => void) | undefined;
         };
     };
 };

package/FieldAutocomplete.svelte

@@ -3,6 +3,7 @@ import FieldStandard from './FieldStandard.svelte';
 import { randomid } from 'txstate-utils';
 import { PopupMenu, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { getDescribedBy } from './';
+import { onMount } from 'svelte';
 export let id = undefined;
 export let path;
 export let label = '';
@@ -54,12 +55,16 @@ function reactToInitialValue(value) {
     savedLabel = inputvalue;
     set = true;
 }
+let portal;
+onMount(() => {
+    portal = inputelement.closest('.dialog-content');
+});
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+<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" items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
+  <PopupMenu 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

@@ -3,20 +3,20 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         path: string;
-        label?: string;
-        placeholder?: string;
-        class?: string;
-        notNull?: boolean;
-        disabled?: boolean;
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        class?: string | undefined;
+        notNull?: boolean | undefined;
+        disabled?: boolean | undefined;
         choices: {
-            label?: string;
+            label?: string | undefined;
             value: string;
-            disabled?: boolean;
+            disabled?: boolean | undefined;
         }[];
         defaultValue?: any;
         conditional?: boolean | undefined;
-        required?: boolean;
-        inputelement?: HTMLInputElement;
+        required?: boolean | undefined;
+        inputelement?: HTMLInputElement | undefined;
         helptext?: string | undefined;
     };
     events: {

package/FieldCheckbox.svelte.d.ts

@@ -1,15 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
+        label?: string | undefined;
         boxLabel: string;
         defaultValue?: boolean | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
-        inputelement?: HTMLInputElement;
+        required?: boolean | undefined;
+        inputelement?: HTMLInputElement | undefined;
         helptext?: string | undefined;
     };
     events: {

package/FieldChoices.svelte.d.ts

@@ -1,19 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
+        label?: string | undefined;
         choices: {
-            label?: string;
+            label?: string | undefined;
             value: any;
-            disabled?: boolean;
+            disabled?: boolean | undefined;
         }[];
         defaultValue?: any;
         conditional?: boolean | undefined;
-        maxwidth?: number;
-        leftToRight?: boolean;
+        maxwidth?: number | undefined;
+        leftToRight?: boolean | undefined;
         helptext?: string | undefined;
     };
     events: {

package/FieldChooserLink.svelte

@@ -46,12 +46,19 @@ function onChange(setVal) {
         hide();
     };
 }
-async function userUrlEntry() {
+let timer;
+function userUrlEntry() {
+    clearTimeout(timer);
+    timer = setTimeout(userUrlEntryDebounced.bind(this), 300);
+}
+async function userUrlEntryDebounced() {
     const url = this.value;
     store.clearPreview();
     let found = false;
     if (chooserClient.findByUrl) {
         const item = await chooserClient.findByUrl(url);
+        if (url !== this.value)
+            return;
         if (item) {
             found = true;
             if ((item.type === 'page' && !pages) || // they typed the URL for a page but we don't allow pages right now
@@ -59,6 +66,9 @@ async function userUrlEntry() {
                 (item.type === 'asset' && !assets) || // they typed the URL for an asset but not allowed
                 (item.type === 'asset' && !item.image && images) // they typed the URL for a non-image asset but we only want images
             ) {
+                // they entered something that is recognized but not allowed
+                // they can keep the typing they've done, but the id must be 'undefined' so that nothing
+                // is entered into the form data
                 selectedAsset = {
                     type: 'raw',
                     id: undefined,
@@ -73,14 +83,16 @@ async function userUrlEntry() {
     if (!found) {
         try {
             const _ = new URL(url);
-            const newVal = chooserClient.urlToValue?.(url) ?? url;
             selectedAsset = {
                 type: 'raw',
-                id: newVal,
+                id: chooserClient.urlToValue?.(url) ?? url,
                 url
             };
         }
         catch (e) {
+            // here we "select" a raw url so that we do not interrupt the users' typing, but
+            // we set its id to 'undefined' so that nothing makes it into the form until it's
+            // a valid URL
             selectedAsset = {
                 type: 'raw',
                 id: undefined,
@@ -93,7 +105,11 @@ async function userUrlEntry() {
 }
 async function updateSelected(..._) {
     if ($value && selectedAsset?.id !== $value) {
-        selectedAsset = await chooserClient.findById($value);
+        const valueBeforeFind = $value;
+        const asset = await chooserClient.findById($value);
+        if ($value !== valueBeforeFind)
+            return;
+        selectedAsset = asset;
         try {
             if (!selectedAsset)
                 selectedAsset = { type: 'raw', id: $value, url: chooserClient.valueToUrl?.($value) ?? $value };

package/FieldChooserLink.svelte.d.ts

@@ -5,19 +5,19 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         path: string;
-        label?: string;
+        label?: string | undefined;
         defaultValue?: boolean | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
-        images?: boolean;
-        pages?: boolean;
-        assets?: boolean;
-        folders?: boolean;
-        urlEntry?: boolean;
+        required?: boolean | undefined;
+        images?: boolean | undefined;
+        pages?: boolean | undefined;
+        assets?: boolean | undefined;
+        folders?: boolean | undefined;
+        urlEntry?: boolean | undefined;
         initialSource?: string | undefined;
         initialPath?: string | undefined;
         helptext?: string | undefined;
-        selectedAsset?: AnyItem | RawURL;
+        selectedAsset?: AnyItem | RawURL | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldCodeEditor.svelte

@@ -47,13 +47,13 @@ function updateValidState(invalidIn, messagesIdIn) {
     inputelement?.setAttribute('aria-invalid', String(!!invalid));
     const descby = getDescribedBy([messagesid, helptextid]);
     if (descby)
-        inputelement?.setAttribute('aria-describedby', getDescribedBy([messagesid, helptextid]));
+        inputelement?.setAttribute('aria-describedby', descby);
     else
         inputelement?.removeAttribute('aria-describedby');
 }
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
   {@const _ = setSlotProps(helptextid, onChange)}
   {@const __ = updateValidState(invalid, messagesid)}
   <div bind:this={editorelement} style:height="{rows * 1.333}em" class:valid class:invalid on:paste on:focusout={onBlur} use:passActions={use}></div>

package/FieldCodeEditor.svelte.d.ts

@@ -2,17 +2,17 @@ import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
-        notNull?: boolean;
+        label?: string | undefined;
+        notNull?: boolean | undefined;
         defaultValue?: any;
-        rows?: number;
+        rows?: number | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
-        use?: HTMLActionEntry[];
-        inputelement?: HTMLTextAreaElement;
+        required?: boolean | undefined;
+        use?: HTMLActionEntry<any>[] | undefined;
+        inputelement?: HTMLTextAreaElement | undefined;
         helptext?: string | undefined;
         language: 'js' | 'css' | 'html';
     };

package/FieldDate.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
+        label?: string | undefined;
         defaultValue?: any;
         min?: Date | {
             toJSDate: () => Date;
@@ -14,8 +14,8 @@ declare const __propDef: {
         } | undefined;
         step?: number | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
-        inputelement?: HTMLInputElement;
+        required?: boolean | undefined;
+        inputelement?: HTMLInputElement | undefined;
         helptext?: string | undefined;
     };
     events: {

package/FieldDateTime.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
+        label?: string | undefined;
         defaultValue?: any;
         min?: Date | {
             toJSDate: () => Date;
@@ -14,7 +14,7 @@ declare const __propDef: {
         } | undefined;
         step?: number | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
+        required?: boolean | undefined;
         helptext?: string | undefined;
     };
     events: {

package/FieldDualListbox.svelte.d.ts

@@ -4,14 +4,14 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         path: string;
-        label?: string;
-        sourceLabel?: string;
-        selectedLabel?: string;
-        multiselect?: boolean;
+        label?: string | undefined;
+        sourceLabel?: string | undefined;
+        selectedLabel?: string | undefined;
+        multiselect?: boolean | undefined;
         choices: PopupMenuItem[];
-        defaultValue?: string[];
+        defaultValue?: string[] | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
+        required?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldHidden.svelte

@@ -9,6 +9,6 @@ const store = getContext(FORM_CONTEXT);
 $: store.setField(path, value);
 </script>
 
-<Field {path} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value>
+<Field {path} {conditional} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value>
   <input type="hidden" name={path} {value} {id}>
 </Field>

package/FieldHidden.svelte.d.ts

@@ -3,8 +3,8 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         path: string;
-        value?: string;
-        notNull?: boolean;
+        value?: string | undefined;
+        notNull?: boolean | undefined;
         conditional?: boolean | undefined;
     };
     events: {

package/FieldMultiple.svelte.d.ts

@@ -4,15 +4,15 @@ declare const __propDef: {
         path: string;
         label: string;
         initialState?: any;
-        minLength?: number;
+        minLength?: number | undefined;
         maxLength?: number | undefined;
-        compact?: boolean;
-        removable?: boolean;
-        reorder?: boolean;
+        compact?: boolean | undefined;
+        removable?: boolean | undefined;
+        reorder?: boolean | undefined;
         conditional?: boolean | undefined;
-        addMoreText?: string;
-        maxedText?: string;
-        addMoreClass?: string;
+        addMoreText?: string | undefined;
+        maxedText?: string | undefined;
+        addMoreClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldMultiselect.svelte

@@ -29,7 +29,10 @@ async function wrapGetOptions(search) {
 }
 const selectedStore = new Store([]);
 let hasInit = !defaultValue.length;
+let inputelement;
+let portal;
 onMount(async () => {
+    portal = inputelement.closest('.dialog-content');
     await reactToValue(defaultValue);
     hasInit = true;
 });
@@ -46,11 +49,12 @@ async function reactToValue(value) {
 }
 </script>
 
+<div bind:this={inputelement}></div>
 {#if hasInit}
   <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} {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} 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

@@ -4,12 +4,12 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         path: string;
-        label?: string;
-        placeholder?: string;
-        disabled?: boolean;
-        defaultValue?: string[];
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        disabled?: boolean | undefined;
+        defaultValue?: string[] | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
+        required?: boolean | undefined;
         getOptions: (search: string) => Promise<PopupMenuItem[]>;
     };
     events: {

package/FieldNumber.svelte.d.ts

@@ -1,18 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
+        label?: string | undefined;
         defaultValue?: number | undefined;
-        nullable?: boolean;
+        nullable?: boolean | undefined;
         min?: number | undefined;
         max?: number | undefined;
         step?: number | undefined;
         conditional?: boolean | undefined;
-        required?: boolean;
-        inputelement?: HTMLInputElement;
+        required?: boolean | undefined;
+        inputelement?: HTMLInputElement | undefined;
         helptext?: string | undefined;
     };
     events: {

package/FieldRadio.svelte.d.ts

@@ -1,27 +1,27 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
-        notNull?: boolean;
+        label?: string | undefined;
+        notNull?: boolean | undefined;
         choices: {
-            label?: string;
+            label?: string | undefined;
             value: any;
-            disabled?: boolean;
+            disabled?: boolean | undefined;
         }[];
         defaultValue?: any;
         conditional?: boolean | undefined;
-        required?: boolean;
-        horizontal?: boolean;
+        required?: boolean | undefined;
+        horizontal?: boolean | undefined;
         helptext?: string | undefined;
-        number?: boolean;
-        date?: boolean;
-        datetime?: boolean;
-        boolean?: boolean;
-        serialize?: (value: any) => string;
-        deserialize?: (value: string) => any;
+        number?: boolean | undefined;
+        date?: boolean | undefined;
+        datetime?: boolean | undefined;
+        boolean?: boolean | undefined;
+        serialize?: ((value: any) => string) | undefined;
+        deserialize?: ((value: string) => any) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldSelect.svelte.d.ts

@@ -1,29 +1,29 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
+        class?: string | undefined;
         id?: string | undefined;
         path: string;
-        label?: string;
-        placeholder?: string;
-        notNull?: boolean;
-        disabled?: boolean;
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        notNull?: boolean | undefined;
+        disabled?: boolean | undefined;
         choices: {
-            label?: string;
+            label?: string | undefined;
             value: any;
-            disabled?: boolean;
+            disabled?: boolean | undefined;
         }[];
         defaultValue?: any;
         conditional?: boolean | undefined;
-        required?: boolean;
-        inputelement?: HTMLSelectElement;
+        required?: boolean | undefined;
+        inputelement?: HTMLSelectElement | undefined;
         helptext?: string | undefined;
-        number?: boolean;
-        date?: boolean;
-        datetime?: boolean;
-        boolean?: boolean;
-        serialize?: (value: any) => string;
-        deserialize?: (value: string) => any;
+        number?: boolean | undefined;
+        date?: boolean | undefined;
+        datetime?: boolean | undefined;
+        boolean?: boolean | undefined;
+        serialize?: ((value: any) => string) | undefined;
+        deserialize?: ((value: string) => any) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;