{"id":22325756,"url":"https://github.com/kunukn/vue-collapse","last_synced_at":"2025-04-12T11:21:58.074Z","repository":{"id":65890999,"uuid":"595304457","full_name":"kunukn/vue-collapse","owner":"kunukn","description":"Height Collapsible component for Vue 3+ using CSS transitions","archived":false,"fork":false,"pushed_at":"2025-02-12T13:07:59.000Z","size":629,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T06:11:15.844Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/kunukn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2023-01-30T20:12:27.000Z","updated_at":"2025-02-12T13:08:04.000Z","dependencies_parsed_at":"2024-11-04T08:24:45.222Z","dependency_job_id":"9ee3121a-f7fd-4720-bbb8-5de2d1eebb34","html_url":"https://github.com/kunukn/vue-collapse","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fvue-collapse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fvue-collapse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fvue-collapse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fvue-collapse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kunukn","download_url":"https://codeload.github.com/kunukn/vue-collapse/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248558134,"owners_count":21124224,"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":[],"created_at":"2024-12-04T02:13:35.082Z","updated_at":"2025-04-12T11:21:58.048Z","avatar_url":"https://github.com/kunukn.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Collapse\n\nCollapsible component with CSS transition for elements with variable and dynamic height.\n\n[![npm version](https://img.shields.io/npm/v/@kunukn/vue-collapse.svg?style=flat-square)](https://www.npmjs.com/package/@kunukn/vue-collapse)\n[![npm downloads](https://img.shields.io/npm/dm/@kunukn/vue-collapse.svg?style=flat-square)](https://www.npmjs.com/package/@kunukn/vue-collapse)\n[![gzip](https://img.shields.io/bundlephobia/minzip/@kunukn/vue-collapse.svg)](https://bundlephobia.com/result?p=@kunukn/vue-collapse)\n[![license](https://img.shields.io/github/license/kunukn/vue-collapse.svg)](https://github.com/kunukn/vue-collapse/blob/master/LICENSE)\n\nvue-collapse\n\n![logo](logo/collapsible.svg 'logo')\n\n# Demo\n\n\u003ctable style=\"border-spacing: 16px;border-collapse: separate;\"\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eCodesandbox simple Vue 3\u003c/td\u003e\n\u003ctd\u003e\u003cimg width=\"24\" height=\"24\" src=\"ui-library-logo/Vue-logo.svg\"/\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://s128s4.csb.app\" target=\"_blank\"\u003eView\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/kunukn-vue-collapse-s128s4\" target=\"_blank\" \u003eEdit\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n# Tiny library\n\n| name                 | size    | gzip    |\n| -------------------- | ------- | ------- |\n| vue-collapse.css     | 0.43 kB | 0.21 kB |\n| vue-collapse.js      | 2.11 kB | 0.91 kB |\n| vue-collapse.umd.cjs | 1.71 kB | 0.86 kB |\n\n# CSS required\n\n:warning: ️You need to add the CSS file.\n\n```js\nimport '@kunukn/vue-collapse/style' // this imports the vue-collapse.css file.\n```\n\nor CDN\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/@kunukn/vue-collapse/dist/vue-collapse.css\"\n/\u003e\n```\n\nor manually copy the content from the `vue-collapse.css` file to your app.\n\nTo alter the timing, you can use the `transition` prop. Or add custom CSS.\n\n```HTML\n\u003cstyle\u003e\n[data-vue-collapse-transition] {\n  transition-duration: 200ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\u003c/style\u003e\n```\n\n## Supported versions\n\nVue 3\n\n## Install\n\n```bash\nnpm install @kunukn/vue-collapse\n```\n\n## Import\n\n```js\nimport '@kunukn/vue-collapse/style'\nimport { VueCollapse } from '@kunukn/vue-collapse'\n```\n\n## Attribute options\n\nThere are four possible states: `collapsed`, `collapsing`, `expanded`, `expanding`.\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick: to see the attributes\u003c/summary\u003e\n\n| Attribute     | Type     | Default | About                                               |\n| ------------- | -------- | ------- | --------------------------------------------------- |\n| :when         | boolean  | falsy   | should component collapse?                          |\n| :as           | string   | div     | element type to render                              |\n| transition    | string   | falsy   | apply custom CSS transition, see demo example below |\n| @collapse()   | function |         | event emitted with component in this state          |\n| @collapsing() | function |         | event emitted with component in this state          |\n| @expanded()   | function |         | event emitted with component in this state          |\n| @expanding()  | function |         | event emitted with component in this state          |\n| @event(state) | function |         | event emitted with one of the 4 states              |\n| @init(state)  | function |         | component mount event emitted with current state    |\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n## Usage examples\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick: Simple version using ARIA\u003c/summary\u003e\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"app\"\u003e\n    \u003cbutton\n      @click=\"isCollapsed = !isCollapsed\"\n      :aria-expanded=\"!isCollapsed\"\n      aria-controls=\"my-description\"\n    \u003e\n      {{ display }}\n    \u003c/button\u003e\n\n    \u003cVueCollapse\n      id=\"my-description\"\n      :when=\"isCollapsed\"\n      @event=\"onEvent\"\n      v-slot=\"{ state }\"\n    \u003e\n      \u003cp class=\"long-text\"\u003e\n        I know the state: {{ state }}. Lorem Ipsum is simply dummy text of the\n        printing and typesetting industry.\n      \u003c/p\u003e\n    \u003c/VueCollapse\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { VueCollapse } from '@kunukn/vue-collapse'\nimport { ref } from 'vue'\n\nconst isCollapsed = ref(false)\nconst display = ref('')\n\nconst onEvent = (state) =\u003e {\n  display.value = 'event ' + state\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n/* Custom easing */\n.vue-collapse[data-vue-collapse-transition] {\n  transition-duration: 200ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\u003c/style\u003e\n```\n\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# CDN\n\nhttps://unpkg.com/@kunukn/vue-collapse/\n\n# Supported browsers\n\nModern browsers that can CSS transition on `grid-template-rows`.\n\n# Design goals\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick: to see design goals\u003c/summary\u003e\n\n- Minimal in file size\n- Let the browser handle the animation using CSS transition\n- Minimalistic API\n- Flexible - provide your own markup, styling and easing\n- Interruptible - can be reversed during movement\n- Inert - when collapsed you should tab over the collapsed component\n- Availability - from CDN or npm install\n- Collapsible on height only\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Fvue-collapse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkunukn%2Fvue-collapse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Fvue-collapse/lists"}