{"id":30598159,"url":"https://github.com/oskarrough/rough-sheet","last_synced_at":"2026-05-18T03:34:26.704Z","repository":{"id":307895001,"uuid":"1029011819","full_name":"oskarrough/rough-sheet","owner":"oskarrough","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-08T07:26:37.000Z","size":16,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-08T09:24:02.187Z","etag":null,"topics":["web-components"],"latest_commit_sha":null,"homepage":"https://sheet.0sk.ar","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oskarrough.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-07-30T11:46:33.000Z","updated_at":"2025-09-08T07:26:13.000Z","dependencies_parsed_at":"2025-08-03T09:22:37.122Z","dependency_job_id":null,"html_url":"https://github.com/oskarrough/rough-sheet","commit_stats":null,"previous_names":["oskarrough/drawer","oskarrough/rough-sheet"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oskarrough/rough-sheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oskarrough%2Frough-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oskarrough%2Frough-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oskarrough%2Frough-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oskarrough%2Frough-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oskarrough","download_url":"https://codeload.github.com/oskarrough/rough-sheet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oskarrough%2Frough-sheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33163760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"online","status_checked_at":"2026-05-18T02:00:06.436Z","response_time":71,"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":["web-components"],"created_at":"2025-08-29T22:11:28.978Z","updated_at":"2026-05-18T03:34:26.699Z","avatar_url":"https://github.com/oskarrough.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"You know the type of (usually mobile) UI panels you quickly swipe/drag open? \n\nFor example, \n  iOS calls it [Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets#iOS-iPadOS)\n  Material design has [Bottom](https://m3.material.io/components/bottom-sheets/overview) and Side [Sheets](https://m3.material.io/components/side-sheets/overview).\n\n\u003e This reminds me that I should rename this component to `\u003crough-sheet\u003e`, no pun intended. Anyway…\n\nTo get that sort of behaviour on the web is unfortunately not trivial. [Vaul by Emil Kowalski](https://emilkowal.ski/ui/building-a-drawer-component) is one (good) attempt, but it's React only and thousands and thousands lines of code — because it handles all sorts of edge cases in different browsers, mobile environment with keyboards on top and so on. You can imagine the amount of edge cases to deal with.\n\nThis is a more naive approach. A web component (custom element) you can drop into any page. Or copy/paste the code and adapt to your needs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foskarrough%2Frough-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foskarrough%2Frough-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foskarrough%2Frough-sheet/lists"}