flowbite-svelte 0.18.2 → 0.18.3

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.18.3](https://github.com/themesberg/flowbite-svelte/compare/v0.18.2...v0.18.3) (2022-06-22)
+
+
+### Bug Fixes
+
+* update Input component ([94df473](https://github.com/themesberg/flowbite-svelte/commit/94df473935baaa4f22124ceb0d6501a1359bd4b4))
+
 ### [0.18.2](https://github.com/themesberg/flowbite-svelte/compare/v0.18.1...v0.18.2) (2022-06-22)
 
 

package/forms/Checkbox.svelte

@@ -14,8 +14,8 @@ const colorClasses = {
 </script>
 
 <input
+	{...$$restProps}
 	type="checkbox"
 	bind:checked
 	class={classNames(inputClass, colorClasses[color], $$props.class)}
-	{...$$restProps}
 />

package/forms/Helper.svelte

@@ -1,7 +1,14 @@
 <script>import classNames from 'classnames';
 export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
+export let color = 'gray';
+const colorClasses = {
+    gray: 'text-gray-900 dark:text-gray-300',
+    green: 'text-green-700 dark:text-green-500',
+    red: 'text-red-700 dark:text-red-500',
+    disabled: 'text-gray-400 dark:text-gray-500'
+};
 </script>
 
-<p class={classNames(helperClass, $$props.class)} {...$$restProps}>
+<p {...$$restProps} class={classNames(helperClass, colorClasses[color], $$props.class)}>
 	<slot />
 </p>

package/forms/Helper.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         helperClass?: string;
+        color?: 'gray' | 'green' | 'red' | 'disabled';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Iconinput.svelte

@@ -1,16 +1,10 @@
-<script>import generateId from '../utils/generateId.js';
-export let label;
-export let id = generateId();
-export let type;
+<script>import classNames from 'classnames';
+export let type = 'text';
 export let value = '';
 export let icon;
-export let helper = '';
-export let placeholder = '';
 export let noBorder = false;
-export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
 export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 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';
 export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600';
-export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 export let noBorderInputClass = '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 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';
 export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
 export let iconClass = 'h-4 w-4 mr-2';
@@ -20,24 +14,23 @@ function setType(node) {
 }
 </script>
 
-<div class={$$props.class ? $$props.class : ''}>
-	<label for={id} class={labelClass}>{label}</label>
-	{#if noBorder}
-		<div class="relative">
-			<div class={noBorderDivClass}>
-				<svelte:component this={icon} size={iconSize} class={iconClass} />
-			</div>
-			<input bind:value use:setType {id} class={noBorderInputClass} {placeholder} {...$$restProps} />
+{#if noBorder}
+	<div class="relative">
+		<div class={noBorderDivClass}>
+			<svelte:component this={icon} size={iconSize} class={iconClass} />
 		</div>
-	{:else}
-		<div class="flex">
-			<span class={spanClass}>
-				<svelte:component this={icon} size={iconSize} class={iconClass} />
-			</span>
-			<input {type} {id} class={inputClass} {placeholder} {...$$restProps} />
-		</div>
-	{/if}
-	{#if helper}
-		<p class={helperClass}>{@html helper}</p>
-	{/if}
-</div>
+		<input
+			{...$$restProps}
+			bind:value
+			use:setType
+			class={classNames(noBorderInputClass, $$props.class)}
+		/>
+	</div>
+{:else}
+	<div class="flex">
+		<span class={spanClass}>
+			<svelte:component this={icon} size={iconSize} class={iconClass} />
+		</span>
+		<input {...$$restProps} {type} class={classNames(inputClass, $$props.class)} />
+	</div>
+{/if}

package/forms/Iconinput.svelte.d.ts

@@ -4,18 +4,12 @@ import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        label: string;
-        id?: string;
-        type: InputType;
+        type?: InputType;
         value?: string;
         icon: typeof SvelteComponent;
-        helper?: string;
-        placeholder?: string;
         noBorder?: boolean;
-        labelClass?: string;
         inputClass?: string;
         spanClass?: string;
-        helperClass?: string;
         noBorderInputClass?: string;
         noBorderDivClass?: string;
         iconClass?: string;

package/forms/Input.svelte

@@ -1,52 +1,38 @@
-<script>import generateId from '../utils/generateId.js';
+<script>import classNames from 'classnames';
 export let type = 'text';
 export let value = '';
-export let name = '';
-export let id = generateId();
-export let label = '';
-export let required = false;
-export let placeholder = '';
-export let size = 'text-sm';
-let padding = '';
-export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ${padding} 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 labelClass = 'block mb-4 text-sm font-medium text-gray-900 dark:text-gray-300';
-export let disabled = false;
-export let readonly = false;
-export let helper = '';
-export let helperClass = 'text-sm text-gray-500 dark:text-gray-400';
+export let size = 'md';
+export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
+export let color = 'base';
+const colorClasses = {
+    base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+    green: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
+    red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
+};
 export let ref = null;
-if (size === 'sm:text-md') {
-    padding = 'p-4';
-}
-else if (size === 'text-sm') {
-    padding = 'p-2.5';
-}
-else {
-    padding = 'p-2';
-}
 // you need to this to avoid 2-way binding
 function setType(node) {
     node.type = type;
 }
 </script>
 
-<div class={$$props.class ? $$props.class : ''}>
-	{#if label}
-		<label for={id} class={labelClass}>{label}</label>
-	{/if}
-	<input
-		bind:value
-		bind:this={ref}
-		{name}
-		use:setType
-		{id}
-		class={inputClass}
-		{placeholder}
-		{required}
-		{disabled}
-		{readonly}
-	/>
-	{#if helper}
-		<p class={helperClass}>{@html helper}</p>
-	{/if}
-</div>
+<input
+	{...$$restProps}
+	bind:value
+	bind:this={ref}
+	use:setType
+	class={classNames(
+		inputClass,
+		colorClasses[color],
+		{
+			// 'pl-10': icon !== null,
+			// 'rounded-lg': !($$slots.addon || addon),
+			// 'rounded-r-lg': $$slots.addon || addon,
+			// 'shadow-sm dark:shadow-sm-light': shadow,
+			'p-2 sm:text-xs': size === 'sm',
+			'p-2.5 text-sm': size === 'md',
+			'sm:text-md p-4': size === 'lg'
+		},
+		$$props.class
+	)}
+/>

package/forms/Input.svelte.d.ts

@@ -5,18 +5,9 @@ declare const __propDef: {
         [x: string]: any;
         type?: InputType;
         value?: string;
-        name?: string;
-        id?: string;
-        label?: string;
-        required?: boolean;
-        placeholder?: string;
-        size?: 'sm:text-md' | 'text-sm' | 'sm:text-xs';
+        size?: 'sm' | 'md' | 'lg';
         inputClass?: string;
-        labelClass?: string;
-        disabled?: boolean;
-        readonly?: boolean;
-        helper?: string;
-        helperClass?: string;
+        color?: 'base' | 'green' | 'red';
         ref?: HTMLElement;
     };
     events: {

package/package.json

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