flowbite-svelte 0.16.6 → 0.16.9

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 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.16.9](https://github.com/themesberg/flowbite-svelte/compare/v0.16.8...v0.16.9) (2022-06-05)
+
+
+### Features
+
+* add bind:group to Radio component ([386ab02](https://github.com/themesberg/flowbite-svelte/commit/386ab0246d0a3a7ae60416c6f9979501f4c434af))
+
+### [0.16.8](https://github.com/themesberg/flowbite-svelte/compare/v0.16.7...v0.16.8) (2022-06-03)
+
+### [0.16.7](https://github.com/themesberg/flowbite-svelte/compare/v0.16.6...v0.16.7) (2022-06-02)
+
 ### [0.16.6](https://github.com/themesberg/flowbite-svelte/compare/v0.16.5...v0.16.6) (2022-06-02)
 
 

package/carousels/Carousel.svelte

@@ -26,7 +26,6 @@ export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300
 // Slide
 export let slideClass = '';
 let imageShowingIndex = 0;
-// $: console.log(imageShowingIndex);
 $: image = images[imageShowingIndex];
 const nextSlide = () => {
     if (imageShowingIndex === images.length - 1) {

package/carousels/CarouselTransition.svelte

@@ -43,7 +43,6 @@ export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300
 // Slide
 // export let slideClass: string = 'hidden';
 let imageShowingIndex = 1;
-// $: console.log(imageShowingIndex);
 // $: image = images[imageShowingIndex];
 const nextSlide = () => {
     if (imageShowingIndex === images.length - 1) {

package/darkmode/DarkMode.svelte

@@ -2,16 +2,13 @@
 export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
 let mode;
 const toggleTheme = () => {
-    // console.log("clicked theme icon");
     if (localStorage.getItem('color-theme') === 'dark') {
-        // console.log("it's dark");
         mode = 'dark';
         window.document.documentElement.classList.remove('dark');
         window.document.documentElement.classList.add('light');
         localStorage.setItem('color-theme', 'light');
     }
     else {
-        // console.log("it's light");
         mode = 'light';
         window.document.documentElement.classList.remove('light');
         window.document.documentElement.classList.add('dark');
@@ -21,7 +18,9 @@ const toggleTheme = () => {
 onMount(() => {
     let themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
     let themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
-    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    if (localStorage.getItem('color-theme') === 'dark' ||
+        (!('color-theme' in localStorage) &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches)) {
         document.documentElement.classList.add('dark');
         themeToggleDarkIcon.classList.add('hidden');
     }
@@ -32,10 +31,32 @@ onMount(() => {
 });
 </script>
 
-<button on:click={toggleTheme} aria-label="Dark mode" id="theme-toggle" type="button" class={btnClass}>
-	<svg class:hidden={mode === 'light'} on:click={() => (mode = 'dark')} id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg>
+<button
+	on:click={toggleTheme}
+	aria-label="Dark mode"
+	id="theme-toggle"
+	type="button"
+	class={btnClass}
+>
+	<svg
+		class:hidden={mode === 'light'}
+		on:click={() => (mode = 'dark')}
+		id="theme-toggle-dark-icon"
+		class="hidden w-5 h-5"
+		fill="currentColor"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+		><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
+	>
 
-	<svg class:hidden={mode === 'dark'} on:click={() => (mode = 'light')} id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+	<svg
+		class:hidden={mode === 'dark'}
+		on:click={() => (mode = 'light')}
+		id="theme-toggle-light-icon"
+		class="hidden w-5 h-5"
+		fill="currentColor"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
 		><path
 			d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
 			fill-rule="evenodd"

package/dropdowns/ImgDropdown.svelte

@@ -1,6 +1,5 @@
 <script>let imgDropdownToggle = true;
 const handleToggle = () => {
-    console.log('toggle clicked.');
     imgDropdownToggle = !imgDropdownToggle;
 };
 export let items;
@@ -22,7 +21,11 @@ export let linkClass = 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100
 		{/if}
 		<ul class="py-1" aria-labelledby="dropdownButton">
 			{#each items as { href, name, divider }}
-				<li class:border-b={divider} class:border-gray-100={divider} class:dark:border-gray-500={divider}>
+				<li
+					class:border-b={divider}
+					class:border-gray-100={divider}
+					class:dark:border-gray-500={divider}
+				>
 					<a {href} class={linkClass}>{name}</a>
 				</li>
 			{/each}

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

@@ -35,12 +35,24 @@ export let helper;
 export let id;
 export let value;
 export let label;
+export let group;
 </script>
 
 {#if helper}
 	<div class="flex">
 		<div class={divHelperClass}>
-			<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
+			<input
+				bind:group
+				{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}>
@@ -51,7 +63,18 @@ export let label;
 	</div>
 {:else}
 	<div class={divClass}>
-		<input {id} type="radio" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
+		<input
+			bind:group
+			{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}

@@ -16,15 +16,16 @@ declare const __propDef: {
         id: string;
         value: string;
         label: string;
+        group: number | 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 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/index.d.ts

@@ -37,7 +37,7 @@ 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/RadioItem.svelte';
+export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';
 export { default as Search } from './forms/Search.svelte';
 export { default as Select } from './forms/Select.svelte';

package/index.js

@@ -50,7 +50,7 @@ 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/RadioItem.svelte';
+export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';
 export { default as Search } from './forms/Search.svelte';
 export { default as Select } from './forms/Select.svelte';

package/modals/ModalButton.svelte

@@ -7,35 +7,43 @@ let showModalId;
 export const openFn = (id) => {
     modalIdStore.update((n) => (n = id));
     showModalId = get(modalIdStore);
-    // console.log('showModalId', showModalId);
 };
 let buttonClass;
 if (btnColor === 'blue') {
-    buttonClass = 'block w-full md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    buttonClass =
+        'block w-full md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 else if (btnColor === 'gray') {
-    buttonClass = 'block w-full md:w-auto text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+    buttonClass =
+        'block w-full md:w-auto text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 }
 else if (btnColor === 'red') {
-    buttonClass = 'block w-full md:w-auto text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+    buttonClass =
+        'block w-full md:w-auto text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
 }
 else if (btnColor === 'yellow') {
-    buttonClass = 'block w-full md:w-auto text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+    buttonClass =
+        'block w-full md:w-auto text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
 }
 else if (btnColor === 'green') {
-    buttonClass = 'block w-full md:w-auto text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+    buttonClass =
+        'block w-full md:w-auto text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
 }
 else if (btnColor === 'indigo') {
-    buttonClass = 'block w-full md:w-auto text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+    buttonClass =
+        'block w-full md:w-auto text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
 }
 else if (btnColor === 'purple') {
-    buttonClass = 'block w-full md:w-auto text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+    buttonClass =
+        'block w-full md:w-auto text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
 }
 else if (btnColor === 'pink') {
-    buttonClass = 'block w-full md:w-auto text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+    buttonClass =
+        'block w-full md:w-auto text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
 }
 else {
-    buttonClass = 'block w-full md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    buttonClass =
+        'block w-full md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 </script>
 

package/navbar/DropdownNavbar.svelte

@@ -4,7 +4,6 @@ export let user = '';
 let pathname = '';
 onMount(() => {
     pathname = window.location.pathname;
-    // console.log('pathname', pathname);
 });
 let barHidden = true;
 const handleClickbtn = () => {

package/navbar/NavUl.svelte

@@ -4,7 +4,6 @@ export let divClass = ' justify-between items-center w-full md:flex md:w-auto md
 export let ulClass = 'flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
 export let hidden = true;
 // $: hidden;
-// $: console.log('hidden: ', hidden);
 </script>
 
 {#if !hidden}

package/navbar/Navbar.svelte

@@ -2,7 +2,6 @@
 const navDivClass = 'container flex flex-wrap justify-between items-center mx-auto';
 let hidden = true;
 let toggle = () => {
-    // console.log('Toggled');
     hidden = !hidden;
 };
 </script>

package/package.json

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

@@ -4,9 +4,7 @@ export let menuItems;
 export let filteredItems = [];
 export let placeholder = 'Search';
 const handleInput = () => {
-    // console.log('inputValue', inputValue);
     let result = (filteredItems = menuItems.filter((item) => item[0].toLowerCase().match(inputValue.toLowerCase())));
-    // console.log('result', result);
     return result;
 };
 export let header;
@@ -16,32 +14,49 @@ export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray
 </script>
 
 <div class={divClass}>
-  <div class="p-4">
-    <label for="table-search" class="sr-only">Search</label>
-    <div class="relative mt-1">
-      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /></svg>
-      </div>
-      <input bind:value={inputValue} on:input={handleInput} type="text" id="table-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 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" {placeholder} />
-    </div>
-  </div>
+	<div class="p-4">
+		<label for="table-search" class="sr-only">Search</label>
+		<div class="relative mt-1">
+			<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+				<svg
+					class="w-5 h-5 text-gray-500 dark:text-gray-400"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						fill-rule="evenodd"
+						d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			</div>
+			<input
+				bind:value={inputValue}
+				on:input={handleInput}
+				type="text"
+				id="table-search"
+				class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 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"
+				{placeholder}
+			/>
+		</div>
+	</div>
 
-  <table class={tableClass}>
-    <thead class={theadClass}>
-      <tr>
-        {#each header as column}
-          <th scope="col" class="px-6 py-3">
-            {column}
-          </th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#if filteredItems.length > 0}
-        <TableDefaultRow items={filteredItems} html />
-      {:else}
-        <TableDefaultRow items={menuItems} html />
-      {/if}
-    </tbody>
-  </table>
+	<table class={tableClass}>
+		<thead class={theadClass}>
+			<tr>
+				{#each header as column}
+					<th scope="col" class="px-6 py-3">
+						{column}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#if filteredItems.length > 0}
+				<TableDefaultRow items={filteredItems} html />
+			{:else}
+				<TableDefaultRow items={menuItems} html />
+			{/if}
+		</tbody>
+	</table>
 </div>