@isoftdata/svelte-table 2.9.2 → 2.9.4

package/dist/Td.svelte

@@ -1,156 +1,156 @@
-<script
-	lang="ts"
-	generics="R extends UuidRowProps = any"
->
-	import type { ColumnInfo, RowProperties, UuidRowProps } from './'
-	import type { ColumnInfoRunicStore } from './column-info-store.svelte'
-	import type { HTMLTdAttributes, ClassValue } from 'svelte/elements'
-	import type { Writable } from 'svelte/store'
-	import { getContext, onMount, type Snippet } from 'svelte'
-
-	// Get the columnInfo store from the Table component
-	const columnInfo = getContext<ColumnInfoRunicStore<UuidRowProps>>('columnInfo')
-	const columnResizingEnabled = getContext<Writable<boolean>>('columnResizingEnabled')
-	const bs5 = getContext<boolean>('bs5')
-
-	interface Props extends Omit<HTMLTdAttributes, 'align'> {
-		class?: ClassValue
-		property: ColumnInfo<R>['property']
-		/** Direction to align the column's contents
-		 *
-		 * `start` and `end` are only available in Bootstrap 5+
-		 *
-		 * `left` and `right`should only be used while you transition to Boostrap 5+
-		 */
-		align?: 'start' | 'left' | 'center' | 'right' | 'end'
-		/** If enabled, pressing enter while focused in this Td will focus the next non-disabled input/select/textarea in the column. Holding shift will go up instead of down.
-		 *
-		 * Can also be a callback that is fired when the enter key is used to move between rows.
-		 */
-		enterGoesDown?: boolean | ((ctx: { event: KeyboardEvent; tr: HTMLTableRowElement }) => void)
-		/** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
-		stopPropagation?: boolean
-		tagName?: 'TD' | 'TH'
-		children?: Snippet
-	}
-
-	let {
-		//
-		class: classNames = '',
-		property,
-		align = $bindable(columnInfo.current[property]?.align),
-		enterGoesDown = false,
-		stopPropagation = false,
-		tagName = 'TD',
-		children,
-		...rest
-	}: Props = $props()
-
-	const thisColumnInfo = $derived(columnInfo.current[property])
-	const alignClass = $derived.by(() => {
-		let alignment = align || thisColumnInfo?.align || (thisColumnInfo?.numeric ? 'right' : undefined)
-		if (bs5 && alignment === 'right') {
-			alignment = 'end'
-		} else if (bs5 && alignment === 'left') {
-			alignment = 'start'
-		}
-		return alignment ? (`text-${alignment}` as const) : ''
-	})
-	const visible = $derived(thisColumnInfo?.visible ?? true)
-
-	/** Handle `stopPropagation` and `enterGoesDown` props */
-	function onkeypress(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			event.stopPropagation()
-			event.preventDefault()
-		}
-
-		if (event.key === 'Enter' && enterGoesDown) {
-			const target = event.target
-			if (!(target instanceof HTMLElement)) {
-				return
-			}
-			const tr = target?.closest('tr') ?? null
-			const td = target?.closest('td') ?? null
-			const tdIndex = td ? Array.from(tr?.children ?? []).indexOf(td) : -1
-			const allTrs = Array.from(tr?.parentElement?.children ?? [])
-
-			// if they're holding shift, reverse the tr list
-			if (event.shiftKey) {
-				allTrs.reverse()
-			}
-			// Find the next Td in the column with a non-disabled input, select, or textarea
-			const lastTrIndex = tr ? allTrs.indexOf(tr) : -1
-			const newTrIndex = allTrs.findIndex(
-				(tr, index) =>
-					index > lastTrIndex &&
-					tr.children[tdIndex]?.querySelector('input:enabled, select:enabled, textarea:enabled') &&
-					tr instanceof HTMLTableRowElement &&
-					tr.offsetParent !== null,
-			)
-			const theTd = allTrs[newTrIndex]?.children[tdIndex] ?? null
-			theTd?.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>('input,select,textarea')?.focus()
-			if (typeof enterGoesDown === 'function') {
-				enterGoesDown({
-					tr: allTrs[newTrIndex] as HTMLTableRowElement,
-					event,
-				})
-			}
-		}
-	}
-
-	onMount(() => {
-		if (!(property in columnInfo.current)) {
-			console.warn(
-				`Column "${property}" does not exist in its parent Table component's list of columns.\r\n\r\nPlease check that this Td's "property" prop matches the "property" prop of one of the columns in the parent Table component.`,
-			)
-		}
-	})
-</script>
-
-{#if visible}
-	<svelte:element
-		this={tagName}
-		class={[classNames, alignClass]}
-		{...rest}
-		style:font-variant-numeric={thisColumnInfo?.numeric ? 'tabular-nums' : undefined}
-		style:overflow={$columnResizingEnabled ? 'hidden' : undefined}
-		style:text-overflow={$columnResizingEnabled ? 'ellipsis' : undefined}
-	>
-		<!--
-			Don't listen to events that the user hasn't turned on the features for.
-			Also, put them on a span so they can still click in the td to click the row but not the td's child content
-		-->
-		{#if stopPropagation || enterGoesDown}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<span
-				onclick={stopPropagation ? e => e.stopPropagation() : undefined}
-				{onkeypress}
-			>
-				{@render children?.()}
-			</span>
-		{:else}
-			{@render children?.()}
-		{/if}
-	</svelte:element>
-{/if}
-
-<style>
-	td.text-right :global(input),
-	td.text-end :global(input) {
-		text-align: right;
-	}
-	td.text-right :global(select),
-	td.text-end :global(select) {
-		text-align: right;
-	}
-	td.text-right :global(textarea),
-	td.text-end :global(textarea) {
-		text-align: right;
-	}
-
-	/* BS5 uses floats for checkbox alignment, which overrides the text align classes, so undo that here. */
-	td:where(.text-start, .text-center, .text-end) :global(.form-check-input) {
-		float: unset;
-	}
-</style>
+<script
+	lang="ts"
+	generics="R extends UuidRowProps = any"
+>
+	import type { ColumnInfo, RowProperties, UuidRowProps } from './'
+	import type { ColumnInfoRunicStore } from './column-info-store.svelte'
+	import type { HTMLTdAttributes, ClassValue } from 'svelte/elements'
+	import type { Writable } from 'svelte/store'
+	import { getContext, onMount, type Snippet } from 'svelte'
+
+	// Get the columnInfo store from the Table component
+	const columnInfo = getContext<ColumnInfoRunicStore<UuidRowProps>>('columnInfo')
+	const columnResizingEnabled = getContext<Writable<boolean>>('columnResizingEnabled')
+	const bs5 = getContext<boolean>('bs5')
+
+	interface Props extends Omit<HTMLTdAttributes, 'align'> {
+		class?: ClassValue
+		property: ColumnInfo<R>['property']
+		/** Direction to align the column's contents
+		 *
+		 * `start` and `end` are only available in Bootstrap 5+
+		 *
+		 * `left` and `right`should only be used while you transition to Boostrap 5+
+		 */
+		align?: 'start' | 'left' | 'center' | 'right' | 'end'
+		/** If enabled, pressing enter while focused in this Td will focus the next non-disabled input/select/textarea in the column. Holding shift will go up instead of down.
+		 *
+		 * Can also be a callback that is fired when the enter key is used to move between rows.
+		 */
+		enterGoesDown?: boolean | ((ctx: { event: KeyboardEvent; tr: HTMLTableRowElement }) => void)
+		/** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
+		stopPropagation?: boolean
+		tagName?: 'TD' | 'TH'
+		children?: Snippet
+	}
+
+	let {
+		//
+		class: classNames = '',
+		property,
+		align = $bindable(columnInfo.current[property]?.align),
+		enterGoesDown = false,
+		stopPropagation = false,
+		tagName = 'TD',
+		children,
+		...rest
+	}: Props = $props()
+
+	const thisColumnInfo = $derived(columnInfo.current[property])
+	const alignClass = $derived.by(() => {
+		let alignment = align || thisColumnInfo?.align || (thisColumnInfo?.numeric ? 'right' : undefined)
+		if (bs5 && alignment === 'right') {
+			alignment = 'end'
+		} else if (bs5 && alignment === 'left') {
+			alignment = 'start'
+		}
+		return alignment ? (`text-${alignment}` as const) : ''
+	})
+	const visible = $derived(thisColumnInfo?.visible ?? true)
+
+	/** Handle `stopPropagation` and `enterGoesDown` props */
+	function onkeypress(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.stopPropagation()
+			event.preventDefault()
+		}
+
+		if (event.key === 'Enter' && enterGoesDown) {
+			const target = event.target
+			if (!(target instanceof HTMLElement)) {
+				return
+			}
+			const tr = target?.closest('tr') ?? null
+			const td = target?.closest('td') ?? null
+			const tdIndex = td ? Array.from(tr?.children ?? []).indexOf(td) : -1
+			const allTrs = Array.from(tr?.parentElement?.children ?? [])
+
+			// if they're holding shift, reverse the tr list
+			if (event.shiftKey) {
+				allTrs.reverse()
+			}
+			// Find the next Td in the column with a non-disabled input, select, or textarea
+			const lastTrIndex = tr ? allTrs.indexOf(tr) : -1
+			const newTrIndex = allTrs.findIndex(
+				(tr, index) =>
+					index > lastTrIndex &&
+					tr.children[tdIndex]?.querySelector('input:enabled, select:enabled, textarea:enabled') &&
+					tr instanceof HTMLTableRowElement &&
+					tr.offsetParent !== null,
+			)
+			const theTd = allTrs[newTrIndex]?.children[tdIndex] ?? null
+			theTd?.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>('input,select,textarea')?.focus()
+			if (typeof enterGoesDown === 'function') {
+				enterGoesDown({
+					tr: allTrs[newTrIndex] as HTMLTableRowElement,
+					event,
+				})
+			}
+		}
+	}
+
+	onMount(() => {
+		if (!(property in columnInfo.current)) {
+			console.warn(
+				`Column "${property}" does not exist in its parent Table component's list of columns.\r\n\r\nPlease check that this Td's "property" prop matches the "property" prop of one of the columns in the parent Table component.`,
+			)
+		}
+	})
+</script>
+
+{#if visible}
+	<svelte:element
+		this={tagName}
+		class={[classNames, alignClass]}
+		{...rest}
+		style:font-variant-numeric={thisColumnInfo?.numeric ? 'tabular-nums' : undefined}
+		style:overflow={$columnResizingEnabled ? 'hidden' : undefined}
+		style:text-overflow={$columnResizingEnabled ? 'ellipsis' : undefined}
+	>
+		<!--
+			Don't listen to events that the user hasn't turned on the features for.
+			Also, put them on a span so they can still click in the td to click the row but not the td's child content
+		-->
+		{#if stopPropagation || enterGoesDown}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<span
+				onclick={stopPropagation ? e => e.stopPropagation() : undefined}
+				{onkeypress}
+			>
+				{@render children?.()}
+			</span>
+		{:else}
+			{@render children?.()}
+		{/if}
+	</svelte:element>
+{/if}
+
+<style>
+	td.text-right :global(input),
+	td.text-end :global(input) {
+		text-align: right;
+	}
+	td.text-right :global(select),
+	td.text-end :global(select) {
+		text-align: right;
+	}
+	td.text-right :global(textarea),
+	td.text-end :global(textarea) {
+		text-align: right;
+	}
+
+	/* BS5 uses floats for checkbox alignment, which overrides the text align classes, so undo that here. */
+	td:where(.text-start, .text-center, .text-end) :global(.form-check-input) {
+		float: unset;
+	}
+</style>

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.9.2",
+  "version": "2.9.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@fortawesome/fontawesome-common-types": "^6.7.2",
+    "@fortawesome/fontawesome-common-types": "^7.1.0",
     "@isoftdata/prettier-config": "^2.0.4",
     "@isoftdata/svelte-bootstrap-version-switcher": "^1.1.2",
     "@isoftdata/svelte-checkbox": "^2.2.1",