flowbite-svelte 0.21.5 → 0.21.6

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.21.6](https://github.com/themesberg/flowbite-svelte/compare/v0.21.5...v0.21.6) (2022-07-16)
+
+
+### Bug Fixes
+
+* links in form index ([1149aa2](https://github.com/themesberg/flowbite-svelte/commit/1149aa2f7411ceb9a3e29ce3c6c3d446634f09a9))
+* sidebars and forms {...$$restProps} position updates ([d983225](https://github.com/themesberg/flowbite-svelte/commit/d983225a4e4c7526bf7bee3a7cd51ecc6035bba8))
+
 ### [0.21.5](https://github.com/themesberg/flowbite-svelte/compare/v0.21.4...v0.21.5) (2022-07-16)
 
 

package/forms/FloatingLabelInput.svelte

@@ -3,7 +3,6 @@ export let id = generateId();
 export let type;
 export let value = '';
 export let label = '';
-export let required = false;
 export let divClass = 'relative z-0 mb-6 w-full group';
 export let inputClass = 'block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer';
 export let labelClass = 'absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6';
@@ -13,6 +12,6 @@ function setType(node) {
 </script>
 
 <div class={divClass}>
-	<input bind:value use:setType class={inputClass} placeholder=" " {...$$restProps} />
+	<input {...$$restProps} bind:value use:setType class={inputClass} placeholder=" " />
 	<label for={id} class={labelClass}>{label}</label>
 </div>

package/forms/FloatingLabelInput.svelte.d.ts

@@ -7,7 +7,6 @@ declare const __propDef: {
         type: InputType;
         value?: string;
         label?: string;
-        required?: boolean;
         divClass?: string;
         inputClass?: string;
         labelClass?: string;

package/forms/Radio.svelte

@@ -42,6 +42,7 @@ else {
 	<div class="flex">
 		<div class={divHelperClass}>
 			<input
+				{...$$restProps}
 				bind:group
 				{id}
 				type="radio"
@@ -51,7 +52,6 @@ else {
 				aria-labelledby={id}
 				aria-describedby={id}
 				{disabled}
-				{...$$restProps}
 			/>
 		</div>
 		<div class="ml-2 text-sm">

package/forms/Range.svelte

@@ -17,6 +17,7 @@ else {
 </script>
 
 <input
+	{...$$restProps}
 	{id}
 	name={id}
 	type="range"
@@ -25,5 +26,4 @@ else {
 	bind:value
 	{step}
 	class={inputClass}
-	{...$$restProps}
 />

package/forms/Search.svelte

@@ -9,9 +9,21 @@ export let placeholder = 'Search';
 	<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>
+			<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} />
+		<input {...$$restProps} type="search" {id} class={inputClass} {placeholder} />
 		<button type="submit" class={btnClass}>Search</button>
 	</div>
 </form>

package/forms/Select.svelte

@@ -2,6 +2,6 @@
 export let selectClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full 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';
 </script>
 
-<select bind:value class={selectClass} {...$$restProps} on:change>
+<select {...$$restProps} bind:value class={selectClass} on:change>
 	<slot />
 </select>

package/forms/SimpleSearch.svelte

@@ -23,7 +23,7 @@ export let placeholder = 'Search';
 				/></svg
 			>
 		</div>
-		<input type="text" {id} class={inputClass} {placeholder} {...$$restProps} />
+		<input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
 	</div>
 	<button type="submit" class={btnClass}
 		><svg

package/forms/VoiceSearch.svelte

@@ -30,7 +30,7 @@ const handleVoiceBtn = () => {
 				/></svg
 			>
 		</div>
-		<input type="text" {id} class={inputClass} {placeholder} {...$$restProps} />
+		<input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
 		<button type="button" class={voiceBtnClass} on:click={handleVoiceBtn}>
 			<svg
 				class={voiceIconClass}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.21.5",
+  "version": "0.21.6",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/sidebars/Sidebar.svelte

@@ -2,6 +2,6 @@
 export let asideClass = 'w-64';
 </script>
 
-<aside class={classNames(asideClass, $$props.class)} {...$$restProps} aria-label="Sidebar">
+<aside {...$$restProps} class={classNames(asideClass, $$props.class)} aria-label="Sidebar">
 	<slot />
 </aside>

package/sidebars/SidebarBrand.svelte

@@ -5,7 +5,7 @@ export let imgClass = 'h-6 mr-3 sm:h-7';
 export let spanClass = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
 </script>
 
-<a href={site.href} class={classNames(aClass, $$props.class)} {...$$restProps}>
+<a {...$$restProps} href={site.href} class={classNames(aClass, $$props.class)}>
 	<img src={site.img} class={imgClass} alt={site.name} />
 	<span class={spanClass}>{site.name}</span>
 </a>

package/sidebars/SidebarCta.svelte

@@ -6,9 +6,9 @@ export let label = '';
 </script>
 
 <div
+	{...$$restProps}
 	id="dropdown-cta"
 	class={classNames(divWrapperClass, $$props.class)}
-	{...$$restProps}
 	role="alert"
 >
 	<div class={divClass}>

package/sidebars/SidebarDropdownItem.svelte

@@ -5,5 +5,5 @@ export let label = '';
 </script>
 
 <li>
-	<a {href} class={classNames(aClass, $$props.class)} {...$$restProps}>{label}</a>
+	<a {...$$restProps} {href} class={classNames(aClass, $$props.class)}>{label}</a>
 </li>

package/sidebars/SidebarDropdownWrapper.svelte

@@ -15,10 +15,10 @@ const handleDropdown = () => {
 
 <li>
 	<button
+		{...$$restProps}
 		on:click={() => handleDropdown()}
 		type="button"
 		class={classNames(btnClass, $$props.class)}
-		{...$$restProps}
 		aria-controls="sidebar-dropdown"
 	>
 		<svelte:component

package/sidebars/SidebarGroup.svelte

@@ -7,6 +7,6 @@ if (border) {
 }
 </script>
 
-<ul class={classNames(ulClass, $$props.class)} {...$$restProps}>
+<ul {...$$restProps} class={classNames(ulClass, $$props.class)}>
 	<slot />
 </ul>

package/sidebars/SidebarItem.svelte

@@ -1,14 +1,13 @@
 <script>import classNames from 'classnames';
 export let aClass = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
 export let href = '';
-export let rel = '';
 export let label = '';
 export let spanClass = 'ml-3';
 export let icon;
 </script>
 
 <li>
-	<a {href} {rel} class={classNames(aClass, $$props.class)} {...$$restProps}>
+	<a {...$$restProps} {href} class={classNames(aClass, $$props.class)}>
 		<svelte:component
 			this={icon.name}
 			size={icon.size}

package/sidebars/SidebarItem.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         [x: string]: any;
         aClass?: string;
         href?: string;
-        rel?: string;
         label?: string;
         spanClass?: string;
         icon: IconType;

package/sidebars/SidebarWrapper.svelte

@@ -2,6 +2,6 @@
 export let divClass = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
 </script>
 
-<div class={classNames(divClass, $$props.class)} {...$$restProps}>
+<div {...$$restProps} class={classNames(divClass, $$props.class)}>
 	<slot />
 </div>