vue-toastflow 0.0.1

package/src/styles.css

@@ -0,0 +1,180 @@
+:root {
+    /* base look */
+    --tf-toast-font-family: system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+
+    --tf-toast-radius: 0.75rem;
+    --tf-toast-padding: 1rem;
+
+    --normal-bg: #fff;
+    --normal-border: #e6e8eb;
+    --normal-text: #11181c;
+
+    --loading-bg: hsl(48, 100%, 96%);
+    --loading-border: hsl(46, 100%, 88%);
+    --loading-text: hsl(40, 100%, 32%);
+
+    --tf-toast-bg: var(--normal-bg);
+    --tf-toast-color: var(--normal-text);
+    --tf-toast-border-color: var(--normal-border);
+
+    --success-bg: hsl(143, 85%, 96%);
+    --success-border: hsl(145, 92%, 87%);
+    --success-text: hsl(140, 100%, 27%);
+
+    --info-bg: hsl(208, 100%, 97%);
+    --info-border: hsl(221, 91%, 93%);
+    --info-text: hsl(210, 92%, 45%);
+
+    --warning-bg: hsl(49, 100%, 97%);
+    --warning-border: hsl(49, 91%, 84%);
+    --warning-text: hsl(31, 92%, 45%);
+
+    --error-bg: hsl(359, 100%, 97%);
+    --error-border: hsl(359, 100%, 94%);
+    --error-text: hsl(360, 100%, 45%);
+
+    /* text */
+    --tf-toast-title-font-size: 0.85rem;
+    --tf-toast-title-font-weight: 600;
+    --tf-toast-description-font-size: 0.8rem;
+    --tf-toast-description-color: var(--tf-toast-color);
+    --tf-toast-created-at-font-size: 0.7rem;
+
+    /* layout inside toast */
+    --tf-toast-gap: 0.8rem;
+
+    /* accent bar */
+    --tf-toast-accent-loading: var(--loading-text);
+    --tf-toast-accent-default: var(--normal-text);
+    --tf-toast-accent-success: var(--success-text);
+    --tf-toast-accent-error: var(--error-text);
+    --tf-toast-accent-warning: var(--warning-text);
+    --tf-toast-accent-info: var(--info-text);
+
+    /* icon */
+    --tf-toast-icon-size: 24px;
+
+    --tf-toast-icon-loading: var(--loading-text);
+    --tf-toast-icon-default: var(--normal-text);
+    --tf-toast-icon-success: var(--success-text);
+    --tf-toast-icon-error: var(--error-text);
+    --tf-toast-icon-warning: var(--warning-text);
+    --tf-toast-icon-info: var(--info-text);
+
+    /* close button */
+    --tf-toast-close-size: 18px;
+
+    --tf-toast-close-border-color: var(--tf-toast-border-color);
+    --tf-toast-close-color: var(--tf-toast-color);
+    --tf-toast-close-bg: var(--tf-toast-bg);
+    --tf-toast-close-ring-color: var(--tf-toast-border-color);
+
+    /* progress bar */
+    --tf-toast-progress-height: 4px;
+    --tf-toast-progress-bg: transparent;
+    --tf-toast-progress-bar-bg: var(--tf-toast-accent-success); /* fallback; per-type je v class */
+    --tf-toast-progress-duration: 5000ms;
+
+    --tf-toast-motion-offset: 10px;
+}
+
+.tf-toast--paused .tf-toast-progress-bar {
+    animation-play-state: paused;
+}
+
+.tf-toast-item[data-position^="top-"] {
+    --tf-toast-motion-offset: -10px;
+}
+
+.tf-toast-item[data-position^="bottom-"] {
+    --tf-toast-motion-offset: 10px;
+}
+
+.Toastflow__animation-enter-active {
+    animation: Toastflow__enter-kf 260ms cubic-bezier(0.5, 1, 0.25, 1);
+    animation-fill-mode: both;
+}
+
+.Toastflow__animation-leave-active {
+    animation: Toastflow__leave-kf 220ms ease;
+    animation-fill-mode: both;
+}
+
+.Toastflow__animation-clearAll {
+    animation: Toastflow__clearAll-kf 260ms cubic-bezier(0.22, 1, 0.36, 1);
+    animation-fill-mode: both;
+}
+
+.Toastflow__animation-move {
+    transition: transform 260ms cubic-bezier(0.5, 1, 0.25, 1);
+    will-change: transform;
+}
+
+.Toastflow__animation-bump {
+    animation: Toastflow__bump-kf 140ms ease-out;
+    animation-fill-mode: both;
+}
+
+.Toastflow__animation-update {
+    animation: Toastflow__update-kf 320ms cubic-bezier(0.33, 1, 0.68, 1);
+    animation-fill-mode: both;
+}
+
+@keyframes Toastflow__enter-kf {
+    0% {
+        transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.9);
+        opacity: 0;
+    }
+    100% {
+        transform: translate3d(0, 0, 0) scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes Toastflow__leave-kf {
+    0% {
+        transform: translate3d(0, 0, 0) scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.9);
+        opacity: 0;
+    }
+}
+
+@keyframes Toastflow__clearAll-kf {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes Toastflow__bump-kf {
+    0% {
+        transform: scale(1);
+    }
+    40% {
+        transform: scale(1.01);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes Toastflow__update-kf {
+    0% {
+        opacity: 0.4;
+        transform: scale(0.985);
+    }
+    40% {
+        opacity: 1;
+        transform: scale(1.01);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}

package/src/symbols.ts

@@ -0,0 +1,4 @@
+import type {InjectionKey} from "vue";
+import type {ToastStore} from "toastflow-core";
+
+export const toastStoreKey: InjectionKey<ToastStore> = Symbol("toast-store");

package/src/toast.ts

@@ -0,0 +1,80 @@
+import {
+  ToastConfig,
+  ToastContentInput,
+  ToastEvent,
+  ToastId,
+  ToastLoadingConfig,
+  ToastLoadingInput,
+  ToastLoadingResult,
+  ToastShowInput,
+  ToastState,
+  ToastStore,
+  ToastUpdateInput,
+} from "toastflow-core";
+
+let globalStore: ToastStore | null = null;
+
+export function setToastStore(store: ToastStore) {
+  globalStore = store;
+}
+
+export function getToastStore(): ToastStore {
+  if (!globalStore) {
+    throw new Error(
+      "[vue-toastflow] Toast store not initialized. Did you install the plugin?",
+    );
+  }
+  return globalStore;
+}
+
+export const toast = {
+  getState(): ToastState {
+    return getToastStore().getState();
+  },
+  subscribeEvents(listener: (event: ToastEvent) => void): () => void {
+    return getToastStore().subscribeEvents(listener);
+  },
+  show(options: ToastShowInput): ToastId {
+    return getToastStore().show(options);
+  },
+  loading<T>(
+    input: ToastLoadingInput<T>,
+    config: ToastLoadingConfig<T>,
+  ): ToastLoadingResult<T> {
+    return getToastStore().loading(input, config);
+  },
+  update(id: ToastId, options: ToastUpdateInput): void {
+    return getToastStore().update(id, options);
+  },
+  dismiss(id: ToastId): void {
+    return getToastStore().dismiss(id);
+  },
+  dismissAll(): void {
+    return getToastStore().dismissAll();
+  },
+  pause(id: ToastId): void {
+    return getToastStore().pause(id);
+  },
+  resume(id: ToastId): void {
+    return getToastStore().resume(id);
+  },
+  getConfig(): ToastConfig {
+    return getToastStore().getConfig();
+  },
+
+  toast(options: ToastContentInput): ToastId {
+    return getToastStore().show({ ...options, type: "default" });
+  },
+  success(options: ToastContentInput): ToastId {
+    return getToastStore().show({ ...options, type: "success" });
+  },
+  error(options: ToastContentInput): ToastId {
+    return getToastStore().show({ ...options, type: "error" });
+  },
+  info(options: ToastContentInput): ToastId {
+    return getToastStore().show({ ...options, type: "info" });
+  },
+  warning(options: ToastContentInput): ToastId {
+    return getToastStore().show({ ...options, type: "warning" });
+  },
+};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "types": [
+      "vue"
+    ],
+    "baseUrl": "."
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "vite.config.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,22 @@
+import {defineConfig} from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "node:path";
+
+export default defineConfig({
+    plugins: [vue()],
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, "src/index.ts"),
+            name: "Toastflow",
+            fileName: (format) => `toastflow.${format}.js`
+        },
+        rollupOptions: {
+            external: ["vue", "toastflow-core"],
+            output: {
+                globals: {
+                    vue: "Vue"
+                }
+            }
+        }
+    }
+});