@isoftdata/svelte-table 2.11.1 → 2.12.0

package/dist/TreeRow.svelte

@@ -1,170 +1,171 @@
-<script
-	lang="ts"
-	generics="T"
->
-	import type { Snippet } from 'svelte'
-	import type { Writable } from 'svelte/store'
-	import type { ClassValue } from 'svelte/elements'
-	import type { TreeNode, IdKeyType, ParentIdKeyType } from './tree-utility.js'
-	import TreeRow from './TreeRow.svelte'
-
-	type Key = IdKeyType<T>
-	type ParentKey = ParentIdKeyType<T>
-	type Node = TreeNode<T, Key, ParentKey>
-
-	import Button from '@isoftdata/svelte-button'
-	import Td from './Td.svelte'
-	import { getContext, hasContext, onMount } from 'svelte'
-
-	// 2 rem nest padding -> ml-2
-	// 1.5 rem leaf padding -> ml-3
-	const NEST_PADDING = 1.5 // rem
-	const LEAF_MARGIN_CLASS = 'ml-3'
-
-	interface Props {
-		property: keyof T
-		idProp: Key
-		parentIdProp: ParentKey
-		node: Node
-		depth?: number
-		showLabel?: boolean
-		class?: ClassValue
-		// Snippets
-		button?: Snippet<[{ node: Node }]>
-		first?: Snippet<[{ node: Node }]>
-		children?: Snippet<[{ node: Node }]>
-		// Callbacks
-		rowClick?: (context: { node: Node }) => void
-		toggleFold?: (context: { expanded: boolean }) => void
-	}
-
-	let {
-		//
-		property,
-		idProp,
-		parentIdProp,
-		node,
-		depth = 0,
-		showLabel = true,
-		class: className = '',
-		button,
-		first,
-		children,
-		rowClick,
-		toggleFold,
-	}: Props = $props()
-
-	function pad(depth: number) {
-		return depth * NEST_PADDING + 'rem'
-	}
-
-	const selectedRowIds = getContext<Writable<(number | string)[]>>('selectedRowIds')
-	if (!hasContext('expandedRows')) {
-		throw new Error('TreeRow requires that the `tree` prop is set to true on a parent Table component.')
-	}
-	const expandedRows = getContext<Writable<Record<number | string, boolean>>>('expandedRows')
-
-	let expanded = $derived($expandedRows[node[idProp] as number | string] ?? false)
-	let icon: 'caret-down' | 'caret-right' = $derived(expanded ? 'caret-down' : 'caret-right')
-	let buttonPadding = $derived(pad(depth))
-	let leafPadding = $derived(pad(depth + 1))
-	let childRows = $derived(node ? node.children : [])
-
-	let selected = $derived($selectedRowIds ? $selectedRowIds.includes(node[idProp] as number | string) : false)
-	let stringProperty = $derived(typeof property === 'string' ? property : property.toString())
-
-	function setExpanded(expanded: boolean) {
-		$expandedRows[node[idProp] as number | string] = expanded
-		toggleFold?.({ expanded })
-	}
-
-	function onFoldClick(event: MouseEvent) {
-		event.preventDefault()
-		event.stopPropagation()
-		setExpanded(!expanded)
-	}
-	onMount(() => {
-		// Run this on mount so on page load, the selected row is expanded.
-		function isExpanded(expandedRows: Record<number | string, boolean>, node: Node): boolean {
-			if (expandedRows[node[idProp] as number | string]) {
-				return true
-			}
-			if (node.children) {
-				return node.children.some(
-					child => isExpanded(expandedRows, child) || $selectedRowIds.includes(child[idProp] as number | string),
-				)
-			}
-			return false
-		}
-		if (!expanded && node.children) {
-			$expandedRows[node[idProp] as number | string] = isExpanded($expandedRows, node)
-		}
-	})
-</script>
-
-<tr
-	class={className}
-	class:table-primary={selected}
-	data-id={node[idProp]}
-	data-parentid={node[parentIdProp]}
-	onclick={() => rowClick?.({ node })}
-	ondblclick={onFoldClick}
->
-	<Td property={stringProperty}>
-		{#if childRows.length}
-			<Button
-				size="xs"
-				color="link"
-				style="padding-left: {buttonPadding}; box-shadow: none!important; font-size: 1rem; text-wrap: nowrap;"
-				icon={{ icon: icon, class: 'fa-xl', fixedWidth: true, prefix: 'fas' }}
-				disabled={!childRows.length}
-				colorGreyDisabled={false}
-				onclick={onFoldClick}
-				onkeydown={e => {
-					if (e.key === 'ArrowRight') {
-						setExpanded(true)
-					} else if (e.key === 'ArrowLeft') {
-						setExpanded(false)
-					}
-				}}
-				>{@render button?.({ node })}
-				{#if showLabel}
-					{node[property]}
-				{/if}
-			</Button>
-		{:else if showLabel}
-			<span
-				class={LEAF_MARGIN_CLASS}
-				style="padding-left: {leafPadding}; text-wrap: nowrap;">{node[property]}</span
-			>
-		{/if}
-		{@render first?.({ node })}
-	</Td>
-	<!-- The rest of the Row -->
-	{@render children?.({ node })}
-</tr>
-
-{#if expanded}
-	{#each childRows as child}
-		<TreeRow
-			node={child}
-			depth={depth + 1}
-			{property}
-			{idProp}
-			{parentIdProp}
-			{showLabel}
-			{rowClick}
-			class={className}
-		>
-			{#snippet children(args)}
-				{@render children?.(args)}
-			{/snippet}
-			{#snippet first(args)}
-				{@render first?.(args)}
-			{/snippet}
-			{#snippet button(args)}
-				{@render button?.(args)}
-			{/snippet}
-		</TreeRow>
-	{/each}
-{/if}
+<script
+	lang="ts"
+	generics="T"
+>
+	import type { Snippet } from 'svelte'
+	import type { Writable } from 'svelte/store'
+	import type { ClassValue } from 'svelte/elements'
+	import type { TreeNode, IdKeyType, ParentIdKeyType } from './tree-utility.js'
+	import TreeRow from './TreeRow.svelte'
+
+	type Key = IdKeyType<T>
+	type ParentKey = ParentIdKeyType<T>
+	type Node = TreeNode<T, Key, ParentKey>
+
+	import Button from '@isoftdata/svelte-button'
+	import Td from './Td.svelte'
+	import { getContext, hasContext, onMount } from 'svelte'
+
+	// 2 rem nest padding -> ml-2
+	// 1.5 rem leaf padding -> ml-3
+	const NEST_PADDING = 1.5 // rem
+	const LEAF_MARGIN_CLASS = 'ml-3'
+
+	interface Props {
+		property: keyof T
+		idProp: Key
+		parentIdProp: ParentKey
+		node: Node
+		depth?: number
+		showLabel?: boolean
+		class?: ClassValue
+		// Snippets
+		button?: Snippet<[{ node: Node }]>
+		first?: Snippet<[{ node: Node }]>
+		children?: Snippet<[{ node: Node }]>
+		// Callbacks
+		rowClick?: (context: { node: Node }) => void
+		toggleFold?: (context: { expanded: boolean }) => void
+	}
+
+	let {
+		//
+		property,
+		idProp,
+		parentIdProp,
+		node,
+		depth = 0,
+		showLabel = true,
+		class: className = '',
+		button,
+		first,
+		children,
+		rowClick,
+		toggleFold,
+	}: Props = $props()
+
+	function pad(depth: number) {
+		return `${depth * NEST_PADDING}rem`
+	}
+
+	const selectedRowIds = getContext<Writable<Array<number | string>>>('selectedRowIds')
+	if (!hasContext('expandedRows')) {
+		throw new Error('TreeRow requires that the `tree` prop is set to true on a parent Table component.')
+	}
+	const expandedRows = getContext<Writable<Record<number | string, boolean>>>('expandedRows')
+
+	let expanded = $derived($expandedRows[node[idProp] as number | string] ?? false)
+	let icon: 'caret-down' | 'caret-right' = $derived(expanded ? 'caret-down' : 'caret-right')
+	let buttonPadding = $derived(pad(depth))
+	let leafPadding = $derived(pad(depth + 1))
+	let childRows = $derived(node ? node.children : [])
+
+	let selected = $derived($selectedRowIds ? $selectedRowIds.includes(node[idProp] as number | string) : false)
+	let stringProperty = $derived(typeof property === 'string' ? property : property.toString())
+
+	function setExpanded(expanded: boolean) {
+		$expandedRows[node[idProp] as number | string] = expanded
+		toggleFold?.({ expanded })
+	}
+
+	function onFoldClick(event: MouseEvent) {
+		event.preventDefault()
+		event.stopPropagation()
+		setExpanded(!expanded)
+	}
+	onMount(() => {
+		// Run this on mount so on page load, the selected row is expanded.
+		function isExpanded(expandedRows: Record<number | string, boolean>, node: Node): boolean {
+			if (expandedRows[node[idProp] as number | string]) {
+				return true
+			}
+			if (node.children) {
+				return node.children.some(
+					child => isExpanded(expandedRows, child) || $selectedRowIds.includes(child[idProp] as number | string),
+				)
+			}
+			return false
+		}
+		if (!expanded && node.children) {
+			$expandedRows[node[idProp] as number | string] = isExpanded($expandedRows, node)
+		}
+	})
+</script>
+
+<tr
+	class={className}
+	class:table-primary={selected}
+	data-id={node[idProp]}
+	data-parentid={node[parentIdProp]}
+	onclick={() => rowClick?.({ node })}
+	ondblclick={onFoldClick}
+>
+	<Td property={stringProperty}>
+		{#if childRows.length}
+			<Button
+				size="xs"
+				color="link"
+				style="padding-left: {buttonPadding}; box-shadow: none!important; font-size: 1rem; text-wrap: nowrap;"
+				icon={{ icon, class: 'fa-xl', fixedWidth: true, prefix: 'fas' }}
+				disabled={!childRows.length}
+				colorGreyDisabled={false}
+				onclick={onFoldClick}
+				onkeydown={e => {
+					if (e.key === 'ArrowRight') {
+						setExpanded(true)
+					} else if (e.key === 'ArrowLeft') {
+						setExpanded(false)
+					}
+				}}
+				>{@render button?.({ node })}
+				{#if showLabel}
+					{node[property]}
+				{/if}
+			</Button>
+		{:else if showLabel}
+			<span
+				class={LEAF_MARGIN_CLASS}
+				style="padding-left: {leafPadding}; text-wrap: nowrap;">{node[property]}</span
+			>
+		{/if}
+		{@render first?.({ node })}
+	</Td>
+	<!-- The rest of the Row -->
+	{@render children?.({ node })}
+</tr>
+
+{#if expanded}
+	<!-- eslint-disable-next-line svelte/require-each-key -->
+	{#each childRows as child}
+		<TreeRow
+			node={child}
+			depth={depth + 1}
+			{property}
+			{idProp}
+			{parentIdProp}
+			{showLabel}
+			{rowClick}
+			class={className}
+		>
+			{#snippet children(args)}
+				{@render children?.(args)}
+			{/snippet}
+			{#snippet first(args)}
+				{@render first?.(args)}
+			{/snippet}
+			{#snippet button(args)}
+				{@render button?.(args)}
+			{/snippet}
+		</TreeRow>
+	{/each}
+{/if}

package/dist/bracket-paths.d.ts

@@ -1,10 +1,12 @@
-import type { PathsOptions, Paths } from 'type-fest';
+import type { Paths } from 'type-fest';
 /**
 Generate a union of all possible paths to properties in the given object, denoting the object structure with brackets.
 
 This is the `Paths` utility type from the `type-fest` package, but with brackets.
 */
-export type BracketPaths<Row, Options extends PathsOptions = {}> = DotToBracket<Paths<Row, Options>>;
-export type DotToBracket<S extends string | unknown> = S extends `${infer Head}.${infer Tail}` ? `${Head}${_DotToBracketTail<Tail>}` : S;
+export type BracketPaths<Row> = DotToBracket<Paths<Row, {
+    maxRecursionDepth: 3;
+}>>;
+export type DotToBracket<S> = S extends string ? S extends `${infer Head}.${infer Tail}` ? `${Head}${_DotToBracketTail<Tail>}` : S : never;
 type _DotToBracketTail<S extends string> = S extends `${infer Part}.${infer Rest}` ? `[${Part}]${_DotToBracketTail<Rest>}` : `[${S}]`;
 export {};

package/dist/tree-utility.d.ts

@@ -16,7 +16,7 @@ export type TreeNode<T, IdKeypath extends IdKeyType<T>, ParentIdKeypath extends
  * @param idKey The name of a unique id property on the objects in the array
  * @param parentIdKey The name of a property on the objects in the array that references the id of the parent object
  */
-export declare function treeify<T extends object, K extends IdKeyType<T>, P extends ParentIdKeyType<T>>(array: T[], idKey: K, parentIdKey: P): TreeNode<T, K, P>[];
+export declare function treeify<T extends object, K extends IdKeyType<T>, P extends ParentIdKeyType<T>>(array: Array<T>, idKey: K, parentIdKey: P): TreeNode<T, K, P>[];
 /**
  * Gets the path to a node in the tree with the given id
  * @param tree The tree

package/dist/tree-utility.js

@@ -121,9 +121,7 @@ export function upsertIntoTree(tree, node, key, parentKey) {
  * @param deleteChildren If true, the node's children will be deleted. If false, the node's children will be moved to the node's parent
  * @returns The tree, with the node(s) removed
  */
-export function removeFromTree(tree, node, key, parentKey, 
-// eslint-disable-next-line comma-dangle
-deleteChildren = false) {
+export function removeFromTree(tree, node, key, parentKey, deleteChildren = false) {
     const foundNode = findNodeById(tree, key, node[key]);
     if (foundNode) {
         const parent = foundNode.parent;

package/dist/types.d.ts

@@ -8,11 +8,7 @@ export type SortDirection = 'ASC' | 'DESC';
  *
  * Can include bracket notation for nested properties, e.g. `foo[bar]` for `{ foo: { bar: 'baz' } }`. Max recursion depth is 3.
  */
-export type RowProperties<R> = BracketPaths<R, {
-    maxRecursionDepth: 3;
-}> extends never ? string : BracketPaths<R, {
-    maxRecursionDepth: 3;
-}>;
+export type RowProperties<R> = BracketPaths<R> extends never ? string : BracketPaths<R>;
 /** A column in your table.
  *
  * If you specify a type for your row object, `property` must be a valid path to a property of that object.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isoftdata/svelte-table",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,35 +13,32 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.22.1"
+    "svelte": "5.55.5"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@fortawesome/fontawesome-common-types": "^7.1.0",
+    "@isoftdata/eslint-config-svelte": "^1.1.0",
     "@isoftdata/prettier-config": "^2.0.4",
     "@isoftdata/svelte-bootstrap-version-switcher": "^1.1.2",
     "@isoftdata/svelte-checkbox": "^2.2.1",
     "@isoftdata/svelte-select": "^2.0.1",
     "@isoftdata/svelte-textarea": "^2.0.0",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.53.2",
-    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/kit": "^2.59.1",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/natural-compare-lite": "^1.4.2",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-svelte": "^2.46.1",
+    "eslint": "^10.3.0",
     "i18next": "^24.2.2",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.1.16",
-    "svelte": "5.53.5",
+    "svelte": "5.55.5",
     "svelte-check": "^4.1.4",
     "tslib": "^2.8.1",
     "type-fest": "^4.41.0",
-    "typescript": "^5.8.2",
+    "typescript": "^6.0.3",
     "vite": "^6.2.0"
   },
   "svelte": "./dist/index.js",
@@ -51,7 +48,7 @@
   "dependencies": {
     "@isoftdata/browser-event": "^2.3.2",
     "@isoftdata/svelte-button": "^2.1.0",
-    "@isoftdata/svelte-context-menu": "^2.0.4",
+    "@isoftdata/svelte-context-menu": "^2.1.0",
     "@isoftdata/svelte-icon": "^2.1.0",
     "@isoftdata/svelte-input": "^2.1.1",
     "@isoftdata/svelte-store-user-local-writable": "^2.0.0",
@@ -59,12 +56,13 @@
     "@isoftdata/utility-currency": "^3.0.0",
     "@isoftdata/utility-string": "^2.1.0",
     "@lukeed/uuid": "^2.0.1",
+    "@types/node": "^22.19.18",
     "klona": "^2.0.6",
     "natural-compare-lite": "^1.4.0",
     "runed": "^0.23.4"
   },
   "engines": {
-    "pnpm": "10.x"
+    "pnpm": "11.x"
   },
   "scripts": {
     "dev": "vite dev",