@dosgato/dialog 0.0.30 → 0.0.31

package/FieldChooserLink.svelte

@@ -20,6 +20,8 @@ export let urlEntry = false;
 export let initialSource = undefined;
 export let initialPath = undefined;
 export let helptext = undefined;
+// TODO: add a mime type acceptance prop, maybe a regex or function, to prevent users from
+// choosing unacceptable mime types
 const formStore = getContext(FORM_CONTEXT);
 const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
@@ -45,19 +47,47 @@ function onChange(setVal) {
 }
 async function userUrlEntry() {
     const url = this.value;
+    store.clearPreview();
+    let found = false;
     if (chooserClient.findByUrl) {
         const item = await chooserClient.findByUrl(url);
-        if (item)
-            return store.setPreview(item);
+        if (item) {
+            found = true;
+            if ((item.type === 'page' && !pages) || // they typed the URL for a page but we don't allow pages right now
+                (item.type === 'folder' && !folders) || // they typed the URL for an asset folder but not allowed
+                (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
+            ) {
+                selectedAsset = {
+                    type: 'raw',
+                    id: undefined,
+                    url
+                };
+            }
+            else {
+                selectedAsset = { ...item, url };
+            }
+        }
     }
-    store.clearPreview();
-    const newVal = chooserClient.urlToValue?.(url) ?? url;
-    selectedAsset = {
-        type: 'raw',
-        id: newVal,
-        url
-    };
-    formStore.setField(finalPath, newVal);
+    if (!found) {
+        try {
+            const _ = new URL(url);
+            const newVal = chooserClient.urlToValue?.(url) ?? url;
+            selectedAsset = {
+                type: 'raw',
+                id: newVal,
+                url
+            };
+        }
+        catch (e) {
+            selectedAsset = {
+                type: 'raw',
+                id: undefined,
+                url
+            };
+        }
+    }
+    formStore.setField(finalPath, selectedAsset?.id);
     formStore.dirtyField(finalPath);
 }
 let selectedAsset;
@@ -76,8 +106,8 @@ $: updateSelected($value);
     </div>
   {/if}
   <div class="dialog-chooser-entry">
-    {#if urlEntry && !folders && selectedAsset?.type !== 'folder'}
-      <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry}>
+    {#if urlEntry}
+      <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:keyup={userUrlEntry}>
     {/if}
     <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
   </div>

package/chooser/ChooserAPI.d.ts

@@ -30,11 +30,28 @@ interface Item {
     path: string;
     name: string;
     source: string;
+    /**
+     * Identifier for the urlEntry input
+     *
+     * When urlEntry prop is true, the user gets a text field where they can freely
+     * enter a string to identify the object being chosen. This value will be
+     * placed in that field when they use the chooser.
+     *
+     * It should be reversible with the `findByUrl` function provided by your chooser
+     * client, but note that the `findByUrl` function can accept multiple URLs that
+     * all point to the same resource. If the user types anything that can identify
+     * a resource, the resource will show up in the "Details" area, but the URL the user
+     * typed will NOT change to the one provided by this property. We try not
+     * to rewrite values in the form fields where possible, because it can disrupt the
+     * user's interaction.
+     */
+    url: string;
 }
 export interface Folder extends Item {
     type: 'folder';
     hasChildren: boolean;
     acceptsUpload: boolean;
+    url: string;
 }
 export interface Page extends Item {
     type: 'page';

package/chooser/Details.svelte

@@ -4,11 +4,13 @@ export let item;
 
 <ul class="dialog-chooser-info" aria-live="polite">
   {#if item.type !== 'raw'}
-    <li>{item.name}</li>
+    <li>{item.path}</li>
+  {:else if item.id}
+    <li>External Link<br>{item.url}</li>
   {/if}
   {#if item.type === 'asset' && item.image}
     <li>{item.image.width}x{item.image.height}</li>
-  {:else if item.type === 'page'}
+  {:else if item.type === 'page' && item.title}
     <li>{item.title}</li>
   {:else if item.type === 'folder'}
     <li>{item.path}</li>

package/chooser/Thumbnail.svelte

@@ -14,7 +14,7 @@ export let item;
     {/if}
   {:else if item.type === 'folder'}
     <Icon icon={folderOutline} width='5em' />
-  {:else}
+  {:else if item.id}
     <Icon icon={fileLinkOutline} width='5em' />
   {/if}
 </div>

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.30",
+  "version": "0.0.31",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.5",
     "@txstate-mws/svelte-forms": "^1.2.1",