@isoftdata/svelte-table 2.11.0 → 2.11.1

package/dist/Td.svelte

@@ -1,171 +1,171 @@
-<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] as (typeof columnInfo.current)[typeof property] | undefined,
-	)
-	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,
-			{
-				pinned: thisColumnInfo?.pinned,
-			},
-		]}
-		{...rest}
-		style:font-variant-numeric={thisColumnInfo?.numeric ? 'tabular-nums' : undefined}
-		style:overflow={$columnResizingEnabled ? 'hidden' : undefined}
-		style:text-overflow={$columnResizingEnabled ? 'ellipsis' : undefined}
-		style:--pinned-column-offset={thisColumnInfo?.pinned ? columnInfo.getPinnedColumnOffset(property) : 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;
-	}
-
-	.pinned {
-		position: sticky;
-		z-index: 10 !important;
-		left: var(--pinned-column-offset, -1);
-	}
-</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] as (typeof columnInfo.current)[typeof property] | undefined,
+	)
+	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,
+			{
+				pinned: thisColumnInfo?.pinned,
+			},
+		]}
+		{...rest}
+		style:font-variant-numeric={thisColumnInfo?.numeric ? 'tabular-nums' : undefined}
+		style:overflow={$columnResizingEnabled ? 'hidden' : undefined}
+		style:text-overflow={$columnResizingEnabled ? 'ellipsis' : undefined}
+		style:--pinned-column-offset={thisColumnInfo?.pinned ? columnInfo.getPinnedColumnOffset(property) : 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;
+	}
+
+	.pinned {
+		position: sticky;
+		z-index: 10 !important;
+		left: var(--pinned-column-offset, -1);
+	}
+</style>