@isoftdata/svelte-table 2.10.5 → 2.11.1

package/dist/Pagination.svelte

@@ -1,303 +1,303 @@
-<script
-	module
-	lang="ts"
->
-	export type Page = {
-		number: number
-		startIndex: number
-		endIndex: number
-		hideOnMobile?: boolean
-	}
-
-	//
-</script>
-
-<script
-	lang="ts"
-	generics="I"
->
-	import type { ClassValue } from 'svelte/elements'
-
-	import { innerWidth } from 'svelte/reactivity/window'
-
-	interface Props {
-		items: Array<I>
-		class?: ClassValue
-		currentPageNumber: number
-		perPageCount: number
-		currentPageItems: Array<I>
-		totalItemsCount?: number
-		showInfoFooter?: boolean
-		lastPageNumber?: number
-		pageChange?: (context: { pageNumber: number }) => void
-	}
-
-	let {
-		//
-		items,
-		class: classNames = '',
-		currentPageNumber = $bindable(),
-		perPageCount,
-		currentPageItems = $bindable([]),
-		totalItemsCount = 0,
-		showInfoFooter = false,
-		lastPageNumber = $bindable(Math.ceil(totalItemsCount / perPageCount)),
-		pageChange,
-	}: Props = $props()
-
-	const computedTotalItemsCount = $derived(totalItemsCount || items.length)
-	const pages = $derived(getPages(perPageCount, computedTotalItemsCount))
-	const displayPages: Array<Page> = $derived(getDisplayPages(pages, currentPageNumber))
-	const mobileSize = $derived(!!innerWidth.current && innerWidth.current < 576)
-	const showPagination = $derived(perPageCount && computedTotalItemsCount > perPageCount)
-	const buttonWidth = $derived.by(() => {
-		// keep all the buttons the same size, but make them big enough to fit large page #s
-		if (mobileSize) {
-			return lastPageNumber >= 100 ? 51 : lastPageNumber >= 10 ? 40 : 36
-		} else {
-			return lastPageNumber >= 100 ? 40 : lastPageNumber >= 10 ? 36 : 28
-		}
-	})
-
-	const numPagesHiddenOnMobile = $derived(
-		displayPages.length &&
-			displayPages.reduce((sum, page) => {
-				if (page.hideOnMobile) {
-					return sum++
-				}
-				return sum
-			}, 0),
-	)
-	const somePagesHidden = $derived(displayPages.length < pages.length || (mobileSize && numPagesHiddenOnMobile > 0))
-	$effect(() => {
-		if (pages.length && pages.length < currentPageNumber) {
-			currentPageNumber = pages.length > 0 ? pages.length : 1
-		}
-	})
-	$effect(() => {
-		const currentPage =
-			pages.length > 0 && items.length > perPageCount ? pages.find(page => page.number === currentPageNumber) : null
-		currentPageItems = currentPage ? items.slice(currentPage.startIndex, currentPage.endIndex) : items
-	})
-	$effect(() => {
-		lastPageNumber = pages.length
-	})
-
-	export function setPageNumber(pageNumber: number) {
-		currentPageNumber = pageNumber
-	}
-
-	export function setPageVisibleByItemIndex(itemIndex: number) {
-		const foundPage = pages.find(page => {
-			return itemIndex >= page.startIndex && itemIndex < page.endIndex
-		})
-		if (foundPage && foundPage.number !== currentPageNumber) {
-			currentPageNumber = foundPage.number
-			pageChange?.({ pageNumber: foundPage.number })
-		}
-	}
-
-	function getPages(perPageCount: number, totalItemsCount: number) {
-		if (perPageCount > 0) {
-			const pagesCount = Math.ceil(totalItemsCount / perPageCount)
-			const newPages = new Array<Page>()
-
-			let n = 1
-			while (n <= pagesCount) {
-				newPages.push({
-					number: n,
-					startIndex: n === 1 ? 0 : perPageCount * (n - 1),
-					endIndex: perPageCount * n,
-				})
-				n++
-			}
-			return newPages
-		}
-		return []
-	}
-
-	function getDisplayPages(pages: Array<Page>, currentPageNumber: number): Array<Page> {
-		if (!pages.length) {
-			return []
-		}
-		const lastPageIndex = pages.length - 1
-		return pages.reduce((sum, page) => {
-			if (
-				!(
-					lastPageIndex <= 7 ||
-					page.number === currentPageNumber || // current page always
-					(page.number <= 5 && currentPageNumber <= 4) || // current page in beginning of list
-					(page.number > currentPageNumber - 2 && page.number < currentPageNumber + 2) || // one on either side of current
-					(page.number >= lastPageIndex - 3 && currentPageNumber >= lastPageIndex - 2)
-				)
-			) {
-				page.hideOnMobile = true // TODO : maybe we don't need this
-			} else {
-				page.hideOnMobile = false
-			}
-			if (
-				lastPageIndex <= 9 ||
-				currentPageNumber == page.number || // current page
-				(page.number <= 7 && currentPageNumber <= 4) || // beginning of list
-				(page.number > currentPageNumber - 3 && page.number < currentPageNumber + 3) || // middle of list
-				(page.number > lastPageIndex - 6 && currentPageNumber > lastPageIndex - 3) // end of list
-			) {
-				return sum.concat(page)
-			}
-			return sum
-		}, new Array<Page>())
-	}
-
-	function pageClicked(pageNumber: number) {
-		currentPageNumber = pageNumber
-		pageChange?.({ pageNumber })
-	}
-</script>
-
-{#if showPagination}
-	<div class={['d-flex justify-content-center', classNames]}>
-		<nav aria-label="Page navigation">
-			<ul class="pagination pagination-sm mb-0">
-				<li
-					class="page-item text-center unselectable hideOnMobile arrowWidth"
-					class:disabled={currentPageNumber === 1}
-					class:d-none={perPageCount == 0 || !perPageCount}
-				>
-					<button
-						type="button"
-						class="page-link w-100"
-						onclick={() => pageClicked(1)}
-						aria-label="Previous"
-						role="link"
-					>
-						<i class="far fa-chevron-double-left"></i>
-					</button>
-				</li>
-				<li
-					class="page-item text-center unselectable arrowWidth"
-					class:disabled={currentPageNumber === 1}
-					class:d-none={perPageCount == 0 || !perPageCount}
-				>
-					<button
-						class="page-link w-100"
-						onclick={() => pageClicked(currentPageNumber - 1)}
-						aria-label="Previous"
-					>
-						<i class="far fa-chevron-left"></i>
-					</button>
-				</li>
-				{#if currentPageNumber > 4 && somePagesHidden}
-					<li
-						class="page-item text-center"
-						style="min-width: {buttonWidth}px;"
-					>
-						<button
-							class="page-link w-100"
-							onclick={() => pageClicked(1)}
-							aria-label="First"
-							>1
-						</button>
-					</li>
-					<li class="page-item text-center disabled arrowWidth">
-						<span
-							class="page-link w-100"
-							style="cursor: default;">...</span
-						>
-					</li>
-				{/if}
-				{#each displayPages as page}
-					<li
-						class="page-item text-center unselectable"
-						class:active={page.number === currentPageNumber}
-						class:hideOnMobile={page.hideOnMobile}
-						style="min-width: {buttonWidth}px;"
-					>
-						<button
-							class="page-link w-100"
-							onclick={() => pageClicked(page.number)}>{page.number}</button
-						>
-					</li>
-				{/each}
-				{#if currentPageNumber < pages.length - 3 && somePagesHidden}
-					<li class="page-item text-center disabled arrowWidth">
-						<span
-							class="page-link w-100"
-							style="cursor: default;">...</span
-						>
-					</li>
-					<li
-						class="page-item text-center"
-						style="min-width: {buttonWidth}px;"
-					>
-						<button
-							class="page-link w-100"
-							onclick={() => pageClicked(pages.length)}
-							aria-label="Last"
-							>{pages.length}
-						</button>
-					</li>
-				{/if}
-				<li
-					class="page-item text-center unselectable arrowWidth"
-					class:disabled={currentPageNumber === lastPageNumber}
-					class:d-none={perPageCount == 0 || !perPageCount}
-				>
-					<button
-						class="page-link w-100"
-						onclick={() => pageClicked(currentPageNumber + 1)}
-						aria-label="Next"
-					>
-						<i class="far fa-chevron-right"></i>
-					</button>
-				</li>
-				<li
-					class="page-item text-center unselectable hideOnMobile arrowWidth"
-					class:disabled={currentPageNumber === lastPageNumber}
-					class:d-none={perPageCount == 0 || !perPageCount}
-				>
-					<button
-						class="page-link w-100"
-						onclick={() => pageClicked(lastPageNumber)}
-						aria-label="Last"
-					>
-						<i class="far fa-chevron-double-right"></i>
-					</button>
-				</li>
-			</ul>
-			{#if showInfoFooter}
-				<div class="text-center">
-					<small
-						>{1 + (currentPageNumber - 1) * perPageCount}-{currentPageNumber * perPageCount > computedTotalItemsCount
-							? computedTotalItemsCount
-							: currentPageNumber * perPageCount} of {computedTotalItemsCount}
-						results</small
-					>
-				</div>
-			{/if}
-		</nav>
-	</div>
-{/if}
-
-<style>
-	@media screen and (max-width: 576px) {
-		.hideOnMobile {
-			display: none;
-		}
-		.pagination-sm .page-link {
-			padding: 0.5rem 0.75rem;
-			font-size: 1rem;
-			line-height: 1.25;
-		}
-		.arrowWidth {
-			width: 39px;
-		}
-	}
-	@media screen and (min-width: 576px) {
-		.arrowWidth {
-			width: 31px;
-		}
-	}
-	.page-item:not(:last-child) > .page-link {
-		border-right: 0;
-	}
-</style>
+<script
+	module
+	lang="ts"
+>
+	export type Page = {
+		number: number
+		startIndex: number
+		endIndex: number
+		hideOnMobile?: boolean
+	}
+
+	//
+</script>
+
+<script
+	lang="ts"
+	generics="I"
+>
+	import type { ClassValue } from 'svelte/elements'
+
+	import { innerWidth } from 'svelte/reactivity/window'
+
+	interface Props {
+		items: Array<I>
+		class?: ClassValue
+		currentPageNumber: number
+		perPageCount: number
+		currentPageItems: Array<I>
+		totalItemsCount?: number
+		showInfoFooter?: boolean
+		lastPageNumber?: number
+		pageChange?: (context: { pageNumber: number }) => void
+	}
+
+	let {
+		//
+		items,
+		class: classNames = '',
+		currentPageNumber = $bindable(),
+		perPageCount,
+		currentPageItems = $bindable([]),
+		totalItemsCount = 0,
+		showInfoFooter = false,
+		lastPageNumber = $bindable(Math.ceil(totalItemsCount / perPageCount)),
+		pageChange,
+	}: Props = $props()
+
+	const computedTotalItemsCount = $derived(totalItemsCount || items.length)
+	const pages = $derived(getPages(perPageCount, computedTotalItemsCount))
+	const displayPages: Array<Page> = $derived(getDisplayPages(pages, currentPageNumber))
+	const mobileSize = $derived(!!innerWidth.current && innerWidth.current < 576)
+	const showPagination = $derived(perPageCount && computedTotalItemsCount > perPageCount)
+	const buttonWidth = $derived.by(() => {
+		// keep all the buttons the same size, but make them big enough to fit large page #s
+		if (mobileSize) {
+			return lastPageNumber >= 100 ? 51 : lastPageNumber >= 10 ? 40 : 36
+		} else {
+			return lastPageNumber >= 100 ? 40 : lastPageNumber >= 10 ? 36 : 28
+		}
+	})
+
+	const numPagesHiddenOnMobile = $derived(
+		displayPages.length &&
+			displayPages.reduce((sum, page) => {
+				if (page.hideOnMobile) {
+					return sum++
+				}
+				return sum
+			}, 0),
+	)
+	const somePagesHidden = $derived(displayPages.length < pages.length || (mobileSize && numPagesHiddenOnMobile > 0))
+	$effect(() => {
+		if (pages.length && pages.length < currentPageNumber) {
+			currentPageNumber = pages.length > 0 ? pages.length : 1
+		}
+	})
+	$effect(() => {
+		const currentPage =
+			pages.length > 0 && items.length > perPageCount ? pages.find(page => page.number === currentPageNumber) : null
+		currentPageItems = currentPage ? items.slice(currentPage.startIndex, currentPage.endIndex) : items
+	})
+	$effect(() => {
+		lastPageNumber = pages.length
+	})
+
+	export function setPageNumber(pageNumber: number) {
+		currentPageNumber = pageNumber
+	}
+
+	export function setPageVisibleByItemIndex(itemIndex: number) {
+		const foundPage = pages.find(page => {
+			return itemIndex >= page.startIndex && itemIndex < page.endIndex
+		})
+		if (foundPage && foundPage.number !== currentPageNumber) {
+			currentPageNumber = foundPage.number
+			pageChange?.({ pageNumber: foundPage.number })
+		}
+	}
+
+	function getPages(perPageCount: number, totalItemsCount: number) {
+		if (perPageCount > 0) {
+			const pagesCount = Math.ceil(totalItemsCount / perPageCount)
+			const newPages = new Array<Page>()
+
+			let n = 1
+			while (n <= pagesCount) {
+				newPages.push({
+					number: n,
+					startIndex: n === 1 ? 0 : perPageCount * (n - 1),
+					endIndex: perPageCount * n,
+				})
+				n++
+			}
+			return newPages
+		}
+		return []
+	}
+
+	function getDisplayPages(pages: Array<Page>, currentPageNumber: number): Array<Page> {
+		if (!pages.length) {
+			return []
+		}
+		const lastPageIndex = pages.length - 1
+		return pages.reduce((sum, page) => {
+			if (
+				!(
+					lastPageIndex <= 7 ||
+					page.number === currentPageNumber || // current page always
+					(page.number <= 5 && currentPageNumber <= 4) || // current page in beginning of list
+					(page.number > currentPageNumber - 2 && page.number < currentPageNumber + 2) || // one on either side of current
+					(page.number >= lastPageIndex - 3 && currentPageNumber >= lastPageIndex - 2)
+				)
+			) {
+				page.hideOnMobile = true // TODO : maybe we don't need this
+			} else {
+				page.hideOnMobile = false
+			}
+			if (
+				lastPageIndex <= 9 ||
+				currentPageNumber == page.number || // current page
+				(page.number <= 7 && currentPageNumber <= 4) || // beginning of list
+				(page.number > currentPageNumber - 3 && page.number < currentPageNumber + 3) || // middle of list
+				(page.number > lastPageIndex - 6 && currentPageNumber > lastPageIndex - 3) // end of list
+			) {
+				return sum.concat(page)
+			}
+			return sum
+		}, new Array<Page>())
+	}
+
+	function pageClicked(pageNumber: number) {
+		currentPageNumber = pageNumber
+		pageChange?.({ pageNumber })
+	}
+</script>
+
+{#if showPagination}
+	<div class={['d-flex justify-content-center', classNames]}>
+		<nav aria-label="Page navigation">
+			<ul class="pagination pagination-sm mb-0">
+				<li
+					class="page-item text-center unselectable hideOnMobile arrowWidth"
+					class:disabled={currentPageNumber === 1}
+					class:d-none={perPageCount == 0 || !perPageCount}
+				>
+					<button
+						type="button"
+						class="page-link w-100"
+						onclick={() => pageClicked(1)}
+						aria-label="Previous"
+						role="link"
+					>
+						<i class="far fa-chevron-double-left"></i>
+					</button>
+				</li>
+				<li
+					class="page-item text-center unselectable arrowWidth"
+					class:disabled={currentPageNumber === 1}
+					class:d-none={perPageCount == 0 || !perPageCount}
+				>
+					<button
+						class="page-link w-100"
+						onclick={() => pageClicked(currentPageNumber - 1)}
+						aria-label="Previous"
+					>
+						<i class="far fa-chevron-left"></i>
+					</button>
+				</li>
+				{#if currentPageNumber > 4 && somePagesHidden}
+					<li
+						class="page-item text-center"
+						style="min-width: {buttonWidth}px;"
+					>
+						<button
+							class="page-link w-100"
+							onclick={() => pageClicked(1)}
+							aria-label="First"
+							>1
+						</button>
+					</li>
+					<li class="page-item text-center disabled arrowWidth">
+						<span
+							class="page-link w-100"
+							style="cursor: default;">...</span
+						>
+					</li>
+				{/if}
+				{#each displayPages as page}
+					<li
+						class="page-item text-center unselectable"
+						class:active={page.number === currentPageNumber}
+						class:hideOnMobile={page.hideOnMobile}
+						style="min-width: {buttonWidth}px;"
+					>
+						<button
+							class="page-link w-100"
+							onclick={() => pageClicked(page.number)}>{page.number}</button
+						>
+					</li>
+				{/each}
+				{#if currentPageNumber < pages.length - 3 && somePagesHidden}
+					<li class="page-item text-center disabled arrowWidth">
+						<span
+							class="page-link w-100"
+							style="cursor: default;">...</span
+						>
+					</li>
+					<li
+						class="page-item text-center"
+						style="min-width: {buttonWidth}px;"
+					>
+						<button
+							class="page-link w-100"
+							onclick={() => pageClicked(pages.length)}
+							aria-label="Last"
+							>{pages.length}
+						</button>
+					</li>
+				{/if}
+				<li
+					class="page-item text-center unselectable arrowWidth"
+					class:disabled={currentPageNumber === lastPageNumber}
+					class:d-none={perPageCount == 0 || !perPageCount}
+				>
+					<button
+						class="page-link w-100"
+						onclick={() => pageClicked(currentPageNumber + 1)}
+						aria-label="Next"
+					>
+						<i class="far fa-chevron-right"></i>
+					</button>
+				</li>
+				<li
+					class="page-item text-center unselectable hideOnMobile arrowWidth"
+					class:disabled={currentPageNumber === lastPageNumber}
+					class:d-none={perPageCount == 0 || !perPageCount}
+				>
+					<button
+						class="page-link w-100"
+						onclick={() => pageClicked(lastPageNumber)}
+						aria-label="Last"
+					>
+						<i class="far fa-chevron-double-right"></i>
+					</button>
+				</li>
+			</ul>
+			{#if showInfoFooter}
+				<div class="text-center">
+					<small
+						>{1 + (currentPageNumber - 1) * perPageCount}-{currentPageNumber * perPageCount > computedTotalItemsCount
+							? computedTotalItemsCount
+							: currentPageNumber * perPageCount} of {computedTotalItemsCount}
+						results</small
+					>
+				</div>
+			{/if}
+		</nav>
+	</div>
+{/if}
+
+<style>
+	@media screen and (max-width: 576px) {
+		.hideOnMobile {
+			display: none;
+		}
+		.pagination-sm .page-link {
+			padding: 0.5rem 0.75rem;
+			font-size: 1rem;
+			line-height: 1.25;
+		}
+		.arrowWidth {
+			width: 39px;
+		}
+	}
+	@media screen and (min-width: 576px) {
+		.arrowWidth {
+			width: 31px;
+		}
+	}
+	.page-item:not(:last-child) > .page-link {
+		border-right: 0;
+	}
+</style>