{"_id":"@d3-timeline/vue","name":"@d3-timeline/vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@d3-timeline/vue","version":"0.0.1","type":"module","main":"./dist/timeline-vue.umd.js","module":"./dist/timeline-vue.es.js","exports":{".":{"import":"./dist/timeline-vue.es.js","require":"./dist/timeline-vue.umd.js"},"./style.css":"./dist/style.css"},"scripts":{"build":"vite build"},"dependencies":{"@d3-timeline/core":"*","vite-plugin-css-injected-by-js":"^5.0.2"},"peerDependencies":{"vue":"^3.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.4","vite":"^8.1.1","vue":"^3.0.0"},"gitHead":"6daefcbf9f2c328e138b9755002fa1d6d6ce9617","_id":"@d3-timeline/vue@0.0.1","description":"A Vue 3 component wrapper for the D3-based Timeline visualization component. It handles the integration between Vue's reactivity and the vanilla D3 timeline core engine.","_nodeVersion":"24.18.1","_npmVersion":"11.16.0","dist":{"integrity":"sha512-JHZCVEM98FpqCAE47QDJ1n1QBl3uojqjuQP/j8mtVkLGTUtB4iiWQLhdI8s76dp7ElfrOI6Rt8edWos76y7OVg==","shasum":"6cd894cc288db23b6e85f35f2b03e9ef60c599e5","tarball":"https://registry.npmjs.org/@d3-timeline/vue/-/vue-0.0.1.tgz","fileCount":5,"unpackedSize":5218,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDXlT3vI9QsiSan6SMupt1QJGFYO7uKGktSHDsIK1JikQIhAIsa/3LWV/VZWPsW5rFGcQrz3gWvMxJF1GiQec03/LXv"}]},"_npmUser":{"name":"jose.a.gs","email":"jose.gutierrez.sagredo@gmail.com"},"directories":{},"maintainers":[{"name":"jose.a.gs","email":"jose.gutierrez.sagredo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.0.1_1785422544181_0.5333253641969333"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-30T14:42:22.614Z","0.0.1":"2026-07-30T14:42:24.326Z","modified":"2026-07-30T14:42:26.095Z"},"maintainers":[{"name":"jose.a.gs","email":"jose.gutierrez.sagredo@gmail.com"}],"description":"A Vue 3 component wrapper for the D3-based Timeline visualization component. It handles the integration between Vue's reactivity and the vanilla D3 timeline core engine.","readme":"# @d3-timeline/vue\n\nA Vue 3 component wrapper for the D3-based Timeline visualization component. It handles the integration between Vue's reactivity and the vanilla D3 timeline core engine.\n\n## Installation\n\n```bash\nnpm install @d3-timeline/vue @d3-timeline/core\n```\n\n## Basic Usage\n\nImport the `Timeline` component and pass your array of event objects as well as a configuration object. Use the default scoped slot to render custom HTML for each event.\n\n```vue\n<template>\n  <div style=\"height: 400px;\">\n    <Timeline \n      :data=\"events\" \n      :config=\"timelineConfig\" \n      @selected=\"onEventSelected\"\n    >\n      <template #default=\"{ item }\">\n        <div class=\"custom-event-card\">\n          <h3>{{ item.title }}</h3>\n          <p>{{ item.description }}</p>\n          <small>{{ item.date.toDateString() }}</small>\n        </div>\n      </template>\n    </Timeline>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Timeline from '@d3-timeline/vue';\nimport '@d3-timeline/vue/dist/style.css'; // Don't forget to import the CSS!\n\nconst events = ref([\n  { id: \"1\", date: new Date(\"2023-01-15\"), title: \"Project Kickoff\", description: \"Initial team meeting.\" },\n  { id: \"2\", date: new Date(\"2023-05-10\"), title: \"Alpha Release\", description: \"First working version.\" }\n]);\n\nconst timelineConfig = {\n  orientation: 'horizontal' // 'horizontal' or 'vertical'\n};\n\nconst onEventSelected = (item) => {\n  console.log('Selected Event:', item);\n};\n</script>\n```\n\n## Props\n\n- `data`: An array of data objects. Each object **must** contain a valid `date` property (JavaScript `Date` object).\n- `config`: A configuration object passed down to the core engine. You can configure `orientation`, custom `collisionPriority`, etc.\n\n## Events\n\n- `@selected`: Triggered when an event item is clicked. The payload is the selected event object.\n\n## Custom Item Templates\n\nThe Vue wrapper uses a default scoped slot containing the `item` data and the `index`. You can completely customize how each event box is styled and presented by passing HTML into this scoped slot.\n","readmeFilename":"README.md","_rev":"1-39c211d298b0a3aaefa67a9d5f772075"}