flowbite-svelte 0.15.10 → 0.15.13

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.13](https://github.com/themesberg/flowbite-svelte/compare/v0.15.12...v0.15.13) (2022-05-05)
+
+
+### Features
+
+* add Checkbox, CheckboxInline, and checkbox page ([baab944](https://github.com/themesberg/flowbite-svelte/commit/baab944e588645bb2fbe751fd5a2beb00b8f6e77))
+
+
+### Bug Fixes
+
+* update RadioItem props ([fd2f9a0](https://github.com/themesberg/flowbite-svelte/commit/fd2f9a0c4b3854c3a644710a4cb1df238e1a6af2))
+
+### [0.15.12](https://github.com/themesberg/flowbite-svelte/compare/v0.15.11...v0.15.12) (2022-05-05)
+
+
+### Features
+
+* add RadioItem and RadioInline for colors, inline, helper text ([9fc2812](https://github.com/themesberg/flowbite-svelte/commit/9fc281268f8008023e5a8d501893b8761ba8a5ef))
+
+### [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/Checkbox.svelte

@@ -1,33 +1,59 @@
-<script>export let legend = 'Checkbox variants';
-export let divClass = 'flex items-center mb-4';
+<script>export let divClass = 'flex items-center mr-4';
 export let inputClass = 'w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
-export let labelClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
-export let helperLabelClass = 'font-medium text-gray-900 dark:text-gray-300';
-export let options;
+export let labelClass = 'ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
+export let disabled = false;
+if (disabled) {
+    labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
+}
+export let name = '';
+export let divHelperClass = 'flex items-center h-5';
+export let labelHelperClass = 'font-medium text-gray-900 dark:text-gray-300';
+export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
+export let color = 'blue';
+if (color === 'red') {
+    inputClass = 'w-4 h-4 text-red-600 bg-gray-100 rounded border-gray-300 focus:ring-red-500 dark:focus:ring-red-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'green') {
+    inputClass = 'w-4 h-4 text-green-600 bg-gray-100 rounded border-gray-300 focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'purple') {
+    inputClass = 'w-4 h-4 text-purple-600 bg-gray-100 rounded border-gray-300 focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'teal') {
+    inputClass = 'w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-teal-500 dark:focus:ring-teal-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'yellow') {
+    inputClass = 'w-4 h-4 text-yellow-400 bg-gray-100 rounded border-gray-300 focus:ring-yellow-500 dark:focus:ring-yellow-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'orange') {
+    inputClass = 'w-4 h-4 text-orange-500 bg-gray-100 rounded border-gray-300 focus:ring-orange-500 dark:focus:ring-orange-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else {
+    inputClass = 'w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+export let helper;
+export let id;
+export let value;
+export let label;
 </script>
 
-<fieldset>
-	<legend class="sr-only">{legend}</legend>
-	{#each options as option}
-		{#if option.helper}
-			<div class="flex mb-4">
-				<div class="flex items-center h-5">
-					<input id={option.id} aria-describedby={option.id} type="checkbox" class={inputClass} bind:checked={option.checked} disabled={option.disabled} />
-				</div>
-				<div class="ml-3 text-sm">
-					<label for={option.id} class={helperLabelClass}>{option.label}</label>
-					{#if option.helper}
-						<div class="text-gray-500 dark:text-gray-300">
-							{@html option.helper}
-						</div>
-					{/if}
-				</div>
-			</div>
-		{:else}
-			<div class={divClass}>
-				<input id={option.id} aria-describedby={option.id} type="checkbox" class={inputClass} checked={option.checked} disabled={option.disabled} />
-				<label for={option.id} class={labelClass}>{option.label}</label>
-			</div>
-		{/if}
-	{/each}
-</fieldset>
+{#if helper}
+	<div class="flex">
+		<div class={divHelperClass}>
+			<input {id} type="checkbox" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
+		</div>
+		<div class="ml-2 text-sm">
+			<label for={id} class={labelHelperClass}>
+				{@html label}
+			</label>
+			<p id="{id}-helper-radio-text" class={helperClass}>{helper}</p>
+		</div>
+	</div>
+{:else}
+	<div class={divClass}>
+		<input {id} type="checkbox" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
+		<label for={id} class={labelClass}>
+			{@html label}
+		</label>
+	</div>
+{/if}

package/forms/Checkbox.svelte.d.ts

@@ -1,13 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CheckboxType } from '../types';
+import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
-        legend?: string;
+        [x: string]: any;
         divClass?: string;
         inputClass?: string;
         labelClass?: string;
-        helperLabelClass?: string;
-        options: CheckboxType[];
+        disabled?: boolean;
+        name?: string;
+        divHelperClass?: string;
+        labelHelperClass?: string;
+        helperClass?: string;
+        color?: FormColorType;
+        helper: string;
+        id: string;
+        value: string;
+        label: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/CheckboxInline.svelte

@@ -0,0 +1,3 @@
+<div class="flex">
+	<slot />
+</div>

package/forms/CheckboxInline.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  CheckboxInlineProps */
+/** @typedef {typeof __propDef.events}  CheckboxInlineEvents */
+/** @typedef {typeof __propDef.slots}  CheckboxInlineSlots */
+export default class CheckboxInline extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CheckboxInlineProps = typeof __propDef.props;
+export type CheckboxInlineEvents = typeof __propDef.events;
+export type CheckboxInlineSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/forms/Radio.svelte

@@ -1,16 +1,59 @@
-<script>export let divClass = 'flex items-center mb-4';
+<script>export let divClass = 'flex items-center mr-4';
 export let inputClass = 'w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600';
 export let labelClass = 'block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
-export let name = 'countries';
-export let options;
+export let disabled = false;
+if (disabled) {
+    labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
+}
+export let name = '';
+export let divHelperClass = 'flex items-center h-5';
+export let labelHelperClass = 'font-medium text-gray-900 dark:text-gray-300';
+export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
+export let color = 'blue';
+if (color === 'red') {
+    inputClass = 'w-4 h-4 text-red-600 bg-gray-100 border-gray-300 focus:ring-red-500 dark:focus:ring-red-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'green') {
+    inputClass = 'w-4 h-4 text-green-600 bg-gray-100 border-gray-300 focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'purple') {
+    inputClass = 'w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'teal') {
+    inputClass = 'w-4 h-4 text-teal-600 bg-gray-100 border-gray-300 focus:ring-teal-500 dark:focus:ring-teal-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'yellow') {
+    inputClass = 'w-4 h-4 text-yellow-400 bg-gray-100 border-gray-300 focus:ring-yellow-500 dark:focus:ring-yellow-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else if (color === 'orange') {
+    inputClass = 'w-4 h-4 text-orange-500 bg-gray-100 border-gray-300 focus:ring-orange-500 dark:focus:ring-orange-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+}
+else {
+    inputClass = 'w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600';
+}
+export let helper;
+export let id;
+export let value;
+export let label;
 </script>
 
-{#each options as option}
+{#if helper}
+	<div class="flex">
+		<div class={divHelperClass}>
+			<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
+		</div>
+		<div class="ml-2 text-sm">
+			<label for={id} class={labelHelperClass}>
+				{@html label}
+			</label>
+			<p id="{id}-helper-radio-text" class={helperClass}>{helper}</p>
+		</div>
+	</div>
+{:else}
 	<div class={divClass}>
-		<input id={option.id} type="radio" {name} value={option.value} class={inputClass} aria-labelledby={option.id} aria-describedby={option.id} checked={option.checked} disabled={option.disabled} />
-		<label for={option.id} class={labelClass}>
-			{@html option.label}
+		<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
+		<label for={id} class={labelClass}>
+			{@html label}
 		</label>
-		<slot name="helper" />
 	</div>
-{/each}
+{/if}

package/forms/Radio.svelte.d.ts

@@ -1,19 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-import type { RadioType } from '../types';
+import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         divClass?: string;
         inputClass?: string;
         labelClass?: string;
+        disabled?: boolean;
         name?: string;
-        options: RadioType[];
+        divHelperClass?: string;
+        labelHelperClass?: string;
+        helperClass?: string;
+        color?: FormColorType;
+        helper: string;
+        id: string;
+        value: string;
+        label: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        helper: {};
-    };
+    slots: {};
 };
 export declare type RadioProps = typeof __propDef.props;
 export declare type RadioEvents = typeof __propDef.events;

package/forms/RadioInline.svelte

@@ -0,0 +1,3 @@
+<div class="flex">
+	<slot />
+</div>

package/forms/RadioInline.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  RadioInlineProps */
+/** @typedef {typeof __propDef.events}  RadioInlineEvents */
+/** @typedef {typeof __propDef.slots}  RadioInlineSlots */
+export default class RadioInline extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RadioInlineProps = typeof __propDef.props;
+export type RadioInlineEvents = typeof __propDef.events;
+export type RadioInlineSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -58,13 +58,15 @@ export { default as SitemapFooter } from './footer/SitemapFooter.svelte'
 
 // Forms
 export { default as Checkbox } from './forms/Checkbox.svelte'
+export { default as CheckboxInline } from './forms/CheckboxInline.svelte'
 export { default as Fileupload } from './forms/Fileupload.svelte'
 export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte'
 export { default as Iconinput } from './forms/Iconinput.svelte'
 export { default as Input } from './forms/Input.svelte'
+export { default as RadioInline } from './forms/RadioInline.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.13",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -124,14 +124,16 @@
     "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",
     "./footer/SocialMediaFooter.svelte": "./footer/SocialMediaFooter.svelte",
     "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
+    "./forms/CheckboxInline.svelte": "./forms/CheckboxInline.svelte",
     "./forms/Fileupload.svelte": "./forms/Fileupload.svelte",
     "./forms/FloatingLabelInput.svelte": "./forms/FloatingLabelInput.svelte",
     "./forms/Iconinput.svelte": "./forms/Iconinput.svelte",
     "./forms/Input.svelte": "./forms/Input.svelte",
     "./forms/Radio.svelte": "./forms/Radio.svelte",
+    "./forms/RadioInline.svelte": "./forms/RadioInline.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",
     "./forms/Toggle.svelte": "./forms/Toggle.svelte",
     ".": "./index.js",

package/types.d.ts

@@ -64,6 +64,7 @@ export interface DropdownType {
     href: string;
     divider?: boolean;
 }
+export declare type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange';
 export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow';
 export interface GroupTimelineType {
     title: string | HTMLElement;
@@ -117,13 +118,6 @@ export interface PillTabType {
     selected: boolean;
     href: string;
 }
-export interface RadioType {
-    id: string;
-    label: string | HTMLElement;
-    value: string;
-    checked?: boolean;
-    disabled?: boolean;
-}
 export declare type SelectOptionType = {
     name: string;
     value: string;

package/forms/SingleCheckbox.svelte

@@ -1,18 +0,0 @@
-<script>import generateId from '../utils/generateId.js';
-export let checked = false;
-export let id = generateId();
-export let required = false;
-export let label;
-export let name;
-export let inputClass = 'w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800';
-export let labelClass = 'font-medium text-gray-900 dark:text-gray-300';
-</script>
-
-<div class="flex items-start">
-	<div class="flex items-center h-5">
-		<input bind:checked {id} aria-describedby={id} {name} type="checkbox" class={inputClass} {required} />
-	</div>
-	<div class="ml-3 text-sm">
-		<label for={id} class={labelClass}>{label}</label>
-	</div>
-</div>

package/forms/SingleCheckbox.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        checked?: boolean;
-        id?: string;
-        required?: boolean;
-        label: string;
-        name: string;
-        inputClass?: string;
-        labelClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type SingleCheckboxProps = typeof __propDef.props;
-export declare type SingleCheckboxEvents = typeof __propDef.events;
-export declare type SingleCheckboxSlots = typeof __propDef.slots;
-export default class SingleCheckbox extends SvelteComponentTyped<SingleCheckboxProps, SingleCheckboxEvents, SingleCheckboxSlots> {
-}
-export {};