stdf/packages/stdf/components/pagination/SecondPageNext.svelte

<script>
	import { createEventDispatcher } from 'svelte';
	import Page from './Page.svelte';

	// 定义事件派发器
	// Define event dispatcher
	const dispatch = createEventDispatcher();

	export let pageCol = 3;

	export let Pages = [];

	export let maxShowPage = 9;

	export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'

	export let type = 'bold'; // 'border'/'block'/'bold'

	// 点击页码
	// click page
	const clickItemFunc = index => {
		dispatch('clickItem', index);
	};
</script>

{#if Pages.length > 0}
	<div
		class="absolute -top-3 bg-white dark:bg-black grid divide-x translate-x-1/2 -translate-y-full rounded-lg shadow dark:shadow-white/10 p-1 gap-y-2 max-h-[7.25rem] overflow-y-auto second-page-contents"
		style="width: calc({(pageCol / (maxShowPage + 2)) * 100}% + 8px);right:{(2.5 / (maxShowPage + 2)) *
			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
	>
		{#each Pages as item}
			<Page on:click={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
		{/each}
	</div>
	<div
		class="absolute -top-3 w-0 h-0 border-8 border-t-8 border-transparent translate-x-1/2 border-t-white dark:border-t-black"
		style="right:{(2.5 / (maxShowPage + 2)) * 100}%;"
	/>
{/if}

<style>
	.second-page-contents::-webkit-scrollbar {
		display: none; /* Chrome Safari */
	}
</style>