# Vue Simple Timeline

#### 🗃 A simple vue timeline. Perfect for displaying a sequence of events in chronological order.

A light weight vue plugin built groundup.

[![npm](https://img.shields.io/npm/v/@vuesimple/vs-timeline.svg)](https://www.npmjs.com/package/@vuesimple/vs-timeline)
[![npm](https://img.shields.io/npm/dt/@vuesimple/vs-timeline.svg)](https://img.shields.io/npm/dt/@vuesimple/vs-timeline.svg)
<br />

![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)
![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)
![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)
![forthebadge](https://forthebadge.com/images/badges/built-with-swag.svg)
![forthebadge](https://forthebadge.com/images/badges/check-it-out.svg)
![forthebadge](https://forthebadge.com/images/badges/60-percent-of-the-time-works-every-time.svg)

<br />

### 📺 Live Demo

Demo: [Link](https://vuesimple.netlify.app)

<br />

## Usage

```html
<template>
  <vs-timeline>
    <vs-timeline-item>
      <strong>Planted seed</strong>
      <div>Today 9:00 AM</div>
    </vs-timeline-item>
    <vs-timeline-item>
      <strong>Purchased seed</strong>
      <div>Feb 08, 9:05 AM</div>
    </vs-timeline-item>
  </vs-timeline>
</template>

<script>
  import { VsTimeline, VsTimelineItem } from '@vuesimple/vs-timeline';

  export default {
    components: {
      VsTimeline,
      VsTimelineItem,
    },
  };
</script>
```

<br />

## CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-timeline@<version>/dist/index.min.js"></script>
```

```javascript
// Main/Entry file
app.use(VsTimeline.plugin);
```

```html
<template>
  <vs-timeline>
    <vs-timeline-item>
      <strong>Event title</strong>
    </vs-timeline-item>
  </vs-timeline>
</template>
```

<br />

## VsTimeline Props

| Name   | Type   | Default | Options                           | Description                           |
| ------ | ------ | ------- | --------------------------------- | ------------------------------------- |
| layout | String | `left`  | `left`, `alternating`, `opposite` | Controls the layout of timeline items |

<br />

## VsTimelineItem Props

`VsTimelineItem` has no props. All content is provided via slots.

<br />

## VsTimelineItem Slots

| Name       | Description                                                                                   |
| ---------- | --------------------------------------------------------------------------------------------- |
| `default`  | Primary content for the item (title, description, etc.)                                       |
| `opposite` | Secondary content shown on the opposite side (used with `alternating` and `opposite` layouts) |
| `media`    | Replaces the default dot marker — use an icon, image, or avatar                               |

<br />

## CSS Variables

| Variable                    | Default   | Description                         |
| --------------------------- | --------- | ----------------------------------- |
| `--vs-timeline-dot-size`    | `10px`    | Diameter of the dot marker          |
| `--vs-timeline-dot-bg`      | `#ffffff` | Background color of the dot         |
| `--vs-timeline-dot-border`  | `#87929d` | Border color of the dot             |
| `--vs-timeline-line-color`  | `#d8dcde` | Color of the connecting line        |
| `--vs-timeline-content-gap` | `16px`    | Gap between separator and content   |
| `--vs-timeline-media-size`  | `20px`    | Width/height of the media slot area |

<br />

## Examples

**Default (left-aligned)**

```html
<vs-timeline>
  <vs-timeline-item>
    <strong>Planted seed</strong>
    <div>Today 9:00 AM</div>
  </vs-timeline-item>
  <vs-timeline-item>
    <strong>Purchased seed</strong>
    <div>Feb 08, 9:05 AM</div>
  </vs-timeline-item>
</vs-timeline>
```

**Alternating**

```html
<vs-timeline layout="alternating">
  <vs-timeline-item>
    <strong>Planted seed</strong>
    <template #opposite>Today 9:00 AM</template>
  </vs-timeline-item>
  <vs-timeline-item>
    <strong>Purchased seed</strong>
    <template #opposite>Feb 08, 9:05 AM</template>
  </vs-timeline-item>
</vs-timeline>
```

**Opposite content**

```html
<vs-timeline layout="opposite">
  <vs-timeline-item>
    <strong>Planted seed</strong>
    <template #opposite>Today 9:00 AM</template>
  </vs-timeline-item>
</vs-timeline>
```

**Custom media (icon)**

```html
<vs-timeline>
  <vs-timeline-item>
    <strong>Planted seed</strong>
    <template #media>
      <svg ...>...</svg>
    </template>
  </vs-timeline-item>
</vs-timeline>
```