flowbite-svelte 0.24.1 → 0.24.4

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 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.4](https://github.com/themesberg/flowbite-svelte/compare/v0.24.3...v0.24.4) (2022-08-09)
+
+
+### Bug Fixes
+
+* remove custom from Button component ([6114f4c](https://github.com/themesberg/flowbite-svelte/commit/6114f4c9f5d9ad0848d5e7c000db6c4c9661ad39))
+* remove h-4 w-4 from Iconinput example in the input-field page ([4d5f396](https://github.com/themesberg/flowbite-svelte/commit/4d5f396ea80389b88ec6a8437228d5dbadd46877))
+* update Button component ([330aae9](https://github.com/themesberg/flowbite-svelte/commit/330aae91c6c1b19cbbd1f35177f5e4bac9de3904))
+* update Iconinput ([2b4a7b5](https://github.com/themesberg/flowbite-svelte/commit/2b4a7b55f7db35f3e5b0cc042aa27a84ff741194))
+
+### [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)
+
+
+### Features
+
+* add export divClass to Toast for user custom CSS ([7625c01](https://github.com/themesberg/flowbite-svelte/commit/7625c017af9a91920880b3d9c09d8f02924178e5))
+
 ### [0.24.1](https://github.com/themesberg/flowbite-svelte/compare/v0.24.0...v0.24.1) (2022-08-07)
 
 

package/buttons/Button.svelte

@@ -5,6 +5,7 @@ export let outline = false;
 export let gradient = false;
 export let size = 'md';
 export let href = undefined;
+export let btnClass = undefined;
 export let color = 'blue';
 export let shadow = null;
 const background = getContext('background');
@@ -61,10 +62,14 @@ const sizeClasses = {
     xl: 'px-6 py-3.5 text-base'
 };
 let buttonClass;
-$: buttonClass = classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
-    (background
-        ? 'dark:bg-transparent dark:border-gray-700 dark:hover:border-gray-600'
-        : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: buttonClass = btnClass
+    ? btnClass
+    : classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient
+        ? 'p-0.5'
+        : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
+        (background
+            ? 'dark:bg-transparent dark:border-gray-700 dark:hover:border-gray-600'
+            : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 let gradientOutlineClass;
 $: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], pill ? 'rounded-full' : 'rounded-md', 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
 'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');

package/buttons/Button.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         gradient?: boolean;
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         href?: string;
+        btnClass?: string;
         color?: 'alternative' | 'blue' | 'cyan' | 'dark' | 'light' | 'lime' | 'green' | 'pink' | 'red' | 'teal' | 'yellow' | 'purple' | 'purpleToBlue' | 'cyanToBlue' | 'greenToBlue' | 'purpleToPink' | 'pinkToOrange' | 'tealToLime' | 'redToYellow';
         shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
     };

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,14 @@
 <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';
 function setType(node) {
     node.type = type;
 }
@@ -16,21 +16,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,6 @@ declare const __propDef: {
         noBorderInputClass?: string;
         noBorderDivClass?: string;
         iconClass?: string;
-        iconSize?: number;
     };
     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.1",
+  "version": "0.24.4",
   "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/toasts/Toast.svelte

@@ -10,6 +10,7 @@ export let params = {};
 // Absolute position
 export let position = undefined; // default not set
 export let visible = true;
+export let divClass = 'w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800';
 const colors = {
     blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
     green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
@@ -22,8 +23,7 @@ const colors = {
 // have a custom transition function that returns the desired transition
 let transitionFunc;
 $: transitionFunc = transitions[transition] ?? transitions.fade;
-let divClass;
-$: divClass = classNames('w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800', {
+$: classDiv = classNames(divClass, {
     'absolute top-5 left-5': position == 'tl',
     'absolute top-5 right-5': position == 'tr',
     'absolute bottom-5 left-5': position == 'bl',
@@ -34,7 +34,7 @@ $: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0
 </script>
 
 {#if visible}
-	<div transition:transitionFunc={params} class={divClass} role="alert">
+	<div transition:transitionFunc={params} class={classDiv} role="alert">
 		<div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
 			{#if $$slots.icon}
 				<div class={iconClass}><slot name="icon" /></div>

package/toasts/Toast.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         params?: TransitionParamTypes;
         position?: 'tl' | 'tr' | 'bl' | 'br';
         visible?: boolean;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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 {};