flowbite-svelte 0.24.8 → 0.24.9

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.9](https://github.com/themesberg/flowbite-svelte/compare/v0.24.8...v0.24.9) (2022-08-15)
+
+
+### Features
+
+* button group ([bb95b98](https://github.com/themesberg/flowbite-svelte/commit/bb95b98c0e4b70f3958c778ac2dc8367c67df8d7))
+
+
+### Bug Fixes
+
+* dropdown open/close api ([d2aa6f7](https://github.com/themesberg/flowbite-svelte/commit/d2aa6f71e7e804d474eb46e58030097d9bd9962f))
+* dropdown open/close api - docs ([f299c28](https://github.com/themesberg/flowbite-svelte/commit/f299c284a4ef3c9539e17677b815f60dd8d1e6f2))
+* no href on <a> buttons ([ab13df8](https://github.com/themesberg/flowbite-svelte/commit/ab13df85aeac5368383bb708c9cb3146e418066f))
+* window is undefined ([b752882](https://github.com/themesberg/flowbite-svelte/commit/b752882ad0f0f6a7c196223649463903453f48d6))
+* window is undefined/2 ([4c0ca77](https://github.com/themesberg/flowbite-svelte/commit/4c0ca77eddfae2a04d10bc1ea3dc53671864b181))
+
 ### [0.24.8](https://github.com/themesberg/flowbite-svelte/compare/v0.24.7...v0.24.8) (2022-08-12)
 
 

package/buttongroups/ButtonGroup.svelte

@@ -1,5 +1,8 @@
-<script>import classNames from 'classnames';
-export let divClass = 'inline-flex rounded-md shadow-sm';
+<script>import { setContext } from 'svelte';
+import classNames from 'classnames';
+export let divClass = 'inline-flex rounded-lg shadow-sm';
+setContext('group', true);
+setContext('background', true);
 </script>
 
 <div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">

package/buttons/Button.svelte

@@ -1,18 +1,20 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
+const group = getContext('group');
 export let pill = false;
 export let outline = false;
 export let gradient = false;
-export let size = 'md';
+export let size = group ? 'sm' : 'md';
 export let href = undefined;
 export let btnClass = undefined;
-export let color = 'blue';
+export let type = 'button';
+export let color = group ? (outline ? 'dark' : 'alternative') : 'blue';
 export let shadow = null;
 const background = getContext('background');
 const colorClasses = {
     blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
-    dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700',
-    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+    dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+    alternative: 'text-gray-900 bg-white border border-gray-200 dark:border-gray-600 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700',
     light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700',
     green: 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
     red: 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
@@ -48,7 +50,7 @@ const coloredShadowClasses = {
 };
 const outlineClasses = {
     blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
+    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
     green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
     red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
     yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
@@ -56,11 +58,22 @@ const outlineClasses = {
 };
 const sizeClasses = {
     xs: 'px-3 py-2 text-xs',
-    sm: 'px-3 py-2 text-sm',
+    sm: 'px-4 py-2 text-sm',
     md: 'px-5 py-2.5 text-sm',
     lg: 'px-5 py-3 text-base',
     xl: 'px-6 py-3.5 text-base'
 };
+function rounded(gradientOutline = false) {
+    if (group) {
+        return pill
+            ? 'first:rounded-l-full last:rounded-r-full'
+            : gradientOutline
+                ? 'first:rounded-l-md last:rounded-r-md'
+                : 'first:rounded-l-lg last:rounded-r-lg';
+    }
+    return pill ? 'rounded-full' : gradientOutline ? 'rounded-md' : 'rounded-lg';
+}
+const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
 $: buttonClass = btnClass
     ? btnClass
@@ -68,16 +81,21 @@ $: buttonClass = btnClass
         ? '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);
+            ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
+            : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), outline &&
+        color === 'dark' &&
+        (background
+            ? 'dark:text-white dark:border-white'
+            : 'dark:text-gray-400 dark:border-gray-700'), hasBorder() && group && 'border-l-0 first:border-l', rounded(false), 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
+$: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], rounded(true), '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');
 </script>
 
 <svelte:element
 	this={href ? 'a' : 'button'}
-	type={href ? undefined : 'button'}
+	type={href ? undefined : type}
+	{href}
 	{...$$restProps}
 	class={buttonClass}
 	on:click

package/buttons/Button.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ButtonType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,6 +9,7 @@ declare const __propDef: {
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         href?: string;
         btnClass?: string;
+        type?: ButtonType;
         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/dropdowns/Dropdown.svelte

@@ -9,6 +9,7 @@ export let tooltipArrow = false;
 export let arrowIcon = true;
 export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent';
 export let placement = 'bottom';
+export let open = false;
 setContext('background', true);
 const icons = {
     top: ChevronUp,
@@ -27,6 +28,7 @@ $: icon = icons[placement.split('-')[0]];
 	{placement}
 	arrow={tooltipArrow}
 	trigger="click"
+	bind:open
 >
 	<slot name="trigger">
 		{#if inline}

package/dropdowns/Dropdown.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         arrowIcon?: boolean;
         labelClass?: string;
         placement?: 'auto' | Placement;
+        open?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -7,7 +7,6 @@ export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
 export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 export { default as Button } from './buttons/Button.svelte';
 export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
-export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 export { default as Card } from './cards/Card.svelte';
 export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';

package/index.js

@@ -14,7 +14,6 @@ export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 export { default as Button } from './buttons/Button.svelte';
 // Buttongroups
 export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
-export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 // Cards
 export { default as Card } from './cards/Card.svelte';
 // Carousels

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.8",
+  "version": "0.24.9",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -108,7 +108,6 @@
     "./breadcrumbs/Breadcrumb.svelte": "./breadcrumbs/Breadcrumb.svelte",
     "./breadcrumbs/BreadcrumbItem.svelte": "./breadcrumbs/BreadcrumbItem.svelte",
     "./buttongroups/ButtonGroup.svelte": "./buttongroups/ButtonGroup.svelte",
-    "./buttongroups/ButtonGroupItem.svelte": "./buttongroups/ButtonGroupItem.svelte",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
     "./cards/Card.svelte": "./cards/Card.svelte",
     "./carousels/Caption.svelte": "./carousels/Caption.svelte",

package/tooltips/Tooltip.svelte

@@ -10,6 +10,7 @@ export let animation = 'duration-300';
 export let arrow = true;
 export let tipClass = 'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm';
 export let tipColor = '';
+export let open = false;
 const tipStyleClasses = {
     dark: 'bg-gray-900 text-white dark:bg-gray-700',
     light: 'border border-gray-200 bg-white text-gray-900',
@@ -24,7 +25,6 @@ const arrowStyleClasses = {
 };
 let toolTipClass;
 $: toolTipClass = classNames(tipClass, animation !== false && `transition-opacity ${animation}`, !open && 'invisible opacity-0', tipStyleClasses[style], $$props.class);
-let open = false;
 const floatingPlacement = (placement) => {
     return placement === 'auto' ? undefined : placement;
 };
@@ -47,13 +47,15 @@ const updatePosition = () => computePosition(triggerRef, tooltipRef, {
 let attachedScroll = false;
 $: tooltipRef && open && updatePosition();
 $: {
-    if (open && !attachedScroll) {
-        attachedScroll = true;
-        window.addEventListener('scroll', updatePosition, true);
-    }
-    else if (!open && attachedScroll) {
-        attachedScroll = false;
-        window.removeEventListener('scroll', updatePosition, true);
+    if (tooltipRef && triggerRef) {
+        if (open && !attachedScroll) {
+            attachedScroll = true;
+            window.addEventListener('scroll', updatePosition, true);
+        }
+        else if (!open && attachedScroll) {
+            attachedScroll = false;
+            window.removeEventListener('scroll', updatePosition, true);
+        }
     }
 }
 onDestroy(() => {

package/tooltips/Tooltip.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         arrow?: boolean;
         tipClass?: string;
         tipColor?: string;
+        open?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/buttongroups/ButtonGroupItem.svelte

@@ -1,40 +0,0 @@
-<script>import classNames from 'classnames';
-export let type = 'button';
-export let btnClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b last:rounded-r-md border-l last:border-r border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
-export let outlineClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent first:rounded-l-lg border-t border-b  last:rounded-r-md border-l last:border-r border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
-export let outline = false;
-export let href = '';
-if (outline) {
-    btnClass = outlineClass;
-}
-</script>
-
-{#if href}
-	<a
-		{href}
-		{...$$restProps}
-		class={classNames(btnClass, $$props.class)}
-		on:click
-		on:change
-		on:keydown
-		on:keyup
-		on:mouseenter
-		on:mouseleave><slot /></a
-	>
-{:else}
-	<button
-		{type}
-		{...$$restProps}
-		class={classNames(btnClass, $$props.class)}
-		on:click
-		on:change
-		on:keydown
-		on:keyup
-		on:focus
-		on:blur
-		on:mouseenter
-		on:mouseleave
-	>
-		<slot />
-	</button>
-{/if}

package/buttongroups/ButtonGroupItem.svelte.d.ts

@@ -1,33 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ButtonType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: ButtonType;
-        btnClass?: string;
-        outlineClass?: string;
-        outline?: boolean;
-        href?: string;
-    };
-    events: {
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type ButtonGroupItemProps = typeof __propDef.props;
-export declare type ButtonGroupItemEvents = typeof __propDef.events;
-export declare type ButtonGroupItemSlots = typeof __propDef.slots;
-export default class ButtonGroupItem extends SvelteComponentTyped<ButtonGroupItemProps, ButtonGroupItemEvents, ButtonGroupItemSlots> {
-}
-export {};