mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 15:01:46 +01:00
1675 lines
277 KiB
Plaintext
1675 lines
277 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`Pagination > renders with active color black correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active color gray correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active color green correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active color primary correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active color red correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active color white correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active variant ghost correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active variant link correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active variant outline correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active variant soft correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active variant solid correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with active variant subtle correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with as correctly 1`] = `
|
|
"<div>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with class correctly 1`] = `
|
|
"<nav class="relative">
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with color black correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with color gray correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with color green correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with color primary correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with color red correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with color white correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with defaultPage correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with disabled correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with ellipsis slot correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="6">
|
|
<!--v-if--><span class="min-w-5">6</span>
|
|
<!--v-if-->
|
|
</button>Ellipsis slot<button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="10">
|
|
<!--v-if--><span class="min-w-5">10</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with ellipsisIcon correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="ellipsis" index="1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="6">
|
|
<!--v-if--><span class="min-w-5">6</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="ellipsis" index="5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="10">
|
|
<!--v-if--><span class="min-w-5">10</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with first slot correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1">First slot<button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with firstIcon correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-left shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with item slot correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>Item slotItem slotItem slotItem slotItem slot<button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with itemsPerPage correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with last slot correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>Last slot</div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with lastIcon correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with next slot correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button>Next slot<button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with nextIcon correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-small-right shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with page correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with prev slot correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>Prev slot<button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with prevIcon correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-small-left shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with showEdges correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="6">
|
|
<!--v-if--><span class="min-w-5">6</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 7" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="7">
|
|
<!--v-if--><span class="min-w-5">7</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="ellipsis" index="7" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-horizontal-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="10">
|
|
<!--v-if--><span class="min-w-5">10</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with siblingCount correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="ellipsis" index="1" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-horizontal-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 6" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="6">
|
|
<!--v-if--><span class="min-w-5">6</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="ellipsis" index="5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5 pointer-events-none"><span class="iconify i-heroicons:ellipsis-horizontal-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 10" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="10">
|
|
<!--v-if--><span class="min-w-5">10</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with size lg correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with size md correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with size sm correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with size xl correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-2.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-2.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with size xs correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-xs gap-1 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with total correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with ui correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-3"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with variant ghost correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with variant link correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with variant outline correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with variant soft correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-primary-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with variant solid correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders with variant subtle correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button></div>
|
|
</nav>"
|
|
`;
|
|
|
|
exports[`Pagination > renders without showControls correctly 1`] = `
|
|
"<nav>
|
|
<div class="flex items-center gap-1">
|
|
<!--v-if-->
|
|
<!--v-if--><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
|
|
<!--v-if--><span class="min-w-5">1</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
|
|
<!--v-if--><span class="min-w-5">2</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
|
|
<!--v-if--><span class="min-w-5">3</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
|
|
<!--v-if--><span class="min-w-5">4</span>
|
|
<!--v-if-->
|
|
</button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
|
|
<!--v-if--><span class="min-w-5">5</span>
|
|
<!--v-if-->
|
|
</button>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</nav>"
|
|
`;
|