@dosgato/dialog 0.0.69 → 0.0.71

package/dist/Container.svelte

@@ -137,11 +137,11 @@ $: setNeedsShowHelp(helpelement);
     line-height: 1.25em;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    height: 1.25em;
   }
   .dialog-field-help.expanded {
-    white-space: normal;
     max-height: fit-content;
+    height: auto;
   }
   .dialog-field-help.needsShowHelp {
     padding-right: 6em;

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);
@@ -116,7 +122,11 @@ async function userUrlEntryDebounced() {
 }
 const urlToValueCache = {};
 async function updateSelected(..._) {
-    if ($value && selectedAsset?.id !== $value) {
+    if (selectedAsset?.id !== $value) {
+        if (!$value) {
+            selectedAsset = undefined;
+            return;
+        }
         const valueBeforeFind = $value;
         const asset = await chooserClient.findById($value);
         if ($value !== valueBeforeFind)
@@ -149,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 />
@@ -157,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>
@@ -186,20 +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/FieldMultiple.svelte

@@ -1,13 +1,17 @@
 <script context="module">export const DG_DIALOG_FIELD_MULTIPLE = {};
 function noOp(..._) { return ''; }
 </script>
-<script>import plusCircleLight from '@iconify-icons/ph/plus-circle-light';
+<script>import caretCircleDown from '@iconify-icons/ph/caret-circle-down';
+import caretCircleUp from '@iconify-icons/ph/caret-circle-up';
+import plusCircleLight from '@iconify-icons/ph/plus-circle-light';
+import xCircle from '@iconify-icons/ph/x-circle';
 import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { getContext, setContext } from 'svelte';
 import { isNotNull } from 'txstate-utils';
 import Button from './Button.svelte';
 import Container from './Container.svelte';
+import Icon from './Icon.svelte';
 export let path;
 export let label;
 export let initialState = undefined;
@@ -28,11 +32,28 @@ const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotNull).join('.');
 const store = getContext(FORM_CONTEXT);
 const messageStore = derivedStore(store, ({ messages }) => messages.all.filter(m => m.path?.startsWith(finalPath)));
-const reorderelements = [];
-function moveUpAndFocus(onMoveUp, idx) {
+const reorderupelements = [];
+const reorderdownelements = [];
+function moveUpAndFocus(onMove, idx) {
     return () => {
-        onMoveUp();
-        reorderelements[idx - 1]?.focus();
+        onMove();
+        let newFocus = reorderupelements[idx - 1];
+        if (newFocus) {
+            if (newFocus.disabled)
+                newFocus = reorderdownelements[idx - 1];
+            newFocus.focus();
+        }
+    };
+}
+function moveDownAndFocus(onMove, idx) {
+    return () => {
+        onMove();
+        let newFocus = reorderdownelements[idx + 1];
+        if (newFocus) {
+            if (newFocus.disabled)
+                newFocus = reorderupelements[idx + 1];
+            newFocus.focus();
+        }
     };
 }
 $: messages = compact ? $messageStore : [];
@@ -40,16 +61,19 @@ $: messages = compact ? $messageStore : [];
 
 <Container {label} {messages} {conditional} {related} {helptext} let:helptextid>
   {noOp(fieldMultipleContext.helptextid = helptextid)}
-  <AddMore {path} {initialState} {minLength} {maxLength} {conditional} let:path let:currentLength let:maxLength let:index let:minned let:maxed let:value let:onDelete let:onMoveUp>
+  <AddMore {path} {initialState} {minLength} {maxLength} {conditional} let:path let:currentLength let:maxLength let:index let:minned let:maxed let:value let:onDelete let:onMoveUp let:onMoveDown>
     {@const showDelete = removable && !minned}
-    {@const showMove = reorder && index > 0}
-    <div class="dialog-multiple" class:has-delete-icon={showDelete} class:has-move-icon={showMove}>
+    {@const showMove = reorder && currentLength > 1}
+    <div class="dialog-multiple" class:has-delete-icon={showDelete} class:has-move-icon={showMove} class:first={index === 0}>
       <div class="dialog-multiple-content">
         <slot {path} {index} {value} {maxed} {maxLength} {currentLength}/>
       </div>
       {#if showDelete || showMove}<div class="dialog-multiple-buttons">
-        {#if reorder}<button bind:this={reorderelements[index]} class="dialog-multiple-move" type="button" aria-hidden={!showMove} disabled={!showMove} style:visibility={showMove ? 'visible' : 'hidden'} on:click|preventDefault|stopPropagation={moveUpAndFocus(onMoveUp, index)}>^</button>{/if}
-        {#if showDelete}<button class="dialog-multiple-delete" type="button" on:click|preventDefault|stopPropagation={onDelete}>X</button>{/if}
+        {#if showMove}
+          <button bind:this={reorderdownelements[index]} class="dialog-multiple-move" type="button" disabled={index === currentLength - 1} on:click|preventDefault|stopPropagation={moveDownAndFocus(onMoveDown, index)}><Icon icon={caretCircleDown} hiddenLabel="move down in the list" /></button>
+          <button bind:this={reorderupelements[index]} class="dialog-multiple-move" type="button" disabled={index === 0} on:click|preventDefault|stopPropagation={moveUpAndFocus(onMoveUp, index)}><Icon icon={caretCircleUp} hiddenLabel="move up in the list" /></button>
+        {/if}
+        {#if showDelete}<button class="dialog-multiple-delete" type="button" on:click|preventDefault|stopPropagation={onDelete}><Icon icon={xCircle} hiddenLabel="remove from list" /></button>{/if}
       </div>{/if}
     </div>
     <svelte:fragment slot="addbutton" let:maxed let:onClick>
@@ -61,10 +85,10 @@ $: messages = compact ? $messageStore : [];
 <style>
   .dialog-multiple {
     position: relative;
-    border: var(--dialog-container-border, 0);
-    padding: var(--dialog-container-padding, 1em);
+    border: var(--dialog-container-border, 1px dashed #CCCCCC);
+    padding: var(--dialog-container-padding, 1.5em);
   }
-  .dialog-multiple:not(:first-child) {
+  .dialog-multiple:not(.first) {
     border-top: 0;
   }
   .dialog-multiple:nth-of-type(even) {
@@ -75,25 +99,18 @@ $: messages = compact ? $messageStore : [];
     background-color: var(--dialog-field-bg2, transparent);
     color: var(--dialog-field-text2, inherit);
   }
-  :global(.dialog-multiple-button) {
-    margin-left: var(--dialog-container-padding, 1em);
-  }
-  .dialog-multiple.has-delete-icon, .dialog-multiple.has-move-icon {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
   .dialog-multiple-buttons {
-    margin-left: 0.75em;
+    position: absolute;
+    top: 0;
+    right: 0.1em;
+    display: flex;
   }
   .dialog-multiple-buttons button {
-    margin-left: 0.2em;
-  }
-  .dialog-multiple-buttons button:first-child {
-    margin-left: 0;
-  }
-  .dialog-multiple-content {
-    flex-grow: 1;
+    border: 0;
+    background: transparent;
+    padding: 0.15em;
+    cursor: pointer;
+    font-size: 1.3em;
   }
 
 </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

@@ -132,7 +132,6 @@ const previewId = randomid();
     min-width: calc(100% - 21em);
     height: calc(100% - 4em);
     background-color: white;
-    padding: 0.5em;
     overflow: auto;
   }
   .dialog-chooser-preview {

package/dist/chooser/ChooserAPI.d.ts

@@ -94,6 +94,7 @@ export interface Asset extends Item {
     type: 'asset';
     title?: string;
     mime: string;
+    extension: string;
     bytes: number;
     url: string;
     image?: {

package/dist/chooser/ChooserStore.d.ts

@@ -62,4 +62,5 @@ export declare class ChooserStore<F = any> extends Store<IAssetStore> {
     setSource(name?: string, init?: boolean): void;
 }
 export declare function cleanUrl(url: string): string;
+export declare function humanFileType(mime: string, extension: string): string;
 export {};

package/dist/chooser/ChooserStore.js

@@ -115,3 +115,12 @@ export function cleanUrl(url) {
         }
     }
 }
+export function humanFileType(mime, extension) {
+    if (mime.startsWith('image/') || mime.startsWith('video/'))
+        return mime;
+    if (mime.startsWith('text/'))
+        return 'text - ' + extension;
+    if (extension === 'js')
+        return 'javascript';
+    return extension;
+}

package/dist/chooser/Details.svelte

@@ -1,9 +1,9 @@
-<script>import { bytesToHuman, cleanUrl } from './ChooserStore';
+<script>import { bytesToHuman, cleanUrl, humanFileType } from './ChooserStore';
 export let item;
 export let singleLine = false;
 </script>
 
-<dl class="dialog-chooser-info" aria-live="polite" class:multiLine={!singleLine}>
+<dl class="dialog-chooser-info" aria-live="polite" class:multiLine={!singleLine} class:asset={item.type === 'asset'}>
   {#if item.type === 'raw' && item.id}
     <div class="top-row">
       <dt>External Link:</dt>
@@ -29,7 +29,7 @@ export let singleLine = false;
     {/if}
     <div>
       <dt>File Type:</dt>
-      <dd>{item.mime}</dd>
+      <dd>{humanFileType(item.mime, item.extension)}</dd>
     </div>
     <div>
       <dt>File Size:</dt>
@@ -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;
@@ -72,5 +72,13 @@ export let singleLine = false;
   .multiLine .top-row {
     width: 100%;
   }
+  .top-row {
+    max-width: calc(100% - 9em);
+  }
+  dl.asset .top-row {
+    max-width: 30em;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
 </style>

package/dist/chooser/Thumbnail.svelte

@@ -25,6 +25,7 @@ export let larger = false;
     position: relative;
     width: 100%;
     padding-top: 75%;
+    margin-right: 0.5em;
   }
   .dialog-chooser-thumbnail img {
     width: 100%;
@@ -32,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/dist/chooser/UploadUI.svelte

@@ -125,6 +125,7 @@ function onDeleteFile(file) {
   }
   input[type="file"] {
     opacity: 0;
+    display: block;
   }
   label {
     display: inline-block;

package/dist/tree/treestore.js

@@ -203,7 +203,7 @@ export class TreeStore extends ActiveStore {
     }
     async openAndRefresh(item, notify = true) {
         await this.refresh(item, true);
-        item.open = !!item.children?.length;
+        this.value.itemsById[item.id].open = !!item.children?.length;
         if (notify)
             this.trigger();
     }

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.69",
+  "version": "0.0.71",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -27,7 +27,7 @@
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
     "@txstate-mws/svelte-components": "^1.5.3",
-    "@txstate-mws/svelte-forms": "^1.3.4",
+    "@txstate-mws/svelte-forms": "^1.3.6",
     "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"
   },