flowbite-svelte 0.27.10 → 0.27.12

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 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.27.12](https://github.com/themesberg/flowbite-svelte/compare/v0.27.11...v0.27.12) (2022-10-29)
+
+
+### Bug Fixes
+
+* meta tag by adding type, url, and appId ([#399](https://github.com/themesberg/flowbite-svelte/issues/399)) ([6f9f423](https://github.com/themesberg/flowbite-svelte/commit/6f9f423b294bbc54bdae152f659e029e5e8a1f76))
+* update meta images width and height ([#400](https://github.com/themesberg/flowbite-svelte/issues/400)) ([f97c01a](https://github.com/themesberg/flowbite-svelte/commit/f97c01a361714daca951c16fa7a2293988abd983))
+
+### [0.27.11](https://github.com/themesberg/flowbite-svelte/compare/v0.27.10...v0.27.11) (2022-10-26)
+
+
+### Features
+
+* pagination ([#395](https://github.com/themesberg/flowbite-svelte/issues/395)) ([4792988](https://github.com/themesberg/flowbite-svelte/commit/479298855936bdc0e917788bbe1e00d8f62cbbe2))
+
+
+### Bug Fixes
+
+* add default value to opacity and space of paragraph element ([16f0729](https://github.com/themesberg/flowbite-svelte/commit/16f07295a2d23a3860ace75fab345c0d3452181b))
+* merge conflict ([fa3c5d8](https://github.com/themesberg/flowbite-svelte/commit/fa3c5d8d205bc7211334f19c0ec6ec7c57fdd754))
+* props update ([4c109c8](https://github.com/themesberg/flowbite-svelte/commit/4c109c84913bfe09ac8d4d6a7dd2265a0243eefa))
+* set the default values of space and color of paragraph element to undefined ([0d54908](https://github.com/themesberg/flowbite-svelte/commit/0d549081235b1691017c0d3ae802fe71b48c4016))
+
 ### [0.27.10](https://github.com/themesberg/flowbite-svelte/compare/v0.27.9...v0.27.10) (2022-10-21)
 
 

package/buttons/Button.svelte

@@ -18,6 +18,7 @@ const colorClasses = {
     green: 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
     red: 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
     yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900',
+    primary: 'text-white bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800',
     purple: 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'
 };
 const gradientClasses = {

package/buttons/Button.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         href?: string | undefined;
         btnClass?: string | undefined;
         type?: ButtonType | undefined;
-        color?: "red" | "yellow" | "green" | "purple" | "pink" | "blue" | "light" | "dark" | "cyan" | "teal" | "lime" | "alternative" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
+        color?: "red" | "yellow" | "green" | "purple" | "pink" | "blue" | "light" | "dark" | "cyan" | "teal" | "lime" | "alternative" | "primary" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
         shadow?: "red" | "green" | "purple" | "pink" | "blue" | "cyan" | "teal" | "lime" | null | undefined;
     };
     events: {

package/index.d.ts

@@ -57,9 +57,7 @@ export { default as NavHamburger } from './navbar/NavHamburger.svelte';
 export { default as NavLi } from './navbar/NavLi.svelte';
 export { default as NavUl } from './navbar/NavUl.svelte';
 export { default as Pagination } from './paginations/Pagination.svelte';
-export { default as Previous } from './paginations/Previous.svelte';
-export { default as Next } from './paginations/Next.svelte';
-export { default as TableData } from './paginations/TableData.svelte';
+export { default as PaginationItem } from './paginations/PaginationItem.svelte';
 export { default as Popover } from './popover/Popover.svelte';
 export { default as Progressbar } from './progressbars/Progressbar.svelte';
 export { default as Rating } from './ratings/Rating.svelte';

package/index.js

@@ -78,9 +78,7 @@ export { default as NavLi } from './navbar/NavLi.svelte';
 export { default as NavUl } from './navbar/NavUl.svelte';
 // Pagination
 export { default as Pagination } from './paginations/Pagination.svelte';
-export { default as Previous } from './paginations/Previous.svelte';
-export { default as Next } from './paginations/Next.svelte';
-export { default as TableData } from './paginations/TableData.svelte';
+export { default as PaginationItem } from './paginations/PaginationItem.svelte';
 // Popover
 export { default as Popover } from './popover/Popover.svelte';
 // Progressbar

package/list-group/Listgroup.svelte

@@ -9,7 +9,7 @@ let groupClass;
 $: groupClass = classNames('divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
 </script>
 
-<Frame tag={active ? 'div' : 'ul'} rounded border class={groupClass}>
+<Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
   {#each items as item, index}
     <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
   {:else}

package/modals/Modal.svelte

@@ -97,7 +97,7 @@ function handleKeys(e) {
     on:click={autoclose ? onAutoClose : null}>
     <div class="flex p-4 w-full {sizes[size]} h-full md:h-auto max-h-screen">
       <!-- Modal content -->
-      <Frame rounded shadow class="relative flex flex-col w-full h-full md:h-auto">
+      <Frame {...$$restProps} rounded shadow class="relative flex flex-col w-full h-full md:h-auto">
         <!-- Modal header -->
         {#if $$slots.header || title}
           <div class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">

package/navbar/NavUl.svelte

@@ -14,15 +14,15 @@ $$props.class);
 </script>
 
 {#if !hidden}
-	<div {...$$restProps} class={_divClass} transition:slide={{ delay: 250, duration: 500, easing: quintOut }}>
-		<Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
-			<slot />
-		</Frame>
-	</div>
+  <div {...$$restProps} class={_divClass} transition:slide={{ delay: 250, duration: 500, easing: quintOut }}>
+    <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
+      <slot />
+    </Frame>
+  </div>
 {:else}
-	<div {...$$restProps} class={_divClass} {hidden}>
-		<ul class={_ulClass}>
-			<slot />
-		</ul>
-	</div>
+  <div {...$$restProps} class={_divClass} {hidden}>
+    <ul class={_ulClass}>
+      <slot />
+    </ul>
+  </div>
 {/if}

package/navbar/Navbar.svelte

@@ -11,7 +11,7 @@ let toggle = () => {
 </script>
 
 <Frame tag="nav" {color} {...$$restProps} class={classNames(navClass, $$props.class)}>
-	<div class={classNames(navDivClass, fluid && 'container')}>
-		<slot {hidden} {toggle} />
-	</div>
+  <div class={classNames(navDivClass, fluid && 'container')}>
+    <slot {hidden} {toggle} />
+  </div>
 </Frame>

package/navbar/Navbar.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         navClass?: string | undefined;
         navDivClass?: string | undefined;
         fluid?: boolean | undefined;
-        color?: string | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "light" | "dark" | "dropdown" | "navbar" | "navbarUl" | "form" | "none" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.27.10",
+  "version": "0.27.12",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -170,10 +170,8 @@
     "./navbar/NavLi.svelte": "./navbar/NavLi.svelte",
     "./navbar/NavUl.svelte": "./navbar/NavUl.svelte",
     "./navbar/Navbar.svelte": "./navbar/Navbar.svelte",
-    "./paginations/Next.svelte": "./paginations/Next.svelte",
     "./paginations/Pagination.svelte": "./paginations/Pagination.svelte",
-    "./paginations/Previous.svelte": "./paginations/Previous.svelte",
-    "./paginations/TableData.svelte": "./paginations/TableData.svelte",
+    "./paginations/PaginationItem.svelte": "./paginations/PaginationItem.svelte",
     "./popover/Popover.svelte": "./popover/Popover.svelte",
     "./progressbars/Progressbar.svelte": "./progressbars/Progressbar.svelte",
     "./ratings/AdvancedRating.svelte": "./ratings/AdvancedRating.svelte",

package/paginations/Pagination.svelte

@@ -1,13 +1,12 @@
-<script>import { createEventDispatcher } from 'svelte';
-export let icon = false;
-export let pages;
+<script>import classNames from 'classnames';
+import { createEventDispatcher, setContext } from 'svelte';
+import PaginationItem from './PaginationItem.svelte';
+export let pages = [];
 export let ulClass = 'inline-flex -space-x-px items-center';
-export let pageClass = 'py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 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';
-export let previousClass = 'py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 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';
-export let nextClass = 'py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 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';
-export let iconPreviousClass = 'block py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 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';
-export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 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';
+export let table = false;
 const dispatch = createEventDispatcher();
+setContext('group', true);
+setContext('table', table);
 const previous = () => {
     dispatch('previous');
 };
@@ -17,115 +16,21 @@ const next = () => {
 </script>
 
 <nav aria-label="Page navigation">
-	<ul class={ulClass}>
-		<li>
-			{#if icon}
-				<a
-					href="/"
-					on:click|preventDefault={previous}
-					class={iconPreviousClass}
-					on:blur
-					on:click
-					on:focus
-					on:keydown
-					on:keypress
-					on:keyup
-					on:mouseenter
-					on:mouseleave
-					on:mouseover
-				>
-					<span class="sr-only">Previous</span>
-					<svg
-						class="w-5 h-5"
-						fill="currentColor"
-						viewBox="0 0 20 20"
-						xmlns="http://www.w3.org/2000/svg"
-						><path
-							fill-rule="evenodd"
-							d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-							clip-rule="evenodd"
-						/></svg
-					>
-				</a>
-			{:else}
-				<a
-					href="/"
-					on:click|preventDefault={previous}
-					class={previousClass}
-					on:blur
-					on:click
-					on:focus
-					on:keydown
-					on:keypress
-					on:keyup
-					on:mouseenter
-					on:mouseleave
-					on:mouseover>Previous</a
-				>
-			{/if}
-		</li>
-		{#each pages as { pageNum, href }}
-			<li>
-				<a
-					{href}
-					class={pageClass}
-					on:blur
-					on:click
-					on:focus
-					on:keydown
-					on:keypress
-					on:keyup
-					on:mouseenter
-					on:mouseleave
-					on:mouseover>{pageNum}</a
-				>
-			</li>
-		{/each}
-		<li>
-			{#if icon}
-				<a
-					href="/"
-					on:click|preventDefault={next}
-					class={iconNextClass}
-					on:blur
-					on:click
-					on:focus
-					on:keydown
-					on:keypress
-					on:keyup
-					on:mouseenter
-					on:mouseleave
-					on:mouseover
-				>
-					<span class="sr-only">Next</span>
-					<svg
-						class="w-5 h-5"
-						fill="currentColor"
-						viewBox="0 0 20 20"
-						xmlns="http://www.w3.org/2000/svg"
-						><path
-							fill-rule="evenodd"
-							d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-							clip-rule="evenodd"
-						/></svg
-					>
-				</a>
-			{:else}
-				<a
-					href="/"
-					on:click|preventDefault={next}
-					class={nextClass}
-					on:blur
-					on:click
-					on:focus
-					on:keydown
-					on:keypress
-					on:keyup
-					on:mouseenter
-					on:mouseleave
-					on:mouseover>Next</a
-				>
-			{/if}
-		</li>
-	</ul>
+  <ul class={classNames(ulClass, table && 'divide-x divide-gray-700', $$props.class)}>
+    <li>
+      <PaginationItem on:click={previous} class={table ? 'rounded-l' : 'rounded-l-lg'}>
+        <slot name="prev">Previous</slot>
+      </PaginationItem>
+    </li>
+    {#each pages as { name, href }}
+      <li>
+        <PaginationItem {href}>{name}</PaginationItem>
+      </li>
+    {/each}
+    <li>
+      <PaginationItem on:click={next} class={table ? 'rounded-r' : 'rounded-r-lg'}>
+        <slot name="next">Next</slot>
+      </PaginationItem>
+    </li>
+  </ul>
 </nav>

package/paginations/Pagination.svelte.d.ts

@@ -1,32 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
-import type { PageType } from '../types';
+import type { LinkType } from '../types';
 declare const __propDef: {
     props: {
-        icon?: boolean | undefined;
-        pages: PageType[];
+        [x: string]: any;
+        pages?: LinkType[] | undefined;
         ulClass?: string | undefined;
-        pageClass?: string | undefined;
-        previousClass?: string | undefined;
-        nextClass?: string | undefined;
-        iconPreviousClass?: string | undefined;
-        iconNextClass?: string | undefined;
+        table?: boolean | undefined;
     };
     events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
         previous: CustomEvent<any>;
         next: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        prev: {};
+        next: {};
+    };
 };
 export declare type PaginationProps = typeof __propDef.props;
 export declare type PaginationEvents = typeof __propDef.events;

package/paginations/PaginationItem.svelte

@@ -0,0 +1,24 @@
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let href = undefined;
+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);
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'button'}
+  {href}
+  class={defaultClass}
+  on:blur
+  on:click
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseenter
+  on:mouseleave
+  on:mouseover>
+  <slot />
+</svelte:element>

package/paginations/{Next.svelte.d.ts → PaginationItem.svelte.d.ts}

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        icon?: boolean | undefined;
-        nextClass?: string | undefined;
+        [x: string]: any;
+        href?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -14,15 +14,16 @@ declare const __propDef: {
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
         mouseover: MouseEvent;
-        next: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
-export declare type NextProps = typeof __propDef.props;
-export declare type NextEvents = typeof __propDef.events;
-export declare type NextSlots = typeof __propDef.slots;
-export default class Next extends SvelteComponentTyped<NextProps, NextEvents, NextSlots> {
+export declare type PaginationItemProps = typeof __propDef.props;
+export declare type PaginationItemEvents = typeof __propDef.events;
+export declare type PaginationItemSlots = typeof __propDef.slots;
+export default class PaginationItem extends SvelteComponentTyped<PaginationItemProps, PaginationItemEvents, PaginationItemSlots> {
 }
 export {};

package/toasts/Toast.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: Colors | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "light" | "dark" | "dropdown" | "navbar" | "navbarUl" | "form" | "none" | undefined;
         simple?: boolean | undefined;
         position?: "none" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
         open?: boolean | undefined;

package/typography/P.svelte

@@ -6,10 +6,10 @@ export let justify = false;
 export let italic = false;
 export let firstupper = false;
 export let upperClass = 'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:mr-3 first-letter:float-left';
-export let opacity;
+export let opacity = undefined;
 export let whitespace = 'normal';
 export let size = 'base';
-export let space;
+export let space = undefined;
 export let weight = 'normal';
 const sizes = {
     xs: 'text-xs',

package/typography/P.svelte.d.ts

@@ -9,10 +9,10 @@ declare const __propDef: {
         italic?: boolean | undefined;
         firstupper?: boolean | undefined;
         upperClass?: string | undefined;
-        opacity: number;
+        opacity?: number | undefined;
         whitespace?: "pre" | "normal" | "nowrap" | "preline" | "prewrap" | undefined;
         size?: "xs" | "sm" | "lg" | "xl" | "base" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
-        space: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
+        space?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | undefined;
         weight?: "light" | "bold" | "normal" | "thin" | "extralight" | "medium" | "semibold" | "extrabold" | "black" | undefined;
     };
     events: {

package/utils/Frame.svelte

@@ -33,6 +33,7 @@ const bgColors = {
     navbar: 'bg-white dark:bg-gray-900',
     navbarUl: 'bg-gray-50 dark:bg-gray-800',
     form: 'bg-gray-50 dark:bg-gray-700',
+    primary: 'bg-primary-100 dark:bg-primary-200 ',
     none: ''
 };
 const textColors = {
@@ -51,6 +52,7 @@ const textColors = {
     navbar: 'text-gray-700 dark:text-gray-200',
     navbarUl: 'text-gray-700 dark:text-gray-400',
     form: 'text-gray-900 dark:text-white',
+    primary: 'text-primary-700 dark:text-primary-800',
     none: ''
 };
 const borderColors = {
@@ -69,6 +71,7 @@ const borderColors = {
     navbar: 'border-gray-100 dark:border-gray-700',
     navbarUl: 'border-gray-100 dark:border-gray-700',
     form: 'border-gray-300 dark:border-gray-700',
+    primary: 'border-primary-500 dark:bg-primary-200 ',
     none: ''
 };
 let divClass;

package/paginations/Next.svelte

@@ -1,41 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-export let icon = false;
-export let nextClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 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 dispatch = createEventDispatcher();
-const next = () => {
-    dispatch('next');
-};
-if (!icon) {
-    nextClass += ' ml-3';
-}
-</script>
-
-<a
-	href="/"
-	on:click|preventDefault={next}
-	class={nextClass}
-	on:blur
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseenter
-	on:mouseleave
-	on:mouseover
->
-	Next
-	{#if icon}
-		<svg
-			class="ml-2 w-5 h-5"
-			fill="currentColor"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				fill-rule="evenodd"
-				d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
-				clip-rule="evenodd"
-			/></svg
-		>
-	{/if}
-</a>

package/paginations/Previous.svelte

@@ -1,41 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-export let icon = false;
-export let previousClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 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 dispatch = createEventDispatcher();
-const previous = () => {
-    dispatch('previous');
-};
-if (icon) {
-    previousClass += ' mr-3';
-}
-</script>
-
-<a
-	href="/"
-	on:click|preventDefault={previous}
-	class={previousClass}
-	on:blur
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseenter
-	on:mouseleave
-	on:mouseover
->
-	{#if icon}
-		<svg
-			class="mr-2 w-5 h-5"
-			fill="currentColor"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				fill-rule="evenodd"
-				d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
-				clip-rule="evenodd"
-			/></svg
-		>
-	{/if}
-	Previous
-</a>

package/paginations/Previous.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        icon?: boolean | undefined;
-        previousClass?: string | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-        previous: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type PreviousProps = typeof __propDef.props;
-export declare type PreviousEvents = typeof __propDef.events;
-export declare type PreviousSlots = typeof __propDef.slots;
-export default class Previous extends SvelteComponentTyped<PreviousProps, PreviousEvents, PreviousSlots> {
-}
-export {};

package/paginations/TableData.svelte

@@ -1,56 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-export let btnPreClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-export let helper = undefined;
-const dispatch = createEventDispatcher();
-const previous = () => {
-    dispatch('previous');
-};
-const next = () => {
-    dispatch('next');
-};
-</script>
-
-<div class="flex flex-col items-center">
-	{#if helper}
-		<!-- Help text -->
-		<span class="text-sm text-gray-700 dark:text-gray-400">
-			Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span> to
-			<span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
-			of <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span> Entries
-		</span>
-	{/if}
-	<!-- Buttons -->
-	<div class="inline-flex mt-2">
-		<button
-			on:click={previous}
-			class={btnPreClass}
-			on:blur
-			on:click
-			on:focus
-			on:keydown
-			on:keypress
-			on:keyup
-			on:mouseenter
-			on:mouseleave
-			on:mouseover
-		>
-			Prev
-		</button>
-		<button
-			on:click={next}
-			class={btnNextClass}
-			on:blur
-			on:click
-			on:focus
-			on:keydown
-			on:keypress
-			on:keyup
-			on:mouseenter
-			on:mouseleave
-			on:mouseover
-		>
-			Next
-		</button>
-	</div>
-</div>

package/paginations/TableData.svelte.d.ts

@@ -1,31 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TableDataHelperType } from '../types';
-declare const __propDef: {
-    props: {
-        btnPreClass?: string | undefined;
-        btnNextClass?: string | undefined;
-        helper?: TableDataHelperType | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-        previous: CustomEvent<any>;
-        next: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type TableDataProps = typeof __propDef.props;
-export declare type TableDataEvents = typeof __propDef.events;
-export declare type TableDataSlots = typeof __propDef.slots;
-export default class TableData extends SvelteComponentTyped<TableDataProps, TableDataEvents, TableDataSlots> {
-}
-export {};