├── .npmrc ├── site ├── .gitignore ├── public │ ├── favicon.png │ ├── images │ │ ├── flat-dark.png │ │ ├── flat-light.png │ │ ├── bootstrap-dark.png │ │ ├── dynamic-toast.gif │ │ ├── bootstrap-light.png │ │ ├── github.svg │ │ └── logo.svg │ ├── global.css │ ├── index.html │ ├── favicon.svg │ └── prism-vsc-theme.css ├── postcss.config.js ├── src │ ├── styles │ │ └── vars.scss │ ├── main.js │ ├── stores │ │ └── isXs.js │ ├── components │ │ ├── Tailwind.svelte │ │ ├── Code.svelte │ │ ├── Link.svelte │ │ ├── Button.svelte │ │ ├── MenuItem.svelte │ │ ├── Sidebar.svelte │ │ └── Table.svelte │ ├── pages │ │ ├── BootstrapToastDocs.svelte │ │ ├── CustomToastDocs.svelte │ │ ├── FlatToastDocs.svelte │ │ ├── StoreDocs.svelte │ │ ├── ToastContainerDocs.svelte │ │ ├── ToastDocs.svelte │ │ └── Demo.svelte │ └── App.svelte ├── babel.config.json ├── server.js ├── tailwind.config.js ├── package.json ├── rollup.config.js └── README.md ├── .vscode ├── extensions.json └── settings.json ├── .gitignore ├── types ├── index.d.ts ├── FlatToast.d.ts ├── BootstrapToast.d.ts ├── common.d.ts ├── ToastContainer.d.ts └── toasts.d.ts ├── src ├── index.js ├── toasts.js ├── ToastContainer.svelte ├── FlatToast.svelte └── BootstrapToast.svelte ├── LICENSE ├── rollup.config.js ├── package.json ├── COMPONENT_API.json ├── COMPONENT_INDEX.md ├── README.md └── yarn.lock /.npmrc: -------------------------------------------------------------------------------- 1 | # registry=http://localhost:4873 -------------------------------------------------------------------------------- /site/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /site/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/svelte-toasts/HEAD/site/public/favicon.png -------------------------------------------------------------------------------- /site/public/images/flat-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/svelte-toasts/HEAD/site/public/images/flat-dark.png -------------------------------------------------------------------------------- /site/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /site/public/images/flat-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/svelte-toasts/HEAD/site/public/images/flat-light.png -------------------------------------------------------------------------------- /site/public/images/bootstrap-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/svelte-toasts/HEAD/site/public/images/bootstrap-dark.png -------------------------------------------------------------------------------- /site/public/images/dynamic-toast.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/svelte-toasts/HEAD/site/public/images/dynamic-toast.gif -------------------------------------------------------------------------------- /site/public/images/bootstrap-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/svelte-toasts/HEAD/site/public/images/bootstrap-light.png -------------------------------------------------------------------------------- /site/src/styles/vars.scss: -------------------------------------------------------------------------------- 1 | $st-success-color: #16a34a; 2 | $st-info-color: #0284c7; 3 | $st-warning-color: #ca8a04; 4 | $st-error-color: #e11d48; 5 | -------------------------------------------------------------------------------- /site/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /site/src/stores/isXs.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export default writable(!window.matchMedia('(min-width: 640px)').matches); 4 | -------------------------------------------------------------------------------- /site/src/components/Tailwind.svelte: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | **/dist/** 3 | **/package/** 4 | **/node_modules/** 5 | **/public/bundle.* 6 | /storybook-static 7 | 8 | cypress/videos 9 | cypress/screenshots 10 | *.tgz -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default as toasts } from './toasts'; 2 | export { default as ToastContainer } from './ToastContainer'; 3 | export { default as BootstrapToast } from './BootstrapToast'; 4 | export { default as FlatToast } from './FlatToast'; 5 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as toasts } from './toasts'; 2 | export { default as ToastContainer } from './ToastContainer.svelte'; 3 | export { default as BootstrapToast } from './BootstrapToast.svelte'; 4 | export { default as FlatToast } from './FlatToast.svelte'; 5 | -------------------------------------------------------------------------------- /site/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "loose": true, 7 | "modules": false, 8 | "targets": { 9 | "esmodules": true 10 | } 11 | } 12 | ] 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.autoSave": "onFocusChange", 3 | "[svelte]": { 4 | "editor.defaultFormatter": "svelte.svelte-vscode" 5 | }, 6 | "editor.formatOnSave": true, 7 | "prettier.singleQuote": true, 8 | "svelte.language-server.runtime": "/usr/local/bin/node" 9 | } 10 | -------------------------------------------------------------------------------- /site/src/components/Code.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 
10 |   {@html html}
11 |
-------------------------------------------------------------------------------- /site/src/components/Link.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /site/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | app.use('/svelte-toasts', express.static('public')); 4 | 5 | app.get('/', (req, res) => { 6 | res.redirect('/svelte-toasts'); 7 | }); 8 | app.get('*', (req, res) => { 9 | res.sendFile(__dirname + '/public/index.html'); 10 | }); 11 | 12 | app.listen(process.env.PORT || 3000, () => { 13 | console.log('App listening on port 3000'); 14 | }); 15 | -------------------------------------------------------------------------------- /site/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | color: #333; 10 | margin: 0; 11 | padding: 0; 12 | box-sizing: border-box; 13 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 14 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 15 | } 16 | 17 | pre { 18 | width: auto; 19 | overflow: scroll; 20 | } 21 | -------------------------------------------------------------------------------- /site/src/components/Button.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /site/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: { 3 | enabled: !process.env.ROLLUP_WATCH, 4 | content: ['./public/index.html', './src/**/*.svelte'], 5 | options: { 6 | defaultExtractor: (content) => [ 7 | ...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []), 8 | ...(content.match(/(?<=class:)[^=>\/\s]*/g) || []), 9 | ], 10 | }, 11 | }, 12 | darkMode: false, // or 'media' or 'class' 13 | theme: { 14 | extend: {}, 15 | }, 16 | variants: { 17 | extend: {}, 18 | }, 19 | plugins: [require('@tailwindcss/forms')], 20 | }; 21 | -------------------------------------------------------------------------------- /types/FlatToast.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { SvelteComponentTyped } from 'svelte'; 3 | import { Theme, ToastProps } from './common'; 4 | 5 | export interface FlatToastProps { 6 | /** 7 | * Default theme for all toasts 8 | * @default 'light' 9 | */ 10 | theme?: Theme; 11 | 12 | /** 13 | * Default theme for all toasts 14 | * @default {} 15 | */ 16 | data?: ToastProps; 17 | } 18 | 19 | export default class FlatToast extends SvelteComponentTyped< 20 | FlatToastProps, 21 | {}, 22 | { ['close-icon']: {}; extra: {}; icon: {} } 23 | > {} 24 | -------------------------------------------------------------------------------- /types/BootstrapToast.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { SvelteComponentTyped } from 'svelte'; 3 | import { Theme, ToastProps } from './common'; 4 | 5 | export interface BootstrapToastProps { 6 | /** 7 | * Default theme for all toasts 8 | * @default 'light' 9 | */ 10 | theme?: Theme; 11 | 12 | /** 13 | * Default theme for all toasts 14 | * @default {} 15 | */ 16 | data?: ToastProps; 17 | } 18 | 19 | export default class BootstrapToast extends SvelteComponentTyped< 20 | BootstrapToastProps, 21 | {}, 22 | { ['close-icon']: {}; extra: {}; icon: {} } 23 | > {} 24 | -------------------------------------------------------------------------------- /types/common.d.ts: -------------------------------------------------------------------------------- 1 | type Theme = 'light' | 'dark'; 2 | export type ToastType = 'success' | 'info' | 'error' | 'warning'; 3 | 4 | export type Placement = 5 | | 'bottom-right' 6 | | 'bottom-left' 7 | | 'top-right' 8 | | 'top-left' 9 | | 'top-center' 10 | | 'bottom-center' 11 | | 'center-center'; 12 | 13 | export interface ToastProps { 14 | uid: number; 15 | title?: string; 16 | description: string; 17 | duration: number; 18 | type: ToastType; 19 | theme?: Theme; 20 | placement: Placement; 21 | showProgress?: boolean; 22 | remove?: Function; 23 | update?: Function; 24 | onRemove?: Function; 25 | onClick?: Function; 26 | } 27 | -------------------------------------------------------------------------------- /site/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte-Toasts 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /site/public/images/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/components/MenuItem.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
  • navigate(to)} 14 | class="relative block p-4 text-grey-darker font-semibold border-gray-700 hover:border-r-4 hover:border-gray-700 hover:bg-gray-100 shadow-sm cursor-pointer {$location.pathname === 15 | to 16 | ? 'bg-gray-100' 17 | : ''}" 18 | > 19 | 20 | 21 | 22 | 23 | {#if $location.pathname === to} 24 |
    29 | {/if} 30 |
    • 31 | 32 | 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021-present Zohaib Ijaz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /types/ToastContainer.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { SvelteComponentTyped } from 'svelte'; 3 | import { Placement, Theme, ToastType, ToastProps } from './common'; 4 | 5 | export interface ToastContainerProps { 6 | /** 7 | * Default theme for all toasts 8 | * @default 'dark' 9 | */ 10 | theme?: Theme; 11 | 12 | /** 13 | * Default placement for all toasts 14 | * @default 'bottom-right' 15 | */ 16 | placement?: Placement; 17 | 18 | /** 19 | * Default type of all toasts 20 | * @default 'info' 21 | */ 22 | type?: ToastType; 23 | 24 | /** 25 | * Show progress if showProgress is true and duration is greater then 0 26 | * @default false 27 | */ 28 | showProgress?: boolean; 29 | 30 | /** 31 | * Default duration for all toasts to auto close. 0 to disable auto close 32 | * @default 3000 33 | */ 34 | duration?: number; 35 | 36 | /** 37 | * Width of all toasts 38 | * @default '320px' 39 | */ 40 | width?: string; 41 | } 42 | 43 | export default class ToastContainer extends SvelteComponentTyped< 44 | ToastContainerProps, 45 | {}, 46 | { default: { data: ToastProps } } 47 | > {} 48 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import commonjs from '@rollup/plugin-commonjs'; 4 | import { terser } from 'rollup-plugin-terser'; 5 | import sveld from 'sveld'; 6 | import pkg from './package.json'; 7 | 8 | const name = pkg.name 9 | .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3') 10 | .replace(/^\w/, (m) => m.toUpperCase()) 11 | .replace(/-\w/g, (m) => m[1].toUpperCase()); 12 | 13 | function createConfig({ file, format, minify = false, docs = false }) { 14 | const isUmd = format === 'umd'; 15 | return { 16 | input: 'src/index.js', 17 | output: { 18 | file, 19 | format, 20 | ...(isUmd ? { name: 'SvelteToasts', exports: 'named' } : {}), 21 | }, 22 | plugins: [ 23 | svelte({ 24 | emitCss: false, 25 | }), 26 | resolve({ 27 | dedupe: (importee) => 28 | importee === 'svelte' || importee.startsWith('svelte/'), 29 | }), 30 | commonjs(), 31 | minify && terser(), 32 | docs && 33 | sveld({ 34 | markdown: true, 35 | json: true, 36 | }), 37 | ], 38 | }; 39 | } 40 | 41 | export default [ 42 | createConfig({ file: pkg.module, format: 'es' }), 43 | createConfig({ file: pkg.main, format: 'umd' }), 44 | createConfig({ file: pkg.unpkg, format: 'umd', minify: true }), 45 | ]; 46 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-toasts", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public", 9 | "serve": "concurrently \"node server.js\" \"npm run dev\" ", 10 | "deploy": "gh-pages -d public" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "7.13.8", 14 | "@babel/eslint-parser": "7.13.8", 15 | "@babel/preset-env": "7.13.9", 16 | "@rollup/plugin-commonjs": "^17.0.0", 17 | "@rollup/plugin-node-resolve": "^11.0.0", 18 | "@tailwindcss/forms": "^0.2.1", 19 | "autoprefixer": "^10.2.5", 20 | "concurrently": "^6.0.0", 21 | "express": "^4.17.1", 22 | "gh-pages": "^3.1.0", 23 | "node-sass": "^5.0.0", 24 | "postcss": "^8.2.8", 25 | "postcss-load-config": "^3.0.1", 26 | "prismjs": "^1.23.0", 27 | "rollup": "^2.3.4", 28 | "rollup-plugin-css-only": "^3.1.0", 29 | "rollup-plugin-livereload": "^2.0.0", 30 | "rollup-plugin-svelte": "^7.0.0", 31 | "rollup-plugin-terser": "^7.0.0", 32 | "svelte": "^3.0.0", 33 | "svelte-navigator": "^3.1.5", 34 | "svelte-preprocess": "^4.6.9", 35 | "svelte-toasts": "1.1.2", 36 | "tailwindcss": "^2.0.3", 37 | "typescript": "^4.2.3" 38 | }, 39 | "dependencies": { 40 | "sirv-cli": "^1.0.0" 41 | }, 42 | "repository": { 43 | "type": "git", 44 | "url": "https://github.com/mzohaibqc/svelte-toasts" 45 | }, 46 | "homepage": "https://mzohaibqc.github.io/svelte-toasts" 47 | } 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.1.2", 3 | "name": "svelte-toasts", 4 | "description": "A highly configurable notification/toast component with individual toast state management capabilities.", 5 | "main": "dist/svelte-toasts.js", 6 | "unpkg": "dist/svelte-toasts.min.js", 7 | "module": "dist/svelte-toasts.mjs", 8 | "svelte": "src/index.js", 9 | "types": "types/index.d.ts", 10 | "files": [ 11 | "src", 12 | "dist", 13 | "types" 14 | ], 15 | "author": "Zohaib Ijaz @mzohaibqc", 16 | "scripts": { 17 | "build": "rollup -c", 18 | "docs": "npx sveld --json --markdown", 19 | "types": "node ./node_modules/svelte-types-writer/dist/index.js ./src/**/*.svelte --libs ./src/**/*.ts ./src/**/*.js" 20 | }, 21 | "devDependencies": { 22 | "@rollup/plugin-commonjs": "^17.1.0", 23 | "@rollup/plugin-node-resolve": "^9.0.0", 24 | "rollup": "^2.0.0", 25 | "rollup-plugin-svelte": "^6.0.0", 26 | "rollup-plugin-terser": "^7.0.2", 27 | "sveld": "^0.7.1", 28 | "svelte": "^3.35.0", 29 | "svelte-types-writer": "^1.2.0" 30 | }, 31 | "keywords": [ 32 | "svelte", 33 | "svelte-toast", 34 | "svelte-toasts", 35 | "toasts", 36 | "toastify", 37 | "svelte-toast-store", 38 | "svelte-bootstrap-toast", 39 | "component", 40 | "library" 41 | ], 42 | "license": "MIT", 43 | "repository": { 44 | "type": "git", 45 | "url": "https://github.com/mzohaibqc/svelte-toasts" 46 | }, 47 | "homepage": "https://mzohaibqc.github.io/svelte-toasts", 48 | "private": false 49 | } 50 | -------------------------------------------------------------------------------- /types/toasts.d.ts: -------------------------------------------------------------------------------- 1 | import { Writable } from 'svelte/store'; 2 | import { ToastProps } from './common'; 3 | 4 | export interface ToastStore extends Writable { 5 | add(options: Partial): ToastProps; 6 | success(options: Partial): ToastProps; 7 | success(description: string): ToastProps; 8 | success(description: string, options: Partial): ToastProps; 9 | success( 10 | title: string, 11 | description: string, 12 | options?: Partial 13 | ): ToastProps; 14 | 15 | info(options: Partial): ToastProps; 16 | info(description: string): ToastProps; 17 | info(description: string, options: Partial): ToastProps; 18 | info( 19 | title: string, 20 | description: string, 21 | options?: Partial 22 | ): ToastProps; 23 | 24 | error(options: Partial): ToastProps; 25 | error(description: string): ToastProps; 26 | error(description: string, options: Partial): ToastProps; 27 | error( 28 | title: string, 29 | description: string, 30 | options?: Partial 31 | ): ToastProps; 32 | 33 | warning(options: Partial): ToastProps; 34 | warning(description: string): ToastProps; 35 | warning(description: string, options: Partial): ToastProps; 36 | warning( 37 | title: string, 38 | description: string, 39 | options?: Partial 40 | ): ToastProps; 41 | 42 | getById(uid: number): ToastProps; 43 | clearAll(): void; 44 | clearLast(): void; 45 | setDefaults(options: Partial): void; 46 | } 47 | 48 | const toasts: ToastStore; 49 | 50 | export default toasts; 51 | -------------------------------------------------------------------------------- /site/public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/public/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/src/components/Sidebar.svelte: -------------------------------------------------------------------------------- 1 | 32 | 33 | 59 | 60 | 69 | -------------------------------------------------------------------------------- /site/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | import resolve from '@rollup/plugin-node-resolve'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | import css from 'rollup-plugin-css-only'; 7 | import sveltePreprocess from 'svelte-preprocess'; 8 | 9 | const production = !process.env.ROLLUP_WATCH; 10 | 11 | function serve() { 12 | let server; 13 | 14 | function toExit() { 15 | if (server) server.kill(0); 16 | } 17 | 18 | return { 19 | writeBundle() { 20 | if (server) return; 21 | server = require('child_process').spawn( 22 | 'npm', 23 | ['run', 'start', '--', '--dev'], 24 | { 25 | stdio: ['ignore', 'inherit', 'inherit'], 26 | shell: true, 27 | } 28 | ); 29 | 30 | process.on('SIGTERM', toExit); 31 | process.on('exit', toExit); 32 | }, 33 | }; 34 | } 35 | 36 | export default { 37 | input: 'src/main.js', 38 | output: { 39 | sourcemap: true, 40 | format: 'iife', 41 | name: 'app', 42 | file: 'public/build/bundle.js', 43 | }, 44 | plugins: [ 45 | svelte({ 46 | compilerOptions: { 47 | // enable run-time checks when not in production 48 | dev: !production, 49 | }, 50 | preprocess: sveltePreprocess({ 51 | sourceMap: !production, 52 | postcss: true, 53 | babel: true, 54 | scss: { 55 | prependData: `@import "src/styles/vars.scss";`, 56 | }, 57 | }), 58 | }), 59 | // we'll extract any component CSS out into 60 | // a separate file - better for performance 61 | css({ output: 'bundle.css' }), 62 | 63 | // If you have external dependencies installed from 64 | // npm, you'll most likely need these plugins. In 65 | // some cases you'll need additional configuration - 66 | // consult the documentation for details: 67 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 68 | resolve({ 69 | browser: true, 70 | dedupe: ['svelte'], 71 | }), 72 | commonjs(), 73 | 74 | // In dev mode, call `npm run start` once 75 | // the bundle has been generated 76 | !production && serve(), 77 | 78 | // Watch the `public` directory and refresh the 79 | // browser on changes when not in production 80 | !production && livereload('public'), 81 | 82 | // If we're building for production (npm run build 83 | // instead of npm run dev), minify 84 | production && terser(), 85 | ], 86 | watch: { 87 | clearScreen: false, 88 | }, 89 | }; 90 | -------------------------------------------------------------------------------- /site/public/prism-vsc-theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * GHColors theme by Avi Aryan (http://aviaryan.in) 3 | * Inspired by Github syntax coloring 4 | */ 5 | 6 | code[class*='language-'], 7 | pre[class*='language-'] { 8 | color: #393a34; 9 | font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, 10 | monospace; 11 | direction: ltr; 12 | text-align: left; 13 | white-space: pre; 14 | word-spacing: normal; 15 | word-break: normal; 16 | font-size: 0.9em; 17 | line-height: 1.2em; 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | overflow: scroll; 28 | } 29 | 30 | pre > code[class*='language-'] { 31 | font-size: 1em; 32 | } 33 | 34 | pre[class*='language-']::-moz-selection, 35 | pre[class*='language-'] ::-moz-selection, 36 | code[class*='language-']::-moz-selection, 37 | code[class*='language-'] ::-moz-selection { 38 | background: #b3d4fc; 39 | } 40 | 41 | pre[class*='language-']::selection, 42 | pre[class*='language-'] ::selection, 43 | code[class*='language-']::selection, 44 | code[class*='language-'] ::selection { 45 | background: #b3d4fc; 46 | } 47 | 48 | /* Code blocks */ 49 | pre[class*='language-'] { 50 | padding: 1em; 51 | margin: 0.5em 0; 52 | overflow: auto; 53 | border: 1px solid #dddddd; 54 | background-color: white; 55 | } 56 | 57 | /* Inline code */ 58 | :not(pre) > code[class*='language-'] { 59 | padding: 0.2em; 60 | padding-top: 1px; 61 | padding-bottom: 1px; 62 | background: #f8f8f8; 63 | border: 1px solid #dddddd; 64 | } 65 | 66 | .token.comment, 67 | .token.prolog, 68 | .token.doctype, 69 | .token.cdata { 70 | color: #999988; 71 | font-style: italic; 72 | } 73 | 74 | .token.namespace { 75 | opacity: 0.7; 76 | } 77 | 78 | .token.string, 79 | .token.attr-value { 80 | color: #e3116c; 81 | } 82 | 83 | .token.punctuation, 84 | .token.operator { 85 | color: #393a34; /* no highlight */ 86 | } 87 | 88 | .token.entity, 89 | .token.url, 90 | .token.symbol, 91 | .token.number, 92 | .token.boolean, 93 | .token.variable, 94 | .token.constant, 95 | .token.property, 96 | .token.regex, 97 | .token.inserted { 98 | color: #36acaa; 99 | } 100 | 101 | .token.atrule, 102 | .token.keyword, 103 | .token.attr-name, 104 | .language-autohotkey .token.selector { 105 | color: #00a4db; 106 | } 107 | 108 | .token.function, 109 | .token.deleted, 110 | .language-autohotkey .token.tag { 111 | color: #9a050f; 112 | } 113 | 114 | .token.tag, 115 | .token.selector, 116 | .language-autohotkey .token.keyword { 117 | color: #00009f; 118 | } 119 | 120 | .token.important, 121 | .token.function, 122 | .token.bold { 123 | font-weight: bold; 124 | } 125 | 126 | .token.italic { 127 | font-style: italic; 128 | } 129 | -------------------------------------------------------------------------------- /src/toasts.js: -------------------------------------------------------------------------------- 1 | import { writable, get } from 'svelte/store'; 2 | 3 | function notificationsStore(initialValue = []) { 4 | const store = writable(initialValue); 5 | const { set, update, subscribe } = store; 6 | let defaultOptions = { 7 | duration: 3000, 8 | placement: 'bottom-right', 9 | type: 'info', 10 | theme: 'dark', 11 | }; 12 | function add(options) { 13 | const { 14 | duration = 3000, 15 | placement = 'bottom-right', 16 | type = 'info', 17 | theme = 'dark', 18 | ...rest 19 | } = { ...defaultOptions, ...options }; 20 | 21 | const uid = Date.now(); 22 | const obj = { 23 | ...rest, 24 | uid, 25 | placement, 26 | type, 27 | theme, 28 | duration, 29 | remove: () => { 30 | update((v) => v.filter((i) => i.uid !== uid)); 31 | }, 32 | update: (data) => { 33 | delete data.uid; 34 | const index = get(store)?.findIndex((v) => v?.uid === uid); 35 | if (index > -1) { 36 | update((v) => [ 37 | ...v.slice(0, index), 38 | { ...v[index], ...data }, 39 | ...v.slice(index + 1), 40 | ]); 41 | } 42 | }, 43 | }; 44 | update((v) => [...v, obj]); 45 | if (duration > 0) { 46 | setTimeout(() => { 47 | obj.remove(); 48 | if (typeof obj.onRemove === 'function') obj.onRemove(); 49 | }, duration); 50 | } 51 | return obj; 52 | } 53 | 54 | function getById(uid) { 55 | return get(store)?.find((v) => v?.uid === uid); 56 | } 57 | 58 | function clearAll() { 59 | set([]); 60 | } 61 | function clearLast() { 62 | update((v) => { 63 | return v.slice(0, v.length - 1); 64 | }); 65 | } 66 | 67 | function setDefaults(options) { 68 | defaultOptions = { ...defaultOptions, ...options }; 69 | } 70 | 71 | return { 72 | subscribe, 73 | add, 74 | success: getHelper('success', add), 75 | info: getHelper('info', add), 76 | error: getHelper('error', add), 77 | warning: getHelper('warning', add), 78 | clearAll, 79 | clearLast, 80 | getById, 81 | setDefaults, 82 | }; 83 | } 84 | const toasts = notificationsStore([]); 85 | export default toasts; 86 | 87 | function getHelper(type, add) { 88 | return function () { 89 | if (typeof arguments[0] === 'object') { 90 | const options = arguments[0]; 91 | return add({ ...options, type }); 92 | } else if ( 93 | typeof arguments[0] === 'string' && 94 | typeof arguments[1] === 'string' 95 | ) { 96 | const options = arguments[2] || {}; 97 | return add({ 98 | ...options, 99 | type, 100 | title: arguments[0], 101 | description: arguments[1], 102 | }); 103 | } else if (typeof arguments[0] === 'string') { 104 | const options = arguments[1] || {}; 105 | return add({ 106 | ...options, 107 | type, 108 | description: arguments[0], 109 | }); 110 | } 111 | }; 112 | } 113 | -------------------------------------------------------------------------------- /site/README.md: -------------------------------------------------------------------------------- 1 | *Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* 2 | 3 | --- 4 | 5 | # svelte app 6 | 7 | This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. 8 | 9 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 10 | 11 | ```bash 12 | npx degit sveltejs/template svelte-app 13 | cd svelte-app 14 | ``` 15 | 16 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 17 | 18 | 19 | ## Get started 20 | 21 | Install the dependencies... 22 | 23 | ```bash 24 | cd svelte-app 25 | npm install 26 | ``` 27 | 28 | ...then start [Rollup](https://rollupjs.org): 29 | 30 | ```bash 31 | npm run dev 32 | ``` 33 | 34 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. 35 | 36 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. 37 | 38 | If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense. 39 | 40 | ## Building and running in production mode 41 | 42 | To create an optimised version of the app: 43 | 44 | ```bash 45 | npm run build 46 | ``` 47 | 48 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). 49 | 50 | 51 | ## Single-page app mode 52 | 53 | By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. 54 | 55 | If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: 56 | 57 | ```js 58 | "start": "sirv public --single" 59 | ``` 60 | 61 | ## Using TypeScript 62 | 63 | This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with: 64 | 65 | ```bash 66 | node scripts/setupTypeScript.js 67 | ``` 68 | 69 | Or remove the script via: 70 | 71 | ```bash 72 | rm scripts/setupTypeScript.js 73 | ``` 74 | 75 | ## Deploying to the web 76 | 77 | ### With [Vercel](https://vercel.com) 78 | 79 | Install `vercel` if you haven't already: 80 | 81 | ```bash 82 | npm install -g vercel 83 | ``` 84 | 85 | Then, from within your project folder: 86 | 87 | ```bash 88 | cd public 89 | vercel deploy --name my-project 90 | ``` 91 | 92 | ### With [surge](https://surge.sh/) 93 | 94 | Install `surge` if you haven't already: 95 | 96 | ```bash 97 | npm install -g surge 98 | ``` 99 | 100 | Then, from within your project folder: 101 | 102 | ```bash 103 | npm run build 104 | surge public my-project.surge.sh 105 | ``` 106 | -------------------------------------------------------------------------------- /site/src/components/Table.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 |
    8 |
    9 |
    10 | 11 | 12 | 13 | {#each columns as column (column)} 14 | 17 | {/each} 18 | 27 | 28 | 29 | 30 | 31 | {#each data as row (row)} 32 | 33 | {#each columns as column (column)} 34 | 37 | {/each} 38 | 39 | {/each} 40 | 72 | 73 | 74 | 75 |
    15 | {column.header} 16 |
    35 |
    {row[column.dataIndex]}
    36 |
    76 |
    77 |
    78 |
    79 |
    -------------------------------------------------------------------------------- /site/src/pages/BootstrapToastDocs.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 |

    BootstrapToast

    8 |
    9 |
    10 |

    Dark Theme

    11 | Light theme toasts 16 |
    17 |
    18 |

    Light Theme

    19 | Dark theme toasts 24 |
    25 |
    26 |

    27 | BootstrapToast component takes "data" prop which is a toast object as 28 | described here. You 29 | can use BootstrapToast like this. 30 |

    31 | `} 36 | /> 37 | { 41 | const toast = toasts.add({ 42 | description: 'Message body', 43 | component: BootstrapToast, // this will override toast component provided by ToastContainer 44 | }); 45 | }; 46 | `} 47 | /> 48 | 52 | 53 | 54 | 55 | 56 | 57 | `} 58 | /> 59 | 60 |

    61 | BootstrapToast accepts following optional slots: 62 |

    63 | 67 | 68 | 69 | `} 70 | /> 71 |

    Icon Slot

    72 |

    73 | You can provide your own custom icon or any element to be shown as toast 74 | icon instead of predefined icons. 75 |

    76 | 77 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | `} 88 | /> 89 | 90 |

    Extra Slot

    91 |

    92 | You can provide some extra content to be shown below toast message, 93 | something like timestamp, some link to other page etc. 94 |

    95 | 96 | 100 | 101 | 08:15:30 AM 102 | 103 | 104 | `} 105 | /> 106 | 107 |

    Close Icon Slot

    108 |

    109 | By default, a cross icon is show inside close button but if you want to 110 | change this icon, you can provide your own icon or some text. 111 |

    112 | 113 | 117 | 118 | Close 119 | 120 | 121 | `} 122 | /> 123 |
    124 | -------------------------------------------------------------------------------- /site/src/pages/CustomToastDocs.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | Svelte Toasts: Custom Toast 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
    21 |

    Custom Toast

    22 |

    23 | If FlatToast or 24 | BootstrapToast do not fullfil your needs even after overriding styles, you can create and 27 | use your own toast component. ToastContainer has default slot which acts as Toast 28 | Component template. You can write inline markup or create a stand alone component 29 | which takes a "data" prop which is actually a toast object. You read about toast 30 | object here 31 |

    32 |

    Inline Template

    33 | `} 38 | /> 39 | { 43 | const toast = toasts.add({ 44 | title: 'Hello' 45 | description: 'Message body', 46 | }); 47 | }; 48 | `} 49 | /> 50 | 54 | 55 | 56 | 57 |
    58 | 59 |

    {data.title}

    60 |
    61 |

    {data.description}

    62 |
    63 | Some other content here. 64 |
    65 |
    66 |     67 | `} 68 | /> 69 | 70 |

    Custom Toast Component

    71 | `} 77 | /> 78 | 79 | 83 | 84 |
    85 | 86 |

    {data.title}

    87 |
    88 |

    {data.description}

    89 |
    90 | Some other content here. 91 |
    92 |
    93 | `} 94 | /> 95 | 96 |

    And now you can use that component as toast template

    97 | 98 | `} 103 | /> 104 | { 110 | const toast = toasts.add({ 111 | title: 'Hello' 112 | description: 'Message body', 113 | }); 114 | }; 115 | `} 116 | /> 117 | 121 | 122 | 123 | 124 | 125 | 126 | `} 127 | /> 128 |
    129 | -------------------------------------------------------------------------------- /site/src/pages/FlatToastDocs.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | Svelte Toasts: FlatToast 9 | 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
    22 |

    FlatToast

    23 |
    24 |
    25 |

    Dark Theme

    26 | Light theme toasts 31 |
    32 |
    33 |

    Light Theme

    34 | Dark theme toasts 35 |
    36 |
    37 |

    38 | FlatToast component takes "data" prop which is a toast object as described here. You can use FlatToast like this. 42 |

    43 | `} 48 | /> 49 | { 53 | const toast = toasts.add({ 54 | description: 'Message body', 55 | component: BootstrapToast, // this will override toast component provided by ToastContainer 56 | }); 57 | }; 58 | `} 59 | /> 60 | 64 | 65 | 66 | 67 | 68 | 69 | `} 70 | /> 71 | 72 |

    FlatToast accepts following optional slots:

    73 | 77 | 78 | 79 | `} 80 | /> 81 |

    Icon Slot

    82 |

    83 | You can provide your own custom icon or any element to be shown as toast 84 | icon instead of predefined icons. 85 |

    86 | 87 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | `} 98 | /> 99 | 100 |

    Extra Slot

    101 |

    102 | You can provide some extra content to be shown below toast message, 103 | something like timestamp, some link to other page etc. 104 |

    105 | 106 | 110 | 111 | 08:15:30 AM 112 | 113 | 114 | `} 115 | /> 116 | 117 |

    Close Icon Slot

    118 |

    119 | By default, a cross icon is show inside close button but if you want to 120 | change this icon, you can provide your own icon or some text. 121 |

    122 | 123 | 127 | 128 | Close 129 | 130 | 131 | `} 132 | /> 133 |
    134 | -------------------------------------------------------------------------------- /src/ToastContainer.svelte: -------------------------------------------------------------------------------- 1 | 93 | 94 | {#each placements as placement} 95 |
    96 |
      97 | {#each $toasts 98 | .filter((n) => n.placement === placement) 99 | .reverse() as toast (toast.uid)} 100 |
    • 105 | {#if toast.component} 106 | 107 | {:else} 108 | 109 | {/if} 110 |
      • 111 | {/each} 112 |
    113 |
    114 | {/each} 115 | 116 | 176 | -------------------------------------------------------------------------------- /site/src/pages/StoreDocs.svelte: -------------------------------------------------------------------------------- 1 | 74 | 75 | 76 | Svelte Toasts: Store 77 | 78 | 79 | 83 | 84 | 85 | 86 | 87 | 88 | 89 |
    90 |

    Toasts Store

    91 | 92 | 93 | 94 |

    You can import toasts store like this.

    95 | { 114 | toast.remove(); 115 | // or 116 | // toasts.getById(toast.uid).remove(); 117 | }, 3000); 118 | 119 | toasts.error('Something went wrong. Try again later.'); 120 | `} 121 | /> 122 | 123 |

    124 | Since toasts is a store so you can use $ syntax and you 125 | will get an array or toasts which you can loop through and implement how you 126 | want to show your toasts but most common cases can be handled by just using ToastContainer component. 130 |

    131 |

    132 | 138 | 139 | 140 | 141 | 142 | `} 143 | /> 144 |

    145 |

    146 | Read more about ToastContainer 147 | here. 148 |

    149 | 150 | -------------------------------------------------------------------------------- /site/src/pages/ToastContainerDocs.svelte: -------------------------------------------------------------------------------- 1 | 77 | 78 |
    79 |

    ToastsContainer

    80 | 81 |
    82 | 83 |

    84 | ToastContainer sets default options for toasts and handles toasts 85 | placement/position. There are 7 placements allowed i.e "bottom-right", 86 | "bottom-left", "top-right", "top-left", "top-center", 'bottom-center", 87 | "center-center". 88 |

    89 | { 95 | const toast = toasts.add({ 96 | title: 'Message title', 97 | description: 'Message body', 98 | duration: 10000, // 0 or negative to avoid auto-remove 99 | placement: 'bottom-right', 100 | type: 'info', 101 | theme: 'dark', 102 | placement: 'bottom-right', 103 | type: 'success', 104 | theme, 105 | onClick: () => {}, 106 | onRemove: () => {}, 107 | // component: BootstrapToast, // allows to override toast component/template per toast 108 | }); 109 | 110 | }; 111 | 112 | 113 |
    114 |

    Svelte Toasts

    115 | 116 | 117 | 118 | 119 |
    120 | `} 121 | /> 122 | 123 |

    124 | There are some default options that will be added to every toast's data but 125 | we can override those default options for all toasts. e.g. 126 |

    127 |

    128 | 141 | 142 | 143 | `} 144 | /> 145 |

    146 |

    147 | ToastContainer takes a default slot as a toast template. This must be a 148 | component which should accept "data" prop which contains all toast related 149 | data. "data" is object with following properties and other user specified 150 | extra properties. 151 |

    152 |
      153 |
    • title
      • 154 |
    • description
      • 155 |
    • remove
      • 156 |
    • update
      • 157 |
    • onClick
      • 158 |
    • onRemove
      • 159 |
    • component
      • 160 |
    • placement
      • 161 |
    • showProgress
      • 162 |
    • theme
      • 163 |
    • type
      • 164 |
    • duration
      • 165 |
    166 | 167 |

    168 | Read more about toast component props here. 172 |

    173 | 174 | -------------------------------------------------------------------------------- /site/src/pages/ToastDocs.svelte: -------------------------------------------------------------------------------- 1 | 112 | 113 |
    114 |

    Toast

    115 |

    116 | A toast is shown based on a toast object in toasts store. When you call 117 | toasts.add(options) then a toast object is added in toasts store which then 118 | is shown by ToastContainer. A toast object looks like this. 119 |

    120 | { /* implementation */ }, 132 | update: () => { /* implementation */ }, 133 | onClick: () => { console.log("Toast clicked"); } 134 | onRemove: () => { console.log("Toast removed"); }, 135 | // and whatever properties that you want to add when calling toasts.add(options) 136 | } 137 | `} 138 | /> 139 |

    Below is a detail description of every property.

    140 | 141 |
    142 | 143 |

    There are two builtin toast components in this package.

    144 | 145 |
      146 |
    • 147 | FlatToast 148 |
      • 149 |
    • 150 | BootstrapToast 153 |
      • 154 |
    155 |

    156 | You can provide as default slot to ToastContainer to use that component for 157 | all toasts but if you want to use a different design/template for a specific 158 | toast, you can provide component property in toast options. 159 |

    160 |

    161 | `} 166 | /> 167 | { 171 | const toast = toasts.add({ 172 | description: 'Message body', 173 | component: BootstrapToast, // this will override toast component provided by ToastContainer 174 | }); 175 | }; 176 | `} 177 | /> 178 | 182 | 183 | 184 | 185 | 186 | 187 | `} 188 | /> 189 |

    190 | 191 | -------------------------------------------------------------------------------- /site/src/App.svelte: -------------------------------------------------------------------------------- 1 | 49 | 50 | 51 | 52 |
    53 |
    54 |
    55 | {#if open} 56 | { 65 | open = false; 66 | }} 67 | > 68 | 74 | 75 | {:else} 76 | { 85 | open = true; 86 | }} 87 | > 88 | 94 | 95 | {/if} 96 |
    97 | 98 | 106 | 118 | 119 |

    Svelte Toasts

    120 | 121 |
    122 |
    125 |
    126 | Star 134 |
    135 |
    136 |
    137 |
    138 | 139 |
    140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 |
    162 |
    163 |     164 | 165 | 181 | -------------------------------------------------------------------------------- /site/src/pages/Demo.svelte: -------------------------------------------------------------------------------- 1 | 62 | 63 |
    66 |
    67 |

    Demo

    68 |
    69 |
    70 | 80 |