flowbite-svelte 0.29.3 → 0.29.4

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.29.4](https://github.com/themesberg/flowbite-svelte/compare/v0.29.3...v0.29.4) (2022-12-22)
+
+
+### Features
+
+* add pagination examples ([#503](https://github.com/themesberg/flowbite-svelte/issues/503)) ([93e48e3](https://github.com/themesberg/flowbite-svelte/commit/93e48e354a731216213e4ba38bf12e462880d58a))
+
 ### [0.29.3](https://github.com/themesberg/flowbite-svelte/compare/v0.29.2...v0.29.3) (2022-12-20)
 
 ### [0.29.2](https://github.com/themesberg/flowbite-svelte/compare/v0.29.1...v0.29.2) (2022-12-19)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.29.3",
+  "version": "0.29.4",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/paginations/Pagination.svelte

@@ -4,6 +4,7 @@ import PaginationItem from './PaginationItem.svelte';
 export let pages = [];
 export let ulClass = 'inline-flex -space-x-px items-center';
 export let table = false;
+export let active = false;
 const dispatch = createEventDispatcher();
 setContext('group', true);
 setContext('table', table);
@@ -22,9 +23,10 @@ const next = () => {
         <slot name="prev">Previous</slot>
       </PaginationItem>
     </li>
-    {#each pages as { name, href }}
+    {#each pages as { name, href, active }}
       <li>
         <PaginationItem
+          {active}
           on:blur
           on:change
           on:click

package/paginations/Pagination.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         pages?: LinkType[] | undefined;
         ulClass?: string | undefined;
         table?: boolean | undefined;
+        active?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;

package/paginations/PaginationItem.svelte

@@ -1,10 +1,13 @@
 <script>import classNames from 'classnames';
-import { getContext } from 'svelte';
+import { getContext, onMount } from 'svelte';
 export let href = undefined;
+export let active = false;
+export let activeClass = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
+export let normalClass = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 const group = getContext('group');
 const table = getContext('table');
 let defaultClass;
-$: defaultClass = classNames('block py-2', group ? 'px-3' : 'px-4', 'text-sm font-medium', table || 'border border-gray-300', group || (table ? 'rounded' : 'rounded-lg'), 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white', $$props.class);
+$: defaultClass = classNames('block py-2', group ? 'px-3' : 'px-4', 'text-sm font-medium', table || 'border border-gray-300', group || (table ? 'rounded' : 'rounded-lg'), active ? activeClass : normalClass, $$props.class);
 </script>
 
 <svelte:element

package/paginations/PaginationItem.svelte.d.ts

@@ -3,6 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         href?: string | undefined;
+        active?: boolean | undefined;
+        activeClass?: string | undefined;
+        normalClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;

package/types.d.ts

@@ -96,6 +96,7 @@ export interface LinkType {
     name: number;
     href?: string;
     rel?: string;
+    active?: boolean;
 }
 export interface ListCardType {
     img: ImgType;