@dosgato/dialog 0.0.20 → 0.0.22

package/chooser/AssetFolder.svelte

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

package/chooser/AssetFolder.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { UIFolder, AnyUIItem } from './ChooserStore';
-declare const __propDef: {
-    props: {
-        folder: UIFolder;
-        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 AssetFolderProps = typeof __propDef.props;
-export declare type AssetFolderEvents = typeof __propDef.events;
-export declare type AssetFolderSlots = typeof __propDef.slots;
-export default class AssetFolder extends SvelteComponentTyped<AssetFolderProps, AssetFolderEvents, AssetFolderSlots> {
-}
-export {};

package/chooser/Page.svelte

@@ -1,121 +0,0 @@
-<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 { CHOOSER_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(CHOOSER_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);
-    }
-    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();
-    // 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 === page.id)
-        dispatch('choose', page);
-    else {
-        store.preview(page);
-        store.toggle(page);
-    }
-}
-</script>
-
-<li
-  {id}
-  role="treeitem"
-  class:isPreview
-  aria-expanded={!!page.open}
-  aria-selected={isPreview}
-  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

@@ -1,25 +0,0 @@
-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 {};