{"_id":"@aircss/svelte-modal","_rev":"2-d3f0ae0198fac09e58381b4cec1b1549","name":"@aircss/svelte-modal","dist-tags":{"latest":"2.0.3"},"versions":{"2.0.1":{"name":"@aircss/svelte-modal","version":"2.0.1","description":"A simple modal dialog based on aircss and svelte.","author":{"name":"Morgan Delahaye","email":"morgan.delahaye@tutanota.com"},"repository":{"type":"git","url":"git+https://github.com/aircss/svelte-modal.git"},"license":"BSD-2-Clause","scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","test":"npm run test:integration && npm run test:unit","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint":"prettier --check . && eslint .","format":"prettier --write .","test:integration":"playwright test","test:unit":"vitest"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"peerDependencies":{"svelte":"^4.0.0","@aircss/air":"^2.0.0"},"devDependencies":{"@playwright/test":"^1.28.1","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0","@types/eslint":"8.56.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","eslint":"^8.56.0","eslint-config-prettier":"^9.1.0","eslint-plugin-svelte":"^2.35.1","prettier":"^3.1.1","prettier-plugin-svelte":"^3.1.2","publint":"^0.1.9","svelte":"^4.2.7","svelte-check":"^3.6.0","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^5.0.3","vitest":"^1.0.0"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","_id":"@aircss/svelte-modal@2.0.1","gitHead":"f8cbec12e39e398eb85b4ee8cb94c1854bc42b0e","bugs":{"url":"https://github.com/aircss/svelte-modal/issues"},"homepage":"https://github.com/aircss/svelte-modal#readme","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-deET5IfqALanlJ4aXnPWt2wiSTyDCMkhCQzc3XidCpLldgTF9CEuP5DC6LBDKTCKFSs1iRdso+uq0sJKWIM0wQ==","shasum":"62c83e875f76ce197f89577604bf9d888659d7e9","tarball":"https://registry.npmjs.org/@aircss/svelte-modal/-/svelte-modal-2.0.1.tgz","fileCount":6,"unpackedSize":4871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFU+cB4f6EnvTtCIL18kxkf3qbM2UQu+8+Z0eG1YRZbcAiEAl2KTcvELVISt3TJI3cOXybccaOvRLcj7hzUiQ4tdzK4="}]},"_npmUser":{"name":"morgan-del","email":"morgan.delahaye@tutanota.com"},"directories":{},"maintainers":[{"name":"morgan-del","email":"morgan.delahaye@tutanota.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-modal_2.0.1_1704042517009_0.544983795288426"},"_hasShrinkwrap":false},"2.0.2":{"name":"@aircss/svelte-modal","version":"2.0.2","description":"A simple modal dialog based on aircss and svelte.","author":{"name":"Morgan Delahaye","email":"morgan.delahaye@tutanota.com"},"repository":{"type":"git","url":"git+https://github.com/aircss/svelte-modal.git"},"license":"BSD-2-Clause","scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","test":"npm run test:integration && npm run test:unit","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint":"prettier --check . && eslint .","format":"prettier --write .","test:integration":"playwright test","test:unit":"vitest"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"peerDependencies":{"@aircss/air":"^2.0.0","svelte":"^4.0.0"},"devDependencies":{"@aircss/air":"^2.3.1","@playwright/test":"^1.28.1","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0","@types/eslint":"8.56.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","eslint":"^8.56.0","eslint-config-prettier":"^9.1.0","eslint-plugin-svelte":"^2.35.1","prettier":"^3.1.1","prettier-plugin-svelte":"^3.1.2","publint":"^0.1.9","svelte":"^4.2.7","svelte-check":"^3.6.0","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^5.0.3","vitest":"^1.0.0"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","_id":"@aircss/svelte-modal@2.0.2","gitHead":"f6f29d151ee10ba88f18a8dd5fa6aaed5146f273","bugs":{"url":"https://github.com/aircss/svelte-modal/issues"},"homepage":"https://github.com/aircss/svelte-modal#readme","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-ly9JLxIPwWNJ4G0S2WmcfOdlNuQ4x/i3Kn7hdUWwbLDJOGEzNPZv+Fw8x7uP9TRHgLogv/AoCdku33XX15cvaw==","shasum":"324893e16cced5ea4bbff5191664fa3d3b51462f","tarball":"https://registry.npmjs.org/@aircss/svelte-modal/-/svelte-modal-2.0.2.tgz","fileCount":6,"unpackedSize":6453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHbaCKvwFgu3h8Deccw9bT/LRuZLGiGd8wj7bQnZ63QAiAzO9AuYS/NjSnqXiTo8b7W0U9qpcEB/Rru5lsLzii2tA=="}]},"_npmUser":{"name":"morgan-del","email":"morgan.delahaye@tutanota.com"},"directories":{},"maintainers":[{"name":"morgan-del","email":"morgan.delahaye@tutanota.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-modal_2.0.2_1704662416671_0.7727942371820715"},"_hasShrinkwrap":false},"2.0.3":{"name":"@aircss/svelte-modal","version":"2.0.3","description":"A simple modal dialog based on aircss and svelte.","author":{"name":"Morgan Delahaye","email":"morgan.delahaye@tutanota.com"},"repository":{"type":"git","url":"git+https://github.com/aircss/svelte-modal.git"},"license":"BSD-2-Clause","scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","test":"npm run test:integration && npm run test:unit","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint":"prettier --check . && eslint .","format":"prettier --write .","test:integration":"playwright test","test:unit":"vitest"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"peerDependencies":{"@aircss/air":"^2.0.0","svelte":"^4.0.0"},"devDependencies":{"@aircss/air":"^2.3.1","@playwright/test":"^1.28.1","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0","@types/eslint":"8.56.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","eslint":"^8.56.0","eslint-config-prettier":"^9.1.0","eslint-plugin-svelte":"^2.35.1","prettier":"^3.1.1","prettier-plugin-svelte":"^3.1.2","publint":"^0.1.9","svelte":"^4.2.7","svelte-check":"^3.6.0","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^5.0.3","vitest":"^1.0.0"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","_id":"@aircss/svelte-modal@2.0.3","gitHead":"4c45fbd876f8ec4be3adf2e15cbb0856637d33b1","bugs":{"url":"https://github.com/aircss/svelte-modal/issues"},"homepage":"https://github.com/aircss/svelte-modal#readme","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-GTVWHKzoBHUssjmQzrwSmhgWrTT3Zh7exW9xLQbUccuZG/9iBDFABx21fd1mKInGtYow41+BXn3fnlPix0Ybxg==","shasum":"16a5ca67f6d8104affa5371fe0af6f55265b9260","tarball":"https://registry.npmjs.org/@aircss/svelte-modal/-/svelte-modal-2.0.3.tgz","fileCount":6,"unpackedSize":6785,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOJm8/Ph55Qqoy/LjEYF1Gwm/KJ9jNQeTBJg8P3IvolAiEA4i/TOm+Bpy9LtrwebInAAARGZZtWeVXu8BZrd3pUIPE="}]},"_npmUser":{"name":"morgan-del","email":"morgan.delahaye@tutanota.com"},"directories":{},"maintainers":[{"name":"morgan-del","email":"morgan.delahaye@tutanota.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-modal_2.0.3_1704669494402_0.6113322512297781"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-31T17:08:36.885Z","2.0.1":"2023-12-31T17:08:37.169Z","modified":"2024-01-07T23:18:14.751Z","2.0.2":"2024-01-07T21:20:16.852Z","2.0.3":"2024-01-07T23:18:14.571Z"},"maintainers":[{"name":"morgan-del","email":"morgan.delahaye@tutanota.com"}],"description":"A simple modal dialog based on aircss and svelte.","homepage":"https://github.com/aircss/svelte-modal#readme","repository":{"type":"git","url":"git+https://github.com/aircss/svelte-modal.git"},"author":{"name":"Morgan Delahaye","email":"morgan.delahaye@tutanota.com"},"bugs":{"url":"https://github.com/aircss/svelte-modal/issues"},"license":"BSD-2-Clause","readme":"# Modal dialog\n\n`svelte-modal` is a simple modal dialog based on aircss and svelte.\n\n## Installation\n\nIn an existing svelte project, simply run the following command:\n\n```bash\nnpm add @aircss/svelte-modal\n```\n\n## Usage\n\nThe following example is a page with a basic \"two-buttons\" confirmation dialog and a clickable button to show it:\n\n```svelte\n<script lang=\"ts\">\n\timport '@aircss/air';\n\n\timport Modal from '@aircss/svelte-modal';\n\n\tlet modal;\n</script>\n\n<Modal bind:this={modal} class=\"w6 ba bg--white\" on:success={console.log} on:cancel={console.warn}>\n\t<h2 class=\"ma0 pa4 bb b--noir-20\">Confirm</h2>\n\n\t<div class=\"ph4\">\n\t\t<p class=\"lh-body tj i\">Do you confirm the pending operation ?</p>\n\t</div>\n\n\t<div class=\"flex pa4 bt b--noir-20 evenly-filled\">\n\t\t<button class=\"w4 pa3 ba bg--red white pointer tc\" on:click={modal.close}> No </button>\n\n\t\t<button\n\t\t\tclass=\"w4 pa3 ba bg--emeraude white pointer tc\"\n\t\t\tdata-success=\"true\"\n\t\t\ton:click={modal.close}\n\t\t>\n\t\t\tYes\n\t\t</button>\n\t</div>\n</Modal>\n\n<button on:click={modal.show}>Show</button>\n```\n\n### Props\n\n- **`id`**: set a id attribute to the model element _(optional)_\n- **`class`**: set custom classes for the modal element _(optional)_\n- **`params`**: bi-directional binding to share anything between caller and callee _(optional)_\n\n### Methods\n\n- **`show(payload: unknown)`**: make the modal visible and set its `params` prop with the passed argument.\n  If the method is called by an HTML event (like a click on a button element), `show()` will use the\n  data attributes of the event target if there is any.\n\n- **`close(payload: unknown)`**: make the modal disappear. The custom event triggered by closing the\n  modal will use the payload as its `detail`. If the method is called by an HTML event (like a click\n  on a button element), `close()` will use the data attributes of the event target if there is any.\n\n### Events\n\n- **`show`**: this event is fired anytime the modal is made visible. `event.detail` holds the\n  `params` argument of the _ad-hoc_ method if set.\n\n- **`close`**: this event is fired anytime the modal disappears. `event.detail` holds the\n  `payload` of the _ad-hoc_ method if set _(through method args or data attributes of the event target)_.\n\n- **`success`**: this event is fired when the modal disappears and if the `close()` method has\n  a payload _(through method args or data attributes of the event target)_.\n\n- **`cancel`**: this event is fired when the modal disappears and if the `close()` method has\n  no payload _(through method args or data attributes of the event target)_.\n","readmeFilename":"README.md"}