fix: TimelineItem for default order (#1884)

* fix: TimelineItem for default order * fix: coderabbitai fix * fix: coderabbitai fix

Author: shinokada

src/lib/timeline/Timeline.svelte

@@ -8,10 +8,8 @@
  let { children, order = "default", class: className, ...restProps }: TimelineProps = $props();
 
  const theme = $derived(getTheme("timeline"));
-
- $effect(() => {
- setContext<TimelineVariants["order"]>("order", order);
- });
+ // svelte-ignore state_referenced_locally
+ setContext<TimelineVariants["order"]>("order", order);
  const olCls = $derived(timeline({ order, class: clsx(theme, className) }));
 </script>
 
@@ -23,10 +21,10 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1953)
+[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1811)
 ## Props
 @prop children
 @prop order = "default"
 @prop class: className
 @prop ...restProps
--->
+-->

src/lib/timeline/TimelineItem.svelte

@@ -1,3 +1,4 @@
+
 <script lang="ts">
  import { getContext, untrack } from "svelte";
  import { timelineItem, type TimelineVariants } from "./theme";
@@ -15,6 +16,7 @@
  isLast = false,
  svgClass,
  liClass,
+ defaultDivClass,
  divClass,
  timeClass,
  h3Class,
@@ -46,10 +48,13 @@
  connector: connectorClass
  });
 
+
  const theme = $derived(getTheme("timelineItem"));
  let order = getContext<TimelineVariants["order"]>("order");
 
- const { base, div, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
+ const { base, div, defaultDiv, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
+
+ const defaultDivCls = $derived(defaultDivClass ? defaultDivClass : defaultDiv());
 
  function formatDisplayDate(dateStr: string, format: DateFormat) {
  const date = new Date(dateStr);
@@ -101,6 +106,7 @@
  </div>
  {/if}
  {:else if date}
+ <div class={defaultDivCls} aria-hidden="true"></div>
  <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
  {datePrefix}
  {formatDisplayDate(date, dateFormat)}

src/lib/timeline/theme.ts

@@ -40,7 +40,7 @@ export const groupItem = tv({
  img: "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0",
  div: "text-gray-600 dark:text-gray-400",
  title: "text-base font-normal",
- span: "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400",
+ span: "inline-flex items-center bg-gray-100 border border-gray-200 text-xs font-medium px-1.5 py-0.5 rounded",
  svg: "me-1 h-3 w-3"
  }
 });
@@ -109,6 +109,7 @@ export const timelineItem = tv({
  slots: {
  base: "relative",
  div: "",
+ defaultDiv: "absolute w-2 h-2 bg-gray-200 rounded-full mt-1.5 -start-5 border border-buffer",
  time: "",
  h3: "",
  svg: "w-4 h-4",

src/lib/types.ts

@@ -1964,6 +1964,7 @@ export interface TimelineItemProps extends TimelineItemVariants, HTMLLiAttribute
  date: string;
  svgClass?: string;
  liClass?: string;
+ defaultDivClass?: string;
  divClass?: string;
  timeClass?: string;
  h3Class?: string;

src/routes/docs-examples/components/timeline/Activity.svelte

@@ -2,20 +2,23 @@
  import { Activity, ActivityItem } from "flowbite-svelte";
  let activities = [
  {
+ id:'activity-1',
  title:
  'Bonnie moved <a href="/" class="font-semibold text-primary-600 dark:text-primary-500 hover:underline">Jese Leos</a> to <span class="bg-gray-100 text-gray-800 text-xs font-normal me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-600 dark:text-gray-300">Funny Group</span>',
  date: "just now",
  alt: "image alt here",
  src: "/images/profile-picture-2.webp"
  },
  {
+ id:'activity-2',
  title: "We don’t serve their kind here! What? Your droids. ",
  date: "2 hours ago",
  alt: "image alt here",
  src: "/images/profile-picture-2.webp",
  text: "The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. "
  },
  {
+ id:'activity-3',
  title: "They’ll have to wait outside. We don’t want them here. ",
  date: "1 day ago",
  alt: "image alt here",

src/routes/docs-examples/components/timeline/Grouped.svelte

@@ -2,6 +2,8 @@
  import { Group, GroupItem } from "flowbite-svelte";
  let groupTimelines = [
  {
+ id:'group-1',
+ name: '<span class="font-medium">Laura Romeros</span> likes <span class="font-medium">Bonnie Green\'s</span> post in <span class="font-medium"> How to start with Flowbite library</span>',
  title:
  '<span class="font-medium text-gray-900 dark:text-white">Jese Leos</span> likes <span class="font-medium text-gray-900 dark:text-white">Bonnie Green\'s</span> post in <span class="font-medium text-gray-900 dark:text-white"> How to start with Flowbite library</span>',
  src: "/images/profile-picture-1.webp",
@@ -11,6 +13,8 @@
  comment: '"I wanted to share a webinar zeroheight."'
  },
  {
+ id:'group-2',
+ name: '<span class="font-medium">Jese Leos</span> likes <span class="font-medium">Bonnie Green\'s</span> post in <span class="font-medium"> How to start with Flowbite library</span>',
  title: '<span class="font-medium text-gray-900 dark:text-white">Bonnie Green</span> react to <span class="font-medium text-gray-900 dark:text-white">Thomas Lean\'s</span> comment',
  src: "/images/profile-picture-2.webp",
  alt: "alt here",

src/routes/docs-examples/components/timeline/[slug]/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+ import type { PageProps } from "./$types";
+
+ let { data }: PageProps = $props();
+ let Content = $derived(data.content);
+</script>
+
+<Content />

src/routes/docs-examples/components/timeline/[slug]/+page.ts

@@ -0,0 +1,15 @@
+import type { PageLoad } from "./$types";
+import { error } from "@sveltejs/kit";
+
+export const load: PageLoad = async ({ params }) => {
+ try {
+ const post = await import(`../${params.slug}.svelte`);
+ const content = post.default;
+
+ return {
+ content,
+ };
+ } catch (err) {
+ throw error(404, `Timeline example "${params.slug}" not found`);
+ }
+};