v1.15.0

Author: shinokada

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.15.0
+
+### Minor Changes
+
+- feat(Timeline): add color depends on state
+
 ## 1.14.6
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.14.6",
+  "version": "1.15.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {

src/lib/timeline/TimelineItem.svelte

@@ -5,31 +5,33 @@
   import clsx from "clsx";
   import { getTheme, warnThemeDeprecation } from "$lib/theme/themeUtils";
 
-  let { children, orientationSlot, title, date, dateFormat = "month-year", svgClass, liClass, divClass, timeClass, h3Class, class: className, classes, ...restProps }: TimelineItemProps = $props();
+  let { children, orientationSlot, title, date, dateFormat = "month-year", color = "primary", isLast = false, svgClass, liClass, divClass, timeClass, h3Class, connectorClass, datePrefix, class: className, classes, ...restProps }: TimelineItemProps = $props();
 
   warnThemeDeprecation(
     "TimelineItem",
-    { svgClass, liClass, divClass, timeClass, h3Class },
+    { svgClass, liClass, divClass, timeClass, h3Class, connectorClass },
     {
       liClass: "class",
       svgClass: "svg",
       divClass: "div",
       timeClass: "time",
-      h3Class: "h3"
+      h3Class: "h3",
+      connectorClass: "connector"
     }
   );
+
   const styling = $derived({
     svg: svgClass,
     div: divClass,
     time: timeClass,
-    h3: h3Class
+    h3: h3Class,
+    connector: connectorClass
   });
 
   const theme = getTheme("timelineItem");
-
   let order = getContext<TimelineVariants["order"]>("order");
 
-  const { base, div, time, h3, svg } = $derived(timelineItem({ order }));
+  const { base, div, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
 
   function formatDisplayDate(dateStr: string, format: DateFormat) {
     const date = new Date(dateStr);
@@ -61,6 +63,11 @@
 </script>
 
 <li {...restProps} class={base({ class: clsx(theme?.base, className ?? liClass) })}>
+  <!-- Individual connector line for vertical/activity layouts -->
+  {#if !isLast && (order === "vertical" || order === "activity")}
+    <div class={connector({ class: clsx(theme?.connector, styling.connector) })} aria-hidden="true"></div>
+  {/if}
+
   {#if order !== "default"}
     {#if orientationSlot && (order === "vertical" || order === "horizontal")}
       {@render orientationSlot()}
@@ -73,9 +80,11 @@
     {/if}
   {:else if date}
     <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
+      {datePrefix}
       {formatDisplayDate(date, dateFormat)}
     </time>
   {/if}
+
   {#if title}
     <h3 class={h3({ class: clsx(theme?.h3, styling.h3) })}>
       {title}
@@ -84,7 +93,8 @@
 
   {#if order !== "default"}
     {#if date}
-      <time datetime={date} class={time({ class: clsx(theme?.time, timeClass) })}>
+      <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
+        {datePrefix}
         {formatDisplayDate(date, dateFormat)}
       </time>
     {/if}
@@ -97,18 +107,22 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1816)
+[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1818)
 ## Props
 @prop children
 @prop orientationSlot
 @prop title
 @prop date
 @prop dateFormat = "month-year"
+@prop color = "primary"
+@prop isLast = false
 @prop svgClass
 @prop liClass
 @prop divClass
 @prop timeClass
 @prop h3Class
+@prop connectorClass
+@prop datePrefix
 @prop class: className
 @prop classes
 @prop ...restProps

src/lib/timeline/theme.ts

@@ -45,13 +45,58 @@ export const groupItem = tv({
   }
 });
 
+const colorVariants = {
+  primary: {
+    dot: "bg-primary-200 dark:bg-primary-900",
+    ring: "ring-white dark:ring-gray-900",
+    icon: "text-primary-600 dark:text-primary-400",
+    connector: "border-primary-200 dark:border-primary-700"
+  },
+  green: {
+    dot: "bg-green-200 dark:bg-green-900",
+    ring: "ring-white dark:ring-gray-900",
+    icon: "text-green-600 dark:text-green-400",
+    connector: "border-green-200 dark:border-green-700"
+  },
+  orange: {
+    dot: "bg-orange-200 dark:bg-orange-900",
+    ring: "ring-white dark:ring-gray-900",
+    icon: "text-orange-600 dark:text-orange-400",
+    connector: "border-orange-200 dark:border-orange-700"
+  },
+  red: {
+    dot: "bg-red-200 dark:bg-red-900",
+    ring: "ring-white dark:ring-gray-900",
+    icon: "text-red-600 dark:text-red-400",
+    connector: "border-red-200 dark:border-red-700"
+  },
+  blue: {
+    dot: "bg-blue-200 dark:bg-blue-900",
+    ring: "ring-white dark:ring-gray-900",
+    icon: "text-blue-600 dark:text-blue-400",
+    connector: "border-blue-200 dark:border-blue-700"
+  },
+  purple: {
+    dot: "bg-purple-200 dark:bg-purple-900",
+    ring: "ring-white dark:ring-gray-900",
+    icon: "text-purple-600 dark:text-purple-400",
+    connector: "border-purple-200 dark:border-purple-700"
+  },
+  gray: {
+    dot: "bg-gray-200 dark:bg-gray-700",
+    ring: "ring-white dark:ring-gray-900",
+    icon: "text-gray-600 dark:text-gray-400",
+    connector: "border-gray-200 dark:border-gray-700"
+  }
+};
+
 export const timeline = tv({
   variants: {
     order: {
       group: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
       horizontal: "sm:flex",
-      activity: "relative border-s border-gray-200 dark:border-gray-700",
-      vertical: "relative border-s border-gray-200 dark:border-gray-700",
+      activity: "relative",
+      vertical: "relative",
       default: "relative border-s border-gray-200 dark:border-gray-700"
     }
   },
@@ -62,25 +107,27 @@ export const timeline = tv({
 
 export const timelineItem = tv({
   slots: {
-    base: "",
+    base: "relative",
     div: "",
     time: "",
     h3: "",
-    svg: "w-3 h-3 text-primary-600 dark:text-primary-400"
+    svg: "w-4 h-4",
+    connector: "absolute top-6 left-3 w-px h-full"
   },
   variants: {
     order: {
       default: {
         base: "mb-10 ms-4",
-        div: "absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",
+        div: "absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",
         time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
         h3: "text-lg font-semibold text-gray-900 dark:text-white"
       },
       vertical: {
-        base: "mb-10 ms-6",
-        div: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
-        time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
-        h3: "flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white"
+        base: "mb-10 ms-6 relative",
+        div: "flex absolute -left-4 top-1.5 justify-center items-center w-6 h-6 rounded-full ring-8",
+        time: "mb-1 pl-4 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+        h3: "flex ml-4 items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white",
+        connector: "absolute top-7 -left-1.5 w-px h-full"
       },
       horizontal: {
         base: "relative mb-6 sm:mb-0",
@@ -89,20 +136,166 @@ export const timelineItem = tv({
         h3: "text-lg font-semibold text-gray-900 dark:text-white"
       },
       activity: {
-        base: "mb-10 ms-6",
-        div: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
+        base: "mb-10 ms-6 relative",
+        div: "flex absolute -left-4 top-1.5 justify-center items-center w-6 h-6 rounded-full ring-8",
         time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
-        h3: "text-lg font-semibold text-gray-900 dark:text-white"
+        h3: "text-lg font-semibold text-gray-900 dark:text-white",
+        connector: "absolute top-7 -left-4 w-px h-full"
       },
       group: {
         base: "",
         div: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
         time: "text-lg font-semibold text-gray-900 dark:text-white",
         h3: "text-lg font-semibold text-gray-900 dark:text-white"
       }
+    },
+    color: {
+      primary: {},
+      green: {},
+      orange: {},
+      red: {},
+      blue: {},
+      purple: {},
+      gray: {}
+    },
+    isLast: {
+      true: {},
+      false: {}
     }
   },
+  compoundVariants: [
+    // Vertical color variants
+    {
+      order: "vertical",
+      color: "primary",
+      class: {
+        div: colorVariants.primary.dot + " " + colorVariants.primary.ring,
+        svg: colorVariants.primary.icon,
+        connector: "bg-primary-200 dark:bg-primary-700"
+      }
+    },
+    {
+      order: "vertical",
+      color: "green",
+      class: {
+        div: colorVariants.green.dot + " " + colorVariants.green.ring,
+        svg: colorVariants.green.icon,
+        connector: "bg-green-200 dark:bg-green-700"
+      }
+    },
+    {
+      order: "vertical",
+      color: "orange",
+      class: {
+        div: colorVariants.orange.dot + " " + colorVariants.orange.ring,
+        svg: colorVariants.orange.icon,
+        connector: "bg-orange-200 dark:bg-orange-700"
+      }
+    },
+    {
+      order: "vertical",
+      color: "red",
+      class: {
+        div: colorVariants.red.dot + " " + colorVariants.red.ring,
+        svg: colorVariants.red.icon,
+        connector: "bg-red-200 dark:bg-red-700"
+      }
+    },
+    {
+      order: "vertical",
+      color: "blue",
+      class: {
+        div: colorVariants.blue.dot + " " + colorVariants.blue.ring,
+        svg: colorVariants.blue.icon,
+        connector: "bg-blue-200 dark:bg-blue-700"
+      }
+    },
+    {
+      order: "vertical",
+      color: "purple",
+      class: {
+        div: colorVariants.purple.dot + " " + colorVariants.purple.ring,
+        svg: colorVariants.purple.icon,
+        connector: "bg-purple-200 dark:bg-purple-700"
+      }
+    },
+    {
+      order: "vertical",
+      color: "gray",
+      class: {
+        div: colorVariants.gray.dot + " " + colorVariants.gray.ring,
+        svg: colorVariants.gray.icon,
+        connector: "bg-gray-200 dark:bg-gray-700"
+      }
+    },
+    // Horizontal color variants
+    {
+      order: "horizontal",
+      color: "primary",
+      class: {
+        div: colorVariants.primary.dot + " " + colorVariants.primary.ring,
+        svg: colorVariants.primary.icon
+      }
+    },
+    {
+      order: "horizontal",
+      color: "green",
+      class: {
+        div: colorVariants.green.dot + " " + colorVariants.green.ring,
+        svg: colorVariants.green.icon
+      }
+    },
+    {
+      order: "horizontal",
+      color: "orange",
+      class: {
+        div: colorVariants.orange.dot + " " + colorVariants.orange.ring,
+        svg: colorVariants.orange.icon
+      }
+    },
+    {
+      order: "horizontal",
+      color: "red",
+      class: {
+        div: colorVariants.red.dot + " " + colorVariants.red.ring,
+        svg: colorVariants.red.icon
+      }
+    },
+    {
+      order: "horizontal",
+      color: "blue",
+      class: {
+        div: colorVariants.blue.dot + " " + colorVariants.blue.ring,
+        svg: colorVariants.blue.icon
+      }
+    },
+    {
+      order: "horizontal",
+      color: "purple",
+      class: {
+        div: colorVariants.purple.dot + " " + colorVariants.purple.ring,
+        svg: colorVariants.purple.icon
+      }
+    },
+    {
+      order: "horizontal",
+      color: "gray",
+      class: {
+        div: colorVariants.gray.dot + " " + colorVariants.gray.ring,
+        svg: colorVariants.gray.icon
+      }
+    },
+    // Hide connector on last item
+    {
+      isLast: true,
+      class: {
+        connector: "hidden"
+      }
+    }
+  ],
   defaultVariants: {
-    order: "default"
+    order: "default",
+    color: "primary",
+    isLast: false
   }
 });

src/lib/toast/Toast.svelte

@@ -61,7 +61,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1830)
+[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1836)
 ## Props
 @prop children
 @prop icon