{"id":30420576,"url":"https://github.com/skybrud/sky-reveal","last_synced_at":"2025-08-22T08:19:34.303Z","repository":{"id":57362498,"uuid":"84932620","full_name":"skybrud/sky-reveal","owner":"skybrud","description":"Module for collapsing content ","archived":false,"fork":false,"pushed_at":"2019-01-28T07:42:56.000Z","size":278,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-09T16:21:28.452Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/skybrud.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}},"created_at":"2017-03-14T09:51:14.000Z","updated_at":"2018-10-09T09:09:30.000Z","dependencies_parsed_at":"2022-09-13T21:10:52.771Z","dependency_job_id":null,"html_url":"https://github.com/skybrud/sky-reveal","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/skybrud/sky-reveal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-reveal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-reveal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-reveal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-reveal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skybrud","download_url":"https://codeload.github.com/skybrud/sky-reveal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-reveal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271606604,"owners_count":24788981,"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","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-08-22T08:19:33.030Z","updated_at":"2025-08-22T08:19:34.188Z","avatar_url":"https://github.com/skybrud.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sky-reveal\n\u003e Simple js module that collapses content\n\n## Installation\n```bash\nnpm install sky-reveal\n```\nor\n```bash\nyarn add sky-revel\n```\n\n## Usage\nBegin by importing and installing the SkyReveal Vue plugin:\n```js\nimport Vue from 'vue';\nimport SkyReveal from 'sky-reveal';\n\n// If you want to use the baseline scss add the following line\nimport '${YOUR-PROJECT-ROOT-PATH}/node_modules/sky-reveal/src/SkyReveal.scss';\n\nVue.use(SkyReveal);\n\n```\n\nThere are two ways to use `sky-reveal`. The first one is as a stand-alone module where you provide a toggle button (`sky-reveal-trigger`) for the content to be revealed.\nHere you need to to use the attribute `reveal-id` with the same value on both `sky-reveal` and `sky-reveal-trigger`\n``` html\n \u003csky-reveal reveal-id=\"asd\"\u003e\n    \u003cp\u003e\n    Ullamco enim eiusmod nisi exercitation occaecat do culpa. Elit dolore nulla aliqua sunt. Ex id eu ea et quis ex pariatur veniam mollit amet laborum. Magna elit aute non est. Ullamco enim eiusmod nisi exercitation occaecat do culpa. Elit dolore nulla aliqua sunt. Ex id eu ea et quis ex pariatur veniam mollit amet laborum. Magna elit aute non est.\n    \u003c/p\u003e\n\u003c/sky-reveal\u003e\n\n\u003csky-reveal-trigger reveal-id=\"asd\"\u003e\n\t\u003csvg slot=\"svg-prepend | svg | svg-append\"\u003e\u003c/svg\u003e (optional)\n    \u003cspan slot=\"open\"\u003eShow more\u003c/span\u003e\n    \u003cspan slot=\"closed\"\u003eShow less\u003c/span\u003e\n\u003c/sky-reveal-trigger\u003e\n```\n\nThe other way to use `sky-reveal` is as a sub component which are provided with a bool in the `open` attribute like this. This will open / close `sky-reveal`\n``` html\n\u003csky-reveal :open=\"true | false\"\u003e\n    \u003cp\u003e\n    Ullamco enim eiusmod nisi exercitation occaecat do culpa. Elit dolore nulla aliqua sunt. Ex id eu ea et quis ex pariatur veniam mollit amet laborum. Magna elit aute non est. Ullamco enim eiusmod nisi exercitation occaecat do culpa. Elit dolore nulla aliqua sunt. Ex id eu ea et quis ex pariatur veniam mollit amet laborum. Magna elit aute non est.\n    \u003c/p\u003e\n\u003c/sky-reveal\u003e\n```\n\nBy default `sky-reveal` animates with a duration om 500ms. You can change this via the `duration` attribute.\n``` html\n\u003csky-reveal :open=\"true | false\" :duration=\"750\"\u003e\n    ...\n\u003c/sky-reveal\u003e\n```\n\nFurthermore, `sky-reveal` emits a few callbacks you can utilize.\n``` html\n\u003csky-reveal\n    reveal-id=\"asd\"\n    @open=\"onAnimationStartFn()\"\n    @open-done=\"onAnimationEndFn()\"\n    @close=\"onAnimationStartFn()\"\n    @close-done=\"onAnimationEndFn()\"\n\u003e\n    ...\n\u003c/sky-reveal\u003e\n```\n\n## How it works\n`Sky-reveal` uses animeJs as animation engine which handles initial state and animations from and to height. If the animation is to open `sky-reveal` it calculate auto height in pixel and animate towards this value and on completion set `height: auto` which will make the container responsive.\nif closing it will use the computed property `min-height` on `.sky-reveal`.\n\n\n# Credits\nThis module is made by the Frontenders at [skybrud.dk](http://www.skybrud.dk/). Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-reveal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskybrud%2Fsky-reveal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-reveal/lists"}