flowbite-svelte 0.25.22 → 0.25.23

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.25.23](https://github.com/themesberg/flowbite-svelte/compare/v0.25.22...v0.25.23) (2022-08-28)
+
+
+### Bug Fixes
+
+* BREAKING CHANGE for timeline components ([8b30105](https://github.com/themesberg/flowbite-svelte/commit/8b30105060d150d632ea6fbfac8e1f5639f82546))
+
 ### [0.25.22](https://github.com/themesberg/flowbite-svelte/compare/v0.25.21...v0.25.22) (2022-08-28)
 
 

package/package.json

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

package/timelines/TimelineItem.svelte

@@ -1,6 +1,5 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
-export let icon;
 export let title = '';
 export let date = '';
 export let customDiv = '';
@@ -49,8 +48,8 @@ const h3Class = classNames(order === 'vertical'
 		<slot />
 	{:else if order === 'vertical'}
 		<div class={divClasses[order]} />
-		{#if icon}
-			{@html icon}
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{:else}
 			<svg
 				aria-hidden="true"
@@ -74,8 +73,8 @@ const h3Class = classNames(order === 'vertical'
 		<slot />
 	{:else if order === 'horizontal'}
 		<div class={divClasses[order]} />
-		{#if icon}
-			{@html icon}
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{:else}
 			<svg
 				aria-hidden="true"
@@ -99,8 +98,8 @@ const h3Class = classNames(order === 'vertical'
 		<slot />
 	{:else}
 		<div class={divClasses[order]} />
-		{#if icon}
-			{@html icon}
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{:else}
 			<svg
 				aria-hidden="true"

package/timelines/TimelineItem.svelte.d.ts

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
-        icon: string | SvelteComponent;
         title?: string;
         date?: string;
         customDiv?: string;
@@ -13,6 +11,7 @@ declare const __propDef: {
     };
     slots: {
         default: {};
+        icon: {};
     };
 };
 export declare type TimelineItemProps = typeof __propDef.props;

package/timelines/TimelineItemVertical.svelte

@@ -2,17 +2,13 @@
 // export let timelineItems: TimelineItemVerticalType[];
 export let title;
 export let date;
-export let href;
-export let text;
-export let linkname;
-export let icon;
 </script>
 
 <li class="mb-10 ml-6">
 	<span
 		class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
-		{#if icon}
-			{@html icon}
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{:else}
 			<svg
 				width="20"
@@ -33,23 +29,5 @@ export let icon;
 	</h3>
 	<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
 		>{date}</time>
-	<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
-		{text}
-	</p>
-	{#if href}
-		<a
-			{href}
-			class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-			>{linkname}
-			<svg
-				class="ml-2 w-3 h-3"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
-					clip-rule="evenodd" /></svg
-			></a>
-	{/if}
+	<slot />
 </li>

package/timelines/TimelineItemVertical.svelte.d.ts

@@ -3,15 +3,14 @@ declare const __propDef: {
     props: {
         title: string;
         date: string;
-        href: string;
-        text: string;
-        linkname: string;
-        icon: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        icon: {};
+        default: {};
+    };
 };
 export declare type TimelineItemVerticalProps = typeof __propDef.props;
 export declare type TimelineItemVerticalEvents = typeof __propDef.events;