Rename TimelineItem to TimelineEvent (and related classes/props)

techniq · Jun 18, 2024 · e0f7217 · e0f7217
1 parent 9081c0a
commit e0f7217
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git a/.changeset/slimy-pans-develop.md b/.changeset/slimy-pans-develop.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Rename `TimelineItem` to `TimelineEvent` (and related classes/props)
diff --git a/packages/svelte-ux/src/lib/components/Timeline.svelte b/packages/svelte-ux/src/lib/components/Timeline.svelte
@@ -20,36 +20,36 @@
 </script>
 
 <script lang="ts">
-  import TimelineItem from './TimelineItem.svelte';
+  import TimelineEvent from './TimelineEvent.svelte';
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
 
   import Icon from './Icon.svelte';
 
-  type TimelineItemData = {
+  type TimelineEventData = {
     start?: string | boolean;
     end?: string | boolean;
     icon?: ComponentProps<Icon>['data'];
     completed?: boolean;
   };
 
-  export let data: TimelineItemData[] = [];
+  export let data: TimelineEventData[] = [];
 
   /** Align vertically (default: horizontal) */
   export let vertical: boolean = false;
 
-  /** Place timeline on left and all start/end items on end side  */
+  /** Place timeline on left and all start/end events on same/end side  */
   export let compact: boolean = false;
 
-  /** Common icon for all items */
-  export let icon: ComponentProps<TimelineItem>['icon'] = undefined;
+  /** Common icon for all events */
+  export let icon: ComponentProps<TimelineEvent>['icon'] = undefined;
 
   /** Snap point to start */
   export let snapPoint = false;
 
   export let classes: {
     root?: string;
-    item?: ComponentProps<TimelineItem>['classes'];
+    event?: ComponentProps<TimelineEvent>['classes'];
   } = {};
   const settingsClasses = getComponentClasses('Timeline');
 
@@ -73,7 +73,7 @@
 >
   <slot {data}>
     {#each data as item}
-      <TimelineItem classes={classes.item} {...item} />
+      <TimelineEvent classes={classes.event} {...item} />
     {/each}
   </slot>
 </ul>
diff --git a/...ux/src/lib/components/TimelineItem.svelte → ...x/src/lib/components/TimelineEvent.svelte b/...ux/src/lib/components/TimelineItem.svelte → ...x/src/lib/components/TimelineEvent.svelte
@@ -15,7 +15,7 @@
   /** Icon to show on timeline */
   export let icon: ComponentProps<Icon>['data'] = undefined;
 
-  /** If completed, will color icon and line leading up to item */
+  /** If completed, will color icon and line leading up to event */
   export let completed = false;
 
   export let classes: {
@@ -26,7 +26,7 @@
     icon?: string;
     line?: string;
   } = {};
-  const settingsClasses = getComponentClasses('TimelineItem');
+  const settingsClasses = getComponentClasses('TimelineEvent');
 
   const timelineContext = getTimeline();
   $: vertical = timelineContext?.vertical ?? false;
@@ -37,7 +37,7 @@
 
 <li
   class={cls(
-    'TimelineItem',
+    'TimelineEvent',
     'relative grid shrink-0 items-center',
     'grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]',
     'grid-rows-[minmax(0,1fr)_auto_minmax(0,1fr)]',
@@ -50,7 +50,7 @@
     compact && vertical ? 'grid-cols-[0_auto_minmax(0,1fr)] grid-rows-[0_auto_minmax(0,1fr)]' : '',
     vertical && 'justify-items-center',
     completed &&
-      'timelineitem-completed [&_hr:last-child]:has-[~li.timelineitem-completed]:bg-[--color-completed]',
+      'timelineevent-completed [&_hr:last-child]:has-[~li.timelineevent-completed]:bg-[--color-completed]',
     settingsClasses.root,
     classes.root,
     $$props.class

diff --git a/packages/svelte-ux/src/lib/components/index.ts b/packages/svelte-ux/src/lib/components/index.ts
@@ -90,7 +90,7 @@ export { default as ThemeSwitch } from './ThemeSwitch.svelte';
 export { default as ThemeInit } from './ThemeInit.svelte';
 export { default as Tilt } from './Tilt.svelte';
 export { default as Timeline } from './Timeline.svelte';
-export { default as TimelineItem } from './TimelineItem.svelte';
+export { default as TimelineEvent } from './TimelineEvent.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export { default as ToggleButton } from './ToggleButton.svelte';
 export { default as ToggleGroup } from './ToggleGroup.svelte';

diff --git a/packages/svelte-ux/src/routes/docs/components/Timeline/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Timeline/+page.svelte
@@ -8,7 +8,7 @@
     mdiTruck,
   } from '@mdi/js';
 
-  import { Icon, PeriodType, Timeline, TimelineItem, cls, getSettings } from 'svelte-ux';
+  import { Icon, PeriodType, Timeline, TimelineEvent, cls, getSettings } from 'svelte-ux';
   import Preview from '$lib/components/Preview.svelte';
 
   const { format } = getSettings();
@@ -125,7 +125,7 @@
     data={appleHistory}
     icon={mdiCheckCircle}
     classes={{
-      item: {
+      event: {
         start: 'text-sm font-semibold',
         end: 'border rounded-lg text-sm p-2',
         icon: 'size-5',
@@ -141,7 +141,7 @@
     data={appleHistoryAlternating}
     icon={mdiCheckCircle}
     classes={{
-      item: {
+      event: {
         start: 'border rounded-lg text-sm p-2',
         end: 'border rounded-lg text-sm p-2',
         icon: 'size-5',
@@ -158,7 +158,7 @@
     icon={mdiCheckCircle}
     snapPoint
     classes={{
-      item: {
+      event: {
         start: 'border rounded-lg text-sm p-2',
         end: 'border rounded-lg text-sm p-2',
         icon: 'size-5',
@@ -167,14 +167,14 @@
   />
 </Preview>
 
-<h2>Completed items</h2>
+<h2>Completed events</h2>
 
 <Preview>
   <Timeline
     data={appleHistoryAlternatingWithCompleted}
     icon={mdiCheckCircle}
     classes={{
-      item: {
+      event: {
         start: 'border rounded-lg text-sm p-2 m-1',
         end: 'border rounded-lg text-sm p-2 m-1',
         icon: 'size-5',
@@ -183,18 +183,18 @@
   />
 </Preview>
 
-<h2>TimelineItem component with custom point</h2>
+<h2>TimelineEvent component with custom point</h2>
 
 <Preview>
   <Timeline>
     {#each appleHistory as item, i}
-      <TimelineItem icon={mdiCheckCircle} start={i % 2 === 0} end={i % 2 !== 0}>
+      <TimelineEvent icon={mdiCheckCircle} start={i % 2 === 0} end={i % 2 !== 0}>
         <div class="font-semibold px-2">{item.end}</div>
 
         <div slot="point" class="border rounded-full px-2 text-xs">
           {item.start}
         </div>
-      </TimelineItem>
+      </TimelineEvent>
     {/each}
   </Timeline>
 </Preview>
@@ -207,7 +207,7 @@
     icon={mdiCheckCircle}
     vertical
     classes={{
-      item: {
+      event: {
         start: 'text-sm font-semibold',
         end: 'border rounded-lg text-sm p-2 m-1',
         icon: 'size-5',
@@ -224,7 +224,7 @@
     icon={mdiCheckCircle}
     vertical
     classes={{
-      item: {
+      event: {
         start: 'border rounded-lg text-sm p-2 m-1',
         end: 'border rounded-lg text-sm p-2 m-1',
         icon: 'size-5',
@@ -233,15 +233,15 @@
   />
 </Preview>
 
-<h2>Completed items</h2>
+<h2>Completed events</h2>
 
 <Preview>
   <Timeline
     data={appleHistoryAlternatingWithCompleted}
     icon={mdiCheckCircle}
     vertical
     classes={{
-      item: {
+      event: {
         start: 'border rounded-lg text-sm p-2 m-1',
         end: 'border rounded-lg text-sm p-2 m-1',
         icon: 'size-5',
@@ -258,7 +258,7 @@
     icon={mdiCheckCircle}
     vertical
     classes={{
-      item: {
+      event: {
         root: 'grid-cols-[40px,auto,1fr]',
         start: 'text-sm font-semibold mr-1',
         end: 'border rounded-lg text-sm p-2 m-1',
@@ -268,12 +268,12 @@
   />
 </Preview>
 
-<h2>Vertical / Alternating (using TimelineItem component)</h2>
+<h2>Vertical / Alternating (using TimelineEvent component)</h2>
 
 <Preview>
   <Timeline vertical snapPoint>
     {#each appleHistoryDetails as item, i}
-      <TimelineItem
+      <TimelineEvent
         icon={mdiCheckCircle}
         start={i % 2 === 0}
         end={i % 2 !== 0}
@@ -289,17 +289,17 @@
             {item.description}
           </div>
         </div>
-      </TimelineItem>
+      </TimelineEvent>
     {/each}
   </Timeline>
 </Preview>
 
-<h2>Vertical / Compact (using TimelineItem component)</h2>
+<h2>Vertical / Compact (using TimelineEvent component)</h2>
 
 <Preview>
   <Timeline vertical compact snapPoint>
     {#each appleHistoryDetails as item, i}
-      <TimelineItem
+      <TimelineEvent
         icon={mdiCheckCircle}
         start={i % 2 === 0}
         end={i % 2 !== 0}
@@ -315,7 +315,7 @@
             {item.description}
           </div>
         </div>
-      </TimelineItem>
+      </TimelineEvent>
     {/each}
   </Timeline>
 </Preview>
@@ -325,7 +325,7 @@
 <Preview>
   <Timeline vertical compact snapPoint>
     {#each customData as item, i}
-      <TimelineItem
+      <TimelineEvent
         icon={{
           'in-progress': mdiTruck,
           completed: mdiCheck,
@@ -357,7 +357,7 @@
             {$format(item.date, PeriodType.DayTime)}
           </div>
         </div>
-      </TimelineItem>
+      </TimelineEvent>
     {/each}
   </Timeline>
 </Preview>