@dosgato/dialog 1.2.8 → 1.3.0

package/dist/tree/Tree.svelte

@@ -1,209 +1,216 @@
-<script>import { Icon } from '..';
-import { resize, PopupMenu } from '@txstate-mws/svelte-components';
-import { derivedStore, Store } from '@txstate-mws/svelte-store';
-import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext, tick } from 'svelte';
-import dotsIcon from '@iconify-icons/ph/dots-three-outline-vertical-fill';
-import circleIcon from '@iconify-icons/ph/circle';
-import radioSelectedIcon from '@iconify-icons/ph/radio-button-fill';
-import { isNotBlank } from 'txstate-utils';
-import LoadIcon from './LoadIcon.svelte';
-import TreeNode from './TreeNode.svelte';
-import { getHashId, transformSearchable, TreeStore, TREE_STORE_CONTEXT } from './treestore';
-export let headers;
-export let searchable = undefined;
-export let filterable = searchable;
-export let filter = '';
-export let nodeClass = undefined;
-export let singleSelect = undefined;
-export let enableResize = false;
-/**
- * Takes the width of the tree, in pixels, and returns an array of TreeHeader IDs that should be
- * displayed at that screen width. Any headers whose ID is not returned will be added to a dropdown, which allows
- * the user to view them. The last ID returned by this function is the header that is replaced if the user chooses
- * to view a different header. The headers will always appear in the order in which they are defined in the headers prop.
- */
-export let responsiveHeaders = undefined;
-/**
- * this `itemType` prop is here for typescript only
- *
- * it will allow users to specify T
- *
- * we are able to determine T from the store prop, but not everyone will use the store prop
- */
-export const itemType = undefined;
-export let fetchChildren = undefined;
-export let dragEligible = undefined;
-export let moveHandler = undefined;
-export let copyHandler = undefined;
-export let dropEffect = undefined;
-export let store = new TreeStore(fetchChildren, { copyHandler, dragEligible, dropEffect, moveHandler });
-if (searchable)
-    store.searchableFn = transformSearchable(searchable);
-if (filterable)
-    store.filterableFn = transformSearchable(filterable);
-setContext(TREE_STORE_CONTEXT, store);
-const { filteredRootItems, headerOverride } = store;
-let checkboxelement;
-const headerelements = [];
-let showMoreButton;
-const treeWidth = new Store({});
-// Need to keep track of which headers are shown or hidden and which is selected
-let shownHeaders = headers;
-let hiddenHeaders = [];
-let selectedHeader = undefined;
-let selectedHeaderValue;
-function updateShownHeaders() {
+<script lang="ts" generics="T extends TreeItemFromDB = TreeItemFromDB">
+  import dotsIcon from '@iconify-icons/ph/dots-three-outline-vertical-fill'
+  import circleIcon from '@iconify-icons/ph/circle'
+  import radioSelectedIcon from '@iconify-icons/ph/radio-button-fill'
+  import { resize, type ElementSize, PopupMenu, type PopupMenuItem } from '@txstate-mws/svelte-components'
+  import { derivedStore, Store } from '@txstate-mws/svelte-store'
+  import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext, tick } from 'svelte'
+  import { isNotBlank } from 'txstate-utils'
+  import { Icon } from '..'
+  import LoadIcon from './LoadIcon.svelte'
+  import TreeNode from './TreeNode.svelte'
+  import { getHashId, transformSearchable, TreeStore, TREE_STORE_CONTEXT } from './treestore'
+  import type { DragEligibleFn, CopyHandlerFn, DropEffectFn, FetchChildrenFn, MoveHandlerFn, TreeHeader, TreeItemFromDB, SearchableType } from './treestore'
+
+  interface $$Events {
+    choose: CustomEvent<T>
+    deselect: CustomEvent<T>
+  }
+
+  export let headers: TreeHeader<T>[]
+  export let searchable: SearchableType<T> = undefined
+  export let filterable: SearchableType<T> = searchable
+  export let filter = ''
+  export let nodeClass: ((itm: T) => string) | undefined = undefined
+  export let singleSelect: boolean | undefined = undefined
+  export let enableResize = false
+  /**
+   * Takes the width of the tree, in pixels, and returns an array of TreeHeader IDs that should be
+   * displayed at that screen width. Any headers whose ID is not returned will be added to a dropdown, which allows
+   * the user to view them. The last ID returned by this function is the header that is replaced if the user chooses
+   * to view a different header. The headers will always appear in the order in which they are defined in the headers prop.
+   */
+  export let responsiveHeaders: ((treeWidth: number) => string[]) | undefined = undefined
+  /**
+   * this `itemType` prop is here for typescript only
+   *
+   * it will allow users to specify T
+   *
+   * we are able to determine T from the store prop, but not everyone will use the store prop
+   */
+  export const itemType: T | undefined = undefined
+  export let fetchChildren: FetchChildrenFn<T> | undefined = undefined
+  export let dragEligible: DragEligibleFn<T> | undefined = undefined
+  export let moveHandler: MoveHandlerFn<T> | undefined = undefined
+  export let copyHandler: CopyHandlerFn<T> | undefined = undefined
+  export let dropEffect: DropEffectFn<T> | undefined = undefined
+  export let store = new TreeStore<T>(fetchChildren!, { copyHandler, dragEligible, dropEffect, moveHandler })
+  if (searchable) store.searchableFn = transformSearchable(searchable)
+  if (filterable) store.filterableFn = transformSearchable(filterable)
+  setContext(TREE_STORE_CONTEXT, store)
+  const { filteredRootItems, headerOverride } = store
+
+  let checkboxelement: HTMLElement
+  const headerelements: HTMLElement[] = []
+  let showMoreButton: HTMLButtonElement
+  const treeWidth = new Store<ElementSize>({})
+
+  // Need to keep track of which headers are shown or hidden and which is selected
+  let shownHeaders: TreeHeader<T>[] = headers
+  let hiddenHeaders: TreeHeader<T>[] = []
+  let selectedHeader: TreeHeader<T> | undefined = undefined
+  let selectedHeaderValue: string
+
+  function updateShownHeaders () {
     if (typeof responsiveHeaders === 'function') {
-        shownHeaders = [];
-        hiddenHeaders = [];
-        const shown = responsiveHeaders($treeWidth.clientWidth ?? 1024);
-        if (selectedHeader && !shown.includes(selectedHeader.id)) {
-            shown[shown.length - 1] = selectedHeader.id;
-        }
-        for (const h of headers) {
-            if (shown.includes(h.id)) {
-                shownHeaders.push(h);
-            }
-            else {
-                hiddenHeaders.push(h);
-            }
-        }
-        selectedHeaderValue = shown[shown.length - 1];
-        if (hiddenHeaders.length) {
-            const hideable = headers.find(h => h.id === selectedHeaderValue);
-            if (hideable)
-                hiddenHeaders.push(hideable);
+      shownHeaders = []
+      hiddenHeaders = []
+      const shown = responsiveHeaders($treeWidth.clientWidth ?? 1024)
+      if (selectedHeader && !shown.includes(selectedHeader.id)) {
+        shown[shown.length - 1] = selectedHeader.id
+      }
+      for (const h of headers) {
+        if (shown.includes(h.id)) {
+          shownHeaders.push(h)
+        } else {
+          hiddenHeaders.push(h)
         }
+      }
+      selectedHeaderValue = shown[shown.length - 1]
+      if (hiddenHeaders.length) {
+        const hideable = headers.find(h => h.id === selectedHeaderValue)
+        if (hideable) hiddenHeaders.push(hideable)
+      }
     }
-}
-function calcHeaderSizes() {
-    updateShownHeaders();
-    const headerSizes = [];
-    let totalFixed = checkboxelement?.offsetWidth ?? 0;
-    if (hiddenHeaders.length)
-        totalFixed += (showMoreButton?.offsetWidth ?? 0);
+  }
+
+  function calcHeaderSizes () {
+    updateShownHeaders()
+    const headerSizes: string[] = []
+    let totalFixed = checkboxelement?.offsetWidth ?? 0
+    if (hiddenHeaders.length) totalFixed += (showMoreButton?.offsetWidth ?? 0)
     for (let i = 0; i < shownHeaders.length; i++) {
-        const header = shownHeaders[i];
-        if (header.fixed || $headerOverride[header.id]) {
-            headerSizes[i] = $headerOverride[header.id] ?? header.fixed;
-            totalFixed += headerelements[i]?.offsetWidth ?? 0;
-        }
+      const header = shownHeaders[i]
+      if (header.fixed || $headerOverride[header.id]) {
+        headerSizes[i] = $headerOverride[header.id] ?? header.fixed
+        totalFixed += headerelements[i]?.offsetWidth ?? 0
+      }
     }
-    const remainingWidth = ($treeWidth.clientWidth ?? 1024) - totalFixed;
-    const growHeaders = shownHeaders.filter((h, i) => !h.fixed && !$headerOverride[h.id]);
-    const totalGrowShares = growHeaders.reduce((sum, h) => sum + (h.grow ?? 1), 0);
+    const remainingWidth = ($treeWidth.clientWidth ?? 1024) - totalFixed
+    const growHeaders = shownHeaders.filter((h, i) => !h.fixed && !$headerOverride[h.id])
+    const totalGrowShares = growHeaders.reduce((sum, h) => sum + (h.grow ?? 1), 0)
     for (let i = 0; i < shownHeaders.length; i++) {
-        const header = shownHeaders[i];
-        if (!header.fixed && !$headerOverride[header.id] && headerelements[i]?.offsetWidth) {
-            headerSizes[i] = `${remainingWidth * (header.grow ?? 1) / totalGrowShares}px`;
-        }
+      const header = shownHeaders[i]
+      if (!header.fixed && !$headerOverride[header.id] && headerelements[i]?.offsetWidth) {
+        headerSizes[i] = `${remainingWidth * (header.grow ?? 1) / totalGrowShares}px`
+      }
     }
-    return headerSizes;
-}
-const headerSizes = derivedStore([headerOverride, treeWidth], calcHeaderSizes);
-$: store.singleSelect = singleSelect;
-function onDragEnd() {
-    store.update(v => ({ ...v, dragging: false }));
-}
-let search = '';
-let searchTimer = 0;
-$: store.filter(filter);
-function onKeyUp(e) {
-    if (!store.searchableFn)
-        return;
+    return headerSizes
+  }
+  const headerSizes = derivedStore([headerOverride, treeWidth], calcHeaderSizes)
+
+  $: store.singleSelect = singleSelect
+
+  function onDragEnd () {
+    store.update(v => ({ ...v, dragging: false }))
+  }
+
+  let search = ''
+  let searchTimer = 0
+  $: store.filter(filter)
+  function onKeyUp (e) {
+    if (!store.searchableFn) return
     if (e.key.length === 1) {
-        search += e.key.toLocaleLowerCase();
-        const searchItems = $store.focused?.parent ? $store.focused.parent.children : $store.rootItems;
-        const newFocus = searchItems?.find(itm => store.searchableFn(itm).some(str => str.toLocaleLowerCase().startsWith(search)));
-        if (newFocus)
-            store.focus(newFocus);
-        clearTimeout(searchTimer);
-        searchTimer = setTimeout(() => { search = ''; }, 4000);
+      search += e.key.toLocaleLowerCase()
+      const searchItems = $store.focused?.parent ? $store.focused.parent.children : $store.rootItems
+      const newFocus = searchItems?.find(itm => store.searchableFn!(itm).some(str => str.toLocaleLowerCase().startsWith(search)))
+      if (newFocus) store.focus(newFocus)
+      clearTimeout(searchTimer)
+      searchTimer = setTimeout(() => { search = '' }, 4000)
+    } else if (e.key === 'Backspace') {
+      search = search.substring(0, search.length - 1)
+    } else if (e.key === 'Escape') {
+      search = ''
     }
-    else if (e.key === 'Backspace') {
-        search = search.substring(0, search.length - 1);
-    }
-    else if (e.key === 'Escape') {
-        search = '';
+  }
+
+  let dragtargetid: string | undefined
+  let rightoftargetid: string | undefined
+  let widthStart: number
+  let width2Start: number
+  let mouseStart: number
+  function headerDragStart (header: TreeHeader<T>, idx: number) {
+    return (e: MouseEvent | TouchEvent) => {
+      if (!enableResize) return
+      const dragtarget = headerelements[idx]
+      const rightoftarget = headerelements.find((e, i) => i > idx && e.isConnected)
+      if (!dragtarget?.isConnected || !rightoftarget) dragtargetid = undefined
+      else {
+        e.preventDefault()
+        dragtargetid = header.id
+        rightoftargetid = rightoftarget.getAttribute('id') ?? undefined
+        widthStart = dragtarget.clientWidth
+        width2Start = rightoftarget.clientWidth
+        mouseStart = 'touches' in e ? e.touches[0].screenX : e.screenX
+      }
     }
-}
-let dragtargetid;
-let rightoftargetid;
-let widthStart;
-let width2Start;
-let mouseStart;
-function headerDragStart(header, idx) {
-    return (e) => {
-        if (!enableResize)
-            return;
-        const dragtarget = headerelements[idx];
-        const rightoftarget = headerelements.find((e, i) => i > idx && e.isConnected);
-        if (!dragtarget?.isConnected || !rightoftarget)
-            dragtargetid = undefined;
-        else {
-            e.preventDefault();
-            dragtargetid = header.id;
-            rightoftargetid = rightoftarget.getAttribute('id') ?? undefined;
-            widthStart = dragtarget.clientWidth;
-            width2Start = rightoftarget.clientWidth;
-            mouseStart = 'touches' in e ? e.touches[0].screenX : e.screenX;
-        }
-    };
-}
-function headerDrag(e) {
-    if ('touches' in e && e.touches?.length > 1)
-        return;
+  }
+
+  function headerDrag (e: MouseEvent | TouchEvent) {
+    if ('touches' in e && e.touches?.length > 1) return
     if (dragtargetid && rightoftargetid) {
-        const screenX = 'touches' in e ? e.touches[0].screenX : e.screenX;
-        store.setHeaderOverride(dragtargetid, `${widthStart - (mouseStart - screenX)}px`);
-        store.setHeaderOverride(rightoftargetid, `${width2Start + (mouseStart - screenX)}px`);
+      const screenX = 'touches' in e ? e.touches[0].screenX : e.screenX
+      store.setHeaderOverride(dragtargetid, `${widthStart - (mouseStart - screenX)}px`)
+      store.setHeaderOverride(rightoftargetid, `${width2Start + (mouseStart - screenX)}px`)
     }
-}
-function headerDragEnd() {
-    dragtargetid = undefined;
-    rightoftargetid = undefined;
-}
-function headerDragReset() {
-    store.resetHeaderOverride();
-}
-let mounted = false;
-onMount(async () => {
-    document.addEventListener('dragend', onDragEnd);
-    headerSizes.set(calcHeaderSizes()); // seems to need a kick on first mount
-    await new Promise(resolve => requestAnimationFrame(resolve));
+  }
+
+  function headerDragEnd () {
+    dragtargetid = undefined
+    rightoftargetid = undefined
+  }
+
+  function headerDragReset () {
+    store.resetHeaderOverride()
+  }
+
+  let mounted = false
+  onMount(async () => {
+    document.addEventListener('dragend', onDragEnd)
+    headerSizes.set(calcHeaderSizes()) // seems to need a kick on first mount
+    await new Promise(resolve => requestAnimationFrame(resolve))
     // need to wait long enough for headers to redraw before trying to mount the rows
-    await new Promise(resolve => requestAnimationFrame(resolve));
-    mounted = true;
-    await store.refresh();
-});
-onDestroy(() => {
-    if (typeof document !== 'undefined')
-        document.removeEventListener('dragend', onDragEnd);
-});
-let hadFocus = false;
-beforeUpdate(() => {
-    hadFocus = !!store.treeElement?.contains(document.activeElement);
-});
-afterUpdate(() => {
+    await new Promise(resolve => requestAnimationFrame(resolve))
+    mounted = true
+    await store.refresh()
+  })
+  onDestroy(() => {
+    if (typeof document !== 'undefined') document.removeEventListener('dragend', onDragEnd)
+  })
+  let hadFocus = false
+  beforeUpdate(() => {
+    hadFocus = !!store.treeElement?.contains(document.activeElement)
+  })
+  afterUpdate(() => {
     if ($store.focused?.id) {
-        const el = document.getElementById(getHashId($store.focused.id));
-        if (el && hadFocus) {
-            if (el !== document.activeElement)
-                el.focus();
-        }
+      const el = document.getElementById(getHashId($store.focused.id))
+      if (el && hadFocus) {
+        if (el !== document.activeElement) el.focus()
+      }
     }
-});
-$: myRootItemIds = $store && $filteredRootItems;
-$: myRootItems = $store?.rootItems?.filter(r => myRootItemIds.has(r.id)) ?? [];
-async function selectHeader(selected) {
-    selectedHeader = headers.find(h => h.id === selected.value);
-    updateShownHeaders();
-    store.resetHeaderOverride();
-    const headersizes = shownHeaders.map(h => h.fixed ? h.fixed : '');
-    headerSizes.set(headersizes);
-    await tick();
-    headerSizes.set(calcHeaderSizes());
-}
+  })
+  $: myRootItemIds = $store && $filteredRootItems
+  $: myRootItems = $store?.rootItems?.filter(r => myRootItemIds.has(r.id)) ?? []
+
+  async function selectHeader (selected: PopupMenuItem) {
+    selectedHeader = headers.find(h => h.id === selected.value)
+    updateShownHeaders()
+    store.resetHeaderOverride()
+    const headersizes = shownHeaders.map(h => h.fixed ? h.fixed : '')
+    headerSizes.set(headersizes)
+    await tick()
+    headerSizes.set(calcHeaderSizes())
+  }
 </script>
 
 <svelte:window on:mouseup={headerDragEnd} />
@@ -326,5 +333,4 @@ async function selectHeader(selected) {
   :global(div.hideable-container ul.hideable-headers li.selected-header::after) {
     display: none;
   }
-
 </style>

package/dist/tree/Tree.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { TreeStore } from './treestore';
 import type { DragEligibleFn, CopyHandlerFn, DropEffectFn, FetchChildrenFn, MoveHandlerFn, TreeHeader, TreeItemFromDB, SearchableType } from './treestore';
-declare class __sveltets_Render<T extends TreeItemFromDB> {
+declare class __sveltets_Render<T extends TreeItemFromDB = TreeItemFromDB> {
     props(): {
         headers: TreeHeader<T>[];
         searchable?: SearchableType<T>;
@@ -36,10 +36,10 @@ declare class __sveltets_Render<T extends TreeItemFromDB> {
     };
     slots(): {};
 }
-export type TreeProps<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
-export type TreeEvents<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
-export type TreeSlots<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class Tree<T extends TreeItemFromDB> extends SvelteComponentTyped<TreeProps<T>, TreeEvents<T>, TreeSlots<T>> {
+export type TreeProps<T extends TreeItemFromDB = TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeEvents<T extends TreeItemFromDB = TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeSlots<T extends TreeItemFromDB = TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Tree<T extends TreeItemFromDB = TreeItemFromDB> extends SvelteComponentTyped<TreeProps<T>, TreeEvents<T>, TreeSlots<T>> {
     get itemType(): T & {};
 }
 export {};

package/dist/tree/TreeCell.svelte

@@ -1,9 +1,13 @@
-<script>import { get } from 'txstate-utils';
-import { Icon } from '..';
-export let header;
-export let item;
-$: icon = (typeof header.icon === 'function' ? header.icon(item) : header.icon);
-$: headerComponent = header.component;
+<script lang="ts" generics="T extends TreeItemFromDB = TreeItemFromDB">
+  import type { IconifyIcon } from '@iconify/svelte'
+  import { get } from 'txstate-utils'
+  import { Icon } from '..'
+  import type { TreeHeader, TreeItemFromDB, TypedTreeItem } from './treestore'
+
+  export let header: TreeHeader<T>
+  export let item: TypedTreeItem<T>
+  $: icon = (typeof header.icon === 'function' ? header.icon(item) : header.icon) as { icon: IconifyIcon, label: string } | undefined
+  $: headerComponent = header.component as any
 </script>
 
 {#if icon}

package/dist/tree/TreeCell.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { TreeHeader, TreeItemFromDB, TypedTreeItem } from './treestore';
-declare class __sveltets_Render<T extends TreeItemFromDB> {
+declare class __sveltets_Render<T extends TreeItemFromDB = TreeItemFromDB> {
     props(): {
         header: TreeHeader<T>;
         item: TypedTreeItem<T>;
@@ -10,9 +10,9 @@ declare class __sveltets_Render<T extends TreeItemFromDB> {
     };
     slots(): {};
 }
-export type TreeCellProps<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
-export type TreeCellEvents<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
-export type TreeCellSlots<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TreeCell<T extends TreeItemFromDB> extends SvelteComponentTyped<TreeCellProps<T>, TreeCellEvents<T>, TreeCellSlots<T>> {
+export type TreeCellProps<T extends TreeItemFromDB = TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeCellEvents<T extends TreeItemFromDB = TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeCellSlots<T extends TreeItemFromDB = TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TreeCell<T extends TreeItemFromDB = TreeItemFromDB> extends SvelteComponentTyped<TreeCellProps<T>, TreeCellEvents<T>, TreeCellSlots<T>> {
 }
 export {};