{"id":17488515,"url":"https://github.com/smastrom/vue-collapsed","last_synced_at":"2025-10-23T16:49:17.005Z","repository":{"id":63530824,"uuid":"567883280","full_name":"smastrom/vue-collapsed","owner":"smastrom","description":"🏋️‍♂️ CSS height transition from any to auto and vice versa for Vue and Nuxt. Accordion ready.","archived":false,"fork":false,"pushed_at":"2024-08-05T16:01:45.000Z","size":215,"stargazers_count":152,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T07:07:06.640Z","etag":null,"topics":["accordion","accordion-component","collapse","collapse-component","dynamic-height","vue","vue-accordion","vue-collapse","vue3"],"latest_commit_sha":null,"homepage":"https://vue-collapsed.pages.dev","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smastrom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"polar":"smastrom","buy_me_a_coffee":"smastrom"}},"created_at":"2022-11-18T20:14:18.000Z","updated_at":"2025-03-23T19:50:43.000Z","dependencies_parsed_at":"2024-08-05T18:13:23.600Z","dependency_job_id":null,"html_url":"https://github.com/smastrom/vue-collapsed","commit_stats":{"total_commits":61,"total_committers":3,"mean_commits":"20.333333333333332","dds":0.3278688524590164,"last_synced_commit":"51502dc24cdacab8539862c7c3bf93c6ea8f5408"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fvue-collapsed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fvue-collapsed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fvue-collapsed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fvue-collapsed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smastrom","download_url":"https://codeload.github.com/smastrom/vue-collapsed/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305933,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","accordion-component","collapse","collapse-component","dynamic-height","vue","vue-accordion","vue-collapse","vue3"],"created_at":"2024-10-19T04:08:14.852Z","updated_at":"2025-10-23T16:49:16.914Z","avatar_url":"https://github.com/smastrom.png","language":"Vue","funding_links":["https://polar.sh/smastrom","https://buymeacoffee.com/smastrom"],"categories":["Vue","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"![npm](https://img.shields.io/npm/v/vue-collapsed?color=46c119) ![dependencies](https://img.shields.io/badge/dependencies-0-success) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-collapsed?color=success) ![downloads](https://img.shields.io/npm/dm/vue-collapsed) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/smastrom/vue-collapsed/chrome-tests.yml?branch=main\u0026label=tests)\n\n# Vue Collapsed\n\nDynamic CSS height transition from _any to auto_ and vice versa. Accordion ready.\n\n[Examples and Demo](https://vue-collapsed.pages.dev) - [Stackblitz](https://stackblitz.com/edit/vue-dmjqey?file=src/App.vue)\n\n\u003cbr /\u003e\n\nCheck out my other packages for Vue and Nuxt:\n\n\u003e 🔔 **Notivue**  \n\u003e _Fully-featured notification system for Vue and Nuxt._  \n\u003e [Visit repo ➔ ](https://github.com/smastrom/notivue)\n\n\u003e 🌀 **Vue Global Loader**  \n\u003e _Global loaders made easy for Vue and Nuxt._  \n\u003e [Visit repo ➔ ](https://github.com/smastrom/vue-global-loader)\n\n\u003e 👌 **Vue Use Active Scroll**  \n\u003e _Accurate TOC/sidebar links without compromises._  \n\u003e [Visit repo ➔ ](https://github.com/smastrom/vue-use-active-scroll)\n\n\u003e 🔥 **Vue Use Fixed Header**  \n\u003e _Turn your boring fixed header into a smart one with three lines of code._  \n\u003e [Visit repo ➔ ](https://github.com/smastrom/vue-use-fixed-header)\n\n\u003cbr /\u003e\n\n## Installation\n\n```shell\nnpm i vue-collapsed\n# yarn add vue-collapsed\n# pnpm add vue-collapsed\n# bun add vue-collapsed\n```\n\n## Props\n\n| Name         | Description                              | Type                          | Required           |\n| ------------ | ---------------------------------------- | ----------------------------- | ------------------ |\n| `when`       | Value to control collapse                | boolean                       | :white_check_mark: |\n| `baseHeight` | Collapsed height in px, defaults to `0`. | number                        | :x:                |\n| `as`         | Tag to use instead of `div`              | _keyof_ HTMLElementTagNameMap | :x:                |\n\n## Emits\n\n| Name         | Description                   | Type       |\n| ------------ | ----------------------------- | ---------- |\n| `@expand`    | Expand transition start       | () =\u003e void |\n| `@expanded`  | Expand transition completed   | () =\u003e void |\n| `@collapse`  | Collapse transition start     | () =\u003e void |\n| `@collapsed` | Collapse transition completed | () =\u003e void |\n\n## Usage\n\n```vue\n\u003cscript setup\u003e\nimport { ref } from 'vue'\nimport { Collapse } from 'vue-collapsed'\n\nconst isExpanded = ref(false)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click=\"isExpanded = !isExpanded\"\u003eTrigger\u003c/button\u003e\n\n  \u003cCollapse :when=\"isExpanded\"\u003e\n    \u003cp\u003e{{ 'Collapsed '.repeat(100) }}\u003c/p\u003e\n  \u003c/Collapse\u003e\n\u003c/template\u003e\n```\n\n## Automatic transition (default behavior)\n\nBy default, if no height transition is specified the following one is automatically added to the Collapse element:\n\n`height var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1)`\n\n`--vc-auto-duration` is calculated in background and corresponds to an optimal transition duration based on your content height.\n\nThis is the recommended way to use this package unless you want to customize the transition.\n\n## Custom transition\n\nIf you prefer to use a custom duration or easing, add a class to Collapse that transitions the `height` property:\n\n```vue\n\u003cCollapse :when=\"isExpanded\" class=\"v-collapse\"\u003e\n  \u003cp\u003e{{ 'Collapsed '.repeat(100) }}\u003c/p\u003e\n\u003c/Collapse\u003e\n```\n\n```css\n.v-collapse {\n  transition: height 300ms ease-out;\n  /* or transition: height var(--vc-auto-duration) ease-in-out */\n}\n```\n\n### Multiple transitions\n\nTo transition other properties use the attribute `data-collapse`:\n\n| Transition | From        | Enter        | Leave       |\n| ---------- | ----------- | ------------ | ----------- |\n| Expand     | `collapsed` | `expanding`  | `expanded`  |\n| Collapse   | `expanded`  | `collapsing` | `collapsed` |\n\n```css\n.v-collapse {\n  --dur-easing: var(--vc-auto-duration) cubic-bezier(0.33, 1, 0.68, 1);\n  transition:\n    height var(--dur-easing),\n    opacity var(--dur-easing);\n}\n\n.v-collapse[data-collapse='expanded'],\n.v-collapse[data-collapse='expanding'] {\n  opacity: 1;\n}\n\n.v-collapse[data-collapse='collapsed'],\n.v-collapse[data-collapse='collapsing'] {\n  opacity: 0;\n}\n```\n\nOr to use different easings/durations for expand and collapse:\n\n```css\n.v-collapse[data-collapse='expanding'] {\n  transition: height 600ms ease-in-out;\n}\n\n.v-collapse[data-collapse='collapsing'] {\n  transition: height 300ms ease-out;\n}\n```\n\nAbove values can also be accessed using `v-slot`:\n\n```vue\n\u003cCollapse :when=\"isExpanded\" class=\"v-collapse\" v-slot=\"{ state }\"\u003e\n  {{ state === 'collapsing' ? 'Collapsing content...' : null }}\n\u003c/Collapse\u003e\n```\n\n## Example - Accordion\n\n```vue\n\u003cscript setup\u003e\nimport { reactive } from 'vue'\nimport { Collapse } from 'vue-collapsed'\n\nconst questions = reactive([\n  {\n    title: 'Question one',\n    answer: 'Answer one',\n    isExpanded: false // Initial value\n  },\n  {\n    title: 'Question two',\n    answer: 'Answer two',\n    isExpanded: false\n  },\n  {\n    title: 'Question three',\n    answer: 'Answer three',\n    isExpanded: false\n  }\n])\n\nfunction handleAccordion(selectedIndex) {\n  questions.forEach((_, index) =\u003e {\n    questions[index].isExpanded = index === selectedIndex ? !questions[index].isExpanded : false\n  })\n}\n\n/**\n * For individual control you might use:\n *\n * function handleMultiple(index) {\n *   questions[index].isExpanded = !questions[index].isExpanded\n * }\n */\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv v-for=\"(question, index) in questions\" :key=\"question.title\"\u003e\n    \u003cbutton @click=\"handleAccordion(index)\"\u003e\n      {{ question.title }}\n    \u003c/button\u003e\n    \u003cCollapse :when=\"questions[index].isExpanded\"\u003e\n      \u003cp\u003e\n        {{ question.answer }}\n      \u003c/p\u003e\n    \u003c/Collapse\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Accessibility\n\n`vue-collapsed` automatically detects if users prefer reduced motion and will disable transitions accordingly while keeping the same API behavior (emitting events and post-transition styles).\n\nYou should only add `aria` attributes to the Collapse element according to your use case.\n\n```vue\n\u003cscript setup\u003e\nimport { ref, computed } from 'vue'\nimport { Collapse } from 'vue-collapsed'\n\nconst isExpanded = ref(false)\n\nconst TOGGLE_ID = 'toggle-id'\nconst COLLAPSE_ID = 'collapse-id'\n\nconst toggleAttrs = computed(() =\u003e ({\n  id: TOGGLE_ID,\n  'aria-controls': COLLAPSE_ID,\n  'aria-expanded': isExpanded.value\n}))\n\nconst collapseAttrs = {\n  role: 'region',\n  id: COLLAPSE_ID,\n  'aria-labelledby': TOGGLE_ID\n}\n\nfunction handleCollapse() {\n  isExpanded.value = !isExpanded.value\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton v-bind=\"toggleAttrs\" @click=\"handleCollapse\"\u003eThis a panel.\u003c/button\u003e\n    \u003cCollapse v-bind=\"collapseAttrs\" :when=\"isExpanded\"\u003e\n      \u003cp\u003e{{ 'Collapsed '.repeat(100) }}\u003c/p\u003e\n    \u003c/Collapse\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Manually disabling transitions\n\n```vue\n\u003ctemplate\u003e\n  \u003cCollapse :when=\"isExpanded\" class=\"instant-collapse\"\u003e\n    \u003cp\u003e{{ 'Collapsed '.repeat(100) }}\u003c/p\u003e\n  \u003c/Collapse\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n.instant-collapse {\n  transition: none;\n}\n\u003c/style\u003e\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmastrom%2Fvue-collapsed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmastrom%2Fvue-collapsed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmastrom%2Fvue-collapsed/lists"}