@dosgato/dialog 0.0.69 → 0.0.70

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/FieldChooserLink.svelte

@@ -116,7 +116,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)
@@ -192,6 +196,9 @@ $: updateSelected($value);
     padding-top: 0;
     height: 5em;
   }
+  .dialog-chooser-right {
+    flex-grow: 1;
+  }
   .dialog-chooser-right button {
     margin-top: 0.5em;
   }

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/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>
@@ -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: calc(100% - 20em);
+    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%;

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.70",
   "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"
   },