{"id":22070785,"url":"https://github.com/fylgja/alpinejs-dialog","last_synced_at":"2025-09-04T15:38:53.231Z","repository":{"id":59506611,"uuid":"530398542","full_name":"fylgja/alpinejs-dialog","owner":"fylgja","description":"Bring the power of AlpineJs to the HTML dialog.","archived":false,"fork":false,"pushed_at":"2025-08-01T14:37:31.000Z","size":96,"stargazers_count":31,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-01T16:34:10.654Z","etag":null,"topics":["alpine","alpinejs","alpinejs-plugin","dialog","fylgja","htmldialog"],"latest_commit_sha":null,"homepage":"https://fylgja.dev/","language":"HTML","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/fylgja.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2022-08-29T21:20:11.000Z","updated_at":"2025-08-01T14:37:28.000Z","dependencies_parsed_at":"2025-03-09T20:25:10.417Z","dependency_job_id":"7fb81676-8010-4d05-98c3-6ca4817575c2","html_url":"https://github.com/fylgja/alpinejs-dialog","commit_stats":{"total_commits":25,"total_committers":1,"mean_commits":25.0,"dds":0.0,"last_synced_commit":"6961283ee56c424d041d8c5280cd809c0d0c25a2"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/fylgja/alpinejs-dialog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fylgja%2Falpinejs-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fylgja%2Falpinejs-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fylgja%2Falpinejs-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fylgja%2Falpinejs-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fylgja","download_url":"https://codeload.github.com/fylgja/alpinejs-dialog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fylgja%2Falpinejs-dialog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273398904,"owners_count":25098484,"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-09-03T02:00:09.631Z","response_time":76,"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":["alpine","alpinejs","alpinejs-plugin","dialog","fylgja","htmldialog"],"created_at":"2024-11-30T20:18:10.413Z","updated_at":"2025-09-04T15:38:53.212Z","avatar_url":"https://github.com/fylgja.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fylgja - AlpineJS Dialog\n\n[![NPM version](https://img.shields.io/npm/v/@fylgja/alpinejs-dialog?logo=npm)](https://www.npmjs.com/package/@fylgja/alpinejs-dialog)\n[![License](https://img.shields.io/github/license/fylgja/alpinejs-dialog?color=%23234)](/LICENSE)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/f6d1c1a3-2365-4d56-aeb4-ec52bcc7c1b6/deploy-status)](https://alpinejs-dialog.netlify.app/)\n\nBring the power and simplicity of Alpine.js to the native HTML `\u003cdialog\u003e` element.\n\n**Live Demo:** https://alpinejs-dialog.netlify.app/\n\n## Installation\n\nYou can use this plugin by either installing it using NPM or including it from a CDN.\n\n### Via NPM\n\nYou can install it from NPM and include it in your bundle:\n\n```bash\nnpm install @fylgja/alpinejs-dialog\n```\n\n```js\nimport Alpine from 'alpinejs';\nimport dialog from '@fylgja/alpinejs-dialog';\n\nwindow.Alpine = Alpine;\n\nAlpine.plugin(dialog);\nAlpine.start();\n```\n\n### Via CDN\n\nYou can include the CDN version of this plugin as a `\u003cscript\u003e` tag,\njust make sure to include it before AlpineJs.\n\n```html\n\u003cscript defer src=\"https://unpkg.com/@fylgja/alpinejs-dialog/dist/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nTo utilize the `x-htmldialog` plugin, add the directive to an HTML `\u003cdialog\u003e` element that is also controlled by `x-show`.\n\n```html\n\u003cdiv x-data=\"{ open: false }\"\u003e\n    \u003cbutton @click=\"open = !open\"\u003eOpen\u003c/button\u003e\n    \u003cdialog x-show=\"open\" x-htmldialog=\"open = false\"\u003e..\u003c/dialog\u003e\n\u003c/div\u003e\n```\n\nWhen the `x-htmldialog` directive is present on an `x-show` element:\n\n- It prevents `x-show` from directly toggling the display style.\n- Instead, it uses the native `el.showModal()` function to display the dialog.\n- The optional value provided to `x-htmldialog` (e.g., `\"open = false\"`) is executed\n  when the dialog is closed by pressing the Escape key or clicking outside the dialog (the backdrop).\n\n### Modifiers\n\nThe `x-htmldialog` directive supports modifiers to further customize its behavior.\n\n#### `noscroll`\n\nThe `noscroll` modifier prevents scrolling on the background page while the dialog is open.\n\n```html\n\u003cdiv x-data=\"{ open: false }\"\u003e\n    \u003cbutton @click=\"open = !open\"\u003eOpen\u003c/button\u003e\n    \u003cdialog x-show=\"open\" x-htmldialog.noscroll=\"open = false\"\u003e..\u003c/dialog\u003e\n\u003c/div\u003e\n```\n\n#### `closeby`\n\nThe `closeby` modifier allows you to control which events trigger the close action\ndefined in the `x-htmldialog` value (backdrop click and/or Escape key press).\n\nThis mimics the upcoming native `closeby` behavior of the `\u003cdialog\u003e` element.\n\nAvailable options for the `closeby` modifier:\n\n- `.auto` (Same as `.closerequest`). Only triggers the close action on the Escape key press.\n- `.none` Disables all automatic close triggers (backdrop click and Escape key).\n- `.closerequest` Only triggers the close action on the Escape key press.\n- `.any` (Default behavior if no `closeby` modifier is present).\n  Triggers the close action on both backdrop clicks and Escape key presses.\n\nExample, for disable all automatic closing:\n\n```html\n\u003cdialog x-show=\"open\" x-htmldialog.closeby.none=\"open = false\"\u003e...\u003c/dialog\u003e\n```\n\nThis way you can keep the close trigger for form submissions and prevent any other close triggers.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffylgja%2Falpinejs-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffylgja%2Falpinejs-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffylgja%2Falpinejs-dialog/lists"}