{"_id":"@aleios10/vue3-scroll-spy-composable","_rev":"1-a68e781af3b63f570ffdda82f3e38726","name":"@aleios10/vue3-scroll-spy-composable","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aleios10/vue3-scroll-spy-composable","private":false,"version":"1.0.0","type":"module","author":{"name":"aleios"},"main":"src/index.ts","repository":{"type":"git","url":"git+https://github.com/aleios/vue3-scroll-spy-composable.git"},"scripts":{"build":"vite build","lint":"eslint \"src/**/*.{ts,tsx,js,jsx}\"","lint:fix":"eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix","test":"vitest","test:cov":"vitest run --coverage"},"dependencies":{"@tweenjs/tween.js":"^21.0.0","vue":"^3.3.4"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^5.62.0","@vitejs/plugin-vue":"^4.2.3","eslint":"^8.47.0","eslint-config-standard-with-typescript":"^37.0.0","eslint-plugin-import":"^2.28.0","eslint-plugin-n":"^16.0.1","eslint-plugin-promise":"^6.1.1","eslint-plugin-vue":"^9.17.0","happy-dom":"^10.10.2","typescript":"^5.1.6","vite":"^4.4.5","vite-plugin-dts":"^3.5.2","vitest":"^0.34.2","vue-tsc":"^1.8.5"},"gitHead":"49434a719ad173376f2e0af4a6e63d81d40f60ef","description":"<h1 align=\"center\">Vue3 Scroll-Spy Directive</h1>","bugs":{"url":"https://github.com/aleios/vue3-scroll-spy-composable/issues"},"homepage":"https://github.com/aleios/vue3-scroll-spy-composable#readme","_id":"@aleios10/vue3-scroll-spy-composable@1.0.0","_nodeVersion":"18.7.0","_npmVersion":"8.18.0","dist":{"integrity":"sha512-k4L3IpUIYOxEoJ1Y0lE1gCsK4QJurEO8HX6AUbA6Mmurkd8vSY5IlIphU8O2JLeSEXVePtxF/5+BvZYt6fuuaw==","shasum":"9c174f6c747f1b520a1e68eea2a66f84e1a8fd80","tarball":"https://registry.npmjs.org/@aleios10/vue3-scroll-spy-composable/-/vue3-scroll-spy-composable-1.0.0.tgz","fileCount":12,"unpackedSize":58868,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD28l7v/K1KGkNksOWdSAY20joGYTbaRdzj4whK9W+exAIgcQ/bdePDT2962YQOK6kAZFsr54P1DqitQ6dOCnqY5Bw="}]},"_npmUser":{"name":"aleios10","email":"dvsaleios@gmail.com"},"directories":{},"maintainers":[{"name":"aleios10","email":"dvsaleios@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-scroll-spy-composable_1.0.0_1692349757322_0.1404032353521203"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aleios10/vue3-scroll-spy-composable","private":false,"version":"1.0.1","type":"module","author":{"name":"aleios"},"main":"src/index.ts","repository":{"type":"git","url":"git+https://github.com/aleios/vue3-scroll-spy-composable.git"},"scripts":{"build":"vite build","lint":"eslint \"src/**/*.{ts,tsx,js,jsx}\"","lint:fix":"eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix","test":"vitest","test:cov":"vitest run --coverage"},"dependencies":{"@tweenjs/tween.js":"^21.0.0","vue":"^3.3.4"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^5.62.0","@vitejs/plugin-vue":"^4.2.3","eslint":"^8.47.0","eslint-config-standard-with-typescript":"^37.0.0","eslint-plugin-import":"^2.28.0","eslint-plugin-n":"^16.0.1","eslint-plugin-promise":"^6.1.1","eslint-plugin-vue":"^9.17.0","happy-dom":"^10.10.2","typescript":"^5.1.6","vite":"^4.4.5","vite-plugin-dts":"^3.5.2","vitest":"^0.34.2","vue-tsc":"^1.8.5"},"gitHead":"9e7a45c16ddf88f385d6b0638f4007bccbee9dbf","description":"<h1 align=\"center\">Vue3 Scroll-Spy Directive</h1>","bugs":{"url":"https://github.com/aleios/vue3-scroll-spy-composable/issues"},"homepage":"https://github.com/aleios/vue3-scroll-spy-composable#readme","_id":"@aleios10/vue3-scroll-spy-composable@1.0.1","_nodeVersion":"18.7.0","_npmVersion":"8.18.0","dist":{"integrity":"sha512-sHvU7FvTg4t/5GcjrGAz4I/Cmc5DnsIgzEq4IngpRe+x4rXJSk57Pqe+2wZyXPvni3bj9e8rfLLZVKU/BdlCqA==","shasum":"6840554a7d0b1313e8d2a59a3bc5e13831f2980c","tarball":"https://registry.npmjs.org/@aleios10/vue3-scroll-spy-composable/-/vue3-scroll-spy-composable-1.0.1.tgz","fileCount":12,"unpackedSize":58967,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHA5ZQ/ZSnDNWdy+5uY0Qwi1z1YR7TrYStkdQ+jjJAVRAiEAz4AWfh79XogJA4N3FHiqKr6T3PuDO4EXsqacYKFXX1w="}]},"_npmUser":{"name":"aleios10","email":"dvsaleios@gmail.com"},"directories":{},"maintainers":[{"name":"aleios10","email":"dvsaleios@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-scroll-spy-composable_1.0.1_1692362860136_0.8602758617097412"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-18T09:09:17.186Z","1.0.0":"2023-08-18T09:09:17.620Z","modified":"2023-08-18T12:47:40.517Z","1.0.1":"2023-08-18T12:47:40.332Z"},"maintainers":[{"name":"aleios10","email":"dvsaleios@gmail.com"}],"description":"<h1 align=\"center\">Vue3 Scroll-Spy Directive</h1>","homepage":"https://github.com/aleios/vue3-scroll-spy-composable#readme","repository":{"type":"git","url":"git+https://github.com/aleios/vue3-scroll-spy-composable.git"},"author":{"name":"aleios"},"bugs":{"url":"https://github.com/aleios/vue3-scroll-spy-composable/issues"},"readme":"\n<h1 align=\"center\">Vue3 Scroll-Spy Directive</h1>\n\n<div align=\"center\">\n<p>Scrollspy and animated scroll-to for Vue3, inspired by <a href=\"https://github.com/ibufu/vue2-scrollspy\">vue2-scrollspy</a>. <br>\nFork based on previous work done by <a href=\"https://github.com/bennyxguo\">Benny Guo</a> <a href=\"https://github.com/bennyxguo/vue3-scroll-spy\">vue3-scroll-spy</a>\n</p>\n</div>\n\n## Installation\n\n```bash\nnpm i @aleios10/vue3-scroll-spy-composable -S\n```\n\nOR\n\n```bash\nyarn add @aleios10/vue3-scroll-spy-composable\n```\n\n## Usage\n\n### Support\n\n| Supported Package | Version |\n| ----------------- | ------- |\n| Vue               | 3+      |\n\n### Use directive via composable SFC\n\n```html\n<template>\n   <ul v-scroll-spy-active v-scroll-spy-link>\n   <li>\n      <a>Menu 1</a>\n   </li>\n   <li>\n      <a>Menu 2</a>\n   </li>\n   </ul>\n\n   <div v-scroll-spy>\n   <div>\n      <h1>Header 1</h1>\n      <p>Content</p>\n   </div>\n   <div>\n      <h1>Header 2</h1>\n      <p>Content</p>\n   </div>\n   </div>\n</template>\n```\n\n```javascript\n<script setup>\nimport { useScrollSpy } from 'vue3-scroll-spy-composable';\n\nconst { vScrollSpy, vScrollSpyLink, vScrollSpyActive } = useScrollSpy()\n\n</script>\n\n```\n\n## Configuration\n\n### v-scroll-spy\n\nBinding scroll-spy to sections (or elements) of a container.\n\n| Directive name                                 | Description                                                                     | Default                                    |\n| ---------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------ |\n| `v-scroll-spy=\"{allowNoActiveSection: true}\"`  | When scroll position is outside of the container, active class will be removed. | Keep one section stays active at all time. |\n| `v-scroll-spy=\"{offset: 50}\"`                  | TAdding offset to scroll and active elements.                                   | Default: `0`                               |\n| `v-scroll-spy=\"{time: 200, steps: 30}\"`        | Set the animation options, time is animation duration, steps is step per frame. | `{time: 200, steps: 30}`                   |\n\n### v-scroll-spy-active\n\nSetting active elements' `selector` and `class` properties.\n\n| Directive name                                                             | Description                                 | Default                             |\n| -------------------------------------------------------------------------- | ------------------------------------------- | ----------------------------------- |\n| `v-scroll-spy-active=\"{selector: 'li.menu-item', class: 'custom-active'}\"` | Customize elements selector and class name. | `{selector: null, class: 'active'}` |\n\n### v-scroll-spy-link\n\nAdd `click handler` on children elements allow scrolling to the related section.\n\n| Directive name                                  | Description                    | Default                             |\n| ----------------------------------------------- | ------------------------------ | ----------------------------------- |\n| `v-scroll-spy-link=\"{selector: 'a.menu-link'}\"` | Customize menu links selector. | `{selector: null, class: 'active'}` |\n\n### Bezier animations\n\n```javascript\nimport { useScrollSpy } from 'vue3-scroll-spy-composable';\n\nconst { vScrollSpy, vScrollSpyLink, vScrollSpyActive } = useScrollSpy({\n   easing: Easing.Cubic.In\n})\n```\n\n## Note\n\n- You should have the same number of children elements for `v-scroll-spy`, `v-scroll-spy-active`, `v-scroll-spy-link` for this directive to work correctly.\n\n### Nested sections\n\nVue3 Scroll-Spy also support multi-leveled sections:\n\n```html\n<ol\n  v-scroll-spy\n  v-scroll-spy-active=\"{selector: 'li.menu-item', class: 'active'}\"\n>\n  <li class=\"menu-item\">Item 1</li>\n  <li class=\"menu-item\">\n    Item 2\n    <ol>\n      <li class=\"menu-item\">Item 2.1</li>\n      <li class=\"menu-item\">Item 2.2</li>\n    </ol>\n  </li>\n</ol>\n```\n\n### Index changed callback\n\nSupport has been added for detecting when the index changed, and what to.\n\n```html\n<template>\n   <ul v-scroll-spy-active v-scroll-spy-link>\n   <li>\n      <a>Menu 1</a>\n   </li>\n   <li>\n      <a>Menu 2</a>\n   </li>\n   </ul>\n\n   <div v-scroll-spy=\"{indexChanged: myCallback}\">\n   <div>\n      <h1>Header 1</h1>\n      <p>Content</p>\n   </div>\n   <div>\n      <h1>Header 2</h1>\n      <p>Content</p>\n   </div>\n   </div>\n</template>\n```\n\n```javascript\n<script setup>\nimport { useScrollSpy } from 'vue3-scroll-spy-composable';\n\nconst { vScrollSpy, vScrollSpyLink, vScrollSpyActive } = useScrollSpy()\n\nconst myCallback = (index) => {\n    console.log('Current Index: ', index)\n}    \n    \n</script>\n\n```\n\n## License\n\nMIT License\n","readmeFilename":"README.md"}