flowbite-svelte 0.22.3 → 0.22.6

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* [#165](https://github.com/themesberg/flowbite-svelte/issues/165) toggle bind:group bind:checked ([3ca4010](https://github.com/themesberg/flowbite-svelte/commit/3ca40109f13e31afa76e02c96d387ff476880e52))
+* change from # to / for href ([b79fd81](https://github.com/themesberg/flowbite-svelte/commit/b79fd8112d2fb15657058dd0184b113228d8a6aa))
+
 ### [0.22.3](https://github.com/themesberg/flowbite-svelte/compare/v0.22.2...v0.22.3) (2022-07-21)
 
 

package/dropdowns/Dropdown.svelte

@@ -28,17 +28,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/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

@@ -40,6 +40,7 @@ export let value = '';
 		type="radio"
 		bind:group
 		on:click
+		on:change
 		{value}
 		{...$$restProps}
 		class={inputClass(custom, color, false, tinted, $$slots.default || $$props.class)}

package/forms/Radio.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
     };
     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/Toggle.svelte

@@ -1,7 +1,9 @@
 <script>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";
 const colors = {
     red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
@@ -19,7 +21,7 @@ const sizes = {
 };
 </script>
 
-<Checkbox custom class="relative {$$props.class}" {value} {...$$restProps} on:click>
+<Checkbox custom class="relative {$$props.class}" {value} bind:checked bind:group {...$$restProps} on:click>
 	<div class={classNames(common, colors[$$restProps.color ?? 'blue'], sizes[size])} />
 	<slot />
 </Checkbox>

package/forms/Toggle.svelte.d.ts

@@ -3,7 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         size?: 'small' | 'default' | 'large';
+        group?: string[];
         value?: string;
+        checked?: boolean;
     };
     events: {
         click: MouseEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.3",
+  "version": "0.22.6",
   "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",