v1.3.1

Author: shinokada

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.3.1
+
+### Patch Changes
+
+- feat: add visiblePages to PaginationNav
+
 ## 1.3.0
 
 ### Minor Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {

src/lib/pagination/Pagination.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1124)
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1125)
 ## Props
 @prop pages = []
 @prop previous

src/lib/pagination/PaginationItem.svelte

@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1120)
+[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1121)
 ## Props
 @prop children
 @prop size

src/lib/pagination/PaginationNav.svelte

@@ -7,24 +7,24 @@
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
   }
 
-  let { 
-    currentPage = 1, 
-    totalPages = 1, 
-    visiblePages = 5,  // New prop to control visible pages
-    onPageChange, 
-    prevContent, 
-    nextContent, 
-    prevClass, 
-    nextClass, 
-    layout = "pagination", 
-    nextLabel = "Next", 
-    previousLabel = "Previous", 
-    ariaLabel = "Page navigation", 
-    size = "default", 
-    class: className, 
-    spanClass, 
-    tableDivClass, 
-    ...restProps 
+  let {
+    currentPage = 1,
+    totalPages = 1,
+    visiblePages = 5, // New prop to control visible pages
+    onPageChange,
+    prevContent,
+    nextContent,
+    prevClass,
+    nextClass,
+    layout = "pagination",
+    nextLabel = "Next",
+    previousLabel = "Previous",
+    ariaLabel = "Page navigation",
+    size = "default",
+    class: className,
+    spanClass,
+    tableDivClass,
+    ...restProps
   }: PaginationNavProps = $props();
 
   // Set context values for child components
@@ -34,15 +34,7 @@
 
   // Calculate visible pages range using Svelte 5 derived values
   const halfVisiblePages = $derived(Math.floor(visiblePages / 2));
-  const lastPage = $derived(Math.min(
-    Math.max(
-      layout === "pagination" 
-        ? currentPage + halfVisiblePages 
-        : currentPage + halfVisiblePages * 2, 
-      visiblePages
-    ), 
-    totalPages
-  ));
+  const lastPage = $derived(Math.min(Math.max(layout === "pagination" ? currentPage + halfVisiblePages : currentPage + halfVisiblePages * 2, visiblePages), totalPages));
   const firstPage = $derived(Math.max(1, lastPage - visiblePages + 1));
 
   // Generate array of page numbers to display
@@ -99,4 +91,29 @@
       </PaginationButton>
     </li>
   </ul>
-</nav>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1101)
+## Props
+@prop currentPage = 1
+@prop totalPages = 1
+@prop visiblePages = 5
+@prop onPageChange
+@prop prevContent
+@prop nextContent
+@prop prevClass
+@prop nextClass
+@prop layout = "pagination"
+@prop nextLabel = "Next"
+@prop previousLabel = "Previous"
+@prop ariaLabel = "Page navigation"
+@prop size = "default"
+@prop class: className
+@prop spanClass
+@prop tableDivClass
+@prop ...restProps
+-->

src/lib/popover/Popover.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1134)
+[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1135)
 ## Props
 @prop title: titleSlot
 @prop color = "default"

src/lib/progress/Progressbar.svelte

@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1144)
+[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1145)
 ## Props
 @prop progress = "45"
 @prop precision = 0

src/lib/progress/Progressradial.svelte

@@ -62,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1161)
+[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1162)
 ## Props
 @prop progress = 45
 @prop radius = 42

src/lib/rating/AdvancedRating.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1185)
+[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1186)
 ## Props
 @prop rating
 @prop globalText

src/lib/rating/CustomIcon.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1271)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1272)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00ff00"

src/lib/rating/Heart.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1271)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1272)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#ff0000"

src/lib/rating/Rating.svelte

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1197)
+[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1198)
 ## Props
 @prop children
 @prop text

src/lib/rating/RatingComment.svelte

@@ -63,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1208)
+[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1209)
 ## Props
 @prop children
 @prop evaluation

src/lib/rating/Review.svelte

@@ -78,7 +78,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1244)
+[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1245)
 ## Props
 @prop children
 @prop address

src/lib/rating/ScoreRating.svelte

@@ -65,7 +65,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1260)
+[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1261)
 ## Props
 @prop ratings
 @prop ratings2

src/lib/rating/Star.svelte

@@ -34,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1271)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1272)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#F5CA14"

src/lib/rating/Thumbup.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1271)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1272)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00b500"

src/lib/sidebar/Sidebar.svelte

@@ -78,7 +78,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1294)
+[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1295)
 ## Props
 @prop children
 @prop isOpen = false

src/lib/sidebar/SidebarBrand.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1328)
+[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1329)
 ## Props
 @prop children
 @prop site

src/lib/sidebar/SidebarButton.svelte

@@ -18,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
+[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1312)
 ## Props
 @prop breakpoint = "md"
 @prop class: className

src/lib/sidebar/SidebarCta.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1315)
+[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1316)
 ## Props
 @prop children
 @prop icon

src/lib/sidebar/SidebarDropdownWrapper.svelte

@@ -81,7 +81,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1334)
+[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1335)
 ## Props
 @prop children
 @prop arrowup

src/lib/sidebar/SidebarGroup.svelte

@@ -12,7 +12,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1351)
+[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1352)
 ## Props
 @prop children
 @prop class: className = "space-y-2"

src/lib/sidebar/SidebarItem.svelte

@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1357)
+[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1358)
 ## Props
 @prop icon
 @prop subtext

src/lib/skeleton/CardPlaceholder.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1369)
+[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
 ## Props
 @prop size = "sm"
 @prop class: className

src/lib/skeleton/ImagePlaceholder.svelte

@@ -37,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1373)
+[ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1374)
 ## Props
 @prop size = "md"
 @prop rounded

src/lib/skeleton/ListPlaceholder.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1379)
+[ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1380)
 ## Props
 @prop itemNumber = 5
 @prop size = "md"

src/lib/skeleton/Skeleton.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1385)
+[SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1386)
 ## Props
 @prop size = "sm"
 @prop class: className

src/lib/skeleton/TextPlaceholder.svelte

@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1389)
+[TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1390)
 ## Props
 @prop size = "sm"
 @prop class: className

src/lib/skeleton/VideoPlaceholder.svelte

@@ -18,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1393)
+[VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1394)
 ## Props
 @prop size = "sm"
 @prop class: className

src/lib/speed-dial/SpeedDial.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1427)
+[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1428)
 ## Props
 @prop children
 @prop popperClass

src/lib/speed-dial/SpeedDialButton.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1441)
+[SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1442)
 ## Props
 @prop children
 @prop name = ""

src/lib/speed-dial/SpeedDialTrigger.svelte

@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1425)
+[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1426)
 ## Props
 @prop children
 @prop name = "Open actions menu"

src/lib/spinner/Spinner.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1459)
+[SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1460)
 ## Props
 @prop color = "primary"
 @prop size = "8"

src/lib/stepindicator/StepIndicator.svelte

@@ -72,7 +72,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1469)
+[StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1470)
 ## Props
 @prop steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"]
 @prop currentStep = 1