flowbite-svelte 0.22.6 → 0.22.7

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.22.7](https://github.com/themesberg/flowbite-svelte/compare/v0.22.6...v0.22.7) (2022-07-22)
+
+
+### Features
+
+* form buttons tinted removed ([5c2d619](https://github.com/themesberg/flowbite-svelte/commit/5c2d619c8c5ade960e2b3a59c20b809a40174829))
+
+
+### Bug Fixes
+
+* [#177](https://github.com/themesberg/flowbite-svelte/issues/177) export visible/autohide ([2127151](https://github.com/themesberg/flowbite-svelte/commit/2127151550a778d35bee5eb3b2b77f38423f50e4))
+
 ### [0.22.6](https://github.com/themesberg/flowbite-svelte/compare/v0.22.5...v0.22.6) (2022-07-22)
 
 

package/dropdowns/Dropdown.svelte

@@ -1,4 +1,5 @@
-<script>import Tooltip from '../tooltips/Tooltip.svelte';
+<script>import { setContext } from 'svelte';
+import Tooltip from '../tooltips/Tooltip.svelte';
 import Button from '../buttons/Button.svelte';
 import classNames from 'classnames';
 import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from 'svelte-heros';
@@ -8,6 +9,7 @@ export let tooltipArrow = false;
 export let arrowIcon = true;
 export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent';
 export let placement = 'bottom';
+setContext('background', true);
 const icons = {
     top: ChevronUp,
     right: ChevronRight,

package/forms/Checkbox.svelte

@@ -1,13 +1,15 @@
-<script>import Radio, { labelClass, inputClass } from './Radio.svelte';
+<script>import { getContext } from 'svelte';
+import Radio, { labelClass, inputClass } from './Radio.svelte';
 import Label from './Label.svelte';
 // properties forwarding
 export let color = 'blue';
 export let custom = false;
 export let inline = false;
-export let tinted = false;
 export let group = [];
 export let value = '';
 export let checked = undefined;
+// tinted if put in component having its own background
+let background = getContext('background');
 $: {
     // There's a bug in Svelte and bind:group is not working with wrapped checkbox
     // This workaround is taken from:
@@ -37,6 +39,6 @@ $: {
 		on:click
 		{value}
 		{...$$restProps}
-		class={inputClass(custom, color, true, tinted, $$slots.default || $$props.class)}
+		class={inputClass(custom, color, true, background, $$slots.default || $$props.class)}
 	/><slot />
 </Label>

package/forms/Checkbox.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         color?: FormColorType;
         custom?: boolean;
         inline?: boolean;
-        tinted?: boolean;
         group?: string[];
         value?: string;
         checked?: boolean;

package/forms/Radio.svelte

@@ -26,13 +26,15 @@
 		);
 </script>
 
-<script>import Label from './Label.svelte';
+<script>import { getContext } from 'svelte';
+import Label from './Label.svelte';
 export let color = 'blue';
 export let custom = false;
 export let inline = false;
-export let tinted = false;
 export let group = '';
 export let value = '';
+// tinted if put in component having its own background
+let background = getContext('background');
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={!!$$slots.default}>
@@ -43,6 +45,6 @@ export let value = '';
 		on:change
 		{value}
 		{...$$restProps}
-		class={inputClass(custom, color, false, tinted, $$slots.default || $$props.class)}
+		class={inputClass(custom, color, false, background, $$slots.default || $$props.class)}
 	/><slot />
 </Label>

package/forms/Radio.svelte.d.ts

@@ -8,7 +8,6 @@ declare const __propDef: {
         color?: FormColorType;
         custom?: boolean;
         inline?: boolean;
-        tinted?: boolean;
         group?: number | string;
         value?: string;
     };

package/forms/SimpleSearch.svelte

@@ -1,11 +1,13 @@
-<script>export let id = '';
+<script>import { getContext } from 'svelte';
+// tainted if put in component having its own background
+let background = getContext('background');
+export let id = '';
 export let labelClass = 'sr-only';
 export let iconClass = 'w-5 h-5 text-gray-500 dark:text-gray-400';
 export let iconDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
 export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let btnClass = 'p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 export let placeholder = 'Search';
-export let tinted = false;
 </script>
 
 <form class="flex items-center" on:submit>
@@ -28,7 +30,7 @@ export let tinted = false;
 			{...$$restProps}
 			type="text"
 			{id}
-			class="{tinted
+			class="{background
 				? 'dark:bg-gray-600 dark:border-gray-500'
 				: ' dark:bg-gray-700 dark:border-gray-600'} {inputClass}"
 			{placeholder}

package/forms/SimpleSearch.svelte.d.ts

@@ -9,7 +9,6 @@ declare const __propDef: {
         inputClass?: string;
         btnClass?: string;
         placeholder?: string;
-        tinted?: boolean;
     };
     events: {
         submit: SubmitEvent;

package/forms/Toggle.svelte

@@ -1,10 +1,13 @@
-<script>import classNames from 'classnames';
+<script>import { getContext } from 'svelte';
+import classNames from 'classnames';
 import Checkbox from './Checkbox.svelte';
 export let size = 'default';
 export let group = [];
 export let value = '';
 export let checked = undefined;
-const common = "mr-3 bg-gray-200 rounded-full peer-focus:ring-4 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600";
+// tinted if put in component having its own background
+let background = getContext('background');
+const common = "mr-3 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
 const colors = {
     red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
     green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
@@ -19,9 +22,19 @@ const sizes = {
     default: 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5',
     large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6'
 };
+let divClass;
+$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size]);
 </script>
 
-<Checkbox custom class="relative {$$props.class}" {value} bind:checked bind:group {...$$restProps} on:click>
-	<div class={classNames(common, colors[$$restProps.color ?? 'blue'], sizes[size])} />
+<Checkbox
+	custom
+	class="relative {$$props.class}"
+	{value}
+	bind:checked
+	bind:group
+	{...$$restProps}
+	on:click
+>
+	<div class={divClass} />
 	<slot />
 </Checkbox>

package/package.json

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

package/toasts/Toast.svelte

@@ -9,7 +9,7 @@ export let transition = 'fade';
 export let params = {};
 // Absolute position
 export let position = undefined; // default not set
-let visible = true;
+export let visible = true;
 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',

package/toasts/Toast.svelte.d.ts

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