flowbite-svelte 0.24.1 → 0.24.2

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.24.2](https://github.com/themesberg/flowbite-svelte/compare/v0.24.1...v0.24.2) (2022-08-07)
+
+
+### Features
+
+* add export divClass to Toast for user custom CSS ([7625c01](https://github.com/themesberg/flowbite-svelte/commit/7625c017af9a91920880b3d9c09d8f02924178e5))
+
 ### [0.24.1](https://github.com/themesberg/flowbite-svelte/compare/v0.24.0...v0.24.1) (2022-08-07)
 
 

package/package.json

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

package/toasts/Toast.svelte

@@ -10,6 +10,7 @@ export let params = {};
 // Absolute position
 export let position = undefined; // default not set
 export let visible = true;
+export let divClass = 'w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800';
 const colors = {
     blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
     green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
@@ -22,8 +23,7 @@ const colors = {
 // have a custom transition function that returns the desired transition
 let transitionFunc;
 $: transitionFunc = transitions[transition] ?? transitions.fade;
-let divClass;
-$: divClass = classNames('w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800', {
+$: classDiv = classNames(divClass, {
     'absolute top-5 left-5': position == 'tl',
     'absolute top-5 right-5': position == 'tr',
     'absolute bottom-5 left-5': position == 'bl',
@@ -34,7 +34,7 @@ $: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0
 </script>
 
 {#if visible}
-	<div transition:transitionFunc={params} class={divClass} role="alert">
+	<div transition:transitionFunc={params} class={classDiv} role="alert">
 		<div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
 			{#if $$slots.icon}
 				<div class={iconClass}><slot name="icon" /></div>

package/toasts/Toast.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         params?: TransitionParamTypes;
         position?: 'tl' | 'tr' | 'bl' | 'br';
         visible?: boolean;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;