flowbite-svelte 0.23.3 → 0.24.2

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* change from import { CloseButton } from $lib to import CloseButton from "../utils/CloseButton.svelte" in lib dir ([4eb4346](https://github.com/themesberg/flowbite-svelte/commit/4eb4346a2c4679d58c00309e0cb1a28304888a72))
+* update Button color types ([974df12](https://github.com/themesberg/flowbite-svelte/commit/974df12eaf2d796676700df09f2ee83d24ffc328))
+
+## [0.24.0](https://github.com/themesberg/flowbite-svelte/compare/v0.23.3...v0.24.0) (2022-08-07)
+
+
+### ⚠ BREAKING CHANGES
+
+* change node version to 0.16.16 since new playwright and sveltekit require it, https://github.com/sveltejs/kit/issues/5842
+
+### Features
+
+* change node version to 0.16.16 since new playwright and sveltekit require it, https://github.com/sveltejs/kit/issues/5842 ([6175c2c](https://github.com/themesberg/flowbite-svelte/commit/6175c2cb54c60829eb329bce90772e59b888063f))
+
+
+### Bug Fixes
+
+* [#200](https://github.com/themesberg/flowbite-svelte/issues/200) undefined in tooltips ([4ed2ec0](https://github.com/themesberg/flowbite-svelte/commit/4ed2ec04945676cbc3e40011fb7790d1de18d8db))
+* A11y fix for all alt taking out picture for img tag ([a247c32](https://github.com/themesberg/flowbite-svelte/commit/a247c32171543450647877a0f7192e63ee64fbb5))
+* add CloseButton to index and change import from $lib ([cc8fe25](https://github.com/themesberg/flowbite-svelte/commit/cc8fe2504474f6a0fbefb5474ef5cf798f6a28a8))
+* alerts with list color removal ([f940441](https://github.com/themesberg/flowbite-svelte/commit/f940441098e4f033b6dd405d0cb774e6d8b5030e))
+* clean up import from utils for docs ([b50126d](https://github.com/themesberg/flowbite-svelte/commit/b50126d2f78e7613e48008b46c0bd77cdc7471fa))
+
 ### [0.23.3](https://github.com/themesberg/flowbite-svelte/compare/v0.23.2...v0.23.3) (2022-08-05)
 
 

package/README.md

@@ -5,6 +5,8 @@
 [![release](https://badgen.net/github/release/themesberg/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/releases)
 [![license](https://badgen.net/npm/license/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE)
 
+**⚠️ Flowbite-Svelte is currently in early development and APIs and packages are likely to change quite often.**
+
 <p>
     <a href="https://flowbite-svelte.com" >
       <img alt="Flowbite-Svelte CSS components" width="350" src="https://raw.githubusercontent.com/themesberg/flowbite-svelte/main/static/images/flowbite-svelte.png">

package/buttons/Button.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         gradient?: boolean;
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         href?: string;
-        color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
+        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;
     };
     events: {

package/cards/Card.svelte

@@ -5,17 +5,26 @@ export let horizontal = false;
 export let reverse = false;
 export let img = undefined;
 export let padding = 'lg';
+export let size = 'sm';
 setContext('background', true);
 const paddings = {
+    none: 'p-0',
     sm: 'p-4',
     md: 'p-5',
     lg: 'p-6',
     xl: 'p-8'
 };
+const sizes = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-screen-xl'
+};
 let innerPdding;
 $: innerPdding = paddings[padding];
 let cardClass;
-$: cardClass = classNames('block max-w-sm', 'flex', reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), 'bg-white dark:bg-gray-800 shadow-md', 'text-gray-500 dark:text-gray-400', 'rounded-lg border border-gray-200 dark:border-gray-700', href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
+$: cardClass = classNames('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), 'bg-white dark:bg-gray-800 shadow-md', 'text-gray-500 dark:text-gray-400', 'rounded-lg border border-gray-200 dark:border-gray-700', href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
 let imgClass;
 $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
 </script>
@@ -27,6 +36,6 @@ $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal &
 			<slot />
 		</div>
 	{:else}
-		<div><slot /></div>
+		<slot />
 	{/if}
 </svelte:element>

package/cards/Card.svelte.d.ts

@@ -6,7 +6,8 @@ declare const __propDef: {
         horizontal?: boolean;
         reverse?: boolean;
         img?: string;
-        padding?: 'sm' | 'md' | 'lg';
+        padding?: 'none' | 'sm' | 'md' | 'lg';
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -108,3 +108,4 @@ export { default as TimelineItemHorizontal } from './timelines/TimelineItemHoriz
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 export { default as Toast } from './toasts/Toast.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+export { default as CloseButton } from './utils/CloseButton.svelte';

package/index.js

@@ -139,3 +139,5 @@ export { default as TimelineItemVertical } from './timelines/TimelineItemVertica
 export { default as Toast } from './toasts/Toast.svelte';
 // Tooltips
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+// utils
+export { default as CloseButton } from './utils/CloseButton.svelte';

package/modals/Modal.svelte

@@ -1,5 +1,4 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { setContext } from 'svelte';
+<script>import { createEventDispatcher, setContext } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
 import focusTrap from '../utils/focusTrap';
 export let open = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.23.3",
+  "version": "0.24.2",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -86,7 +86,7 @@
   },
   "engines": {
     "npm": ">=7.0.0",
-    "node": ">=16.0.0"
+    "node": ">=16.16.0"
   },
   "contributors": [
     "Zoltán Szőgyényi <zoltan@themesberg.com>",

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/tooltips/Tooltip.svelte

@@ -23,25 +23,12 @@ const arrowStyleClasses = {
     custom: tipColor
 };
 let toolTipClass;
-$: toolTipClass = classNames(tipClass, animation !== false && `transition-opacity ${animation}`, {
-    'invisible opacity-0': !open
-}, tipStyleClasses[style], $$props.class);
+$: toolTipClass = classNames(tipClass, animation !== false && `transition-opacity ${animation}`, !open && 'invisible opacity-0', tipStyleClasses[style], $$props.class);
 let open = false;
-const floatingPlacement = ({ placement }) => {
+const floatingPlacement = (placement) => {
     return placement === 'auto' ? undefined : placement;
 };
-const floatingArrowPlacement = ({ placement }) => {
-    if (!placement) {
-        return 'top';
-    }
-    return {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right'
-    }[placement.split('-')[0]];
-};
-const floatingMiddleware = ({ arrowRef, placement }) => {
+const floatingMiddleware = (arrowRef, placement) => {
     const middleware = [];
     middleware.push(offset(8));
     middleware.push(placement === 'auto' ? autoPlacement() : flip());
@@ -54,8 +41,8 @@ const floatingMiddleware = ({ arrowRef, placement }) => {
 let placementData;
 let tooltipRef, triggerRef, arrowRef;
 const updatePosition = () => computePosition(triggerRef, tooltipRef, {
-    middleware: floatingMiddleware({ arrowRef, placement }),
-    placement: floatingPlacement({ placement })
+    middleware: floatingMiddleware(arrowRef, placement),
+    placement: floatingPlacement(placement)
 }).then((data) => (placementData = data));
 let attachedScroll = false;
 $: tooltipRef && open && updatePosition();
@@ -75,6 +62,24 @@ onDestroy(() => {
         window.removeEventListener('scroll', updatePosition, true);
     }
 });
+const arrPos = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+};
+let floatingArrowPlacement;
+$: {
+    if (placementData) {
+        const arrow = placementData.middlewareData.arrow;
+        const pos = arrPos[placementData?.placement?.split('-')[0]] ?? 'top';
+        if (pos === 'top' || pos === 'bottom')
+            floatingArrowPlacement = `${pos}: -4px; left: ${px(arrow?.x)}`;
+        else
+            floatingArrowPlacement = `${pos}: -4px; top: ${px(arrow?.y)}`;
+    }
+}
+const px = (x) => (x === undefined ? '' : x + 'px');
 </script>
 
 <svelte:window on:resize={() => open && updatePosition()} />
@@ -112,7 +117,9 @@ onDestroy(() => {
 		bind:this={tooltipRef}
 		data-testid="tooltip"
 		class={toolTipClass}
-		style={`left:${placementData?.x}px;top:${placementData?.y}px;position:${placementData?.strategy}`}
+		style:left={px(placementData?.x)}
+		style:top={px(placementData?.y)}
+		style:position={placementData?.strategy ?? ''}
 	>
 		<div class="relative z-20">
 			<slot name="content">
@@ -123,9 +130,7 @@ onDestroy(() => {
 			<div
 				class={classNames('absolute z-10 h-2 w-2 rotate-45', arrowStyleClasses[style])}
 				data-testid="tooltip-arrow"
-				style={`left:${placementData?.middlewareData.arrow?.x}px;top:${
-					placementData?.middlewareData.arrow?.y
-				}px;${floatingArrowPlacement({ placement: placementData?.placement })}:-4px`}
+				style={floatingArrowPlacement}
 				bind:this={arrowRef}
 			>
 				&nbsp;

package/types.d.ts

@@ -57,7 +57,7 @@ export interface CheckboxType {
     disabled?: boolean;
     helper?: string;
 }
-export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink';
+export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white';
 export declare type CrumbType = {
     label: string;
     href: string;