{"_id":"@composy/timeline-vue","name":"@composy/timeline-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/timeline-vue","version":"0.0.1","description":"Timeline Vue3 adapter - components, composables, plugins","keywords":["ldesign","timeline","vue","vue3","component"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":false,"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./plugins/*":{"types":"./es/plugins/*.d.ts","import":"./es/plugins/*.js","require":"./lib/plugins/*.cjs","default":"./es/plugins/*.js"},"./lib/index.css":"./lib/index.css","./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","scripts":{"build":"ldesign-builder build && node --experimental-strip-types ../../../../scripts/index.ts workspace:ensure-package-outputs --cwd .. --target vue","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"tsc --noEmit","test":"ltesting run:unit","test:run":"ltesting run:unit","test:watch":"ltesting run:unit --watch","test:coverage":"ltesting run:unit --coverage","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard"},"dependencies":{"@composy/timeline-core":"^0.0.1"},"peerDependencies":{"@composy/engine-vue":"^0.0.1","vue":"^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/engine-vue":"^0.0.1","@composy/testing":"^0.0.1","eslint":"10.7.0","typescript":"5.9.3","vue":"3.5.39"},"peerDependenciesMeta":{"@composy/engine-vue":{"optional":true}},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/timeline-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-f2rHYbkMnTWtRQNyxuLgK56EDqP5/Ptaw3le1mfKXhUwFvy5K92Re4VlxSe7x3aV4vaiUABdAK61B+bc3k1YKA==","shasum":"7757f91100a0934ee361529f5a304df748875a00","tarball":"https://registry.npmjs.org/@composy/timeline-vue/-/timeline-vue-0.0.1.tgz","fileCount":86,"unpackedSize":339013,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAZNYGncai3kU77QI66coYYqkk4WgqAtlnqGvE6epPdvAiBw9AsdO06jzjMg4ceIMJDgw54vMcELFKLX887wlrFV/w=="}]},"_npmUser":{"name":"swimly","email":"979741120@qq.com"},"directories":{},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/timeline-vue_0.0.1_1786949627437_0.6943197712930878"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:53:47.249Z","0.0.1":"2026-08-17T06:53:47.595Z","modified":"2026-08-17T06:53:47.794Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Timeline Vue3 adapter - components, composables, plugins","keywords":["ldesign","timeline","vue","vue3","component"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/timeline-vue\n\n`@composy/timeline-vue` 是 `@composy/timeline-core` 的 Vue 3 适配层，提供 `<Timeline />` 组件、`useTimeline()` Composable、Vue 插件和 Engine 插件。\n\n## 安装\n\n```bash\npnpm add @composy/timeline-vue @composy/timeline-core vue\n```\n\n使用组件前建议加载 LDesign token：\n\n```ts\nimport '@composy/color-core/styles/color.css'\nimport '@composy/size-core/styles/size.css'\n```\n\n## 组件用法\n\n```vue\n<template>\n  <Timeline\n    :events=\"events\"\n    render-type=\"canvas\"\n    orientation=\"horizontal\"\n    theme=\"light\"\n    :width=\"900\"\n    :height=\"420\"\n    :zoom-enabled=\"true\"\n    :pan-enabled=\"true\"\n    @ready=\"handleReady\"\n    @error=\"handleError\"\n    @event-click=\"handleEventClick\"\n    @zoom-change=\"handleZoomChange\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Timeline, type ExtendedTimelineInstance, type TimelineEvent } from '@composy/timeline-vue'\n\nconst events = ref<TimelineEvent[]>([\n  { id: 'start', title: '开始', date: '2026-01-01', color: 'var(--ld-primary-600)' },\n  { id: 'done', title: '完成', timestamp: '2026-02-01', color: 'var(--ld-success-600)' },\n])\n\nfunction handleReady(instance: ExtendedTimelineInstance): void {\n  instance.fit()\n}\n\nfunction handleError(error: Error): void {\n  console.error(error)\n}\n\nfunction handleEventClick(event: TimelineEvent): void {\n  console.log(event.id)\n}\n\nfunction handleZoomChange(zoom: number): void {\n  console.log(zoom)\n}\n</script>\n```\n\n## Props 与事件\n\n| 名称 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `events` | `TimelineEvent[]` | `[]` | 时间轴事件 |\n| `orientation` | `'horizontal' \\| 'vertical'` | `'horizontal'` | 布局方向 |\n| `renderType` | `'canvas' \\| 'svg'` | `'canvas'` | 渲染方式 |\n| `width` | `number` | `800` | 画布宽度 |\n| `height` | `number` | `400` | 画布高度 |\n| `theme` | `string` | `'light'` | 主题名称 |\n| `zoomEnabled` | `boolean` | `true` | 是否启用缩放 |\n| `panEnabled` | `boolean` | `true` | 是否启用平移 |\n\n| 事件 | Payload | 说明 |\n| --- | --- | --- |\n| `ready` | `ExtendedTimelineInstance` | 实例创建完成 |\n| `error` | `Error` | 创建或更新失败 |\n| `event-click` | `TimelineEvent` | 点击事件节点 |\n| `zoom-change` | `number` | 缩放级别变化 |\n\n组件通过 `defineExpose` 暴露 `instance`、`addEvent`、`removeEvent`、`zoomIn`、`zoomOut`、`fit`、`setTheme`。\n\n## useTimeline\n\n```ts\nimport { computed, ref, onMounted } from 'vue'\nimport { useTimeline, type TimelineConfig } from '@composy/timeline-vue'\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst config = computed<TimelineConfig>(() => ({\n  events: [\n    { id: 'a', title: 'A', date: '2026-01-01' },\n    { id: 'b', title: 'B', date: '2026-02-01' },\n  ],\n  renderType: 'svg',\n  width: 900,\n  height: 420,\n}))\n\nconst timeline = useTimeline(config)\n\nonMounted(async () => {\n  if (containerRef.value) {\n    await timeline.generate(containerRef.value)\n  }\n})\n```\n\n`useTimeline()` 暴露实例状态、事件增删改、缩放平移、主题、导出和事件订阅能力。\n\n## 插件\n\n```ts\nimport { createApp } from 'vue'\nimport { createTimelinePlugin } from '@composy/timeline-vue'\nimport App from './App.vue'\n\ncreateApp(App)\n  .use(createTimelinePlugin({\n    componentName: 'LdTimeline',\n    defaultTheme: 'light',\n    defaultRenderType: 'canvas',\n    defaultOrientation: 'horizontal',\n  }))\n  .mount('#app')\n```\n\n插件会注册全局组件，并提供 `$timeline` 全局工具对象。\n\n## class 与 CSS 变量\n\n- 根 class 为 `.ldesign-timeline`。\n- 加载态 class 为 `.ldesign-timeline__loading`、`.ldesign-timeline__spinner`。\n- Canvas tooltip 和 SVG 运行时元素同样使用 `ldesign-timeline__*` BEM class。\n- 组件变量使用 `--ldesign-timeline-*`，例如 `--ldesign-timeline-width`、`--ldesign-timeline-height`、`--ldesign-timeline-spinner-size`。\n- 颜色变量引用 `@composy/color-core` 生成的 `--ld-*` / `--color-*`。\n- 尺寸变量引用 `@composy/size-core` 生成的 `--size-*`。\n\n## 构建产物\n\n```bash\npnpm -C libraries/timeline/packages/vue run type-check\npnpm -C libraries/timeline/packages/vue run build\n```\n\n构建完成后会生成：\n\n```text\ndist/index.js\ndist/index.min.js\ndist/index.css\ndist/index.min.css\nes/index.js\nesm/index.js\nlib/index.cjs\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-5197fe54151fc5954e6434b7ba504f17"}