flowbite-svelte 0.23.3 → 0.24.0

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.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/alerts/Alert.svelte

@@ -1,7 +1,7 @@
 <script>import { setContext } from 'svelte';
 import classNames from 'classnames';
 import { createEventDispatcher } from 'svelte';
-import CloseButton from '../utils/CloseButton.svelte';
+import { CloseButton } from '$lib';
 const dispatch = createEventDispatcher();
 setContext('background', true);
 export let color = 'blue';

package/badges/Badge.svelte

@@ -1,5 +1,5 @@
 <script>import classNames from 'classnames';
-import CloseButton from '../utils/CloseButton.svelte';
+import { CloseButton } from '$lib';
 export let color = 'blue';
 export let large = false;
 export let href = undefined;

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,6 +1,6 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { setContext } from 'svelte';
-import CloseButton from '../utils/CloseButton.svelte';
+import { CloseButton } from '$lib';
 import focusTrap from '../utils/focusTrap';
 export let open = false;
 export let title = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.23.3",
+  "version": "0.24.0",
   "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

@@ -1,6 +1,6 @@
 <script>import classNames from 'classnames';
 import * as transitions from 'svelte/transition';
-import CloseButton from '../utils/CloseButton.svelte';
+import { CloseButton } from '$lib';
 export let color = 'blue';
 export let simple = false;
 // Export a prop through which you can set a desired transition

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/utils/OptsButton.svelte

@@ -1,5 +1,5 @@
 <script>
-	import CloseButton from './CloseButton.svelte';
+	import { CloseButton } from '$lib';
 </script>
 
 <CloseButton on:click {...$$props}>