@dosgato/dialog 0.0.1

package/chooser/ChooserStore.js

@@ -0,0 +1,200 @@
+import { SafeStore } from '@txstate-mws/svelte-store';
+import { findIndex, isNotBlank } from 'txstate-utils';
+export const ASSET_STORE_CONTEXT = {};
+const nofilter = (x) => true;
+export function combinePath(path, name) {
+    if (path.endsWith('/'))
+        return path + name;
+    return path + '/' + name;
+}
+export function bytesToHuman(bytes) {
+    const scales = [' bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    const scale = Math.floor(Math.log(bytes) / Math.log(1024));
+    return String(parseFloat((bytes / Math.pow(1024, scale)).toPrecision(3))) + scales[scale];
+}
+export class ChooserStore extends SafeStore {
+    constructor(client) {
+        super({ activetype: 'page', activesource: 0 });
+        this.client = client;
+        this.setOptions({});
+    }
+    setOptions(options) {
+        const activeTypes = options.activeTypes?.length ? options.activeTypes : ['asset', 'page'];
+        const userFilter = options.filter ?? nofilter;
+        const filter = options.onlyImages
+            ? (itm) => ((itm.type === 'asset' && !!itm.image) || itm.type === 'folder') && userFilter(itm)
+            : userFilter;
+        this.options = {
+            ...options,
+            activeTypes,
+            activeSources: options.activeSources ? new Set(options.activeSources) : undefined,
+            initialType: options.initialType ?? activeTypes[0],
+            filter
+        };
+    }
+    getSource(state = this.value) {
+        return state.sources?.[state.activetype]?.[state.activesource];
+    }
+    getSourceIndex(name, state = this.value, type = state.activetype) {
+        if (!name || !state.sources?.[type])
+            return 0;
+        return findIndex(state.sources[type], s => s.name === name) ?? 0;
+    }
+    async init(options) {
+        this.setOptions(options);
+        const activetype = this.value.preview ? (this.value.preview.type === 'page' ? 'page' : 'asset') : this.options.initialType;
+        this.update(v => ({ ...v, loading: true, activetype, activesource: this.getSourceIndex(this.options.initialSource, v, this.options.initialType) }));
+        if (!this.getSource()) {
+            const [pageSources, assetSources] = await Promise.all([
+                this.options.activeTypes.includes('page') ? this.client.getSources('page') : [],
+                this.options.activeTypes.includes('asset') ? this.client.getSources('asset') : []
+            ]);
+            this.update(v => {
+                v.sources = { page: pageSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s)) ?? [], asset: assetSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s)) ?? [] };
+                v.activesource = this.getSourceIndex(this.options.initialSource, v);
+                return v;
+            });
+        }
+        if (this.value.preview)
+            await this.openPathRecursive(combinePath(this.value.preview.path, this.value.preview.name));
+        else if (this.options.initialPath)
+            await this.openPathRecursive(this.options.initialPath);
+        else
+            await this.openPathRecursive('/');
+        this.update(v => ({ ...v, loading: false }));
+    }
+    itemByPath(state, path) {
+        const parts = path.substring(1).split('/');
+        const source = this.getSource(state);
+        let item = source.children?.find(c => c.name === parts[0]);
+        for (const part of parts.slice(1).filter(isNotBlank)) {
+            if (item.type === 'asset')
+                return undefined;
+            item = item?.children?.find(c => c.name === part);
+        }
+        return item;
+    }
+    async open(folder) {
+        return await this.openPath(combinePath(folder.path, folder.name));
+    }
+    async openPath(path) {
+        const folder = this.itemByPath(this.value, path);
+        if (!folder || folder.type === 'asset' || folder.open)
+            return;
+        this.update(v => {
+            const folder = this.itemByPath(v, path);
+            folder.loading = true;
+            v.focus = folder.id;
+            return v;
+        });
+        try {
+            const children = await this.client.getChildren(this.getSource().name, path, this.options.filter);
+            this.update(v => {
+                const folder = this.itemByPath(v, path);
+                folder.open = true;
+                folder.loading = false;
+                folder.children = children;
+                return v;
+            });
+        }
+        catch (e) {
+            console.error(e);
+            this.update(v => {
+                const folder = this.itemByPath(v, path);
+                folder.loading = false;
+                return v;
+            });
+        }
+    }
+    async openPathRecursive(path) {
+        const parts = path.substring(1).split('/');
+        const source = this.getSource(this.clone(this.value));
+        if (!source.children)
+            source.children = await this.client.getChildren(source.name, '/', this.options.filter);
+        let current = source.children.find(c => c.name === parts[0]) ?? source.children[0];
+        for (const part of parts.slice(1).filter(isNotBlank)) {
+            if (!current || current.type === 'asset')
+                break;
+            if (!current.open) {
+                current.children = await this.client.getChildren(source.name, combinePath(current.path, current.name), this.options.filter);
+                current.loading = false;
+                current.open = true;
+            }
+            current = current.children.find(c => c.name === part);
+        }
+        this.update(v => {
+            const currSource = this.getSource(v);
+            if (currSource.name !== source.name)
+                return v;
+            v.sources[v.activetype][v.activesource] = source;
+            if (!current)
+                return v;
+            v.focus = current.id;
+            v.focusPath = combinePath(current.path, current.name);
+            return v;
+        });
+    }
+    async close(folder) {
+        return await this.closePath(combinePath(folder.path, folder.name));
+    }
+    async closePath(path) {
+        this.update(v => {
+            const folder = this.itemByPath(v, path);
+            if (folder && folder.type !== 'asset')
+                folder.open = false;
+            return v;
+        });
+    }
+    async toggle(folder) {
+        if (folder.open)
+            await this.close(folder);
+        else
+            await this.open(folder);
+    }
+    preview(item) {
+        if (!item)
+            return this.clearPreview();
+        if (item.type === 'folder' && !this.options.chooseFolder)
+            return;
+        this.update(v => ({ ...v, preview: item, focus: item.id, focusPath: combinePath(item.path, item.name) }));
+    }
+    clearPreview() {
+        this.update(v => ({ ...v, preview: undefined }));
+    }
+    async changeSource(idx) {
+        if (idx >= this.value.sources[this.value.activetype].length || idx < 0)
+            return;
+        this.update(v => {
+            v.activesource = idx;
+            const source = this.getSource(v);
+            if (source.children?.length) {
+                const firstchild = source.children[0];
+                v.focus = firstchild.id;
+                v.focusPath = combinePath(firstchild.path, firstchild.name);
+            }
+            return v;
+        });
+        const source = this.getSource();
+        const children = await this.client.getChildren(source.name, '/', this.options.filter);
+        this.update(v => {
+            const source = this.getSource(v);
+            source.children = children;
+            v.focus = children[0]?.id;
+            v.focusPath = children[0] ? combinePath(children[0]?.path, children[0].name) : undefined;
+            return v;
+        });
+    }
+    async setActiveType(type) {
+        this.update(v => ({ ...v, activetype: type }));
+        await this.changeSource(0);
+    }
+    setFocus(itm) {
+        if (!itm)
+            return;
+        this.update(v => {
+            v.focus = itm.id;
+            v.focusPath = combinePath(itm.path, itm.name);
+            return v;
+        });
+    }
+}

package/chooser/Details.svelte

@@ -0,0 +1,29 @@
+<script >import { bytesToHuman, combinePath } from './ChooserStore';
+export let item;
+</script>
+
+<ul class="dialog-chooser-info">
+  {#if item.type !== 'raw'}
+    <li>{item.name}</li>
+  {/if}
+  {#if item.type === 'asset' && item.image}
+    <li>{item.image.width}x{item.image.height}</li>
+  {:else if item.type === 'page'}
+    <li>{item.title}</li>
+  {:else if item.type === 'folder'}
+    <li>{combinePath(item.path, item.name)}</li>
+  {/if}
+  {#if item.type === 'asset'}
+    <li>{item.mime}</li>
+    <li>{bytesToHuman(item.bytes)}</li>
+  {/if}
+  <slot />
+</ul>
+
+<style>
+  .dialog-chooser-info {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+</style>

package/chooser/Details.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import { type AnyUIItem, type RawURL } from './ChooserStore';
+declare const __propDef: {
+    props: {
+        item: AnyUIItem | RawURL;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DetailsProps = typeof __propDef.props;
+export declare type DetailsEvents = typeof __propDef.events;
+export declare type DetailsSlots = typeof __propDef.slots;
+export default class Details extends SvelteComponentTyped<DetailsProps, DetailsEvents, DetailsSlots> {
+}
+export {};

package/chooser/Page.svelte

@@ -0,0 +1,118 @@
+<script >import fileOutline from '@iconify/icons-mdi/file-outline.js';
+import fileSyncOutline from '@iconify/icons-mdi/file-sync-outline.js';
+import { modifierKey } from '@txstate-mws/svelte-components';
+import { createEventDispatcher, getContext } from 'svelte';
+import { hashid } from 'txstate-utils';
+import { ASSET_STORE_CONTEXT } from './ChooserStore';
+import Icon from '../Icon.svelte';
+export let page;
+export let level;
+export let posinset;
+export let setsize;
+export let next;
+export let prev;
+export let parent = undefined;
+const store = getContext(ASSET_STORE_CONTEXT);
+$: open = page.open && page.children?.length;
+$: nextlevel = level + 1;
+$: id = hashid(page.id);
+$: haveFocus = $store.focus === page.id;
+$: isPreview = $store.preview?.id === page.id;
+const dispatch = createEventDispatcher();
+function onKeyDown(e) {
+    if (modifierKey(e))
+        return;
+    if (['Enter', ' '].includes(e.key)) {
+        onClick(e);
+        if ($store.preview?.id === page.id)
+            dispatch('choose', page);
+        else
+            store.preview(page);
+    }
+    else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (page.open && page.children?.length) {
+            const child = page.children[0];
+            store.setFocus(child);
+            document.getElementById(hashid(child.id)).focus();
+        }
+        else {
+            store.open(page);
+        }
+    }
+    else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (page.open) {
+            store.close(page);
+        }
+        else if (parent) {
+            store.setFocus(parent);
+            document.getElementById(hashid(parent.id)).focus();
+        }
+    }
+    else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        const mynext = open ? page.children[0] : next;
+        if (mynext) {
+            store.setFocus(mynext);
+            document.getElementById(hashid(mynext.id)).focus();
+        }
+    }
+    else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        const anyprev = prev;
+        const myprev = anyprev?.open && anyprev.children?.length && anyprev.path === page.path ? anyprev.children[anyprev.children.length - 1] : prev;
+        if (myprev) {
+            store.setFocus(myprev);
+            document.getElementById(hashid(myprev.id)).focus();
+        }
+    }
+}
+function onClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    store.preview(page);
+    store.toggle(page);
+}
+</script>
+
+<li
+  {id}
+  role="treeitem"
+  class:isPreview
+  aria-expanded={!!page.open}
+  aria-level={level}
+  aria-setsize={setsize}
+  aria-posinset={posinset}
+  aria-busy={page.loading}
+  tabindex={haveFocus ? 0 : -1}
+  on:keydown={onKeyDown}
+  on:click={onClick}
+>
+  <Icon icon={page.open ? fileOutline : (page.loading ? fileSyncOutline : fileOutline)} inline /> {page.name}
+</li>
+{#if open}
+  <ul role="group" class="dialog-asset-sublist">
+    {#each page.children as child, i (child.id)}
+      {@const setsize = page.children.length}
+      {@const posinset = i + 1}
+      {@const subprev = i === 0 ? page : page.children[i - 1]}
+      {@const subnext = i === setsize - 1 ? next : page.children[i + 1]}
+      <svelte:self page={child} {setsize} {posinset} level={nextlevel} prev={subprev} next={subnext} parent={page} on:choose />
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .dialog-asset-sublist {
+    list-style: none;
+    padding-left: 1em;
+  }
+  li {
+    cursor: pointer;
+  }
+</style>

package/chooser/Page.svelte.d.ts

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

package/chooser/Thumbnail.svelte

@@ -0,0 +1,40 @@
+<script >import folderOutline from '@iconify/icons-mdi/folder-outline.js';
+import fileLinkOutline from '@iconify/icons-mdi/file-link-outline.js';
+import FileIcon from '../FileIcon.svelte';
+import Icon from '../Icon.svelte';
+export let item;
+</script>
+
+<div class="dialog-chooser-thumbnail">
+  {#if item.type === 'asset'}
+    {#if item.image}
+      <img src={item.image.thumbnailUrl} alt="" />
+    {:else}
+      <FileIcon mime={item.mime} width='5em' />
+    {/if}
+  {:else if item.type === 'folder'}
+    <Icon icon={folderOutline} width='5em' />
+  {:else}
+    <Icon icon={fileLinkOutline} width='5em' />
+  {/if}
+</div>
+
+<style>
+  .dialog-chooser-thumbnail {
+    position: relative;
+    width: 100%;
+    padding-top: 75%;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: scale-down;
+  }
+  .dialog-chooser-thumbnail > * {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+</style>

package/chooser/Thumbnail.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AnyUIItem, RawURL } from './ChooserStore';
+declare const __propDef: {
+    props: {
+        item: AnyUIItem | RawURL;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ThumbnailProps = typeof __propDef.props;
+export declare type ThumbnailEvents = typeof __propDef.events;
+export declare type ThumbnailSlots = typeof __propDef.slots;
+export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
+}
+export {};

package/chooser/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ChooserAPI.js';
+export * from './ChooserStore.js';
+export { default as Asset } from './Asset.svelte';
+export { default as AssetFolder } from './AssetFolder.svelte';
+export { default as Chooser } from './Chooser.svelte';
+export { default as Page } from './Page.svelte';

package/chooser/index.js

@@ -0,0 +1,6 @@
+export * from './ChooserAPI.js';
+export * from './ChooserStore.js';
+export { default as Asset } from './Asset.svelte';
+export { default as AssetFolder } from './AssetFolder.svelte';
+export { default as Chooser } from './Chooser.svelte';
+export { default as Page } from './Page.svelte';

package/index.d.ts

@@ -0,0 +1,24 @@
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Container } from './Container.svelte';
+export { default as FieldCheckbox } from './FieldCheckbox.svelte';
+export { default as FieldChoices } from './FieldChoices.svelte';
+export { default as FieldChooserLink } from './FieldChooserLink.svelte';
+export { default as FieldDate } from './FieldDate.svelte';
+export { default as FieldDateTime } from './FieldDateTime.svelte';
+export { default as FieldMultiple } from './FieldMultiple.svelte';
+export { default as FieldMultiselect } from './FieldMultiselect.svelte';
+export { default as FieldNumber } from './FieldNumber.svelte';
+export { default as FieldRadio } from './FieldRadio.svelte';
+export { default as FieldSelect } from './FieldSelect.svelte';
+export { default as FieldStandard } from './FieldStandard.svelte';
+export { default as FieldText } from './FieldText.svelte';
+export { default as Form } from './Form.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as InlineMessage } from './InlineMessage.svelte';
+export { default as InlineMessages } from './InlineMessages.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Tab } from './Tab.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export * from './chooser/index.js';
+export * from './TabStore.js';

package/index.js

@@ -0,0 +1,24 @@
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Container } from './Container.svelte';
+export { default as FieldCheckbox } from './FieldCheckbox.svelte';
+export { default as FieldChoices } from './FieldChoices.svelte';
+export { default as FieldChooserLink } from './FieldChooserLink.svelte';
+export { default as FieldDate } from './FieldDate.svelte';
+export { default as FieldDateTime } from './FieldDateTime.svelte';
+export { default as FieldMultiple } from './FieldMultiple.svelte';
+export { default as FieldMultiselect } from './FieldMultiselect.svelte';
+export { default as FieldNumber } from './FieldNumber.svelte';
+export { default as FieldRadio } from './FieldRadio.svelte';
+export { default as FieldSelect } from './FieldSelect.svelte';
+export { default as FieldStandard } from './FieldStandard.svelte';
+export { default as FieldText } from './FieldText.svelte';
+export { default as Form } from './Form.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as InlineMessage } from './InlineMessage.svelte';
+export { default as InlineMessages } from './InlineMessages.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Tab } from './Tab.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export * from './chooser/index.js';
+export * from './TabStore.js';

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@dosgato/dialog",
+  "version": "0.0.1",
+  "dependencies": {
+    "@txstate-mws/svelte-components": "^1.2.5",
+    "@txstate-mws/svelte-forms": "^0.0.14",
+    "@iconify/svelte": "^2.1.1",
+    "@iconify/icons-mdi": "^1.1.42",
+    "txstate-utils": "^1.6.6"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "eslint-config-standard-with-typescript": "^21.0.1",
+    "eslint-plugin-svelte3": "^3.2.1",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.2.6",
+    "svelte-preprocess": "^4.9.4",
+    "svelte2tsx": "^0.4.14",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.3"
+  },
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    "./ButtonGroup.svelte": "./ButtonGroup.svelte",
+    "./Checkbox.svelte": "./Checkbox.svelte",
+    "./Container.svelte": "./Container.svelte",
+    "./FieldCheckbox.svelte": "./FieldCheckbox.svelte",
+    "./FieldChoices.svelte": "./FieldChoices.svelte",
+    "./FieldChooserLink.svelte": "./FieldChooserLink.svelte",
+    "./FieldDate.svelte": "./FieldDate.svelte",
+    "./FieldDateTime.svelte": "./FieldDateTime.svelte",
+    "./FieldMultiple.svelte": "./FieldMultiple.svelte",
+    "./FieldMultiselect.svelte": "./FieldMultiselect.svelte",
+    "./FieldNumber.svelte": "./FieldNumber.svelte",
+    "./FieldRadio.svelte": "./FieldRadio.svelte",
+    "./FieldSelect.svelte": "./FieldSelect.svelte",
+    "./FieldStandard.svelte": "./FieldStandard.svelte",
+    "./FieldText.svelte": "./FieldText.svelte",
+    "./FileIcon.svelte": "./FileIcon.svelte",
+    "./Form.svelte": "./Form.svelte",
+    "./Icon.svelte": "./Icon.svelte",
+    "./InlineMessage.svelte": "./InlineMessage.svelte",
+    "./InlineMessages.svelte": "./InlineMessages.svelte",
+    "./Input.svelte": "./Input.svelte",
+    "./Radio.svelte": "./Radio.svelte",
+    "./Tab.svelte": "./Tab.svelte",
+    "./TabStore": "./TabStore.js",
+    "./Tabs.svelte": "./Tabs.svelte",
+    "./chooser/Asset.svelte": "./chooser/Asset.svelte",
+    "./chooser/AssetFolder.svelte": "./chooser/AssetFolder.svelte",
+    "./chooser/Chooser.svelte": "./chooser/Chooser.svelte",
+    "./chooser/ChooserAPI": "./chooser/ChooserAPI.js",
+    "./chooser/ChooserStore": "./chooser/ChooserStore.js",
+    "./chooser/Details.svelte": "./chooser/Details.svelte",
+    "./chooser/Page.svelte": "./chooser/Page.svelte",
+    "./chooser/Thumbnail.svelte": "./chooser/Thumbnail.svelte",
+    "./chooser": "./chooser/index.js",
+    ".": "./index.js"
+  },
+  "svelte": "./index.js"
+}