@dosgato/dialog 0.0.54 → 0.0.55

package/dist/ButtonGroup.svelte

@@ -46,7 +46,7 @@ function onKeyDown(choice, idx) {
 {/if}
 <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <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}
+  {#each choices as choice, i (choice.value)}
     {@const selected = choice.value === value}
     <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}

package/dist/FieldChoices.svelte

@@ -4,7 +4,7 @@
   flex. Ordering is top down by default but can be order horizontally by toggling `leftToRight`.
   The value of the field will be an array corresponding to the values of the checkboxes that are checked.
 -->
-<script>import { getContext } from 'svelte';
+<script>import { getContext, onMount } from 'svelte';
 import { Field, FORM_CONTEXT } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { randomid } from 'txstate-utils';
@@ -46,12 +46,28 @@ function onChangeCheckbox(setVal, choice, included) {
     });
 }
 const descid = randomid();
+let val, stVal;
+function updateValue(valu, sVal) {
+    val = valu;
+    stVal = sVal;
+}
+function reactToChoices(..._) {
+    if (!stVal)
+        return;
+    const choiceSet = new Set(choices?.map(c => c.value));
+    const filtered = val?.filter(v => choiceSet.has(v));
+    if (filtered?.length !== val?.length)
+        stVal(filtered);
+}
+$: reactToChoices(choices);
+onMount(reactToChoices);
 </script>
 
 <Field {path} {defaultValue} {conditional} let:path let:value let:onBlur let:setVal let:messages let:valid let:invalid>
+  {@const _ = updateValue(value, setVal)}
   <Container {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
     <div class="dialog-choices {className}" class:valid class:invalid>
-      {#each choices as choice, idx}
+      {#each choices as choice, idx (choice.value)}
         {@const checkid = `${path}.${idx}`}
         {@const included = value && value.includes(choice.value)}
         {@const label = choice.label || (typeof choice.value === 'string' ? choice.value : '')}

package/dist/FieldChooserLink.svelte

@@ -1,10 +1,16 @@
+<script context="module">function reconstructUrl(url) {
+    const urlToTest = (/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)+([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])/.test(url)) ? `https://${url}` : url;
+    return new URL(urlToTest).toString();
+}
+</script>
 <script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
-import { isNotBlank, randomid } from 'txstate-utils';
+import { isBlank, isNotBlank, randomid } from 'txstate-utils';
 import { Chooser, ChooserStore, CHOOSER_API_CONTEXT } from './chooser';
 import Details from './chooser/Details.svelte';
 import Thumbnail from './chooser/Thumbnail.svelte';
 import FieldStandard from './FieldStandard.svelte';
+import InlineMessage from './InlineMessage.svelte';
 import { getDescribedBy } from './';
 export let id = undefined;
 export let path;
@@ -56,6 +62,11 @@ function userUrlEntry() {
 async function userUrlEntryDebounced() {
     const url = this.value;
     store.clearPreview();
+    if (isBlank(url)) {
+        selectedAsset = undefined;
+        formStore.setField(finalPath, undefined);
+        return;
+    }
     let found = false;
     if (chooserClient.findByUrl) {
         const item = await chooserClient.findByUrl(url);
@@ -83,18 +94,24 @@ async function userUrlEntryDebounced() {
         }
     }
     if (!found) {
-        try {
-            selectedAsset = {
-                type: 'raw',
-                id: urlToValueCache[url] ?? chooserClient.urlToValue?.(new URL(url).toString()),
-                url
-            };
+        if (urlToValueCache[url]) {
+            selectedAsset = { type: 'raw', id: urlToValueCache[url], url };
         }
-        catch {
-            // 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', url, id: undefined };
+        else {
+            try {
+                const reconstructed = reconstructUrl(url);
+                selectedAsset = {
+                    type: 'raw',
+                    id: chooserClient.urlToValue?.(reconstructed) ?? reconstructed,
+                    url
+                };
+            }
+            catch {
+                // 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, url };
+            }
         }
     }
     formStore.setField(finalPath, selectedAsset?.id);
@@ -112,7 +129,7 @@ async function updateSelected(..._) {
             if (!selectedAsset) {
                 const urlFromValue = chooserClient.valueToUrl?.($value) ?? $value;
                 try {
-                    selectedAsset = { type: 'raw', id: $value, url: new URL(urlFromValue).toString() };
+                    selectedAsset = { type: 'raw', id: $value, url: reconstructUrl(urlFromValue) };
                 }
                 catch {
                     selectedAsset = { type: 'broken', id: $value, url: $value };
@@ -129,7 +146,7 @@ $: updateSelected($value);
 </script>
 
 <FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} {related} {helptext} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
-  {#if selectedAsset}
+  {#if selectedAsset?.id}
     <div class="dialog-chooser-container">
       <Thumbnail item={selectedAsset} />
       <Details item={selectedAsset} />
@@ -141,6 +158,9 @@ $: updateSelected($value);
     {/if}
     <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
   </div>
+  {#if selectedAsset?.url.length && !selectedAsset.id}
+    <InlineMessage message={{ message: 'Entry does not match an internal resource and is not a valid URL. Nothing will be saved.', type: 'warning' }} />
+  {/if}
   {#if modalshown}
     <Chooser {store} {label} {pages} {assets} {images} {initialSource} {initialPath} {folders} {required} on:change={onChange(setVal)} on:escape={hide} />
   {/if}

package/dist/FieldRadio.svelte

@@ -1,4 +1,5 @@
 <script>import { Field } from '@txstate-mws/svelte-forms';
+import { onMount } from 'svelte';
 import Switcher from './Switcher.svelte';
 let className = '';
 export { className as class };
@@ -20,8 +21,25 @@ export let datetime = false;
 export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
+let val, stVal, finalDeserialize;
+function updateValue(valu, sVal, fDes) {
+    val = valu;
+    stVal = sVal;
+    finalDeserialize = fDes;
+}
+function reactToChoices(..._) {
+    if (!stVal)
+        return;
+    if (!choices.length)
+        stVal(finalDeserialize(''));
+    if (!choices.some(o => o.value === val))
+        stVal(notNull ? choices[0].value : finalDeserialize(''));
+}
+$: reactToChoices(choices);
+onMount(reactToChoices);
 </script>
 
-<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize>
+<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize let:setVal let:deserialize>
+  {@const _ = updateValue(value, setVal, deserialize)}
   <Switcher bind:id class={className} name={path} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
 </Field>

package/dist/FieldSelect.svelte

@@ -1,4 +1,6 @@
-<script>import { getDescribedBy } from './';
+<script>import { onMount } from 'svelte';
+import { isBlank } from 'txstate-utils';
+import { getDescribedBy } from './';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';
 export { className as class };
@@ -22,9 +24,26 @@ export let datetime = false;
 export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
+let val, stVal, finalDeserialize;
+function updateValue(valu, sVal, fDes) {
+    val = valu;
+    stVal = sVal;
+    finalDeserialize = fDes;
+}
+function reactToChoices(..._) {
+    if (!stVal)
+        return;
+    if (!choices.length)
+        stVal(finalDeserialize(''));
+    if (!choices.some(o => o.value === val))
+        stVal(notNull ? choices[0].value : finalDeserialize(''));
+}
+$: reactToChoices(choices);
+onMount(reactToChoices);
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize let:deserialize let:setVal>
+  {@const _ = updateValue(value, setVal, deserialize)}
   <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}

package/dist/Switcher.svelte

@@ -32,7 +32,7 @@ $: width = (horizontal ? 100 / Math.min(choices.length, choices.length === 4 &&
 </script>
 <Container {id} {label} {messages} descid={groupid} {required} {related} {helptext} let:helptextid>
   <div class="dialog-radio {className}" use:eq={{ store }} class:horizontal role="radiogroup" aria-labelledby={groupid} class:valid class:invalid>
-    {#each choices as choice, idx}
+    {#each choices as choice, idx (choice.value)}
       {@const radioid = `${groupid}.${idx}`}
       <label for={radioid} style:width>
         <Radio id={radioid} {name} value={choice.value} selected={iptValue === choice.value} disabled={choice.disabled} {onChange} {onBlur} {helptextid} {extradescid} />

package/dist/colorpicker/FieldColorPicker.svelte

@@ -1,6 +1,7 @@
-<script>import FieldStandard from '../FieldStandard.svelte';
-import { Radio } from '..';
+<script>import { onMount } from 'svelte';
 import { randomid, shouldUseWhiteText } from 'txstate-utils';
+import FieldStandard from '../FieldStandard.svelte';
+import { Radio } from '..';
 export let id = undefined;
 let className = '';
 export { className as class };
@@ -14,15 +15,31 @@ export let defaultValue = notNull ? (addAllOption ? 'alternating' : options[0].v
 export let conditional = undefined;
 export let helptext = undefined;
 const groupid = randomid();
+let val, stVal;
+function updateValue(valu, sVal) {
+    val = valu;
+    stVal = sVal;
+}
+function reactToOptions(..._) {
+    if (!stVal)
+        return;
+    if (!options.length)
+        stVal(addAllOption ? 'alternating' : undefined);
+    if (val !== 'alternating' && !options.some(o => o.value === val))
+        stVal(notNull ? options[0].value : (addAllOption ? 'alternating' : undefined));
+}
+$: reactToOptions(options);
+onMount(reactToOptions);
 </script>
 
-<FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid>
+<FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid let:setVal>
+  {@const _ = updateValue(value, setVal)}
   <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
     {#if addAllOption}
       <label for={`${path}.alt`} class="colorsel alternating">
         <Radio id={`${path}.alt`} name={path} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
         <span class="alternating-bg">
-          {#each options as option}
+          {#each options as option (option.value)}
             <span style:background-color={option.color}></span>
           {/each}
         </span>

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.54",
+  "version": "0.0.55",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",