@dosgato/dialog 0.0.6 → 0.0.7

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: any;
+            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/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/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/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as Container } from './Container.svelte';
+export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
 export { default as FieldChooserLink } from './FieldChooserLink.svelte';
@@ -23,4 +24,5 @@ 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 './fileIcons.js';
 export * from './TabStore.js';

package/index.js

@@ -1,5 +1,6 @@
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as Container } from './Container.svelte';
+export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
 export { default as FieldChooserLink } from './FieldChooserLink.svelte';
@@ -23,4 +24,5 @@ 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 './fileIcons.js';
 export * from './TabStore.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.2.9",
     "@txstate-mws/svelte-forms": "^0.0.18",
@@ -27,6 +27,7 @@
     "./ButtonGroup.svelte": "./ButtonGroup.svelte",
     "./Checkbox.svelte": "./Checkbox.svelte",
     "./Container.svelte": "./Container.svelte",
+    "./FieldAutocomplete.svelte": "./FieldAutocomplete.svelte",
     "./FieldCheckbox.svelte": "./FieldCheckbox.svelte",
     "./FieldChoices.svelte": "./FieldChoices.svelte",
     "./FieldChooserLink.svelte": "./FieldChooserLink.svelte",
@@ -60,6 +61,7 @@
     "./chooser/Page.svelte": "./chooser/Page.svelte",
     "./chooser/Thumbnail.svelte": "./chooser/Thumbnail.svelte",
     "./chooser": "./chooser/index.js",
+    "./fileIcons": "./fileIcons.js",
     ".": "./index.js"
   },
   "svelte": "./index.js"