{"_id":"@aircss/svelte-toast","_rev":"1-bec67603b305c68b6f3f924ed691c697","name":"@aircss/svelte-toast","dist-tags":{"latest":"2.0.2"},"versions":{"2.0.1":{"name":"@aircss/svelte-toast","version":"2.0.1","description":"All the necessary stuff to create toast notifications.","author":{"name":"Morgan Delahaye","email":"morgan.delahaye@tutanota.com"},"repository":{"type":"git","url":"git+https://github.com/aircss/svelte-toast.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"},"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","dependencies":{"@aircss/air":"^2.3.1"},"_id":"@aircss/svelte-toast@2.0.1","gitHead":"14871a15d72a56c0f65b24215538a8a28319253f","bugs":{"url":"https://github.com/aircss/svelte-toast/issues"},"homepage":"https://github.com/aircss/svelte-toast#readme","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-M182e6yv0T3DCMsNc+xpgZuXRZhcxxHglVr32qxH/gj+fAd+u88c+r2kRDdRxD3GkvcXxRgweKqFhYhihqXUKA==","shasum":"9f60b07b74e2a8651f136615e313e9f16ba9dca2","tarball":"https://registry.npmjs.org/@aircss/svelte-toast/-/svelte-toast-2.0.1.tgz","fileCount":6,"unpackedSize":11325,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPp/XB4W3GHEicNEYm4NMIxr/4ofoAVhqE5B/mBTO6cAiASqWpwdnn0Qfnkd6bS0pn95e651rUO8r2ArFUSgYrDwQ=="}]},"_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-toast_2.0.1_1704478508590_0.2546364808393409"},"_hasShrinkwrap":false},"2.0.2":{"name":"@aircss/svelte-toast","version":"2.0.2","description":"All the necessary stuff to create toast notifications.","author":{"name":"Morgan Delahaye","email":"morgan.delahaye@tutanota.com"},"repository":{"type":"git","url":"git+https://github.com/aircss/svelte-toast.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.3.1"},"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-toast@2.0.2","gitHead":"8aeeb5bc74577d2bde0b89fb32d4a708f10585f7","bugs":{"url":"https://github.com/aircss/svelte-toast/issues"},"homepage":"https://github.com/aircss/svelte-toast#readme","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-OZnpZAiHhGACzCkp/S5pmGguKsvjy/m5uAzXjJMbCfVC9yCtYo3XbPpoO0u7uGHYwAvRM5oSHt0xrVl8XvNEgA==","shasum":"c5fd951ccdeea7fa389fe394b4cfbfff7ac399bd","tarball":"https://registry.npmjs.org/@aircss/svelte-toast/-/svelte-toast-2.0.2.tgz","fileCount":6,"unpackedSize":11303,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB44MWS4rDe6tVsmAhBgRiUzuDWHVRlKvMzGi5yVxQHvAiEA6c4iN1YfKBr4j/7mn9LqSQaV6bnpVDJvOSsSTq9wQj4="}]},"_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-toast_2.0.2_1704480662967_0.9904315759493718"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-05T18:15:08.464Z","2.0.1":"2024-01-05T18:15:08.823Z","modified":"2024-01-05T18:51:03.405Z","2.0.2":"2024-01-05T18:51:03.172Z"},"maintainers":[{"name":"morgan-del","email":"morgan.delahaye@tutanota.com"}],"description":"All the necessary stuff to create toast notifications.","homepage":"https://github.com/aircss/svelte-toast#readme","repository":{"type":"git","url":"git+https://github.com/aircss/svelte-toast.git"},"author":{"name":"Morgan Delahaye","email":"morgan.delahaye@tutanota.com"},"bugs":{"url":"https://github.com/aircss/svelte-toast/issues"},"license":"BSD-2-Clause","readme":"# svelte-toast\n\n`svelte-toast` provides all the necessary stuff to create toast notifications.\n\nA toast is a simple feedback message. It only fills the required amount of\nspace and the current activity remains visible and interactive. Toasts\nautomatically disappear after a timeout.\n\n## The Toast component\n\nThe `Toast` component is a container holding all the active toasts\nnotifications. It comes with a default styling and a default toast template\nmaking it usable out-of-the-box.\n\n```svelte\n<script lang=\"ts\">\n\timport Toast from '@aircss/svelte-toast';\n</script>\n\n<div class=\"absolute top right w-100 w6-m ma4\">\n\t<Toast />\n</div>\n```\n\n### Props\n\n- **class**: set custom classes for the toast container element (optional, default: `\"flex column\"`)\n- **timeout**: default timeout of a toast in _ms_ (optional, default: `5000`)\n\n### Slot\n\nIt is possible to override the default template of a toast by declaring a new\ntemplate as a child of the `Toast` element. The values of each toast are\nexposed through the `toast` property:\n\n```svelte\n<script lang=\"ts\">\n\timport Toast from '@aircss/svelte-toast';\n</script>\n\n<div class=\"absolute top right w-100 w6-m ma4\">\n\t<Toast let:toast>\n\t\t<div class=\"w-100 w6-m pa3 bt4 ba bg--white\">\n\t\t\t<h1 class=\"ma0 f-subtitle\">{toast.title}</h1>\n\t\t\t<p class=\"lh-body tj overflow-hidden\">\n\t\t\t\t{toast.message}\n\t\t\t</p>\n\t\t</div>\n\t</Toast>\n</div>\n```\n\n## The toast API\n\nCreating a new toast only requires to call the `send()` method of the\n`toast` API:\n\n```svelte\n<script lang=\"ts\">\n\timport { toast } from '@aircss/svelte-toast';\n\timport Toast from '@aircss/svelte-toast';\n\n\tfunction show() {\n\t\ttoast.send({\n\t\t\ttitle: 'Hello world!',\n\t\t\tmessage: 'This is a simple Svelte X Air CSS toast notification.'\n\t\t});\n\t}\n</script>\n\n<div class=\"absolute top right w-100 w6-m ma4\">\n\t<Toast />\n</div>\n\n<button on:click={show}>Show toast</button>\n```\n\nThe `send()` message expect an object as param complying to the `Toast`\ninterface. The minimal toast bears a little to no data. However, developers\nshould add as much of properties as pleased. _Reserved_ properties are as\nfollow:\n\n- **id**: unique identifier of the toast notification _(automatically generated)_\n- **index**: rank index of each toast starting with `0` for the least recent one _(automatically generated)_\n- **timestamp**: creation time of the toast _(automatically generated)_\n- **dismiss**: function to dismiss the toast _(automatically generated)_\n\n- **timeout**: timeout of the toast in _ms_ _(optional, default: global timeout)_\n\n- **title**: title of the toast _(optional)_\n- **message**: message of the toast _(optional)_\n- **template**: use a Svelte component as a template for the toast _(optional)_\n\n## Svelte components as toast templates\n\nAs mentionned in the previous paragraph, the `send()` method accepts svelte\ncomponents as templates for toasts. The component only requires a mandatory\n`toast` prop compliant with the `Toast` interface to work:\n\n```svelte\n<script lang=\"ts\">\n\texport let toast: Toast;\n</script>\n\n<div class=\"w-100 w6-m pa3 bt4 ba bg--white\">\n\t<h1 class=\"ma0 f-subtitle\">{toast.title}</h1>\n\t<p class=\"lh-body tj overflow-hidden\">\n\t\t{toast.message}\n\t</p>\n</div>\n```\n\nThe following example shows how to use this component as a toast template:\n\n```svelte\n<script lang=\"ts\">\n\timport { toast } from '@aircss/svelte-toast';\n\timport Toast from '@aircss/svelte-toast';\n\n\timport MyTemplate from './my-component.svelte';\n\n\tfunction show() {\n\t\ttoast.send({\n\t\t\ttitle: 'Hello world!',\n\t\t\tmessage: 'This is a simple Svelte X Air CSS toast notification.',\n\t\t\ttemplate: MyTemplate\n\t\t});\n\t}\n</script>\n\n<div class=\"absolute top right w-100 w6-m ma4\">\n\t<Toast />\n</div>\n\n<button on:click={show}>Show toast</button>\n```\n","readmeFilename":"README.md"}