{
- if (item.pausable) pause()
- }}
- on:mouseleave={resume}
->
-
- {#if item.component}
-
- {:else}
- {@html item.msg}
- {/if}
-
- {#if item.dismissable}
-
close(ev)}
- on:keydown={(ev) => {
- if (ev instanceof KeyboardEvent && ['Enter', ' '].includes(ev.key)) close(ev)
- }}
- />
- {/if}
-
-
-
-
diff --git a/src/lib/View.svelte b/src/lib/View.svelte
new file mode 100644
index 0000000..2405ba4
--- /dev/null
+++ b/src/lib/View.svelte
@@ -0,0 +1,99 @@
+
+
+
+
{#if item.unsafe}{@html item.msg}{:else}{item.msg}{/if}
+ {#if item.dismissable}
+
+ {/if}
+
+
+
+
diff --git a/src/lib/index.js b/src/lib/index.js
index 2cb0146..c2b2f88 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,5 +1,38 @@
export { default as SvelteToast } from './SvelteToast.svelte'
export { toast } from './stores.js'
+export const PRESET = {
+ /** @param {string} args */
+ _p(args) {
+ const [t, r, b, l, w, x, y, v] = args.split(';')
+ return JSON.parse(
+ `{"theme":{"--toastContainerTop":"${t}","--toastContainerRight":"${r}","--toastContainerBottom":"${b}","--toastContainerLeft":"${l}"${w ? `,"--toastWidth":"${w}"` : ''}},"intro":{${x ? `"x":"${x}"` : `"y":"${y}"`}},"reversed":${v}}`
+ )
+ },
+ /** @returns {SvelteToastOptions} - Top-right positioning preset */
+ get TOP_RIGHT() {
+ return this._p('1.5rem;2rem;auto;auto;;256;;true')
+ },
+ /** @returns {SvelteToastOptions} - Bottom-right positioning preset */
+ get BOTTOM_RIGHT() {
+ return this._p('auto;2rem;1.5rem;auto;;256;;false')
+ },
+ /** @returns {SvelteToastOptions} - Bottom-left positioning preset */
+ get BOTTOM_LEFT() {
+ return this._p('auto;auto;1.5rem;2rem;;-256;;false')
+ },
+ /** @returns {SvelteToastOptions} - Top-left positioning preset */
+ get TOP_LEFT() {
+ return this._p('1.5rem;auto;auto;2rem;;-256;;true')
+ },
+ /** @returns {SvelteToastOptions} - Top-center positioning preset */
+ get TOP_CENTER() {
+ return this._p('1.5rem;auto;auto;calc(50vw - var(--toastWidth)/2);16rem;;-64;true')
+ },
+ /** @returns {SvelteToastOptions} - Bottom-center positioning preset */
+ get BOTTOM_CENTER() {
+ return this._p('auto;auto;1.5rem;calc(50vw - var(--toastWidth)/2);16rem;;64;false')
+ }
+}
/**
* @typedef {import('./stores.js').SvelteToastOptions} SvelteToastOptions
diff --git a/src/lib/stores.js b/src/lib/stores.js
index 4ba5471..5b32ae4 100644
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -9,105 +9,90 @@ import { writable } from 'svelte/store'
*/
/**
- * @typedef {Object} SvelteToastCustomComponent
- * @property {SvelteComponent} src - custom Svelte Component
- * @property {Object
} [props] - props to pass into custom component
- * @property {string} [sendIdTo] - forward toast id to prop name
+ * @typedef {Object} SvelteToastPushed
+ * @prop {number} id - toast id
+ * @prop {Promise} onpop - promise that resolves to value when toast closed
*/
/**
- * @callback SvelteToastOnPopCallback
- * @param {number} [id] - optionally get the toast id if needed
- * @param {object} [details]
+ * @typedef {Object} SvelteToastPop
+ * @prop {number} [id] - remove toast with specified id
+ * @prop {string} [target] - remove all toasts from target container
+ * @prop {any} [value] - onpop resolve value
*/
/**
* @typedef {Object} SvelteToastOptions
- * @property {number} [id] - unique id generated for every toast
- * @property {string} [target] - container target name to send toast to
- * @property {string} [msg] - toast message
- * @property {number} [duration] - duration of progress bar tween from initial to next
- * @property {number} [initial] - initial progress bar value
- * @property {number} [next] - next progress bar value
- * @property {boolean} [pausable] - pause progress bar tween on mouse hover
- * @property {boolean} [dismissable] - allow dissmiss with close button
- * @property {boolean} [reversed] - display toasts in reverse order
- * @property {FlyParams} [intro] - toast intro fly animation settings
- * @property {Object} [theme] - css var overrides
- * @property {string[]} [classes] - user-defined classes
- * @property {SvelteToastOnPopCallback} [onpop] - callback that runs on toast dismiss
- * @property {SvelteToastCustomComponent} [component] - send custom Svelte Component as a message
- * @property {number} [progress] - DEPRECATED
+ * @prop {number} [id] - unique id generated for each toast
+ * @prop {string} [target] - container target name to send toast to
+ * @prop {string} [msg] - toast message
+ * @prop {boolean} [unsafe] - allow unsafe html in toast message
+ * @prop {number} [duration] - duration of progress bar tween from initial to next
+ * @prop {number} [initial] - initial progress bar value
+ * @prop {number} [next] - next progress bar value
+ * @prop {'none'|'hover'|'hidden'|'both'} [pausable] - pause the progress bar tween
+ * @prop {boolean} [dismissable] - allow dismiss with close button
+ * @prop {boolean} [reversed] - display toasts in reverse order
+ * @prop {FlyParams} [intro] - toast intro fly animation settings
+ * @prop {FlyParams} [outro] - toast outro fly animation settings
+ * @prop {Object} [theme] - css var overrides
+ * @prop {string} [class] - class string applied to toast item
+ * @prop {SvelteComponent} [view] - Svelte component used as toast view
+ * @prop {Object} [_props]
+ * @prop {(value:any)=>void} [_resolve]
*/
-/** @type {SvelteToastOptions} */
-const defaults = {
- duration: 4000,
- initial: 1,
- next: 0,
- pausable: false,
- dismissable: true,
- reversed: false,
- intro: { x: 256 }
-}
-
function createToast() {
+ /** @type {import('svelte/store').Writable} */
const { subscribe, update } = writable(new Array())
+
/** @type {Object} */
- const options = {}
+ const defaults = {}
let count = 0
- /** @param {any} obj */
- function _obj(obj) {
- return obj instanceof Object
- }
-
function _init(target = 'default', opts = {}) {
- options[target] = opts
- return options
+ defaults[target] = opts
}
/**
* Send a new toast
- * @param {(string|SvelteToastOptions)} msg
+ * @param {string|SvelteToastOptions} msg
* @param {SvelteToastOptions} [opts]
- * @returns {number}
+ * @returns {SvelteToastPushed}
*/
function push(msg, opts) {
- const param = {
- target: 'default',
- ...(_obj(msg) ? /** @type {SvelteToastOptions} */ (msg) : { ...opts, msg })
- }
- const conf = options[param.target] || {}
- const entry = {
- ...defaults,
- ...conf,
- ...param,
- theme: { ...conf.theme, ...param.theme },
- classes: [...(conf.classes || []), ...(param.classes || [])],
- id: ++count
- }
- update((n) => (entry.reversed ? [...n, entry] : [entry, ...n]))
- return count
+ const param = { target: 'default', ...(typeof msg === 'object' ? msg : { msg }), ...opts }
+ const id = ++count
+ /** @type {(value:any)=>void} */
+ let _resolve
+ const onpop = new Promise((resolve) => (_resolve = resolve))
+ update((n) => [...n, { ...defaults[param.target], ...param, id, _resolve }])
+ return { id, onpop }
}
/**
* Remove toast(s)
- * - toast.pop() // removes the last toast
- * - toast.pop(0) // remove all toasts
- * - toast.pop(id) // removes the toast with specified `id`
+ * - toast.pop() // remove the lastest toast
+ * - toast.pop(id) // remove toast with specified id
* - toast.pop({ target: 'foo' }) // remove all toasts from target `foo`
- * @param {(number|Object<'target',string>)} [id]
+ * - toast.pop(0) // remove all toasts
+ *
+ * @param {number|SvelteToastPop} [id]
+ * @param {SvelteToastPop} [opts]
*/
- function pop(id) {
+ function pop(id, opts) {
update((n) => {
- if (!n.length || id === 0) return []
- // Filter function is deprecated; shim added for backward compatibility
- if (typeof id === 'function') return n.filter((i) => id(i))
- if (_obj(id))
- return n.filter(/** @type {SvelteToastOptions[]} i */ (i) => i.target !== id.target)
- const found = id || Math.max(...n.map((i) => i.id))
- return n.filter((i) => i.id !== found)
+ if (!n.length) return n
+ const { id: _id, target, value } = { ...(typeof id === 'object' ? id : { id }), ...opts }
+ const resolve = (/** @type {any[]} */ items) => items.forEach((i) => i._resolve(value))
+ const val = _id || target
+ if (val) {
+ const key = _id ? 'id' : 'target'
+ resolve(n.filter((i) => i[key] === val))
+ return n.filter((i) => i[key] !== val)
+ }
+ resolve(_id === 0 ? n : n.slice(-1))
+ return _id === 0 ? [] : n.slice(0, -1)
})
}
@@ -117,8 +102,7 @@ function createToast() {
* @param {SvelteToastOptions} [opts]
*/
function set(id, opts) {
- /** @type {any} */
- const param = _obj(id) ? id : { ...opts, id }
+ const param = { ...(typeof id === 'object' ? id : { id }), ...opts }
update((n) => {
const idx = n.findIndex((i) => i.id === param.id)
if (idx > -1) {