flowbite-svelte 0.22.5 → 0.22.6

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.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)
 
 

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/package.json

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