### Full Working Example with Timeline Data

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

A complete example demonstrating the PrettyTimeline component with sample timeline data. This serves as a practical guide for implementation.

```vue
<script setup lang="ts">
import PrettyTimeline from 'pretty-timeline'
import type { ITimeline } from 'pretty-timeline'

const timelineData: ITimeline[] = [
  {
    year: '2023',
    list: [
      {
        title: 'Event 1',
        content: 'Description for event 1',
        icon: 'i-mdi-star'
      },
      {
        title: 'Event 2',
        content: 'Description for event 2',
        type: 'success',
        time: '10:00 AM'
      }
    ]
  },
  {
    year: '2024',
    list: [
      {
        title: 'Event 3',
        content: 'Description for event 3',
        type: 'danger',
        link: {
          url: '#',
          target: '_blank'
        }
      }
    ]
  }
]
</script>

<template>
  <PrettyTimeline :timeline-data="timelineData" />
</template>
```

--------------------------------

### Installation

Source: https://github.com/guxuerui/pretty-timeline/blob/main/README.md

Instructions on how to install the pretty-timeline component using pnpm or npm.

```APIDOC
## Installation

```sh
# Install with pnpm
$ pnpm i pretty-timeline -S
# or npm
$ npm i pretty-timeline -S
```
```

--------------------------------

### Install Pretty Timeline

Source: https://github.com/guxuerui/pretty-timeline/blob/main/README.md

Install the pretty-timeline package using pnpm or npm.

```sh
# Install with pnpm
$ pnpm i pretty-timeline -S
# or npm
$ npm i pretty-timeline -S
```

--------------------------------

### NPM Installation

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Instructions for installing the pretty-timeline component library using NPM. Ensures the library is available for use in your project.

```bash
npm install pretty-timeline
# or
yarn add pretty-timeline
# or
pnpm add pretty-timeline
```

--------------------------------

### Install and Run Pretty Timeline Locally

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/installation-and-usage.md

Clone the repository, install dependencies using pnpm, and run the development server. Includes commands for building, testing, type checking, and linting.

```bash
git clone https://github.com/guxuerui/pretty-timeline.git
cd pretty-timeline

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build library
pnpm build

# Run tests
pnpm test

# Type checking
pnpm typecheck

# Linting
pnpm lint
```

--------------------------------

### Usage Example

Source: https://github.com/guxuerui/pretty-timeline/blob/main/README.md

An example of how to use the PrettyTimeline component in a Vue template, including data structure and props.

```APIDOC
## Usage Example

### Data Structure

```ts
import type { ITimeline } from 'pretty-timeline'

const timelineArr: ITimeline[] = [
  {
    isCollapsed: false,
    year: '2022年',
    title: '光阴长河',
    list: [
      {
        date: '12月3日',
        iconColor: 'green',
        chipColor: '#26C1C9',
        chipText: 'gxr chips',
        subTitleColor: '#ec6a13',
        subTitle: '新的一年开始了',
        imgUrl: '/imgs/street.jpeg',
        content: `
        春日忆李白<br/>
        白也诗无敌，飘然思不群。<br/>
        清新庾开府，俊逸鲍参军。<br/>
        渭北春天树，江东日暮云。<br/>
        何时一尊酒，重与细论文。
        <br/>
        <a text="orange" border-b="1 dashed orange" href="https://github.com/guxuerui" target="_blank">我的Github</a>
        `,
      },
      // ... more list items
    ],
  },
  // ... more year items
]
```

### Template Usage

```html
<pretty-timeline base-color="#09afaf" :timeline-data="timelineArr" />
```
```

--------------------------------

### Install Pretty Timeline with npm

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/installation-and-usage.md

Use npm to install the pretty-timeline package. This is the standard way to add Node.js packages to your project.

```bash
npm install pretty-timeline
```

--------------------------------

### Install Pretty Timeline with pnpm

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/installation-and-usage.md

Use pnpm to install the pretty-timeline package. pnpm is a fast, disk-space-efficient package manager.

```bash
pnpm install pretty-timeline
```

--------------------------------

### Install Pretty Timeline with yarn

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/installation-and-usage.md

Use yarn to install the pretty-timeline package. yarn is another popular package manager for JavaScript.

```bash
yarn add pretty-timeline
```

--------------------------------

### Install Pretty Timeline as a Plugin

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Use the plugin installer to integrate Pretty Timeline into your Vue application. This is an alternative to direct component import.

```typescript
import PrettyTimeline from 'pretty-timeline'
app.use(PrettyTimeline)
```

--------------------------------

### Animation and Transitions Example

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Illustrates the use of animations and transitions for elements like collapsing/expanding sections and rotating triangles. Enhances user experience with visual feedback.

```css
.timeline-item {
  transition: all 0.3s ease-in-out;
}

.timeline-item.expanded {
  /* styles for expanded state */
}

.triangle-icon {
  transition: transform 0.3s ease;
}

.triangle-icon.rotated {
  transform: rotate(180deg);
}
```

--------------------------------

### Full Vue.js Usage Example

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/installation-and-usage.md

Integrate the Pretty Timeline component into a Vue 3 application. This example demonstrates dynamic data binding and color customization.

```typescript
// components/TimelineExample.vue
<script setup lang="ts">
import { ref } from 'vue'
import { PrettyTimeline } from 'pretty-timeline'
import type { ITimeline } from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

const timelineData = ref<ITimeline[]>([
  {
    isCollapsed: false,
    year: '2023年',
    title: 'Major Milestones',
    list: [
      {
        date: '12月3日',
        iconColor: '#26C1C9',
        chipColor: '#26C1C9',
        chipText: 'Featured',
        subTitleColor: '#ec6a13',
        subTitle: 'New Feature Launch',
        imgUrl: '/images/feature-screenshot.jpg',
        content: `
          <h3>Timeline Component Released</h3>
          <p>Introduced the new pretty-timeline component for Vue 3.</p>
          <a href="https://github.com/guxuerui/pretty-timeline">
            View on GitHub
          </a>
        `
      },
      {
        date: '11月15日',
        iconColor: '#ff6b6b',
        subTitle: 'Bug Fix Release',
        content: '<p>Fixed several issues with mobile responsiveness.</p>'
      }
    ]
  },
  {
    isCollapsed: false,
    year: '2022年',
    title: 'Earlier Events',
    list: [
      {
        date: '6月1日',
        subTitle: 'Project Started',
        content: '<p>Initial development began.</p>'
      }
    ]
  }
])

const baseColor = ref('#58a6fb')

const handleColorChange = (newColor: string) => {
  baseColor.value = newColor
}
</script>

<template>
  <div class="timeline-page">
    <h1>Timeline</h1>
    <div class="controls">
      <label>
        Base Color:
        <input 
          type="color" 
          :value="baseColor"
          @input="e => handleColorChange(e.target.value)"
        />
      </label>
    </div>
    <PrettyTimeline :base-color="baseColor" :timeline-data="timelineData" />
  </div>
</template>

<style scoped>
.timeline-page {
  padding: 2rem;
}

.controls {
  margin-bottom: 2rem;
}

label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

input[type="color"] {
  width: 50px;
  height: 40px;
  border: none;
  cursor: pointer;
}
</style>
```

--------------------------------

### IList Usage Example

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/types.md

Demonstrates how to create an IList object for a timeline entry. Shows usage of various optional and required fields.

```typescript
import type { IList } from 'pretty-timeline'

const timelineEntry: IList = {
  date: '3月15日',
  iconColor: '#00ff00',
  chipColor: '#0099ff',
  chipText: 'Featured',
  subTitleColor: '#ff6600',
  subTitle: 'Important milestone',
  imgUrl: '/milestone-photo.jpg',
  content: '<p>This is a significant event in our timeline.</p><p>It supports <strong>HTML</strong> formatting.</p>'
}
```

--------------------------------

### PrettyTimeline Local Component Registration

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/api-reference-prettytimeline.md

Example of registering the PrettyTimeline component locally within a Vue application's setup function. Ensure 'pretty-timeline/dist/style.css' is imported for styling.

```typescript
import { ref } from 'vue'
import { PrettyTimeline } from 'pretty-timeline'
import type { ITimeline } from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

// Method 1: Local component registration
export default {
  components: {
    PrettyTimeline
  },
  setup() {
    const timelineData = ref<ITimeline[]>([
      {
        isCollapsed: false,
        year: '2023年',
        title: 'Major Events',
        list: [
          {
            date: '6月27日',
            iconColor: '#ec6a4f',
            iconRight: '8%',
            iconTop: '0%',
            chipColor: '#26C1C9',
            chipText: 'Release',
            subTitleColor: '#ec6a13',
            subTitle: 'Version 1.0 Released',
            imgUrl: '/images/photo.jpg',
            content: 'Initial release of the pretty-timeline component with full Vue 3 support.'
          }
        ]
      }
    ])

    return { timelineData }
  }
}
```

```vue
<template>
  <PrettyTimeline base-color="#09afaf" :timeline-data="timelineData" />
</template>
```

--------------------------------

### CSS Customization Example

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Illustrates how to customize the appearance of the PrettyTimeline component using CSS variables. Allows for theme adaptation and branding.

```css
.pretty-timeline {
  /* Example: Change primary color */
  --color-primary: #ff0000;
  /* Example: Change line thickness */
  --timeline-line-width: 3px;
}

```

--------------------------------

### Using isSafari() in Vue Setup

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/composables.md

Import and use the isSafari() composable within a Vue component's setup function to conditionally apply logic for Safari browsers.

```typescript
import { isSafari } from 'pretty-timeline'

export default {
  setup() {
    const usingSafari = isSafari()

    if (usingSafari) {
      console.log('Applying Safari-specific workarounds')
    }

    return { usingSafari }
  }
}
```

--------------------------------

### isMobile() Composable Usage

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/composables.md

Demonstrates how to import and use the isMobile composable in a Vue 3 setup function to get a reactive boolean indicating if the client is on a mobile device.

```typescript
import { isMobile } from 'pretty-timeline'

export default {
  setup() {
    const isMobileDevice = isMobile()

    return {
      isMobileDevice
    }
  }
}
```

```html
<template>
  <div v-if="isMobileDevice">
    Mobile version
  </div>
  <div v-else>
    Desktop version
  </div>
</template>
```

--------------------------------

### PrettyTimeline Component Exports

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/api-reference-prettytimeline.md

Shows how to import the default plugin installer and the named PrettyTimeline component from the 'pretty-timeline' library.

```typescript
// Default export - plugin installer
export default {
  install: (app: any): void => {
    app.component('PrettyTimeline', PrettyTimeline)
  }
}

// Named export - the component itself
export { PrettyTimeline }
```

--------------------------------

### ITimeline Usage Example

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/types.md

Example of how to structure data conforming to the ITimeline interface for use with the PrettyTimeline component. Ensure IList is also defined.

```typescript
import type { ITimeline } from 'pretty-timeline'

const timeline: ITimeline = {
  isCollapsed: false,
  year: '2024年',
  title: 'Major Releases',
  list: [
    {
      date: '1月15日',
      subTitle: 'v2.0 Beta',
      content: 'Beta version released for testing.'
    },
    {
      date: '2月28日',
      subTitle: 'v2.0 Stable',
      content: 'Stable release with new features.'
    }
  ]
}
```

--------------------------------

### Timeline Data Structure and Usage Example

Source: https://github.com/guxuerui/pretty-timeline/blob/main/README.md

Defines the structure for timeline data and demonstrates how to use it with the PrettyTimeline component.

```ts
import image from '/imgs/street.jpeg'
import type { ITimeline } from '~/types' 

const timelineArr = ref<ITimeline[]>([
  {
    isCollapsed: false,
    year: '2022年',
    title: '光阴长河',
    list: [
      {
        date: '12月3日',
        iconColor: 'green',
        chipColor: '#26C1C9',
        chipText: 'gxr chips',
        subTitleColor: '#ec6a13',
        subTitle: '新的一年开始了',
        imgUrl: image,
        content: "
        春日忆李白<br/>
        白也诗无敌，飘然思不群。<br/>
        清新庾开府，俊逸鲍参军。<br/>
        渭北春天树，江东日暮云。<br/>
        何时一尊酒，重与细论文。
        <br/>
        <a text=\"orange\" border-b=\"1 dashed orange\" href=\"https://github.com/guxuerui\" target=\"_blank\">我的Github</a>
        ",
      },
      {
        date: '12月2日',
        iconColor: '#fa1',
        chipColor: '#26C',
        chipText: '此时此刻, 恰如彼时彼刻',
        subTitleColor: '#ec6a13',
        subTitle: '进入12月了',
        imgUrl: '',
        content: "
        菊<br/>
        罗隐〔唐代〕<br/>
        篱落岁云暮，数枝聊自芳。<br/>
        雪裁纤蕊密，金拆小苞香。<br/>
        千载白衣酒，一生青女霜。<br/>
        春丛莫轻薄，彼此有行藏。
        <br/>
        <a text=\"blue\" border-b=\"1 dashed blue\" href=\"https://github.com/guxuerui\" target=\"_blank\">我的Github</a>
        ",
      },
    ],
  },
  {
    isCollapsed: false,
    year: '2021年',
    title: '',
    list: [
      {
        date: '12月2日',
        chipText: '你好吗',
        subTitle: '去年今日',
        imgUrl: image,
        content: "
        秦淮杂诗·其八<br/>
        王士祯〔清代〕<br/>
        新歌细字写冰纨，小部君王带笑看。<br/>
        千载秦淮呜咽水，不应仍恨孔都官。
        ",
      },
    ],
  },
])
```

```html
<pretty-timeline base-color="#09afaf" :timeline-data="timelineArr" />
```

--------------------------------

### Composable Dependencies on @vueuse/core

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/composables.md

Demonstrates that composables like `useDark` and `isMobile` depend on the `@vueuse/core` library. Ensure this dependency is installed.

```typescript
// dark.ts
import { useDark, useToggle } from '@vueuse/core'

// isMobile.ts
import { resolveRef } from '@vueuse/core'
```

--------------------------------

### Importing Timeline Types

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/types.md

Demonstrates how to import the ITimeline and IList types from the 'pretty-timeline' library for use in your TypeScript projects. It also shows an example of defining timeline data structures.

```typescript
// Import from the main entry point
import type { IList, ITimeline } from 'pretty-timeline'

// Define your data structures
const myTimelines: ITimeline[] = [
  {
    isCollapsed: false,
    year: '2023年',
    title: 'Events',
    list: [
      {
        date: '日期',
        subTitle: '标题',
        content: 'Content here'
      }
    ]
  }
]
```

--------------------------------

### Persist development mode using localStorage

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/composables.md

Implement custom functions to persist the development mode state to `localStorage` and load it on component mount. This example shows how to save the state when toggled and restore it when the application loads.

```typescript
import { isDev, toggleDev } from 'pretty-timeline'

// Save to localStorage on toggle
const persistedToggleDev = (force?: boolean) => {
  const result = toggleDev(force)
  localStorage.setItem('dev_mode', String(result))
  return result
}

// Load from localStorage on setup
onMounted(() => {
  const saved = localStorage.getItem('dev_mode')
  if (saved === 'true') {
    toggleDev(true)
  }
})
```

--------------------------------

### Import and use isDev in Vue setup

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/composables.md

Import the `isDev` ref and expose it to the template for conditional rendering or displaying its state.

```typescript
import { isDev } from 'pretty-timeline'

export default {
  setup() {
    return { isDev }
  }
}
```

--------------------------------

### Toggle development mode and log new state

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/composables.md

Import `isDev` and `toggleDev` to create functions that toggle the development mode and log the resulting state. This example shows how to use `toggleDev()` without arguments to flip the state.

```typescript
import { isDev, toggleDev } from 'pretty-timeline'

export default {
  setup() {
    const handleToggle = () => {
      const newState = toggleDev()
      console.log(`Dev mode is now: ${newState}`)
    }

    const enableDev = () => {
      toggleDev(true)
    }

    return { isDev, handleToggle, enableDev }
  }
}
```

--------------------------------

### Local Component Registration

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Example of registering the PrettyTimeline component locally within a Vue application. This is the standard way to use components in Vue 3.

```vue
<script setup lang="ts">
import PrettyTimeline from 'pretty-timeline'
import type { ITimeline } from 'pretty-timeline'

const timelineData: ITimeline[] = [
  {
    year: '2023',
    list: [
      {
        title: 'Event 1',
        content: 'Description for event 1',
        icon: 'i-mdi-star'
      }
    ]
  }
]
</script>

<template>
  <PrettyTimeline :timeline-data="timelineData" />
</template>
```

--------------------------------

### Build Command

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/installation-and-usage.md

Execute this command to build the library for production. It generates optimized builds in the `dist/` directory.

```bash
pnpm build
```

--------------------------------

### Demo Application Entry Point

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/project-structure.md

Bootstraps the demo application using Vue Router and VueUse Head. Routes are generated by vite-plugin-pages.

```typescript
import { createHead } from '@vueuse/head'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import routes from 'virtual:generated-pages'

const app = createApp(App)
const head = createHead()
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

app.use(router)
app.use(head)
app.mount('#app')
```

--------------------------------

### Importing with Path Aliasing

Source: https://github.com/guxuerui/pretty-timeline/blob/main/src/pages/README.md

Shows how to use the '~/' alias to simplify imports, pointing to the './src/' directory.

```typescript
import { isDark } from '~/composables'
```

--------------------------------

### Importing with Relative Paths

Source: https://github.com/guxuerui/pretty-timeline/blob/main/src/pages/README.md

Demonstrates the use of relative paths for imports, which can become cumbersome.

```typescript
import { isDark } from '../../../../composables'
```

--------------------------------

### Initialize Theme Based on User Preference

Source: https://github.com/guxuerui/pretty-timeline/blob/main/index.html

This snippet checks for user preference for dark mode using `window.matchMedia` and `localStorage`. It applies the 'dark' class to the document's root element if the preference is set to dark or if the system prefers dark and no explicit light preference is set. This code should be run on page load.

```javascript
(function () {
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const setting = localStorage.getItem('color-schema') || 'auto';
    if (setting === 'dark' || (prefersDark && setting !== 'light')) {
        document.documentElement.classList.toggle('dark', true);
    }
})();
```

--------------------------------

### Importing the Component

Source: https://github.com/guxuerui/pretty-timeline/blob/main/README.md

Demonstrates how to import the PrettyTimeline component for local or global use in a Vue 3 application.

```APIDOC
## Importing the Component

### Local Import

```ts
// In a .vue file
import { PrettyTimeline } from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'
```

### Global Import

```ts
// In main.ts
import PrettyTimeline from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

// Register as a global component
app.use(PrettyTimeline)
// or
app.component('PrettyTimeline', PrettyTimeline)
```
```

--------------------------------

### Import Key Exports

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/00-START-HERE.md

Import the main component and necessary types for using Pretty Timeline.

```typescript
import { PrettyTimeline } from 'pretty-timeline'
import type { IList, ITimeline } from 'pretty-timeline'
import { isMobile, isDark, toggleDark } from 'pretty-timeline'
```

--------------------------------

### Import Pretty Timeline Globally

Source: https://github.com/guxuerui/pretty-timeline/blob/main/README.md

Import and register the component globally in your main application file.

```ts
// 在main.ts中
import PrettyTimeline from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

// 注册为全局组件使用
app.use(PrettyTimeline)
// or
app.component('PrettyTimeline', PrettyTimeline)
```

--------------------------------

### Project Dependency Tree

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/project-structure.md

Lists the production and development dependencies for the pretty-timeline project, including version information.

```text
pretty-timeline/
├── vue ^3.2.45
├── vue-router ^4.1.6
├── @vueuse/core v9.1.0
│   └── @vueuse/shared
├── @vueuse/head v0.7.9
├── axios ^1.2.0
├── canvas-confetti ^1.6.0
├── markdown-it-prism ^2.3.0
│   └── prismjs ^1.29.0
└── vite-plugin-vue-markdown 0.22.1

Dev Dependencies:
├── @vitejs/plugin-vue 3.2.0
├── vite ^3.2.7
├── vitest ^0.25.3
├── @vue/test-utils ^2.2.5
├── typescript ^4.9.3
├── unocss 0.47.5
│   └── @unocss/vite ^0.47.5
├── unplugin-auto-import ^0.12.0
├── unplugin-vue-components ^0.22.11
├── vite-plugin-pages ^0.27.1
└── vue-tsc ^1.0.11
```

--------------------------------

### PrettyTimeline Component API

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Reference for the PrettyTimeline component, the primary exported Vue component. Covers its props, internal methods, and setup.

```APIDOC
## PrettyTimeline Component

### Description
The main Vue component for rendering a timeline.

### Props
- **baseColor** (string) - Optional - The base color for the timeline.
- **timelineData** (Array<Object>) - Required - The data array to render the timeline.

### Internal Methods
- **collapseLine(index)**: Collapses or expands a specific timeline item.
- **iconStyle(item)**: Determines the style for the icon of a timeline item.
```

--------------------------------

### Pretty Timeline Package Exports

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/installation-and-usage.md

This JSON snippet from `package.json` shows the module entry points for the pretty-timeline library, including ES module, UMD module, and stylesheet.

```json
{
  "exports": {
    ".": {
      "require": "./dist/pretty-timeline.umd.ts",
      "import": "./dist/pretty-timeline.es.ts"
    },
    "./dist/style.css": "./dist/style.css"
  }
}
```

--------------------------------

### PrettyTimeline Component Props

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Reference for the PrettyTimeline component's props, including baseColor and timelineData. Covers component setup, internal methods, computed properties, and lifecycle hooks.

```typescript
interface BaseColor {
  "--color-primary": string,
  "--color-secondary": string,
  "--color-tertiary": string,
  "--color-quaternary": string,
  "--color-quinary": string,
  "--color-senary": string,
  "--color-septenary": string,
  "--color-octonary": string,
  "--color-nonary": string,
  "--color-denary": string,
}

interface Props {
  baseColor?: BaseColor,
  timelineData: ITimeline[]
}

const props = defineProps<Props>()
```

--------------------------------

### Import Pretty Timeline Locally

Source: https://github.com/guxuerui/pretty-timeline/blob/main/README.md

Import the component and its CSS for local use within a Vue file.

```ts
// 在.vue文件中
import { PrettyTimeline } from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'
```

--------------------------------

### Import Pretty Timeline from Main Entry Point

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Import the main Pretty Timeline component and its types from the primary export. Also imports utility functions for environment checks and toggles.

```typescript
import { PrettyTimeline } from 'pretty-timeline'
import type { IList, ITimeline } from 'pretty-timeline'
import { isMobile, isSafari, isDark, toggleDark, isDev, toggleDev } from 'pretty-timeline'
```

--------------------------------

### Library Entry Point Export

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/project-structure.md

Defines the library's public API for both global and local registration. Configured in vite.config.ts for build output.

```typescript
import PrettyTimeline from './PrettyTimeline.vue'
import '@unocss/reset/tailwind.css'
import 'uno.css'

export default {
  install: (app: any): void => {
    app.component('PrettyTimeline', PrettyTimeline)
  }
}

export { PrettyTimeline }
```

--------------------------------

### Pretty Timeline Project Directory Layout

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/project-structure.md

This is the standard directory layout for the pretty-timeline project. It includes source code, tests, build output, static assets, and configuration files.

```tree
pretty-timeline/
├── src/                    # Source code
│   ├── components/         # Vue components
│   │   ├── PrettyTimeline.vue    # Main timeline component (exported)
│   │   ├── index.ts              # Component export and plugin installer
│   │   ├── Header.vue            # Demo header component
│   │   ├── Footer.vue            # Demo footer component
│   │   ├── Counter.vue           # Demo counter component
│   │   └── README.md             # Component documentation
│   ├── composables/        # Vue 3 composition utilities
│   │   ├── index.ts              # Composables re-export
│   │   ├── dark.ts               # Dark mode state (isDark, toggleDark)
│   │   ├── storage.ts            # Dev mode toggle (isDev, toggleDev)
│   │   ├── isMobile.ts           # Mobile device detection
│   │   └── isSafari.ts           # Safari browser detection
│   ├── pages/              # Page components (file-based routing)
│   │   ├── index.vue             # Home page
│   │   ├── [name].vue            # Dynamic route
│   │   ├── [...all].vue          # Catch-all route
│   │   ├── example/
│   │   │   └── test.vue          # Example page
│   │   └── example/
│   │       └── test1.md          # Markdown page (converted to Vue)
│   ├── styles/             # Global CSS styles
│   │   └── main.css              # Main stylesheet
│   ├── types.ts            # TypeScript type definitions (IList, ITimeline)
│   ├── App.vue             # Root application component
│   └── main.ts             # Application entry point
├── test/                   # Test files
│   ├── basic.test.ts       # Basic unit tests
│   └── component.test.ts   # Component tests
├── dist/                   # Build output (generated)
│   ├── pretty-timeline.es.ts     # ES module build
│   ├── pretty-timeline.umd.ts    # UMD build
│   └── style.css                 # Compiled styles
├── public/                 # Static assets
├── .vscode/                # VS Code configuration
├── auto-imports.d.ts       # Auto-import type definitions (generated)
├── components.d.ts         # Component auto-registration (generated)
├── html.d.ts               # HTML type extensions (generated)
├── shims.d.ts              # TypeScript shims and declarations
├── vite.config.ts          # Vite build configuration
├── unocss.config.ts        # UnoCSS configuration
├── tsconfig.json           # TypeScript configuration
├── package.json            # Dependencies and scripts
├── pnpm-lock.yaml          # Dependency lock file
├── README.md               # Project README
└── LICENSE                 # MIT License

```

--------------------------------

### CSS Transitions with Vendor Prefixes

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/rendering-and-styling.md

This CSS snippet demonstrates the use of vendor prefixes for transitions to ensure compatibility with older browsers. It includes prefixes for WebKit, Mozilla, Microsoft, and Opera browsers.

```css
.list {
  -webkit-transition: height 1s cubic-bezier(...), opacity 1s;
  -moz-transition: ...;
  -ms-transition: ...;
  -o-transition: ...;
  transition: height 1s cubic-bezier(...), opacity 1s;
}
```

--------------------------------

### Import and Use Pretty Timeline Locally

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Import the Pretty Timeline component and its types for local usage. Ensure the CSS is imported.

```typescript
import { PrettyTimeline } from 'pretty-timeline'
import type { ITimeline } from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

const timelineData: ITimeline[] = [ /* ... */ ]
```

--------------------------------

### Local Component Registration

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/api-reference-prettytimeline.md

Demonstrates how to import and register the PrettyTimeline component within a Vue.js application for local use.

```APIDOC
## Local Component Registration

### Usage Example

```typescript
import { ref } from 'vue'
import { PrettyTimeline } from 'pretty-timeline'
import type { ITimeline } from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

// Method 1: Local component registration
export default {
  components: {
    PrettyTimeline
  },
  setup() {
    const timelineData = ref<ITimeline[]>([
      {
        isCollapsed: false,
        year: '2023年',
        title: 'Major Events',
        list: [
          {
            date: '6月27日',
            iconColor: '#ec6a4f',
            iconRight: '8%',
            iconTop: '0%',
            chipColor: '#26C1C9',
            chipText: 'Release',
            subTitleColor: '#ec6a13',
            subTitle: 'Version 1.0 Released',
            imgUrl: '/images/photo.jpg',
            content: 'Initial release of the pretty-timeline component with full Vue 3 support.'
          }
        ]
      }
    ])

    return { timelineData }
  }
}
```

```vue
<template>
  <PrettyTimeline base-color="#09afaf" :timeline-data="timelineData" />
</template>
```
```

--------------------------------

### Vite Build Configuration

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/project-structure.md

Configures the Vite build process, including path aliases, plugins, and library output settings. Externalizes Vue for UMD builds.

```typescript
export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  plugins: [
    Vue({ reactivityTransform: true }),
    Markdown({ ... }),
    Pages({ pagesDir: 'src/pages', extensions: ['vue', 'md'] }),
    AutoImport({ dirs: ['./src/composables'], ... }),
    Components({ ... }),
    Unocss(),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/components/index.ts'),
      name: 'pretty-timeline',
      fileName: format => `pretty-timeline.${format}.ts`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        exports: 'named',
        globals: { vue: 'Vue' },
      },
    },
  },
})
```

--------------------------------

### Import PrettyTimeline Component and Types

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/README.md

Import the main PrettyTimeline component and the ITimeline and IList types for defining timeline data structures.

```typescript
import { PrettyTimeline } from 'pretty-timeline'
import type { IList, ITimeline } from 'pretty-timeline'
```

--------------------------------

### Module Graph

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/DOCUMENTATION_SUMMARY.md

Illustrates the module dependency chain for the PrettyTimeline component and its exported types.

```typescript
src/types.ts (IList, ITimeline)
  ↓
src/components/PrettyTimeline.vue (uses types)
  ↓
src/components/index.ts (exports PrettyTimeline + plugin)
  ↓
dist/pretty-timeline.es.ts (ES module build)
dist/pretty-timeline.umd.ts (UMD build)
```

--------------------------------

### SVG Icon Implementation

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Details on how SVG icons are implemented within the timeline items. Shows the structure for displaying custom or library-provided icons.

```html
<div class="timeline-item-icon">
  <span :class="item.icon"></span> <!-- Example using icon font classes -->
  <!-- Or direct SVG rendering -->
  <svg v-if="item.custom" ...>
    <!-- SVG path data -->
  </svg>
</div>
```

--------------------------------

### PrettyTimeline Global Plugin Registration

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/api-reference-prettytimeline.md

Demonstrates how to register the PrettyTimeline component globally using `app.use()` in your main Vue application entry point. Styles are imported globally.

```typescript
// In main.ts
import { createApp } from 'vue'
import PrettyTimeline from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

const app = createApp(App)
app.use(PrettyTimeline)
app.mount('#app')

// Now use in any component without explicit import
```

```vue
<!-- In any component -->
<template>
  <pretty-timeline :timeline-data="myTimelineData" />
</template>
```

--------------------------------

### Import and use isDark Ref

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/composables.md

Import the `isDark` ref from 'pretty-timeline' to access the current dark mode state. This ref is reactive and updates automatically.

```typescript
import { isDark } from 'pretty-timeline'

export default {
  setup() {
    return { isDark }
  }
}
```

```html
<template>
  <div :class="{ dark: isDark }">
    <p v-if="isDark">Dark mode is enabled</p>
    <p v-else>Light mode is enabled</p>
  </div>
</template>
```

--------------------------------

### Global Plugin Registration

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/api-reference-prettytimeline.md

Shows how to register PrettyTimeline as a global plugin in your Vue application's main entry file.

```APIDOC
## Global Plugin Registration

### In main.ts

```typescript
import { createApp } from 'vue'
import PrettyTimeline from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

const app = createApp(App)
app.use(PrettyTimeline)
app.mount('#app')

// Now use in any component without explicit import
```

### In any component

```vue
<template>
  <pretty-timeline :timeline-data="myTimelineData" />
</template>
```
```

--------------------------------

### CSS for Triangle Icon

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/rendering-and-styling.md

Creates a triangle shape using CSS borders. It dynamically binds its color to a component's `baseColor` prop and includes a transition for smooth rotation.

```css
.triangle {
  display: inline-block;
  height: 0;
  width: 0;
  border-width: 6px;
  border-style: solid;
  border-color: v-bind('baseColor') transparent transparent transparent;
  transform-origin: 6px 3px;
  transition: 0.5s;
}

```

--------------------------------

### Global Plugin Registration

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Demonstrates how to register the PrettyTimeline component globally as a plugin in your Vue application. This makes the component available in all components without explicit import.

```typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import PrettyTimeline from 'pretty-timeline'

const app = createApp(App)

app.use(PrettyTimeline)

app.mount('#app')
```

--------------------------------

### CSS Transition for Collapse/Expand Animation

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/rendering-and-styling.md

Applies a CSS transition to the 'height' and 'opacity' properties over 1 second with a specific cubic-bezier easing function. This is used to animate the collapse and expand of elements.

```css
.list {
  transition: height 1s cubic-bezier(0.025, 0.025, 0.000, 1.115), opacity 1s;
}
```

--------------------------------

### Utility Functions

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/00-START-HERE.md

Provides utility functions for detecting mobile devices, checking browser specifics like Safari, managing dark mode, and toggling development mode.

```typescript
isMobile()           // Returns Ref<boolean> — mobile device detection
isSafari()           // Returns boolean — Safari browser check
isDark               // Ref<boolean> — dark mode state
toggleDark(force?)   // Function — toggle or force dark mode
isDev                // Ref<boolean> — dev mode toggle (not persisted)
toggleDev(force?)    // Function — toggle or force dev mode
```

--------------------------------

### Securely Render Timeline Content with DOMPurify

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/installation-and-usage.md

Demonstrates how to prevent cross-site scripting (XSS) by sanitizing user-provided HTML content before rendering it in the timeline. Use DOMPurify for sanitization.

```typescript
// ⚠️ UNSAFE - user input without sanitization
const unsafeTimeline: ITimeline = {
  isCollapsed: false,
  year: '2023年',
  title: '',
  list: [
    {
      date: '1月1日',
      subTitle: 'Event',
      content: userInputContent // Could contain malicious HTML
    }
  ]
}

// ✅ SAFE - sanitized or trusted content
import DOMPurify from 'dompurify'

const safeTimeline: ITimeline = {
  isCollapsed: false,
  year: '2023年',
  title: '',
  list: [
    {
      date: '1月1日',
      subTitle: 'Event',
      content: DOMPurify.sanitize(userInputContent)
    }
  ]
}
```

--------------------------------

### Template Structure Breakdown

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Provides a breakdown of the PrettyTimeline component's template structure, including wrapper, timeline, sections, and items. Aids in understanding DOM layout and styling targets.

```html
<div class="pretty-timeline">
  <div class="timeline-wrapper">
    <div v-for="(section, index) in timelineData" :key="index" class="timeline-section">
      <div class="timeline-year">{{ section.year }}</div>
      <div v-for="(item, itemIndex) in section.list" :key="itemIndex" class="timeline-item">
        <!-- Item content -->
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### CSS for Chip Styling

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/rendering-and-styling.md

Styles a chip element with padding, margin, white text, and rounded corners. Use this for creating small, tag-like elements.

```css
.chip {
  padding: 0.25rem 1rem;
  margin-right: 1rem;
  color: #fff;
  border-radius: 1.5rem;
}

```

--------------------------------

### Props

Source: https://github.com/guxuerui/pretty-timeline/blob/main/README.md

Detailed list of properties (props) available for the PrettyTimeline component, their types, default values, and whether they are required.

```APIDOC
## Props

| Name | Description | Type | Default | Required |
|---|---|---|---|---|
| `baseColor` | Base color, applied to year/title/line colors | `string` | `'#58a6fb'` | false |
| `isCollapsed` | Whether to collapse | `boolean` | `false` | true |
| `year` | Year time | `string` | `''` | true |
| `title` | Title | `string` | `''` | true |
| `date` | Month time | `string` | `''` | true |
| `iconColor` | Ring color | `string` | `'#ec6a4f'` | false |
| `iconRight` | Ring positioning right offset | `string` | `'8%'` | false |
| `iconTop` | Ring positioning top offset | `string` | `'0%'` | false |
| `chipColor` | Chip color | `string` | `'#26c1c9'` | false |
| `chipText` | Chip text | `string` | `''` | false |
| `subTitleColor` | Subtitle color | `string` | `'#ec6a13'` | false |
| `subTitle` | Subtitle | `string` | `''` | true |
| `imgUrl` | Image link | `string` | `''` | false |
| `content` | Main content | `string` | `''` | true |

### Type Definitions

```ts
export interface IList {
  date: string
  iconColor: string
  iconRight?: string
  iconTop?: string
  chipColor?: string
  chipText?: string
  subTitleColor: string
  subTitle: string
  imgUrl?: string
  content: string
}

export interface ITimeline {
  isCollapsed: boolean
  year: string
  title: string
  list: IList[]
}

interface IPrettyTimeline {
  baseColor?: string
  timelineData: ITimeline[]
}
```
```

--------------------------------

### Scoped Styles for Component Wrapper

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/rendering-and-styling.md

Applies basic styling to the component's wrapper element. Use this for general layout and minimum height.

```vue
<style scoped>
  .wrapper {
    width: 100%;
    min-height: 64rem;
  }

```

--------------------------------

### isSafari()

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/composables.md

Synchronously detects whether the browser is Safari (and not Chrome/Chromium variants) by testing the `navigator.userAgent` string.

```APIDOC
## isSafari()

### Description
Synchronously detects whether the browser is Safari (and not Chrome/Chromium variants) by testing the `navigator.userAgent` string.

### Method
```typescript
export function isSafari(): boolean
```

### Parameters
None.

### Return Type
- **Type:** `boolean`
- **Value:** `true` if Safari detected (and Chrome not present); `false` otherwise

### Behavior
Performs two regex tests and returns the logical AND:

1. **Positive test:** `/Safari/.test(navigator.userAgent)` — detects Safari user agent string
2. **Negative test:** `!/Chrome/.test(navigator.userAgent)` — excludes Chrome (which contains "Safari" in UA but is not Safari)

**Regex Pattern (combined):**
```typescript
/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
```

### Usage Example

```typescript
import { isSafari } from 'pretty-timeline'

export default {
  setup() {
    const usingSafari = isSafari()

    if (usingSafari) {
      console.log('Applying Safari-specific workarounds')
    }

    return { usingSafari }
  }
}
```

### Limitations
- User-agent detection can be spoofed
- Not a reactive ref; returns a static boolean (value at call time)
- Does not work in SSR (server-side rendering) without guard checks
- Edge cases: Brave, Opera, and other Chromium variants may pass or fail

### Note on Reactivity
Unlike `isMobile()`, `isSafari()` is **not reactive**. It evaluates once at component setup and does not update if the browser changes. To make it reactive, wrap it:

```typescript
const isSafariRef = ref(isSafari())
```
```

--------------------------------

### Module Export Structure

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/composables.md

Shows how composables are re-exported from a central index file for convenient access.

```typescript
// src/composables/index.ts
export * from './dark'
export * from './storage'
export * from './isSafari'
export * from './isMobile'
```

--------------------------------

### Global Component Usage in Vue 3

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/installation-and-usage.md

After global registration, use the `<pretty-timeline>` component in any template. You still need to import `ITimeline` and `ref` for data definition in the script section.

```vue
<template>
  <div>
    <pretty-timeline :timeline-data="timelineData" />
  </div>
</template>

<script setup lang="ts">
import type { ITimeline } from 'pretty-timeline'
import { ref } from 'vue'

const timelineData = ref<ITimeline[]>([
  // ... timeline data
])
</script>
```

--------------------------------

### Composable Functions

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/INDEX.md

Utility composable functions and reactive state for detecting device characteristics and managing application state.

```APIDOC
## Composable Functions

### `isMobile()`

#### Description
Detects if the current device is a mobile device.

#### Signature
`() => Ref<boolean>`

#### Reactive
Yes

### `isSafari()`

#### Description
Detects if the current browser is Safari.

#### Signature
`() => boolean`

#### Reactive
No

### `isDark`

#### Description
Reactive boolean indicating the current dark mode state.

#### Signature
`Ref<boolean>`

#### Reactive
Yes

### `toggleDark()`

#### Description
Toggles the dark mode state.

#### Signature
`(force?: boolean) => boolean`

#### Reactive
—

### `isDev`

#### Description
Reactive boolean indicating if the application is in development mode. This state is not persisted.

#### Signature
`Ref<boolean>`

#### Reactive
Yes

### `toggleDev()`

#### Description
Toggles the development mode state.

#### Signature
`(force?: boolean) => boolean`

#### Reactive
—
```

--------------------------------

### CSS for List Animation

Source: https://github.com/guxuerui/pretty-timeline/blob/main/_autodocs/rendering-and-styling.md

Styles a list element to animate its height and opacity for smooth expand/collapse transitions. Uses a cubic-bezier timing function and hides overflow during animation.

```css
.list {
  margin: 10px 0;
  position: relative;
  overflow: hidden;
  transition: height 1s cubic-bezier(0.025, 0.025, 0.000, 1.115), opacity 1s;
}

```