flowbite-svelte 0.24.2 → 0.24.3

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.24.3](https://github.com/themesberg/flowbite-svelte/compare/v0.24.2...v0.24.3) (2022-08-09)
+
+
+### Features
+
+* add size to Iconinput component ([f041953](https://github.com/themesberg/flowbite-svelte/commit/f04195350a179d55a7315a127d5b116deaac1f41))
+
+
+### Bug Fixes
+
+* add rel=external and / to links to form page ([a237d18](https://github.com/themesberg/flowbite-svelte/commit/a237d1811eb1d6d6f3af545f109c71b8cadbd014))
+* breadcrumb and add rel=external to pages in the forms dir. ([509d72a](https://github.com/themesberg/flowbite-svelte/commit/509d72ae703a0d844653da87aea9119a90cc1018))
+* change package.json>engines>node to 16.0.0 since Verce does not accept. But use local node v16.16.0 for playwright test ([08130e9](https://github.com/themesberg/flowbite-svelte/commit/08130e988c1243b6a248737ed604223c694d5981))
+* clean up ref ([9e8427b](https://github.com/themesberg/flowbite-svelte/commit/9e8427bdbe7ee397a8c5c123a75e48abca298781))
+* done type check for all pages ([d91b018](https://github.com/themesberg/flowbite-svelte/commit/d91b018c3a66a6ac4cef2317651e1821083ab033))
+* remove utils/OptsButton ([04ebd83](https://github.com/themesberg/flowbite-svelte/commit/04ebd83aae8a3f3efabac8f3f144b65fabb04da1))
+* Toggle props and typo update ([9a40224](https://github.com/themesberg/flowbite-svelte/commit/9a40224fc26bfefd9d28ec5d364bf4d7430da6f0))
+* type and layout footer padding fix ([999d291](https://github.com/themesberg/flowbite-svelte/commit/999d29158fde736dbf4e19c9545fff6ba41dc7e7))
+* typo ([ec6f019](https://github.com/themesberg/flowbite-svelte/commit/ec6f019501acf4ba2fb105b8cc04a6d347d0dcf1))
+
 ### [0.24.2](https://github.com/themesberg/flowbite-svelte/compare/v0.24.1...v0.24.2) (2022-08-07)
 
 

package/datepicker/Datepicker.svelte

@@ -1,5 +1,4 @@
-<script>// import { onMount } from 'svelte';
-import Calendar from './Calender.svelte';
+<script>import Calendar from './Calender.svelte';
 export let range = false;
 // autoHide not working
 // export let autoHide: boolean = false;

package/forms/FloatingLabelInput.svelte

@@ -7,7 +7,6 @@ export let size = 'default';
 export let color = 'base';
 export let value = '';
 export let label = '';
-export let ref = null;
 const divClasses = {
     filled: 'relative',
     outlined: 'relative',
@@ -83,7 +82,6 @@ function setType(node) {
 		on:mouseleave
 		on:mouseover
 		on:paste
-		bind:this={ref}
 		use:setType
 		placeholder=" "
 		class={classNames(

package/forms/FloatingLabelInput.svelte.d.ts

@@ -10,7 +10,6 @@ declare const __propDef: {
         color?: 'base' | 'green' | 'red';
         value?: string;
         label?: string;
-        ref?: HTMLElement;
     };
     events: {
         blur: FocusEvent;

package/forms/Iconinput.svelte

@@ -1,14 +1,15 @@
 <script>import classNames from 'classnames';
 export let type = 'text';
 export let value = '';
+export let size = 'md';
 export let icon;
 export let noBorder = false;
-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 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 border-gray-300 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 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 noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10   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';
-export let iconSize = 18;
+export let iconClass = 'mr-2';
+export let iconSize;
 function setType(node) {
     node.type = type;
 }
@@ -16,21 +17,63 @@ function setType(node) {
 
 {#if noBorder}
 	<div class="relative">
-		<div class={noBorderDivClass}>
-			<svelte:component this={icon} size={iconSize} class={iconClass} />
+		<div
+			class={classNames(noBorderDivClass, {
+				'p-2 sm:text-xs': size === 'sm',
+				'p-2.5 text-sm': size === 'md',
+				'sm:text-md p-4': size === 'lg'
+			})}
+		>
+			<svelte:component
+				this={icon}
+				size={classNames({
+					16: size === 'sm',
+					18: size === 'md',
+					20: size === 'lg'
+				})}
+				class={iconClass}
+			/>
 		</div>
 		<input
 			{...$$restProps}
 			bind:value
 			use:setType
-			class={classNames(noBorderInputClass, $$props.class)}
+			class={classNames(
+				noBorderInputClass,
+				{
+					'p-2 sm:text-xs': size === 'sm',
+					'p-2.5 text-sm': size === 'md',
+					'sm:text-md p-4': size === 'lg'
+				},
+				$$props.class
+			)}
 		/>
 	</div>
 {:else}
 	<div class="flex">
 		<span class={spanClass}>
-			<svelte:component this={icon} size={iconSize} class={iconClass} />
+			<svelte:component
+				this={icon}
+				size={classNames({
+					16: size === 'sm',
+					18: size === 'md',
+					20: size === 'lg'
+				})}
+				class={iconClass}
+			/>
 		</span>
-		<input {...$$restProps} {type} class={classNames(inputClass, $$props.class)} />
+		<input
+			{...$$restProps}
+			{type}
+			class={classNames(
+				inputClass,
+				{
+					'p-2 sm:text-xs': size === 'sm',
+					'p-2.5 text-sm': size === 'md',
+					'sm:text-md p-4': size === 'lg'
+				},
+				$$props.class
+			)}
+		/>
 	</div>
 {/if}

package/forms/Iconinput.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         [x: string]: any;
         type?: InputType;
         value?: string;
+        size?: 'sm' | 'md' | 'lg';
         icon: typeof SvelteComponent;
         noBorder?: boolean;
         inputClass?: string;
@@ -13,7 +14,7 @@ declare const __propDef: {
         noBorderInputClass?: string;
         noBorderDivClass?: string;
         iconClass?: string;
-        iconSize?: number;
+        iconSize: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Input.svelte

@@ -5,7 +5,6 @@ export let value = '';
 export let size = 'md';
 export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
 export let color = 'base';
-export let ref = null;
 const colorClasses = {
     base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 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',
@@ -22,7 +21,6 @@ function setType(node) {
 <input
 	{...$$restProps}
 	bind:value
-	bind:this={ref}
 	on:blur
 	on:change
 	on:click

package/forms/Input.svelte.d.ts

@@ -8,7 +8,6 @@ declare const __propDef: {
         size?: 'sm' | 'md' | 'lg';
         inputClass?: string;
         color?: 'base' | 'green' | 'red';
-        ref?: HTMLElement;
     };
     events: {
         blur: FocusEvent;

package/forms/Textarea.svelte

@@ -4,7 +4,6 @@ export let id = generateId();
 export let name = 'message';
 export let label = 'Your message';
 export let rows = 4;
-export let ref = null;
 export let placeholder = 'Leave a comment...';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400';
 export let textareaClass = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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';
@@ -15,7 +14,6 @@ export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 <label for={id} class={labelClass}>{label}</label>
 <textarea
 	bind:value
-	bind:this={ref}
 	on:blur
 	on:change
 	on:click

package/forms/Textarea.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         name?: string;
         label?: string;
         rows?: number;
-        ref?: HTMLElement;
         placeholder?: string;
         labelClass?: string;
         textareaClass?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -86,7 +86,7 @@
   },
   "engines": {
     "npm": ">=7.0.0",
-    "node": ">=16.16.0"
+    "node": ">=16.0.0"
   },
   "contributors": [
     "Zoltán Szőgyényi <zoltan@themesberg.com>",
@@ -218,7 +218,6 @@
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
-    "./utils/OptsButton.svelte": "./utils/OptsButton.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/focusTrap": "./utils/focusTrap.js",
     "./utils/generateId": "./utils/generateId.js"

package/paginations/TableData.svelte

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher } from 'svelte';
-export let helper;
+export let helper = undefined;
 export let btnPreClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 export let btnNextClass = 'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 const dispatch = createEventDispatcher();

package/paginations/TableData.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        helper: {
+        helper?: {
             start: number;
             end: number;
             total: number;
-        };
+        } | undefined;
         btnPreClass?: string;
         btnNextClass?: string;
     };

package/utils/OptsButton.svelte

@@ -1,18 +0,0 @@
-<script>
-	import CloseButton from './CloseButton.svelte';
-</script>
-
-<CloseButton on:click {...$$props}>
-	<span class="sr-only">Open options</span>
-	<svg
-		class="w-6 h-6"
-		aria-hidden="true"
-		fill="currentColor"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"
-		/>
-	</svg>
-</CloseButton>

package/utils/OptsButton.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  OptsButtonProps */
-/** @typedef {typeof __propDef.events}  OptsButtonEvents */
-/** @typedef {typeof __propDef.slots}  OptsButtonSlots */
-export default class OptsButton extends SvelteComponentTyped<{
-    [x: string]: any;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type OptsButtonProps = typeof __propDef.props;
-export type OptsButtonEvents = typeof __propDef.events;
-export type OptsButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};