TypeScript Types

interface ToastOptions {
  type?: ToastType;
  title: string;
  description?: string;
  duration?: number;
  position?: Position;
  icon?: string;
  showIcon?: boolean;
  showProgress?: boolean;
  actions?: Action[];
  actionsLayout?: ActionsLayout;
  avatar?: Avatar;
  maxToasts?: number;
  ui?: UIOverrides;
}

type ToastType = "success" | "error" | "info" | "warning";

<script setup lang="ts">
const toast = useToast();

const type: ToastType = "success";
toast.add({ type, title: "Success!" });
</script>

type Position =
  | "top-right"
  | "top-left"
  | "top-center"
  | "bottom-right"
  | "bottom-left"
  | "bottom-center";

<script setup lang="ts">
const toast = useToast();

const position: Position = "bottom-center";
toast.info("Positioned", "At bottom center", { position });
</script>

interface Action {
  label: string;
  onClick: () => void;
}

<script setup lang="ts">
const toast = useToast();

const actions: Action[] = [
  {
    label: "Confirm",
    onClick: () => console.log("Confirmed"),
  },
  {
    label: "Cancel",
    onClick: () => toast.clear(),
  },
];

toast.add({
  type: "warning",
  title: "Confirm Action",
  actions,
});
</script>

type ActionsLayout = "horizontal" | "vertical";

<script setup lang="ts">
const toast = useToast();

const layout: ActionsLayout = "vertical";

toast.add({
  type: "info",
  title: "Choose",
  actionsLayout: layout,
  actions: [
    { label: "Option 1", onClick: () => {} },
    { label: "Option 2", onClick: () => {} },
  ],
});
</script>

interface Avatar {
  type?: AvatarType;
  src?: string; // Required for 'image' type
  icon?: string; // Required for 'icon' type
  text?: string; // Required for 'text' type
}

type AvatarType = "image" | "icon" | "text";

<script setup lang="ts">
const toast = useToast();

const avatar: Avatar = {
  type: "image",
  src: "https://i.pravatar.cc/150?img=12",
};

toast.info("John mentioned you", "In the discussion", { avatar });
</script>

<script setup lang="ts">
const toast = useToast();

const avatar: Avatar = {
  type: "icon",
  icon: "i-lucide-trophy",
};

toast.success("Achievement!", "You earned a badge", { avatar });
</script>

<script setup lang="ts">
const toast = useToast();

const avatar: Avatar = {
  type: "text",
  text: "JD",
};

toast.info("Message", "From John Doe", { avatar });
</script>

interface UIOverrides {
  root?: string;
  title?: string;
  description?: string;
  icon?: string;
  actions?: string;
  action?: string;
  progress?: string;
  avatar?: string;
}

<script setup lang="ts">
const toast = useToast();

const ui: UIOverrides = {
  root: "rounded-2xl border-2 border-dashed",
  title: "text-xl font-bold",
  description: "text-sm italic",
};

toast.success("Custom", "Styled with Tailwind", { ui });
</script>

interface ModuleOptions {
  position?: Position;
  duration?: number;
  maxToasts?: number;
  theme?: Theme;
  showIcon?: boolean;
  showProgress?: boolean;
}

type Theme = "light" | "dark" | "system";

export default defineNuxtConfig({
  notify: {
    position: "top-right",
    duration: 5000,
    maxToasts: 5,
    theme: "system",
    showIcon: true,
    showProgress: false,
  } satisfies ModuleOptions,
});

interface UseToast {
  success: (
    title: string,
    description?: string,
    options?: Partial<ToastOptions>
  ) => void;
  error: (
    title: string,
    description?: string,
    options?: Partial<ToastOptions>
  ) => void;
  info: (
    title: string,
    description?: string,
    options?: Partial<ToastOptions>
  ) => void;
  warning: (
    title: string,
    description?: string,
    options?: Partial<ToastOptions>
  ) => void;
  add: (options: ToastOptions) => void;
  clear: () => void;
}

<script setup lang="ts">
const toast: UseToast = useToast();

toast.success("Title", "Description");
toast.add({ type: "info", title: "Info" });
toast.clear();
</script>

<script setup lang="ts">
import type {
  ToastOptions,
  ToastType,
  Position,
  Action,
  Avatar,
  UIOverrides,
} from "nuxt-notify";

const toast = useToast();

// Define toast options with full typing
const type: ToastType = "warning";
const position: Position = "top-right";

const actions: Action[] = [
  {
    label: "Approve",
    onClick: () => {
      toast.success("Approved", "Request has been approved");
    },
  },
  {
    label: "Reject",
    onClick: () => {
      toast.error("Rejected", "Request has been rejected");
    },
  },
];

const avatar: Avatar = {
  type: "image",
  src: "https://i.pravatar.cc/150?img=5",
};

const ui: UIOverrides = {
  root: "shadow-xl",
  title: "font-semibold",
};

const options: ToastOptions = {
  type,
  title: "Review Required",
  description: "Please review this request",
  duration: 10000,
  position,
  showProgress: true,
  actions,
  avatar,
  ui,
};

function showToast() {
  toast.add(options);
}
</script>

<template>
  <button @click="showToast">Show Typed Toast</button>
</template>

<script setup lang="ts">
// Import individual types
import type { ToastOptions, Position, Action } from "nuxt-notify";

// Or import all types
import type * as NotifyTypes from "nuxt-notify";
</script>

function isValidPosition(value: string): value is Position {
  const validPositions: Position[] = [
    "top-right",
    "top-left",
    "top-center",
    "bottom-right",
    "bottom-left",
    "bottom-center",
  ];
  return validPositions.includes(value as Position);
}

function isValidToastType(value: string): value is ToastType {
  const validTypes: ToastType[] = ["success", "error", "info", "warning"];
  return validTypes.includes(value as ToastType);
}

// Usage
const userInput = "top-right";
if (isValidPosition(userInput)) {
  toast.info("Valid", "", { position: userInput });
}

function createToastOptions(
  type: ToastType,
  title: string,
  overrides?: Partial<ToastOptions>
): ToastOptions {
  return {
    type,
    title,
    duration: 5000,
    showProgress: true,
    ...overrides,
  };
}

// Usage
const options = createToastOptions("success", "Saved", {
  description: "Changes saved successfully",
  position: "bottom-right",
});

toast.add(options);