flowbite-svelte 0.22.4 → 0.22.7

package/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 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)
+
+
+### Features
+
+* select input [#50](https://github.com/themesberg/flowbite-svelte/issues/50) ([8cea993](https://github.com/themesberg/flowbite-svelte/commit/8cea993344f1427f83ab46f29a9bc1613c67960c))
+
+
+### Bug Fixes
+
+* add on:change to Radio ([074bd16](https://github.com/themesberg/flowbite-svelte/commit/074bd1677ced075971173c8abf1cf15387026efd))
+
+### [0.22.5](https://github.com/themesberg/flowbite-svelte/compare/v0.22.4...v0.22.5) (2022-07-21)
+
+
+### Bug Fixes
+
+* [#144](https://github.com/themesberg/flowbite-svelte/issues/144) ChevronLeft fix ([016940b](https://github.com/themesberg/flowbite-svelte/commit/016940b36c6782c2481d8ff6c489c2808945d674))
+
 ### [0.22.4](https://github.com/themesberg/flowbite-svelte/compare/v0.22.3...v0.22.4) (2022-07-21)
 
 

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,
@@ -28,17 +30,23 @@ $: icon = icons[placement.split('-')[0]];
 >
 	<slot name="trigger">
 		{#if inline}
-			<button class={labelClass}>
+			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
-					<svelte:component this={icon ?? ChevronDown} class="ml-2 h-4 w-4" />
+					<svelte:component
+						this={icon ?? ChevronDown}
+						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')}
+					/>
 				{/if}
 			</button>
 		{:else}
-			<Button {...$$restProps}>
+			<Button {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
-					<svelte:component this={icon ?? ChevronDown} class="ml-2 h-4 w-4" />
+					<svelte:component
+						this={icon ?? ChevronDown}
+						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')}
+					/>
 				{/if}
 			</Button>
 		{/if}

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/Label.svelte

@@ -1,6 +1,6 @@
 <script>import classNames from 'classnames';
 export let color = 'gray';
-export let defaultClass = 'text-sm font-medium';
+export let defaultClass = 'text-sm font-medium block';
 export let show = true; // helper for inheritance
 let node;
 const colorClasses = {

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}>
@@ -40,8 +42,9 @@ export let value = '';
 		type="radio"
 		bind:group
 		on:click
+		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,12 +8,12 @@ declare const __propDef: {
         color?: FormColorType;
         custom?: boolean;
         inline?: boolean;
-        tinted?: boolean;
         group?: number | string;
         value?: string;
     };
     events: {
         click: MouseEvent;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/forms/Select.svelte

@@ -1,7 +1,25 @@
-<script>export let value;
-export let selectClass = '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 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+<script>import classNames from 'classnames';
+export let items = [];
+export let value;
+export let placeholder = 'Choose option ...';
+export let underline = false;
+export let size = 'md';
+const common = 'block w-full';
+export let defaultClass = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+export let underlineClass = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+const sizes = {
+    sm: 'text-sm p-2',
+    md: 'text-sm p-2.5',
+    lg: 'text-base py-3 px-4'
+};
+let selectClass;
+$: selectClass = classNames(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$restProps.class);
 </script>
 
-<select {...$$restProps} bind:value class={selectClass} on:change>
-	<slot />
+<select {...$$restProps} bind:value class={selectClass} on:change on:input>
+	<option disabled selected value="">{placeholder}</option>
+
+	{#each items as { value, name }}
+		<option {value}>{name}</option>
+	{/each}
 </select>

package/forms/Select.svelte.d.ts

@@ -1,18 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SelectOptionType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        items?: SelectOptionType[];
         value: string | number;
-        selectClass?: string;
+        placeholder?: string;
+        underline?: boolean;
+        size?: 'sm' | 'md' | 'lg';
+        defaultClass?: string;
+        underlineClass?: string;
     };
     events: {
         change: Event;
+        input: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export declare type SelectProps = typeof __propDef.props;
 export declare type SelectEvents = typeof __propDef.events;

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.4",
+  "version": "0.22.7",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -58,12 +58,15 @@
     "dropdown",
     "footer",
     "forms",
+    "kbd",
     "list group",
-    "modals",
+    "modal",
     "navbar",
     "paginations",
     "progress bars",
+    "rating",
     "sidebars",
+    "skeleton",
     "spinners",
     "tables",
     "tabs",

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>;