Thomas G. Lopes commited on
Commit
22dad9f
·
1 Parent(s): 7357f85

add toasts

Browse files
src/lib/components/toaster.svelte CHANGED
@@ -2,19 +2,19 @@
2
  import { fly } from "svelte/transition";
3
  import { toaster } from "./toaster.svelte.js";
4
  import { Progress } from "melt/components";
5
- import Close from "~icons/material-symbols/close-rounded";
6
  </script>
7
 
8
  <div {...toaster.root} class="fixed !right-4 !bottom-4 flex w-[300px] flex-col" style:--toasts={toaster.toasts.length}>
9
  {#each toaster.toasts as toast, i (toast.id)}
10
  <div
11
- class="relative flex h-[--toast-height] w-full flex-col justify-center rounded-xl bg-white px-4 text-left transition dark:bg-gray-800"
12
  {...toast.content}
13
  style:--n={toaster.toasts.length - i}
14
  in:fly={{ y: 60, opacity: 0.9 }}
15
  out:fly={{ y: 20 }}
16
  >
17
- <h3 {...toast.title} class="text-sm font-medium whitespace-nowrap">
18
  {toast.data.title}
19
  </h3>
20
 
@@ -27,9 +27,9 @@
27
  <button
28
  {...toast.close}
29
  aria-label="dismiss toast"
30
- class="absolute top-1 right-1 bg-transparent text-gray-300 hover:text-gray-400 dark:hover:text-gray-100"
31
  >
32
- <Close class="h-3.5 w-3.5" />
33
  </button>
34
 
35
  {#if toast.closeDelay !== 0}
@@ -39,7 +39,7 @@
39
  <div {...progress.root} class="relative h-full w-full overflow-hidden bg-gray-200 dark:bg-gray-950">
40
  <div
41
  {...progress.progress}
42
- class="h-full w-full -translate-x-[var(--progress)]"
43
  class:bg-green-400={toast.data.variant === "success"}
44
  class:bg-orange-400={toast.data.variant === "warning"}
45
  class:bg-red-500={toast.data.variant === "error"}
@@ -60,7 +60,7 @@
60
 
61
  [data-melt-toaster-root] {
62
  --gap: 0.75rem;
63
- --hover-offset: 1rem;
64
  --toast-height: 4rem;
65
  --hidden-offset: 0.75rem;
66
 
 
2
  import { fly } from "svelte/transition";
3
  import { toaster } from "./toaster.svelte.js";
4
  import { Progress } from "melt/components";
5
+ import Close from "~icons/carbon/close";
6
  </script>
7
 
8
  <div {...toaster.root} class="fixed !right-4 !bottom-4 flex w-[300px] flex-col" style:--toasts={toaster.toasts.length}>
9
  {#each toaster.toasts as toast, i (toast.id)}
10
  <div
11
+ class="relative flex h-(--toast-height) w-full flex-col justify-center rounded-xl bg-white px-4 text-left transition dark:bg-gray-800"
12
  {...toast.content}
13
  style:--n={toaster.toasts.length - i}
14
  in:fly={{ y: 60, opacity: 0.9 }}
15
  out:fly={{ y: 20 }}
16
  >
17
+ <h3 {...toast.title} class="text-sm font-medium whitespace-nowrap text-gray-700 dark:text-gray-300">
18
  {toast.data.title}
19
  </h3>
20
 
 
27
  <button
28
  {...toast.close}
29
  aria-label="dismiss toast"
30
+ class="absolute top-2 right-2 bg-transparent text-gray-300 hover:text-gray-400 dark:hover:text-gray-100"
31
  >
32
+ <Close class="size-4" />
33
  </button>
34
 
35
  {#if toast.closeDelay !== 0}
 
39
  <div {...progress.root} class="relative h-full w-full overflow-hidden bg-gray-200 dark:bg-gray-950">
40
  <div
41
  {...progress.progress}
42
+ class="h-full w-full -translate-x-(--progress)"
43
  class:bg-green-400={toast.data.variant === "success"}
44
  class:bg-orange-400={toast.data.variant === "warning"}
45
  class:bg-red-500={toast.data.variant === "error"}
 
60
 
61
  [data-melt-toaster-root] {
62
  --gap: 0.75rem;
63
+ --hover-offset: 0rem;
64
  --toast-height: 4rem;
65
  --hidden-offset: 0.75rem;
66
 
src/lib/components/toaster.svelte.ts CHANGED
@@ -6,7 +6,9 @@ export type ToastData = {
6
  variant: "success" | "warning" | "error";
7
  };
8
 
9
- export const toaster = new Toaster<ToastData>({});
 
 
10
 
11
  export function addToast(args: AddToastProps<ToastData>) {
12
  toaster.addToast(args);
 
6
  variant: "success" | "warning" | "error";
7
  };
8
 
9
+ export const toaster = new Toaster<ToastData>({
10
+ hover: "pause-all",
11
+ });
12
 
13
  export function addToast(args: AddToastProps<ToastData>) {
14
  toaster.addToast(args);