@dosgato/dialog 1.2.8 → 1.3.1

package/dist/chooser/Chooser.svelte

@@ -1,82 +1,90 @@
-<script>import browserIcon from '@iconify-icons/ph/browser';
-import folderIcon from '@iconify-icons/ph/folder';
-import folderNotchOpen from '@iconify-icons/ph/folder-notch-open';
-import { createEventDispatcher, getContext, onMount, setContext, tick } from 'svelte';
-import { isNotBlank, randomid } from 'txstate-utils';
-import { Button, Dialog, iconForMime, Tabs, Tree, UploadUI, expandTreePath } from '..';
-import { CHOOSER_API_CONTEXT } from './ChooserAPI';
-import { CHOOSER_STORE_CONTEXT, ChooserStore } from './ChooserStore';
-import ChooserPreview from './ChooserPreview.svelte';
-const chooserClient = getContext(CHOOSER_API_CONTEXT);
-export let label = undefined;
-export let images = false;
-export let pages = false;
-export let assets = images;
-export let folders = false;
-export let required = false;
-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);
-store.filter = filter;
-setContext(CHOOSER_STORE_CONTEXT, store);
-const dispatch = createEventDispatcher();
-let showuploader = false;
-let tabStore;
-const { sources, source, preview, treeStore, selected } = store;
-$: currentName = tabStore?.currentName();
-$: if ($currentName) {
-    store.setSource($currentName);
-    treeStore.refresh().catch(console.error);
-}
-$: store.setPreview($selected);
-function onChoose() {
-    dispatch('change', $store.preview);
-}
-function onDeselect() {
-    store.setPreview(undefined);
-    thumbnailExpanded = false;
-}
-function onUploadComplete() {
-    treeStore.openAndRefresh($selected).catch(console.error);
-    showuploader = false;
-}
-async function selectPreview(preloadPath) {
-    if (!$store.initialized)
-        return;
+<script lang="ts" generics="F">
+  import browserIcon from '@iconify-icons/ph/browser'
+  import folderIcon from '@iconify-icons/ph/folder'
+  import folderNotchOpen from '@iconify-icons/ph/folder-notch-open'
+  import { createEventDispatcher, getContext, onMount, setContext, tick } from 'svelte'
+  import { isNotBlank, randomid } from 'txstate-utils'
+  import { Button, Dialog, iconForMime, Tabs, Tree, type TypedTreeItem, type TabStore, UploadUI, expandTreePath } from '..'
+  import { CHOOSER_API_CONTEXT, type AnyItem, type Client } from './ChooserAPI'
+  import { CHOOSER_STORE_CONTEXT, ChooserStore } from './ChooserStore'
+  import ChooserPreview from './ChooserPreview.svelte'
+
+  const chooserClient = getContext<Client>(CHOOSER_API_CONTEXT)
+
+  export let label: string | undefined = undefined
+  export let images = false
+  export let pages = false
+  export let assets = images
+  export let folders = false
+  export let required = false
+  export let initialSource: string | undefined = undefined
+  export let initialPath: string | undefined = undefined
+  export let activeSources: string[] | undefined = undefined
+  export let passthruFilters: F | undefined = undefined
+  export let filter: undefined | ((item: AnyItem) => boolean | Promise<boolean>) = undefined
+  export let store = new ChooserStore<F>(chooserClient)
+  store.filter = filter
+
+  setContext(CHOOSER_STORE_CONTEXT, store)
+  const dispatch = createEventDispatcher()
+
+  let showuploader = false
+  let tabStore: TabStore
+  const { sources, source, preview, treeStore, selected } = store
+  $: currentName = tabStore?.currentName()
+
+  $: if ($currentName) {
+    store.setSource($currentName)
+    treeStore.refresh().catch(console.error)
+  }
+  $: store.setPreview($selected)
+
+  function onChoose () {
+    dispatch('change', $store.preview)
+  }
+
+  function onDeselect () {
+    store.setPreview(undefined)
+    thumbnailExpanded = false
+  }
+
+  function onUploadComplete () {
+    treeStore.openAndRefresh($selected!).catch(console.error)
+    showuploader = false
+  }
+
+  async function selectPreview (preloadPath) {
+    if (!$store.initialized) return
     if (preloadPath) {
-        const currentSelection = await expandTreePath(treeStore, preloadPath.split('/').filter(isNotBlank));
-        if (!currentSelection)
-            return;
-        store.setPreview(currentSelection);
-        treeStore.select(currentSelection, { clear: true });
-        await tick();
-        const focusedElement = document.querySelector('.tree-node[tabindex="0"]');
-        if (focusedElement?.classList.contains('tree-node'))
-            focusedElement.scrollIntoView({ block: 'center' });
+      const currentSelection = await expandTreePath(treeStore, preloadPath.split('/').filter(isNotBlank))
+      if (!currentSelection) return
+      store.setPreview(currentSelection)
+      treeStore.select(currentSelection, { clear: true })
+      await tick()
+      const focusedElement = document.querySelector('.tree-node[tabindex="0"]')
+      if (focusedElement?.classList.contains('tree-node')) focusedElement.scrollIntoView({ block: 'center' })
     }
-}
-onMount(async () => {
-    const preloadSource = $preview?.source ?? $selected?.source ?? $source?.name ?? initialSource;
-    const preloadPath = $preview?.path ?? $selected?.path ?? initialPath;
-    await store.init({ images, pages, assets, folders, activeSources, initialSource: preloadSource, initialPath: preloadPath, passthruFilters, filter });
-    await treeStore.refresh();
-    await selectPreview(preloadPath);
-});
-const previewId = randomid();
-let thumbnailExpanded = false;
-function iconForItem(item) {
+  }
+  onMount(async () => {
+    const preloadSource = $preview?.source ?? $selected?.source ?? $source?.name ?? initialSource
+    const preloadPath = $preview?.path ?? $selected?.path ?? initialPath
+    await store.init({ images, pages, assets, folders, activeSources, initialSource: preloadSource, initialPath: preloadPath, passthruFilters, filter })
+    await treeStore.refresh()
+    await selectPreview(preloadPath)
+  })
+
+  const previewId = randomid()
+  let thumbnailExpanded = false
+
+  function iconForItem (item: TypedTreeItem<AnyItem>) {
     if (item.icon) {
-        return item.icon;
-    }
-    else {
-        return {
-            icon: item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : browserIcon)
-        };
+      return item.icon
+    } else {
+      return {
+        icon: item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : browserIcon)
+      }
     }
-}
+  }
 </script>
 
 <Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel">
@@ -150,5 +158,4 @@ function iconForItem(item) {
       height: 70%;
     }
   }
-
 </style>

package/dist/chooser/ChooserPreview.svelte

@@ -1,16 +1,19 @@
-<script>import Thumbnail from './Thumbnail.svelte';
-import Details from './Details.svelte';
-import { createEventDispatcher } from 'svelte';
-export let previewId;
-export let store;
-const { preview } = store;
-export let thumbnailExpanded;
-const dispatch = createEventDispatcher();
-function reactToPreview(_preview) {
-    if (thumbnailExpanded)
-        dispatch('thumbnailsizechange');
-}
-$: reactToPreview($preview);
+<script lang="ts">
+  import type { ChooserStore } from './ChooserStore'
+  import Thumbnail from './Thumbnail.svelte'
+  import Details from './Details.svelte'
+  import { createEventDispatcher } from 'svelte'
+
+  export let previewId: string
+  export let store: ChooserStore
+  const { preview } = store
+  export let thumbnailExpanded: boolean
+  const dispatch = createEventDispatcher()
+
+  function reactToPreview (_preview) {
+    if (thumbnailExpanded) dispatch('thumbnailsizechange')
+  }
+  $: reactToPreview($preview)
 </script>
 
 <section id={previewId} class="dialog-chooser-preview" class:image={$preview?.type === 'asset' && $preview.image} class:collapsed={!thumbnailExpanded} tabindex="-1">
@@ -141,5 +144,4 @@ $: reactToPreview($preview);
       display: none;
     }
   }
-
 </style>

package/dist/chooser/Details.svelte

@@ -1,6 +1,9 @@
-<script>import { bytesToHuman, cleanUrl, humanFileType } from './ChooserStore';
-export let item;
-export let singleLine = false;
+<script lang="ts">
+  import type { AnyItem } from './ChooserAPI'
+  import { bytesToHuman, cleanUrl, type BrokenURL, type RawURL, humanFileType } from './ChooserStore'
+
+  export let item: AnyItem | RawURL | BrokenURL
+  export let singleLine = false
 </script>
 
 <dl class="dialog-chooser-info" aria-live="polite" class:multiLine={!singleLine} class:asset={item.type === 'asset'}>
@@ -88,5 +91,4 @@ export let singleLine = false;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-
 </style>

package/dist/chooser/Thumbnail.svelte

@@ -1,18 +1,23 @@
-<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';
-import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
-import { collapseIconSVG, expandIconSVG } from './icons';
-import { createEventDispatcher } from 'svelte';
-export let item;
-export let larger = false;
-export let expandable = false;
-export let expanded = false;
-const dispatch = createEventDispatcher();
-function toggleThumbnailSize() {
-    dispatch('thumbnailsizechange');
-}
+<script lang="ts">
+  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'
+  import type { AnyItem } from './ChooserAPI'
+  import type { BrokenURL, RawURL } from './ChooserStore'
+  import { ScreenReaderOnly } from '@txstate-mws/svelte-components'
+  import { collapseIconSVG, expandIconSVG } from './icons'
+  import { createEventDispatcher } from 'svelte'
+
+  export let item: AnyItem | RawURL | BrokenURL
+  export let larger = false
+  export let expandable = false
+  export let expanded = false
+  const dispatch = createEventDispatcher()
+
+  function toggleThumbnailSize () {
+    dispatch('thumbnailsizechange')
+  }
 </script>
 <div class="dialog-chooser-thumbnail" class:expanded>
   {#if item.type === 'asset'}
@@ -70,5 +75,4 @@ function toggleThumbnailSize() {
     width: 100%;
     height: 100%;
   }
-
 </style>

package/dist/chooser/UploadUI.svelte

@@ -1,78 +1,88 @@
-<script>import trashLight from '@iconify-icons/ph/trash-light';
-import { roundTo, unique } from 'txstate-utils';
-import { createEventDispatcher } from 'svelte';
-import { Dialog, FileIcon, Icon } from '..';
-export let title;
-export let folder;
-export let maxFiles = 200;
-export let escapable = true;
-export let mimeWhitelist = [];
-export let mimeBlacklist = [];
-export let uploader;
-$: whitelist = new Set(mimeWhitelist);
-$: blacklist = new Set(mimeBlacklist);
-const dispatch = createEventDispatcher();
-let dragover = 0;
-let uploadList = [];
-let uploadLocked = false;
-let uploadProgress = 0;
-let uploadError;
-function onUploadEnter(e) {
-    if (e.dataTransfer?.items.length)
-        dragover++;
-}
-function onUploadLeave(e) {
-    if (e.dataTransfer?.items.length)
-        dragover--;
-}
-function onUploadDrop(e) {
-    e.preventDefault();
-    dragover = 0;
+<script lang="ts">
+  import trashLight from '@iconify-icons/ph/trash-light'
+  import { roundTo, unique } from 'txstate-utils'
+  import { createEventDispatcher } from 'svelte'
+  import { Dialog, FileIcon, Icon, type Client, type Folder } from '..'
+
+  export let title: string
+  export let folder: Folder
+  export let maxFiles: number = 200
+  export let escapable = true
+  export let mimeWhitelist: string[] = []
+  export let mimeBlacklist: string[] = []
+  export let uploader: NonNullable<Client['upload']>
+  $: whitelist = new Set(mimeWhitelist)
+  $: blacklist = new Set(mimeBlacklist)
+
+  const dispatch = createEventDispatcher()
+
+  let dragover = 0
+  let uploadList: File[] = []
+  let uploadLocked = false
+  let uploadProgress = 0
+  let uploadError: string | undefined
+
+  function onUploadEnter (e: DragEvent) {
+    if (e.dataTransfer?.items.length) dragover++
+  }
+
+  function onUploadLeave (e: DragEvent) {
+    if (e.dataTransfer?.items.length) dragover--
+  }
+
+  function onUploadDrop (e: DragEvent) {
+    e.preventDefault()
+    dragover = 0
     if (!uploadLocked && e.dataTransfer?.items?.length) {
-        uploadList = unique(uploadList.concat(Array.from(e.dataTransfer.files)), 'name').slice(-1 * maxFiles);
+      uploadList = unique(uploadList.concat(Array.from(e.dataTransfer.files)), 'name').slice(-1 * maxFiles)
     }
-}
-function onUploadChange(e) {
-    const files = e.currentTarget.files;
-    if (files?.length)
-        uploadList = unique(uploadList.concat(Array.from(files)), 'name').slice(-1 * maxFiles);
-    e.currentTarget.value = '';
-}
-async function onUploadSubmit() {
-    if (uploadLocked)
-        return;
-    uploadLocked = true;
+  }
+
+  function onUploadChange (e: InputEvent & { currentTarget: HTMLInputElement }) {
+    const files = e.currentTarget.files
+    if (files?.length) uploadList = unique(uploadList.concat(Array.from(files)), 'name').slice(-1 * maxFiles)
+    e.currentTarget.value = ''
+  }
+
+  async function onUploadSubmit () {
+    if (uploadLocked) return
+    uploadLocked = true
     try {
-        const data = new FormData();
-        for (let i = 0; i < uploadList.length; i++) {
-            data.append('file' + i, uploadList[i]);
-        }
-        // TODO: accept new list of children from uploader function and feed it
-        // to the tree instead of refreshing the tree
-        await uploader(folder, uploadList, ratio => { uploadProgress = ratio; });
-        uploadList = [];
-        uploadError = undefined;
-        dispatch('saved');
-    }
-    catch (e) {
-        uploadError = e.message;
-    }
-    finally {
-        uploadLocked = false;
+      const data = new FormData()
+      for (let i = 0; i < uploadList.length; i++) {
+        data.append('file' + i, uploadList[i])
+      }
+
+      // TODO: accept new list of children from uploader function and feed it
+      // to the tree instead of refreshing the tree
+      await uploader(
+        folder,
+        uploadList,
+        ratio => { uploadProgress = ratio }
+      )
+      uploadList = []
+      uploadError = undefined
+      dispatch('saved')
+    } catch (e: any) {
+      uploadError = e.message
+    } finally {
+      uploadLocked = false
     }
-}
-function onUploadEscape() {
+  }
+
+  function onUploadEscape () {
     if (!uploadLocked && escapable) {
-        uploadList = [];
-        uploadError = undefined;
-        dispatch('escape');
+      uploadList = []
+      uploadError = undefined
+      dispatch('escape')
     }
-}
-function onDeleteFile(file) {
+  }
+
+  function onDeleteFile (file: File) {
     return () => {
-        uploadList = uploadList.filter(f => f !== file);
-    };
-}
+      uploadList = uploadList.filter(f => f !== file)
+    }
+  }
 </script>
 
 <Dialog {title} disabled={!uploadList.length} cancelText="Cancel" continueText="Upload" on:escape={onUploadEscape} on:continue={onUploadSubmit}>
@@ -157,5 +167,4 @@ function onDeleteFile(file) {
   li div {
     width: 100%;
   }
-
 </style>

package/dist/code/CodeEditor.svelte

@@ -1,70 +1,68 @@
-<script>import { passActions } from '@txstate-mws/svelte-components';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-import { getDescribedBy } from '..';
-let className = '';
-export { className as class };
-export let id = undefined;
-export let rows = 8;
-export let language;
-export let use = [];
-export let inputelement = undefined;
-export let extradescid = undefined;
-export let helptextid = undefined;
-export let messagesid = undefined;
-export let valid = undefined;
-export let invalid = undefined;
-export let value;
-const dispatch = createEventDispatcher();
-let updateCode;
-let editorelement;
-let editor;
-onMount(async () => {
-    const { EditorView, minimalSetup } = await import('codemirror');
-    const { indentWithTab } = await import('@codemirror/commands');
-    const { lineNumbers, highlightActiveLine, highlightActiveLineGutter, keymap } = await import('@codemirror/view');
-    const { langmap } = await import('./langs.js');
+<script lang="ts">
+  import { type HTMLActionEntry, passActions } from '@txstate-mws/svelte-components'
+  import type { EditorView, ViewUpdate } from '@codemirror/view'
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+  import { getDescribedBy } from '..'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let rows = 8
+  export let language: 'js' | 'css' | 'html'
+  export let use: HTMLActionEntry[] = []
+  export let inputelement: HTMLElement | undefined = undefined
+  export let extradescid: string | undefined = undefined
+  export let helptextid: string | undefined = undefined
+  export let messagesid: string | undefined = undefined
+  export let valid: boolean | undefined = undefined
+  export let invalid: boolean | undefined = undefined
+  export let value: any
+
+  const dispatch = createEventDispatcher()
+
+  let updateCode: (code: string) => void
+  let editorelement: HTMLElement | undefined
+  let editor: EditorView
+  onMount(async () => {
+    const { EditorView, minimalSetup } = await import('codemirror')
+    const { indentWithTab } = await import('@codemirror/commands')
+    const { lineNumbers, highlightActiveLine, highlightActiveLineGutter, keymap } = await import('@codemirror/view')
+    const { langmap } = await import('./langs.js')
     editor = new EditorView({
-        extensions: [
-            minimalSetup,
-            lineNumbers(),
-            highlightActiveLine(),
-            highlightActiveLineGutter(),
-            langmap[language],
-            keymap.of([indentWithTab]),
-            EditorView.updateListener.of((v) => {
-                if (v.docChanged) {
-                    const newval = editor.state.doc.toString();
-                    if (value !== newval)
-                        dispatch('change', newval);
-                }
-            })
-        ],
-        parent: editorelement
-    });
+      extensions: [
+        minimalSetup,
+        lineNumbers(),
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        langmap[language],
+        keymap.of([indentWithTab]),
+        EditorView.updateListener.of((v: ViewUpdate) => {
+          if (v.docChanged) {
+            const newval = editor.state.doc.toString()
+            if (value !== newval) dispatch('change', newval)
+          }
+        })
+      ],
+      parent: editorelement
+    })
     updateCode = code => {
-        if (editor.state.doc.toString() !== code)
-            editor.update([editor.state.update({ changes: { from: 0, to: editor.state.doc.length, insert: code } })]);
-    };
-    inputelement = editorelement?.querySelector('.cm-content') ?? undefined;
-    if (id)
-        inputelement?.setAttribute('id', id);
-    if (className)
-        inputelement?.classList.add(...className.split(' '), ...[]);
-    updateValidState();
-});
-onDestroy(() => {
-    editor?.destroy();
-});
-$: updateCode?.(value ?? '');
-function updateValidState(..._) {
-    inputelement?.setAttribute('aria-invalid', String(!!invalid));
-    const descby = getDescribedBy([messagesid, helptextid, extradescid]);
-    if (descby)
-        inputelement?.setAttribute('aria-describedby', descby);
-    else
-        inputelement?.removeAttribute('aria-describedby');
-}
-$: updateValidState(invalid, messagesid);
+      if (editor.state.doc.toString() !== code) editor.update([editor.state.update({ changes: { from: 0, to: editor.state.doc.length, insert: code } })])
+    }
+    inputelement = editorelement?.querySelector('.cm-content') ?? undefined
+    if (id) inputelement?.setAttribute('id', id)
+    if (className) inputelement?.classList.add(...className.split(' '), ...[])
+    updateValidState()
+  })
+  onDestroy(() => {
+    editor?.destroy()
+  })
+  $: updateCode?.(value ?? '')
+  function updateValidState (..._: any[]) {
+    inputelement?.setAttribute('aria-invalid', String(!!invalid))
+    const descby = getDescribedBy([messagesid, helptextid, extradescid])
+    if (descby) inputelement?.setAttribute('aria-describedby', descby)
+    else inputelement?.removeAttribute('aria-describedby')
+  }
+  $: updateValidState(invalid, messagesid)
 </script>
 
 <div bind:this={editorelement} style:--cm-editor-minh="{rows * 1.5}em" class:valid class:invalid on:paste on:focusout use:passActions={use}></div>
@@ -81,5 +79,4 @@ $: updateValidState(invalid, messagesid);
     overflow: auto;
     resize: vertical;
   }
-
 </style>

package/dist/code/FieldCodeEditor.svelte

@@ -1,22 +1,24 @@
-<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
-import { FieldStandard } from '..';
-import CodeEditor from './CodeEditor.svelte';
-let className = '';
-export { className as class };
-export let id = undefined;
-export let path;
-export let label = '';
-export let notNull = false;
-export let defaultValue = notNull ? '' : undefined;
-export let rows = 8;
-export let conditional = undefined;
-export let required = false;
-export let use = [];
-export let inputelement = undefined;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-export let language;
+<script lang="ts">
+  import type { HTMLActionEntry } from '@txstate-mws/svelte-components'
+  import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms'
+  import { FieldStandard } from '..'
+  import CodeEditor from './CodeEditor.svelte'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label: string = ''
+  export let notNull = false
+  export let defaultValue: any = notNull ? '' : undefined
+  export let rows = 8
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let use: HTMLActionEntry[] = []
+  export let inputelement: HTMLElement = undefined as any
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let language: 'js' | 'css' | 'html'
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>