@dosgato/dialog 0.0.70 → 0.0.72

package/dist/Dialog.svelte

@@ -85,7 +85,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
   section.normal {
     width: 75vw;
     min-width: 250px;
-    max-width: 650px;
+    max-width: 750px;
   }
   section.large {
     width: 90vw;
@@ -113,13 +113,17 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
 
   .dialog-content {
     position: relative;
-    padding: 1em;
+    padding: 0 2em;
     min-height: 5em;
     overflow: auto;
     background-color: var(--dg-dialog-content-bg, #f4f4f4);
     max-height: calc(100vh - 7em);
   }
 
+  section.tiny .dialog-content, section.small .dialog-content {
+    padding: 0 1em;
+  }
+
   footer {
     display: flex;
     align-items: center;

package/dist/FieldChooserLink.svelte

@@ -1,5 +1,6 @@
 <script>import arrowClockwiseFill from '@iconify-icons/ph/arrow-clockwise-fill';
 import deleteOutline from '@iconify-icons/mdi/delete-outline';
+import xCircle from '@iconify-icons/ph/x-circle';
 import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
 import { isBlank, isNotBlank, randomid } from 'txstate-utils';
@@ -32,6 +33,7 @@ const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
 const value = formStore.getField(finalPath);
 const chooserClient = getContext(CHOOSER_API_CONTEXT);
 const store = new ChooserStore(chooserClient);
+let urlEntryInput;
 const descid = randomid();
 let modalshown = false;
 async function show() {
@@ -49,6 +51,10 @@ function onChange(setVal) {
         hide();
     };
 }
+function clearUrlEntry() {
+    urlEntryInput.value = '';
+    urlEntryInput.dispatchEvent(new InputEvent('input'));
+}
 let timer;
 function userUrlEntry() {
     clearTimeout(timer);
@@ -153,7 +159,7 @@ $: updateSelected($value);
 
 <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?.id}
-    <div class="dialog-chooser-container">
+    <div class="dialog-chooser-container" class:urlEntry>
       <Thumbnail item={selectedAsset} />
       <div class="dialog-chooser-right">
         <Details item={selectedAsset} singleLine />
@@ -161,17 +167,20 @@ $: updateSelected($value);
           <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
             <Icon icon={arrowClockwiseFill} /> Replace
           </button>
+          <button type="button" on:click={() => { selectedAsset = undefined; setVal(undefined) }} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
+            <Icon icon={deleteOutline} inline /> Remove
+          </button>
         {/if}
-        <button type="button" on:click={() => { selectedAsset = undefined; setVal(undefined) }} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
-          <Icon icon={deleteOutline} /> Remove
-        </button>
     </div>
     </div>
   {/if}
   {#if urlEntry || !selectedAsset?.id}
     <div class="dialog-chooser-entry">
       {#if urlEntry}
-        <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:keyup={userUrlEntry}>
+        <div class="dialog-chooser-entry-input">
+          <input bind:this={urlEntryInput} type="text" data-lpignore="true" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:input={userUrlEntry}>
+          <button type="button" on:click={clearUrlEntry}><Icon icon={xCircle} hiddenLabel="clear input" inline/></button>
+        </div>
       {/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>
@@ -190,23 +199,57 @@ $: updateSelected($value);
     flex-wrap: wrap;
     margin-bottom: 0.25em;
     font-size: 0.9em;
+    align-items: center;
   }
   div.dialog-chooser-container > :global(.dialog-chooser-thumbnail) {
     width: 8em;
     padding-top: 0;
     height: 5em;
   }
+  div.dialog-chooser-container.urlEntry > :global(.dialog-chooser-thumbnail) {
+    width: 3em;
+    padding-top: 0;
+    height: 3em;
+  }
   .dialog-chooser-right {
+    max-width: calc(100% - 8.5em);
     flex-grow: 1;
   }
   .dialog-chooser-right button {
     margin-top: 0.5em;
+    border: 0;
+    font-weight: bold;
+    border-radius: 0.2em;
+    cursor: pointer;
+    padding: 0.4em;
+    background: none;
+  }
+  .dialog-chooser-right button:hover {
+    background-color: #cccccc;
   }
   .dialog-chooser-entry {
     display: flex;
+    align-items: flex-start;
+    margin-top: 0.2em;
   }
-  input {
+  .dialog-chooser-entry-input {
+    position: relative;
     flex-grow: 1;
   }
+  .dialog-chooser-entry-input input {
+    width: 100%;
+    padding-right: 1.4em;
+  }
+  .dialog-chooser-entry-input button {
+    display: block;
+    border: 0;
+    background: none;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    cursor: pointer;
+    line-height: 1;
+  }
 
 </style>

package/dist/Form.svelte

@@ -15,20 +15,22 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
 
 <Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:allMessages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
   <slot {messages} {saved} {validating} {submitting} {valid} {invalid} {data} {allMessages} {showingInlineErrors} />
-  <div class="form-errors" aria-live='assertive'>
-    {#if messages.length}
-      <ul>
-        {#each messages as message}
-          <li>{message.message}</li>
-        {/each}
-        {#if showingInlineErrors}
-          <li>More errors. See inline messages for details.</li>
-        {/if}
-      </ul>
-    {:else if showingInlineErrors}
-      This form contains validation errors. See inline messages for details.
-    {/if}
-  </div>
+  {#if messages.length || showingInlineErrors}
+    <div class="form-errors" aria-live='assertive'>
+      {#if messages.length}
+        <ul>
+          {#each messages as message}
+            <li>{message.message}</li>
+          {/each}
+          {#if showingInlineErrors}
+            <li>More errors. See inline messages for details.</li>
+          {/if}
+        </ul>
+      {:else if showingInlineErrors}
+        This form contains validation errors. See inline messages for details.
+      {/if}
+    </div>
+  {/if}
   <slot name="submit" {saved} {validating} {submitting} {valid} {invalid} {allMessages} {showingInlineErrors} />
 </Form>
 

package/dist/Tab.svelte

@@ -31,7 +31,7 @@ const last = idx === $store.tabs.length - 1;
     width: 100%;
     min-height: 50vh;
     border: var(--tabs-panel-border, var(--tabs-border, 0));
-    padding: var(--tabs-margin-top, 2em) var(--tabs-padding-hori, 0.7em) 0.5em var(--tabs-padding-hori, 0.7em);
+    padding: var(--tabs-margin-top, 1.5em) var(--tabs-padding-hori, 0.7em) 0.5em var(--tabs-padding-hori, 0.7em);
   }
   .tabs-panel.accordion {
     border-left: 0;

package/dist/chooser/Chooser.svelte

@@ -1,8 +1,8 @@
-<script>import applicationOutline from '@iconify-icons/mdi/application-outline';
+<script>import browserIcon from '@iconify-icons/ph/browser';
 import folderIcon from '@iconify-icons/ph/folder';
 import folderNotchOpen from '@iconify-icons/ph/folder-notch-open';
 import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
-import { isNotBlank, randomid, sleep } from 'txstate-utils';
+import { isNotBlank, randomid } from 'txstate-utils';
 import { Button, Dialog, iconForMime, Tabs, Tree, UploadUI } from '..';
 import { CHOOSER_API_CONTEXT } from './ChooserAPI';
 import { CHOOSER_STORE_CONTEXT, ChooserStore } from './ChooserStore';
@@ -90,7 +90,7 @@ const previewId = randomid();
     <section class="dialog-chooser-chooser">
       {#if $store.initialized}
         <Tree headers={[
-          { label: 'Path', id: 'name', grow: 4, icon: item => ({ icon: item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline) }), get: 'name' }
+          { label: 'Path', id: 'name', grow: 4, icon: item => ({ icon: item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : browserIcon) }), get: 'name' }
         ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
       {/if}
     </section>

package/dist/chooser/Details.svelte

@@ -58,7 +58,7 @@ export let singleLine = false;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    gap: 1em 1.5em;
+    gap: 1em;
     padding: 0;
     margin: 0;
     list-style: none;
@@ -76,7 +76,7 @@ export let singleLine = false;
     max-width: calc(100% - 9em);
   }
   dl.asset .top-row {
-    max-width: calc(100% - 20em);
+    max-width: 30em;
     white-space: nowrap;
     text-overflow: ellipsis;
   }

package/dist/chooser/Thumbnail.svelte

@@ -33,10 +33,8 @@ export let larger = false;
     object-fit: scale-down;
   }
   .dialog-chooser-thumbnail :global(svg) {
-    width: 60%;
-    height: 60%;
-    min-width: 4.5em;
-    min-height: 4.5em;
+    width: 80%;
+    height: 80%;
     object-fit: scale-down;
   }
   .dialog-chooser-thumbnail > :global(*) {

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