@dosgato/dialog 1.2.8 → 1.3.1

package/dist/tree/TreeNode.svelte

@@ -1,260 +1,233 @@
-<script>import checkboxOutline from '@iconify-icons/mdi/checkbox-outline';
-import checkboxBlankOutline from '@iconify-icons/mdi/checkbox-blank-outline';
-import menuDown from '@iconify-icons/mdi/menu-down';
-import menuRight from '@iconify-icons/mdi/menu-right';
-import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components';
-import { createEventDispatcher, getContext, onMount } from 'svelte';
-import { isNotBlank, toArray } from 'txstate-utils';
-import { Icon } from '..';
-import { TREE_STORE_CONTEXT, getHashId, lazyObserver } from './treestore';
-import LoadIcon from './LoadIcon.svelte';
-import TreeCell from './TreeCell.svelte';
-export let headers;
-export let headerSizes;
-export let nodeClass = undefined;
-export let item;
-export let posinset;
-export let setsize;
-export let level;
-export let next;
-export let prev;
-export let parent = undefined;
-const store = getContext(TREE_STORE_CONTEXT);
-const { dragging, draggable, selectedUndraggable, selected, focused, copied, headerOverride } = store;
-const dispatch = createEventDispatcher();
-let nodeelement;
-let userWantsCopy = false;
-$: isSelected = $selected.has(item.id);
-$: showChildren = !!item.open && !!item.children?.length;
-$: hashedId = getHashId(item.id);
-$: isDraggable = $draggable && ((isSelected && !$selectedUndraggable) || store.dragEligible([item], true) || store.dragEligible([item], false));
-$: dropZone = $dragging && store.dropEffect(item, false, userWantsCopy) !== 'none';
-$: dropDisabled = $dragging && !dropZone;
-$: dropAbove = $dragging && store.dropEffect(item, true, userWantsCopy) !== 'none';
-$: inClipboard = $copied.has(item.id);
-function onKeyDown(e) {
+<script lang="ts" generics="T extends TreeItemFromDB = TreeItemFromDB">
+  import checkboxOutline from '@iconify-icons/mdi/checkbox-outline'
+  import checkboxBlankOutline from '@iconify-icons/mdi/checkbox-blank-outline'
+  import menuDown from '@iconify-icons/mdi/menu-down'
+  import menuRight from '@iconify-icons/mdi/menu-right'
+  import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components'
+  import type { Store } from '@txstate-mws/svelte-store'
+  import { createEventDispatcher, getContext, onMount } from 'svelte'
+  import { isNotBlank, toArray } from 'txstate-utils'
+  import { Icon } from '..'
+  import { type TreeStore, TREE_STORE_CONTEXT, type TypedTreeItem, type TreeItemFromDB, type TreeHeader, getHashId, lazyObserver } from './treestore'
+  import LoadIcon from './LoadIcon.svelte'
+  import TreeCell from './TreeCell.svelte'
+
+  export let headers: TreeHeader<T>[]
+  export let headerSizes: Store<string[]>
+  export let nodeClass: ((itm: T) => string) | undefined = undefined
+  export let item: TypedTreeItem<T>
+  export let posinset: number
+  export let setsize: number
+  export let level: number
+  export let next: TypedTreeItem<T> | undefined
+  export let prev: TypedTreeItem<T> | undefined
+  export let parent: TypedTreeItem<T> | undefined = undefined
+
+  const store = getContext<TreeStore<T>>(TREE_STORE_CONTEXT)
+  const { dragging, draggable, selectedUndraggable, selected, focused, copied, headerOverride } = store
+
+  const dispatch = createEventDispatcher()
+  let nodeelement: HTMLElement
+
+  let userWantsCopy = false
+  $: isSelected = $selected.has(item.id)
+  $: showChildren = !!item.open && !!item.children?.length
+  $: hashedId = getHashId(item.id)
+  $: isDraggable = $draggable && ((isSelected && !$selectedUndraggable) || store.dragEligible([item], true) || store.dragEligible([item], false))
+  $: dropZone = $dragging && store.dropEffect(item, false, userWantsCopy) !== 'none'
+  $: dropDisabled = $dragging && !dropZone
+  $: dropAbove = $dragging && store.dropEffect(item, true, userWantsCopy) !== 'none'
+  $: inClipboard = $copied.has(item.id)
+
+  function onKeyDown (e: KeyboardEvent) {
     if (e.ctrlKey || e.metaKey) {
-        if (e.key === 'x') {
-            store.cut();
-        }
-        else if (e.key === 'c') {
-            store.copy();
-        }
-        else if (e.key === 'v') {
-            void store.paste();
-        }
-    }
-    else if (e.key === 'Escape') {
-        store.cancelCopy();
+      if (e.key === 'x') {
+        store.cut()
+      } else if (e.key === 'c') {
+        store.copy()
+      } else if (e.key === 'v') {
+        void store.paste()
+      }
+    } else if (e.key === 'Escape') {
+      store.cancelCopy()
     }
-    if (modifierKey(e) && !['Enter', ' '].includes(e.key))
-        return;
+
+    if (modifierKey(e) && !['Enter', ' '].includes(e.key)) return
     if (['Enter', ' '].includes(e.key)) {
-        e.preventDefault();
-        e.stopPropagation();
-        if ($store.selected && $store.selected.size === 1 && $store.selected.has(item.id))
-            dispatch('choose', item);
-        else {
-            if (e.metaKey || e.altKey) {
-                store.select(item, { clear: false, toggle: true });
-            }
-            else if (e.shiftKey) {
-                shiftClick();
-            }
-            else {
-                store.select(item, { clear: true });
-            }
-        }
-    }
-    else if (e.key === 'Escape') {
-        store.deselect();
-    }
-    else if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        e.stopPropagation();
-        if (item.open && item.children?.length) {
-            const child = item.children[0];
-            store.focus(child);
-        }
-        else {
-            void store.open(item);
-        }
-    }
-    else if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        e.stopPropagation();
-        if (item.open) {
-            store.close(item);
-        }
-        else if (parent) {
-            store.focus(parent);
-        }
-    }
-    else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        e.stopPropagation();
-        const mynext = item.open && item.children?.length ? item.children[0] : next;
-        if (mynext) {
-            store.focus(mynext);
-        }
-    }
-    else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        e.stopPropagation();
-        const anyprev = prev;
-        const myprev = anyprev?.open && anyprev.children?.length && (!parent || parent.children?.some(c => c.id === anyprev.id)) ? anyprev.children[anyprev.children.length - 1] : prev;
-        if (myprev) {
-            store.focus(myprev);
-        }
-    }
-    else if (e.key === '*') {
-        e.preventDefault();
-        e.stopPropagation();
-        const toOpen = (parent ? parent.children : $store.rootItems) ?? [];
-        for (const child of toOpen) {
-            store.open(child).catch(console.error);
+      e.preventDefault()
+      e.stopPropagation()
+      if ($store.selected && $store.selected.size === 1 && $store.selected.has(item.id)) dispatch('choose', item)
+      else {
+        if (e.metaKey || e.altKey) {
+          store.select(item, { clear: false, toggle: true })
+        } else if (e.shiftKey) {
+          shiftClick()
+        } else {
+          store.select(item, { clear: true })
         }
+      }
+    } else if (e.key === 'Escape') {
+      store.deselect()
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      e.stopPropagation()
+      if (item.open && item.children?.length) {
+        const child = item.children[0]
+        store.focus(child)
+      } else {
+        void store.open(item)
+      }
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      e.stopPropagation()
+      if (item.open) {
+        store.close(item)
+      } else if (parent) {
+        store.focus(parent)
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      e.stopPropagation()
+      const mynext = item.open && item.children?.length ? item.children[0] : next
+      if (mynext) {
+        store.focus(mynext)
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      e.stopPropagation()
+      const anyprev = prev
+      const myprev = anyprev?.open && anyprev.children?.length && (!parent || parent.children?.some(c => c.id === anyprev.id)) ? anyprev.children[anyprev.children.length - 1] : prev
+      if (myprev) {
+        store.focus(myprev)
+      }
+    } else if (e.key === '*') {
+      e.preventDefault()
+      e.stopPropagation()
+      const toOpen = (parent ? parent.children : $store.rootItems) ?? []
+      for (const child of toOpen) {
+        store.open(child).catch(console.error)
+      }
     }
-}
-function shiftClick() {
-    const treenodes = Array.from(store.treeElement?.querySelectorAll('div[role="treeitem"]') ?? []);
-    const selectedNodes = treenodes.filter(n => n.matches('.selected'));
-    const firstSelected = selectedNodes[0];
+  }
+
+  function shiftClick () {
+    const treenodes: HTMLElement[] = Array.from(store.treeElement?.querySelectorAll('div[role="treeitem"]') ?? [])
+    const selectedNodes = treenodes.filter(n => n.matches('.selected'))
+    const firstSelected = selectedNodes[0]
     if (!firstSelected || (selectedNodes.length === 1 && firstSelected === nodeelement)) {
-        return store.select(item, { toggle: true });
+      return store.select(item, { toggle: true })
     }
-    const lastSelected = selectedNodes[selectedNodes.length - 1];
-    const selectingdownward = firstSelected.compareDocumentPosition(nodeelement) === Node.DOCUMENT_POSITION_FOLLOWING;
-    let selecting = false;
-    store.deselect(false);
+    const lastSelected = selectedNodes[selectedNodes.length - 1]
+    const selectingdownward = firstSelected.compareDocumentPosition(nodeelement) === Node.DOCUMENT_POSITION_FOLLOWING
+    let selecting = false
+    store.deselect(false)
     for (const node of treenodes) {
-        if (selectingdownward && node === firstSelected)
-            selecting = true;
-        if (!selectingdownward && node === nodeelement)
-            selecting = true;
-        if (selecting)
-            store.selectById(node.getAttribute('data-id'), { notify: false, toggle: false });
-        if (selectingdownward && node === nodeelement)
-            selecting = false;
-        if (!selectingdownward && node === lastSelected)
-            selecting = false;
+      if (selectingdownward && node === firstSelected) selecting = true
+      if (!selectingdownward && node === nodeelement) selecting = true
+      if (selecting) store.selectById(node.getAttribute('data-id')!, { notify: false, toggle: false })
+      if (selectingdownward && node === nodeelement) selecting = false
+      if (!selectingdownward && node === lastSelected) selecting = false
     }
-    store.trigger();
-}
-function onClick(e) {
-    if (e.button > 0)
-        return;
-    e.preventDefault();
-    e.stopPropagation();
+    store.trigger()
+  }
+
+  function onClick (e: MouseEvent) {
+    if (e.button > 0) return
+    e.preventDefault()
+    e.stopPropagation()
     if (e.metaKey || e.altKey || e.ctrlKey) {
-        store.select(item, { clear: false, toggle: true });
-    }
-    else if (e.shiftKey) {
-        shiftClick();
-    }
-    else {
-        const wasFocused = $store.focused?.id === item.id;
-        store.select(item, { clear: true, toggle: false });
-        if (item.open && wasFocused && !item.loading)
-            store.close(item);
-        else if (!item.open)
-            void store.open(item);
+      store.select(item, { clear: false, toggle: true })
+    } else if (e.shiftKey) {
+      shiftClick()
+    } else {
+      const wasFocused = $store.focused?.id === item.id
+      store.select(item, { clear: true, toggle: false })
+      if (item.open && wasFocused && !item.loading) store.close(item)
+      else if (!item.open) void store.open(item)
     }
-}
-function onCheckClick(e) {
-    if (e.button > 0)
-        return;
-    e.preventDefault();
-    e.stopPropagation();
+  }
+  function onCheckClick (e: MouseEvent) {
+    if (e.button > 0) return
+    e.preventDefault()
+    e.stopPropagation()
     if (e.shiftKey) {
-        shiftClick();
-    }
-    else {
-        if (isSelected)
-            dispatch('deselect', item);
-        store.select(item, { clear: false, toggle: true });
+      shiftClick()
+    } else {
+      if (isSelected) dispatch('deselect', item)
+      store.select(item, { clear: false, toggle: true })
     }
-}
-function onDblClick(e) {
-    if (modifierKey(e) || e.button > 0)
-        return;
-    e.preventDefault();
-    e.stopPropagation();
-    if ($store.selected.size <= 1)
-        dispatch('choose', item);
-}
-function onDragStart(e) {
-    userWantsCopy = e.dataTransfer.dropEffect === 'copy';
-    e.dataTransfer.effectAllowed = 'copyMove';
-    e.dataTransfer.setData('text/plain', item.id);
-    store.dragStart(item);
-}
-function onDragOver(e) {
-    userWantsCopy = e.dataTransfer.dropEffect === 'copy';
+  }
+  function onDblClick (e: MouseEvent) {
+    if (modifierKey(e) || e.button > 0) return
+    e.preventDefault()
+    e.stopPropagation()
+    if ($store.selected.size <= 1) dispatch('choose', item)
+  }
+  function onDragStart (e: DragEvent) {
+    userWantsCopy = e.dataTransfer!.dropEffect === 'copy'
+    e.dataTransfer!.effectAllowed = 'copyMove'
+    e.dataTransfer!.setData('text/plain', item.id)
+    store.dragStart(item)
+  }
+  function onDragOver (e: DragEvent) {
+    userWantsCopy = e.dataTransfer!.dropEffect === 'copy'
     if (dropZone) {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = store.dropEffect(item, false, userWantsCopy);
+      e.preventDefault()
+      e.dataTransfer!.dropEffect = store.dropEffect(item, false, userWantsCopy)
     }
-    return !dropZone;
-}
-function onDragOverAbove(e) {
-    userWantsCopy = e.dataTransfer.dropEffect === 'copy';
+    return !dropZone
+  }
+  function onDragOverAbove (e: DragEvent) {
+    userWantsCopy = e.dataTransfer!.dropEffect === 'copy'
     if (dropAbove) {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = store.dropEffect(item, true, userWantsCopy);
+      e.preventDefault()
+      e.dataTransfer!.dropEffect = store.dropEffect(item, true, userWantsCopy)
     }
-    return !dropAbove;
-}
-let dragOver = 0;
-let dragOverAbove = 0;
-async function onDrop(e) {
-    e.preventDefault();
-    dragOver = 0;
-    return await store.drop(item, false, e.dataTransfer.dropEffect === 'copy');
-}
-async function onDropAbove(e) {
-    e.preventDefault();
-    dragOverAbove = 0;
-    return await store.drop(item, true, e.dataTransfer.dropEffect === 'copy');
-}
-function onDragEnter(e) {
-    if (!dropZone)
-        dragOver = 0;
-    else
-        dragOver++;
-    onDragOver(e);
-}
-function onDragEnterAbove(e) {
-    if (!dropAbove)
-        dragOverAbove = 0;
-    else
-        dragOverAbove++;
-    onDragOverAbove(e);
-}
-function onDragLeave(e) {
-    if (!dropZone)
-        dragOver = 0;
-    else
-        dragOver--;
-}
-function onDragLeaveAbove(e) {
-    if (!dropAbove)
-        dragOverAbove = 0;
-    else
-        dragOverAbove--;
-}
-let display = $focused && $focused.id === item.id;
-onMount(() => {
-    if ($focused && $focused.id === item.id)
-        nodeelement.scrollIntoView({ block: 'center' });
-    nodeelement.addEventListener('lazy', () => { display = true; });
-    lazyObserver.observe(nodeelement);
-    return () => lazyObserver.unobserve(nodeelement);
-});
-$: if ($dragging) {
-    dragOver = 0;
-    dragOverAbove = 0;
-}
+    return !dropAbove
+  }
+  let dragOver = 0
+  let dragOverAbove = 0
+  async function onDrop (e: DragEvent) {
+    e.preventDefault()
+    dragOver = 0
+    return await store.drop(item, false, e.dataTransfer!.dropEffect === 'copy')
+  }
+  async function onDropAbove (e: DragEvent) {
+    e.preventDefault()
+    dragOverAbove = 0
+    return await store.drop(item, true, e.dataTransfer!.dropEffect === 'copy')
+  }
+  function onDragEnter (e: DragEvent) {
+    if (!dropZone) dragOver = 0
+    else dragOver++
+    onDragOver(e)
+  }
+  function onDragEnterAbove (e: DragEvent) {
+    if (!dropAbove) dragOverAbove = 0
+    else dragOverAbove++
+    onDragOverAbove(e)
+  }
+  function onDragLeave (e: DragEvent) {
+    if (!dropZone) dragOver = 0
+    else dragOver--
+  }
+  function onDragLeaveAbove (e: DragEvent) {
+    if (!dropAbove) dragOverAbove = 0
+    else dragOverAbove--
+  }
+
+  let display = $focused && $focused.id === item.id
+  onMount(() => {
+    if ($focused && $focused.id === item.id) nodeelement.scrollIntoView({ block: 'center' })
+    nodeelement.addEventListener('lazy', () => { display = true })
+    lazyObserver!.observe(nodeelement)
+    return () => lazyObserver!.unobserve(nodeelement)
+  })
+
+  $: if ($dragging) {
+    dragOver = 0
+    dragOverAbove = 0
+  }
 </script>
 <li role="presentation">
   {#if dropAbove}
@@ -439,5 +412,4 @@ $: if ($dragging) {
       animation: none;
     }
   }
-
 </style>

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Store } from '@txstate-mws/svelte-store';
 import { type TypedTreeItem, type TreeItemFromDB, type TreeHeader } from './treestore';
-declare class __sveltets_Render<T extends TreeItemFromDB> {
+declare class __sveltets_Render<T extends TreeItemFromDB = TreeItemFromDB> {
     props(): {
         headers: TreeHeader<T>[];
         headerSizes: Store<string[]>;
@@ -22,9 +22,9 @@ declare class __sveltets_Render<T extends TreeItemFromDB> {
     };
     slots(): {};
 }
-export type TreeNodeProps<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
-export type TreeNodeEvents<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
-export type TreeNodeSlots<T extends TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TreeNode<T extends TreeItemFromDB> extends SvelteComponentTyped<TreeNodeProps<T>, TreeNodeEvents<T>, TreeNodeSlots<T>> {
+export type TreeNodeProps<T extends TreeItemFromDB = TreeItemFromDB> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeNodeEvents<T extends TreeItemFromDB = TreeItemFromDB> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeNodeSlots<T extends TreeItemFromDB = TreeItemFromDB> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TreeNode<T extends TreeItemFromDB = TreeItemFromDB> extends SvelteComponentTyped<TreeNodeProps<T>, TreeNodeEvents<T>, TreeNodeSlots<T>> {
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.2.8",
+  "version": "1.3.1",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -23,24 +23,23 @@
     "@codemirror/lang-javascript": "^6.1.7",
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.3",
-    "@iconify/svelte": "^4.0.0",
+    "@iconify/svelte": "^4.0.0 || ^5.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
     "@txstate-mws/svelte-components": "^1.6.11",
-    "@txstate-mws/svelte-forms": "^1.5.5",
+    "@txstate-mws/svelte-forms": "^2.0.0",
     "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/adapter-auto": "^6.0.0",
     "@sveltejs/kit": "^2.0.1",
     "@sveltejs/package": "^2.0.1",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "eslint-config-standard-with-typescript": "^43.0.0",
-    "eslint-plugin-svelte": "^2.0.0",
-    "svelte-check": "^3.0.1",
-    "svelte": "^4.0.0",
-    "tslib": "^2.3.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte": "^5.0.0",
     "typescript": "^5.0.2"
   },
   "peerDependencies": {