Alert / Dialog

JavaScript alert and dialog system.

Setup

Import the alert script in your page:

<script>
  import "@/components/ui/scripts/alert.js";
</script>

Basic Alert

window.showAlert({
  type: "success",
  variant: "soft",
  title: "Success",
  text: "Operation completed successfully!",
  icon: true,
  duration: 3000,
});

Confirmation Dialog

window.showAlert({
  type: "warning",
  variant: "soft",
  title: "Are you sure?",
  text: "This action cannot be undone.",
  icon: true,
  buttons: [
    {
      text: "Cancel",
      variant: "outline",
      size: "sm",
      type: "warning",
    },
    {
      text: "Confirm",
      variant: "solid",
      size: "sm",
      type: "warning",
      onClick: () => {
        // Handle confirmation
      },
    },
  ],
});

Options

Option	Type	Description
`type`	string	Alert type (success, error, warning, info)
`variant`	string	Style variant (soft, solid)
`title`	string	Alert title
`text`	string	Alert message
`icon`	boolean	Show type icon
`duration`	number	Auto-dismiss in milliseconds
`position`	object	`{ vertical, horizontal }`
`buttons`	array	Button configurations

Button Options

Option	Type	Description
`text`	string	Button text
`variant`	string	Style (solid, outline, soft)
`size`	string	Size (sm, md, lg)
`type`	string	Color type
`icon`	string	Icon class
`onClick`	function	Click handler