vue-toastflow 0.0.1

package/src/components/ToastContainer.vue

@@ -0,0 +1,350 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import Toast from "./Toast.vue";
+import type {
+  ToastAnimation,
+  ToastConfig,
+  ToastId,
+  ToastInstance,
+  ToastPosition,
+  ToastStore,
+} from "toastflow-core";
+import { getToastStore } from "../toast";
+
+const positions: ToastPosition[] = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+];
+
+const store: ToastStore = getToastStore();
+
+const toasts = ref<ToastInstance[]>([]);
+
+// event-driven keys
+const progressResetMap = ref<Record<ToastId, number>>({});
+const duplicateMap = ref<Record<ToastId, number>>({});
+const updateMap = ref<Record<ToastId, number>>({});
+
+let unsubscribeState: (() => void) | null = null;
+let unsubscribeEvents: (() => void) | null = null;
+
+onMounted(function () {
+  unsubscribeState = store.subscribe(function (state) {
+    toasts.value = state.toasts;
+  });
+
+  unsubscribeEvents = store.subscribeEvents(function (event) {
+    if (event.kind === "timer-reset") {
+      progressResetMap.value[event.id] = Math.random();
+    }
+
+    if (event.kind === "duplicate") {
+      duplicateMap.value[event.id] = Math.random();
+    }
+
+    if (event.kind === "update") {
+      updateMap.value[event.id] = Math.random();
+    }
+  });
+});
+
+onUnmounted(function () {
+  if (unsubscribeState) {
+    unsubscribeState();
+  }
+  if (unsubscribeEvents) {
+    unsubscribeEvents();
+  }
+});
+
+function getProgressResetKey(id: ToastId): number {
+  return progressResetMap.value[id] ?? 0;
+}
+
+function getDuplicateKey(id: ToastId): number {
+  return duplicateMap.value[id] ?? 0;
+}
+
+function getUpdateKey(id: ToastId): number {
+  return updateMap.value[id] ?? 0;
+}
+
+const grouped = computed(function () {
+  const byPos: Record<ToastPosition, ToastInstance[]> = {
+    "top-left": [],
+    "top-center": [],
+    "top-right": [],
+    "bottom-left": [],
+    "bottom-center": [],
+    "bottom-right": [],
+  };
+
+  for (const toast of toasts.value) {
+    byPos[toast.position].push(toast);
+  }
+
+  return byPos;
+});
+
+const baseConfig: ToastConfig = store.getConfig();
+const stackConfigs = ref<Record<ToastPosition, ToastConfig>>({
+  "top-left": { ...baseConfig, position: "top-left" },
+  "top-center": { ...baseConfig, position: "top-center" },
+  "top-right": { ...baseConfig, position: "top-right" },
+  "bottom-left": { ...baseConfig, position: "bottom-left" },
+  "bottom-center": { ...baseConfig, position: "bottom-center" },
+  "bottom-right": { ...baseConfig, position: "bottom-right" },
+});
+
+const globalZIndex = computed(function () {
+  if (!toasts.value.length) {
+    return baseConfig.zIndex;
+  }
+  return Math.max(...toasts.value.map((toast) => toast.zIndex));
+});
+
+function stackConfig(position: ToastPosition): ToastConfig {
+  return stackConfigs.value[position] ?? { ...baseConfig, position };
+}
+
+function stackStyle(position: ToastPosition): Record<string, string> {
+  const { offset, width } = stackConfig(position);
+  // Lock the stack width, so it doesn't collapse when leaving items get absolute-positioned
+  const style: Record<string, string> = { width, maxWidth: "100%" };
+
+  if (position.startsWith("top-")) {
+    style.top = offset;
+  }
+  if (position.startsWith("bottom-")) {
+    style.bottom = offset;
+  }
+
+  if (position.endsWith("left")) {
+    style.left = offset;
+  } else if (position.endsWith("right")) {
+    style.right = offset;
+  } else if (position.endsWith("center")) {
+    style.left = "50%";
+    style.transform = "translateX(-50%)";
+  }
+
+  return style;
+}
+
+function stackAlignClass(position: ToastPosition): string {
+  if (position.endsWith("left")) {
+    return "tf-toast-stack--left";
+  }
+  if (position.endsWith("center")) {
+    return "tf-toast-stack--center";
+  }
+  return "tf-toast-stack--right";
+}
+
+function stackAxisClass(position: ToastPosition): string | null {
+  if (position.startsWith("bottom-")) {
+    return "tf-toast-stack-inner--bottom";
+  }
+  return null;
+}
+
+function handleDismiss(id: ToastId) {
+  store.dismiss(id);
+}
+
+function beforeLeave(el: Element) {
+  const element = el as HTMLElement;
+  const parent = element.parentElement;
+  if (!parent || parent.children.length <= 1) {
+    return;
+  }
+
+  const top = element.offsetTop;
+  const parentHeight = parent.clientHeight;
+  const parentWidth = parent.clientWidth;
+
+  parent.style.minHeight = `${parentHeight}px`;
+  element.style.position = "absolute";
+  element.style.width = `${parentWidth}px`;
+  element.style.left = "0";
+  element.style.right = "0";
+  element.style.top = `${top}px`;
+}
+
+function afterLeave(el: Element) {
+  const element = el as HTMLElement;
+  const parent = element.parentElement;
+  if (parent) {
+    parent.style.minHeight = "";
+  }
+
+  element.style.position = "";
+  element.style.width = "";
+  element.style.left = "";
+  element.style.right = "";
+  element.style.top = "";
+}
+
+watch(
+  toasts,
+  function (current) {
+    const ids = new Set(
+      current.map(function (toast) {
+        return toast.id;
+      }),
+    );
+
+    for (const key of Object.keys(progressResetMap.value)) {
+      if (!ids.has(key as ToastId)) {
+        delete progressResetMap.value[key as ToastId];
+      }
+    }
+
+    for (const key of Object.keys(duplicateMap.value)) {
+      if (!ids.has(key as ToastId)) {
+        delete duplicateMap.value[key as ToastId];
+      }
+    }
+
+    for (const key of Object.keys(updateMap.value)) {
+      if (!ids.has(key as ToastId)) {
+        delete updateMap.value[key as ToastId];
+      }
+    }
+  },
+  { deep: false },
+);
+
+function animationForToast(toast: ToastInstance): Partial<ToastAnimation> {
+  return {
+    ...baseConfig.animation,
+    ...toast.animation,
+  };
+}
+
+watch(
+  grouped,
+  function (byPos) {
+    const next = { ...stackConfigs.value };
+
+    (Object.keys(byPos) as ToastPosition[]).forEach(function (position) {
+      const first = byPos[position][0];
+      if (first) {
+        next[position] = {
+          ...baseConfig,
+          ...first,
+          position,
+          animation: {
+            ...baseConfig.animation,
+            ...first.animation,
+          },
+        };
+      }
+    });
+
+    stackConfigs.value = next;
+  },
+  { deep: false },
+);
+</script>
+
+<template>
+  <div class="tf-toast-root" :style="{ zIndex: globalZIndex }">
+    <div
+      v-for="position in positions"
+      :key="position"
+      class="tf-toast-stack"
+      :class="stackAlignClass(position)"
+      :style="stackStyle(position)"
+    >
+      <TransitionGroup
+        :name="stackConfig(position).animation.name"
+        @before-leave="beforeLeave"
+        @after-leave="afterLeave"
+        tag="div"
+        :class="['tf-toast-stack-inner', stackAxisClass(position)]"
+        :style="{ gap: stackConfig(position).gap }"
+      >
+        <div
+          v-for="toast in grouped[position]"
+          :key="toast.id"
+          class="tf-toast-item"
+          :style="{ width: toast.width, maxWidth: '100%' }"
+          :data-position="toast.position"
+        >
+          <slot
+            v-if="$slots.default"
+            :toast="toast"
+            :progressResetKey="getProgressResetKey(toast.id)"
+            :duplicateKey="getDuplicateKey(toast.id)"
+            :updateKey="getUpdateKey(toast.id)"
+            :bumpAnimationClass="animationForToast(toast).bump"
+            :clearAllAnimationClass="animationForToast(toast).clearAll"
+            :updateAnimationClass="animationForToast(toast).update"
+            :dismiss="handleDismiss"
+          />
+
+          <Toast
+            v-else
+            :toast="toast"
+            :progressResetKey="getProgressResetKey(toast.id)"
+            :duplicateKey="getDuplicateKey(toast.id)"
+            :updateKey="getUpdateKey(toast.id)"
+            :bumpAnimationClass="animationForToast(toast).bump"
+            :clearAllAnimationClass="animationForToast(toast).clearAll"
+            :updateAnimationClass="animationForToast(toast).update"
+            @dismiss="handleDismiss"
+          />
+        </div>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tf-toast-root {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+}
+
+.tf-toast-stack {
+  position: absolute;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+}
+
+.tf-toast-stack-inner {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+}
+
+.tf-toast-stack-inner--bottom {
+  min-height: 100%;
+  justify-content: flex-end;
+}
+
+.tf-toast-stack--left {
+  justify-content: flex-start;
+}
+
+.tf-toast-stack--center {
+  justify-content: center;
+}
+
+.tf-toast-stack--right {
+  justify-content: flex-end;
+}
+
+.tf-toast-item {
+  pointer-events: auto;
+  width: 100%;
+}
+</style>

package/src/components/ToastProgress.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type {ToastType} from "toastflow-core";
+
+const {type} = defineProps<{
+  type: ToastType;
+}>();
+</script>
+
+<template>
+  <div class="tf-toast-progress">
+    <div
+        class="tf-toast-progress-bar"
+        :class="`tf-toast-progress-bar--${type}`"
+    />
+  </div>
+</template>
+
+<style scoped>
+.tf-toast-progress {
+  height: var(--tf-toast-progress-height);
+  width: 100%;
+  border-radius: 0 0 var(--tf-toast-radius) var(--tf-toast-radius);
+  background: var(--tf-toast-progress-bg);
+}
+
+.tf-toast-progress-bar {
+  height: 100%;
+  animation-name: tf-toast-progress;
+  animation-duration: var(--tf-toast-progress-duration, 5000ms);
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+.tf-toast-progress-bar--default {
+  background: var(--tf-toast-accent-default);
+}
+
+.tf-toast-progress-bar--success {
+  background: var(--tf-toast-accent-success);
+}
+
+.tf-toast-progress-bar--error {
+  background: var(--tf-toast-accent-error);
+}
+
+.tf-toast-progress-bar--warning {
+  background: var(--tf-toast-accent-warning);
+}
+
+.tf-toast-progress-bar--info {
+  background: var(--tf-toast-accent-info);
+}
+
+@keyframes tf-toast-progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}
+</style>

package/src/components/icons/ArrowPath.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M4.755 10.059a7.5 7.5 0 0 1 12.548-3.364l1.903 1.903h-3.183a.75.75 0 1 0 0 1.5h4.992a.75.75 0 0 0 .75-.75V4.356a.75.75 0 0 0-1.5 0v3.18l-1.9-1.9A9 9 0 0 0 3.306 9.67a.75.75 0 1 0 1.45.388Zm15.408 3.352a.75.75 0 0 0-.919.53 7.5 7.5 0 0 1-12.548 3.364l-1.902-1.903h3.183a.75.75 0 0 0 0-1.5H2.984a.75.75 0 0 0-.75.75v4.992a.75.75 0 0 0 1.5 0v-3.18l1.9 1.9a9 9 0 0 0 15.059-4.035.75.75 0 0 0-.53-.918Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/src/components/icons/Bell.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/src/components/icons/CheckCircle.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/src/components/icons/InfoCircle.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/src/components/icons/QuestionMarkCircle.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 0 1-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 0 1-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 0 1-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584ZM12 18a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/src/components/icons/XCircle.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/src/components/icons/XMark.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/src/index.ts

@@ -0,0 +1,17 @@
+import "./styles.css";
+
+export * from "toastflow-core";
+export * from "./plugin";
+export * from "./toast";
+
+export { default as ToastContainer } from "./components/ToastContainer.vue";
+export { default as Toast } from "./components/Toast.vue";
+export { default as ToastProgress } from "./components/ToastProgress.vue";
+
+export { default as ArrowPath } from "./components/icons/ArrowPath.vue";
+export { default as Bell } from "./components/icons/Bell.vue";
+export { default as CheckCircle } from "./components/icons/CheckCircle.vue";
+export { default as InfoCircle } from "./components/icons/InfoCircle.vue";
+export { default as QuestionMarkCircle } from "./components/icons/QuestionMarkCircle.vue";
+export { default as XCircle } from "./components/icons/XCircle.vue";
+export { default as XMark } from "./components/icons/XMark.vue";

package/src/plugin.ts

@@ -0,0 +1,16 @@
+import type { App, Plugin } from "vue";
+import { createToastStore, type ToastConfig } from "toastflow-core";
+import { toastStoreKey } from "./symbols";
+import { setToastStore } from "./toast";
+
+export function createToastflow(config: Partial<ToastConfig> = {}): Plugin {
+  const store = createToastStore(config);
+
+  setToastStore(store);
+
+  return {
+    install(app: App) {
+      app.provide(toastStoreKey, store);
+    },
+  };
+}