@dosgato/dialog 0.0.6 → 0.0.9

package/Container.svelte

@@ -83,4 +83,8 @@ let messagesid;
     background-color: var(--dialog-field-bg2, #ffffff);
     color: var(--dialog-field-text2, inherit);
   }
+  .dialog-field-container :global(.field-help-text) {
+    font-size: 0.9em;
+    color: #595959;
+  }
 </style>

package/FieldAutocomplete.svelte

@@ -0,0 +1,62 @@
+<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+import FieldStandard from './FieldStandard.svelte';
+import { randomid } from 'txstate-utils';
+import { PopupMenu, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+export let id = undefined;
+export let path;
+export let label = '';
+export let placeholder = 'Select' + (label ? ' ' + label : '');
+let className = '';
+export { className as class };
+export let notNull = false;
+export let disabled = false;
+export let choices;
+export let defaultValue = notNull ? choices[0].value : undefined;
+export let conditional = undefined;
+export let required = false;
+export let helptext = '';
+let inputelement;
+let inputvalue = '';
+let popupvalue = undefined;
+let savedLabel = '';
+let changed = false;
+if (defaultValue) {
+    const selected = choices.find(c => c.value === defaultValue);
+    inputvalue = selected.label || selected.value;
+    savedLabel = inputvalue;
+}
+const listId = randomid();
+const liveTextId = randomid();
+const helpTextId = randomid();
+$: filteredChoices = changed
+    ? choices.filter((item) => {
+        return item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase());
+    })
+    : choices;
+function onchangepopup(setVal) {
+    return (e) => {
+        inputvalue = e.detail.label || e.detail.value;
+        savedLabel = inputvalue;
+        popupvalue = undefined;
+        setVal(e.detail.value);
+        changed = false;
+    };
+}
+async function checkifchanged(e) {
+    await setTimeout(function () {
+        if (inputelement.value !== savedLabel)
+            changed = true;
+    }, 1);
+}
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:setVal let:valid let:invalid let:id let:onBlur let:onChange>
+  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} {onBlur} {onChange} aria-owns={listId} autocapitalize="none" type="text" autocomplete="off"  aria-autocomplete="list" role="combobox" aria-expanded="false" {disabled} aria-describedby={helptext.length ? helpTextId : ''} on:keydown={checkifchanged}>
+  <PopupMenu align="bottomleft" items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
+  {#if helptext.length}
+    <span id={helpTextId} class="field-help-text">{helptext}</span>
+  {/if}
+  <ScreenReaderOnly arialive="polite" ariaatomic={true} id={liveTextId}>
+    {filteredChoices.length} {filteredChoices.length === 1 ? 'option' : 'options'} available.
+  </ScreenReaderOnly>
+</FieldStandard>

package/FieldAutocomplete.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        placeholder?: string;
+        class?: string;
+        notNull?: boolean;
+        disabled?: boolean;
+        choices: {
+            label?: string;
+            value: string;
+            disabled?: boolean;
+        }[];
+        defaultValue?: any;
+        conditional?: boolean | undefined;
+        required?: boolean;
+        helptext?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldAutocompleteProps = typeof __propDef.props;
+export declare type FieldAutocompleteEvents = typeof __propDef.events;
+export declare type FieldAutocompleteSlots = typeof __propDef.slots;
+export default class FieldAutocomplete extends SvelteComponentTyped<FieldAutocompleteProps, FieldAutocompleteEvents, FieldAutocompleteSlots> {
+}
+export {};

package/FieldSelect.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         disabled?: boolean;
         choices: {
             label?: string;
-            value: any;
+            value: string;
             disabled?: boolean;
         }[];
         defaultValue?: any;

package/FileIcon.svelte

@@ -1,56 +1,12 @@
-<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,
-    'application/vnd.oasis.opendocument.spreadsheet': microsoftExcel,
-    'text/csv': fileTableOutline,
-    'application/msword': microsoftWord,
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': microsoftWord,
-    'application/vnd.oasis.opendocument.text': microsoftWord,
-    'application/rtf': microsoftWord,
-    'application/pdf': fileDocumentOutline,
-    'application/json': fileCodeOutline,
-    'application/x-httpd-php': fileCodeOutline,
-    'application/x-sh': fileCodeOutline,
-    'application/xml': fileCodeOutline,
-    'text/css': fileCodeOutline,
-    'text/html': fileCodeOutline,
-    'text/javascript': fileCodeOutline,
-    'application/gzip': archiveOutline,
-    'application/java-archive': archiveOutline,
-    'application/zip': archiveOutline,
-    'application/vnd.apple.installer+xml': archiveOutline,
-    'application/vnd.rar': archiveOutline,
-    'application/x-7z-compressed': archiveOutline,
-    'application/x-bzip': archiveOutline,
-    'application/x-bzip2': archiveOutline,
-    'application/x-tar': archiveOutline
-};
-const prefixes = {
-    image: fileImageOutline,
-    text: noteTextOutline,
-    video: fileVideoOutline,
-    audio: fileMusicOutline
-};
-</script>
 <script>import Icon from './Icon.svelte';
+import { iconForMime } from './fileIcons';
 export let mime;
 export let hiddenLabel = undefined;
 export let inline = false;
 export let width = '1em';
 export let height = width;
 export let vAlign = 'middle';
-$: icon = icons[mime] ?? prefixes[mime.split('/', 2)[0]] ?? fileOutline;
+$: icon = iconForMime(mime);
 </script>
 
 <Icon {icon} {hiddenLabel} {inline} {width} {height} {vAlign} />

package/chooser/ChooserAPI.d.ts

@@ -3,10 +3,10 @@ export declare type ChooserType = 'asset' | 'page';
 export declare type AnyItem = Asset | Folder | Page;
 export interface Client<F = any> {
     getSources: (type: ChooserType) => Promise<Source[]>;
-    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>;
+    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 | undefined>;
+    findByUrl?: (url: string) => Promise<AnyItem | undefined>;
     urlToValue?: (url: string) => string;
     upload: (source: string, path: string, files: FileList) => Promise<void>;
 }

package/chooser/ChooserStore.js

@@ -58,7 +58,7 @@ export class ChooserStore extends SafeStore {
             });
         }
         if (this.value.preview)
-            await this.openPathRecursive(combinePath(this.value.preview.path, this.value.preview.name));
+            await this.openPathRecursive(this.value.preview.path);
         else if (this.options.initialPath)
             await this.openPathRecursive(this.options.initialPath);
         else
@@ -77,7 +77,7 @@ export class ChooserStore extends SafeStore {
         return item;
     }
     async open(folder) {
-        return await this.openPath(combinePath(folder.path, folder.name));
+        return await this.openPath(folder.path);
     }
     async openPath(path) {
         const folder = this.itemByPath(this.value, path);
@@ -118,7 +118,7 @@ export class ChooserStore extends SafeStore {
             if (!current || current.type === 'asset')
                 break;
             if (!current.open) {
-                current.children = await filterAsync(await this.client.getChildren(source.name, combinePath(current.path, current.name), this.options.passthruFilters), this.options.filter);
+                current.children = await filterAsync(await this.client.getChildren(source.name, current.path, this.options.passthruFilters), this.options.filter);
                 current.loading = false;
                 current.open = true;
             }
@@ -132,12 +132,12 @@ export class ChooserStore extends SafeStore {
             if (!current)
                 return v;
             v.focus = current.id;
-            v.focusPath = combinePath(current.path, current.name);
+            v.focusPath = current.path;
             return v;
         });
     }
     async close(folder) {
-        return await this.closePath(combinePath(folder.path, folder.name));
+        return await this.closePath(folder.path);
     }
     async closePath(path) {
         this.update(v => {
@@ -158,7 +158,7 @@ export class ChooserStore extends SafeStore {
             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) }));
+        this.update(v => ({ ...v, preview: item, focus: item.id, focusPath: item.path }));
     }
     clearPreview() {
         this.update(v => ({ ...v, preview: undefined }));
@@ -172,7 +172,7 @@ export class ChooserStore extends SafeStore {
             if (source.children?.length) {
                 const firstchild = source.children[0];
                 v.focus = firstchild.id;
-                v.focusPath = combinePath(firstchild.path, firstchild.name);
+                v.focusPath = firstchild.path;
             }
             return v;
         });
@@ -182,7 +182,7 @@ export class ChooserStore extends SafeStore {
             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;
+            v.focusPath = children[0] ? children[0]?.path : undefined;
             return v;
         });
     }
@@ -195,7 +195,7 @@ export class ChooserStore extends SafeStore {
             return;
         this.update(v => {
             v.focus = itm.id;
-            v.focusPath = combinePath(itm.path, itm.name);
+            v.focusPath = itm.path;
             return v;
         });
     }

package/chooser/Details.svelte

@@ -1,4 +1,4 @@
-<script>import { bytesToHuman, combinePath } from './ChooserStore';
+<script>import { bytesToHuman } from './ChooserStore';
 export let item;
 </script>
 
@@ -11,7 +11,7 @@ export let item;
   {:else if item.type === 'page'}
     <li>{item.title}</li>
   {:else if item.type === 'folder'}
-    <li>{combinePath(item.path, item.name)}</li>
+    <li>{item.path}</li>
   {/if}
   {#if item.type === 'asset'}
     <li>{item.mime}</li>

package/fileIcons.d.ts

@@ -0,0 +1 @@
+export declare function iconForMime(mime: string): import("@iconify/types").IconifyIcon;

package/fileIcons.js

@@ -0,0 +1,47 @@
+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 fileIconsByMime = {
+    'application/vnd.ms-excel': microsoftExcel,
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': microsoftExcel,
+    'application/vnd.oasis.opendocument.spreadsheet': microsoftExcel,
+    'text/csv': fileTableOutline,
+    'application/msword': microsoftWord,
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': microsoftWord,
+    'application/vnd.oasis.opendocument.text': microsoftWord,
+    'application/rtf': microsoftWord,
+    'application/pdf': fileDocumentOutline,
+    'application/json': fileCodeOutline,
+    'application/x-httpd-php': fileCodeOutline,
+    'application/x-sh': fileCodeOutline,
+    'application/xml': fileCodeOutline,
+    'text/css': fileCodeOutline,
+    'text/html': fileCodeOutline,
+    'text/javascript': fileCodeOutline,
+    'application/gzip': archiveOutline,
+    'application/java-archive': archiveOutline,
+    'application/zip': archiveOutline,
+    'application/vnd.apple.installer+xml': archiveOutline,
+    'application/vnd.rar': archiveOutline,
+    'application/x-7z-compressed': archiveOutline,
+    'application/x-bzip': archiveOutline,
+    'application/x-bzip2': archiveOutline,
+    'application/x-tar': archiveOutline
+};
+const prefixes = {
+    image: fileImageOutline,
+    text: noteTextOutline,
+    video: fileVideoOutline,
+    audio: fileMusicOutline
+};
+export function iconForMime(mime) {
+    return fileIconsByMime[mime] ?? prefixes[mime.split('/', 2)[0]] ?? fileOutline;
+}

package/iconpicker/FieldIconPicker.svelte

@@ -0,0 +1,256 @@
+<script>import FieldStandard from '../FieldStandard.svelte';
+import { ScreenReaderOnly, Modal, modifierKey } from '@txstate-mws/svelte-components';
+import { FontAwesomeIcons, IconCategories } from './iconpicker';
+import Icon from '@iconify/svelte';
+import { randomid, keyby } from 'txstate-utils';
+export let id = undefined;
+export let path;
+export let label = '';
+export let required = false;
+export let defaultValue = { icon: 'fa-graduation-cap', prefix: 'fas' };
+export let conditional = undefined;
+const labelid = randomid();
+const descid = randomid();
+let modalOpen = false;
+let selected = defaultValue;
+const iconToPrefix = {};
+const categoriesToIcons = keyby(IconCategories, 'key');
+for (const icon of FontAwesomeIcons) {
+    iconToPrefix[icon.class] = icon.free.indexOf('brands') > -1 ? 'fab' : 'fas';
+}
+const iconElements = [];
+let visibleIcons = FontAwesomeIcons;
+let searchVal = '';
+let category = 'all';
+$: iconCountMessage = visibleIcons.length === FontAwesomeIcons.length ? 'Showing all icons' : `Showing ${visibleIcons.length} icons`;
+function onSelectIcon(iconClass) {
+    selected = { icon: iconClass, prefix: iconToPrefix[iconClass] };
+}
+function onSaveIconSelection(setVal) {
+    return function () {
+        setVal(selected);
+        category = 'all';
+        searchVal = '';
+        visibleIcons = FontAwesomeIcons;
+        modalOpen = false;
+    };
+}
+function onCancel(val) {
+    return function () {
+        selected = val;
+        category = 'all';
+        searchVal = '';
+        visibleIcons = FontAwesomeIcons;
+        modalOpen = false;
+    };
+}
+function onSearch() {
+    visibleIcons = FontAwesomeIcons.filter(i => {
+        if (i.class.includes(searchVal))
+            return true;
+        for (const term of i.search.terms) {
+            if (term.includes(searchVal))
+                return true;
+        }
+        return false;
+    });
+    if (visibleIcons.findIndex(i => i.class === selected.icon) < 0) {
+        onSelectIcon(visibleIcons[0].class);
+    }
+}
+function onSelectCategory() {
+    if (category === 'all') {
+        visibleIcons = FontAwesomeIcons;
+    }
+    else {
+        visibleIcons = FontAwesomeIcons.filter(i => {
+            return categoriesToIcons[category].icons.includes(i.class);
+        });
+    }
+    if (visibleIcons.findIndex(i => i.class === selected.icon) < 0) {
+        onSelectIcon(visibleIcons[0].class);
+    }
+}
+function onKeyDown(e) {
+    const currentSelectionIndex = visibleIcons.findIndex(i => i.class === selected.icon);
+    let newIndex;
+    if (modifierKey(e))
+        return;
+    else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (currentSelectionIndex === visibleIcons.length - 1) {
+            newIndex = 0;
+        }
+        else {
+            newIndex = currentSelectionIndex + 1;
+        }
+        onSelectIcon(visibleIcons[newIndex].class);
+        iconElements[newIndex].focus();
+    }
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (currentSelectionIndex === 0) {
+            newIndex = visibleIcons.length - 1;
+        }
+        else {
+            newIndex = currentSelectionIndex - 1;
+        }
+        onSelectIcon(visibleIcons[newIndex].class);
+        iconElements[newIndex].focus();
+    }
+}
+</script>
+
+<FieldStandard bind:id {path} {label} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+  <Icon icon={`${value.prefix === 'fab' ? 'fa-brands' : 'fa-solid'}:${value.icon.slice(3)}`}/>
+  <button id="btnSelectIcon" on:click={() => { modalOpen = true }}>Select New Icon</button>
+  {#if modalOpen}
+  <Modal>
+    <section>
+      <header id={labelid}>
+        Select Icon
+      </header>
+      <div id={descid} class="content">
+        <div class="icon-modal-content">
+          <div class="filters">
+            <div class="search-wrapper">
+              <input bind:value={searchVal} id="search_for" placeholder="Search Icons" on:keyup={onSearch}/>
+              <label for="search_for" class="fa fa-search" rel="tooltip" title="search"></label>
+            </div>
+            <select bind:value={category} class="icon-category" aria-label="Select Category" on:change={onSelectCategory}>
+              <option value="all">All</option>
+              {#each IconCategories as category (category.key)}
+                <option value={category.key}>{category.label}</option>
+              {/each}
+            </select>
+          </div>
+          <fieldset tabindex="0">
+            <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
+            <div class="icon-picker-items" role="radiogroup" on:keydown={onKeyDown}>
+              {#each visibleIcons as icon, idx (icon.class)}
+                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}>
+                  <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa-brands' : 'fa-solid'}:${icon.class.slice(3)}`}/>
+                  <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
+                </div>
+              {:else}
+                <div id="no-icons">No Icons Found</div>
+              {/each}
+            </div>
+            <ScreenReaderOnly arialive="polite">{iconCountMessage}</ScreenReaderOnly>
+          </fieldset>
+        </div>
+      </div>
+      <footer class="actions">
+        <button aria-describedby="{labelid} {descid}" on:click={onCancel(value)}>Cancel</button>
+        <button aria-describedby="{labelid} {descid}" on:click={onSaveIconSelection(setVal)}>Save Changes</button>
+      </footer>
+    </section>
+  </Modal>
+{/if}
+</FieldStandard>
+
+
+<style>
+  section {
+    position: relative;
+    background-color: #f4f4f4;
+    border-radius: 0.5em;
+    padding: 1em;
+    overflow: hidden;
+    width: 75vw;
+    min-width: 250px;
+    max-width: 650px;
+  }
+
+  footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .icon-modal-content {
+    display:flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .icon-modal-content .filters {
+    display: flex;
+    justify-content: center;
+  }
+
+  .icon-modal-content .filters select {
+    width: 40%;
+    margin: 10px 0 5px 0;
+    height: 30px;
+    border-radius: 10px;
+    background-color: white;
+    border: 1px solid #999;
+    font-family: 'Nunito Sans', sans-serif !important;
+  }
+
+  .icon-modal-content fieldset {
+    max-height: 80%;
+    overflow-y: scroll;
+  }
+
+  /* Styles for search field */
+
+  .search-wrapper{
+      position: relative;
+      margin-top: 10px;
+      margin-bottom: 5px;
+      margin-right: 15px;
+      align-self: center;
+      width: 50%;
+  }
+
+  #search_for{
+      width: 90%;
+      border-radius: 10px;
+      border: 1px solid #999;
+      height: 30px;
+      padding: 0px 0px 0px 30px;
+      font-family: 'Nunito Sans', sans-serif !important;
+  }
+
+  #search_for + label{
+      position: absolute;
+      left: 7px;
+      top: 7px;
+      color: #999;
+  }
+
+  /* Styles for the icon picker grid */
+
+  .icon-picker-items{
+    margin-top: 5px;
+    padding: 5px;
+  }
+
+.icon-picker-item {
+    float: left;
+    margin: 0px 11px 12px 11px;
+    text-align: center;
+    cursor: pointer;
+    color: inherit;
+    width: 10%;
+    position: relative;
+    font-size: 28px;
+}
+
+.icon-picker-item[aria-checked=true] {
+  outline: 4px solid #93BBC4;
+  background-color: #eee;
+}
+
+  /* Message when no icons are returned from search */
+  #no-icons{
+      margin-top: 10px;
+      font-size: 1.5rem;
+      text-align: center;
+      vertical-align: middle;
+      line-height: 250px;
+      color: #999;
+  }
+</style>

package/iconpicker/FieldIconPicker.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        required?: boolean;
+        defaultValue?: {
+            icon: string;
+            prefix: string;
+        };
+        conditional?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldIconPickerProps = typeof __propDef.props;
+export declare type FieldIconPickerEvents = typeof __propDef.events;
+export declare type FieldIconPickerSlots = typeof __propDef.slots;
+export default class FieldIconPicker extends SvelteComponentTyped<FieldIconPickerProps, FieldIconPickerEvents, FieldIconPickerSlots> {
+}
+export {};

package/iconpicker/iconpicker.d.ts

@@ -0,0 +1,13 @@
+export declare const FontAwesomeIcons: {
+    class: string;
+    search: {
+        terms: string[];
+    };
+    label: string;
+    free: string[];
+}[];
+export declare const IconCategories: {
+    key: string;
+    label: string;
+    icons: string[];
+}[];