@dosgato/dialog 0.0.47 → 0.0.49

package/dist/Container.svelte

@@ -1,4 +1,4 @@
-<script>import { eq } from '@txstate-mws/svelte-components';
+<script>import { eq, resize, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { randomid } from 'txstate-utils';
 import { getContext } from 'svelte';
 import { DG_DIALOG_FIELD_MULTIPLE } from './FieldMultiple.svelte';
@@ -17,6 +17,14 @@ const dgMultipleContext = getContext(DG_DIALOG_FIELD_MULTIPLE);
 const helptextid = randomid();
 $: descids = getDescribedBy([helptext ? helptextid : undefined, dgMultipleContext?.helptextid]);
 let showhelp = false;
+let helpelement;
+let needsShowHelp = false;
+function setNeedsShowHelp(..._) {
+    needsShowHelp = (helpelement?.getClientRects().length ?? 0) > 1;
+    if (!needsShowHelp)
+        showhelp = false;
+}
+$: setNeedsShowHelp(helpelement);
 </script>
 
 {#if conditional !== false}
@@ -29,7 +37,12 @@ let showhelp = false;
   <div class="dialog-field-content">
     {#if helptext}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div id={helptextid} class="dialog-field-help" class:expanded={showhelp} on:click={() => { showhelp = !showhelp }}>{helptext}</div>
+      <div use:resize={{ debounce: 10 }} on:resize={setNeedsShowHelp} id={helptextid} class="dialog-field-help" class:needsShowHelp class:expanded={showhelp} on:click={() => { if (needsShowHelp) showhelp = !showhelp }}>
+        <span bind:this={helpelement}>{helptext}</span>
+        {#if needsShowHelp}
+          <button type="button" class="dialog-field-help-expand">Show {#if showhelp}Less{:else}More{/if}<ScreenReaderOnly>, ignore this, the help text it controls will be read to you as input description</ScreenReaderOnly></button>
+        {/if}
+      </div>
     {/if}
     <slot {messagesid} helptextid={descids} />
   </div>
@@ -115,11 +128,33 @@ let showhelp = false;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    cursor: help;
   }
   .dialog-field-help.expanded {
     white-space: normal;
     max-height: fit-content;
   }
+  .dialog-field-help.needsShowHelp {
+    padding-right: 6em;
+    cursor: help;
+  }
+  .dialog-field-help.expanded {
+    padding-right: 0;
+  }
+  .dialog-field-help:not(.expanded) .dialog-field-help-expand {
+    position: absolute;
+    top: 0;
+    right: 0.5em;
+  }
+  .dialog-field-help-expand {
+    background: none!important;
+    border: none;
+    padding: 0!important;
+    color: #069;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .dialog-field-help-expand:hover {
+    text-decoration: none;
+  }
 
 </style>

package/dist/chooser/Chooser.svelte

@@ -91,28 +91,19 @@ onMount(async () => {
         <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} />
       {/if}
     </header>
-    <div class="dialog-chooser-body">
-      <section class="dialog-chooser-chooser">
-        {#if $store.initialized}
-          <Tree headers={[
-            { label: 'Path', id: 'name', grow: 4, icon: item => item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline), get: 'name' }
-          ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
-        {/if}
-      </section>
-      <section class="dialog-chooser-preview" tabindex="-1">
-        {#if $preview}
-          <Thumbnail item={$preview} larger />
-          <Details item={$preview}>
-            {#if $preview.type === 'folder'}
-              <div class="folder-info">
-                <dt>Contents:</dt>
-                <dd>{$selected?.children?.length ?? 0} sub-items</dd>
-              </div>
-            {/if}
-          </Details>
-        {/if}
-      </section>
-    </div>
+    <section class="dialog-chooser-chooser">
+      {#if $store.initialized}
+        <Tree headers={[
+          { label: 'Path', id: 'name', grow: 4, icon: item => item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline), get: 'name' }
+        ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
+      {/if}
+    </section>
+    <section class="dialog-chooser-preview" tabindex="-1">
+      {#if $preview}
+        <Thumbnail item={$preview} larger />
+        <Details item={$preview} />
+      {/if}
+    </section>
   </section>
 </Dialog>
 
@@ -120,6 +111,7 @@ onMount(async () => {
   .dialog-chooser-window {
     position: relative;
     height: 80vh;
+    display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     justify-content: flex-end;
@@ -128,10 +120,6 @@ onMount(async () => {
   .dialog-chooser-window * {
     box-sizing: border-box;
   }
-
-  .dialog-chooser-body {
-    display: flex;
-  }
   .dialog-chooser-chooser {
     position: relative;
     width: 75%;
@@ -148,12 +136,6 @@ onMount(async () => {
     padding: 1em;
     overflow-y: auto;
   }
-  .folder-info dt {
-    font-weight: bold;
-  }
-  .folder-info dd {
-    margin: 0;
-  }
   header {
     position: relative;
     width: 100%;

package/dist/chooser/ChooserStore.d.ts

@@ -18,7 +18,7 @@ export interface IAssetStore {
     activetype: ChooserType;
     activesource: number;
     initialized: boolean;
-    preview?: AnyItem;
+    preview?: AnyUIItem;
 }
 export interface ChooserStoreOptions<F> {
     pages?: boolean;
@@ -44,11 +44,11 @@ export declare class ChooserStore<F = any> extends Store<IAssetStore> {
     setOptions(options: ChooserStoreOptions<F>): void;
     sources: import("@txstate-mws/svelte-store").DerivedStore<UISource[], IAssetStore>;
     source: import("@txstate-mws/svelte-store").DerivedStore<UISource | undefined, IAssetStore>;
-    preview: import("@txstate-mws/svelte-store").DerivedStore<AnyItem | undefined, IAssetStore>;
+    preview: import("@txstate-mws/svelte-store").DerivedStore<AnyUIItem | undefined, IAssetStore>;
     getSource(state?: IAssetStore): UISource | undefined;
     getSourceIndex(name: string, state?: IAssetStore, type?: ChooserType): number;
     init(options: ChooserStoreOptions<F>): Promise<void>;
-    setPreview(item?: AnyItem): void;
+    setPreview(item?: AnyUIItem): void;
     clearPreview(): void;
     setSource(name?: string, init?: boolean): void;
 }

package/dist/chooser/ChooserStore.js

@@ -24,7 +24,7 @@ export class ChooserStore extends Store {
     setOptions(options) {
         const userFilter = options.filter ?? nofilter;
         const filter = options.images
-            ? (itm) => ((itm.type === 'asset' && !!itm.image) || itm.type === 'folder') && userFilter(itm)
+            ? async (itm) => ((itm.type === 'asset' && !!itm.image) || itm.type === 'folder') && await userFilter(itm)
             : userFilter;
         this.options = {
             ...options,
@@ -58,8 +58,10 @@ export class ChooserStore extends Store {
         this.update(v => ({ ...v, initialized: true }));
     }
     setPreview(item) {
-        if (!item)
-            return this.clearPreview();
+        if (!item) {
+            this.clearPreview();
+            return;
+        }
         if (item.type === 'folder' && !this.options.folders)
             return;
         this.update(v => ({ ...v, preview: item }));

package/dist/chooser/Details.svelte

@@ -15,7 +15,7 @@ export let item;
     </div>
   {/if}
   {#if item.type === 'asset'}
-    <div class="asset-properties">
+    <div class="horizontal-group">
       {#if item.image}
         <div>
           <dt>Dimensions:</dt>
@@ -32,14 +32,18 @@ export let item;
       </div>
     </div>
   {:else if item.type === 'page' && item.title}
-    <div>
-      <dt>Title:</dt>
-      <dd>{item.title}</dd>
-    </div>
+    <dt>Title:</dt>
+    <dd>{item.title}</dd>
   {:else if item.type === 'folder'}
-    <div>
-      <dt>Path:</dt>
-      <dd>{item.path}</dd>
+    <div class="horizontal-group">
+      <div>
+        <dt>Path:</dt>
+        <dd>{item.path}</dd>
+      </div>
+      <div>
+        <dt>Contents:</dt>
+        <dd>{item.children?.length ?? 0} sub-items</dd>
+      </div>
     </div>
   {/if}
   <slot />
@@ -60,14 +64,14 @@ export let item;
   .top-row {
     margin-bottom: 1em;
   }
-  .asset-properties {
+  .horizontal-group {
     display: flex;
     justify-content: space-between;
   }
-  :global([data-eq~="1400px"]) .asset-properties {
+  :global([data-eq~="1400px"]) .horizontal-group {
     flex-direction: column;
   }
-  :global([data-eq~="1400px"]) .asset-properties div:not(:last-child){
+  :global([data-eq~="1400px"]) .horizontal-group div:not(:last-child){
     margin-bottom: 1em;
   }
 

package/dist/chooser/Details.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AnyItem } from './ChooserAPI';
-import { type RawURL } from './ChooserStore';
+import { type AnyUIItem, type RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
-        item: AnyItem | RawURL;
+        item: AnyUIItem | RawURL;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/tree/Tree.svelte

@@ -95,17 +95,12 @@ function headerDragReset() {
 let mounted = false;
 onMount(async () => {
     document.addEventListener('dragend', onDragEnd);
-    const saveFocusId = $store.focused?.id;
     headerSizes.set(calcHeaderSizes()); // seems to need a kick on first mount
     await new Promise(resolve => requestAnimationFrame(resolve));
     // need to wait long enough for headers to redraw before trying to mount the rows
     await new Promise(resolve => requestAnimationFrame(resolve));
     mounted = true;
     await store.refresh();
-    if ($store.focused?.id && $store.focused.id === saveFocusId) {
-        const el = document.getElementById(getHashId($store.focused.id));
-        el?.scrollIntoView({ block: 'center' });
-    }
 });
 onDestroy(() => {
     if (typeof document !== 'undefined')

package/dist/tree/TreeNode.svelte

@@ -3,7 +3,7 @@ import checkboxBlankOutline from '@iconify-icons/mdi/checkbox-blank-outline';
 import menuDown from '@iconify-icons/mdi/menu-down';
 import menuRight from '@iconify-icons/mdi/menu-right';
 import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, onMount } from 'svelte';
 import { isNotBlank, toArray } from 'txstate-utils';
 import { Icon } from '..';
 import { TREE_STORE_CONTEXT, getHashId } from './treestore';
@@ -243,6 +243,10 @@ function onDragLeaveAbove(e) {
     else
         dragOverAbove--;
 }
+onMount(() => {
+    if ($focused && $focused.id === item.id)
+        nodeelement.scrollIntoView({ block: 'center' });
+});
 $: if ($dragging) {
     dragOver = 0;
     dragOverAbove = 0;

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