flowbite-svelte 0.29.4 → 0.29.6

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.6](https://github.com/themesberg/flowbite-svelte/compare/v0.29.5...v0.29.6) (2022-12-26)
+
+
+### Features
+
+* add on:contextmenu ([#506](https://github.com/themesberg/flowbite-svelte/issues/506)) ([75ad596](https://github.com/themesberg/flowbite-svelte/commit/75ad59695188e36e0af52487e041c15a7b6fd845))
+
+
+### Bug Fixes
+
+* pagination for darkmode ([#507](https://github.com/themesberg/flowbite-svelte/issues/507)) ([9175627](https://github.com/themesberg/flowbite-svelte/commit/917562790bc05a1a0679c11266ee7d23531c865f))
+
+### [0.29.5](https://github.com/themesberg/flowbite-svelte/compare/v0.29.4...v0.29.5) (2022-12-22)
+
 ### [0.29.4](https://github.com/themesberg/flowbite-svelte/compare/v0.29.3...v0.29.4) (2022-12-22)
 
 

package/forms/Input.svelte

@@ -64,6 +64,7 @@ let floatClass = 'flex absolute inset-y-0 items-center pointer-events-none text-
       on:blur
       on:change
       on:click
+      on:contextmenu
       on:focus
       on:keydown
       on:keypress

package/forms/Input.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         blur: FocusEvent;
         change: Event;
         click: MouseEvent;
+        contextmenu: MouseEvent;
         focus: FocusEvent;
         keydown: KeyboardEvent;
         keypress: KeyboardEvent;

package/forms/Select.svelte

@@ -16,7 +16,7 @@ let selectClass;
 $: selectClass = classNames(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$restProps.class);
 </script>
 
-<select {...$$restProps} bind:value class={selectClass} on:change on:input>
+<select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>
   <option disabled selected value="">{placeholder}</option>
 
   {#each items as { value, name }}

package/forms/Select.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
     };
     events: {
         change: Event;
+        contextmenu: MouseEvent;
         input: Event;
     } & {
         [evt: string]: CustomEvent<any>;

package/forms/Textarea.svelte

@@ -28,6 +28,7 @@ $: innerWrapperClass = classNames('py-2 px-4 bg-white dark:bg-gray-800', $$slots
       on:blur
       on:change
       on:click
+      on:contextmenu
       on:focus
       on:keydown
       on:keypress

package/forms/Textarea.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         blur: FocusEvent;
         change: Event;
         click: MouseEvent;
+        contextmenu: MouseEvent;
         focus: FocusEvent;
         keydown: KeyboardEvent;
         keypress: KeyboardEvent;

package/package.json

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

package/paginations/Pagination.svelte

@@ -2,9 +2,10 @@
 import { createEventDispatcher, setContext } from 'svelte';
 import PaginationItem from './PaginationItem.svelte';
 export let pages = [];
+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';
 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);
@@ -19,7 +20,9 @@ const next = () => {
 <nav aria-label="Page navigation">
   <ul class={classNames(ulClass, table && 'divide-x divide-gray-700', $$props.class)}>
     <li>
-      <PaginationItem on:click={previous} class={table ? 'rounded-l' : 'rounded-l-lg'}>
+      <PaginationItem
+        on:click={previous}
+        class={classNames(normalClass, table ? 'rounded-l' : 'rounded-l-lg')}>
         <slot name="prev">Previous</slot>
       </PaginationItem>
     </li>
@@ -37,11 +40,13 @@ const next = () => {
           on:mouseenter
           on:mouseleave
           on:mouseover
+          {activeClass}
+          {normalClass}
           {href}>{name}</PaginationItem>
       </li>
     {/each}
     <li>
-      <PaginationItem on:click={next} class={table ? 'rounded-r' : 'rounded-r-lg'}>
+      <PaginationItem on:click={next} class={classNames(normalClass, table ? 'rounded-r' : 'rounded-r-lg')}>
         <slot name="next">Next</slot>
       </PaginationItem>
     </li>

package/paginations/Pagination.svelte.d.ts

@@ -4,9 +4,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         pages?: LinkType[] | undefined;
+        activeClass?: string | undefined;
+        normalClass?: string | undefined;
         ulClass?: string | undefined;
         table?: boolean | undefined;
-        active?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;

package/paginations/PaginationItem.svelte

@@ -2,7 +2,7 @@
 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 activeClass = '';
 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');

package/tables/TableBodyRow.svelte

@@ -34,6 +34,6 @@ let trClassfinal;
 $: trClassfinal = classNames(getContext('noborder') ? 'bg-white dark:bg-gray-800' : trClass, colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
 </script>
 
-<tr {...$$restProps} class={trClassfinal} on:click>
+<tr {...$$restProps} class={trClassfinal} on:click on:contextmenu>
   <slot />
 </tr>

package/tables/TableBodyRow.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        contextmenu: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/TabItem.svelte

@@ -30,6 +30,7 @@ $: buttonClass = classNames(defaultClass, open ? activeClasses ?? ctx.activeClas
     on:click={() => (open = true)}
     on:blur
     on:click
+    on:contextmenu
     on:focus
     on:keydown
     on:keypress

package/tabs/TabItem.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
     events: {
         blur: FocusEvent;
         click: MouseEvent;
+        contextmenu: MouseEvent;
         focus: FocusEvent;
         keydown: KeyboardEvent;
         keypress: KeyboardEvent;