@isoftdata/svelte-table 2.7.0 → 2.8.0

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/dist/column-info-store.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnInfoObject, Column, UuidRowProps, ColumnInfo as GenericColumnInfo, RowProperties } from './types';
+import type { ColumnInfoObject, Column, UuidRowProps, ColumnInfo as GenericColumnInfo, RowProperties, ArbitraryProperty } from './types';
 type StoreOptions = {
     /** The key to use in localstorage */
     key?: string;
@@ -44,9 +44,9 @@ export declare class ColumnInfoRunicStore<R extends UuidRowProps> {
         iconLeft?: boolean | undefined;
         iconPrefix?: import("@fortawesome/fontawesome-common-types").IconPrefix | undefined;
         minWidth?: string | undefined;
-        name: string;
+        name?: string | undefined;
         numeric?: boolean | undefined;
-        property: RowProperties<R>;
+        property: `_${string}` | RowProperties<R>;
         sortType?: "ALPHA_NUM" | "STANDARD" | false | undefined;
         title?: string | undefined;
         unhidable?: boolean | undefined;
@@ -56,9 +56,9 @@ export declare class ColumnInfoRunicStore<R extends UuidRowProps> {
         visible: boolean;
     }[];
     get current(): ColumnInfoObject<R>;
-    updateColumn(property: RowProperties<R>, value: Partial<GenericColumnInfo<R>>): void;
+    updateColumn(property: RowProperties<R> | ArbitraryProperty, value: Partial<GenericColumnInfo<R>>): void;
     updateColumns(newColumnInfos: Array<Partial<GenericColumnInfo<R>> & {
-        property: RowProperties<R>;
+        property: RowProperties<R> | ArbitraryProperty;
     }>): void;
     private getStoreValFromColumns;
     /** Takes values from the given column, removes non-serializable values, and fills in with default serializable values */

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as TreeRow } from './TreeRow.svelte';
 export { default as DraggableRows } from './DraggableRows.svelte';
 export * from './column-info-store.svelte';
 export * from './tree-utility.js';
+export * from './types.js';
 export type * from './Pagination.svelte';
 export type * from './types';
 export type * from './bracket-paths';

package/dist/index.js

@@ -6,3 +6,4 @@ export { default as TreeRow } from './TreeRow.svelte';
 export { default as DraggableRows } from './DraggableRows.svelte';
 export * from './column-info-store.svelte';
 export * from './tree-utility.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -1,6 +1,8 @@
 import type { IconName, IconPrefix } from '@fortawesome/fontawesome-common-types';
 import type { BracketPaths } from './bracket-paths';
 import type { Get, Simplify } from 'type-fest';
+export declare const ARBITRARY_PROPERTY_PREFIX = "_";
+export type ArbitraryProperty = `${typeof ARBITRARY_PROPERTY_PREFIX}${string}`;
 export type SortDirection = 'ASC' | 'DESC';
 /** String untion of all properties of the row object, or just `string` as a fallback.
  *
@@ -49,9 +51,9 @@ export type Column<R extends UuidRowProps = any> = {
     iconLeft?: boolean;
     iconPrefix?: IconPrefix;
     minWidth?: string;
-    name: string;
+    name?: string;
     numeric?: boolean;
-    property: RowProperties<R>;
+    property: RowProperties<R> | ArbitraryProperty;
     sortType?: 'ALPHA_NUM' | 'STANDARD' | false;
     title?: string;
     unhidable?: boolean;
@@ -60,7 +62,7 @@ export type Column<R extends UuidRowProps = any> = {
     width?: string;
     wrap?: boolean;
 };
-export type FooterReducerValue<R extends UuidRowProps> = string | number | Get<R, RowProperties<R>>;
+export type FooterReducerValue<R extends UuidRowProps> = string | number | Get<R, RowProperties<R> | ArbitraryProperty>;
 export type ColumnInfo<R extends UuidRowProps> = Simplify<Column<R> & {
     visible: boolean;
 }>;

package/dist/types.js

@@ -1 +1 @@
-export {};
+export const ARBITRARY_PROPERTY_PREFIX = '_';

package/package.json

@@ -1,17 +1,6 @@
 {
   "name": "@isoftdata/svelte-table",
-  "version": "2.7.0",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
-  },
+  "version": "2.8.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -75,5 +64,15 @@
   },
   "engines": {
     "pnpm": "10.x"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
   }
-}
+}