@dosgato/dialog 0.0.20 → 0.0.22

package/TabStore.js

@@ -23,11 +23,20 @@ export class TabStore extends Store {
         this.initialTab = initialTab;
     }
     set(v) {
+        v.tabids ??= {};
+        v.panelids ??= {};
+        for (const tab of v.tabs) {
+            v.tabids[tab.title] ??= randomid();
+            v.panelids[tab.title] ??= randomid();
+        }
         super.set(checkNext(v));
     }
     currentIdx() {
         return derivedStore(this, v => v.current);
     }
+    currentName() {
+        return derivedStore(this, v => v.tabs[v.current].name ?? v.tabs[v.current].title);
+    }
     currentTitle() {
         return derivedStore(this, v => v.tabs[v.current].title);
     }
@@ -55,4 +64,7 @@ export class TabStore extends Store {
     activate(idx) {
         this.update(v => ({ ...v, current: Math.min(v.tabs.length, Math.max(0, idx)) }));
     }
+    activateName(name) {
+        this.update(v => ({ ...v, current: findIndex(v.tabs, t => t.name === name) ?? findIndex(v.tabs, t => t.title === name) ?? v.current }));
+    }
 }

package/Tabs.svelte

@@ -1,6 +1,6 @@
 <script>import { modifierKey, resize, offset } from '@txstate-mws/svelte-components';
 import { Store } from '@txstate-mws/svelte-store';
-import { getContext, setContext } from 'svelte';
+import { getContext, onMount, setContext } from 'svelte';
 import { roundTo } from 'txstate-utils';
 import { DIALOG_TABS_CONTEXT } from './Dialog.svelte';
 import Icon from './Icon.svelte';
@@ -8,19 +8,19 @@ import { TabStore, TAB_CONTEXT } from './TabStore';
 export let tabs;
 export let active = undefined;
 export let store = new TabStore(tabs, active);
-// TODO: react to tabs prop changing
+$: store.update(v => ({ ...v, tabs }));
 const activeStore = new Store({});
 const tabelements = [];
 let activeelement;
 setContext(TAB_CONTEXT, { store, onClick, onKeyDown, tabelements });
-const dialogContext = getContext(DIALOG_TABS_CONTEXT);
+const dialogContext = getContext(DIALOG_TABS_CONTEXT) ?? { change: () => { } };
 dialogContext.onNext = () => { store.right(); };
 dialogContext.onPrev = () => { store.left(); };
 $: dialogContext.prevTitle = $store.prevTitle;
 $: dialogContext.nextTitle = $store.nextTitle;
 $: dialogContext.hasRequired = $store.requireNext;
 $: dialogContext.change($store);
-setContext(DIALOG_TABS_CONTEXT, {}); // reset context so that any sub-tabs do NOT control the Dialog component
+setContext(DIALOG_TABS_CONTEXT, { change: () => { } }); // reset context so that any sub-tabs do NOT control the Dialog component
 const currentTitle = store.currentTitle();
 const currentIdx = store.currentIdx();
 const accordion = store.accordion();
@@ -80,6 +80,7 @@ async function reactToCurrent(..._) {
 }
 $: active = $currentTitle;
 $: reactToCurrent($activeStore);
+onMount(reactToCurrent);
 </script>
 
 {#if !$accordion}

package/Tabs.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
         };
     };
 };
-export declare type TabsProps = typeof __propDef.props;
-export declare type TabsEvents = typeof __propDef.events;
-export declare type TabsSlots = typeof __propDef.slots;
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
 export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
 }
 export {};

package/chooser/Chooser.svelte

@@ -1,17 +1,13 @@
-<script>import fileTree from '@iconify-icons/mdi/file-tree.js';
-import viewGrid from '@iconify-icons/mdi/view-grid.js';
-import { Loading, Modal } from '@txstate-mws/svelte-components';
+<script>import applicationOutline from '@iconify-icons/mdi/application-outline';
+import folderLight from '@iconify-icons/ph/folder-light';
+import folderNotchOpenLight from '@iconify-icons/ph/folder-notch-open-light';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
-import { hashid, randomid } from 'txstate-utils';
-import Asset from './Asset.svelte';
-import AssetFolder from './AssetFolder.svelte';
-import ButtonGroup from '../ButtonGroup.svelte';
+import { isNotBlank } from 'txstate-utils';
+import { Dialog, iconForMime, Tabs, Tree, TreeStore } from '..';
 import { CHOOSER_API_CONTEXT } from './ChooserAPI';
 import { CHOOSER_STORE_CONTEXT, ChooserStore } from './ChooserStore';
 import Details from './Details.svelte';
-import Icon from '../Icon.svelte';
-import Page from './Page.svelte';
 import Thumbnail from './Thumbnail.svelte';
 const chooserClient = getContext(CHOOSER_API_CONTEXT);
 export let label = undefined;
@@ -19,7 +15,7 @@ export let images = false;
 export let pages = false;
 export let assets = images;
 export let folders = false;
-export let initialType = undefined;
+export let required = false;
 export let initialSource = undefined;
 export let initialPath = undefined;
 export let activeSources = undefined;
@@ -27,99 +23,103 @@ export let passthruFilters = undefined;
 export let filter = undefined;
 export let store = new ChooserStore(chooserClient);
 setContext(CHOOSER_STORE_CONTEXT, store);
-$: if (!pages && !assets)
-    assets = true;
-$: activeTypes = [...(assets ? ['asset'] : []), ...(pages ? ['page'] : [])];
 const dispatch = createEventDispatcher();
-const sources = derivedStore(store, v => v.sources?.[v.activetype] ?? []);
-const source = derivedStore(store, v => store.getSource(v));
-const preview = derivedStore(store, 'preview');
-const chooserheadid = randomid();
-const listid = randomid();
+let tabStore;
+const { sources, source, preview } = 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 }));
+}
+const treeStore = new TreeStore(fetchChildren);
+const selected = derivedStore(treeStore, 'selectedItems.0');
+$: store.setSource($currentName);
+$: selectPreview($preview, $source);
+$: if (['asset', 'page'].includes($selected?.type))
+    store.setPreview($selected);
 function onChoose() {
     dispatch('change', $store.preview);
 }
+function onDeselect() {
+    store.setPreview(undefined);
+}
+async function openRecursive(pathSplit, depth) {
+    console.log($treeStore.rootItems);
+    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)
+        return;
+    await treeStore.open(curr, false);
+    if (depth + 1 >= pathSplit.length)
+        return curr;
+    return await openRecursive(pathSplit, depth + 1);
+}
+async function selectPreview(..._) {
+    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();
+        if (!currentSelection)
+            return;
+        store.setPreview(currentSelection);
+        treeStore.select(currentSelection, {});
+        treeStore.trigger();
+    }
+}
 onMount(async () => {
-    await store.init({ activeTypes, activeSources, initialType, initialSource, initialPath, passthruFilters, filter, onlyImages: images, chooseFolder: folders });
-    if ($store.focus)
-        document.getElementById(hashid($store.focus))?.scrollIntoView();
+    await store.init({ images, pages, assets, folders, activeSources, initialSource, initialPath, passthruFilters, filter });
+    tabStore.activateName($source.name);
+    await selectPreview();
 });
 </script>
 
-<Modal on:escape>
+<Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$store.preview && required} cancelText="Cancel" on:continue={onChoose}>
   <section class="dialog-chooser-window">
-    <header>
-      <div class="dialog-chooser-controls">
-        {#if activeTypes.length > 1}
-          <ButtonGroup value={$store.activetype} choices={[{ value: 'asset', label: 'Assets' }, { value: 'page', label: 'Pages' }]} ariaControls={listid} on:change={e => store.setActiveType(e.detail)} />
-        {/if}
-        {#if $sources.length > 1}
-          <div class="dialog-chooser-source">
-            <select on:change={function () { store.changeSource(Number(this.value)) }}>
-              {#each $sources as source, i}
-                <option value={i}>{source.label || source.name}</option>
-              {/each}
-            </select>
-          </div>
-        {/if}
-      </div>
-      <div id={chooserheadid} class="dialog-chooser-label">
-        {label}
-      </div>
-      {#if $source?.type === 'asset'}
-        <div class="dialog-chooser-view">
-          <button type="button"><Icon icon={fileTree} /></button>
-          <button type="button"><Icon icon={viewGrid} /></button>
-        </div>
+    <header class="dialog-chooser-controls">
+      {#if $sources.length > 1}
+        <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ id: s.name, title: s.label ?? s.name }))} />
       {/if}
     </header>
     <section class="dialog-chooser-chooser">
-      <Loading loading={!$source || !$source.children}>
-        <ul id={listid} class="dialog-chooser-list" role="tree" aria-labelledby={chooserheadid}>
-          {#each $source.children as child, i (child.id)}
-            {@const setsize = $source.children.length}
-            {@const posinset = i + 1}
-            {@const prev = $source.children[i - 1]}
-            {@const next = $source.children[i + 1]}
-            {#if child.type === 'folder'}
-              <AssetFolder folder={child} {setsize} {posinset} level={1} {prev} {next} on:choose={onChoose} />
-            {:else if child.type === 'page'}
-              <Page page={child} {setsize} {posinset} level={1} {prev} {next} on:choose={onChoose} />
-            {:else}
-              <Asset asset={child} {setsize} {posinset} level={1} {prev} {next} on:choose={onChoose} />
-            {/if}
-          {/each}
-        </ul>
-      </Loading>
+      {#if $store.initialized}
+        <Tree headers={[
+          { label: 'Path', id: 'name', grow: 4, icon: item => item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpenLight : folderLight) : 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} />
         <Details item={$preview}>
           {#if $preview.type === 'folder'}
-            <li>{$preview.children?.length || 0} sub-items</li>
+            <li>{$selected.children?.length || 0} sub-items</li>
           {/if}
         </Details>
       {/if}
     </section>
-    <footer>
-      <button type="button" on:click={() => dispatch('escape')}>Cancel</button>
-      <button type="button" disabled={!$store.preview} on:click={onChoose}>Choose</button>
-    </footer>
   </section>
-</Modal>
+</Dialog>
 
 <style>
   .dialog-chooser-window {
     position: relative;
-    width: 80vw;
     height: 80vh;
-    background-color: lightgray;
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     justify-content: flex-end;
-    padding: 1em;
     overflow: hidden;
   }
   .dialog-chooser-window * {
@@ -127,45 +127,22 @@ onMount(async () => {
   }
   .dialog-chooser-chooser {
     position: relative;
-    width: 70%;
+    width: 75%;
+    min-width: calc(100% - 21em);
     height: calc(100% - 4em);
     background-color: white;
     padding: 0.5em;
     overflow: auto;
   }
   .dialog-chooser-preview {
-    width: 30%;
+    width: 25%;
+    max-width: 21em;
     height: calc(100% - 4em);
     padding: 1em;
     overflow-y: auto;
   }
   header {
+    position: relative;
     width: 100%;
-    height: 2em;
-    text-align: center;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
   }
-  .dialog-chooser-label {
-    flex-grow: 1;
-  }
-  .dialog-chooser-controls {
-    display: flex;
-  }
-  .dialog-chooser-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  .dialog-chooser-list :global(li) {
-    line-height: 1;
-    padding: 0.25em 0;
-    border-bottom: 1px solid var(--asset-chooser-border, #AAAAAA);
-  }
-  .dialog-chooser-list :global(.isPreview) {
-    background-color: var(--asset-chooser-active-bg, #333333);
-    color: var(--asset-chooser-active, #FFFFFF);
-  }
-
 </style>

package/chooser/Chooser.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type AnyItem, type ChooserType } from './ChooserAPI';
+import { type AnyItem } from './ChooserAPI';
 import { ChooserStore } from './ChooserStore';
 declare class __sveltets_Render<F> {
     props(): {
@@ -8,7 +8,7 @@ declare class __sveltets_Render<F> {
         pages?: boolean;
         assets?: boolean;
         folders?: boolean;
-        initialType?: ChooserType;
+        required?: boolean;
         initialSource?: string;
         initialPath?: string;
         activeSources?: string[];
@@ -24,9 +24,9 @@ declare class __sveltets_Render<F> {
     };
     slots(): {};
 }
-export declare type ChooserProps<F> = ReturnType<__sveltets_Render<F>['props']>;
-export declare type ChooserEvents<F> = ReturnType<__sveltets_Render<F>['events']>;
-export declare type ChooserSlots<F> = ReturnType<__sveltets_Render<F>['slots']>;
+export type ChooserProps<F> = ReturnType<__sveltets_Render<F>['props']>;
+export type ChooserEvents<F> = ReturnType<__sveltets_Render<F>['events']>;
+export type ChooserSlots<F> = ReturnType<__sveltets_Render<F>['slots']>;
 export default class Chooser<F> extends SvelteComponentTyped<ChooserProps<F>, ChooserEvents<F>, ChooserSlots<F>> {
 }
 export {};

package/chooser/ChooserAPI.d.ts

@@ -1,6 +1,6 @@
 export declare const CHOOSER_API_CONTEXT: {};
-export declare type ChooserType = 'asset' | 'page';
-export declare type AnyItem = Asset | Folder | Page;
+export type ChooserType = 'asset' | 'page';
+export type AnyItem = Asset | Folder | Page;
 export interface Client<F = any> {
     getSources: (type: ChooserType) => Promise<Source[]>;
     getChildren: (source: string, path: string, filters: F) => Promise<AnyItem[]>;
@@ -24,20 +24,27 @@ interface Item {
      * PageLink (see dosgato-templating/src/links.ts)
      */
     id: string;
+    /**
+     * path to the item, MUST include the item itself, so ends with /${name}
+     */
     path: string;
     name: string;
+    source: string;
 }
 export interface Folder extends Item {
     type: 'folder';
+    hasChildren: boolean;
     acceptsUpload: boolean;
 }
 export interface Page extends Item {
     type: 'page';
+    title?: string;
+    hasChildren: boolean;
     url: string;
-    title: string;
 }
 export interface Asset extends Item {
     type: 'asset';
+    title?: string;
     mime: string;
     bytes: number;
     url: string;

package/chooser/ChooserStore.d.ts

@@ -1,26 +1,15 @@
-import { SafeStore } from '@txstate-mws/svelte-store';
+import 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 {
     children?: AnyUIItem[];
 }
-export interface UIFolder extends Folder {
-    children?: (UIFolder | UIAsset)[];
-    open?: boolean;
-    loading?: boolean;
-}
-export interface UIPage extends Page {
-    children?: UIPage[];
-    open?: boolean;
-    loading?: boolean;
-}
-export interface UIAsset extends Asset {
-}
 export interface RawURL {
     type: 'raw';
     id: string;
     url: string;
 }
-export declare type AnyUIItem = UIPage | UIFolder | UIAsset;
+export type AnyUIItem = TypedTreeItem<Page | Asset | Folder>;
 export interface IAssetStore {
     sources?: {
         page: UISource[];
@@ -28,20 +17,19 @@ export interface IAssetStore {
     };
     activetype: ChooserType;
     activesource: number;
-    preview?: AnyUIItem;
-    focus?: string;
-    focusPath?: string;
+    initialized: boolean;
+    preview?: AnyItem;
 }
 export interface ChooserStoreOptions<F> {
+    pages?: boolean;
+    assets?: boolean;
+    images?: boolean;
+    folders?: boolean;
     filter?: (itm: AnyItem) => boolean | Promise<boolean>;
     passthruFilters?: F;
-    activeTypes?: ChooserType[];
     activeSources?: string[];
-    initialType?: ChooserType;
     initialSource?: string;
     initialPath?: string;
-    chooseFolder?: boolean;
-    onlyImages?: boolean;
 }
 interface InternalStoreOptions<F> extends Omit<ChooserStoreOptions<F>, 'activeSources'> {
     activeSources?: Set<string>;
@@ -49,25 +37,19 @@ interface InternalStoreOptions<F> extends Omit<ChooserStoreOptions<F>, 'activeSo
 export declare const CHOOSER_STORE_CONTEXT: {};
 export declare function combinePath(path: string, name: string): string;
 export declare function bytesToHuman(bytes: number): string;
-export declare class ChooserStore<F = any> extends SafeStore<IAssetStore> {
+export declare class ChooserStore<F = any> extends Store<IAssetStore> {
     client: Client;
     options: InternalStoreOptions<F>;
     constructor(client: Client);
     setOptions(options: ChooserStoreOptions<F>): void;
+    sources: import("@txstate-mws/svelte-store").DerivedStore<UISource[], IAssetStore>;
+    source: import("@txstate-mws/svelte-store").DerivedStore<UISource, IAssetStore>;
+    preview: import("@txstate-mws/svelte-store").DerivedStore<AnyItem, IAssetStore>;
     getSource(state?: IAssetStore): UISource;
     getSourceIndex(name: string, state?: IAssetStore, type?: ChooserType): number;
     init(options: ChooserStoreOptions<F>): Promise<void>;
-    itemByPath(state: IAssetStore, path: string): AnyUIItem;
-    open(folder: UIFolder | UIPage): Promise<void>;
-    openPath(path: string): Promise<void>;
-    openPathRecursive(path: string): Promise<void>;
-    close(folder: UIFolder | UIPage): Promise<void>;
-    closePath(path: string): Promise<void>;
-    toggle(folder: UIFolder | UIPage): Promise<void>;
-    preview(item?: AnyUIItem): void;
+    setPreview(item?: AnyItem): void;
     clearPreview(): void;
-    changeSource(idx: number): Promise<void>;
-    setActiveType(type: ChooserType): Promise<void>;
-    setFocus(itm: AnyUIItem): void;
+    setSource(name: string, init?: boolean): void;
 }
 export {};