@dosgato/dialog 0.0.20 → 0.0.21

package/tree/TreeNode.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Store } from '@txstate-mws/svelte-store';
+import { type TypedTreeItem, type TreeItemFromDB, type TreeHeader } from './treestore';
+declare class __sveltets_Render<T extends TreeItemFromDB> {
+    props(): {
+        headers: TreeHeader<T>[];
+        headerSizes: Store<string[]>;
+        nodeClass?: (itm: T) => string;
+        item: TypedTreeItem<T>;
+        posinset: number;
+        setsize: number;
+        level: number;
+        next: TypedTreeItem<T>;
+        prev: TypedTreeItem<T>;
+        parent?: TypedTreeItem<T>;
+    };
+    events(): {
+        choose: CustomEvent<any>;
+        deselect: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TreeNodeProps<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeNodeEvents<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeNodeSlots<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TreeNode<T extends TreeItemFromDB> extends SvelteComponentTyped<TreeNodeProps<T>, TreeNodeEvents<T>, TreeNodeSlots<T>> {
+}
+export {};

package/tree/index.d.ts

@@ -0,0 +1,3 @@
+export * from './treestore.js';
+export { default as Tree } from './Tree.svelte';
+export { default as LoadIcon } from './LoadIcon.svelte';

package/tree/index.js

@@ -0,0 +1,3 @@
+export * from './treestore.js';
+export { default as Tree } from './Tree.svelte';
+export { default as LoadIcon } from './LoadIcon.svelte';

package/tree/treestore.d.ts

@@ -0,0 +1,117 @@
+import { ActiveStore } from '@txstate-mws/svelte-store';
+import type { IconifyIcon } from '@iconify/svelte';
+import type { SvelteComponent } from 'svelte';
+export declare const TREE_STORE_CONTEXT: {};
+export interface TreeItemFromDB {
+    id: string;
+    hasChildren?: boolean;
+}
+export interface TreeItem<T extends TreeItemFromDB> extends TreeItemFromDB {
+    level: number;
+    parent?: TypedTreeItem<T>;
+    loading?: boolean;
+    open?: boolean;
+    children?: TypedTreeItem<T>[];
+}
+export type TypedTreeItem<T extends TreeItemFromDB> = TreeItem<T> & T;
+export interface ITreeStore<T extends TreeItemFromDB> {
+    loading?: boolean;
+    rootItems?: TypedTreeItem<T>[];
+    itemsById: Record<string, TypedTreeItem<T> | undefined>;
+    focused?: TypedTreeItem<T>;
+    selected: Map<string, TypedTreeItem<T>>;
+    selectedItems: TypedTreeItem<T>[];
+    copied: Map<string, TypedTreeItem<T>>;
+    cut?: boolean;
+    draggable: boolean;
+    selectedUndraggable?: boolean;
+    dragging: boolean;
+    headerWidthOverrides: Record<string, string>;
+}
+export type FetchChildrenFn<T extends TreeItemFromDB> = (item?: TypedTreeItem<T>) => Promise<T[]>;
+export type DragEligibleFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], userWantsCopy: boolean) => boolean;
+export type DropEffectFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], dropTarget: TypedTreeItem<T>, above: boolean, userWantsCopy: boolean) => 'move' | 'copy' | 'none';
+export type MoveHandlerFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], dropTarget: TypedTreeItem<T>, above: boolean) => boolean | Promise<boolean>;
+export type CopyHandlerFn<T extends TreeItemFromDB> = (selectedItems: TypedTreeItem<T>[], dropTarget: TypedTreeItem<T>, above: boolean, userWantsRecursive: boolean | undefined) => boolean | Promise<boolean>;
+export interface TreeHeader<T extends TreeItemFromDB> {
+    id: string;
+    label: string;
+    fixed?: string;
+    grow?: number;
+    icon?: IconifyIcon | ((item: TypedTreeItem<T>) => IconifyIcon | undefined);
+    get?: string;
+    render?: (item: TypedTreeItem<T>) => string;
+    component?: SvelteComponent;
+    class?: (item: TypedTreeItem<T>) => string | string[];
+}
+export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITreeStore<T>> {
+    #private;
+    fetchChildren: FetchChildrenFn<T>;
+    treeElement?: HTMLElement;
+    rootItems: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>[], ITreeStore<T>>;
+    draggable: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
+    dragging: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
+    selectedUndraggable: import("@txstate-mws/svelte-store").DerivedStore<boolean, ITreeStore<T>>;
+    selected: import("@txstate-mws/svelte-store").DerivedStore<Map<string, TypedTreeItem<T>>, ITreeStore<T>>;
+    focused: import("@txstate-mws/svelte-store").DerivedStore<TypedTreeItem<T>, ITreeStore<T>>;
+    copied: import("@txstate-mws/svelte-store").DerivedStore<Map<string, TypedTreeItem<T>>, ITreeStore<T>>;
+    headerOverride: import("@txstate-mws/svelte-store").DerivedStore<Record<string, string>, ITreeStore<T>>;
+    moveHandler?: MoveHandlerFn<T>;
+    copyHandler?: CopyHandlerFn<T>;
+    dragEligibleHandler?: DragEligibleFn<T>;
+    dropEffectHandler?: DropEffectFn<T>;
+    singleSelect?: boolean;
+    private refreshPromise?;
+    constructor(fetchChildren: FetchChildrenFn<T>, { moveHandler, copyHandler, dragEligible, dropEffect, singleSelect }?: {
+        moveHandler?: MoveHandlerFn<T>;
+        copyHandler?: CopyHandlerFn<T>;
+        dragEligible?: DragEligibleFn<T>;
+        dropEffect?: DropEffectFn<T>;
+        singleSelect?: boolean;
+    });
+    visit(item: TypedTreeItem<T>, cb: (item: TypedTreeItem<T>) => Promise<void>): Promise<void>;
+    visitSync(item: TypedTreeItem<T>, cb: (item: TypedTreeItem<T>) => void): void;
+    addLookup(items: TypedTreeItem<T>[]): void;
+    cleanSelected(): void;
+    determineDraggable(): void;
+    trigger(): void;
+    fetch(item?: TypedTreeItem<T>): Promise<TypedTreeItem<T>[]>;
+    refresh(item?: TypedTreeItem<T>, skipNotify?: boolean): Promise<void>;
+    focus(item: TypedTreeItem<T> | undefined, notify?: boolean): void;
+    select(item: TypedTreeItem<T>, { clear, notify, toggle }: {
+        clear?: boolean;
+        notify?: boolean;
+        toggle?: boolean;
+    }): void;
+    selectById(id: string, { clear, notify, toggle }: {
+        clear?: boolean;
+        notify?: boolean;
+        toggle?: boolean;
+    }): void;
+    deselect(notify?: boolean): void;
+    isSelected(item: TypedTreeItem<T>): boolean;
+    open(item: TypedTreeItem<T>, notify?: boolean): Promise<void>;
+    openAndRefresh(item: TypedTreeItem<T>, notify?: boolean): Promise<void>;
+    close(item: TypedTreeItem<T>): void;
+    toggle(item: TypedTreeItem<T>): Promise<void>;
+    viewUnder(item?: TypedTreeItem<T>): Promise<void>;
+    dragStart(item: TypedTreeItem<T>): void;
+    protected _drop(item: TypedTreeItem<T>, droppedItems: Map<string, TypedTreeItem<T>>, above: boolean, userWantsCopy: boolean, userWantsRecursive: boolean | undefined): Promise<boolean>;
+    drop(item: TypedTreeItem<T>, above: boolean, userWantsCopy: any): Promise<boolean>;
+    collectAncestors(item: TypedTreeItem<T>): TypedTreeItem<T>[];
+    root(item: TypedTreeItem<T>): TypedTreeItem<T>;
+    findCommonParent(items: TypedTreeItem<T>[]): TypedTreeItem<T>;
+    dragEligible(selectedItems: TypedTreeItem<T>[], userWantsCopy: boolean): boolean;
+    protected _dropEffect(item: TypedTreeItem<T>, droppedItems: Map<string, TypedTreeItem<T>>, above: boolean, userWantsCopy: boolean): "none" | "copy" | "move";
+    dropEffect(item: TypedTreeItem<T>, above: boolean, userWantsCopy: boolean): "none" | "copy" | "move";
+    cut(): void;
+    copy(): void;
+    cutEligible(): boolean;
+    copyEligible(): boolean;
+    cancelCopy(): void;
+    pasteEligible(above?: boolean): boolean;
+    pasteEffect(above?: boolean): "none" | "copy" | "move";
+    paste(above?: boolean, userWantsRecursive?: boolean): Promise<boolean>;
+    setHeaderOverride(id: string, width: string): void;
+    resetHeaderOverride(): void;
+}

package/tree/treestore.js

@@ -0,0 +1,336 @@
+import { ActiveStore, derivedStore } from '@txstate-mws/svelte-store';
+import { keyby } from 'txstate-utils';
+export const TREE_STORE_CONTEXT = {};
+export class TreeStore extends ActiveStore {
+    fetchChildren;
+    treeElement;
+    rootItems = derivedStore(this, 'rootItems');
+    draggable = derivedStore(this, v => v.draggable && !v.loading);
+    dragging = derivedStore(this, 'dragging');
+    selectedUndraggable = derivedStore(this, 'selectedUndraggable');
+    selected = derivedStore(this, 'selected');
+    focused = derivedStore(this, 'focused');
+    copied = derivedStore(this, 'copied');
+    headerOverride = derivedStore(this, 'headerWidthOverrides');
+    moveHandler;
+    copyHandler;
+    dragEligibleHandler;
+    dropEffectHandler;
+    singleSelect;
+    refreshPromise;
+    constructor(fetchChildren, { moveHandler, copyHandler, dragEligible, dropEffect, singleSelect } = {}) {
+        super({ itemsById: {}, selected: new Map(), selectedItems: [], copied: new Map(), dragging: false, draggable: !!moveHandler, headerWidthOverrides: {} });
+        this.fetchChildren = fetchChildren;
+        this.moveHandler = moveHandler;
+        this.copyHandler = copyHandler;
+        this.dragEligibleHandler = dragEligible;
+        this.dropEffectHandler = dropEffect;
+        this.singleSelect = singleSelect;
+    }
+    async visit(item, cb) {
+        await cb(item);
+        await Promise.all((item.children ?? []).map(async (child) => await this.visit(child, cb)));
+    }
+    visitSync(item, cb) {
+        cb(item);
+        for (const child of item.children ?? [])
+            this.visitSync(child, cb);
+    }
+    addLookup(items) {
+        for (const item of items) {
+            this.visitSync(item, itm => {
+                this.value.itemsById[itm.id] = itm;
+                if (this.value.selected.has(itm.id))
+                    this.value.selected.set(itm.id, itm);
+            });
+        }
+        this.cleanSelected();
+    }
+    cleanSelected() {
+        for (const selected of this.value.selected.values()) {
+            if (!this.value.itemsById[selected.id])
+                this.value.selected.delete(selected.id);
+        }
+        this.determineDraggable();
+    }
+    determineDraggable() {
+        this.value.selectedItems = Array.from(this.value.selected.values());
+        this.value.selectedUndraggable = !this.dragEligible(this.value.selectedItems, true) && !this.dragEligible(this.value.selectedItems, false);
+    }
+    trigger() {
+        this.set(this.value);
+    }
+    async fetch(item) {
+        const children = await this.fetchChildren(item);
+        for (const child of children) {
+            child.level = (item?.level ?? 0) + 1;
+            child.parent = item;
+        }
+        return children;
+    }
+    async #refresh(item, skipNotify = false) {
+        if (item)
+            item.loading = true;
+        else
+            this.value.loading = true;
+        this.trigger();
+        try {
+            const children = await this.fetch(item);
+            // re-open any open children
+            await Promise.all(children.map(async (child) => await this.visit(child, async (child) => {
+                child.open = this.value.itemsById[child.id]?.open;
+                if (child.open) {
+                    child.children = await this.fetch(child);
+                    child.hasChildren = child.children.length > 0;
+                    if (!child.hasChildren)
+                        child.open = false;
+                }
+            })));
+            if (item) {
+                this.visitSync(item, itm => { if (itm.id !== item.id)
+                    this.value.itemsById[itm.id] = undefined; });
+                item.children = children;
+                item.hasChildren = children.length > 0;
+                if (!item.hasChildren)
+                    item.open = false;
+            }
+            else {
+                this.value.itemsById = {};
+                for (const child of children)
+                    child.level = 1;
+                this.value.rootItems = children;
+            }
+            this.addLookup(children);
+            // if the focused item disappeared in the refresh, we need to replace it,
+            // as without a focus the tree becomes invisible to keyboard nav
+            if (!this.value.itemsById[this.value.focused?.id])
+                this.focus(this.value.selectedItems.slice(-1)[0] ?? this.value.rootItems?.[0], true);
+        }
+        finally {
+            if (item)
+                item.loading = false;
+            this.value.loading = false;
+            if (!skipNotify)
+                this.trigger();
+        }
+    }
+    async refresh(item, skipNotify = false) {
+        this.refreshPromise ??= this.#refresh(item, skipNotify);
+        await this.refreshPromise;
+        this.refreshPromise = undefined;
+    }
+    focus(item, notify = true) {
+        this.value.focused = item;
+        if (notify)
+            this.trigger();
+    }
+    select(item, { clear = false, notify = true, toggle = false }) {
+        const selected = this.isSelected(item);
+        const numSelected = this.value.selected.size;
+        if (this.singleSelect)
+            clear = true;
+        if (clear) {
+            this.value.selected.clear();
+            this.focus(item, false);
+        }
+        if (toggle && selected && (!clear || numSelected === 1))
+            this.value.selected.delete(item.id);
+        else
+            this.value.selected.set(item.id, item);
+        this.determineDraggable();
+        if (notify)
+            this.trigger();
+    }
+    selectById(id, { clear = false, notify = true, toggle = false }) {
+        const item = this.value.itemsById[id];
+        if (item)
+            this.select(item, { clear, notify, toggle });
+    }
+    deselect(notify = true) {
+        this.value.selected.clear();
+        this.determineDraggable();
+        if (notify)
+            this.trigger();
+    }
+    isSelected(item) {
+        return this.value.selected.has(item.id);
+    }
+    async open(item, notify = true) {
+        if (item.open || item.hasChildren === false)
+            return;
+        await this.openAndRefresh(item, notify);
+    }
+    async openAndRefresh(item, notify = true) {
+        await this.refresh(item, true);
+        item.open = !!item.children?.length;
+        if (notify)
+            this.trigger();
+    }
+    close(item) {
+        for (const child of item.children ?? [])
+            this.value.itemsById[child.id] = undefined;
+        this.cleanSelected();
+        item.children = undefined;
+        item.open = false;
+        this.trigger();
+    }
+    async toggle(item) {
+        if (item.open)
+            this.close(item);
+        else
+            await this.open(item);
+    }
+    async viewUnder(item) {
+        if (item)
+            await this.open(item);
+        this.trigger();
+    }
+    dragStart(item) {
+        if (this.value.dragging || !this.value.draggable)
+            return;
+        if (!this.value.selected.has(item.id)) {
+            this.select(item, { clear: true, notify: false });
+        }
+        this.value.dragging = true;
+        this.trigger();
+    }
+    async _drop(item, droppedItems, above, userWantsCopy, userWantsRecursive) {
+        const dropEffect = this._dropEffect(item, droppedItems, above, userWantsCopy);
+        if (dropEffect === 'none')
+            return false;
+        this.value.dragging = false;
+        this.value.loading = true;
+        this.trigger();
+        const selectedItems = Array.from(droppedItems.values());
+        const commonparent = this.findCommonParent([...selectedItems, item]);
+        try {
+            const result = dropEffect === 'move'
+                ? await this.moveHandler(selectedItems, item, above)
+                : await this.copyHandler(selectedItems, item, above, userWantsRecursive);
+            await this.openAndRefresh(item);
+            await this.refresh(commonparent);
+            return result;
+        }
+        catch (e) {
+            console.error(e);
+        }
+        finally {
+            this.update(v => ({ ...v, loading: false }));
+        }
+        return true;
+    }
+    async drop(item, above, userWantsCopy) {
+        const ret = await this._drop(item, this.value.selected, above, userWantsCopy, undefined);
+        return ret;
+    }
+    collectAncestors(item) {
+        const ret = [];
+        let itm = item;
+        while (itm.parent) {
+            ret.push(itm.parent);
+            itm = itm.parent;
+        }
+        return ret;
+    }
+    root(item) {
+        let root = item;
+        while (root.parent)
+            root = root.parent;
+        return root;
+    }
+    findCommonParent(items) {
+        if (items.length <= 1)
+            return;
+        const [first, ...rest] = items;
+        const ancestors = [first, ...this.collectAncestors(first)];
+        const lookup = keyby(ancestors, 'id');
+        const depthById = ancestors.reduce((depthById, a, i) => { depthById[a.id] = i; return depthById; }, {});
+        let idx = -1;
+        for (const item of rest) {
+            const itemAncestors = this.collectAncestors(item);
+            const firstcommon = itemAncestors.find(a => lookup[a.id]);
+            if (!firstcommon)
+                return;
+            const found = depthById[firstcommon.id];
+            if (found > idx)
+                idx = found;
+        }
+        return ancestors[idx];
+    }
+    dragEligible(selectedItems, userWantsCopy) {
+        return !this.dragEligibleHandler || this.dragEligibleHandler(selectedItems, userWantsCopy);
+    }
+    _dropEffect(item, droppedItems, above, userWantsCopy) {
+        const handlerAnswer = this.dropEffectHandler?.(Array.from(droppedItems.values()), item, above, userWantsCopy) ?? 'move';
+        if (handlerAnswer === 'none')
+            return 'none';
+        if (handlerAnswer === 'move') {
+            // I could make the user's dropEffectHandler check this, but it's pretty universal that you
+            // can't move a thing into itself or one of its own descendants
+            // and it would be super weird to just automagically turn it into a copy, not to mention it would
+            // mean placing it back on itself would feel like canceling the move but make a copy instead
+            if (droppedItems.has(item.id))
+                return 'none';
+            for (const ancestor of this.collectAncestors(item)) {
+                if (droppedItems.has(ancestor.id))
+                    return 'none';
+            }
+        }
+        if (handlerAnswer === 'move' && !this.moveHandler)
+            return 'none';
+        if (handlerAnswer === 'copy' && !this.copyHandler)
+            return 'none';
+        return handlerAnswer;
+    }
+    dropEffect(item, above, userWantsCopy) {
+        return this._dropEffect(item, this.value.selected, above, userWantsCopy);
+    }
+    cut() {
+        if (!this.cutEligible())
+            return;
+        this.value.copied = new Map(this.value.selected);
+        this.value.cut = true;
+        this.trigger();
+    }
+    copy() {
+        if (!this.copyEligible())
+            return;
+        this.value.copied = new Map(this.value.selected);
+        this.value.cut = false;
+        this.trigger();
+    }
+    cutEligible() {
+        return this.moveHandler && this.dragEligible(this.value.selectedItems, false);
+    }
+    copyEligible() {
+        return this.copyHandler && this.dragEligible(this.value.selectedItems, true);
+    }
+    cancelCopy() {
+        this.value.copied = new Map();
+        this.value.cut = undefined;
+        this.trigger();
+    }
+    pasteEligible(above = false) {
+        return this.value.copied.size && this.pasteEffect(above) !== 'none';
+    }
+    pasteEffect(above = false) {
+        return this._dropEffect(this.value.selectedItems[0], this.value.copied, above, !this.value.cut);
+    }
+    async paste(above = false, userWantsRecursive = false) {
+        if (this.pasteEffect(above) === 'none')
+            return;
+        const copied = this.value.copied;
+        const cut = this.value.cut;
+        this.value.copied = new Map();
+        this.value.cut = undefined;
+        return await this._drop(this.value.selectedItems[0], copied, above, !cut, userWantsRecursive);
+    }
+    setHeaderOverride(id, width) {
+        this.value.headerWidthOverrides[id] = `max(20px, ${width})`;
+        this.trigger();
+    }
+    resetHeaderOverride() {
+        this.value.headerWidthOverrides = {};
+        this.trigger();
+    }
+}

package/chooser/Asset.svelte

@@ -1,83 +0,0 @@
-<script>import { modifierKey } from '@txstate-mws/svelte-components';
-import { createEventDispatcher, getContext } from 'svelte';
-import { hashid } from 'txstate-utils';
-import { CHOOSER_STORE_CONTEXT } from './ChooserStore';
-import FileIcon from '../FileIcon.svelte';
-export let asset;
-export let level;
-export let posinset;
-export let setsize;
-export let next;
-export let prev;
-export let parent = undefined;
-const store = getContext(CHOOSER_STORE_CONTEXT);
-$: id = hashid(asset.id);
-$: haveFocus = $store?.focus === asset.id;
-$: isPreview = $store.preview?.id === asset.id;
-const dispatch = createEventDispatcher();
-function onKeyDown(e) {
-    if (modifierKey(e))
-        return;
-    if (['Enter', ' '].includes(e.key)) {
-        onClick(e);
-    }
-    else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        e.stopPropagation();
-        if (next) {
-            store.setFocus(next);
-            document.getElementById(hashid(next.id)).focus();
-        }
-    }
-    else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        e.stopPropagation();
-        const anyprev = prev;
-        const myprev = anyprev?.open && anyprev.children?.length && anyprev.path === asset.path ? anyprev.children[anyprev.children.length - 1] : prev;
-        if (myprev) {
-            store.setFocus(myprev);
-            document.getElementById(hashid(myprev.id)).focus();
-        }
-    }
-    else if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        e.stopPropagation();
-        if (parent) {
-            store.setFocus(parent);
-            document.getElementById(hashid(parent.id)).focus();
-        }
-    }
-}
-function onClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    // if the id was already the same as the one that was clicked, the user
-    // has clicked it twice, so we should choose the item and end the modal
-    if ($store.preview?.id === asset.id)
-        dispatch('choose', asset);
-    else
-        store.preview(asset);
-}
-</script>
-
-<li
-  {id}
-  role="treeitem"
-  tabindex={haveFocus ? 0 : -1}
-  aria-setsize={setsize}
-  aria-posinset={posinset}
-  aria-level={level}
-  aria-selected={isPreview}
-  class="dialog-asset-file"
-  class:isPreview
-  on:keydown={onKeyDown}
-  on:click={onClick}
->
-  <FileIcon mime={asset.mime} inline /> {asset.name}
-</li>
-
-<style>
-  li {
-    cursor: pointer;
-  }
-</style>

package/chooser/Asset.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { UIAsset, UIFolder, AnyUIItem } from './ChooserStore';
-declare const __propDef: {
-    props: {
-        asset: UIAsset;
-        level: number;
-        posinset: number;
-        setsize: number;
-        next: AnyUIItem | undefined;
-        prev: AnyUIItem | undefined;
-        parent?: UIFolder | undefined;
-    };
-    events: {
-        choose: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type AssetProps = typeof __propDef.props;
-export declare type AssetEvents = typeof __propDef.events;
-export declare type AssetSlots = typeof __propDef.slots;
-export default class Asset extends SvelteComponentTyped<AssetProps, AssetEvents, AssetSlots> {
-}
-export {};