{"id":30420706,"url":"https://github.com/skybrud/sky-overlay","last_synced_at":"2025-08-22T08:19:56.329Z","repository":{"id":32662568,"uuid":"112452944","full_name":"skybrud/sky-overlay","owner":"skybrud","description":"Vue module for creating page overlays with scrollable content","archived":false,"fork":false,"pushed_at":"2022-12-09T08:20:41.000Z","size":378,"stargazers_count":0,"open_issues_count":8,"forks_count":0,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-07-30T18:37:35.190Z","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-11-29T09:14:13.000Z","updated_at":"2020-07-30T12:47:46.000Z","dependencies_parsed_at":"2023-01-14T21:52:15.876Z","dependency_job_id":null,"html_url":"https://github.com/skybrud/sky-overlay","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/skybrud/sky-overlay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skybrud","download_url":"https://codeload.github.com/skybrud/sky-overlay/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-overlay/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:55.987Z","updated_at":"2025-08-22T08:19:56.319Z","avatar_url":"https://github.com/skybrud.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sky-overlay\n\u003e Vue module for creating page overlays with scrollable content\n\n## overlay of content\n* [Installation](#installation)\n* [Basic concept](#concept)\n* [Usage](#usage)\n\n\n## \u003ca id=\"installation\"\u003e\u003c/a\u003eInstallation\n```bash\nnpm install sky-overlay\n```\n\n```bash\nyarn add sky-overlay\n```\n\n## \u003ca id=\"concept\"\u003e\u003c/a\u003eBasic concept\nThe main focus of SkyOverlay is to create overlays that:\n\n- Can fill the entire view\n- Have their own internal scroll independent of the rest of the page\n- Lock the scroll of the page behind them while they're active (and gracefully restore it upon deactivation)\n- Can be transparent (by keeping the page content in the DOM behind them)\n- Allow for appear/leave animations using Vue transitions\n\nThe plugin registers 3 components globally:\n\n1. `\u003cSkyOverlay /\u003e` -  The overlay itself\n2. `\u003cSkyOverlayToggle /\u003e` - A (button) component for toggling an overlay from anywhere in your app\n3. `\u003cPageWrap /\u003e` -  An important secondary component, for wrapping regular page content. This enables the scroll position of the page to be locked behind any activated overlay(s) and restored upon deactivation.\n\n**Note:** The page wrapper is an important part of making SkyOverlay function properly. It locks content and removes it from scroll while an overlay is active.\n\n## \u003ca id=\"usage\"\u003e\u003c/a\u003eUsage\n### Import\n```js\nimport Vue from 'vue';\nimport SkyOverlay from 'sky-overlay';\n\n// If you want to use the baseline scss add the following line\nimport '${YOUR-PROJECT-ROOT-PATH}/node_modules/sky-crop/src/SkyCrop.scss';\n\nVue.use(SkyOverlay);\n```\n\n\n### Example template\nAdd `\u003cPageWrap /\u003e` and all instances of `\u003cSkyOverlay /\u003e` in your root app component like below.\n`\u003cSkyOverlayToggle /\u003e` can be used anywhere.\n```html\n\u003cdiv id=\"app\"\u003e\n\n\t\u003c!-- Define any fixed components outside PageWrap such as fixed headers: --\u003e\n\t\u003cAppHeader /\u003e\n\n\t\u003cPageWrap\u003e\n\t\t\u003ch1\u003eYour regular page content here\u003c/h1\u003e\n\t\t\u003cp\u003eThis is also where you would put your router-view etc.\u003c/p\u003e\n\n\t\t\u003c!-- You can add SkyOverlayToggle to toggle your overlay --\u003e\n\t\t\u003cSkyOverlayToggle\n\t\t\t:target-id=\"'myOverlay'\"\n\t\t\u003e\n\t\t\tClick here to toggle overlay with id \"myOverlay\"\n\t\t\u003c/SkyOverlayToggle\u003e\n\t\u003c/PageWrap\u003e\n\n\n\t\u003c!-- Add your overlay(s) outside PageWrap --\u003e\n\t\u003cSkyOverlay\n\t\t:id=\"'myOverlay'\"\n\t\u003e\n\t\t{{Your overlay content}}\n\t\u003c/SkyOverlay\u003e\n\n\u003c/div\u003e\n```\n\n### Animation\nThe `\u003cSkyOverlay /\u003e` component is animatable using Vue [transitions](https://vuejs.org/v2/guide/transitions.html). The transition is named `sky-overlay-animate` and is executed on the div with the class `.sky-overlay-container`. Basic example below:\n\n```scss\n.sky-overlay-container {\n\tbackground-color: green;\n\n\t\u0026.sky-overlay-animate-enter-active,\n\t\u0026.sky-overlay-animate-leave-active {\n\t\ttransition: opacity .5s;\n\t}\n\t\u0026.sky-overlay-animate-enter,\n\t\u0026.sky-overlay-animate-leave-to {\n\t\topacity: 0;\n\t}\n}\n```\n\n### Opening overlays programmatically\nAs an alternative to the `\u003cSkyOverlayTrigger /\u003e` component any overlay instances can also be toggled programmatically using `$SkyOvelay` exposed in the global Vue scope.\n```js\nVue.$SkyOverlay.toggle({ id: 'myOverlay' }); // 'myOverlay' is toggled to the reverse of its current open state\nVue.$SkyOverlay.toggle({ id: 'myOverlay', active: false }); // 'myOverlay' is closed if open\n```\nWhich of course also means it works inside any component:\n```js\nexport default {\n\t// ...\n\tcomputed: {\n\t\tmyOverlayState() {\n\t\t\treturn this.$SkyOverlay.isActive('myOverlay'); // True if overlay is open\n\t\t},\n\t},\n\tcreated() {\n\t\tthis.$SkyOverlay.toggleAll(false); // Force all overlays to close\n\t\tthis.$SkyOverlay.toggle({ id: 'myOverlay', active: true }); // Open specific overlay\n\t},\n\t// ...\n});\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-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskybrud%2Fsky-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-overlay/lists"}