@dosgato/dialog 0.0.1 → 0.0.4

package/FieldChooserLink.svelte

@@ -1,13 +1,12 @@
 <script  context="module">export {};
 </script>
 <script >import { FORM_CONTEXT } from '@txstate-mws/svelte-forms';
-import { getContext, setContext } from 'svelte';
+import { getContext } from 'svelte';
 import { randomid } from 'txstate-utils';
-import { Chooser, ChooserStore, ASSET_STORE_CONTEXT } from './chooser';
+import { Chooser, ChooserStore, CHOOSER_API_CONTEXT } from './chooser';
 import Details from './chooser/Details.svelte';
 import Thumbnail from './chooser/Thumbnail.svelte';
 import FieldStandard from './FieldStandard.svelte';
-import { ASSET_API_CONTEXT } from './Form.svelte';
 export let id = undefined;
 export let path;
 export let label = '';
@@ -24,7 +23,7 @@ export let initialSource = undefined;
 export let initialPath = undefined;
 const formStore = getContext(FORM_CONTEXT);
 const value = formStore.getField(path);
-const chooserClient = getContext(ASSET_API_CONTEXT);
+const chooserClient = getContext(CHOOSER_API_CONTEXT);
 const store = new ChooserStore(chooserClient);
 const descid = randomid();
 let modalshown = false;

package/FieldDualListbox.svelte

@@ -0,0 +1,118 @@
+<script >import menuRight from '@iconify-icons/mdi/menu-right.js';
+import menuLeft from '@iconify-icons/mdi/menu-left.js';
+import FieldStandard from './FieldStandard.svelte';
+import { ScreenReaderOnly, modifierKey } from '@txstate-mws/svelte-components';
+import Icon from './Icon.svelte';
+import Listbox from './Listbox.svelte';
+import { randomid } from 'txstate-utils';
+export let id = undefined;
+export let path;
+export let label = '';
+export let sourceLabel = 'Available';
+export let selectedLabel = 'Selected';
+export let multiselect = false;
+export let choices;
+export let defaultValue = [];
+export let conditional = undefined;
+export let required = false;
+let itemsToAdd = []; //the items selected in the left listbox
+let itemsToRemove = []; //the items selected in the right listbox
+let instructions = 'test';
+$: {
+    if (itemsToAdd.length === 1)
+        instructions = `Press right arrow key to move selected ${sourceLabel} items to ${selectedLabel} items list.`;
+    else
+        instructions = '';
+}
+$: {
+    if (itemsToRemove.length === 1)
+        instructions = `Press left arrow key to move selected ${selectedLabel} items to ${sourceLabel} list.`;
+    else
+        instructions = '';
+}
+const descid = randomid();
+function addToSelected(value, setVal) {
+    return () => {
+        const selected = value.concat(itemsToAdd.map(item => item.value));
+        itemsToAdd = [];
+        setVal(selected);
+    };
+}
+function addToAvailable(value, setVal) {
+    return () => {
+        const itemsToRemoveSet = new Set(itemsToRemove.map(i => i.value));
+        const selected = value.filter(v => !itemsToRemoveSet.has(v));
+        itemsToRemove = [];
+        setVal(selected);
+    };
+}
+let valueToLabel = {};
+for (const choice of choices) {
+    valueToLabel[choice.value] = choice.label || choice.value;
+}
+function valueToSelectedChoices(value) {
+    // keep the selected options ordered as they were in the available options
+    const valueSet = new Set(value);
+    const ret = [];
+    for (const choice of choices) {
+        if (valueSet.has(choice.value))
+            ret.push({ value: choice.value, label: choice.label || choice.value });
+    }
+    return ret;
+}
+function getAvailable(value) {
+    return choices.filter(choice => value.indexOf(choice.value) === -1);
+}
+function onkeydown(value, setVal) {
+    return (e) => {
+        if (modifierKey(e))
+            return;
+        if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            if (itemsToAdd.length === 0)
+                return;
+            addToSelected(value, setVal)();
+        }
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            if (itemsToRemove.length === 0)
+                return;
+            addToAvailable(value, setVal)();
+        }
+    };
+}
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {descid} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+  <div {id} role="group" class="dual-list-container" on:keydown={onkeydown(value, setVal)}>
+    <ScreenReaderOnly>
+      <span aria-live="polite">{instructions}</span>
+    </ScreenReaderOnly>
+    <Listbox label={sourceLabel} multiselect={multiselect} items={getAvailable(value)} {descid} {valid} {invalid} on:change={e => itemsToAdd = e.detail} selected={itemsToAdd} on:blur={onBlur}/>
+    <div class="toolbar">
+      <button type="button" class="toolbar-button" title="Move selection to {selectedLabel}" disabled={itemsToAdd.length === 0} on:click={addToSelected(value, setVal)}>
+        <Icon icon={menuRight} width='3em'/>
+      </button>
+      <button type="button" class="toolbar-button" title="Remove selection from {selectedLabel}" disabled={itemsToRemove.length === 0} on:click={addToAvailable(value, setVal)}>
+        <Icon icon={menuLeft} width='3em'/>
+      </button>
+    </div>
+    <Listbox label={selectedLabel} multiselect={multiselect} items={valueToSelectedChoices(value)} {descid} {valid} {invalid} on:change={e => itemsToRemove = e.detail} selected={itemsToRemove} on:blur={onBlur}/>
+  </div>
+</FieldStandard>
+
+<style>
+  .dual-list-container {
+    display: flex;
+  }
+  .toolbar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .toolbar .toolbar-button {
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+  }
+</style>

package/FieldDualListbox.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import { type PopupMenuItem } from '@txstate-mws/svelte-components';
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        sourceLabel?: string;
+        selectedLabel?: string;
+        multiselect?: boolean;
+        choices: PopupMenuItem[];
+        defaultValue?: string[];
+        conditional?: boolean | undefined;
+        required?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldDualListboxProps = typeof __propDef.props;
+export declare type FieldDualListboxEvents = typeof __propDef.events;
+export declare type FieldDualListboxSlots = typeof __propDef.slots;
+export default class FieldDualListbox extends SvelteComponentTyped<FieldDualListboxProps, FieldDualListboxEvents, FieldDualListboxSlots> {
+}
+export {};

package/FieldMultiple.svelte.d.ts

@@ -17,8 +17,8 @@ declare const __propDef: {
     slots: {
         default: {
             path: string;
-            index: any;
-            value: any;
+            index: number;
+            value: unknown;
             maxed: boolean;
             maxLength: number;
             currentLength: number;

package/FieldStandard.svelte.d.ts

@@ -21,7 +21,7 @@ declare const __propDef: {
             value: any;
             onBlur: () => void;
             onChange: (e?: any) => void;
-            setVal: (val: any) => void;
+            setVal: (val: string | number | boolean | object | Date) => void;
             valid: boolean;
             invalid: boolean;
             messagesid: any;

package/FileIcon.svelte

@@ -1,14 +1,14 @@
-<script  context="module">import archiveOutline from '@iconify/icons-mdi/archive-outline.js';
-import fileCodeOutline from '@iconify/icons-mdi/file-code-outline.js';
-import fileDocumentOutline from '@iconify/icons-mdi/file-document-outline.js';
-import fileMusicOutline from '@iconify/icons-mdi/file-music-outline.js';
-import fileOutline from '@iconify/icons-mdi/file-outline.js';
-import fileTableOutline from '@iconify/icons-mdi/file-table-outline.js';
-import fileVideoOutline from '@iconify/icons-mdi/file-video-outline.js';
-import fileImageOutline from '@iconify/icons-mdi/file-image-outline.js';
-import microsoftExcel from '@iconify/icons-mdi/microsoft-excel.js';
-import microsoftWord from '@iconify/icons-mdi/microsoft-word.js';
-import noteTextOutline from '@iconify/icons-mdi/note-text-outline.js';
+<script  context="module">import archiveOutline from '@iconify-icons/mdi/archive-outline.js';
+import fileCodeOutline from '@iconify-icons/mdi/file-code-outline.js';
+import fileDocumentOutline from '@iconify-icons/mdi/file-document-outline.js';
+import fileMusicOutline from '@iconify-icons/mdi/file-music-outline.js';
+import fileOutline from '@iconify-icons/mdi/file-outline.js';
+import fileTableOutline from '@iconify-icons/mdi/file-table-outline.js';
+import fileVideoOutline from '@iconify-icons/mdi/file-video-outline.js';
+import fileImageOutline from '@iconify-icons/mdi/file-image-outline.js';
+import microsoftExcel from '@iconify-icons/mdi/microsoft-excel.js';
+import microsoftWord from '@iconify-icons/mdi/microsoft-word.js';
+import noteTextOutline from '@iconify-icons/mdi/note-text-outline.js';
 const icons = {
     'application/vnd.ms-excel': microsoftExcel,
     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': microsoftExcel,

package/Form.svelte

@@ -1,32 +1,20 @@
-<script  context="module">export const ASSET_API_CONTEXT = {};
-</script>
 <script >import { Form, FormStore } from '@txstate-mws/svelte-forms';
-import { createEventDispatcher, setContext } from 'svelte';
+import { setContext } from 'svelte';
+import { CHOOSER_API_CONTEXT } from './chooser';
 let className = '';
 export { className as class };
 export let submit = undefined;
 export let validate = undefined;
-export let success = undefined;
 export let store = undefined;
 export let chooserClient = undefined;
 export let autocomplete = undefined;
 export let name = undefined;
 export let preload = undefined;
-setContext(ASSET_API_CONTEXT, chooserClient);
-const dispatch = createEventDispatcher();
-function onCancel() {
-    dispatch('close');
-}
+setContext(CHOOSER_API_CONTEXT, chooserClient);
 </script>
 
-<Form bind:store class="{className} dialog-form" {submit} {validate} {success} {autocomplete} {name} {preload} let:messages let:saved let:valid let:invalid let:validating let:submitting>
+<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:saved let:valid let:invalid let:validating let:submitting>
   <slot {messages} {saved} {validating} {submitting} {valid} {invalid} />
-  <div class="dialog-buttons">
-    <slot name="buttons" {onCancel}>
-      <button type="button" on:click={onCancel}>Cancel</button>
-      <button>Save</button>
-    </slot>
-  </div>
 </Form>
 
 <style>
@@ -36,21 +24,4 @@ function onCancel() {
   :global(.dialog-form) {
     padding: 0;
   }
-  :global(.dialog-form fieldset) {
-    border: 1px solid #666666;
-    border-width: 1px 0;
-    padding: 1em 0;
-    margin: 2em 0;
-  }
-  .dialog-buttons {
-    display: flex;
-    justify-content: flex-end;
-  }
-  .dialog-buttons > * {
-    margin-left: 1em;
-  }
-  .dialog-buttons :global(button) {
-    padding: 0.4em 0.8em;
-    min-width: 8em;
-  }
 </style>

package/Form.svelte.d.ts

@@ -1,9 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-export declare const ASSET_API_CONTEXT: {};
-declare const __propDef: any;
-export declare type FormProps = typeof __propDef.props;
-export declare type FormEvents = typeof __propDef.events;
-export declare type FormSlots = typeof __propDef.slots;
-export default class Form extends SvelteComponentTyped<FormProps, FormEvents, FormSlots> {
+declare class __sveltets_Render<T, F> {
+    props(): any;
+    events(): {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): any;
+}
+export declare type FormProps<T, F> = ReturnType<__sveltets_Render<T, F>['props']>;
+export declare type FormEvents<T, F> = ReturnType<__sveltets_Render<T, F>['events']>;
+export declare type FormSlots<T, F> = ReturnType<__sveltets_Render<T, F>['slots']>;
+export default class Form<T, F> extends SvelteComponentTyped<FormProps<T, F>, FormEvents<T, F>, FormSlots<T, F>> {
 }
 export {};

package/InlineMessage.svelte

@@ -1,7 +1,7 @@
-<script >import alertCircleOutline from '@iconify/icons-mdi/alert-circle-outline.js';
-import checkCircleOutline from '@iconify/icons-mdi/check-circle-outline.js';
-import informationOutline from '@iconify/icons-mdi/information-outline.js';
-import closeOctagonOutline from '@iconify/icons-mdi/close-octagon-outline.js';
+<script >import alertCircleOutline from '@iconify-icons/mdi/alert-circle-outline.js';
+import checkCircleOutline from '@iconify-icons/mdi/check-circle-outline.js';
+import informationOutline from '@iconify-icons/mdi/information-outline.js';
+import closeOctagonOutline from '@iconify-icons/mdi/close-octagon-outline.js';
 import Icon from './Icon.svelte';
 export let message;
 const icons = {

package/Listbox.svelte

@@ -0,0 +1,166 @@
+<script >import { createEventDispatcher } from 'svelte';
+import { modifierKey } from '@txstate-mws/svelte-components';
+import check from '@iconify-icons/mdi/check.js';
+import Icon from './Icon.svelte';
+const dispatch = createEventDispatcher();
+export let items = [];
+export let label;
+export let multiselect = false;
+export let selected = [];
+export let descid = undefined;
+export let valid = false;
+export let invalid = false;
+import { randomid } from 'txstate-utils';
+const listId = randomid();
+const labelId = randomid();
+let listboxElement;
+let hilited = undefined;
+let firstactive = 0;
+let lastactive = items.length - 1;
+const itemelements = [];
+$: selectedSet = new Set(selected.map(s => s.value));
+async function reactToItems(..._) {
+    firstactive = items.findIndex(itm => !itm.disabled);
+    lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled) - 1;
+    hilited = undefined;
+    if (listboxElement)
+        listboxElement.setAttribute('aria-activedescendant', null);
+}
+$: reactToItems(items);
+const selectItem = (item, index) => (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (item.disabled)
+        return;
+    listboxElement.setAttribute('aria-activedescendant', `${listId}-${index}`);
+    hilited = index;
+    if (multiselect) {
+        if (selectedSet.has(item.value)) {
+            // remove it from selected
+            selected = selected.filter(s => s.value !== item.value);
+        }
+        else {
+            selected = [...selected, item];
+        }
+    }
+    else {
+        selected = [item];
+    }
+    dispatch('change', selected);
+};
+function move(idx) {
+    if (items[idx]?.disabled)
+        return;
+    hilited = Math.max(firstactive, Math.min(lastactive, idx));
+    itemelements[hilited].scrollIntoView({ block: 'center' });
+    listboxElement.setAttribute('aria-activedescendant', `${listId}-${hilited}`);
+    if (!multiselect) {
+        selected = [items[hilited]];
+        dispatch('change', selected);
+    }
+}
+function onkeydown(e) {
+    if (modifierKey(e))
+        return;
+    if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (items.length < 1)
+            return;
+        let i = (hilited ?? firstactive - 1) + 1;
+        while (items[i]?.disabled)
+            i++;
+        move(i);
+    }
+    else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (items.length < 1)
+            return;
+        let i = (hilited ?? lastactive + 1) - 1;
+        while (items[i]?.disabled)
+            i--;
+        move(i);
+    }
+    else if (e.key === ' ') {
+        e.preventDefault();
+        if (items.length < 1)
+            return;
+        if (multiselect) {
+            if (typeof hilited !== 'undefined') {
+                if (selectedSet.has(items[hilited].value)) {
+                    // remove it from selected
+                    selected = selected.filter(s => s.value !== items[hilited].value);
+                }
+                else {
+                    selected = [...selected, items[hilited]];
+                }
+                dispatch('change', selected);
+            }
+        }
+    }
+}
+function focusListbox() {
+    if (selected.length) {
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].value === selected[0].value) {
+                hilited = i;
+                listboxElement.setAttribute('aria-activedescendant', `${listId}-${hilited}`);
+            }
+        }
+    }
+    else {
+        hilited = firstactive;
+        listboxElement.setAttribute('aria-activedescendant', `${listId}-${hilited}`);
+        if (!multiselect) {
+            selected = [items[hilited]];
+            dispatch('change', selected);
+        }
+    }
+}
+</script>
+
+<div class="listbox-container" class:valid class:invalid>
+  <span id={labelId}>{label}</span>
+  <ul bind:this={listboxElement} role="listbox" id={listId} class="listbox-items" tabindex="0" aria-describedby={descid} aria-labelledby={labelId} aria-multiselectable={multiselect} on:keydown={onkeydown} on:focus={focusListbox}>
+    {#each items as item, i (item.value)}
+      <li
+        bind:this={itemelements[i]}
+        id={`${listId}-${i}`}
+        role="option"
+        class="listbox-item"
+        class:hilited={hilited === i}
+        class:disabled={!!item.disabled}
+        aria-selected={selectedSet.has(item.value)}
+        aria-disabled={item.disabled}
+        on:click={selectItem(item, i)}
+        >
+        <span class:invisible={!multiselect || !selectedSet.has(item.value)}><Icon icon={check} width='0.8em'/></span>
+        {item.label || item.value}
+    </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  .listbox-container {
+    width: 25%;
+  }
+  .listbox-items {
+    list-style: none;
+    padding-left: 0;
+    border: 1px solid #666;
+    height: 40vh;
+    overflow-y: scroll;
+  }
+  .listbox-item {
+    padding: 0.2em;
+  }
+  .listbox-item span.invisible {
+    visibility: hidden;
+  }
+  .listbox-item.hilited {
+    background-color: lightcyan;
+  }
+  .listbox-item.disabled {
+    color: rgba(0,0,0,0.6);
+  }
+</style>

package/Listbox.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import { type PopupMenuItem } from '@txstate-mws/svelte-components';
+declare const __propDef: {
+    props: {
+        items?: PopupMenuItem[];
+        label: string;
+        multiselect?: boolean;
+        selected?: {
+            value: string;
+            label?: string;
+        }[];
+        descid?: string | undefined;
+        valid?: boolean;
+        invalid?: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ListboxProps = typeof __propDef.props;
+export declare type ListboxEvents = typeof __propDef.events;
+export declare type ListboxSlots = typeof __propDef.slots;
+export default class Listbox extends SvelteComponentTyped<ListboxProps, ListboxEvents, ListboxSlots> {
+}
+export {};

package/chooser/Asset.svelte

@@ -1,7 +1,7 @@
 <script >import { modifierKey } from '@txstate-mws/svelte-components';
 import { createEventDispatcher, getContext } from 'svelte';
 import { hashid } from 'txstate-utils';
-import { ASSET_STORE_CONTEXT } from './ChooserStore';
+import { CHOOSER_STORE_CONTEXT } from './ChooserStore';
 import FileIcon from '../FileIcon.svelte';
 export let asset;
 export let level;
@@ -10,7 +10,7 @@ export let setsize;
 export let next;
 export let prev;
 export let parent = undefined;
-const store = getContext(ASSET_STORE_CONTEXT);
+const store = getContext(CHOOSER_STORE_CONTEXT);
 $: id = hashid(asset.id);
 $: haveFocus = $store?.focus === asset.id;
 $: isPreview = $store.preview?.id === asset.id;
@@ -19,12 +19,7 @@ function onKeyDown(e) {
     if (modifierKey(e))
         return;
     if (['Enter', ' '].includes(e.key)) {
-        e.preventDefault();
-        e.stopPropagation();
-        if ($store.preview?.id === asset.id)
-            dispatch('choose', asset);
-        else
-            store.preview(asset);
+        onClick(e);
     }
     else if (e.key === 'ArrowDown') {
         e.preventDefault();
@@ -53,6 +48,16 @@ function onKeyDown(e) {
         }
     }
 }
+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
@@ -65,7 +70,7 @@ function onKeyDown(e) {
   class="dialog-asset-file"
   class:isPreview
   on:keydown={onKeyDown}
-  on:click={() => store.preview(asset)}
+  on:click={onClick}
 >
   <FileIcon mime={asset.mime} inline /> {asset.name}
 </li>

package/chooser/AssetFolder.svelte

@@ -1,10 +1,10 @@
-<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';
+<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 { ASSET_STORE_CONTEXT } from './ChooserStore';
+import { CHOOSER_STORE_CONTEXT } from './ChooserStore';
 import Asset from './Asset.svelte';
 import Icon from '../Icon.svelte';
 export let folder;
@@ -14,7 +14,7 @@ export let setsize;
 export let next;
 export let prev;
 export let parent = undefined;
-const store = getContext(ASSET_STORE_CONTEXT);
+const store = getContext(CHOOSER_STORE_CONTEXT);
 $: open = folder.open && folder.children?.length;
 $: nextlevel = level + 1;
 $: id = hashid(folder.id);
@@ -26,10 +26,6 @@ function onKeyDown(e) {
         return;
     if (['Enter', ' '].includes(e.key)) {
         onClick(e);
-        if ($store.preview?.id === folder.id)
-            dispatch('choose', folder);
-        else
-            store.preview(folder);
     }
     else if (e.key === 'ArrowRight') {
         e.preventDefault();
@@ -77,8 +73,14 @@ function onKeyDown(e) {
 function onClick(e) {
     e.preventDefault();
     e.stopPropagation();
-    store.preview(folder);
-    store.toggle(folder);
+    // 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>
 

package/chooser/Chooser.svelte

@@ -1,5 +1,5 @@
-<script >import fileTree from '@iconify/icons-mdi/file-tree.js';
-import viewGrid from '@iconify/icons-mdi/view-grid.js';
+<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';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
@@ -7,13 +7,13 @@ import { hashid, randomid } from 'txstate-utils';
 import Asset from './Asset.svelte';
 import AssetFolder from './AssetFolder.svelte';
 import ButtonGroup from '../ButtonGroup.svelte';
-import { ASSET_STORE_CONTEXT, ChooserStore } from './ChooserStore';
+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';
-import { ASSET_API_CONTEXT } from '../Form.svelte';
-const chooserClient = getContext(ASSET_API_CONTEXT);
+const chooserClient = getContext(CHOOSER_API_CONTEXT);
 export let label = undefined;
 export let images = false;
 export let pages = false;
@@ -23,8 +23,10 @@ export let initialType = undefined;
 export let initialSource = undefined;
 export let initialPath = undefined;
 export let activeSources = undefined;
+export let passthruFilters = undefined;
+export let filter = undefined;
 export let store = new ChooserStore(chooserClient);
-setContext(ASSET_STORE_CONTEXT, store);
+setContext(CHOOSER_STORE_CONTEXT, store);
 $: if (!pages && !assets)
     assets = true;
 $: activeTypes = [...(assets ? ['asset'] : []), ...(pages ? ['page'] : [])];
@@ -38,7 +40,7 @@ function onChoose() {
     dispatch('change', $store.preview);
 }
 onMount(async () => {
-    await store.init({ activeTypes, activeSources, initialType, initialSource, initialPath, onlyImages: images, chooseFolder: folders });
+    await store.init({ activeTypes, activeSources, initialType, initialSource, initialPath, passthruFilters, filter, onlyImages: images, chooseFolder: folders });
     if ($store.focus)
         document.getElementById(hashid($store.focus))?.scrollIntoView();
 });
@@ -55,7 +57,7 @@ onMount(async () => {
           <div class="dialog-chooser-source">
             <select on:change={function () { store.changeSource(Number(this.value)) }}>
               {#each $sources as source, i}
-                <option value={i}>{source.name}</option>
+                <option value={i}>{source.label || source.name}</option>
               {/each}
             </select>
           </div>

package/chooser/Chooser.svelte.d.ts

@@ -1,30 +1,32 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ChooserType } from './ChooserAPI';
+import { type AnyItem, type ChooserType } from './ChooserAPI';
 import { ChooserStore } from './ChooserStore';
-declare const __propDef: {
-    props: {
-        label?: string | undefined;
+declare class __sveltets_Render<F> {
+    props(): {
+        label?: string;
         images?: boolean;
         pages?: boolean;
         assets?: boolean;
         folders?: boolean;
-        initialType?: ChooserType | undefined;
-        initialSource?: string | undefined;
-        initialPath?: string | undefined;
-        activeSources?: string[] | undefined;
-        store?: ChooserStore;
+        initialType?: ChooserType;
+        initialSource?: string;
+        initialPath?: string;
+        activeSources?: string[];
+        passthruFilters?: F;
+        filter?: (item: AnyItem) => boolean | Promise<boolean>;
+        store?: ChooserStore<F>;
     };
-    events: {
+    events(): {
         escape: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export declare type ChooserProps = typeof __propDef.props;
-export declare type ChooserEvents = typeof __propDef.events;
-export declare type ChooserSlots = typeof __propDef.slots;
-export default class Chooser extends SvelteComponentTyped<ChooserProps, ChooserEvents, ChooserSlots> {
+    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 default class Chooser<F> extends SvelteComponentTyped<ChooserProps<F>, ChooserEvents<F>, ChooserSlots<F>> {
 }
 export {};

package/chooser/ChooserAPI.d.ts

@@ -1,9 +1,10 @@
+export declare const CHOOSER_API_CONTEXT: {};
 export declare type ChooserType = 'asset' | 'page';
 export declare type AnyItem = Asset | Folder | Page;
-export interface Client {
+export interface Client<F = any> {
     getSources: (type: ChooserType) => Promise<Source[]>;
-    getChildren: (source: string, path: string, filter: (assetOrFolder: AnyItem) => boolean | Promise<boolean>) => Promise<(AnyItem)[]>;
-    find: (source: string, path: string, searchstring: string, filter: (asset: AnyItem) => boolean | Promise<boolean>) => Promise<(AnyItem)[]>;
+    getChildren: (source: string, path: string, filters: F) => Promise<(AnyItem)[]>;
+    find: (source: string, path: string, searchstring: string, filters: F) => Promise<(AnyItem)[]>;
     findById: (id: string) => Promise<AnyItem>;
     findByUrl?: (url: string) => Promise<AnyItem>;
     urlToValue?: (url: string) => string;
@@ -12,6 +13,7 @@ export interface Client {
 export interface Source {
     type: ChooserType;
     name: string;
+    label?: string;
     rootAcceptsUpload?: boolean;
 }
 interface Item {

package/chooser/ChooserAPI.js

@@ -1 +1 @@
-export {};
+export const CHOOSER_API_CONTEXT = {};

package/chooser/ChooserStore.d.ts

@@ -32,8 +32,9 @@ export interface IAssetStore {
     focus?: string;
     focusPath?: string;
 }
-export interface ChooserStoreOptions {
+export interface ChooserStoreOptions<F> {
     filter?: (itm: AnyItem) => boolean | Promise<boolean>;
+    passthruFilters?: F;
     activeTypes?: ChooserType[];
     activeSources?: string[];
     initialType?: ChooserType;
@@ -42,20 +43,20 @@ export interface ChooserStoreOptions {
     chooseFolder?: boolean;
     onlyImages?: boolean;
 }
-interface InternalStoreOptions extends Omit<ChooserStoreOptions, 'activeSources'> {
+interface InternalStoreOptions<F> extends Omit<ChooserStoreOptions<F>, 'activeSources'> {
     activeSources?: Set<string>;
 }
-export declare const ASSET_STORE_CONTEXT: {};
+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 extends SafeStore<IAssetStore> {
+export declare class ChooserStore<F = any> extends SafeStore<IAssetStore> {
     client: Client;
-    options: InternalStoreOptions;
+    options: InternalStoreOptions<F>;
     constructor(client: Client);
-    setOptions(options: ChooserStoreOptions): void;
+    setOptions(options: ChooserStoreOptions<F>): void;
     getSource(state?: IAssetStore): UISource;
     getSourceIndex(name: string, state?: IAssetStore, type?: ChooserType): number;
-    init(options: ChooserStoreOptions): Promise<void>;
+    init(options: ChooserStoreOptions<F>): Promise<void>;
     itemByPath(state: IAssetStore, path: string): AnyUIItem;
     open(folder: UIFolder | UIPage): Promise<void>;
     openPath(path: string): Promise<void>;

package/chooser/ChooserStore.js

@@ -1,6 +1,6 @@
 import { SafeStore } from '@txstate-mws/svelte-store';
-import { findIndex, isNotBlank } from 'txstate-utils';
-export const ASSET_STORE_CONTEXT = {};
+import { filterAsync, findIndex, isNotBlank } from 'txstate-utils';
+export const CHOOSER_STORE_CONTEXT = {};
 const nofilter = (x) => true;
 export function combinePath(path, name) {
     if (path.endsWith('/'))
@@ -88,7 +88,7 @@ export class ChooserStore extends SafeStore {
             return v;
         });
         try {
-            const children = await this.client.getChildren(this.getSource().name, path, this.options.filter);
+            const children = await filterAsync(await this.client.getChildren(this.getSource().name, path, this.options.passthruFilters), this.options.filter);
             this.update(v => {
                 const folder = this.itemByPath(v, path);
                 folder.open = true;
@@ -110,13 +110,13 @@ export class ChooserStore extends SafeStore {
         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);
+            source.children = await filterAsync(await this.client.getChildren(source.name, '/', this.options.passthruFilters), 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.children = await filterAsync(await this.client.getChildren(source.name, combinePath(current.path, current.name), this.options.passthruFilters), this.options.filter);
                 current.loading = false;
                 current.open = true;
             }
@@ -175,7 +175,7 @@ export class ChooserStore extends SafeStore {
             return v;
         });
         const source = this.getSource();
-        const children = await this.client.getChildren(source.name, '/', this.options.filter);
+        const children = await filterAsync(await this.client.getChildren(source.name, '/', this.options.passthruFilters), this.options.filter);
         this.update(v => {
             const source = this.getSource(v);
             source.children = children;

package/chooser/Page.svelte

@@ -1,9 +1,9 @@
-<script >import fileOutline from '@iconify/icons-mdi/file-outline.js';
-import fileSyncOutline from '@iconify/icons-mdi/file-sync-outline.js';
+<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 { CHOOSER_STORE_CONTEXT } from './ChooserStore';
 import Icon from '../Icon.svelte';
 export let page;
 export let level;
@@ -12,7 +12,7 @@ export let setsize;
 export let next;
 export let prev;
 export let parent = undefined;
-const store = getContext(ASSET_STORE_CONTEXT);
+const store = getContext(CHOOSER_STORE_CONTEXT);
 $: open = page.open && page.children?.length;
 $: nextlevel = level + 1;
 $: id = hashid(page.id);
@@ -24,10 +24,6 @@ function onKeyDown(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();
@@ -75,8 +71,14 @@ function onKeyDown(e) {
 function onClick(e) {
     e.preventDefault();
     e.stopPropagation();
-    store.preview(page);
-    store.toggle(page);
+    // 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>
 

package/chooser/Thumbnail.svelte

@@ -1,5 +1,5 @@
-<script >import folderOutline from '@iconify/icons-mdi/folder-outline.js';
-import fileLinkOutline from '@iconify/icons-mdi/file-link-outline.js';
+<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;

package/index.d.ts

@@ -5,6 +5,7 @@ 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 FieldDualListbox } from './FieldDualListbox.svelte';
 export { default as FieldMultiple } from './FieldMultiple.svelte';
 export { default as FieldMultiselect } from './FieldMultiselect.svelte';
 export { default as FieldNumber } from './FieldNumber.svelte';
@@ -20,5 +21,6 @@ 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 { default as Listbox } from './Listbox.svelte';
 export * from './chooser/index.js';
 export * from './TabStore.js';

package/index.js

@@ -5,6 +5,7 @@ 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 FieldDualListbox } from './FieldDualListbox.svelte';
 export { default as FieldMultiple } from './FieldMultiple.svelte';
 export { default as FieldMultiselect } from './FieldMultiselect.svelte';
 export { default as FieldNumber } from './FieldNumber.svelte';
@@ -20,5 +21,6 @@ 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 { default as Listbox } from './Listbox.svelte';
 export * from './chooser/index.js';
 export * from './TabStore.js';

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dosgato/dialog",
-  "version": "0.0.1",
+  "description": "A component library for building forms that edit a JSON document.",
+  "version": "0.0.4",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.2.5",
-    "@txstate-mws/svelte-forms": "^0.0.14",
+    "@txstate-mws/svelte-forms": "^0.0.15",
     "@iconify/svelte": "^2.1.1",
-    "@iconify/icons-mdi": "^1.1.42",
+    "@iconify-icons/mdi": "^1.2.6",
     "txstate-utils": "^1.6.6"
   },
   "devDependencies": {
@@ -31,6 +32,7 @@
     "./FieldChooserLink.svelte": "./FieldChooserLink.svelte",
     "./FieldDate.svelte": "./FieldDate.svelte",
     "./FieldDateTime.svelte": "./FieldDateTime.svelte",
+    "./FieldDualListbox.svelte": "./FieldDualListbox.svelte",
     "./FieldMultiple.svelte": "./FieldMultiple.svelte",
     "./FieldMultiselect.svelte": "./FieldMultiselect.svelte",
     "./FieldNumber.svelte": "./FieldNumber.svelte",
@@ -44,6 +46,7 @@
     "./InlineMessage.svelte": "./InlineMessage.svelte",
     "./InlineMessages.svelte": "./InlineMessages.svelte",
     "./Input.svelte": "./Input.svelte",
+    "./Listbox.svelte": "./Listbox.svelte",
     "./Radio.svelte": "./Radio.svelte",
     "./Tab.svelte": "./Tab.svelte",
     "./TabStore": "./TabStore.js",