@dosgato/dialog 0.0.60 → 0.0.62

package/dist/Container.svelte

@@ -48,7 +48,7 @@ $: setNeedsShowHelp(helpelement);
     {#if helptext}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <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>
+        <span bind:this={helpelement}>{@html 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}

package/dist/Dialog.svelte

@@ -48,7 +48,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
       <slot></slot>
     </div>
     <footer class="actions">
-      <slot name="buttons" {nextTitle} {prevTitle} hasRequired={hasRequired && !ignoreTabs} onPrev={onPrev} onNext={onNext}>
+      <slot name="buttons" {nextTitle} {prevTitle} hasRequired={hasRequired && !ignoreTabs} onPrev={onPrev} onNext={onNext} {describedby}>
         {#if prevTitle && !ignoreTabs}
           <Button class="prev" disabled={!prevTitle} on:click={onPrev}><Icon icon={arrowLeftLight} inline /> Previous<ScreenReaderOnly> Tab ({prevTitle})</ScreenReaderOnly></Button>
         {/if}

package/dist/Dialog.svelte.d.ts

@@ -39,6 +39,7 @@ declare const __propDef: {
             hasRequired: boolean;
             onPrev: (() => void) | undefined;
             onNext: (() => void) | undefined;
+            describedby: string;
         };
     };
 };

package/dist/chooser/Chooser.svelte

@@ -1,10 +1,9 @@
 <script>import applicationOutline from '@iconify-icons/mdi/application-outline';
 import folderIcon from '@iconify-icons/ph/folder';
 import folderNotchOpen from '@iconify-icons/ph/folder-notch-open';
-import { derivedStore } from '@txstate-mws/svelte-store';
 import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
-import { isNotBlank } from 'txstate-utils';
-import { Dialog, iconForMime, Tabs, Tree, TreeStore } from '..';
+import { isNotBlank, randomid, sleep } from 'txstate-utils';
+import { Button, Dialog, iconForMime, Tabs, Tree, UploadUI } from '..';
 import { CHOOSER_API_CONTEXT } from './ChooserAPI';
 import { CHOOSER_STORE_CONTEXT, ChooserStore } from './ChooserStore';
 import Details from './Details.svelte';
@@ -22,21 +21,17 @@ export let activeSources = undefined;
 export let passthruFilters = undefined;
 export let filter = undefined;
 export let store = new ChooserStore(chooserClient);
+store.filter = filter;
 setContext(CHOOSER_STORE_CONTEXT, store);
 const dispatch = createEventDispatcher();
+let showuploader = false;
 let tabStore;
-const { sources, source, preview } = store;
+const { sources, source, preview, treeStore, selected } = store;
 $: currentName = tabStore?.currentName();
-async function fetchChildren(item) {
-    if (item?.type === 'asset' || !$source)
-        return [];
-    const children = await chooserClient.getChildren($source.name, item?.path ?? '/', filter);
-    return children.map(c => ({ ...c, children: undefined }));
+$: if ($currentName) {
+    store.setSource($currentName);
+    treeStore.refresh().catch(console.error);
 }
-const treeStore = new TreeStore(fetchChildren);
-const selected = derivedStore(treeStore, 'selectedItems.0');
-$: store.setSource($currentName);
-$: selectPreview($preview, $source);
 $: store.setPreview($selected);
 function onChoose() {
     dispatch('change', $store.preview);
@@ -44,28 +39,27 @@ function onChoose() {
 function onDeselect() {
     store.setPreview(undefined);
 }
+function onUploadComplete() {
+    treeStore.openAndRefresh($selected).catch(console.error);
+    showuploader = false;
+}
 async function openRecursive(pathSplit, depth) {
     let curr = $treeStore.rootItems?.find(itm => itm.name === pathSplit[0]);
     for (let i = 0; i < depth; i++) {
         curr = curr?.children?.find(c => c.name === pathSplit[i + 1]);
     }
-    if (!curr)
-        throw new Error('tried to open a path that does not exist');
+    if (!curr) {
+        console.warn('tried to preload a path', '/' + pathSplit.join('/'), 'that does not exist ');
+        return;
+    }
     await treeStore.open(curr, false);
     if (depth + 1 >= pathSplit.length)
         return curr;
     return await openRecursive(pathSplit, depth + 1);
 }
-async function selectPreview(..._) {
+async function selectPreview(preloadPath) {
     if (!$store.initialized)
         return;
-    await treeStore.refresh(undefined);
-    const preloadSource = $preview?.source ?? initialSource;
-    if ($source?.name !== preloadSource)
-        return;
-    const preloadPath = $store.preview?.path ?? initialPath;
-    initialSource = undefined;
-    initialPath = undefined;
     if (preloadPath) {
         const currentSelection = await openRecursive(preloadPath.split('/').filter(isNotBlank), 0);
         treeStore.trigger();
@@ -77,18 +71,20 @@ async function selectPreview(..._) {
     }
 }
 onMount(async () => {
-    await store.init({ images, pages, assets, folders, activeSources, initialSource, initialPath, passthruFilters, filter });
-    if ($source?.name)
-        tabStore?.activateName($source.name);
-    await selectPreview();
+    const preloadSource = $preview?.source ?? $selected?.source ?? $source?.name ?? initialSource;
+    const preloadPath = $preview?.path ?? $selected?.path ?? initialPath;
+    await store.init({ images, pages, assets, folders, activeSources, initialSource: preloadSource, initialPath: preloadPath, passthruFilters, filter });
+    await treeStore.refresh();
+    await selectPreview(preloadPath);
 });
+const previewId = randomid();
 </script>
 
-<Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$store.preview && required} cancelText="Cancel" on:continue={onChoose}>
+<Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel">
   <section class="dialog-chooser-window">
     <header class="dialog-chooser-controls">
       {#if $sources.length > 1}
-        <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} />
+        <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} active={$preview?.source ?? $selected?.source ?? $source?.name ?? initialSource} />
       {/if}
     </header>
     <section class="dialog-chooser-chooser">
@@ -98,13 +94,23 @@ onMount(async () => {
         ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
       {/if}
     </section>
-    <section class="dialog-chooser-preview" tabindex="-1">
+    <section id={previewId} class="dialog-chooser-preview" tabindex="-1">
       {#if $preview}
         <Thumbnail item={$preview} larger />
         <Details item={$preview} />
       {/if}
     </section>
   </section>
+  <svelte:fragment slot="buttons" let:describedby>
+    {#if chooserClient.upload && $source?.type === 'asset'}
+      <Button class="upload" disabled={$selected?.type !== 'folder' || !(chooserClient.mayUpload?.($selected) ?? true)} on:click={() => { showuploader = true }}>Upload</Button>
+    {/if}
+    <Button cancel {describedby} on:click={() => dispatch('escape')}>Cancel</Button>
+    <Button class="primary" disabled={!$preview && required} describedby={previewId} on:click={onChoose}>Choose</Button>
+  </svelte:fragment>
+  {#if showuploader && $selected?.type === 'folder' && chooserClient.upload}
+    <UploadUI title="Upload to {$selected.path}" folder={$selected} uploader={chooserClient.upload.bind(chooserClient)} on:escape={() => { showuploader = false }} on:saved={onUploadComplete}/>
+  {/if}
 </Dialog>
 
 <style>
@@ -136,9 +142,12 @@ onMount(async () => {
     padding: 1em;
     overflow-y: auto;
   }
-  header {
+  .dialog-chooser-controls {
     position: relative;
     width: 100%;
   }
+  :global(footer.actions .upload) {
+    margin-right: auto;
+  }
 
 </style>

package/dist/chooser/ChooserAPI.d.ts

@@ -25,7 +25,20 @@ export interface Client<F = any> {
      * undo values it generates.
      */
     valueToUrl?: (value: string) => string | undefined;
-    upload: (source: string, path: string, files: FileList) => Promise<void>;
+    /**
+     * must accept a standard FileList object and upload the files to the service
+     * should throw an error if the source/path does not accept uploads the UI is
+     * responsible for refreshing the folder list after success
+     * should call the provided progress function as often as possible so that
+     * dosgato-dialog can keep the user informed
+     */
+    upload?: (folder: Folder, files: File[], progress: (ratio: number) => void) => Promise<(Asset | Folder)[] | undefined>;
+    /**
+     * return whether the user is allowed to upload to the currently selected folder
+     * if this function is not provided it is assumed the answer is always yes
+     * may optionally return an array of accepted mime types for the folder
+     */
+    mayUpload?: (folder: Folder) => boolean | string[];
 }
 export interface Source {
     type: ChooserType;

package/dist/chooser/ChooserStore.d.ts

@@ -1,4 +1,4 @@
-import type { TypedTreeItem } from '../tree/treestore.js';
+import { TreeStore, type TypedTreeItem } from '../tree/treestore.js';
 import { Store } from '@txstate-mws/svelte-store';
 import type { AnyItem, Asset, Client, ChooserType, Folder, Page, Source } from './ChooserAPI.js';
 export interface UISource extends Source {
@@ -47,9 +47,13 @@ export declare class ChooserStore<F = any> extends Store<IAssetStore> {
     options: InternalStoreOptions<F>;
     constructor(client: Client);
     setOptions(options: ChooserStoreOptions<F>): void;
+    filter: undefined | ((item: AnyItem) => boolean | Promise<boolean>);
+    fetchChildren(item?: TypedTreeItem<Page | Folder | Asset>): Promise<AnyItem[]>;
+    treeStore: TreeStore<Asset | Folder | Page>;
     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 | AnyUIItem | undefined, IAssetStore>;
+    selected: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<Asset | Folder | Page> | undefined, any>;
     getSource(state?: IAssetStore): UISource | undefined;
     getSourceIndex(name: string, state?: IAssetStore, type?: ChooserType): number;
     init(options: ChooserStoreOptions<F>): Promise<void>;

package/dist/chooser/ChooserStore.js

@@ -1,6 +1,8 @@
+import { TreeStore } from '../tree/treestore.js';
 import { Store, derivedStore } from '@txstate-mws/svelte-store';
 import { tick } from 'svelte';
 import { findIndex } from 'txstate-utils';
+import { TabStore } from '../TabStore.js';
 export const CHOOSER_STORE_CONTEXT = {};
 const nofilter = (x) => true;
 export function combinePath(path, name) {
@@ -32,9 +34,18 @@ export class ChooserStore extends Store {
             filter
         };
     }
+    filter = undefined;
+    async fetchChildren(item) {
+        const $source = this.getSource();
+        if (item?.type === 'asset' || !$source)
+            return [];
+        return await this.client.getChildren($source.name, item?.path ?? '/', this.filter);
+    }
+    treeStore = new TreeStore(this.fetchChildren.bind(this));
     sources = derivedStore(this, v => [...(v.sources?.page ?? []), ...(v.sources?.asset ?? [])].filter(s => this.options.activeSources ? this.options.activeSources.has(s.name) : true));
     source = derivedStore(this, v => this.getSource(v));
     preview = derivedStore(this, 'preview');
+    selected = derivedStore(this.treeStore, 'selectedItems.0');
     getSource(state = this.value) {
         return state.sources?.[state.activetype]?.[state.activesource];
     }
@@ -53,7 +64,7 @@ export class ChooserStore extends Store {
             const sources = { page: pageSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s.name)) ?? [], asset: assetSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s.name)) ?? [] };
             return { ...v, sources };
         });
-        this.setSource(this.value.preview?.source ?? this.options.initialSource, true);
+        this.setSource(this.options.initialSource, true);
         await tick();
         this.update(v => ({ ...v, initialized: true }));
     }

package/dist/chooser/UploadUI.svelte

@@ -0,0 +1,160 @@
+<script>import trashLight from '@iconify-icons/ph/trash-light';
+import { roundTo, unique } from 'txstate-utils';
+import { createEventDispatcher } from 'svelte';
+import { Dialog, FileIcon, Icon } from '..';
+export let title;
+export let folder;
+export let maxFiles = 200;
+export let escapable = true;
+export let mimeWhitelist = [];
+export let mimeBlacklist = [];
+export let uploader;
+$: whitelist = new Set(mimeWhitelist);
+$: blacklist = new Set(mimeBlacklist);
+const dispatch = createEventDispatcher();
+let dragover = 0;
+let uploadList = [];
+let uploadLocked = false;
+let uploadProgress = 0;
+let uploadError;
+function onUploadEnter(e) {
+    if (e.dataTransfer?.items.length)
+        dragover++;
+}
+function onUploadLeave(e) {
+    if (e.dataTransfer?.items.length)
+        dragover--;
+}
+function onUploadDrop(e) {
+    e.preventDefault();
+    dragover = 0;
+    if (!uploadLocked && e.dataTransfer?.items?.length) {
+        uploadList = unique(uploadList.concat(Array.from(e.dataTransfer.files)), 'name').slice(-1 * maxFiles);
+    }
+}
+function onUploadChange(e) {
+    const files = e.currentTarget.files;
+    if (files?.length)
+        uploadList = unique(uploadList.concat(Array.from(files)), 'name').slice(-1 * maxFiles);
+    e.currentTarget.value = '';
+}
+async function onUploadSubmit() {
+    if (uploadLocked)
+        return;
+    uploadLocked = true;
+    try {
+        const data = new FormData();
+        for (let i = 0; i < uploadList.length; i++) {
+            data.append('file' + i, uploadList[i]);
+        }
+        // TODO: accept new list of children from uploader function and feed it
+        // to the tree instead of refreshing the tree
+        await uploader(folder, uploadList, ratio => { uploadProgress = ratio; });
+        uploadList = [];
+        uploadError = undefined;
+        dispatch('saved');
+    }
+    catch (e) {
+        uploadError = e.message;
+    }
+    finally {
+        uploadLocked = false;
+    }
+}
+function onUploadEscape() {
+    if (!uploadLocked && escapable) {
+        uploadList = [];
+        uploadError = undefined;
+        dispatch('escape');
+    }
+}
+function onDeleteFile(file) {
+    return () => {
+        uploadList = uploadList.filter(f => f !== file);
+    };
+}
+</script>
+
+<Dialog {title} disabled={!uploadList.length} cancelText="Cancel" continueText="Upload" on:escape={onUploadEscape} on:continue={onUploadSubmit}>
+  {#if uploadLocked}
+    <progress value={uploadProgress} aria-label="Assets Uploading">{roundTo(100 * uploadProgress)}%</progress>
+  {:else}
+    {#if uploadError}<div class="error">{uploadError}</div>{/if}
+    <form method="POST" enctype="multipart/form-data"
+      on:submit|preventDefault|stopPropagation={onUploadSubmit}
+      class="uploader" class:dragover={dragover > 0}
+      on:dragenter={onUploadEnter} on:dragleave={onUploadLeave}
+      on:dragover|preventDefault={() => {}} on:drop={onUploadDrop}
+    >
+      <input type="file" id="uploader_input" multiple on:change={onUploadChange}>
+      <label for="uploader_input">Choose or drag files</label>
+      <ul>
+        {#each uploadList as file}
+          <li>
+            <FileIcon width="1.5em" mime={file.type} inline />{file.name}<button type="button" on:click={onDeleteFile(file)}><Icon icon={trashLight} width="1.5em" hiddenLabel="Remove File" inline /></button>
+            {#if (whitelist.size && !whitelist.has(file.type)) || (blacklist.size && blacklist.has(file.type))}
+              <div class="error">File type not allowed</div>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </form>
+  {/if}
+</Dialog>
+
+<style>
+    .uploader {
+    border: 2px dashed #666666;
+    border-radius: 0.5em;
+    text-align: center;
+    padding: 1em;
+    min-height: 10em;
+  }
+  .uploader.dragover {
+    border-color: #333333;
+  }
+  .uploader ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: left;
+  }
+  progress {
+    width: 80%;
+    margin-left: 10%;
+  }
+  input[type="file"] {
+    opacity: 0;
+  }
+  label {
+    display: inline-block;
+    width: 50%;
+    padding: 1em;
+    background: #ccc;
+    cursor: pointer;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin-bottom: 1em;
+  }
+  input:focus + label {
+    outline: 2px solid blue;
+  }
+  .error {
+    color: red;
+  }
+  button {
+    border: 0;
+    background: none;
+    padding: 0.5em;
+    cursor: pointer;
+  }
+  li {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  li div {
+    width: 100%;
+  }
+
+</style>

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

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Client, type Folder } from '..';
+declare const __propDef: {
+    props: {
+        title: string;
+        folder: Folder;
+        maxFiles?: number | undefined;
+        escapable?: boolean | undefined;
+        mimeWhitelist?: string[] | undefined;
+        mimeBlacklist?: string[] | undefined;
+        uploader: NonNullable<Client['upload']>;
+    };
+    events: {
+        saved: CustomEvent<any>;
+        escape: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UploadUiProps = typeof __propDef.props;
+export type UploadUiEvents = typeof __propDef.events;
+export type UploadUiSlots = typeof __propDef.slots;
+export default class UploadUi extends SvelteComponentTyped<UploadUiProps, UploadUiEvents, UploadUiSlots> {
+}
+export {};

package/dist/chooser/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ChooserAPI.js';
 export * from './ChooserStore.js';
 export { default as Chooser } from './Chooser.svelte';
+export { default as UploadUI } from './UploadUI.svelte';

package/dist/chooser/index.js

@@ -1,3 +1,4 @@
 export * from './ChooserAPI.js';
 export * from './ChooserStore.js';
 export { default as Chooser } from './Chooser.svelte';
+export { default as UploadUI } from './UploadUI.svelte';

package/dist/tree/Tree.svelte

@@ -146,6 +146,7 @@ afterUpdate(() => {
         }
     }
 });
+$: myRootItems = $store && $filteredRootItems;
 </script>
 
 <svelte:window on:mouseup={headerDragEnd} />
@@ -157,20 +158,20 @@ afterUpdate(() => {
     {#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}
   {/each}
 </div>
-{#if mounted && $filteredRootItems?.length}
+{#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}>
-    {#each $filteredRootItems as item, i (item.id)}
+    {#each myRootItems as item, i (item.id)}
       <TreeNode
         {item}
         {headers}
         {headerSizes}
         {nodeClass}
         posinset={i + 1}
-        setsize={$filteredRootItems.length}
+        setsize={myRootItems.length}
         level={item.level}
-        prev={$filteredRootItems[i - 1]}
-        next={$filteredRootItems[i + 1]}
+        prev={myRootItems[i - 1]}
+        next={myRootItems[i + 1]}
         on:choose
         on:deselect
       />

package/dist/tree/TreeCell.svelte

@@ -7,7 +7,7 @@ $: headerComponent = header.component;
 </script>
 
 {#if header.icon}
-  <span class="icon"><Icon {icon} inline width="1.3em" /></span>
+  <span class="icon"><Icon {icon} inline width="1.5em" /></span>
 {/if}
 {#if header.component}
   <svelte:component this={headerComponent} {item} {header} />

package/dist/tree/treestore.js

@@ -127,8 +127,6 @@ export class TreeStore extends ActiveStore {
             }
             else {
                 this.value.itemsById = {};
-                for (const child of children)
-                    child.level = 1;
                 this.value.rootItems = children;
             }
             this.addLookup(children);

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