@isoftdata/svelte-table 2.9.5 → 2.10.0-beta.0

package/dist/DraggableRows.svelte

@@ -1,285 +1,285 @@
-<script
-	lang="ts"
-	generics="Row extends UuidRowProps"
->
-	import type { Snippet } from 'svelte'
-	import type { ClassValue } from 'svelte/elements'
-	import type { StringKeyOfType } from './tree-utility'
-
-	import type Table from './Table.svelte'
-	import type { Column, UuidRowProps } from './'
-	import Td from './Td.svelte'
-	import { flip } from 'svelte/animate'
-	import { getContext, tick } from 'svelte'
-	import Button from '@isoftdata/svelte-button'
-
-	type RankProperty = StringKeyOfType<Row, number | null>
-
-	interface Props {
-		/** Columns definition */
-		columns: Array<Column>
-		/** This should be the same value passed to the table's `rows` prop. You should `bind:` this so changes to the rank column propagate back to the table component.*/
-		rows: Array<Row>
-		/** This should be the same value passed to the table's `currentPageRows` prop. */
-		currentPageRows: Array<Row & { originalIndex: number; uuid: string }>
-		/** The property of the column containing the "rank" or "order" of the row */
-		rankProperty: RankProperty
-		/** The table component this component is in. */
-		table: Table<Row> | undefined
-		/** Used to discriminate what is being dragged/dropped. If you have two draggable tables on the same page, consider changing this.*/
-		dataType?: string
-		/** Whether to show the rank next to the drag target*/
-		showRank?: boolean
-		/** Any classes to apply to every `tr`*/
-		class?: ClassValue
-		/** A function that computes any classes you want to add conditionally based on the state of the current row*/
-		computeClass?: (row: Row) => ClassValue
-		/** A function that computes if a row should be enabled for reordering(drag or stepper buttons) */
-		computeReorderability?: ((row: Row) => boolean) | undefined
-		/** The rank the list starts at. Defaults to 1. */
-		firstRank?: number
-		// Snippets
-		prepend?: Snippet<[{ row: Row & { originalIndex: number; uuid: string } }]>
-		children?: Snippet<[{ row: Row & { originalIndex: number; uuid: string } }]>
-		append?: Snippet<[{ row: Row & { originalIndex: number; uuid: string } }]>
-		// Callbacks
-		rowClick?: (context: { row: Row & { originalIndex: number; uuid: string } }) => void
-		drop?: (context: { rows: [Row, Row] }) => void
-	}
-
-	let {
-		columns,
-		rows = $bindable(),
-		currentPageRows,
-		rankProperty,
-		table = $bindable(),
-		dataType = 'application/table-row',
-		showRank = false,
-		class: classNames = '',
-		computeClass = () => '',
-		computeReorderability = undefined,
-		firstRank = 1,
-		prepend,
-		children,
-		append,
-		rowClick,
-		drop,
-	}: Props = $props()
-
-	let drugRowIndex: number | null = $state(null)
-	let hoveredRowIndex: number | null = $state(null)
-	let animate = $state(true)
-
-	let maxRank = $derived(rows.length + firstRank - 1)
-
-	const idProp = getContext<'uuid' | keyof Row>('idProp')
-
-	function getRank(row: Row): number {
-		return row[rankProperty] as number
-	}
-
-	function setRank(row: Row, rank: number) {
-		row[rankProperty] = rank as Row[RankProperty]
-	}
-
-	function relatedTargetIsInTarget(relatedTarget: EventTarget | null, target: EventTarget | null): boolean {
-		return (
-			!!relatedTarget &&
-			!!target &&
-			relatedTarget instanceof Node &&
-			target instanceof Node &&
-			(relatedTarget === target || target.contains(relatedTarget))
-		)
-	}
-
-	function normalizeRanks() {
-		rows.sort((a, b) => getRank(a) - getRank(b))
-		rows.forEach((row, index) => {
-			setRank(row, index + firstRank)
-		})
-		rows = rows
-	}
-
-	function dragStart(event: DragEvent, row: Row & { originalIndex: number }) {
-		if (!event.dataTransfer) {
-			return
-		}
-		event.dataTransfer.setData(dataType, JSON.stringify(row))
-		// Show the whole row while dragging
-		if (event.target instanceof Element) {
-			const tr = event.target.closest('tr')
-			if (tr) {
-				event.dataTransfer.setDragImage(tr, 15, 15)
-				drugRowIndex = row.originalIndex
-			}
-		}
-		event.dataTransfer.effectAllowed = 'move'
-		event.dataTransfer.dropEffect = 'move'
-	}
-
-	function dragEnd() {
-		drugRowIndex = null
-		hoveredRowIndex = null
-	}
-
-	function dragEnter(event: DragEvent, row: Row & { originalIndex: number }) {
-		if (event.dataTransfer?.types.includes(dataType)) {
-			event.preventDefault()
-			if (event.target instanceof Element) {
-				const tr = event.target.closest('tr')
-				if (tr && !relatedTargetIsInTarget(event.relatedTarget, tr)) {
-					hoveredRowIndex = row.originalIndex
-					tr.scrollIntoView({ behavior: 'instant', block: 'nearest' })
-				}
-			}
-		}
-	}
-
-	function dragLeave(event: DragEvent) {
-		if (event.dataTransfer?.types.includes(dataType)) {
-			event.preventDefault()
-		}
-	}
-
-	async function onDrop(event: DragEvent) {
-		if (table && event.dataTransfer?.types.includes(dataType)) {
-			event.preventDefault()
-
-			const hoveredRow = typeof hoveredRowIndex === 'number' ? rows[hoveredRowIndex] : null
-			const drugRow = typeof drugRowIndex === 'number' ? rows[drugRowIndex] : null
-			if (drugRow && hoveredRow) {
-				// This doesn't allow us to drop something at the end of the list, maybe fix that later if it causes enough grief.
-				const newRank = getRank(hoveredRow)
-
-				setRank(drugRow, newRank)
-				setRank(hoveredRow, newRank + 1)
-
-				normalizeRanks()
-				table.sortColumn = columns.find(column => column.property === rankProperty)
-				table.sortDirection ??= 'ASC'
-
-				drop?.({ rows: [drugRow, hoveredRow] })
-			}
-		}
-		await tick()
-		drugRowIndex = null
-		hoveredRowIndex = null
-	}
-
-	async function rankButtonClick(rowIndex: number, direction: 1 | -1) {
-		const row = rows[rowIndex]
-		const rank = getRank(row)
-		const newRank = rank + direction
-
-		if (newRank < firstRank || newRank > maxRank) {
-			return
-		}
-
-		const otherRowIndex = rows.findIndex(row => row[rankProperty] === newRank)
-		if (otherRowIndex === -1) {
-			return
-		}
-		const otherRowRank = getRank(rows[otherRowIndex])
-		setRank(rows[otherRowIndex], rank)
-		setRank(rows[rowIndex], otherRowRank)
-		normalizeRanks()
-		drop?.({ rows: [rows[otherRowIndex], rows[rowIndex]] })
-	}
-
-	export async function withoutAnimation(callback: () => void | Promise<void>) {
-		animate = false
-		await callback()
-		animate = true
-	}
-</script>
-
-{#each currentPageRows as row (row[idProp])}
-	{@const rank = getRank(row)}
-	{@const reorderable = computeReorderability ? computeReorderability(row) : typeof row[rankProperty] === 'number'}
-	<tr
-		id="row-{row.id}"
-		data-original-index={row.originalIndex}
-		class={[classNames, computeClass(row)]}
-		class:hovered-row-asc={table?.sortDirection === 'ASC' && hoveredRowIndex === row.originalIndex}
-		class:hovered-row-desc={table?.sortDirection === 'DESC' && hoveredRowIndex === row.originalIndex}
-		class:text-muted={drugRowIndex === row.originalIndex}
-		animate:flip={{ duration: distance => (animate && distance > 5 ? 200 : 0) }}
-		ondrop={onDrop}
-		ondragover={event => event.preventDefault()}
-		ondragenter={event => dragEnter(event, row)}
-		ondragleave={dragLeave}
-		onclick={() => rowClick?.({ row })}
-	>
-		{@render prepend?.({ row })}
-		<Td property={rankProperty}>
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				draggable={reorderable ? 'true' : 'false'}
-				style:cursor={reorderable ? 'grab' : 'not-allowed'}
-				class="d-none d-md-block"
-				ondragstart={event => (reorderable ? dragStart(event, row) : undefined)}
-				ondragend={dragEnd}
-			>
-				<i
-					class="fas fa-bars"
-					class:text-muted={!reorderable}
-				></i>
-				{#if showRank}
-					{rank}
-				{/if}
-			</div>
-			<div class="btn-group d-md-none">
-				<Button
-					outline
-					size="sm"
-					iconClass="arrow-up"
-					colorGreyDisabled={false}
-					disabled={rank <= firstRank || !reorderable}
-					onclick={() => rankButtonClick(row.originalIndex, -1)}
-				/>
-				{#if showRank}
-					<Button
-						outline
-						size="sm"
-						colorGreyDisabled={false}
-						disabled
-					>
-						{rank}
-					</Button>
-				{/if}
-
-				<Button
-					outline
-					size="sm"
-					iconClass="arrow-down"
-					colorGreyDisabled={false}
-					disabled={rank >= maxRank || !reorderable}
-					onclick={() => rankButtonClick(row.originalIndex, 1)}
-				/>
-			</div>
-			{#if showRank}
-				<span class="sr-only">{row[rankProperty]}</span>
-			{/if}
-		</Td>
-		{@render children?.({ row })}
-		{@render append?.({ row })}
-	</tr>
-{/each}
-
-<style>
-	.hovered-row-asc {
-		border-top: 5px solid var(--dark, var(--bs-dark, black));
-	}
-	.hovered-row-desc {
-		border-bottom: 5px solid var(--dark, var(--bs-dark, black));
-	}
-
-	/* Dark Mode! (BS5 Only) */
-	:global([data-bs-theme='dark']) .hovered-row-asc {
-		border-top: 5px solid var(--bs-light, white);
-	}
-
-	:global([data-bs-theme='dark']) .hovered-row-desc {
-		border-bottom: 5px solid var(--bs-light, white);
-	}
-</style>
+<script
+	lang="ts"
+	generics="Row extends UuidRowProps"
+>
+	import type { Snippet } from 'svelte'
+	import type { ClassValue } from 'svelte/elements'
+	import type { StringKeyOfType } from './tree-utility'
+
+	import type Table from './Table.svelte'
+	import type { Column, UuidRowProps } from './'
+	import Td from './Td.svelte'
+	import { flip } from 'svelte/animate'
+	import { getContext, tick } from 'svelte'
+	import Button from '@isoftdata/svelte-button'
+
+	type RankProperty = StringKeyOfType<Row, number | null>
+
+	interface Props {
+		/** Columns definition */
+		columns: Array<Column>
+		/** This should be the same value passed to the table's `rows` prop. You should `bind:` this so changes to the rank column propagate back to the table component.*/
+		rows: Array<Row>
+		/** This should be the same value passed to the table's `currentPageRows` prop. */
+		currentPageRows: Array<Row & { originalIndex: number; uuid: string }>
+		/** The property of the column containing the "rank" or "order" of the row */
+		rankProperty: RankProperty
+		/** The table component this component is in. */
+		table: Table<Row> | undefined
+		/** Used to discriminate what is being dragged/dropped. If you have two draggable tables on the same page, consider changing this.*/
+		dataType?: string
+		/** Whether to show the rank next to the drag target*/
+		showRank?: boolean
+		/** Any classes to apply to every `tr`*/
+		class?: ClassValue
+		/** A function that computes any classes you want to add conditionally based on the state of the current row*/
+		computeClass?: (row: Row) => ClassValue
+		/** A function that computes if a row should be enabled for reordering(drag or stepper buttons) */
+		computeReorderability?: ((row: Row) => boolean) | undefined
+		/** The rank the list starts at. Defaults to 1. */
+		firstRank?: number
+		// Snippets
+		prepend?: Snippet<[{ row: Row & { originalIndex: number; uuid: string } }]>
+		children?: Snippet<[{ row: Row & { originalIndex: number; uuid: string } }]>
+		append?: Snippet<[{ row: Row & { originalIndex: number; uuid: string } }]>
+		// Callbacks
+		rowClick?: (context: { row: Row & { originalIndex: number; uuid: string } }) => void
+		drop?: (context: { rows: [Row, Row] }) => void
+	}
+
+	let {
+		columns,
+		rows = $bindable(),
+		currentPageRows,
+		rankProperty,
+		table = $bindable(),
+		dataType = 'application/table-row',
+		showRank = false,
+		class: classNames = '',
+		computeClass = () => '',
+		computeReorderability = undefined,
+		firstRank = 1,
+		prepend,
+		children,
+		append,
+		rowClick,
+		drop,
+	}: Props = $props()
+
+	let drugRowIndex: number | null = $state(null)
+	let hoveredRowIndex: number | null = $state(null)
+	let animate = $state(true)
+
+	let maxRank = $derived(rows.length + firstRank - 1)
+
+	const idProp = getContext<'uuid' | keyof Row>('idProp')
+
+	function getRank(row: Row): number {
+		return row[rankProperty] as number
+	}
+
+	function setRank(row: Row, rank: number) {
+		row[rankProperty] = rank as Row[RankProperty]
+	}
+
+	function relatedTargetIsInTarget(relatedTarget: EventTarget | null, target: EventTarget | null): boolean {
+		return (
+			!!relatedTarget &&
+			!!target &&
+			relatedTarget instanceof Node &&
+			target instanceof Node &&
+			(relatedTarget === target || target.contains(relatedTarget))
+		)
+	}
+
+	function normalizeRanks() {
+		rows.sort((a, b) => getRank(a) - getRank(b))
+		rows.forEach((row, index) => {
+			setRank(row, index + firstRank)
+		})
+		rows = rows
+	}
+
+	function dragStart(event: DragEvent, row: Row & { originalIndex: number }) {
+		if (!event.dataTransfer) {
+			return
+		}
+		event.dataTransfer.setData(dataType, JSON.stringify(row))
+		// Show the whole row while dragging
+		if (event.target instanceof Element) {
+			const tr = event.target.closest('tr')
+			if (tr) {
+				event.dataTransfer.setDragImage(tr, 15, 15)
+				drugRowIndex = row.originalIndex
+			}
+		}
+		event.dataTransfer.effectAllowed = 'move'
+		event.dataTransfer.dropEffect = 'move'
+	}
+
+	function dragEnd() {
+		drugRowIndex = null
+		hoveredRowIndex = null
+	}
+
+	function dragEnter(event: DragEvent, row: Row & { originalIndex: number }) {
+		if (event.dataTransfer?.types.includes(dataType)) {
+			event.preventDefault()
+			if (event.target instanceof Element) {
+				const tr = event.target.closest('tr')
+				if (tr && !relatedTargetIsInTarget(event.relatedTarget, tr)) {
+					hoveredRowIndex = row.originalIndex
+					tr.scrollIntoView({ behavior: 'instant', block: 'nearest' })
+				}
+			}
+		}
+	}
+
+	function dragLeave(event: DragEvent) {
+		if (event.dataTransfer?.types.includes(dataType)) {
+			event.preventDefault()
+		}
+	}
+
+	async function onDrop(event: DragEvent) {
+		if (table && event.dataTransfer?.types.includes(dataType)) {
+			event.preventDefault()
+
+			const hoveredRow = typeof hoveredRowIndex === 'number' ? rows[hoveredRowIndex] : null
+			const drugRow = typeof drugRowIndex === 'number' ? rows[drugRowIndex] : null
+			if (drugRow && hoveredRow) {
+				// This doesn't allow us to drop something at the end of the list, maybe fix that later if it causes enough grief.
+				const newRank = getRank(hoveredRow)
+
+				setRank(drugRow, newRank)
+				setRank(hoveredRow, newRank + 1)
+
+				normalizeRanks()
+				table.sortColumn = columns.find(column => column.property === rankProperty)
+				table.sortDirection ??= 'ASC'
+
+				drop?.({ rows: [drugRow, hoveredRow] })
+			}
+		}
+		await tick()
+		drugRowIndex = null
+		hoveredRowIndex = null
+	}
+
+	async function rankButtonClick(rowIndex: number, direction: 1 | -1) {
+		const row = rows[rowIndex]
+		const rank = getRank(row)
+		const newRank = rank + direction
+
+		if (newRank < firstRank || newRank > maxRank) {
+			return
+		}
+
+		const otherRowIndex = rows.findIndex(row => row[rankProperty] === newRank)
+		if (otherRowIndex === -1) {
+			return
+		}
+		const otherRowRank = getRank(rows[otherRowIndex])
+		setRank(rows[otherRowIndex], rank)
+		setRank(rows[rowIndex], otherRowRank)
+		normalizeRanks()
+		drop?.({ rows: [rows[otherRowIndex], rows[rowIndex]] })
+	}
+
+	export async function withoutAnimation(callback: () => void | Promise<void>) {
+		animate = false
+		await callback()
+		animate = true
+	}
+</script>
+
+{#each currentPageRows as row (row[idProp])}
+	{@const rank = getRank(row)}
+	{@const reorderable = computeReorderability ? computeReorderability(row) : typeof row[rankProperty] === 'number'}
+	<tr
+		id="row-{row.id}"
+		data-original-index={row.originalIndex}
+		class={[classNames, computeClass(row)]}
+		class:hovered-row-asc={table?.sortDirection === 'ASC' && hoveredRowIndex === row.originalIndex}
+		class:hovered-row-desc={table?.sortDirection === 'DESC' && hoveredRowIndex === row.originalIndex}
+		class:text-muted={drugRowIndex === row.originalIndex}
+		animate:flip={{ duration: distance => (animate && distance > 5 ? 200 : 0) }}
+		ondrop={onDrop}
+		ondragover={event => event.preventDefault()}
+		ondragenter={event => dragEnter(event, row)}
+		ondragleave={dragLeave}
+		onclick={() => rowClick?.({ row })}
+	>
+		{@render prepend?.({ row })}
+		<Td property={rankProperty}>
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				draggable={reorderable ? 'true' : 'false'}
+				style:cursor={reorderable ? 'grab' : 'not-allowed'}
+				class="d-none d-md-block"
+				ondragstart={event => (reorderable ? dragStart(event, row) : undefined)}
+				ondragend={dragEnd}
+			>
+				<i
+					class="fas fa-bars"
+					class:text-muted={!reorderable}
+				></i>
+				{#if showRank}
+					{rank}
+				{/if}
+			</div>
+			<div class="btn-group d-md-none">
+				<Button
+					outline
+					size="sm"
+					iconClass="arrow-up"
+					colorGreyDisabled={false}
+					disabled={rank <= firstRank || !reorderable}
+					onclick={() => rankButtonClick(row.originalIndex, -1)}
+				/>
+				{#if showRank}
+					<Button
+						outline
+						size="sm"
+						colorGreyDisabled={false}
+						disabled
+					>
+						{rank}
+					</Button>
+				{/if}
+
+				<Button
+					outline
+					size="sm"
+					iconClass="arrow-down"
+					colorGreyDisabled={false}
+					disabled={rank >= maxRank || !reorderable}
+					onclick={() => rankButtonClick(row.originalIndex, 1)}
+				/>
+			</div>
+			{#if showRank}
+				<span class="sr-only">{row[rankProperty]}</span>
+			{/if}
+		</Td>
+		{@render children?.({ row })}
+		{@render append?.({ row })}
+	</tr>
+{/each}
+
+<style>
+	.hovered-row-asc {
+		border-top: 5px solid var(--dark, var(--bs-dark, black));
+	}
+	.hovered-row-desc {
+		border-bottom: 5px solid var(--dark, var(--bs-dark, black));
+	}
+
+	/* Dark Mode! (BS5 Only) */
+	:global([data-bs-theme='dark']) .hovered-row-asc {
+		border-top: 5px solid var(--bs-light, white);
+	}
+
+	:global([data-bs-theme='dark']) .hovered-row-desc {
+		border-bottom: 5px solid var(--bs-light, white);
+	}
+</style>