{"_id":"@curtissimo/elm-native-modal-dialog","_rev":"3-cca8c67d2898e4a1937c5c7f506e8af3","name":"@curtissimo/elm-native-modal-dialog","dist-tags":{"latest":"3.0.1"},"versions":{"1.0.0":{"name":"@curtissimo/elm-native-modal-dialog","version":"1.0.0","author":{"name":"Curtis Schlak"},"license":"BSD-3-Clause","_id":"@curtissimo/elm-native-modal-dialog@1.0.0","maintainers":[{"name":"realistschuckle","email":"realistschuckle@gmail.com"}],"dist":{"shasum":"112f5c6a246c2595c1fddc6e9c78b68b56e1ec2f","tarball":"https://registry.npmjs.org/@curtissimo/elm-native-modal-dialog/-/elm-native-modal-dialog-1.0.0.tgz","fileCount":24,"integrity":"sha512-KE5/9jKMGsS8LKvibcfRq84LRH+K6ZKvGhLnE9F9TnovHbIlnj8uNKU4GIAJpbTKvionuCsdATNrXoWVPeIbwA==","signatures":[{"sig":"MEUCIQDIMcnwnxmrRQK61WzsN5s2nPRwCXVjIawv8nC4kx0tAwIgaR7mNWxBFh6bxHJMTGI4ZA+5KBkulBTU3PmQB2UFfOs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42781},"gitHead":"87365e124ecb0faa910727c9a15648525a554171","scripts":{"test":"elm-verify-examples --run-tests && elm-test","build":"elm make","postinstall":"elm-tooling install"},"_npmUser":{"name":"realistschuckle","email":"realistschuckle@gmail.com"},"_npmVersion":"10.9.2","description":"Use the native <dialog> element in Elm instead of rolling your own.","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"elm-test":"^0.19.1-revision9","prettier":"^3.2.5","elm-review":"^2.10.3","elm-tooling":"^1.15.0","elm-doc-preview":"^6.0.1","elm-verify-examples":"^6.0.3"},"_npmOperationalInternal":{"tmp":"tmp/elm-native-modal-dialog_1.0.0_1754278986265_0.16204288361211905","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@curtissimo/elm-native-modal-dialog","version":"3.0.0","author":{"name":"Curtis Schlak"},"license":"BSD-3-Clause","_id":"@curtissimo/elm-native-modal-dialog@3.0.0","maintainers":[{"name":"realistschuckle","email":"realistschuckle@gmail.com"}],"dist":{"shasum":"ae05a53c23b3f5f094a148bafeb5cf84ef7b7a89","tarball":"https://registry.npmjs.org/@curtissimo/elm-native-modal-dialog/-/elm-native-modal-dialog-3.0.0.tgz","fileCount":24,"integrity":"sha512-1vmRmxnKsL+azb9u062UERK4ho6qm9pdhJ1oAIEWMQRp0VaEL4XPiKVzyc80sXWzHv6gCy3HUhOix00LYbM4bw==","signatures":[{"sig":"MEUCIAGBNwzGj7E/cqHxuCTXBe+rw8q5TQQPUI/GRIj0V5rgAiEAwyVy3ZcK34G3XX7Yx22YWLEvIhw7AKNgz84oxzEdpo4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51195},"gitHead":"8baa31b5fa198c9cd83fed4553844de9f71d72ed","scripts":{"test":"elm-verify-examples --run-tests && elm-test","build":"elm make"},"_npmUser":{"name":"realistschuckle","email":"realistschuckle@gmail.com"},"_npmVersion":"10.9.2","description":"Use the native <dialog> element in Elm instead of rolling your own.","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"elm-test":"^0.19.1-revision9","prettier":"^3.2.5","elm-review":"^2.10.3","elm-tooling":"^1.15.0","elm-doc-preview":"^6.0.1","elm-verify-examples":"^6.0.3"},"_npmOperationalInternal":{"tmp":"tmp/elm-native-modal-dialog_3.0.0_1754491335793_0.6027168217883561","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@curtissimo/elm-native-modal-dialog","version":"3.0.1","description":"Use the native <dialog> element in Elm instead of rolling your own.","devDependencies":{"elm-doc-preview":"^6.0.1","elm-review":"^2.10.3","elm-test":"^0.19.1-revision9","elm-tooling":"^1.15.0","elm-verify-examples":"^6.0.3","prettier":"^3.2.5"},"scripts":{"build":"elm make","test":"elm-verify-examples --run-tests && elm-test"},"author":{"name":"Curtis Schlak"},"license":"BSD-3-Clause","_id":"@curtissimo/elm-native-modal-dialog@3.0.1","gitHead":"3228293ae46b6be98e565f4b2dfa592b527c5e66","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-FFmN0OvmnMDHxcfd5fQOUGGRP+h+OVtXvrc9SuO2QUXEmZ1l+wiZXshTLUXzq3aIBKomI97jmCrTLq9tUqTqdQ==","shasum":"a622826fb79874a1ea6bb64311a9a6848f28d179","tarball":"https://registry.npmjs.org/@curtissimo/elm-native-modal-dialog/-/elm-native-modal-dialog-3.0.1.tgz","fileCount":24,"unpackedSize":51979,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCHHinxJMdaSCPODA24XwbkiF9/FlT0h85vdK+NQwsJawIgZ3IUZg02XpnoMIefZLDuctNWxLLrVu8QXfa32JFy0tk="}]},"_npmUser":{"name":"realistschuckle","email":"realistschuckle@gmail.com"},"directories":{},"maintainers":[{"name":"realistschuckle","email":"realistschuckle@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/elm-native-modal-dialog_3.0.1_1755191081794_0.39562425571883697"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-04T03:43:06.174Z","modified":"2025-08-14T17:04:42.202Z","1.0.0":"2025-08-04T03:43:06.436Z","3.0.0":"2025-08-06T14:42:15.988Z","3.0.1":"2025-08-14T17:04:41.989Z"},"author":{"name":"Curtis Schlak"},"license":"BSD-3-Clause","description":"Use the native <dialog> element in Elm instead of rolling your own.","maintainers":[{"name":"realistschuckle","email":"realistschuckle@gmail.com"}],"readme":"`elm-native-modal-dialog` [![Build Status](https://github.com/curtissimo/elm-native-modal-dialog/workflows/CI/badge.svg)](https://github.com/curtissimo/elm-native-modal-dialog/actions?query=branch%3Amain)\n\nAre you tired of using **janky** modal dialogs from UI packages like Bootstrap and Zurb Foundation?\n\nWhy not just use the HTML 5 `<dialog>` element? It's built into the browser, correctly handles\nthe modal aspect of dialog-ness, and has a style-able backdrop using the `::backdrop` \npseudo-element.\n\n## \"What about ports?\"\n\n\"What about ports,\" you ask.\n\nThis package has no ports. It uses a custom Web component to forward and report events for the\nnative `<dialog>` element so you don't need to worry about ports.\n\nI like the declarative nature of this over the use of ports.\n\n## Examples\n\nCheck out the `Simple` example in `./examples`.\n\n## Using `Curtissimo.NativeModalDialog`\n\nThis is two steps: include the Web component, then use the Elm package.\n\n### Install the Web component\n\nYou can do this in one of two ways.\n\n#### **Using your build process**\n\nIf you're using a build process (Vite, Rollup, whatever) and you don't mind installing an NPM\npackage, you can do that and import the JS file from the `node_modules`.\n\n```sh\nnpm install @curtissimo/elm-native-modal-dialog\n```\n\nThen, import it in file to include it in the build.\n\n```js \nimport '@curtissimo/elm-native-modal-dialog/js/elm-dialog-proxy.js';\n```\n\n#### **Just include it in your HTML**\n\nFor you application, load the JavaScript file found at `./js/elm-dialog-proxy.js`. It is Vanilla\nJavaScript, so you can just copy the file to your project and include it from a `<script>`\ntag or through a JavaScript build process.\n\n### Using the Elm package\n\nYou'll need something to let your Elm code know when to show the element.\n\n    type alias Model =\n        { showDialog : Bool }\n\nThen, you'll want a message to show the dialog and one to notify the page when the dialog has been\nclosed.\n\n    type Msg\n        = DialogClosed\n        | ShowDialog\n\nYour `update` function responds to those events and sets `model.showDialog` accordingly.\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            DialogClosed ->\n                ( { model | showDialog = False }\n                , Cmd.none\n                )\n\n            ShowDialog ->\n                ( { model | showDialog = True }\n                , Cmd.none\n                )\n\n\nOnce you have that, you're ready to set up your view.\n\n    view : Model -> Html Msg\n    view model =\n        let\n            dialogOptions =\n                { id = \"my-dialog\"\n                , cancel = Dialog.allowDefault DialogClosed\n                , close = DialogClosed\n                , showDialog = model.showDialog\n                }\n        in\n        Html.main_ []\n            [ Dialog.view dialogOptions\n                [ Html.form [ Html.Events.onSubmit DoSomething ]\n                    [ Html.header []\n                        [ Html.h1 [] [ Html.text \"My Dialog\" ] ]\n                    , Html.section []\n                        [ Html.p [] \n                            [ Html.text \"This is in a <dialog>!\" ]\n                        , Html.p []\n                            [ Html.text \"You can hit the \"\n                            , Html.kbd [] [ Html.text \"Esc\" ]\n                            , Html.text \" key to cancel it\"\n                            ]\n                        ]\n                    , Html.div []\n                        [ Html.button []\n                            [ Html.text \"Submit\" ]\n                        , Html.button\n                            [ Attrs.attribute \"formmethod\" \"dialog\" ]\n                            [ Html.text \"Close\" ]\n                        ]\n                    ]\n                ]\n            ]\n","readmeFilename":"README.md"}