{"_id":"vitepress-codeblock-collapse","name":"vitepress-codeblock-collapse","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"vitepress-codeblock-collapse","version":"1.0.0","description":"Auto-collapse long code blocks in VitePress with expand/collapse toggle","author":{"name":"Iliya Zel","email":"iliyazelenkog@gmail.com"},"license":"MIT","type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./style.css":"./dist/style.css"},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","sideEffects":["./dist/style.css"],"repository":{"type":"git","url":"git+https://github.com/777genius/dartdoc_vitepress.git","directory":"js-packages/vitepress-codeblock-collapse"},"bugs":{"url":"https://github.com/777genius/dartdoc_vitepress/issues"},"homepage":"https://github.com/777genius/dartdoc_vitepress/tree/main/js-packages/vitepress-codeblock-collapse#readme","keywords":["vitepress","codeblock","collapse","expand","vue","vue3","plugin"],"peerDependencies":{"vue":"^3.3.0"},"devDependencies":{"jsdom":"^26.0.0","tsup":"^8.4.0","typescript":"^5.7.0","vitepress":"^1.6.0","vitest":"^3.0.0","vue":"^3.5.0"},"scripts":{"build":"tsup","typecheck":"tsc -p tsconfig.json --noEmit","test":"vitest run","prepublishOnly":"npm run build"},"_id":"vitepress-codeblock-collapse@1.0.0","gitHead":"c1447634ec7b85c212707ae766c59e2f7207a6f8","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-nTWQWItWhzSFy+3q2bdcLDimN9L9CXpNJCyqSOV7LVdD1+2G7PYbm+q4DlnMgu4H1yVBlxpUHo7snqSXCl6XsA==","shasum":"36a11bbb1dcb84368743f9644a1aef3b79299673","tarball":"https://registry.npmjs.org/vitepress-codeblock-collapse/-/vitepress-codeblock-collapse-1.0.0.tgz","fileCount":8,"unpackedSize":21202,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDMEklwjF4AL8mUI+hRTQyzZ6emkS6Vj9OIJwBPLkUcnQIhAJ+j7pe45X+1T01kxzqvA78z7A1s2c6Ms4WLMGhqcqsO"}]},"_npmUser":{"name":"ilyazelenko","email":"iliyazelenkog@gmail.com"},"directories":{},"maintainers":[{"name":"ilyazelenko","email":"iliyazelenkog@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vitepress-codeblock-collapse_1.0.0_1770723281039_0.6328861716416847"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-10T11:34:41.039Z","1.0.0":"2026-02-10T11:34:41.201Z","modified":"2026-02-10T11:34:41.683Z"},"maintainers":[{"name":"ilyazelenko","email":"iliyazelenkog@gmail.com"}],"description":"Auto-collapse long code blocks in VitePress with expand/collapse toggle","homepage":"https://github.com/777genius/dartdoc_vitepress/tree/main/js-packages/vitepress-codeblock-collapse#readme","keywords":["vitepress","codeblock","collapse","expand","vue","vue3","plugin"],"repository":{"type":"git","url":"git+https://github.com/777genius/dartdoc_vitepress.git","directory":"js-packages/vitepress-codeblock-collapse"},"author":{"name":"Iliya Zel","email":"iliyazelenkog@gmail.com"},"bugs":{"url":"https://github.com/777genius/dartdoc_vitepress/issues"},"license":"MIT","readme":"# vitepress-codeblock-collapse\n\nAuto-collapse long code blocks in VitePress with an expand/collapse toggle.\n\n- Collapses code blocks taller than a configurable height\n- Gradient overlay with animated chevron button\n- Keyboard accessible (Tab, Enter/Space, focus-visible)\n- ARIA attributes (`aria-expanded`, `aria-controls`)\n- Respects `prefers-reduced-motion`\n- SSR-safe — no `document` access on the server\n- Cleanup API to remove all UI and event listeners\n- Works with any Vue 3 project (VitePress optional)\n\n## Installation\n\n```bash\nnpm install vitepress-codeblock-collapse\n```\n\n## Usage\n\n### VitePress (recommended)\n\n```ts\n// .vitepress/theme/index.ts\nimport { computed } from 'vue'\nimport DefaultTheme from 'vitepress/theme'\nimport { useData } from 'vitepress'\nimport { useCodeblockCollapse } from 'vitepress-codeblock-collapse'\nimport 'vitepress-codeblock-collapse/style.css'\n\nexport default {\n  extends: DefaultTheme,\n  setup() {\n    const { page } = useData()\n    const pagePath = computed(() => page.value.relativePath)\n    useCodeblockCollapse(pagePath)\n  },\n}\n```\n\n### Standalone (any Vue 3 app)\n\n```ts\nimport { collapseCodeblocks } from 'vitepress-codeblock-collapse'\nimport 'vitepress-codeblock-collapse/style.css'\n\n// Call after DOM is ready\ncollapseCodeblocks({\n  selector: '.my-code-blocks div[class*=\"language-\"]',\n  maxHeight: 400,\n})\n```\n\n## API\n\n### `useCodeblockCollapse(pagePath, options?)`\n\nVue composable — auto-collapses on mount and re-processes on page navigation.\n\n| Param | Type | Description |\n|---|---|---|\n| `pagePath` | `Ref<string>` | Reactive ref that changes on navigation |\n| `options` | `CodeblockCollapseOptions` | Optional config |\n\n### `collapseCodeblocks(options?)`\n\nScans the DOM for tall code blocks and adds collapse/expand UI. Safe to call multiple times.\n\n### `cleanupCodeblocks(options?)`\n\nRemoves all collapse UI and event listeners from processed blocks.\n\n### `CodeblockCollapseOptions`\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `maxHeight` | `number` | `380` | Max height (px) before collapse |\n| `selector` | `string` | `'.vp-doc div[class*=\"language-\"]'` | CSS selector for code block containers |\n| `dataAttr` | `string` | `'collapsed'` | Data attribute for tracking state |\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","_rev":"1-668d72c2549494988c4f7807aa35f79f"}