flowbite-svelte 0.15.11 → 0.15.12

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

package/forms/RadioInline.svelte

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

package/forms/RadioInline.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        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/forms/RadioItem.svelte

@@ -0,0 +1,56 @@
+<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 = '';
+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';
+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>
+
+{#if helper}
+	<div class="flex">
+		<div class={divHelperClass}>
+			<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {...$$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="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {...$$restProps} />
+		<label for={id} class={labelClass}>
+			{@html label}
+		</label>
+	</div>
+{/if}

package/forms/RadioItem.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RadioType, RadioColorType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string;
+        inputClass?: string;
+        labelClass?: string;
+        name?: string;
+        options: RadioType[];
+        divHelperClass?: string;
+        labelHelperClass?: string;
+        helperClass?: string;
+        color?: RadioColorType;
+        helper: string;
+        id: string;
+        value: string;
+        label: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    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 {};

package/index.js

@@ -62,7 +62,8 @@ 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 Radio } from './forms/Radio.svelte'
+export { default as RadioInline } from './forms/RadioInline.svelte'
+export { default as RadioItem } from './forms/RadioItem.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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.11",
+  "version": "0.15.12",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -128,7 +128,8 @@
     "./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",

package/types.d.ts

@@ -117,12 +117,16 @@ 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;

package/forms/Radio.svelte

@@ -1,16 +0,0 @@
-<script>export let divClass = 'flex items-center mb-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;
-</script>
-
-{#each options as option}
-	<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}
-		</label>
-		<slot name="helper" />
-	</div>
-{/each}

package/forms/Radio.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { RadioType } from '../types';
-declare const __propDef: {
-    props: {
-        divClass?: string;
-        inputClass?: string;
-        labelClass?: string;
-        name?: string;
-        options: RadioType[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        helper: {};
-    };
-};
-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 {};