flowbite-svelte 0.26.24 → 0.26.26

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.26.26](https://github.com/themesberg/flowbite-svelte/compare/v0.26.25...v0.26.26) (2022-09-20)
+
+
+### Features
+
+* add $$slots.arrowdown and arrowup for user icons ([3fa53de](https://github.com/themesberg/flowbite-svelte/commit/3fa53de11239fe93e2ae9e28e5bdf3ee3ccc1f69))
+* add ChevronUp to SidebarDropdownWrapper ([032d540](https://github.com/themesberg/flowbite-svelte/commit/032d540b347ab30ddcdcddff8c0963290ce0c904))
+
+
+### Bug Fixes
+
+* alert more tweaks ([444b340](https://github.com/themesberg/flowbite-svelte/commit/444b340f3a211f02572675b94624da4ae5d90c63))
+* alert tweaks ([0c93b3c](https://github.com/themesberg/flowbite-svelte/commit/0c93b3c27d8911cd4709f78c554f68e524cc06d4))
+
+### [0.26.25](https://github.com/themesberg/flowbite-svelte/compare/v0.26.24...v0.26.25) (2022-09-19)
+
+
+### Bug Fixes
+
+* tooltips/popovers ([d18721c](https://github.com/themesberg/flowbite-svelte/commit/d18721cc4229f5eb1f4dccbbd34dda65f6a07aac))
+
 ### [0.26.24](https://github.com/themesberg/flowbite-svelte/compare/v0.26.23...v0.26.24) (2022-09-19)
 
 

package/alerts/Alert.svelte

@@ -3,32 +3,35 @@ import { createEventDispatcher } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
 import Frame from '../utils/Frame.svelte';
 const dispatch = createEventDispatcher();
-export let color = 'blue';
 export let dismissable = false;
-export let rounded = true;
 export let accent = false;
 let hidden = false;
 const handleHide = () => {
     hidden = !hidden;
-    dispatch('handleAlert');
     dispatch('close'); // preffered name
 };
 let divClass;
 $: divClass = classNames('p-4 text-sm', accent && 'border-t-4 ', hidden && 'hidden', $$props.class);
+$: {
+    // set default values
+    $$restProps.color = $$restProps.color ?? 'blue';
+    $$restProps.rounded = $$restProps.rounded ?? !accent;
+}
 </script>
 
-<Frame {color} {rounded} {...$$restProps} class={divClass} role="alert">
-  <div class="flex items-center whitespace-pre-wrap">
+<Frame {...$$restProps} class={divClass} role="alert">
+  <div class="flex items-center">
     {#if $$slots.icon}
       <slot name="icon" />
     {/if}
-
-    <slot />
+    <div class:ml-3={$$slots.icon}>
+      <slot />
+    </div>
 
     {#if dismissable}
       <CloseButton
         class="-mx-1.5 -my-1.5"
-        {color}
+        color={$$restProps.color}
         on:click={handleHide}
         on:click
         on:change

package/alerts/Alert.svelte.d.ts

@@ -2,9 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: "gray" | "blue" | "red" | "green" | "yellow" | "indigo" | "purple" | "pink" | "dark" | "custom" | undefined;
         dismissable?: boolean | undefined;
-        rounded?: boolean | undefined;
         accent?: boolean | undefined;
     };
     events: {
@@ -16,7 +14,6 @@ declare const __propDef: {
         blur: CustomEvent<any>;
         mouseenter: CustomEvent<any>;
         mouseleave: CustomEvent<any>;
-        handleAlert: CustomEvent<any>;
         close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/buttons/Button.svelte.d.ts

@@ -10,8 +10,8 @@ declare const __propDef: {
         href?: string | undefined;
         btnClass?: string | undefined;
         type?: ButtonType | undefined;
-        color?: "blue" | "red" | "green" | "yellow" | "purple" | "pink" | "dark" | "light" | "cyan" | "teal" | "lime" | "alternative" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
-        shadow?: "blue" | "red" | "green" | "purple" | "pink" | "cyan" | "teal" | "lime" | null | undefined;
+        color?: "blue" | "dark" | "light" | "green" | "red" | "yellow" | "purple" | "cyan" | "teal" | "lime" | "pink" | "alternative" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
+        shadow?: "blue" | "green" | "red" | "purple" | "cyan" | "teal" | "lime" | "pink" | null | undefined;
     };
     events: {
         click: MouseEvent;

package/forms/FloatingLabelInput.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         style?: "filled" | "outlined" | "standard" | undefined;
         type?: InputType | undefined;
         size?: "default" | "small" | undefined;
-        color?: "red" | "green" | "base" | undefined;
+        color?: "green" | "red" | "base" | undefined;
         value?: string | undefined;
         label?: string | undefined;
     };

package/forms/Helper.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         helperClass?: string | undefined;
-        color?: "gray" | "red" | "green" | "disabled" | undefined;
+        color?: "green" | "red" | "gray" | "disabled" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Input.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         value?: string | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         inputClass?: string | undefined;
-        color?: "red" | "green" | "base" | undefined;
+        color?: "green" | "red" | "base" | undefined;
     };
     events: {
         blur: FocusEvent;

package/forms/Label.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: "gray" | "red" | "green" | "disabled" | undefined;
+        color?: "green" | "red" | "gray" | "disabled" | undefined;
         defaultClass?: string | undefined;
         show?: boolean | undefined;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.24",
+  "version": "0.26.26",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/popover/Popover.svelte

@@ -3,7 +3,7 @@ export let title = '';
 export let defaultClass = 'py-2 px-3';
 </script>
 
-<Popper activeContent border shadow rounded {...$$restProps} class={$$props.class} on:show>
+<Popper data-popover activeContent border shadow rounded {...$$restProps} class={$$props.class} on:show>
 	{#if $$slots.title || title}
 		<div
 			class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">

package/sidebars/SidebarDropdownWrapper.svelte

@@ -2,6 +2,7 @@
 import { slide } from 'svelte/transition';
 import { quintOut } from 'svelte/easing';
 import ChevronDown from '../utils/ChevronDown.svelte';
+import ChevronUp from '../utils/ChevronUp.svelte';
 export let btnClass = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
 export let label = '';
 export let spanClass = 'flex-1 ml-3 text-left whitespace-nowrap';
@@ -21,7 +22,17 @@ const handleDropdown = () => {
     aria-controls="sidebar-dropdown">
     <slot name="icon" />
     <span class={spanClass} sidebar-toggle-item>{label}</span>
-    <ChevronDown />
+    {#if isOpen}
+      {#if $$slots.arrowup}
+        <slot name="arrowup" />
+      {:else}
+        <ChevronUp />
+      {/if}
+    {:else if $$slots.arrowdown}
+      <slot name="arrowdown" />
+    {:else}
+      <ChevronDown />
+    {/if}
   </button>
   {#if isOpen}
     <ul

package/sidebars/SidebarDropdownWrapper.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
     };
     slots: {
         icon: {};
+        arrowup: {};
+        arrowdown: {};
         default: {};
     };
 };

package/tables/Table.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         hoverable?: boolean | undefined;
         noborder?: boolean | undefined;
         shadow?: boolean | undefined;
-        color?: "default" | "blue" | "red" | "green" | "yellow" | "purple" | "custom" | undefined;
+        color?: "default" | "blue" | "green" | "red" | "yellow" | "purple" | "custom" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tables/TableSearch.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         striped?: boolean | undefined;
         hoverable?: boolean | undefined;
         placeholder?: string | undefined;
-        color?: "default" | "blue" | "red" | "green" | "yellow" | "purple" | "custom" | undefined;
+        color?: "default" | "blue" | "green" | "red" | "yellow" | "purple" | "custom" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tooltips/Tooltip.svelte

@@ -9,10 +9,12 @@ const colors = {
     auto: 'border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600 '
 };
 let toolTipClass;
-$: toolTipClass = classNames(tipClass, colors[style], $$props.class);
+$: toolTipClass = classNames("tooltip", tipClass, colors[style], $$props.class);
 </script>
 
 <Popper
+	data-tooltip
+	activeContent
 	rounded
 	border
 	shadow

package/tooltips/Tooltip.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         color?: string | undefined;
-        style?: "dark" | "custom" | "light" | "auto" | undefined;
+        style?: "dark" | "light" | "custom" | "auto" | undefined;
         tipClass?: string | undefined;
     };
     events: {

package/typography/List.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tag?: "ul" | "dl" | "ol" | undefined;
+        tag?: "dl" | "ol" | "ul" | undefined;
         list?: "none" | "disc" | "decimal" | undefined;
         position?: "inside" | "outside" | undefined;
         color?: string | undefined;

package/utils/Frame.svelte

@@ -73,22 +73,21 @@ const borderColors = {
 };
 // have a custom transition function that returns the desired transition
 let transitionFunc;
-// $: transitionFunc = (node: Element) => (transition ? transition(node, params) : noop);
-$: transitionFunc = transition ?? noop;
+$: transitionFunc = transition ?? (() => ({}));
 let divClass;
 $: divClass = classNames(bgColors[color], textColors[color], rounded && 'rounded-lg ', border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
 </script>
 
 <svelte:element
-	this={tag}
-	use:use={options}
-	bind:this={node}
-	transition:transitionFunc={params}
-	{...$$restProps}
-	class={divClass}
-	on:mouseenter
-	on:mouseleave
-	on:focusin
-	on:focusout>
-	<slot />
+  this={tag}
+  use:use={options}
+  bind:this={node}
+  transition:transitionFunc={params}
+  {...$$restProps}
+  class={divClass}
+  on:mouseenter
+  on:mouseleave
+  on:focusin
+  on:focusout>
+  <slot />
 </svelte:element>

package/utils/Frame.svelte.d.ts

@@ -4,12 +4,12 @@ import type { TransitionConfig } from 'svelte/transition';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tag?: "div" | "a" | "nav" | "ul" | undefined;
+        tag?: string | undefined;
         color?: string | undefined;
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: Element, params: object) => TransitionConfig) | undefined;
+        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
         params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: Action<HTMLElement, any, Record<never, any>> | undefined;

package/utils/Popper.svelte

@@ -131,6 +131,6 @@ onMount(() => {
 		{...$$restProps}
 		class={classNames('z-10', $$props.class)}>
 		<slot />
-		{#if arrow}<div data-popper-arrow />{/if}
+		{#if arrow}<div data-popper-arrow class="tooltip-arrow"/>{/if}
 	</Frame>
 {/if}