Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix toast id duplicate key error with auto-generated uuid or given key #13

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix toast id duplicate key error with auto-generated uuid or given key #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 8 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ Every `toast` object has following structure:
{
title: "Welcome",
description: "Thanks for trying svelte-toasts!",
uid: 1615153277482,
key: "something unique thing", // optional, will be generated randomly if not provided
placement: "bottom-right",
type: "success",
theme: "dark",
Expand Down Expand Up @@ -128,7 +128,7 @@ import { toasts } from 'svelte-toasts';

Store `toasts` contains an array of toasts objects. It has following methods:

<table class="min-w-full divide-y divide-gray-200"><thead class="bg-gray-100"><tr><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name </th><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type </th><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Description </th></tr></thead> <tbody class="bg-white divide-y divide-gray-200"><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">add</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This is key function to show toast. You can pass options and modify the generated toast. It will return toast object which you can use to modify or remove that specific toast programmatically, e.g. toast1.update({ title: 'New Title'})</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">removeAll</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This function removes all toasts and clears store state to empty array</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">removeLast</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This function removes one toast (if any) that was generated at the end</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">getById</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This function returns toast data for given id. Every toast has a unique uid</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">setDefaults</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This function sets default options so you don't need to pass those options again and again, e.g. theme, placement etc.</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">success</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Show success/green toast.</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">info</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Show info/blue toast.</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">error</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Show error/red toast.</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">warning</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Show warning/orange toast.</div></td> </tr></tbody></table>
<table class="min-w-full divide-y divide-gray-200"><thead class="bg-gray-100"><tr><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name </th><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type </th><th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Description </th></tr></thead> <tbody class="bg-white divide-y divide-gray-200"><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">add</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This is key function to show toast. You can pass options and modify the generated toast. It will return toast object which you can use to modify or remove that specific toast programmatically, e.g. toast1.update({ title: 'New Title'})</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">removeAll</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This function removes all toasts and clears store state to empty array</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">removeLast</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This function removes one toast (if any) that was generated at the end</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">getById</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This function returns toast data for given id. Every toast has a unique key</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">setDefaults</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">This function sets default options so you don't need to pass those options again and again, e.g. theme, placement etc.</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">success</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Show success/green toast.</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">info</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Show info/blue toast.</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">error</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Show error/red toast.</div></td> </tr><tr><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 text-bold">warning</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Function</div></td><td class="px-6 py-4" style=""><div class="text-sm text-gray-600 undefined">Show warning/orange toast.</div></td> </tr></tbody></table>

## `BootstrapToast`

Expand Down Expand Up @@ -238,7 +238,7 @@ export type Placement =

```ts
export interface ToastProps {
uid: number;
key: string;
title?: string;
description: string;
duration: number;
Expand All @@ -261,40 +261,24 @@ export interface ToastStore extends Writable<ToastProps[]> {
success(options: Partial<ToastProps>): ToastProps;
success(description: string): ToastProps;
success(description: string, options: Partial<ToastProps>): ToastProps;
success(
title: string,
description: string,
options?: Partial<ToastProps>
): ToastProps;
success(title: string, description: string, options?: Partial<ToastProps>): ToastProps;

info(options: Partial<ToastProps>): ToastProps;
info(description: string): ToastProps;
info(description: string, options: Partial<ToastProps>): ToastProps;
info(
title: string,
description: string,
options?: Partial<ToastProps>
): ToastProps;
info(title: string, description: string, options?: Partial<ToastProps>): ToastProps;

error(options: Partial<ToastProps>): ToastProps;
error(description: string): ToastProps;
error(description: string, options: Partial<ToastProps>): ToastProps;
error(
title: string,
description: string,
options?: Partial<ToastProps>
): ToastProps;
error(title: string, description: string, options?: Partial<ToastProps>): ToastProps;

warning(options: Partial<ToastProps>): ToastProps;
warning(description: string): ToastProps;
warning(description: string, options: Partial<ToastProps>): ToastProps;
warning(
title: string,
description: string,
options?: Partial<ToastProps>
): ToastProps;
warning(title: string, description: string, options?: Partial<ToastProps>): ToastProps;

getById(uid: number): ToastProps;
getByKey(key: string): ToastProps;
clearAll(): void;
clearLast(): void;
setDefaults(options: Partial<ToastProps>): void;
Expand Down
248 changes: 248 additions & 0 deletions XCmUQd/src/BootstrapToast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
import {SvelteComponentTyped} from 'svelte'
///<reference types="svelte" />
<></>;function render() {

/**
* Default theme for all toasts
* @type { Theme }
*/
let theme = 'light';theme = __sveltets_any(theme);;

/**
* Default theme for all toasts
* @type { ToastProps }
*/
let data = {};data = __sveltets_any(data);;
const onRemove = (e) => {
e.stopPropagation();
data.remove();
if (typeof data.onRemove === 'function') data.onRemove();
};
const onClick = () => {
if (typeof data.onClick === 'function') data.onClick();
};
;
() => (<>

<div
class={`st-toast bootstrap ${data.theme || theme} ${data.type || 'info'}`}
role="alert"
aria-live="assertive"
aria-atomic="true"
onclick={onClick}
>
{(data.title) ? <>
<div class="st-toast-header">
<slot name="icon">
{(data.type === 'success') ? <>
<svg
class="st-toast-icon"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path
d="M10,1c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4,9-9S15,1,10,1z M8.7,13.5l-3.2-3.2l1-1l2.2,2.2l4.8-4.8l1,1L8.7,13.5z"
/>
<path
fill="none"
d="M8.7,13.5l-3.2-3.2l1-1l2.2,2.2l4.8-4.8l1,1L8.7,13.5z"
data-icon-path="inner-path"
opacity="0"
/>
</svg>
</> : (data.type === 'info') ? <>
<svg
class="st-toast-icon"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
><path
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,7Zm4,17.12H12V21.88h2.88V15.12H13V12.88h4.13v9H20Z"
/></svg
>
</> : (data.type === 'error') ? <>
<svg
class="st-toast-icon"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
aria-hidden="true"
><path
d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
/><path
d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
data-icon-path="inner-path"
opacity="0"
/></svg
>
</> : <>
<svg
class="st-toast-icon"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
aria-hidden="true"
><path
d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M9.2,5h1.5v7H9.2V5z M10,16c-0.6,0-1-0.4-1-1s0.4-1,1-1 s1,0.4,1,1S10.6,16,10,16z"
/><path
d="M9.2,5h1.5v7H9.2V5z M10,16c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S10.6,16,10,16z"
data-icon-path="inner-path"
opacity="0"
/></svg
>
</> }
</slot>
<strong class="st-toast-title">{data.title}</strong>

<button
data-notification-btn
class="st-toast-close-btn"
type="button"
aria-label="close"
onclick={onRemove}
>
<slot name="close-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
class="bx--toast-notification__close-icon"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
/>
</svg>
</slot>
</button>
</div>
</> : <></>}
<div class="st-toast-body" {...__sveltets_ensureType(Boolean, !!(!data.title))}>
{(!data.title) ? <>
<slot name="icon">
{(data.type === 'success') ? <>
<svg
class="st-toast-icon"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path
d="M10,1c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4,9-9S15,1,10,1z M8.7,13.5l-3.2-3.2l1-1l2.2,2.2l4.8-4.8l1,1L8.7,13.5z"
/>
<path
fill="none"
d="M8.7,13.5l-3.2-3.2l1-1l2.2,2.2l4.8-4.8l1,1L8.7,13.5z"
data-icon-path="inner-path"
opacity="0"
/>
</svg>
</> : (data.type === 'info') ? <>
<svg
class="st-toast-icon"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
><path
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,7Zm4,17.12H12V21.88h2.88V15.12H13V12.88h4.13v9H20Z"
/></svg
>
</> : (data.type === 'error') ? <>
<svg
class="st-toast-icon"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
aria-hidden="true"
><path
d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
/><path
d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
data-icon-path="inner-path"
opacity="0"
/></svg
>
</> : <>
<svg
class="st-toast-icon"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
aria-hidden="true"
><path
d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M9.2,5h1.5v7H9.2V5z M10,16c-0.6,0-1-0.4-1-1s0.4-1,1-1 s1,0.4,1,1S10.6,16,10,16z"
/><path
d="M9.2,5h1.5v7H9.2V5z M10,16c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S10.6,16,10,16z"
data-icon-path="inner-path"
opacity="0"
/></svg
>
</> }
</slot>
</> : <></>}
<span class="st-toast-description">{data.description}</span>
{(!data.title) ? <>
<button
data-notification-btn
class="st-toast-close-btn"
type="button"
aria-label="close"
onclick={onRemove}
>
<slot name="close-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
class="bx--toast-notification__close-icon"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
/>
</svg>
</slot>
</button>
</> : <></>}
<div class="st-toast-extra">
<slot name="extra" />
</div>
</div>
</div>


</>);
return { props: {theme: theme , data: data} as {
/**
* Default theme for all toasts
* @type { Theme }
*/theme?: typeof theme,
/**
* Default theme for all toasts
* @type { ToastProps }
*/data?: typeof data}, slots: {'icon': {}, 'close-icon': {}, 'extra': {}}, getters: {}, events: {} }}

export default class BootstrapToast extends SvelteComponentTyped<BootstrapToastProps,BootstrapToastEvents,BootstrapToastSlots>{
};
const r = (__sveltets_with_any_event(render)) ();
const _BootstrapToastProps = r.props;
const _BootstrapToastEvents = r.events;
const _BootstrapToastSlots = r.slots;
export type BootstrapToastProps = typeof _BootstrapToastProps;
export type BootstrapToastEvents = typeof _BootstrapToastEvents;
export type BootstrapToastSlots = typeof _BootstrapToastSlots;
Loading