@dosgato/dialog 0.0.80 → 1.0.1

package/dist/Dialog.svelte

@@ -3,6 +3,8 @@
 <script>import arrowLeftLight from '@iconify-icons/ph/arrow-left-light';
 import arrowRightLight from '@iconify-icons/ph/arrow-right-light';
 import xLight from '@iconify-icons/ph/x-light';
+import arrowsOutSimple from '@iconify-icons/ph/arrows-out-simple';
+import arrowsInSimple from '@iconify-icons/ph/arrows-in-simple';
 import { eq, Modal, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { createEventDispatcher, setContext } from 'svelte';
 import { isNotBlank, randomid } from 'txstate-utils';
@@ -16,6 +18,7 @@ export let cancelText = undefined;
 export let continueText = 'Ok';
 export let continueIcon = undefined;
 export let escapable = isNotBlank(cancelText);
+export let expandable = false;
 export let disabled = false;
 export let ignoreTabs = false;
 export let labelid = randomid();
@@ -27,6 +30,7 @@ let nextTitle;
 let hasRequired = false;
 let onPrev;
 let onNext;
+let expanded = false;
 function onTabChange() {
     ({ hasTabs, prevTitle, nextTitle, hasRequired, onPrev, onNext } = ctx);
 }
@@ -35,15 +39,20 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
 </script>
 
 <Modal {escapable} {initialfocus} hidefocus={false} includeselector=".ck-body-wrapper" on:escape>
-  <section class="{size}" use:eq>
+  <section class="{expanded ? 'xl' : size}" use:eq>
     {#if title || icon}
       <header id={labelid}>
         <Icon width="1.4em" {icon} inline />{title}
       </header>
     {/if}
-    {#if escapable}
-      <button type="button" class="escape" on:click={() => dispatch('escape')}><Icon icon={xLight} width="2em" hiddenLabel="Close Dialog" /></button>
-    {/if}
+    <div class="header-buttons">
+      {#if expandable && size !== 'xl'}
+        <button type="button" class="expand" on:click={() => { expanded = !expanded } }><Icon icon={expanded ? arrowsInSimple : arrowsOutSimple} width="2em" hiddenLabel={`${expanded ? 'Contract' : 'Expand'} dialog`}/></button>
+      {/if}
+      {#if escapable}
+        <button type="button" class="escape" on:click={() => dispatch('escape')}><Icon icon={xLight} width="2em" hiddenLabel="Close Dialog" /></button>
+      {/if}
+    </div>
     <div id={descid} class="dialog-content">
       <slot></slot>
     </div>
@@ -146,11 +155,12 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
   footer.actions :global(.prev) {
     margin-right: auto;
   }
-
-  .escape {
+  .header-buttons {
     position: absolute;
     top: 0.1em;
     right: 0;
+  }
+  .header-buttons button {
     border: 0;
     background: none;
     cursor: pointer;

package/dist/Dialog.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         continueText?: string | undefined;
         continueIcon?: IconifyIcon | undefined;
         escapable?: boolean | undefined;
+        expandable?: boolean | undefined;
         disabled?: boolean | undefined;
         ignoreTabs?: boolean | undefined;
         labelid?: string | undefined;

package/dist/FieldChooserLink.svelte

@@ -146,8 +146,13 @@ async function updateSelected(..._) {
                     selectedAsset = { type: 'raw', id: $value, url: cleanedUrlFromValue };
                 }
             }
-            if (selectedAsset)
+            if (selectedAsset) {
                 urlToValueCache[selectedAsset.url] = $value;
+                if (selectedAsset.type !== 'raw' && selectedAsset.type !== 'broken') {
+                    initialPath = selectedAsset.path ?? initialPath;
+                    initialSource = selectedAsset.source ?? initialSource;
+                }
+            }
         }
         catch (e) {
             console.error(e);

package/dist/FormDialog.svelte

@@ -21,7 +21,7 @@ async function onSubmit() {
 setContext(CHOOSER_API_CONTEXT, chooserClient);
 </script>
 
-<Dialog continueText="Save" continueIcon={contentSave} cancelText="Cancel" on:escape on:continue={onSubmit} {title} {icon} {size} escapable={false}>
+<Dialog continueText="Save" continueIcon={contentSave} cancelText="Cancel" on:escape on:continue={onSubmit} {title} {icon} {size} escapable={false} expandable>
   <Form bind:store {submit} {validate} {chooserClient} {autocomplete} {name} {preload} on:saved let:messages let:allMessages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
     <slot {messages} {allMessages} {saved} {validating} {submitting} {valid} {invalid} {data} {showingInlineErrors} />
   </Form>

package/dist/Icon.svelte

@@ -4,22 +4,21 @@
   isn't supported, to provide in kind icon support, while still making use of aria attributes regardless of support.
 -->
 <script>import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
-import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import Tooltip from './Tooltip.svelte';
 export let icon;
 /** Label used in a `<ScreenReaderOnly>`. */
 export let hiddenLabel = undefined;
 export let inline = false;
-export let width = '1em';
-export let height = width;
+export let width = undefined;
+export let height = undefined;
 export let tooltip = undefined;
+// If neither is defined, set both to 1em
+if (!width && !height)
+    width = height = '1em';
 </script>
 
 {#if icon}
   <Tooltip tip={tooltip} top>
-    <Icon {icon} {inline} {width} {height} aria-hidden={!hiddenLabel} />
+    <Icon {icon} {inline} {width} {height} aria-hidden={!hiddenLabel} aria-label={hiddenLabel}/>
   </Tooltip>
-  {#if hiddenLabel}
-    <ScreenReaderOnly>{hiddenLabel}</ScreenReaderOnly>
-  {/if}
 {/if}

package/dist/chooser/Details.svelte

@@ -35,11 +35,19 @@ export let singleLine = false;
       <dt>File Size:</dt>
       <dd>{bytesToHuman(item.bytes)}</dd>
     </div>
+    <div>
+      <dt>Path:</dt>
+      <dd>{item.path}</dd>
+    </div>
   {:else if item.type === 'page' && item.title}
     <div>
       <dt>Title:</dt>
       <dd>{item.title}</dd>
     </div>
+    <div>
+      <dt>Path:</dt>
+      <dd>{item.path}</dd>
+    </div>
   {:else if item.type === 'folder'}
     <div>
       <dt>Path:</dt>

package/dist/tree/Tree.svelte

@@ -7,6 +7,7 @@ import TreeNode from './TreeNode.svelte';
 import { getHashId, transformSearchable, TreeStore, TREE_STORE_CONTEXT } from './treestore';
 export let headers;
 export let searchable = undefined;
+export let filterable = searchable;
 export let filter = '';
 export let nodeClass = undefined;
 export let singleSelect = undefined;
@@ -27,6 +28,8 @@ export let dropEffect = undefined;
 export let store = new TreeStore(fetchChildren, { copyHandler, dragEligible, dropEffect, moveHandler });
 if (searchable)
     store.searchableFn = transformSearchable(searchable);
+if (filterable)
+    store.filterableFn = transformSearchable(filterable);
 setContext(TREE_STORE_CONTEXT, store);
 const { filteredRootItems, headerOverride } = store;
 let checkboxelement;
@@ -80,41 +83,41 @@ function onKeyUp(e) {
         search = '';
     }
 }
-let dragheaderid;
-let dragheaderidx;
-let dragtarget;
+let dragtargetid;
+let rightoftargetid;
 let widthStart;
+let width2Start;
 let mouseStart;
 function headerDragStart(header, idx) {
     return (e) => {
         if (!enableResize)
             return;
-        dragtarget = headerelements[idx];
-        if (!dragtarget.isConnected)
-            dragtarget = undefined;
+        const dragtarget = headerelements[idx];
+        const rightoftarget = headerelements.find((e, i) => i > idx && e.isConnected);
+        if (!dragtarget?.isConnected || !rightoftarget)
+            dragtargetid = undefined;
         else {
             e.preventDefault();
-            dragheaderid = header.id;
-            dragheaderidx = idx;
+            dragtargetid = header.id;
+            rightoftargetid = rightoftarget.getAttribute('id') ?? undefined;
             widthStart = dragtarget.clientWidth;
-            mouseStart = e instanceof TouchEvent ? e.touches[0].screenX : e.screenX;
+            width2Start = rightoftarget.clientWidth;
+            mouseStart = 'touches' in e ? e.touches[0].screenX : e.screenX;
         }
     };
 }
 function headerDrag(e) {
-    if (e instanceof TouchEvent && e.touches.length > 1)
+    if ('touches' in e && e.touches?.length > 1)
         return;
-    if (dragheaderid && dragheaderidx != null && dragtarget?.isConnected) {
-        for (let i = 0; i < dragheaderidx; i++) {
-            store.setHeaderOverride(headers[i].id, $headerSizes[i]);
-        }
-        const screenX = e instanceof TouchEvent ? e.touches[0].screenX : e.screenX;
-        store.setHeaderOverride(dragheaderid, `${widthStart - (mouseStart - screenX)}px`);
+    if (dragtargetid && rightoftargetid) {
+        const screenX = 'touches' in e ? e.touches[0].screenX : e.screenX;
+        store.setHeaderOverride(dragtargetid, `${widthStart - (mouseStart - screenX)}px`);
+        store.setHeaderOverride(rightoftargetid, `${width2Start + (mouseStart - screenX)}px`);
     }
 }
 function headerDragEnd() {
-    dragtarget = undefined;
-    dragheaderid = undefined;
+    dragtargetid = undefined;
+    rightoftargetid = undefined;
 }
 function headerDragReset() {
     store.resetHeaderOverride();
@@ -152,16 +155,16 @@ $: myRootItems = $store?.rootItems?.filter(r => myRootItemIds.has(r.id)) ?? [];
 
 <svelte:window on:mouseup={headerDragEnd} />
 
-<div class="tree-header" class:resizing={!!dragheaderid} use:resize={{ store: treeWidth }} aria-hidden="true" on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined}>
+<div class="tree-header" class:resizing={!!dragtargetid} use:resize={{ store: treeWidth }} aria-hidden="true" on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:mousemove={dragtargetid ? headerDrag : undefined} on:touchmove={dragtargetid ? headerDrag : undefined}>
   <div class="checkbox" bind:this={checkboxelement}>&nbsp;</div>
   {#each headers as header, i (header.label)}
     <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" style:width={$headerOverride[header.id] ?? $headerSizes?.[i]} style:padding-left={i === 0 ? '1.4em' : undefined}>{header.label}{#if i === 0 && $store.loading}<LoadIcon />{/if}{#if i === 0 && isNotBlank(search)}&nbsp;(searching: {search}){/if}</div>
-    {#if enableResize && i !== headers.length - 1}<div class="tree-separator" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
+    {#if enableResize && i !== headers.length - 1}<div class="tree-separator {header.id}" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
   {/each}
 </div>
 {#if mounted && myRootItems?.length}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
-  <ul bind:this={store.treeElement} role="tree" class:resizing={!!dragheaderid} on:mousemove={dragheaderid ? headerDrag : undefined} on:touchmove={dragheaderid ? headerDrag : undefined} on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:keyup={onKeyUp}>
+  <ul bind:this={store.treeElement} role="tree" class:resizing={!!dragtargetid} on:mousemove={dragtargetid ? headerDrag : undefined} on:touchmove={dragtargetid ? headerDrag : undefined} on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:keyup={onKeyUp}>
     {#each myRootItems as item, i (item.id)}
       <TreeNode
         {item}

package/dist/tree/Tree.svelte.d.ts

@@ -5,6 +5,7 @@ declare class __sveltets_Render<T extends TreeItemFromDB> {
     props(): {
         headers: TreeHeader<T>[];
         searchable?: SearchableType<T>;
+        filterable?: SearchableType<T>;
         filter?: string | undefined;
         nodeClass?: ((itm: T) => string) | undefined;
         singleSelect?: boolean | undefined;

package/dist/tree/treestore.d.ts

@@ -71,6 +71,7 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     dragEligibleHandler?: DragEligibleFn<T>;
     dropEffectHandler?: DropEffectFn<T>;
     searchableFn?: SearchableFn<T>;
+    filterableFn?: SearchableFn<T>;
     singleSelect?: boolean;
     private refreshPromise?;
     constructor(fetchChildren: FetchChildrenFn<T>, { moveHandler, copyHandler, dragEligible, dropEffect, searchableFn, singleSelect }?: {

package/dist/tree/treestore.js

@@ -8,15 +8,15 @@ export class TreeStore extends ActiveStore {
     rootItems = derivedStore(this, 'rootItems');
     filterTerm = new Store('');
     filteredRootItems = derived([this.rootItems, this.filterTerm], ([rootItems, filter]) => {
-        if (!this.searchableFn || !rootItems?.length || isBlank(filter))
+        if (!this.filterableFn || !rootItems?.length || isBlank(filter))
             return new Set(this.value.rootItems?.map(r => r.id));
         const ret = new Set();
         const newselected = [];
         let foundfocus = false;
         for (const itm of this.value.rootItems ?? []) {
             let found = false;
-            for (const val of this.searchableFn(itm)) {
-                if (val.toLocaleLowerCase().startsWith(filter))
+            for (const val of this.filterableFn(itm)) {
+                if (val.toLocaleLowerCase().includes(filter))
                     found = true;
             }
             if (found) {
@@ -44,6 +44,7 @@ export class TreeStore extends ActiveStore {
     dragEligibleHandler;
     dropEffectHandler;
     searchableFn;
+    filterableFn;
     singleSelect;
     refreshPromise;
     constructor(fetchChildren, { moveHandler, copyHandler, dragEligible, dropEffect, searchableFn, singleSelect } = {}) {

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