{"id":15381279,"url":"https://github.com/mantou132/gem-panel","last_synced_at":"2025-04-15T19:16:22.024Z","repository":{"id":57245734,"uuid":"363737591","full_name":"mantou132/gem-panel","owner":"mantou132","description":"A custom element \u003cgem-panel\u003e, let you easily create layout similar to Adobe After Effects.","archived":false,"fork":false,"pushed_at":"2024-01-06T09:56:59.000Z","size":850,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T00:03:40.551Z","etag":null,"topics":["adobe-after-effects","console","css-grid","custom-elements","layout","panels","webcomponents"],"latest_commit_sha":null,"homepage":"https://panel.gemjs.org/","language":"TypeScript","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/mantou132.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}},"created_at":"2021-05-02T19:52:54.000Z","updated_at":"2024-04-06T20:11:33.000Z","dependencies_parsed_at":"2024-01-09T15:20:50.855Z","dependency_job_id":null,"html_url":"https://github.com/mantou132/gem-panel","commit_stats":{"total_commits":97,"total_committers":2,"mean_commits":48.5,"dds":"0.010309278350515427","last_synced_commit":"5fa3f76089b8e3422eb3e9db7eb82e1176fe7847"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantou132%2Fgem-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantou132%2Fgem-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantou132%2Fgem-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantou132%2Fgem-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mantou132","download_url":"https://codeload.github.com/mantou132/gem-panel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661496,"owners_count":21141449,"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":["adobe-after-effects","console","css-grid","custom-elements","layout","panels","webcomponents"],"created_at":"2024-10-01T14:26:32.479Z","updated_at":"2025-04-15T19:16:21.974Z","avatar_url":"https://github.com/mantou132.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"A custom element`\u003cgem-panel\u003e`, let you easily create layout similar to Adobe After Effects.\n\n## Demo\n\n- [Custom style](https://gem-panel-example-style.vercel.app/)\n- [Adobe Bridge simulation](https://gem-panel-example-bridge.vercel.app/)\n\n## Features\n\n- Drag to adjust the grid\n- Drag to move the panel and window\n- Drag and drop to adjust the panel sorting\n- Add commands to the panel\n- Cache layout\n- Custom style, [screenshot](./screenshots/style.png)\n- Async load panel content\n- Can use in any framework\n- Typescript support\n- Lightweight, ~20kb(br)\n\n## Install\n\n```bash\nnpm i gem-panel\n```\n\n## Example\n\n```ts\nimport { Layout, Panel, Window } from 'gem-panel';\nimport { render, html } from '@mantou/gem';\n\nconst panel1 = new Panel('p1', { title: 'p1 title', content: html`p1 content` });\nconst panel2 = new Panel('p2', { title: 'p2 title' });\nconst panel3 = new Panel('p3', { title: 'p3 title', content: html`\u003cp3-panel\u003e\u003c/p3-panel\u003e` });\nconst panel4 = new Panel('p4', { title: 'p4 title', content: html`\u003cp4-panel\u003e\u003c/p4-panel\u003e` });\nconst panel5 = new Panel('p5', { title: 'p5 title', content: html`\u003cp5-panel\u003e\u003c/p5-panel\u003e` });\nconst panel6 = new Panel('p6', { title: 'p6 title', content: html`\u003cp6-panel\u003e\u003c/p6-panel\u003e` });\n\nconst panels = [panel1, panel2, panel3, panel4, panel5, panel6];\nconst layout = new Layout([new Window([panel1, panel4, panel5]), new Window([panel2]), new Window([panel6])]);\n\nrender(\n  html`\n    \u003cstyle\u003e\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        height: 100%;\n      }\n      gem-panel::part(fixed-window) {\n        box-shadow: 0 0.3em 1em rgb(0 0 0 / 40%);\n      }\n    \u003c/style\u003e\n    \u003cgem-panel\n      .panels=${panels}\n      .layout=${layout}\n      .theme=${{ backgroundColor: 'red' }}\n      cache\n      cache-version=\"1\"\n    \u003e\u003c/gem-panel\u003e\n  `,\n  document.body,\n);\n```\n\n## Develop\n\n```bash\n# install dependencies\nnpm i\n# development\nnpm run example\n# test\nnpm run test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantou132%2Fgem-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmantou132%2Fgem-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantou132%2Fgem-panel/lists"}