flowbite-svelte 0.15.12 → 0.15.13

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

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/{RadioItem.svelte → Radio.svelte}

@@ -1,8 +1,11 @@
 <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 disabled = false;
+if (disabled) {
+    labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
+}
 export let name = '';
-export let options;
 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';
@@ -37,7 +40,7 @@ export let label;
 {#if helper}
 	<div class="flex">
 		<div class={divHelperClass}>
-			<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {...$$restProps} />
+			<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}>
@@ -48,7 +51,7 @@ export let label;
 	</div>
 {:else}
 	<div class={divClass}>
-		<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {...$$restProps} />
+		<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
 		<label for={id} class={labelClass}>
 			{@html label}
 		</label>

package/forms/{RadioItem.svelte.d.ts → Radio.svelte.d.ts}

@@ -1,17 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type { RadioType, RadioColorType } 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?: RadioColorType;
+        color?: FormColorType;
         helper: string;
         id: string;
         value: string;
@@ -22,9 +22,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type RadioItemProps = typeof __propDef.props;
-export declare type RadioItemEvents = typeof __propDef.events;
-export declare type RadioItemSlots = typeof __propDef.slots;
-export default class RadioItem extends SvelteComponentTyped<RadioItemProps, RadioItemEvents, RadioItemSlots> {
+export declare type RadioProps = typeof __propDef.props;
+export declare type RadioEvents = typeof __propDef.events;
+export declare type RadioSlots = typeof __propDef.slots;
+export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
 }
 export {};

package/forms/RadioInline.svelte

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

package/forms/RadioInline.svelte.d.ts

@@ -1,3 +1,15 @@
+/** @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: {};
@@ -8,9 +20,4 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type RadioInlineProps = typeof __propDef.props;
-export declare type RadioInlineEvents = typeof __propDef.events;
-export declare type RadioInlineSlots = typeof __propDef.slots;
-export default class RadioInline extends SvelteComponentTyped<RadioInlineProps, RadioInlineEvents, RadioInlineSlots> {
-}
 export {};

package/index.js

@@ -58,14 +58,14 @@ 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 RadioItem } from './forms/RadioItem.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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.12",
+  "version": "0.15.13",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -124,16 +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/RadioItem.svelte": "./forms/RadioItem.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,17 +118,6 @@ export interface PillTabType {
     selected: boolean;
     href: string;
 }
-export declare type RadioColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange';
-export interface RadioType {
-    id: string;
-    name: string;
-    label: string | HTMLElement;
-    value: string;
-    checked?: boolean;
-    disabled?: boolean;
-    helper?: string;
-    color?: RadioColorType;
-}
 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 {};