chore(release): 0.0.23

CHANGELOG.md

@@ -2,14 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [0.0.22](https://github.com/a-luna/svelte-simple-tables/compare/v0.0.21...v0.0.22) (2022-07-05)
+### [0.0.23](https://github.com/a-luna/svelte-simple-tables/compare/v0.0.22...v0.0.23) (2022-07-05)
+
+
+### Bug Fixes
+
+* :label: minor typescript fixes to TableState nd TableSettings interfaces ([ef1d6f0](https://github.com/a-luna/svelte-simple-tables/commit/ef1d6f065a77c9753e066216c65f2fd931af22be))
 
+### [0.0.22](https://github.com/a-luna/svelte-simple-tables/compare/v0.0.21...v0.0.22) (2022-07-05)
 
 ### Bug Fixes
 
-* :bug: allow user to choose how table is displayed when table is smaller than container ([b48f9fd](https://github.com/a-luna/svelte-simple-tables/commit/b48f9fd3e8e6b5a43a7680a1e843702e8c649692))
-* :bug: overflow-x autoscroll behavior is broken when placed within a flex container ([fbba8e6](https://github.com/a-luna/svelte-simple-tables/commit/fbba8e621d43d207e320b99412cef0c0b35fd47a))
-* :bug: remove role="navigation" from PageNavigationCompact component ([56f9aa5](https://github.com/a-luna/svelte-simple-tables/commit/56f9aa5bc2d64bf9711c079f4dc17bbbf0434d7b))
+- :bug: allow user to choose how table is displayed when table is smaller than container ([b48f9fd](https://github.com/a-luna/svelte-simple-tables/commit/b48f9fd3e8e6b5a43a7680a1e843702e8c649692))
+- :bug: overflow-x autoscroll behavior is broken when placed within a flex container ([fbba8e6](https://github.com/a-luna/svelte-simple-tables/commit/fbba8e621d43d207e320b99412cef0c0b35fd47a))
+- :bug: remove role="navigation" from PageNavigationCompact component ([56f9aa5](https://github.com/a-luna/svelte-simple-tables/commit/56f9aa5bc2d64bf9711c079f4dc17bbbf0434d7b))
 
 ### [0.0.21](https://github.com/a-luna/svelte-simple-tables/compare/v0.0.20...v0.0.21) (2022-03-11)
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@a-luna/svelte-simple-tables",
-	"version": "0.0.22",
+	"version": "0.0.23",
 	"license": "MIT",
 	"description": "Accessible, sortable, paginated table component",
 	"author": "Aaron Luna (https://github.com/a-luna)",

src/lib/__tests__/SimpleTable.test.ts

@@ -7,6 +7,7 @@ import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import type { UserEvent } from '@testing-library/user-event/dist/types/setup';
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import type { PitchFx } from './types';
 
 const ResizeObserverMock = vi.fn(() => ({
 	disconnect: vi.fn(),
@@ -23,7 +24,7 @@ describe('SimpleTable', () => {
 	const tableId = 'all-barrels';
 	const caption = 'Barrels';
 	const sortBy = 'launch_speed';
-	const tableSettings: TableSettings = {
+	const tableSettings: TableSettings<PitchFx> = {
 		tableId,
 		showHeader: true,
 		header: caption,
@@ -224,7 +225,7 @@ describe('SimpleTable', () => {
 	});
 
 	test('verify pagination configured for full/verbose output', async () => {
-		const pageNavFormatFullSettings: TableSettings = {
+		const pageNavFormatFullSettings: TableSettings<PitchFx> = {
 			showHeader: true,
 			header: caption,
 			showSortDescription: true,
@@ -261,7 +262,7 @@ describe('SimpleTable', () => {
 	});
 
 	test('verify sort function when table is not sorted, sortDir = descending', () => {
-		const basicTableSettings: TableSettings = {
+		const basicTableSettings: TableSettings<PitchFx> = {
 			tableId: 'unsorted',
 			sortDir: 'desc',
 		};
@@ -273,7 +274,7 @@ describe('SimpleTable', () => {
 	});
 
 	test('verify sort function when table is not sorted, sortDir = ascending', () => {
-		const basicTableSettings: TableSettings = {
+		const basicTableSettings: TableSettings<PitchFx> = {
 			tableId: 'unsorted',
 			sortDir: 'asc',
 		};
@@ -285,7 +286,7 @@ describe('SimpleTable', () => {
 	});
 
 	test('verify sort function when sortType = string and sortDir = asc', () => {
-		const basicTableSettings: TableSettings = {
+		const basicTableSettings: TableSettings<PitchFx> = {
 			tableId: 'sort-by-string-asc',
 			sortBy: 'batter_name',
 			sortDir: 'asc',
@@ -298,7 +299,7 @@ describe('SimpleTable', () => {
 	});
 
 	test('verify sort function when sortType = date and sortDir = desc', () => {
-		const basicTableSettings: TableSettings = {
+		const basicTableSettings: TableSettings<PitchFx> = {
 			tableId: 'sort-by-date-desc',
 			sortBy: 'time_pitch_thrown_est',
 			sortDir: 'desc',
@@ -330,7 +331,7 @@ describe('SimpleTable', () => {
 	});
 
 	test('verify clickableRows property of TableSettings object, clickableRows = true', async () => {
-		const clickableRowsTableSettings: TableSettings = {
+		const clickableRowsTableSettings: TableSettings<PitchFx> = {
 			clickableRows: true,
 			animateSorting: true,
 			...tableSettings,

src/lib/components/DataTable/DataTable.svelte

@@ -15,7 +15,7 @@
 	export let data: R[] = [];
 	export let columnSettings: ColumnSettings<R>[] = [];
 	let tableElement: HTMLElement;
-	const tableState = getTableState(tableId);
+	const tableState = getTableState<R>(tableId);
 	const dispatch = createEventDispatcher();
 	const options = { delay: 0, duration: 500, easing: cubicInOut };
 

src/lib/components/DataTable/TableCell.svelte

@@ -11,7 +11,7 @@
 	export let propType: PropType;
 	export let classList: string[] = [];
 	export let colValue: (obj: R) => string = null;
-	const tableState = getTableState(tableId);
+	const tableState = getTableState<R>(tableId);
 	let cellValue = '';
 
 	$: cellValue = colValue ? colValue(obj) : propName in obj ? obj[propName].toString() : '';

src/lib/components/DataTable/TableHeader.svelte

@@ -16,7 +16,11 @@
 	$: if (typeof window !== 'undefined') tableCaptionWidthStore = syncWidth(tableCaptionElement);
 	$: if (typeof window !== 'undefined') tableSortDescWidthStore = syncWidth(tableSortDescElement);
 	$: if (typeof window !== 'undefined') $tableState.state.captionWidth = $tableCaptionWidthStore;
-	$: if (typeof window !== 'undefined') $tableState.state.sortDescriptionWidth = $tableSortDescWidthStore;
+	$: if (
+		typeof window !==
+		'u                                                                                                                                                        ndefined'
+	)
+		$tableState.state.sortDescriptionWidth = $tableSortDescWidthStore;
 
 	const describeSortSetting = (sortBy: string, sortDir: SortDirection): string =>
 		`Sorted by: ${getDefaultColHeader(sortBy, false)} (${sortDir === 'asc' ? 'ascending' : 'descending'})`;

src/lib/components/Pagination/PageNavigationCompact.svelte

@@ -4,9 +4,11 @@
 	import { syncWidth } from '$lib/stores/syncWidth';
 	import { getAriaValues } from '$lib/util';
 
+	type R = $$Generic;
+
 	export let tableId: string;
 	let pageNavElement: HTMLElement;
-	const tableState = getTableState(tableId);
+	const tableState = getTableState<R>(tableId);
 
 	$: paginationRightWidthStore = syncWidth(pageNavElement);
 	$: $tableState.state.paginationRightWidth = $paginationRightWidthStore;

src/lib/components/Pagination/PageRangeDescription.svelte

@@ -4,9 +4,11 @@
 	import { pageWidth } from '$lib/stores/pageWidth';
 	import { syncWidth } from '$lib/stores/syncWidth';
 
+	type R = $$Generic;
+
 	export let tableId: string;
 	let pageDescriptionElement: HTMLElement;
-	const tableState = getTableState(tableId);
+	const tableState = getTableState<R>(tableId);
 
 	$: fontSize = $pageWidth.current < 1024 ? '1em' : '1.05em';
 	$: pageDescWidthStore = syncWidth(pageDescriptionElement);

src/lib/components/Pagination/PageSizeSetting.svelte

@@ -6,11 +6,13 @@
 	import { cubicInOut } from 'svelte/easing';
 	import { fade } from 'svelte/transition';
 
+	type R = $$Generic;
+
 	export let tableId: string;
 	const dispatch = createEventDispatcher();
 	const options = { duration: 200, easing: cubicInOut };
 	let pageSizeSettingElement: HTMLElement;
-	const tableState = getTableState(tableId);
+	const tableState = getTableState<R>(tableId);
 
 	$: pageSizeSettingWidthStore = syncWidth(pageSizeSettingElement);
 	$: $tableState.state.paginationLeftWidth = $pageSizeSettingWidthStore;

src/lib/components/Pagination/Pagination.svelte

@@ -8,8 +8,10 @@
 	import { cubicInOut } from 'svelte/easing';
 	import { fade } from 'svelte/transition';
 
+	type R = $$Generic;
+
 	export let tableId: string;
-	const tableState = getTableState(tableId);
+	const tableState = getTableState<R>(tableId);
 	const componentWidth = getTableSize(tableId);
 	let showPageSizeSetting = false;
 	const options = { duration: 200, easing: cubicInOut };

src/lib/components/SimpleTable.svelte

@@ -19,8 +19,8 @@
 	if (!tableState) {
 		tableState = createTableStateStore(data.length, tableSettings);
 	}
-	tableState = initTableState(tableState);
-	const componentWidth = initTableSize(tableState);
+	tableState = initTableState<R>(tableState);
+	const componentWidth = initTableSize<R>(tableState);
 	$tableState.sortType = columnSettings.find((col) => col.propName === $tableState.sortBy)?.propType || 'unsorted';
 	let sortFunction: (a: R, b: R) => number = getSortFunction<R>(
 		$tableState.sortBy,

src/lib/context.ts

@@ -13,19 +13,19 @@ function getService<T>(key: string): () => T {
 	return () => getContext(key);
 }
 
-export function initTableState(tableState: TableState): TableState {
+export function initTableState<R>(tableState: TableState<R>): TableState<R> {
 	const key = `${get(tableState).tableId}-state`;
-	return setService<TableState>(key, tableState);
+	return setService<TableState<R>>(key, tableState);
 }
 
-export function getTableState(tableId: string): TableState {
+export function getTableState<R>(tableId: string): TableState<R> {
 	const key = `${tableId}-state`;
-	return getService<TableState>(key)();
+	return getService<TableState<R>>(key)();
 }
 
-export function initTableSize(tableState: TableState): Readable<ComponentWidth> {
+export function initTableSize<R>(tableState: TableState<R>): Readable<ComponentWidth> {
 	const key = `${get(tableState).tableId}-size`;
-	const tableSize = createComponentWidthStore(tableState);
+	const tableSize = createComponentWidthStore<R>(tableState);
 	return setService<Readable<ComponentWidth>>(key, tableSize);
 }
 

src/lib/stores/componentWidth.ts

@@ -4,7 +4,7 @@ import { getTableFontSizeInPixels, getTableWrapperPaddingWidth } from '$lib/util
 import type { Readable } from 'svelte/store';
 import { derived } from 'svelte/store';
 
-export function createComponentWidthStore(tableSettings: TableState): Readable<ComponentWidth> {
+export function createComponentWidthStore<R>(tableSettings: TableState<R>): Readable<ComponentWidth> {
 	return derived([tableSettings, pageWidth], ([$tableSettings, $pageWidth]) => {
 		const getPaginationWidth = (): number =>
 			$tableSettings.state.paginationLeftWidth +

src/lib/stores/tableState.ts

@@ -2,46 +2,9 @@ import type { TableSettings, TableState } from '$lib/types';
 import { getDefaultTableId } from '$lib/util';
 import { writable } from 'svelte/store';
 
-export const getDefaultTableSettings = (): TableSettings => ({
-	tableId: getDefaultTableId(),
-	showHeader: false,
-	header: '',
-	showSortDescription: false,
-	sortBy: null,
-	sortType: null,
-	sortDir: 'asc',
-	tableWrapper: false,
-	expandToContainerWidth: false,
-	themeName: 'lighter',
-	clickableRows: false,
-	animateSorting: false,
-	paginated: false,
-	pageSize: 5,
-	pageSizeOptions: [5, 10, 15],
-	pageRangeFormat: 'auto',
-	pageNavFormat: 'auto',
-	rowType: 'rows',
-	state: {
-		syncState: 'not-started',
-		captionWidth: 0,
-		sortDescriptionWidth: 0,
-		tableWidth: 0,
-		paginationLeftWidth: 0,
-		paginationRightWidth: 0,
-		containerWidth: 0,
-	},
-	pagination: {
-		totalRows: 0,
-		totalPages: 1,
-		currentPage: 1,
-		startRow: 0,
-		endRow: 0,
-	},
-});
-
-export function createTableStateStore(totalRows: number, settings: TableSettings): TableState {
+export function createTableStateStore<R>(totalRows: number, settings: TableSettings<R>): TableState<R> {
 	const pageSize = settings?.paginated ? settings?.pageSize || 5 : totalRows;
-	const { set, subscribe, update } = writable<TableSettings>({
+	const { set, subscribe, update } = writable<TableSettings<R>>({
 		tableId: settings?.tableId || getDefaultTableId(),
 		showHeader: settings?.showHeader || false,
 		header: settings?.header ?? '',
@@ -78,12 +41,12 @@ export function createTableStateStore(totalRows: number, settings: TableSettings
 		},
 	});
 
-	function reset(totalRowsChanged: number, pageSize: number, settings: TableSettings): TableSettings {
+	function reset(totalRowsChanged: number, pageSize: number, settings: TableSettings<R>): TableSettings<R> {
 		totalRows = totalRowsChanged;
 		return changePageSize(pageSize, settings);
 	}
 
-	function changePageSize(pageSize: number, settings: TableSettings): TableSettings {
+	function changePageSize(pageSize: number, settings: TableSettings<R>): TableSettings<R> {
 		settings.pageSize = pageSize;
 		settings.pagination = {
 			totalRows: totalRows,
@@ -96,7 +59,7 @@ export function createTableStateStore(totalRows: number, settings: TableSettings
 		return settings;
 	}
 
-	function goToPage(pageNumber: number, settings: TableSettings): TableSettings {
+	function goToPage(pageNumber: number, settings: TableSettings<R>): TableSettings<R> {
 		const { pagination } = settings;
 		settings.pagination = {
 			...pagination,