@isoftdata/svelte-table 2.10.5 → 2.11.1

package/dist/TreeRow.svelte

@@ -1,170 +1,170 @@
-<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<(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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isoftdata/svelte-table",
-  "version": "2.10.5",
+  "version": "2.11.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",