@dosgato/dialog 0.0.29 → 0.0.31

package/FieldChooserLink.svelte

@@ -1,6 +1,6 @@
-<script>import { FORM_CONTEXT } from '@txstate-mws/svelte-forms';
+<script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
-import { randomid } from 'txstate-utils';
+import { 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';
@@ -20,8 +20,12 @@ 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 value = formStore.getField(path);
+const inheritedPath = getContext(FORM_INHERITED_PATH);
+const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
+const value = formStore.getField(finalPath);
 const chooserClient = getContext(CHOOSER_API_CONTEXT);
 const store = new ChooserStore(chooserClient);
 const descid = randomid();
@@ -43,19 +47,48 @@ 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(path, 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;
 async function updateSelected(..._) {
@@ -73,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/FieldCodeEditor.svelte

@@ -1,7 +1,8 @@
 <script>import { passActions } from '@txstate-mws/svelte-components';
-import { nullableSerialize, nullableDeserialize, FORM_CONTEXT, FormStore } from '@txstate-mws/svelte-forms';
+import { nullableSerialize, nullableDeserialize, FORM_CONTEXT, FormStore, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import CodeFlask from 'codeflask';
 import { getContext, onMount } from 'svelte';
+import { isNotBlank } from 'txstate-utils';
 import { getDescribedBy, FieldStandard } from './';
 let className = '';
 export { className as class };
@@ -10,7 +11,7 @@ export let path;
 export let label = '';
 export let notNull = false;
 export let defaultValue = notNull ? '' : undefined;
-export let rows = undefined;
+export let rows = 8;
 export let conditional = undefined;
 export let required = false;
 export let use = [];
@@ -18,13 +19,13 @@ export let inputelement = undefined;
 export let helptext = undefined;
 export let language;
 const store = getContext(FORM_CONTEXT);
-const value = store.getField(path);
+const inheritedPath = getContext(FORM_INHERITED_PATH);
+const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
+const value = store.getField(finalPath);
 let editorelement;
 let flask;
-let codeValue = '';
 onMount(() => {
     flask = new CodeFlask(editorelement, { language, lineNumbers: true, areaId: id });
-    flask.onUpdate(code => { codeValue = code; });
     inputelement = editorelement.querySelector(`#${id}`);
     if (className)
         inputelement.classList.add(...className.split(' '));
@@ -60,6 +61,7 @@ function updateValidState(invalidIn, messagesIdIn) {
 
 <style>
   div {
+    position: relative;
     overflow: hidden;
     resize: vertical;
   }

package/FieldCodeEditor.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         label?: string;
         notNull?: boolean;
         defaultValue?: any;
-        rows?: number | undefined;
+        rows?: number;
         conditional?: boolean | undefined;
         required?: boolean;
         use?: HTMLActionEntry[];

package/FieldSelect.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         disabled?: boolean;
         choices: {
             label?: string;
-            value: string;
+            value: any;
             disabled?: boolean;
         }[];
         defaultValue?: any;

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