flowbite-svelte 0.15.10 → 0.15.11

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.15.11](https://github.com/themesberg/flowbite-svelte/compare/v0.15.10...v0.15.11) (2022-05-03)
+
+
+### Features
+
+* add Search component ([c9874ad](https://github.com/themesberg/flowbite-svelte/commit/c9874ada31fbf20c74a882ee6392e9a7cc8ecc36))
+
 ### [0.15.10](https://github.com/themesberg/flowbite-svelte/compare/v0.15.9...v0.15.10) (2022-05-03)
 
 

package/forms/Search.svelte

@@ -0,0 +1,17 @@
+<script>export let id = '';
+export let labelClass = 'mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300';
+export let inputClass = 'block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 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 btnClass = 'text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+export let placeholder = 'Search';
+</script>
+
+<form on:submit>
+	<label for={id} class={labelClass}>Search</label>
+	<div class="relative">
+		<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+			<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+		</div>
+		<input type="search" {id} class={inputClass} {placeholder} {...$$restProps} />
+		<button type="submit" class={btnClass}>Search</button>
+	</div>
+</form>

package/forms/Search.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id?: string;
+        labelClass?: string;
+        inputClass?: string;
+        btnClass?: string;
+        placeholder?: string;
+    };
+    events: {
+        submit: SubmitEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SearchProps = typeof __propDef.props;
+export declare type SearchEvents = typeof __propDef.events;
+export declare type SearchSlots = typeof __propDef.slots;
+export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
+}
+export {};

package/index.js

@@ -65,6 +65,7 @@ export { default as Input } from './forms/Input.svelte'
 export { default as Radio } from './forms/Radio.svelte'
 export { default as Range } from './forms/Range.svelte'
 export { default as SingleCheckbox } from './forms/SingleCheckbox.svelte'
+export { default as Search } from './forms/Search.svelte'
 export { default as Select } from './forms/Select.svelte'
 export { default as Textarea } from './forms/Textarea.svelte'
 export { default as Toggle } from './forms/Toggle.svelte'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.10",
+  "version": "0.15.11",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -130,6 +130,7 @@
     "./forms/Input.svelte": "./forms/Input.svelte",
     "./forms/Radio.svelte": "./forms/Radio.svelte",
     "./forms/Range.svelte": "./forms/Range.svelte",
+    "./forms/Search.svelte": "./forms/Search.svelte",
     "./forms/Select.svelte": "./forms/Select.svelte",
     "./forms/SingleCheckbox.svelte": "./forms/SingleCheckbox.svelte",
     "./forms/Textarea.svelte": "./forms/Textarea.svelte",